@iloveagents/foundry-web-ui 0.1.0 → 0.1.2

package/src/components/sidebar.test.tsx

@@ -179,4 +179,148 @@ describe("Sidebar active state", () => {
     expect(viewsButton?.className).toContain("pl-7");
     expect(documentsButton?.className).not.toContain("pl-5");
   });
+
+  it("collapsed rail wraps each nav group and adds a top border between groups", async () => {
+    const { Sidebar } = await import("./sidebar.tsx");
+
+    const navConfig: NavGroup[] = [
+      {
+        label: "Pages",
+        hideLabel: true,
+        items: [{ to: "/", label: "Chat", icon: MessageSquare }],
+      },
+      {
+        label: "Workspaces",
+        items: [{ to: "/spaces/demo", label: "Demo Workspace", icon: FolderOpen }],
+      },
+      {
+        label: "Admin",
+        items: [{ to: "/spaces/admin/workspaces", label: "Workspaces", icon: FolderOpen }],
+      },
+    ];
+
+    useNavStore.getState().setConfig(navConfig);
+    useAppStore.setState({
+      currentPage: "/",
+      threadActive: false,
+      contextItems: [],
+      sentContext: {},
+      highlights: [],
+      selectedItemId: null,
+      content: {},
+    });
+    // Collapse the sidebar so the rail renders.
+    useSidebarStore.setState({ isOpen: false, isMobileOpen: false, width: SIDEBAR_WIDTH });
+
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/"]}>
+          <TooltipProvider>
+            <Sidebar />
+          </TooltipProvider>
+        </MemoryRouter>,
+      );
+    });
+
+    // Sidebar renders twice (mobile drawer + desktop rail) but only the
+    // desktop rail uses ``collapsed={true}`` — the mobile drawer always
+    // renders ``collapsed={false}``, so it doesn't emit collapsed-rail
+    // group wrappers. Grouping the matched divs by owning <aside> handles
+    // the (unlikely) case where multiple instances do contribute.
+    // Filter out the outer rail container itself (which has these classes
+    // but additionally carries ``py-3``).
+    const wrappersByAside = new Map<Element, HTMLDivElement[]>();
+    container
+      .querySelectorAll<HTMLDivElement>("div.flex.flex-col.items-center.gap-1")
+      .forEach((el) => {
+        if (el.className.includes("py-3")) return;
+        const aside = el.closest("aside");
+        if (!aside) return;
+        const list = wrappersByAside.get(aside) ?? [];
+        list.push(el);
+        wrappersByAside.set(aside, list);
+      });
+
+    // Each rendered sidebar instance must have one wrapper per nav group —
+    // first plain, second + third with the separator border.
+    const perAside = Array.from(wrappersByAside.values());
+    expect(perAside.length).toBeGreaterThan(0);
+    for (const wrappers of perAside) {
+      expect(wrappers.length).toBe(3);
+      expect(wrappers[0].className).not.toContain("border-t");
+      expect(wrappers[1].className).toContain("border-t");
+      expect(wrappers[1].className).toContain("mt-2");
+      expect(wrappers[1].className).toContain("pt-2");
+      expect(wrappers[2].className).toContain("border-t");
+    }
+  });
+
+  it("collapsed rail keeps the first VISIBLE group plain when an earlier group renders nothing", async () => {
+    const { Sidebar } = await import("./sidebar.tsx");
+
+    // The first group supplies a `collapsedRail` that returns no items —
+    // simulates an early-load state where a module hasn't populated yet.
+    // The rendering must skip it entirely AND must not push a border-top
+    // onto whatever group renders first.
+    const navConfig: NavGroup[] = [
+      {
+        label: "EmptyFirst",
+        items: [{ to: "/empty", label: "Empty", icon: MessageSquare }],
+        collapsedRail: () => [],
+      },
+      {
+        label: "Workspaces",
+        items: [{ to: "/spaces/demo", label: "Demo", icon: FolderOpen }],
+      },
+      {
+        label: "Admin",
+        items: [{ to: "/spaces/admin", label: "Admin", icon: FolderOpen }],
+      },
+    ];
+
+    useNavStore.getState().setConfig(navConfig);
+    useAppStore.setState({
+      currentPage: "/",
+      threadActive: false,
+      contextItems: [],
+      sentContext: {},
+      highlights: [],
+      selectedItemId: null,
+      content: {},
+    });
+    useSidebarStore.setState({ isOpen: false, isMobileOpen: false, width: SIDEBAR_WIDTH });
+
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/"]}>
+          <TooltipProvider>
+            <Sidebar />
+          </TooltipProvider>
+        </MemoryRouter>,
+      );
+    });
+
+    const wrappersByAside = new Map<Element, HTMLDivElement[]>();
+    container
+      .querySelectorAll<HTMLDivElement>("div.flex.flex-col.items-center.gap-1")
+      .forEach((el) => {
+        if (el.className.includes("py-3")) return;
+        const aside = el.closest("aside");
+        if (!aside) return;
+        const list = wrappersByAside.get(aside) ?? [];
+        list.push(el);
+        wrappersByAside.set(aside, list);
+      });
+
+    const perAside = Array.from(wrappersByAside.values());
+    expect(perAside.length).toBeGreaterThan(0);
+    for (const wrappers of perAside) {
+      // Empty group skipped → 2 visible wrappers
+      expect(wrappers.length).toBe(2);
+      // First VISIBLE wrapper has no separator (despite being array-idx 1)
+      expect(wrappers[0].className).not.toContain("border-t");
+      // Second visible wrapper carries the divider
+      expect(wrappers[1].className).toContain("border-t");
+    }
+  });
 });

