@iloveagents/foundry-web-ui 0.1.3 → 0.1.5

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @iloveagents/foundry-web-ui
 
+## 0.1.5
+
+### Patch Changes
+
+- f9144ca: Add `NavItem.statusIcon` slot for sidebar warning / status hints.
+
+  Renders a small tone-coloured icon next to the existing `statusDot`. Use for "this item needs attention" annotations (failed background jobs, permission drift, etc.) where a coloured dot isn't legible enough. Tones map to `warning` / `danger` / `info` / `neutral`. The `label` lands on both `aria-label` and the wrapping span's `title` attribute so screen-reader announcement + hover tooltip work without consumer wiring.
+  - @iloveagents/foundry-agent@0.1.5
+  - @iloveagents/foundry-web-primitives@0.1.5
+
+## 0.1.4
+
+### Patch Changes
+
+- Updated dependencies [07ace7e]
+  - @iloveagents/foundry-agent@0.1.4
+  - @iloveagents/foundry-web-primitives@0.1.4
+
 ## 0.1.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
   "types": "./src/index.ts",
@@ -23,8 +23,8 @@
     "lucide-react": ">=0.400.0",
     "@azure/msal-browser": "^5.0.0",
     "@azure/msal-react": "^5.0.0",
-    "@iloveagents/foundry-agent": "0.1.3",
-    "@iloveagents/foundry-web-primitives": "0.1.3"
+    "@iloveagents/foundry-agent": "0.1.5",
+    "@iloveagents/foundry-web-primitives": "0.1.5"
   },
   "peerDependenciesMeta": {
     "@azure/msal-browser": {

package/src/components/sidebar.test.tsx

@@ -2,7 +2,7 @@ import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { MemoryRouter } from "react-router";
 import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
-import { FolderOpen, MessageSquare } from "lucide-react";
+import { AlertTriangle, FolderOpen, MessageSquare } from "lucide-react";
 import { useNavStore } from "../lib/nav-store.ts";
 import { useAppStore } from "../lib/app-store.ts";
 import { SIDEBAR_WIDTH, useSidebarStore } from "../lib/sidebar-store.ts";
@@ -323,4 +323,86 @@ describe("Sidebar active state", () => {
       expect(wrappers[1].className).toContain("border-t");
     }
   });
+
+  it("renders NavItem.statusIcon with tone class + tooltip label", async () => {
+    // The statusIcon slot is consumer-driven (e.g. ``spaces-web-ui``
+    // stamps a warning triangle on workspaces with failed indexing).
+    // This test pins three things the consumer relies on:
+    //   1. The supplied LucideIcon component is rendered.
+    //   2. The tone maps to the right Tailwind class (``warning`` →
+    //      ``text-warning``).
+    //   3. The ``label`` lands on both ``aria-label`` and the
+    //      ``title`` attribute so the icon gets a hover tooltip and
+    //      a screen-reader announcement without the consumer having
+    //      to wire anything else.
+    const { Sidebar } = await import("./sidebar.tsx");
+
+    const navConfig: NavGroup[] = [
+      {
+        label: "Workspaces",
+        items: [
+          {
+            to: "/spaces/wsA",
+            label: "Workspace With Failures",
+            icon: FolderOpen,
+            statusIcon: {
+              icon: AlertTriangle,
+              tone: "warning",
+              label: "3 documents failed to index",
+            },
+          },
+          {
+            to: "/spaces/wsB",
+            label: "Healthy Workspace",
+            icon: FolderOpen,
+          },
+        ],
+      },
+    ];
+    useNavStore.getState().setConfig(navConfig);
+    useAppStore.setState({
+      currentPage: "/spaces/wsA",
+      threadActive: false,
+      contextItems: [],
+      sentContext: {},
+      highlights: [],
+      selectedItemId: null,
+      content: {},
+    });
+
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/spaces/wsA"]}>
+          <TooltipProvider>
+            <Sidebar />
+          </TooltipProvider>
+        </MemoryRouter>,
+      );
+    });
+
+    // The warning row carries the icon wrapped in a span. The label
+    // lands on both ``aria-label`` (screen reader) and ``title``
+    // (hover tooltip) on the wrapping span; the inner svg carries
+    // the tone class.
+    const warningWrappers = container.querySelectorAll<HTMLElement>(
+      'span[aria-label="3 documents failed to index"]',
+    );
+    expect(warningWrappers.length).toBeGreaterThan(0);
+    const wrapper = warningWrappers[0];
+    expect(wrapper.getAttribute("title")).toBe("3 documents failed to index");
+    expect(wrapper.querySelector("svg.text-warning")).not.toBeNull();
+
+    // No statusIcon on the healthy workspace ⇒ its leaf row
+    // contains no warning svg. Workspaces are rendered as NavLink
+    // anchors (button is for folders), so scope to ``a, button``
+    // and reject ancestor containers that happen to enclose BOTH
+    // workspaces.
+    const healthyRowLeaves = Array.from(
+      container.querySelectorAll<HTMLElement>("a, button"),
+    ).filter((el) => el.textContent?.includes("Healthy Workspace"));
+    expect(healthyRowLeaves.length).toBeGreaterThan(0);
+    for (const leaf of healthyRowLeaves) {
+      expect(leaf.querySelectorAll("svg.text-warning").length).toBe(0);
+    }
+  });
 });

