@stigmer/react 3.7.0 → 3.9.0

package/src/sidebar/WorkspaceSidebar.tsx

@@ -6,6 +6,7 @@ import {
   LayoutDashboard,
   Library,
   MessageSquare,
+  MessagesSquare,
   Workflow,
   type LucideIcon,
 } from "lucide-react";
@@ -29,7 +30,11 @@ import type { RenderSidebarLink } from "./types.js";
 // ---------------------------------------------------------------------------
 
 /** Primary navigation destinations in the workspace sidebar. */
-export type WorkspaceNavId = "new-session" | "dashboard" | "library";
+export type WorkspaceNavId =
+  | "new-session"
+  | "dashboard"
+  | "conversations"
+  | "library";
 
 /**
  * Recent-activity data for the sidebar's Recents section — the return
@@ -66,6 +71,14 @@ export interface WorkspaceSidebarProps {
    * timestamp column, inside the row.
    */
   readonly renderEntryAccessory?: (entry: RecentActivityEntry) => ReactNode;
+  /**
+   * Count for the Conversations row's badge: how many conversations
+   * want a human right now (`useConversationsWantsHumanCount`). Data as
+   * props per the chrome contract — hosts fetch, deterministic hosts
+   * (tours) pass a fixture or omit. Hidden at `0`/omitted; the display
+   * caps at "99+" while the accessible name keeps the real number.
+   */
+  readonly conversationsBadgeCount?: number;
   /** Footer content — typically the host app's `UserMenu` wrapper. */
   readonly footer: ReactNode;
   /** Reflected as `aria-expanded` on the collapse toggle. @default true */
@@ -85,8 +98,8 @@ export interface WorkspaceSidebarProps {
 
 /**
  * The console's workspace-zone sidebar: org switcher, primary navigation
- * (New Session / Dashboard / Library), time-bucketed recent activity,
- * and a user footer.
+ * (New Session / Dashboard / Conversations / Library), time-bucketed
+ * recent activity, and a user footer.
  *
  * This is the same component the Stigmer web console and desktop app
  * render — hosts differ only in what they return from `renderLink`
@@ -117,6 +130,7 @@ export function WorkspaceSidebar({
   activeSessionId = null,
   activeExecutionId = null,
   renderEntryAccessory,
+  conversationsBadgeCount,
   footer,
   isOpen = true,
   onCollapse,
@@ -154,6 +168,22 @@ export function WorkspaceSidebar({
         active={activeNav === "dashboard"}
         renderLink={renderLink}
       />
+      {/* MessagesSquare, deliberately not MessageSquare — the singular
+          mark is the session glyph in Recents, and the two areas must
+          not read as one. */}
+      <PrimaryNavRow
+        id="conversations"
+        href="/conversations"
+        label="Conversations"
+        icon={MessagesSquare}
+        active={activeNav === "conversations"}
+        renderLink={renderLink}
+        accessory={
+          conversationsBadgeCount !== undefined && conversationsBadgeCount > 0 ? (
+            <WantsHumanBadge count={conversationsBadgeCount} />
+          ) : null
+        }
+      />
       <PrimaryNavRow
         id="library"
         href="/library"