package/src/components/sidebar.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { NavLink, useNavigate } from "react-router";
-import { Ellipsis, Layers, PanelLeft, PanelLeftOpen, SquarePen, ChevronRight, GripVertical, Plus } from "lucide-react";
+import { Ellipsis, Layers, PanelLeft, PanelLeftOpen, SquarePen, ChevronRight, GripVertical, Plus, Upload } from "lucide-react";
 import { cn } from "@iloveagents/foundry-web-primitives";
 import {
   useSidebarStore,
@@ -27,15 +27,57 @@ const ACTIVE_NAV_BADGE_CLASS =
   "border border-sidebar-border bg-background/60 text-sidebar-foreground";
 const NESTED_NAV_INDENTS = ["pl-5", "pl-7", "pl-9", "pl-11", "pl-13"] as const;
 
+type NavStatusDot = NonNullable<NavItem["statusDot"]>;
+
 function getNestedNavIndent(depth: number) {
   return NESTED_NAV_INDENTS[depth] ?? NESTED_NAV_INDENTS[NESTED_NAV_INDENTS.length - 1];
 }
 
+function statusDotColor(tone: NavStatusDot["tone"]) {
+  switch (tone) {
+    case "low-impact":
+      return "var(--impact-low, currentColor)";
+    case "medium-impact":
+      return "var(--impact-medium, currentColor)";
+    case "high-impact":
+      return "var(--impact-high, currentColor)";
+    case "pending":
+      return "var(--impact-unknown, currentColor)";
+    case "info":
+      return "var(--primary, currentColor)";
+    case "neutral":
+    default:
+      return "currentColor";
+  }
+}
+
+function NavStatusDot({ statusDot }: { statusDot?: NavStatusDot }) {
+  if (!statusDot) return null;
+  return (
+    <span
+      aria-label={statusDot.label}
+      title={statusDot.label}
+      className={cn(
+        "size-1.5 shrink-0 rounded-full opacity-90",
+        statusDot.tone === "pending" && "animate-pulse",
+      )}
+      style={{ backgroundColor: statusDotColor(statusDot.tone) }}
+    />
+  );
+}
+
 // --- Generic drag-and-drop via NavItem.dnd ---
 
 /** Shared drag-and-drop props derived from NavItem.dnd (feature-provided). */
 function useNavItemDnd(dnd?: NavItemDnd) {
   const [isDragOver, setIsDragOver] = useState(false);
+  // Tracked separately from ``isDragOver`` so consumers can render a
+  // distinct file-drop affordance (dashed primary ring + Upload icon)
+  // instead of the subtle entity-move ring. Without the split, a user
+  // dragging files from the desktop sees the same hover state as a
+  // user dragging another tree node — they can't tell the container
+  // accepts the drop.
+  const [isFileDragOver, setIsFileDragOver] = useState(false);
   const dragCounter = useRef(0);
 
   const isDraggable = dnd?.canDrag() ?? false;
@@ -72,10 +114,21 @@ function useNavItemDnd(dnd?: NavItemDnd) {
       e.stopPropagation();
       dragCounter.current++;
       setIsDragOver(true);
+      if (isFileDropTarget && hasExternalFiles(e)) {
+        setIsFileDragOver(true);
+      }
     },
-    [hasMatchingDragData],
+    [hasMatchingDragData, isFileDropTarget, hasExternalFiles],
   );
 
+  // ``dragenter`` / ``dragleave`` fire on every parent-to-child crossing
+  // inside the drop target (entering the inner button, then a span, etc.).
+  // The counter pattern only flips ``isDragOver`` back to false when the
+  // cursor truly leaves the OUTER element. There's a transient between
+  // crossings where leave fires before the matching enter — React 18
+  // auto-batches setState calls within a single task so the user doesn't
+  // see a flicker. If you ever observe one, switch to a relatedTarget
+  // ``contains()`` check instead of the counter.
   const onDragLeave = useCallback(
     (e: React.DragEvent) => {
       if (!hasAnyDropTarget(isDropTarget, isFileDropTarget)) return;
@@ -84,6 +137,7 @@ function useNavItemDnd(dnd?: NavItemDnd) {
       if (dragCounter.current <= 0) {
         dragCounter.current = 0;
         setIsDragOver(false);
+        setIsFileDragOver(false);
       }
     },
     [isDropTarget, isFileDropTarget],
@@ -99,11 +153,22 @@ function useNavItemDnd(dnd?: NavItemDnd) {
     [hasMatchingDragData, hasExternalFiles],
   );
 
+  // Capture-phase handlers run BEFORE the bubble-phase ``onDragEnter`` /
+  // ``onDragOver`` on the same node. They MUST NOT call
+  // ``e.stopPropagation()``: in React's synthetic event system, stopping
+  // propagation in the capture phase short-circuits the dispatch — neither
+  // the bubble-phase handler on the same node (which actually mutates
+  // ``isDragOver`` / ``isFileDragOver``) nor any ancestor handler runs.
+  //
+  // We keep ``preventDefault()`` here because some browsers (Chrome) need
+  // it on ``dragenter``/``dragover`` to mark the element as droppable —
+  // doing it in the capture phase makes the visual cue stable while the
+  // user is still hovering inside descendant elements (button, span,
+  // action controls).
   const onDragEnterCapture = useCallback(
     (e: React.DragEvent) => {
       if (!hasMatchingDragData(e)) return;
       e.preventDefault();
-      e.stopPropagation();
     },
     [hasMatchingDragData],
   );
@@ -112,7 +177,6 @@ function useNavItemDnd(dnd?: NavItemDnd) {
     (e: React.DragEvent) => {
       if (!hasMatchingDragData(e)) return;
       e.preventDefault();
-      e.stopPropagation();
       e.dataTransfer.dropEffect = hasExternalFiles(e) ? "copy" : "move";
     },
     [hasMatchingDragData, hasExternalFiles],
@@ -131,6 +195,7 @@ function useNavItemDnd(dnd?: NavItemDnd) {
       e.stopPropagation();
       dragCounter.current = 0;
       setIsDragOver(false);
+      setIsFileDragOver(false);
       if (hasFiles) {
         await dnd.onFileDrop!(files);
         return;
@@ -142,6 +207,7 @@ function useNavItemDnd(dnd?: NavItemDnd) {
 
   return {
     isDragOver,
+    isFileDragOver,
     draggableProps: isDraggable ? { draggable: true, onDragStart } : {},
     dropTargetProps:
       isDropTarget || isFileDropTarget
@@ -215,14 +281,22 @@ function ContainerDropZone({ dnd }: { dnd: NavItemDnd }) {
       className={cn(
         "mx-2 rounded-md transition-all overflow-hidden",
         isDragOver
-          ? "h-7 bg-primary/10 border border-dashed border-primary/30 flex items-center justify-center"
+          ? cn(
+              "h-7 flex items-center justify-center gap-1",
+              isFileDragOver
+                ? "bg-primary/10 border border-dashed border-primary"
+                : "bg-primary/10 border border-dashed border-primary/30",
+            )
           : "h-1",
       )}
     >
       {isDragOver && (
-        <span className="text-[10px] text-primary/70">
-          {getContainerDropZoneLabel(isFileDragOver)}
-        </span>
+        <>
+          {isFileDragOver && <Upload className="size-3 text-primary" />}
+          <span className="text-[10px] text-primary/70">
+            {getContainerDropZoneLabel(isFileDragOver)}
+          </span>
+        </>
       )}
     </div>
   );
@@ -316,7 +390,7 @@ function NavLeafItem({
 }) {
   const isDisabled = item.disabled === true;
   const hasActions = !isDisabled && item.actions && item.actions.length > 0;
-  const { draggableProps, dropTargetProps, isDragOver } = useNavItemDnd(item.dnd);
+  const { draggableProps, dropTargetProps, isDragOver, isFileDragOver } = useNavItemDnd(item.dnd);
 
   // Items with actions use the group layout (button + action controls)
   if (hasActions) {
@@ -332,8 +406,12 @@ function NavLeafItem({
               ? ACTIVE_NAV_ROW_CLASS
               : "hover:bg-sidebar-accent/70",
           isDragOver &&
+            !isFileDragOver &&
             !isDisabled &&
             "ring-2 ring-inset ring-sidebar-ring/50 bg-sidebar-selected",
+          isFileDragOver &&
+            !isDisabled &&
+            "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10",
           item.dimmed && !isDisabled && "opacity-50",
         )}
       >
@@ -369,7 +447,17 @@ function NavLeafItem({
               {item.badge}
             </span>
           )}
+          <NavStatusDot statusDot={item.statusDot} />
         </button>
+        {/* File-drop hint icon — rendered as an inline flex sibling so it
+            naturally sits to the LEFT of the action controls instead of
+            overlapping them at a magic-number offset. */}
+        {isFileDragOver && !isDisabled && (
+          <Upload
+            aria-hidden="true"
+            className="size-3.5 mr-2 shrink-0 text-primary pointer-events-none"
+          />
+        )}
         <NavRowControls item={item} hasChildren={false} isExpanded={false} />
       </div>
     );
@@ -391,8 +479,12 @@ function NavLeafItem({
           : "text-sidebar-foreground/80 transition-colors hover:bg-sidebar-accent/70",
         !isDisabled && isActive && ACTIVE_NAV_ROW_CLASS,
         isDragOver &&
+          !isFileDragOver &&
           !isDisabled &&
           "ring-2 ring-inset ring-sidebar-ring/50 bg-sidebar-selected",
+        isFileDragOver &&
+          !isDisabled &&
+          "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10",
         item.dimmed && !isDisabled && "opacity-50",
       )}
     >
@@ -413,6 +505,13 @@ function NavLeafItem({
           {item.badge}
         </span>
       )}
+      <NavStatusDot statusDot={item.statusDot} />
+      {isFileDragOver && !isDisabled && (
+        <Upload
+          aria-hidden="true"
+          className="ml-auto size-3.5 shrink-0 text-primary pointer-events-none"
+        />
+      )}
     </button>
   );
 }
@@ -498,7 +597,7 @@ function NestedFolderItem({ item, depth }: { item: NavItem; depth: number }) {
   const isAncestorActive = isInsideSubtree && !isActive;
   const [manualOverride, setManualOverride] = useState<boolean | null>(null);
   const isExpanded = manualOverride ?? isInsideSubtree;
-  const { draggableProps, dropTargetProps, isDragOver } = useNavItemDnd(item.dnd);
+  const { draggableProps, dropTargetProps, isDragOver, isFileDragOver } = useNavItemDnd(item.dnd);
   const depthPl = getNestedNavIndent(depth);
 
   const isDisabled = item.disabled === true;
@@ -516,8 +615,12 @@ function NestedFolderItem({ item, depth }: { item: NavItem; depth: number }) {
               ? ACTIVE_NAV_ROW_CLASS
               : "hover:bg-sidebar-accent/70",
           isDragOver &&
+            !isFileDragOver &&
             !isDisabled &&
             "ring-2 ring-inset ring-sidebar-ring/50 bg-sidebar-selected",
+          isFileDragOver &&
+            !isDisabled &&
+            "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10",
           item.dimmed && !isDisabled && "opacity-50",
         )}
       >
@@ -573,7 +676,16 @@ function NestedFolderItem({ item, depth }: { item: NavItem; depth: number }) {
               {item.badge}
             </span>
           )}
+          <NavStatusDot statusDot={item.statusDot} />
         </button>
+        {/* File-drop hint icon — inline flex sibling so it sits to the
+            LEFT of the action controls instead of overlapping them. */}
+        {isFileDragOver && !isDisabled && (
+          <Upload
+            aria-hidden="true"
+            className="size-3.5 mr-2 shrink-0 text-primary pointer-events-none"
+          />
+        )}
         <NavRowControls
           item={item}
           hasChildren
@@ -633,7 +745,7 @@ function CollapsibleNavItem({ item }: { item: NavItem }) {
   const hasChildren = item.children && item.children.length > 0;
   const isDisabled = item.disabled === true;
   const hasActions = !isDisabled && item.actions && item.actions.length > 0;
-  const { draggableProps, dropTargetProps, isDragOver } = useNavItemDnd(item.dnd);
+  const { draggableProps, dropTargetProps, isDragOver, isFileDragOver } = useNavItemDnd(item.dnd);
 
   if (hasChildren || hasActions) {
     const inner = (selected: boolean, ancestor: boolean) => (
@@ -646,8 +758,12 @@ function CollapsibleNavItem({ item }: { item: NavItem }) {
               ? ACTIVE_NAV_ROW_CLASS
               : "hover:bg-sidebar-accent/70",
           isDragOver &&
+            !isFileDragOver &&
             !isDisabled &&
             "ring-2 ring-inset ring-sidebar-ring/50 bg-sidebar-selected",
+          isFileDragOver &&
+            !isDisabled &&
+            "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10",
           item.dimmed && !isDisabled && "opacity-50",
         )}
       >
@@ -702,7 +818,16 @@ function CollapsibleNavItem({ item }: { item: NavItem }) {
               {item.badge}
             </span>
           )}
+          <NavStatusDot statusDot={item.statusDot} />
         </button>
+        {/* File-drop hint icon — inline flex sibling so it sits to the
+            LEFT of the action controls instead of overlapping them. */}
+        {isFileDragOver && !isDisabled && (
+          <Upload
+            aria-hidden="true"
+            className="size-3.5 mr-2 shrink-0 text-primary pointer-events-none"
+          />
+        )}
         <NavRowControls
           item={item}
           hasChildren={Boolean(hasChildren)}
@@ -750,7 +875,10 @@ function CollapsibleNavItem({ item }: { item: NavItem }) {
           "rounded-xl px-3 py-2 text-sm text-left",
           "text-sidebar-foreground/85 transition-colors hover:bg-sidebar-accent/70",
           isActive && cn(ACTIVE_NAV_ROW_CLASS, ACTIVE_NAV_TEXT_CLASS),
-          isDragOver && "bg-sidebar-selected ring-2 ring-inset ring-sidebar-ring/50",
+          isDragOver &&
+            !isFileDragOver &&
+            "bg-sidebar-selected ring-2 ring-inset ring-sidebar-ring/50",
+          isFileDragOver && "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10",
           item.dimmed && "opacity-50",
         )
       }
@@ -776,6 +904,13 @@ function CollapsibleNavItem({ item }: { item: NavItem }) {
               {item.badge}
             </span>
           )}
+          <NavStatusDot statusDot={item.statusDot} />
+          {isFileDragOver && (
+            <Upload
+              aria-hidden="true"
+              className="ml-auto size-3.5 shrink-0 text-primary pointer-events-none"
+            />
+          )}
         </>
       )}
     </NavLink>
@@ -916,35 +1051,66 @@ function SidebarContent({ collapsed }: { collapsed: boolean }) {
         <TooltipIconButton tooltip="New Thread" side="right" onClick={handleNewConversation}>
           <SquarePen className="size-4" />
         </TooltipIconButton>
-        <div className="mt-4 flex flex-col items-center gap-1">
-          {navConfig.flatMap((group) => {
-            // Modules with a non-flat collapsed rail (e.g. Spaces' "header + active workspace")
-            // supply `collapsedRail`; the shell stays module-agnostic.
-            if (group.collapsedRail) {
-              const items = group.collapsedRail({
-                currentPage,
-                navContextMeta: navContext.meta ?? {},
-              });
-              return items.map(({ to, label, icon, isActive }) => (
-                <CollapsedNavShortcut
-                  key={to}
-                  to={to}
-                  label={label}
-                  icon={icon}
-                  isActive={isActive}
-                />
-              ));
-            }
-            return group.items.map(({ to, label, icon }) => (
-              <CollapsedNavShortcut
-                key={to}
-                to={to}
-                label={label}
-                icon={icon}
-                isActive={currentPage === to}
-              />
-            ));
-          })}
+        <div className="mt-4 flex w-full flex-col items-stretch gap-1">
+          {/* `w-full` on this inner column makes children resolve to the
+              rail width even though the outer rail uses `items-center`
+              — that way the per-group `border-t` divider spans the
+              full rail instead of just icon-column width. */}
+          {/* Resolve each group's items first, drop the empties, THEN
+              render — so the separator is keyed off visible-index
+              (not array-index). Without this an empty group at idx 0
+              would push a `border-t` onto whatever group renders first,
+              giving the rail a stray divider above the very first icon. */}
+          {navConfig
+            .map((group, groupIndex) => {
+              // Modules with a non-flat collapsed rail (e.g. Spaces'
+              // "header + active workspace") supply `collapsedRail`; the
+              // shell stays module-agnostic.
+              const items = group.collapsedRail
+                ? group
+                    .collapsedRail({
+                      currentPage,
+                      navContextMeta: navContext.meta ?? {},
+                    })
+                    .map((it) => ({
+                      to: it.to,
+                      label: it.label,
+                      icon: it.icon,
+                      isActive: it.isActive,
+                    }))
+                : group.items.map((it) => ({
+                    to: it.to,
+                    label: it.label,
+                    icon: it.icon,
+                    isActive: currentPage === it.to,
+                  }));
+              return { group, groupIndex, items };
+            })
+            .filter(({ items }) => items.length > 0)
+            .map(({ group, groupIndex, items }, visibleIndex) => (
+              // Each non-first VISIBLE group gets a thin top border —
+              // visually separates groups (e.g. user Workspaces vs
+              // Admin) in the collapsed rail without changing the
+              // CollapsedRailItem shape. The wrapper itself is a centred
+              // column so icons stay aligned with the rail.
+              <div
+                key={`${group.label || ""}-${groupIndex}`}
+                className={cn(
+                  "flex flex-col items-center gap-1",
+                  visibleIndex > 0 && "mt-2 pt-2 border-t border-sidebar-border/40",
+                )}
+              >
+                {items.map(({ to, label, icon, isActive }) => (
+                  <CollapsedNavShortcut
+                    key={to}
+                    to={to}
+                    label={label}
+                    icon={icon}
+                    isActive={isActive}
+                  />
+                ))}
+              </div>
+            ))}
         </div>
       </div>
     );

package/src/components/theme-runtime-provider.tsx

@@ -86,7 +86,7 @@ export function ThemeDocumentMetadata() {
 
   useEffect(() => {
     if (typeof document === "undefined") return;
-    document.title = runtime.branding.appTitle || runtime.branding.appName || "LastSpace.ai";
+    document.title = runtime.branding.appTitle || runtime.branding.appName || "eomi";
   }, [runtime.branding.appName, runtime.branding.appTitle]);
 
   return null;

package/src/components/tool-panel.tsx

@@ -86,10 +86,10 @@ export function ToolPanel() {
   }, [entityId, entityPin, content, addContextItem, removeContextItem]);
 
   const handleNavigateToEntity = useCallback(() => {
-    if (!entityId) return;
-    navigate(`/spaces/${entityId}`);
+    if (!entityId || !content) return;
+    navigate(content.type === "page" ? content.content : `/spaces/${entityId}`);
     closePanel();
-  }, [entityId, navigate, closePanel]);
+  }, [entityId, content, navigate, closePanel]);
 
   const handleCopyAll = useCallback(() => {
     if (!content) return;

package/src/components/user-menu.tsx

@@ -51,7 +51,7 @@ export const UserMenu: FC = () => {
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
         <DropdownMenuItem onClick={signOut} className="text-destructive cursor-pointer">
-          <LogOut className="size-4 mr-2" />
+          <LogOut className="size-4" />
           Sign out
         </DropdownMenuItem>
       </DropdownMenuContent>

package/src/index.ts

@@ -5,7 +5,8 @@ export { ToolPanelLayout } from "./components/tool-panel-layout.tsx";
 export { MarkdownText, markdownComponents } from "./components/markdown-text.tsx";
 export { ClientToolExecutor } from "./components/client-tool-executor.tsx";
 export { AGUIRuntimeProvider, useAGUIAdapter } from "./components/ag-ui-runtime-provider.tsx";
-export { ChatContent } from "./components/assistant-chat.tsx";
+export { ChatContent, DEFAULT_STARTER_SUGGESTIONS } from "./components/assistant-chat.tsx";
+export type { ChatContentProps } from "./components/assistant-chat.tsx";
 export { ChatBubble } from "./components/chat-bubble.tsx";
 export { ChatHeader } from "./components/chat-header.tsx";
 export {
@@ -111,6 +112,15 @@ export type {
 } from "./lib/tool-panel-store.ts";
 export { useSidebarStore, SIDEBAR_WIDTH, RAIL_WIDTH } from "./lib/sidebar-store.ts";
 export { useChatBubbleStore } from "./lib/chat-bubble-store.ts";
+export { submitComposerText } from "./lib/composer-submit-store.ts";
+export {
+  registerSelectionContextResolver,
+  resolveSelectionContext,
+  type SelectionContextInput,
+  type SelectionContextItem,
+  type SelectionContextResolver,
+  type SelectionContextResult,
+} from "./lib/selection-context.ts";
 export { useThemeStore } from "./lib/theme-store.ts";
 export type { ThemeMode } from "./lib/theme-store.ts";
 export {