feat(desktop): local CopilotKit Intelligence from the app alone, in the CopilotKit visual system

app/package.json

@@ -20,6 +20,8 @@
     "@copilotkit/a2ui-renderer": "1.77.0",
     "@copilotkit/react-core": "1.77.0",
     "@fontsource-variable/inter": "^5.3.0",
+    "@fontsource-variable/plus-jakarta-sans": "5.3.0",
+    "@fontsource-variable/spline-sans-mono": "5.3.0",
     "@openbot/shared": "workspace:*",
     "@shadcn/react": "^0.3.0",
     "@tabler/icons-react": "^3.36.1",

app/src/components/app-sidebar/app-sidebar.tsx

@@ -64,6 +64,7 @@ import { Button } from "../ui/button";
 import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "../ui/empty";
 import { Channel } from "./channel";
 import { ChannelPagination } from "./channel-pagination";
+import { IntelligenceRow } from "./intelligence-row";
 
 const appLinkOptions = { to: "/" } satisfies LinkOptions;
 const adminLinkOptions = { to: "/admin" } satisfies LinkOptions;
@@ -410,6 +411,8 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
               <span className="text-sm trackint-tight">Connections</span>
             </SidebarMenuButton>
           </SidebarMenuItem>
+          {/* Inside OpenBot Desktop with a local Intelligence stack only; nothing otherwise. */}
+          <IntelligenceRow />
           <SidebarMenuItem>
             <DropdownMenu>
               <DropdownMenuTrigger

app/src/components/app-sidebar/intelligence-row.tsx

@@ -0,0 +1,54 @@
+import { IconChartDots, IconLoader2 } from "@tabler/icons-react";
+import { SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
+import {
+  desktopShell,
+  type ShellIpc,
+  useIntelligenceDashboard,
+} from "@/lib/desktop/intelligence-dashboard";
+
+/**
+ * Intelligence, beside Skills and Agents, inside OpenBot Desktop with a local Intelligence stack.
+ *
+ * It opens the dashboard in the browser rather than navigating here, so it is a button, not a link.
+ * The row says it is opening the moment it is pressed and stays disabled until the browser has it.
+ */
+export function IntelligenceRow({
+  shell = desktopShell(),
+}: {
+  shell?: ShellIpc | null;
+}) {
+  const dashboard = useIntelligenceDashboard(shell);
+  if (!dashboard.available) return null;
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton
+        aria-busy={dashboard.opening}
+        className="hover:bg-foreground/5 h-10"
+        disabled={dashboard.opening}
+        onClick={dashboard.open}
+      >
+        <div className="size-[28px] flex items-center justify-center">
+          {dashboard.opening ? (
+            <IconLoader2
+              aria-hidden="true"
+              className="motion-safe:animate-spin"
+            />
+          ) : (
+            <IconChartDots aria-hidden="true" />
+          )}
+        </div>
+        <span className="text-sm trackint-tight">
+          {dashboard.opening ? "Opening…" : "Intelligence"}
+        </span>
+      </SidebarMenuButton>
+      {dashboard.failure ? (
+        <p
+          className="px-2 pb-1 text-xs text-muted-foreground text-pretty"
+          role="status"
+        >
+          {dashboard.failure}
+        </p>
+      ) : null}
+    </SidebarMenuItem>
+  );
+}

app/src/components/layout/sidebar-shell.tsx

