@iloveagents/foundry-web-ui 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,103 @@
 # @iloveagents/foundry-web-ui
 
+## 0.3.0
+
+### Patch Changes
+
+- @iloveagents/foundry-agent@0.3.0
+- @iloveagents/foundry-web-primitives@0.3.0
+
+## 0.2.2
+
+### Patch Changes
+
+- 395f0cd: web-ui: popover New Thread didn't actually start a new thread
+
+  When the user clicks the compose / SquarePen "New Thread" button in
+  the floating chat popover (`ChatBubble` on workspace/entity pages with
+  `navigateToChat: false`), the runtime was supposed to discard the
+  current thread and start fresh. In practice the popover header
+  subtitle flipped to "New conversation" but the message list stayed
+  populated with the prior chat's messages — the button looked like a
+  no-op.
+
+  Root cause: `useNewConversation` bumped the AGUIRuntime inner key to
+  remount, but the parent `RuntimeBody`'s `effectiveThreadId`
+  (`urlMatch ?? sticky ?? freshIdRef.current`) stayed pinned to the
+  sticky active-chat id. The history adapter on the fresh inner mount
+  immediately loaded the same chat's messages from the server →
+  nothing visibly changed.
+
+  The sidebar "New Thread" button avoided this only by side-effect —
+  it navigates to `/`, which triggers `useTrackActiveChatFromUrl` to
+  clear sticky. The popover preserves the user's workspace context and
+  doesn't navigate, so sticky never cleared.
+
+  Fix: add a tiny DI store `useChatLifecycleStore` exposing an
+  `onNewConversation` callback. `useNewConversation` invokes it BEFORE
+  `resetThread` so the host (spaces-web-ui in lastspace) can clear its
+  sticky id; the next render's `effectiveThreadId` has already advanced
+  to a freshly-minted UUID, and the history adapter binds to that
+  instead of re-hydrating the prior chat.
+
+  Customers that don't track sticky ids leave `onNewConversation`
+  unset; the call site no-ops gracefully.
+
+- 1ba01ef: web-ui(sidebar): align group-header labels (CHATS, WORKSPACES, ADMIN, …)
+  with the leftmost edge of their item labels
+
+  Previously the collapsible group header used `px-3` on the outer wrapper
+  and a `size-6` chevron, while item rows used `pl-5` (depth-0 indent) +
+  `size-3.5` icon + `gap-2`. Result: group labels landed at ~36px from the
+  sidebar edge while item labels landed at 42px — group labels drifted
+  right of the children they introduced and the visual rhythm broke.
+
+  Make the header's leading column a shared `SIDEBAR_ITEM_ICON_CLASS` +
+  `SIDEBAR_ITEM_GAP_CLASS` cell — the same constants item icons use — so
+  every group label (collapsible, link-style, or plain) lands at the same
+  x-coordinate as item labels. The chevron now sits in the icon column;
+  its hit-area is preserved at 28px via `-m-2 p-2` (negative-margin
+  absorbs the extra padding so the visual cell stays 14px and label
+  geometry doesn't shift).
+
+  Non-collapsible header branches get an explicit invisible spacer of the
+  same width so their labels align too.
+
+- 8184a8c: shell: URL is authoritative for the runtime threadId — fixes
+  resume-creates-new-conversation race
+
+  `ChatConversationAwareRuntime` previously computed
+  `effectiveThreadId = sticky ?? urlMatch ?? freshIdRef.current`.
+  When the user navigated from one chat to another via a Recents
+  click, the synchronous render that followed the URL change had:
+  - `urlMatch = B` (read from the now-updated `useLocation`)
+  - `sticky = A` (the active-chat-store hadn't been updated by
+    `useTrackActiveChatFromUrl`'s `useEffect` yet — effects run
+    AFTER the commit phase)
+
+  `sticky ?? urlMatch` picked `A` (the previous chat). The AG-UI
+  adapter was constructed with `threadId = A`. The first message the
+  user sent went to `/api/agent` with `thread_id = A`, the middleware
+  created a new row keyed by `A`... wait actually no, here's what
+  happens — the runtime mints a fresh runner UUID when given a
+  mismatched threadId; that fresh UUID became a new conversation row,
+  appearing as "Untitled chat" at the top of the sidebar while the
+  URL still said `/chat/B`. Two active-looking dots: one for `B`
+  (NavLink URL match), one for the new row (statusDot from the
+  updated active-chat-store after the lazy ensure ran).
+
+  Swap the priority: `urlMatch ?? sticky ?? freshIdRef.current`. The
+  URL is authoritative whenever it's set (i.e. on `/chat/<id>`
+  routes), eliminating the stale-sticky race entirely. `sticky` is
+  still consulted as the second-priority fallback for non-chat
+  routes (`/spaces`, `/tasks`) so the popout chat stays "live" while
+  the user browses workspaces — that's the original purpose of
+  `useStickyConversationId` and it's preserved.
+
+- Updated dependencies [8184a8c]
+  - @iloveagents/foundry-agent@0.2.2
+  - @iloveagents/foundry-web-primitives@0.2.2
+
 ## 0.2.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
   "types": "./src/index.ts",
