feat(webui): polish agent output and app discovery

webui/src/components/Sidebar.tsx

@@ -37,6 +37,7 @@ interface SidebarProps {
   onOpenApps: () => void;
   onOpenSkills: () => void;
   onOpenAutomations: () => void;
+  onSettingsIntent?: () => void;
   onOpenSearch: () => void;
   activeUtility?: "apps" | "skills" | "automations" | null;
   onToggleArchived: () => void;
@@ -156,6 +157,7 @@ export function Sidebar(props: SidebarProps) {
           collapsed={collapsed}
           label={t("sidebar.apps")}
           onClick={props.onOpenApps}
+          onIntent={props.onSettingsIntent}
           active={props.activeUtility === "apps"}
           icon={<Blocks className="h-4 w-4" />}
         />
@@ -163,6 +165,7 @@ export function Sidebar(props: SidebarProps) {
           collapsed={collapsed}
           label={t("sidebar.skills.title")}
           onClick={props.onOpenSkills}
+          onIntent={props.onSettingsIntent}
           active={props.activeUtility === "skills"}
           icon={<Brain className="h-4 w-4" />}
         />
@@ -170,6 +173,7 @@ export function Sidebar(props: SidebarProps) {
           collapsed={collapsed}
           label={t("sidebar.automations", { defaultValue: "Automations" })}
           onClick={props.onOpenAutomations}
+          onIntent={props.onSettingsIntent}
           active={props.activeUtility === "automations"}
           icon={<CalendarClock className="h-4 w-4" />}
         />
@@ -231,6 +235,7 @@ export function Sidebar(props: SidebarProps) {
           collapsed={collapsed}
           label={t("sidebar.settings")}
           onClick={props.onOpenSettings}
+          onIntent={props.onSettingsIntent}
           className={collapsed ? undefined : "flex-1"}
           icon={<Settings className="h-4 w-4" />}
         />
@@ -249,6 +254,7 @@ function SidebarActionButton({
   className,
   shortcut,
   ariaKeyShortcuts,
+  onIntent,
 }: {
   collapsed: boolean;
   label: string;
@@ -258,6 +264,7 @@ function SidebarActionButton({
   className?: string;
   shortcut?: string;
   ariaKeyShortcuts?: string;
+  onIntent?: () => void;
 }) {
   const title = shortcut ? `${label} (${shortcut})` : collapsed ? label : undefined;
 
@@ -270,8 +277,10 @@ function SidebarActionButton({
       aria-keyshortcuts={ariaKeyShortcuts}
       title={title}
       onClick={() => onClick()}
+      onFocus={onIntent}
+      onPointerEnter={onIntent}
       className={cn(
-        "group h-8 min-w-0 gap-2 overflow-hidden rounded-full font-medium text-sidebar-foreground/85 hover:bg-sidebar-accent/75 hover:text-sidebar-foreground",
+        "touch-target group h-8 min-w-0 gap-2 overflow-hidden rounded-full font-medium text-sidebar-foreground/85 hover:bg-sidebar-accent/75 hover:text-sidebar-foreground",
         "transition-[width,padding,border-radius,color,background-color] duration-300 ease-out",
         collapsed
           ? "w-9 justify-center gap-0 rounded-xl px-0"