package/src/components/sidebar.tsx

@@ -28,6 +28,7 @@ const ACTIVE_NAV_BADGE_CLASS =
 const NESTED_NAV_INDENTS = ["pl-5", "pl-7", "pl-9", "pl-11", "pl-13"] as const;
 
 type NavStatusDot = NonNullable<NavItem["statusDot"]>;
+type NavStatusIcon = NonNullable<NavItem["statusIcon"]>;
 
 function getNestedNavIndent(depth: number) {
   return NESTED_NAV_INDENTS[depth] ?? NESTED_NAV_INDENTS[NESTED_NAV_INDENTS.length - 1];
@@ -66,6 +67,43 @@ function NavStatusDot({ statusDot }: { statusDot?: NavStatusDot }) {
   );
 }
 
+function statusIconClass(tone: NavStatusIcon["tone"]) {
+  switch (tone) {
+    case "warning":
+      return "text-warning";
+    case "danger":
+      return "text-destructive";
+    case "info":
+      return "text-primary";
+    case "neutral":
+    default:
+      return "text-sidebar-foreground/60";
+  }
+}
+
+function NavStatusIcon({ statusIcon }: { statusIcon?: NavStatusIcon }) {
+  if (!statusIcon) return null;
+  const Icon = statusIcon.icon;
+  // Wrap in a ``<span>`` so the browser tooltip (``title``) and the
+  // screen-reader announcement (``aria-label``) attach to a real DOM
+  // node — lucide-react's icon types don't accept ``title`` as a
+  // prop. Kept small (size-3) so the icon doesn't compete with the
+  // entity icon on the left of the row.
+  return (
+    <span
+      role="img"
+      aria-label={statusIcon.label}
+      title={statusIcon.label}
+      className="inline-flex shrink-0"
+    >
+      <Icon
+        aria-hidden="true"
+        className={cn("size-3 shrink-0", statusIconClass(statusIcon.tone))}
+      />
+    </span>
+  );
+}
+
 // --- Generic drag-and-drop via NavItem.dnd ---
 
 /** Shared drag-and-drop props derived from NavItem.dnd (feature-provided). */
@@ -447,6 +485,7 @@ function NavLeafItem({
               {item.badge}
             </span>
           )}
+          <NavStatusIcon statusIcon={item.statusIcon} />
           <NavStatusDot statusDot={item.statusDot} />
         </button>
         {/* File-drop hint icon — rendered as an inline flex sibling so it
@@ -505,6 +544,7 @@ function NavLeafItem({
           {item.badge}
         </span>
       )}
+      <NavStatusIcon statusIcon={item.statusIcon} />
       <NavStatusDot statusDot={item.statusDot} />
       {isFileDragOver && !isDisabled && (
         <Upload
@@ -676,6 +716,7 @@ function NestedFolderItem({ item, depth }: { item: NavItem; depth: number }) {
               {item.badge}
             </span>
           )}
+          <NavStatusIcon statusIcon={item.statusIcon} />
           <NavStatusDot statusDot={item.statusDot} />
         </button>
         {/* File-drop hint icon — inline flex sibling so it sits to the
@@ -818,6 +859,7 @@ function CollapsibleNavItem({ item }: { item: NavItem }) {
               {item.badge}
             </span>
           )}
+          <NavStatusIcon statusIcon={item.statusIcon} />
           <NavStatusDot statusDot={item.statusDot} />
         </button>
         {/* File-drop hint icon — inline flex sibling so it sits to the
@@ -904,6 +946,7 @@ function CollapsibleNavItem({ item }: { item: NavItem }) {
               {item.badge}
             </span>
           )}
+          <NavStatusIcon statusIcon={item.statusIcon} />
           <NavStatusDot statusDot={item.statusDot} />
           {isFileDragOver && (
             <Upload

package/src/lib/nav-config.ts

@@ -60,6 +60,17 @@ export interface NavItem {
     tone?: "neutral" | "info" | "low-impact" | "medium-impact" | "high-impact" | "pending";
     label?: string;
   };
+  /**
+   * Optional warning / status icon shown after the label. Use for
+   * "something needs attention" annotations (e.g. failed indexing,
+   * permission drift) where a coloured dot isn't legible enough.
+   * Pass any LucideIcon; the tone drives the colour.
+   */
+  statusIcon?: {
+    icon: LucideIcon;
+    tone?: "neutral" | "info" | "warning" | "danger";
+    label?: string;
+  };
   /** Page description sent to the agent for context */
   description?: string;
   /** Arbitrary metadata sent to the agent (e.g., workspace IDs, entity types) */