@@ -46,8 +46,8 @@
     "react-markdown": "^10.0.0",
     "remark-gfm": "^4.0.0",
     "shiki": "^4.0.0",
-    "@iloveagents/foundry-agent": "0.2.1",
-    "@iloveagents/foundry-web-primitives": "0.2.1"
+    "@iloveagents/foundry-agent": "0.3.0",
+    "@iloveagents/foundry-web-primitives": "0.3.0"
   },
   "devDependencies": {
     "typescript": "~5.9.3",

package/src/components/sidebar.tsx

@@ -27,6 +27,39 @@ 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;
 
+// Shared icon-column geometry. Top-level item rows render their
+// leading icon at ``size-4`` (16px) followed by ``gap-2`` (8px)
+// before the label. The group-header chevron uses the SAME column
+// width + gap so the group label and item labels share an exact
+// x-coordinate — without this invariant headers visually drift right
+// (previously the chevron defaulted to ``size-6`` = 24px) and the
+// sidebar looks ragged. Verified empirically against the live DOM:
+// item icon x-min ≈ header chevron x-min, item label x ≈ header
+// label x (within 1px allowing for the item's ``border-transparent``
+// inset).
+const SIDEBAR_ITEM_ICON_CLASS = "size-4 shrink-0";
+const SIDEBAR_ITEM_GAP_CLASS = "gap-2";
+// Outer padding for the group-header wrapper. Horizontal matches
+// ``px-3`` on item buttons so the chevron column lines up with the
+// item icon column. Vertical is asymmetric: ``pt-3`` (12px) above
+// gives breathing room between sections, ``pb-1`` (4px) below bonds
+// the header to its first child — the ChatGPT / Linear / Notion
+// "header sits on its children" pattern. Symmetric ``py-2`` made
+// the header float midway between sections instead of belonging
+// to the group below it.
+const SIDEBAR_GROUP_HEADER_PADDING = "px-3 pt-4 pb-0";
+// Typography for the group-header LABEL text (CHATS / WORKSPACES /
+// ADMIN / …). Stays at ``text-xs`` (12px) — same size as before —
+// but bumps weight from ``font-medium`` to ``font-semibold``. The
+// extra weight gives section headers the structural presence they
+// need to feel like section dividers without spending vertical
+// space; combined with ``uppercase tracking-wider`` it's the
+// ChatGPT / Linear / Notion small-caps section-label rhythm.
+// Bumping size AND weight together stacked too much visual mass
+// against the already-wide uppercase tracking — felt shouty.
+const SIDEBAR_GROUP_HEADER_LABEL_CLASS =
+  "text-xs font-semibold uppercase tracking-wider";
+
 type NavStatusDot = NonNullable<NavItem["statusDot"]>;
 type NavStatusIcon = NonNullable<NavItem["statusIcon"]>;
 
@@ -1184,7 +1217,12 @@ function NavGroupSection({ group }: { group: NavGroup }) {
   return (
     <div data-nav-group-label={group.label}>
       {!group.hideLabel && (
-        <div className="px-3 py-2">
+        // Outer padding matches the depth-0 item button's ``px-3`` so
+        // the chevron / leading spacer sits in the SAME icon column as
+        // item icons, and the group label ends up at the exact x-coordinate
+        // as item labels. See ``SIDEBAR_GROUP_HEADER_PADDING`` definition
+        // for the alignment invariant.
+        <div className={SIDEBAR_GROUP_HEADER_PADDING}>
           {isCollapsible ? (
             // Collapsible header is a flex of three siblings: chevron
             // toggle (own button), label (NavLink when ``group.to``
@@ -1192,19 +1230,45 @@ function NavGroupSection({ group }: { group: NavGroup }) {
             // landing page — Workspaces does this), createActions
             // menu. Three SIBLINGS, not nested, so HTML stays valid
             // (no <button> inside <button> / inside Radix's button).
-            <div className="group/header flex items-center justify-between rounded-lg transition-colors hover:bg-sidebar-accent/70">
+            //
+            // Geometry: the chevron occupies the SAME width as item
+            // icons (``SIDEBAR_ITEM_ICON_CLASS``) followed by
+            // ``SIDEBAR_ITEM_GAP_CLASS``, so the group label and the
+            // item labels share an exact x-coordinate. The chevron's
+            // click target is larger than its visual size — extended
+            // via padding on the wrapper button — so users don't have
+            // to hit a tiny target. The clickable invisible padding
+            // OVERLAPS the gap rather than pushing the label right
+            // (negative-margin + extra padding cancel out).
+            <div
+              className={cn(
+                "group/header flex items-center justify-between rounded-lg transition-colors hover:bg-sidebar-accent/70",
+                SIDEBAR_ITEM_GAP_CLASS,
+              )}
+            >
               <button
                 type="button"
                 data-nav-group-toggle
                 onClick={() => toggleGroupCollapsed(group.label, persistedCollapsed)}
                 aria-expanded={!collapsed}
                 aria-label={collapsed ? `Expand ${group.label}` : `Collapse ${group.label}`}
-                className="inline-flex size-6 shrink-0 items-center justify-center rounded text-sidebar-foreground/50 hover:text-sidebar-foreground"
+                // Visual cell width = ``SIDEBAR_ITEM_ICON_CLASS`` (14px)
+                // so the chevron sits in the same column as item icons
+                // and the group label aligns with item labels. The
+                // chevron SVG (``size-3`` = 12px) is smaller than the
+                // cell so it reads as a hint, not a primary control.
+                // Hit area is the cell width; the row's ``group/header``
+                // hover state covers the rest of the strip so users get
+                // visual feedback even on near-misses.
+                className={cn(
+                  "inline-flex items-center justify-center rounded text-sidebar-foreground/50 hover:text-sidebar-foreground",
+                  SIDEBAR_ITEM_ICON_CLASS,
+                )}
               >
                 {collapsed ? (
-                  <ChevronRight className="size-3 transition-transform" />
+                  <ChevronRight className="size-3.5 transition-transform" />
                 ) : (
-                  <ChevronDown className="size-3 transition-transform" />
+                  <ChevronDown className="size-3.5 transition-transform" />
                 )}
               </button>
               {group.to ? (
@@ -1213,7 +1277,8 @@ function NavGroupSection({ group }: { group: NavGroup }) {
                     <>
                       <span
                         className={cn(
-                          "truncate text-xs font-medium uppercase tracking-wider",
+                          "truncate",
+                          SIDEBAR_GROUP_HEADER_LABEL_CLASS,
                           isActive
                             ? "text-sidebar-selected-foreground"
                             : "text-sidebar-foreground/65 group-hover/header:text-sidebar-foreground",
@@ -1231,7 +1296,12 @@ function NavGroupSection({ group }: { group: NavGroup }) {
                   onClick={() => toggleGroupCollapsed(group.label, persistedCollapsed)}
                   className="flex min-w-0 flex-1 items-center gap-1.5 py-1.5 text-left"
                 >
-                  <span className="truncate text-xs font-medium uppercase tracking-wider text-sidebar-foreground/65 group-hover/header:text-sidebar-foreground">
+                  <span
+                    className={cn(
+                      "truncate text-sidebar-foreground/65 group-hover/header:text-sidebar-foreground",
+                      SIDEBAR_GROUP_HEADER_LABEL_CLASS,
+                    )}
+                  >
                     {group.label}
                   </span>
                   <NavStatusDot statusDot={bubbledStatusDot} />
@@ -1242,12 +1312,23 @@ function NavGroupSection({ group }: { group: NavGroup }) {
               )}
             </div>
           ) : group.to ? (
-            <div className="flex items-center justify-between rounded-lg py-1.5 transition-colors hover:bg-sidebar-accent/70">
+            // Non-collapsible header: no chevron, but we still emit an
+            // invisible spacer of ``SIDEBAR_ITEM_ICON_CLASS`` width + the
+            // shared gap so the group label lands in the same column as
+            // collapsible headers and item labels.
+            <div
+              className={cn(
+                "flex items-center justify-between rounded-lg py-1.5 transition-colors hover:bg-sidebar-accent/70",
+                SIDEBAR_ITEM_GAP_CLASS,
+              )}
+            >
+              <span aria-hidden="true" className={SIDEBAR_ITEM_ICON_CLASS} />
               <NavLink to={group.to} end className="min-w-0 flex-1">
                 {({ isActive }) => (
                   <span
                     className={cn(
-                      "block text-xs font-medium uppercase tracking-wider",
+                      "block",
+                      SIDEBAR_GROUP_HEADER_LABEL_CLASS,
                       isActive
                         ? "text-sidebar-selected-foreground"
                         : "text-sidebar-foreground/65 hover:text-sidebar-foreground",
@@ -1262,9 +1343,17 @@ function NavGroupSection({ group }: { group: NavGroup }) {
               )}
             </div>
           ) : (
-            <span className="text-xs font-medium uppercase tracking-wider text-sidebar-foreground/65">
-              {group.label}
-            </span>
+            <div className={cn("flex items-center", SIDEBAR_ITEM_GAP_CLASS)}>
+              <span aria-hidden="true" className={SIDEBAR_ITEM_ICON_CLASS} />
+              <span
+                className={cn(
+                  "text-sidebar-foreground/65",
+                  SIDEBAR_GROUP_HEADER_LABEL_CLASS,
+                )}
+              >
+                {group.label}
+              </span>
+            </div>
           )}
         </div>
       )}
@@ -1318,6 +1407,7 @@ function SidebarContent({ collapsed }: { collapsed: boolean }) {
   const toggle = useSidebarStore((s) => s.toggle);
   const handleNewConversation = useNewConversation();
   const rawNavConfig = useNavStore((s) => s.config);
+  const navLoading = useNavStore((s) => s.navLoading);
   // Sort by `priority` descending so feature hooks can declare slot
   // intent (e.g. "Recents above Tasks") instead of relying on the
   // order in which addGroup() happened to be called. Stable sort: ties
@@ -1331,6 +1421,12 @@ function SidebarContent({ collapsed }: { collapsed: boolean }) {
         .map(({ g }) => g),
     [rawNavConfig],
   );
+  // Show skeleton rows during the cold nav fetch — but only until the
+  // integrator's primary dynamic group ("Workspaces") has been published.
+  // Once it exists, real rows render even if a later phase (status dots) is
+  // still resolving, so the skeleton never flashes over a populated tree.
+  const hasWorkspacesGroup = navConfig.some((group) => group.label === "Workspaces");
+  const showNavSkeleton = navLoading && !hasWorkspacesGroup;
   const currentPage = useAppStore((s) => s.currentPage);
   const navContext = useAppStore((s) => s.navContext);
 
@@ -1457,6 +1553,16 @@ function SidebarContent({ collapsed }: { collapsed: boolean }) {
         {navConfig.map((group) => (
           <NavGroupSection key={group.label} group={group} />
         ))}
+        {showNavSkeleton && (
+          <div className="space-y-1 px-1 pt-2" aria-hidden="true">
+            {Array.from({ length: 6 }).map((_, index) => (
+              <div
+                key={index}
+                className="h-7 mx-1 rounded-lg animate-pulse bg-sidebar-accent/40"
+              />
+            ))}
+          </div>
+        )}
       </nav>
 
       {/* Footer actions — registered by feature modules */}

package/src/index.ts

@@ -116,6 +116,7 @@ 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 { useChatLifecycleStore } from "./lib/chat-lifecycle-store.ts";
 export { submitComposerText } from "./lib/composer-submit-store.ts";
 export {
   registerSelectionContextResolver,

package/src/lib/chat-lifecycle-store.ts

@@ -0,0 +1,37 @@
+/**
+ * Lifecycle DI store for chat-related cross-cutting concerns that
+ * foundry-ui needs to invoke but spaces-web-ui owns the implementation
+ * for. Avoids a circular dependency between the two packages.
+ *
+ * Today's only hook: ``onNewConversation`` — called when the user
+ * starts a fresh chat (sidebar New Thread, popover compose button,
+ * etc.). spaces-web-ui registers a callback at app init that clears
+ * the sticky active-chat id so the next render mints a fresh runtime
+ * thread id (otherwise the history adapter re-hydrates the previous
+ * chat's messages immediately, defeating the "new thread" intent).
+ *
+ * Registration: ``useChatLifecycleStore.setState({ onNewConversation })``
+ * once at app init. Foundry-ui's :func:`useNewConversation` invokes
+ * ``onNewConversation`` synchronously inside its returned callback,
+ * BEFORE :func:`resetThread` runs — so by the time the AGUIRuntimeProvider
+ * re-renders, the sticky id is already null and the effective thread id
+ * has already advanced to a freshly-minted UUID.
+ *
+ * Customers that don't use sticky id tracking can leave
+ * ``onNewConversation`` null — the call site no-ops gracefully.
+ */
+import { create } from "zustand";
+
+interface ChatLifecycleStore {
+  /**
+   * Called from :func:`useNewConversation` when the user starts a
+   * new thread. Spaces wires this to clear the active-chat sticky id.
+   */
+  onNewConversation: (() => void) | null;
+  setOnNewConversation: (fn: (() => void) | null) => void;
+}
+
+export const useChatLifecycleStore = create<ChatLifecycleStore>((set) => ({
+  onNewConversation: null,
+  setOnNewConversation: (fn) => set({ onNewConversation: fn }),
+}));

package/src/lib/nav-store.ts

@@ -24,8 +24,18 @@ export interface NavFooterAction {
 interface NavStoreState {
   config: NavGroup[];
   footerActions: NavFooterAction[];
+  /**
+   * True while an integrator's nav sync is loading its first batch of
+   * groups. Optional/defaulted (starts ``false``) so existing consumers
+   * that never set it are unaffected. The sidebar reads it to render
+   * skeleton rows instead of an empty list during the cold fetch —
+   * avoids the "empty sidebar for N seconds" gap on a slow nav sync.
+   */
+  navLoading: boolean;
   /** Replace the entire config */
   setConfig: (config: NavGroup[]) => void;
+  /** Toggle the cold-load skeleton state. */
+  setNavLoading: (loading: boolean) => void;
   /** Add a group (replaces existing group with the same label) */
   addGroup: (group: NavGroup) => void;
   /** Remove a group by label */
@@ -39,9 +49,12 @@ interface NavStoreState {
 export const useNavStore = create<NavStoreState>((set, get) => ({
   config: DEFAULT_NAV_CONFIG,
   footerActions: [],
+  navLoading: false,
 
   setConfig: (config) => set({ config }),
 
+  setNavLoading: (navLoading) => set({ navLoading }),
+
   addGroup: (group) => {
     const config = get().config;
     const idx = config.findIndex((g) => g.label === group.label);

package/src/lib/use-new-conversation.ts

@@ -7,6 +7,7 @@ import { useAGUIAdapter } from "../components/ag-ui-runtime-provider.tsx";
 import { useToolPanelStore } from "./tool-panel-store.ts";
 import { useAppStore } from "./app-store.ts";
 import { useSidebarStore } from "./sidebar-store.ts";
+import { useChatLifecycleStore } from "./chat-lifecycle-store.ts";
 
 /**
  * Shared hook for starting a new conversation.
@@ -35,6 +36,15 @@ export function useNewConversation(options?: { navigateToChat?: boolean; preserv
     }
     closeMobile();
     clearCitations();
+    // Notify the host app that a new thread is starting. Spaces wires
+    // this to clear its active-chat sticky id so the AGUIRuntimeProvider's
+    // ``effectiveThreadId`` advances to a freshly-minted UUID instead of
+    // staying pinned to the previous chat. Must fire BEFORE ``resetThread``
+    // so the next render's history adapter binds to the new id and
+    // doesn't re-hydrate the prior chat's messages — the exact bug this
+    // wiring fixes for the popover (``navigateToChat: false``) path,
+    // where there is no ``/`` navigation to clear sticky for us.
+    useChatLifecycleStore.getState().onNewConversation?.();
     resetThread();
     aui.threads().switchToNewThread();
     if (options?.navigateToChat ?? true) {