@@ -1,10 +1,21 @@
-import { type CSSProperties, type ReactNode, useEffect, useState } from "react";
+import {
+  type CSSProperties,
+  type ReactNode,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 
-import { SidebarProvider } from "@/components/ui/sidebar";
+import {
+  SidebarProvider,
+  SidebarResizeProvider,
+} from "@/components/ui/sidebar";
 import {
   applySidebarOpen,
   parseStoredSidebarOpen,
+  parseStoredSidebarWidth,
   SIDEBAR_STORAGE_KEY,
+  SIDEBAR_WIDTH_STORAGE_PREFIX,
 } from "@/lib/sidebar";
 
 /**
@@ -15,22 +26,46 @@ import {
  * `defaultOpen` to true). Driving it as controlled state is a dozen lines, and three copies of a
  * dozen lines is three chances for one shell to forget the preference the other two remember.
  *
- * `width` is what actually differs between the shells. The app's roster earns 340px because its
- * rows are two-line message previews; admin and settings hold short nav labels and earn 300px.
+ * `width` is what differs between the shells before anybody resizes one. The app's roster earns
+ * 340px because its rows are two-line message previews; admin and settings hold short nav labels and
+ * earn 300px. Dragging the sidebar's edge (`SidebarRail`) changes it, and each shell remembers its
+ * own under its `name`.
  */
 export function SidebarShell({
   children,
   className,
-  width,
+  name,
+  width: defaultWidth,
 }: {
   children: ReactNode;
   className?: string;
+  /** Whose width this is: each shell remembers its own, under this name. */
+  name: string;
+  /** The width before anybody drags the sidebar's edge. */
   width: string;
 }) {
   // Read before the first paint, so a shell somebody left collapsed never flashes open.
   const [open, setOpen] = useState(() =>
     parseStoredSidebarOpen(window.localStorage.getItem(SIDEBAR_STORAGE_KEY)),
   );
+  const widthKey = `${SIDEBAR_WIDTH_STORAGE_PREFIX}${name}`;
+  const [width, setWidth] = useState(() =>
+    parseStoredSidebarWidth(
+      window.localStorage.getItem(widthKey),
+      defaultWidth,
+    ),
+  );
+  // While the edge is dragged, the sidebar follows the pointer instead of easing after it.
+  const [resizing, setResizing] = useState(false);
+  const resize = useMemo(
+    () => ({
+      setWidth: (pixels: number) => setWidth(`${pixels}px`),
+      commitWidth: (pixels: number) =>
+        window.localStorage.setItem(widthKey, String(pixels)),
+      setResizing,
+    }),
+    [widthKey],
+  );
 
   useEffect(() => {
     applySidebarOpen(open, {
@@ -41,6 +76,7 @@ export function SidebarShell({
   return (
     <SidebarProvider
       className={className}
+      data-resizing={resizing ? "" : undefined}
       onOpenChange={setOpen}
       open={open}
       /*
@@ -56,7 +92,7 @@ export function SidebarShell({
         } as CSSProperties
       }
     >
-      {children}
+      <SidebarResizeProvider value={resize}>{children}</SidebarResizeProvider>
     </SidebarProvider>
   );
 }

app/src/components/settings/settings-sidebar.tsx

@@ -2,6 +2,7 @@ import {
   IconArrowLeft,
   IconBell,
   IconChecks,
+  IconDeviceDesktop,
   IconKey,
   IconLayoutGrid,
   IconSettings,
@@ -18,6 +19,7 @@ import {
   SidebarMenuItem,
   SidebarRail,
 } from "@/components/ui/sidebar";
+import { desktopShell } from "@/lib/desktop/intelligence-dashboard";
 
 const appLinkOptions = { to: "/" } satisfies LinkOptions;
 
@@ -29,6 +31,8 @@ const ITEMS: {
    * everywhere else, so an entry stays lit on the pages beneath it.
    */
   exact?: boolean;
+  /** Shown only inside OpenBot Desktop, which is what the page reads from. */
+  desktopOnly?: boolean;
   icon: React.ComponentType<{ className?: string }>;
   linkOptions: LinkOptions;
   title: string;
@@ -58,6 +62,13 @@ const ITEMS: {
     icon: IconKey,
     linkOptions: { to: "/settings/passwords" },
   },
+  {
+    /* What OpenBot runs here and the memory it takes, with Restart and Stop. */
+    title: "This computer",
+    icon: IconDeviceDesktop,
+    desktopOnly: true,
+    linkOptions: { to: "/settings/computer" },
+  },
   {
     /* The same mark Admin gives UI Components. It is the same subject seen from the other side. */
     title: "Components gallery",
@@ -93,7 +104,9 @@ export function SettingsSidebar({
          */}
         <SidebarGroup>
           <SidebarMenu className="gap-px">
-            {ITEMS.map((option) => (
+            {ITEMS.filter(
+              (option) => !option.desktopOnly || desktopShell() !== null,
+            ).map((option) => (
               <SidebarMenuItem key={option.title}>
                 <SidebarMenuButton
                   render={(props) => (

app/src/components/ui/sidebar.tsx

@@ -1,13 +1,10 @@
 "use client";
 
-import * as React from "react";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
+import { IconLayoutSidebar } from "@tabler/icons-react";
 import { cva, type VariantProps } from "class-variance-authority";
-
-import { useIsMobile } from "@/hooks/use-mobile";
-import { keyOf } from "@/lib/hotkeys/hotkeys";
-import { cn } from "@/lib/utils";
+import * as React from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
@@ -24,7 +21,10 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { IconLayoutSidebar } from "@tabler/icons-react";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { keyOf } from "@/lib/hotkeys/hotkeys";
+import { clampSidebarWidth, SIDEBAR_MIN_WIDTH } from "@/lib/sidebar";
+import { cn } from "@/lib/utils";
 
 const SIDEBAR_WIDTH = "16rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
@@ -296,17 +296,135 @@ function SidebarTrigger({
   );
 }
 
+/**
+ * How a shell lets its sidebar be resized: `setWidth` while the edge is dragged, `commitWidth` when it
+ * is let go. Provided by `SidebarShell`; without it the rail only toggles, as it always did.
+ */
+type SidebarResize = {
+  setWidth: (pixels: number) => void;
+  commitWidth: (pixels: number) => void;
+  setResizing: (resizing: boolean) => void;
+};
+
+const SidebarResizeContext = React.createContext<SidebarResize | null>(null);
+
+const SidebarResizeProvider = SidebarResizeContext.Provider;
+
+/**
+ * The narrowest the sidebar can be and still show its footer whole: its widest footer button's own
+ * content, plus the paddings around it. Measured from what is drawn, never from a rem constant, and
+ * never under `SIDEBAR_MIN_WIDTH`. A sidebar with no footer has only that floor.
+ */
+function footerWidth(panel: HTMLElement): number {
+  const footer = panel.querySelector<HTMLElement>(
+    '[data-slot="sidebar-footer"]',
+  );
+  if (!footer) return SIDEBAR_MIN_WIDTH;
+  const around =
+    panel.getBoundingClientRect().width - footer.getBoundingClientRect().width;
+  const footerStyle = getComputedStyle(footer);
+  const footerPadding =
+    Number.parseFloat(footerStyle.paddingLeft) +
+    Number.parseFloat(footerStyle.paddingRight);
+  let widest = 0;
+  for (const button of footer.querySelectorAll<HTMLElement>(
+    '[data-sidebar="menu-button"]',
+  )) {
+    const style = getComputedStyle(button);
+    const gap = Number.parseFloat(style.columnGap) || 0;
+    const children = Array.from(button.children) as HTMLElement[];
+    // `scrollWidth`, not the drawn width: a truncated label still reports what it needs.
+    const content =
+      children.reduce((sum, child) => sum + child.scrollWidth, 0) +
+      gap * Math.max(0, children.length - 1);
+    widest = Math.max(
+      widest,
+      content +
+        Number.parseFloat(style.paddingLeft) +
+        Number.parseFloat(style.paddingRight),
+    );
+  }
+  return Math.max(
+    SIDEBAR_MIN_WIDTH,
+    Math.ceil(widest + footerPadding + around),
+  );
+}
+
+/**
+ * The sidebar's edge. Dragged, it resizes the sidebar between what its footer needs and the shell's
+ * maximum; clicked without moving, it hides or shows the sidebar as it always did. A press counts as
+ * a drag once it has moved 3px, so a click with a slight wobble still toggles.
+ */
 function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
-  const { toggleSidebar } = useSidebar();
+  const { toggleSidebar, state, isMobile } = useSidebar();
+  const resize = React.useContext(SidebarResizeContext);
+  const drag = React.useRef<{
+    startX: number;
+    startWidth: number;
+    min: number;
+    width: number;
+    moved: boolean;
+  } | null>(null);
+  const dragged = React.useRef(false);
 
   return (
     <button
       data-sidebar="rail"
       data-slot="sidebar-rail"
       aria-label="Toggle Sidebar"
       tabIndex={-1}
-      onClick={toggleSidebar}
-      title="Toggle Sidebar"
+      onPointerDown={(event) => {
+        if (!resize || isMobile || state !== "expanded" || event.button !== 0)
+          return;
+        const panel = event.currentTarget
+          .closest<HTMLElement>('[data-slot="sidebar"]')
+          ?.querySelector<HTMLElement>('[data-slot="sidebar-container"]');
+        if (!panel) return;
+        event.preventDefault();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        const startWidth = panel.getBoundingClientRect().width;
+        drag.current = {
+          startX: event.clientX,
+          startWidth,
+          min: footerWidth(panel),
+          width: startWidth,
+          moved: false,
+        };
+      }}
+      onPointerMove={(event) => {
+        const current = drag.current;
+        if (!current || !resize) return;
+        const moved = event.clientX - current.startX;
+        if (!current.moved && Math.abs(moved) < 3) return;
+        if (!current.moved) resize.setResizing(true);
+        current.moved = true;
+        current.width = clampSidebarWidth(
+          current.startWidth + moved,
+          current.min,
+        );
+        resize.setWidth(current.width);
+      }}
+      onPointerUp={() => {
+        const current = drag.current;
+        drag.current = null;
+        if (!current?.moved || !resize) return;
+        dragged.current = true;
+        resize.setResizing(false);
+        resize.commitWidth(current.width);
+      }}
+      onPointerCancel={() => {
+        if (drag.current?.moved) resize?.setResizing(false);
+        drag.current = null;
+      }}
+      onClick={() => {
+        // The click that ends a drag is not a request to hide the sidebar.
+        if (dragged.current) {
+          dragged.current = false;
+          return;
+        }
+        toggleSidebar();
+      }}
+      title="Drag to resize, click to hide"
       className={cn(
         "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
         "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
@@ -736,6 +854,7 @@ export {
   SidebarMenuSubItem,
   SidebarProvider,
   SidebarRail,
+  SidebarResizeProvider,
   SidebarSeparator,
   SidebarTrigger,
   useOptionalSidebar,