@@ -204,6 +234,7 @@ function PrimaryNavRow({
   icon: Icon,
   active,
   renderLink,
+  accessory = null,
 }: {
   readonly id: WorkspaceNavId;
   readonly href: string;
@@ -211,6 +242,8 @@ function PrimaryNavRow({
   readonly icon: LucideIcon;
   readonly active: boolean;
   readonly renderLink: RenderSidebarLink;
+  /** Trailing row content (e.g. the Conversations count pill). */
+  readonly accessory?: ReactNode;
 }) {
   return (
     <div className="flex-none px-3 py-1">
@@ -224,6 +257,7 @@ function PrimaryNavRow({
           <>
             <Icon className="size-4 shrink-0" />
             {label}
+            {accessory}
           </>
         ),
       })}
@@ -231,6 +265,31 @@ function PrimaryNavRow({
   );
 }
 
+/**
+ * The Conversations row's count pill: how many conversations want a
+ * human right now (DD-011 D-f — `needs_attention` OR awaiting-reply
+ * while human-held). The visible number caps at "99+"; the accessible
+ * name states the meaning with the real number, because a bare "104"
+ * read aloud after "Conversations" says nothing.
+ */
+function WantsHumanBadge({ count }: { readonly count: number }) {
+  return (
+    <span className="ml-auto flex shrink-0 items-center">
+      <span
+        aria-hidden="true"
+        className="bg-sidebar-primary text-sidebar-primary-foreground rounded-full px-1.5 py-0.5 text-[10px] leading-none font-semibold tabular-nums"
+      >
+        {count > 99 ? "99+" : count}
+      </span>
+      <span className="sr-only">
+        {count === 1
+          ? "1 conversation needs a human"
+          : `${count} conversations need a human`}
+      </span>
+    </span>
+  );
+}
+
 function ActivityGroupList({
   groups,
   activeSessionId,

package/src/sidebar/__tests__/WorkspaceSidebar.test.tsx

@@ -109,14 +109,69 @@ function baseProps() {
   };
 }
 
+describe("WorkspaceSidebar — Conversations badge (channel-conversations DD-011 D-f)", () => {
+  const conversationsRow = (container: HTMLElement) =>
+    container.querySelector<HTMLAnchorElement>('[data-row-id="conversations"]')!;
+
+  it("shows the wants-human count on the Conversations row with a meaning-stating accessible name", () => {
+    const { container } = renderSidebar(
+      <WorkspaceSidebar {...baseProps()} conversationsBadgeCount={3} />,
+    );
+
+    const row = conversationsRow(container);
+    expect(within(row).getByText("3")).toBeDefined();
+    expect(within(row).getByText("3 conversations need a human")).toBeDefined();
+  });
+
+  it("speaks the singular for one conversation", () => {
+    const { container } = renderSidebar(
+      <WorkspaceSidebar {...baseProps()} conversationsBadgeCount={1} />,
+    );
+
+    expect(
+      within(conversationsRow(container)).getByText("1 conversation needs a human"),
+    ).toBeDefined();
+  });
+
+  it("hides the badge at zero and when the host passes no count", () => {
+    const { container } = renderSidebar(
+      <WorkspaceSidebar {...baseProps()} conversationsBadgeCount={0} />,
+    );
+    expect(
+      within(conversationsRow(container)).queryByText(/need(s)? a human/),
+    ).toBeNull();
+
+    cleanup();
+
+    const { container: without } = renderSidebar(
+      <WorkspaceSidebar {...baseProps()} />,
+    );
+    expect(
+      within(conversationsRow(without)).queryByText(/need(s)? a human/),
+    ).toBeNull();
+  });
+
+  it("caps the visible number at 99+ while the accessible name keeps the real count", () => {
+    const { container } = renderSidebar(
+      <WorkspaceSidebar {...baseProps()} conversationsBadgeCount={104} />,
+    );
+
+    const row = conversationsRow(container);
+    expect(within(row).getByText("99+")).toBeDefined();
+    expect(within(row).queryByText("104")).toBeNull();
+    expect(within(row).getByText("104 conversations need a human")).toBeDefined();
+  });
+});
+
 describe("WorkspaceSidebar — primary navigation", () => {
-  it("renders the three primary rows through renderLink with stable ids and hrefs", () => {
+  it("renders the four primary rows through renderLink with stable ids and hrefs", () => {
     const { container } = renderSidebar(<WorkspaceSidebar {...baseProps()} />);
 
     const row = (id: string) =>
       container.querySelector<HTMLAnchorElement>(`[data-row-id="${id}"]`);
     expect(row("new-session")?.getAttribute("href")).toBe("/");
     expect(row("dashboard")?.getAttribute("href")).toBe("/dashboard");
+    expect(row("conversations")?.getAttribute("href")).toBe("/conversations");
     expect(row("library")?.getAttribute("href")).toBe("/library");
   });