@grackle-ai/web-components 0.107.2

package/src/components/knowledge/KnowledgeNav.tsx

@@ -0,0 +1,138 @@
+/**
+ * Knowledge graph sidebar navigation — search, workspace filter, and node list.
+ *
+ * Rendered inside the shared Sidebar component when the Knowledge tab is active.
+ *
+ * @module
+ */
+
+import { useState, useCallback, type FormEvent, type JSX } from "react";
+import type { Workspace } from "../../hooks/types.js";
+import type { GraphNode } from "../../hooks/types.js";
+import styles from "./KnowledgeNav.module.scss";
+
+/** Props for the KnowledgeNav sidebar component. */
+export interface KnowledgeNavProps {
+  /** Nodes currently in the graph. */
+  nodes: GraphNode[];
+  /** All workspaces for the filter dropdown. */
+  workspaces: Workspace[];
+  /** Whether a search or load operation is in progress. */
+  loading: boolean;
+  /** Active search query (non-empty means search is active). */
+  searchQuery: string;
+  /** Execute a semantic search. */
+  onSearch: (query: string) => void;
+  /** Clear search and reload recent nodes. */
+  onClearSearch: () => void;
+  /** Select a node by ID (e.g., open detail panel). */
+  onSelectNode: (nodeId: string) => void;
+  /** Filter by workspace (empty string means all workspaces). */
+  onWorkspaceChange: (workspaceId: string) => void;
+}
+
+/** Sidebar content for the Knowledge tab. */
+export function KnowledgeNav({
+  nodes,
+  workspaces,
+  loading,
+  searchQuery,
+  onSearch,
+  onClearSearch,
+  onSelectNode,
+  onWorkspaceChange,
+}: KnowledgeNavProps): JSX.Element {
+  const [searchInput, setSearchInput] = useState("");
+
+  const handleSearch = useCallback((e: FormEvent) => {
+    e.preventDefault();
+    if (searchInput.trim()) {
+      onSearch(searchInput.trim());
+    }
+  }, [searchInput, onSearch]);
+
+  const handleClear = useCallback(() => {
+    setSearchInput("");
+    onClearSearch();
+  }, [onClearSearch]);
+
+  const handleNodeClick = useCallback((nodeId: string) => {
+    onSelectNode(nodeId);
+  }, [onSelectNode]);
+
+  const handleWorkspaceChange = useCallback((wsId: string) => {
+    setSearchInput("");
+    onWorkspaceChange(wsId);
+  }, [onWorkspaceChange]);
+
+  return (
+    <div className={styles.nav} data-testid="knowledge-nav">
+      {/* Search */}
+      <form className={styles.searchForm} onSubmit={handleSearch}>
+        <input
+          className={styles.searchInput}
+          type="text"
+          placeholder="Search..."
+          value={searchInput}
+          onChange={(e) => { setSearchInput(e.target.value); }}
+          data-testid="knowledge-search-input"
+          aria-label="Search knowledge nodes"
+        />
+        <button type="submit" className={styles.searchButton} disabled={loading}>
+          Go
+        </button>
+      </form>
+      {searchQuery && (
+        <button type="button" className={styles.clearButton} onClick={handleClear}>
+          Clear search
+        </button>
+      )}
+
+      {/* Workspace filter */}
+      <select
+        className={styles.workspaceSelect}
+        onChange={(e) => { handleWorkspaceChange(e.target.value); }}
+        data-testid="knowledge-workspace-filter"
+        aria-label="Filter by workspace"
+      >
+        <option value="">All workspaces</option>
+        {workspaces.map((ws) => (
+          <option key={ws.id} value={ws.id}>{ws.name}</option>
+        ))}
+      </select>
+
+      {/* Node list */}
+      <div className={styles.listHeader}>
+        Nodes ({nodes.length})
+      </div>
+      <ul className={styles.nodeList}>
+        {nodes.map((node: GraphNode) => (
+          <li
+            key={node.id}
+            className={styles.nodeItem}
+            onClick={() => { handleNodeClick(node.id); }}
+            onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); handleNodeClick(node.id); } }}
+            role="button"
+            tabIndex={0}
+          >
+            <span
+              className={styles.indicator}
+              style={{
+                backgroundColor:
+                  node.kind === "reference" ? "#4A9EFF"
+                  : node.category === "decision" ? "#22C55E"
+                  : node.category === "concept" ? "#A855F7"
+                  : node.category === "snippet" ? "#6B7280"
+                  : "#EAB308",
+              }}
+            />
+            <span className={styles.label}>{node.label}</span>
+            <span className={styles.badge}>
+              {node.kind === "reference" ? node.sourceType : node.category}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/src/components/knowledge/index.ts

@@ -0,0 +1,3 @@
+export { KnowledgeGraph } from "./KnowledgeGraph.js";
+export { KnowledgeDetailPanel } from "./KnowledgeDetailPanel.js";
+export { KnowledgeNav } from "./KnowledgeNav.js";

package/src/components/layout/AppNav.module.scss

@@ -0,0 +1,82 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// AppNav — full-width navigation bar below the StatusBar
+// =============================================================================
+
+.nav {
+  @include surface-panel;
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  padding: 0 var(--space-lg);
+  border-bottom: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+
+  @include mobile {
+    padding: 0 var(--space-xs);
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-lg);
+  border: none;
+  border-bottom: 3px solid transparent;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: var(--font-size-base);
+  font-family: var(--font-ui);
+  cursor: pointer;
+  transition: background var(--transition-fast),
+              color var(--transition-fast),
+              border-color var(--transition-fast);
+  white-space: nowrap;
+
+  &:hover {
+    background: var(--bg-overlay);
+    color: var(--text-primary);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--accent-green);
+    outline-offset: -2px;
+  }
+
+  @include mobile {
+    padding: var(--space-sm) var(--space-md);
+    font-size: var(--font-size-sm);
+    gap: var(--space-xs);
+    flex-shrink: 0;
+  }
+}
+
+.tabIcon {
+  font-size: var(--font-size-lg);
+  line-height: 1;
+
+  @include mobile {
+    font-size: var(--font-size-base);
+  }
+}
+
+.tabLabel {
+  @include mobile {
+    // Hide labels on very small screens, show only icons
+    @media (max-width: 480px) {
+      display: none;
+    }
+  }
+}
+
+.tabActive {
+  border-bottom-color: var(--accent-green);
+  color: var(--text-primary);
+  font-weight: var(--font-weight-medium);
+}

package/src/components/layout/AppNav.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent } from "@storybook/test";
+import { Brain, ClipboardList, Home, MessageSquare, Monitor, Search, Settings } from "lucide-react";
+import { AppNav } from "./AppNav.js";
+import { ICON_LG } from "../../utils/iconSize.js";
+import { HOME_URL, CHAT_URL, ENVIRONMENTS_URL, SETTINGS_CREDENTIALS_URL, TASKS_URL, FINDINGS_URL, KNOWLEDGE_URL } from "../../utils/navigation.js";
+
+const meta: Meta<typeof AppNav> = {
+  title: "Grackle/Layout/AppNav",
+  tags: ["autodocs"],
+  component: AppNav,
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** All tabs rendered (default behavior, no tabs prop). */
+export const AllTabsRendered: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("tab", { name: /Dashboard/ })).toBeInTheDocument();
+    await expect(canvas.getByRole("tab", { name: /Chat/ })).toBeInTheDocument();
+    await expect(canvas.getByRole("tab", { name: /Tasks/ })).toBeInTheDocument();
+    await expect(canvas.getByRole("tab", { name: /Environments/ })).toBeInTheDocument();
+    await expect(canvas.getByRole("tab", { name: /Knowledge/ })).toBeInTheDocument();
+    await expect(canvas.getByRole("tab", { name: /Settings/ })).toBeInTheDocument();
+  },
+};
+
+/** Core-only tabs: orchestration (Tasks, Findings) and knowledge tabs are absent. */
+export const CoreOnlyTabs: Story = {
+  args: {
+    tabs: [
+      { view: "dashboard", label: "Dashboard", icon: <Home size={ICON_LG} />, route: HOME_URL, testId: "sidebar-tab-dashboard" },
+      { view: "chat", label: "Chat", icon: <MessageSquare size={ICON_LG} />, route: CHAT_URL, testId: "sidebar-tab-chat" },
+      { view: "environments", label: "Environments", icon: <Monitor size={ICON_LG} />, route: ENVIRONMENTS_URL, testId: "sidebar-tab-environments" },
+      { view: "settings", label: "Settings", icon: <Settings size={ICON_LG} />, route: SETTINGS_CREDENTIALS_URL, testId: "sidebar-tab-settings" },
+    ],
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("tab", { name: /Dashboard/ })).toBeInTheDocument();
+    await expect(canvas.getByRole("tab", { name: /Chat/ })).toBeInTheDocument();
+    await expect(canvas.getByRole("tab", { name: /Environments/ })).toBeInTheDocument();
+    await expect(canvas.getByRole("tab", { name: /Settings/ })).toBeInTheDocument();
+    await expect(canvas.queryByRole("tab", { name: /Tasks/ })).not.toBeInTheDocument();
+    await expect(canvas.queryByRole("tab", { name: /Findings/ })).not.toBeInTheDocument();
+    await expect(canvas.queryByRole("tab", { name: /Knowledge/ })).not.toBeInTheDocument();
+  },
+};
+
+/** All tabs explicitly provided via tabs prop. */
+export const AllTabsExplicit: Story = {
+  args: {
+    tabs: [
+      { view: "dashboard", label: "Dashboard", icon: <Home size={ICON_LG} />, route: HOME_URL, testId: "sidebar-tab-dashboard" },
+      { view: "chat", label: "Chat", icon: <MessageSquare size={ICON_LG} />, route: CHAT_URL, testId: "sidebar-tab-chat" },
+      { view: "tasks", label: "Tasks", icon: <ClipboardList size={ICON_LG} />, route: TASKS_URL, testId: "sidebar-tab-tasks" },
+      { view: "environments", label: "Environments", icon: <Monitor size={ICON_LG} />, route: ENVIRONMENTS_URL, testId: "sidebar-tab-environments" },
+      { view: "knowledge", label: "Knowledge", icon: <Brain size={ICON_LG} />, route: KNOWLEDGE_URL, testId: "sidebar-tab-knowledge" },
+      { view: "findings", label: "Findings", icon: <Search size={ICON_LG} />, route: FINDINGS_URL, testId: "sidebar-tab-findings" },
+      { view: "settings", label: "Settings", icon: <Settings size={ICON_LG} />, route: SETTINGS_CREDENTIALS_URL, testId: "sidebar-tab-settings" },
+    ],
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("tab", { name: /Tasks/ })).toBeInTheDocument();
+    await expect(canvas.getByRole("tab", { name: /Findings/ })).toBeInTheDocument();
+    await expect(canvas.getByRole("tab", { name: /Knowledge/ })).toBeInTheDocument();
+  },
+};
+
+/** Arrow keys navigate between tabs horizontally. */
+export const KeyboardNavigation: Story = {
+  play: async ({ canvas }) => {
+    const tabs = canvas.getAllByRole("tab");
+    tabs[0].focus();
+    await expect(tabs[0]).toHaveFocus();
+
+    // ArrowRight moves to next tab
+    await userEvent.keyboard("{ArrowRight}");
+    await expect(tabs[1]).toHaveFocus();
+
+    // ArrowLeft moves back
+    await userEvent.keyboard("{ArrowLeft}");
+    await expect(tabs[0]).toHaveFocus();
+
+    // End jumps to last, Home jumps to first
+    await userEvent.keyboard("{End}");
+    await expect(tabs[tabs.length - 1]).toHaveFocus();
+    await userEvent.keyboard("{Home}");
+    await expect(tabs[0]).toHaveFocus();
+  },
+};
+
+/** J/K keys navigate between tabs (vim-style aliases). */
+export const JKNavigation: Story = {
+  play: async ({ canvas }) => {
+    const tabs = canvas.getAllByRole("tab");
+    tabs[0].focus();
+
+    // J moves to next tab
+    await userEvent.keyboard("j");
+    await expect(tabs[1]).toHaveFocus();
+
+    // K moves back
+    await userEvent.keyboard("k");
+    await expect(tabs[0]).toHaveFocus();
+  },
+};
+
+/** Tab list has correct ARIA attributes. */
+export const AriaAttributes: Story = {
+  play: async ({ canvas }) => {
+    const tablist = canvas.getByRole("tablist");
+    await expect(tablist).toHaveAttribute("aria-orientation", "horizontal");
+    await expect(tablist).toHaveAttribute("aria-label", "App navigation");
+  },
+};

package/src/components/layout/AppNav.tsx

@@ -0,0 +1,133 @@
+import { useCallback, useRef, type JSX, type KeyboardEvent, type ReactNode } from "react";
+import { useLocation } from "react-router";
+import { Brain, ClipboardList, Home, MessageSquare, Monitor, Search, Settings } from "lucide-react";
+import { CHAT_URL, ENVIRONMENTS_URL, FINDINGS_URL, HOME_URL, KNOWLEDGE_URL, SETTINGS_URL, SETTINGS_CREDENTIALS_URL, TASKS_URL, useAppNavigate } from "../../utils/navigation.js";
+import { ICON_LG } from "../../utils/iconSize.js";
+import { Tooltip } from "../display/Tooltip.js";
+import styles from "./AppNav.module.scss";
+
+/** Application view identifiers. */
+export type AppView = "dashboard" | "chat" | "tasks" | "environments" | "knowledge" | "findings" | "settings";
+
+/** Tab definition for the application navigation bar. */
+export interface AppTab {
+  /** View identifier. */
+  view: AppView;
+  /** Display label. */
+  label: string;
+  /** Icon element displayed before the label. */
+  icon: ReactNode;
+  /** Route to navigate to when clicked. */
+  route: string;
+  /** data-testid suffix. */
+  testId: string;
+}
+
+/** Ordered list of all app navigation tabs. Exported for plugin registry use. */
+export const TABS: AppTab[] = [
+  { view: "dashboard", label: "Dashboard", icon: <Home size={ICON_LG} />, route: HOME_URL, testId: "sidebar-tab-dashboard" },
+  { view: "chat", label: "Chat", icon: <MessageSquare size={ICON_LG} />, route: CHAT_URL, testId: "sidebar-tab-chat" },
+  { view: "tasks", label: "Tasks", icon: <ClipboardList size={ICON_LG} />, route: TASKS_URL, testId: "sidebar-tab-tasks" },
+  { view: "environments", label: "Environments", icon: <Monitor size={ICON_LG} />, route: ENVIRONMENTS_URL, testId: "sidebar-tab-environments" },
+  { view: "knowledge", label: "Knowledge", icon: <Brain size={ICON_LG} />, route: KNOWLEDGE_URL, testId: "sidebar-tab-knowledge" },
+  { view: "findings", label: "Findings", icon: <Search size={ICON_LG} />, route: FINDINGS_URL, testId: "sidebar-tab-findings" },
+  { view: "settings", label: "Settings", icon: <Settings size={ICON_LG} />, route: SETTINGS_CREDENTIALS_URL, testId: "sidebar-tab-settings" },
+];
+
+/** Derive the active application view from a URL pathname. */
+export function getActiveView(pathname: string): AppView {
+  if (pathname === HOME_URL || pathname === "/") {
+    return "dashboard";
+  }
+  if (pathname.startsWith("/chat") || pathname.startsWith("/sessions")) {
+    return "chat";
+  }
+  if (pathname.startsWith("/workspaces") || pathname.startsWith("/environments")) {
+    return "environments";
+  }
+  if (pathname.startsWith(KNOWLEDGE_URL)) {
+    return "knowledge";
+  }
+  if (pathname.startsWith(FINDINGS_URL)) {
+    return "findings";
+  }
+  if (pathname.startsWith(SETTINGS_URL)) {
+    return "settings";
+  }
+  return "tasks";
+}
+
+/** Full-width navigation bar below the StatusBar for switching between app views. */
+export function AppNav({ tabs = TABS }: { tabs?: AppTab[] }): JSX.Element {
+  const location = useLocation();
+  const navigate = useAppNavigate();
+  const tabListRef = useRef<HTMLElement>(null);
+
+  const activeView = getActiveView(location.pathname);
+
+  const handleClick = useCallback((tab: AppTab) => {
+    navigate(tab.route);
+  }, [navigate]);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLElement>) => {
+    const buttons = tabListRef.current?.querySelectorAll<HTMLButtonElement>('[role="tab"]');
+    if (!buttons) {
+      return;
+    }
+    const focusedIndex = Array.from(buttons).findIndex((b) => b === document.activeElement);
+    const currentIndex = focusedIndex >= 0 ? focusedIndex : tabs.findIndex((t) => t.view === activeView);
+    let nextIndex = currentIndex;
+
+    if (e.key === "ArrowRight" || e.key === "j" || e.key === "J") {
+      e.preventDefault();
+      nextIndex = (currentIndex + 1) % tabs.length;
+    } else if (e.key === "ArrowLeft" || e.key === "k" || e.key === "K") {
+      e.preventDefault();
+      nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      nextIndex = 0;
+    } else if (e.key === "End") {
+      e.preventDefault();
+      nextIndex = tabs.length - 1;
+    } else {
+      return;
+    }
+
+    navigate(tabs[nextIndex].route);
+    buttons[nextIndex]?.focus(); // eslint-disable-line @typescript-eslint/no-unnecessary-condition -- index may be out of bounds
+  }, [activeView, navigate, tabs]);
+
+  return (
+    <nav
+      className={styles.nav}
+      ref={tabListRef}
+      role="tablist"
+      aria-orientation="horizontal"
+      aria-label="App navigation"
+      onKeyDown={handleKeyDown}
+      data-testid="sidebar-nav"
+    >
+      {tabs.map((tab) => {
+        const isActive = tab.view === activeView;
+        return (
+          <Tooltip key={tab.view} text={tab.label} placement="bottom">
+            <button
+              role="tab"
+              type="button"
+              aria-selected={isActive}
+              tabIndex={isActive ? 0 : -1}
+              className={`${styles.tab} ${isActive ? styles.tabActive : ""}`}
+              onClick={() => handleClick(tab)}
+              data-testid={tab.testId}
+              aria-label={tab.label}
+            >
+              <span className={styles.tabIcon} aria-hidden="true">{tab.icon}</span>
+              <span className={styles.tabLabel}>{tab.label}</span>
+            </button>
+          </Tooltip>
+        );
+      })}
+    </nav>
+  );
+}

package/src/components/layout/BottomStatusBar.module.scss

@@ -0,0 +1,58 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// BottomStatusBar — read-only status bar with contextual hints
+// =============================================================================
+
+.bar {
+  @include surface-panel;
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  border-top: 1px solid var(--border-subtle);
+
+  @include mobile {
+    flex-wrap: wrap;
+    padding: var(--space-xs) var(--space-sm);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Buttons
+// ---------------------------------------------------------------------------
+
+.btnPrimary {
+  @include btn-primary;
+}
+
+.btnGhost {
+  @include btn-ghost;
+}
+
+// ---------------------------------------------------------------------------
+// Status indicators
+// ---------------------------------------------------------------------------
+
+.statusText {
+  font-size: var(--font-size-md);
+  flex: 1;
+}
+
+.statusCompleted {
+  color: var(--accent-green);
+}
+
+.statusFailed {
+  color: var(--accent-red);
+}
+
+.statusBlocked {
+  color: var(--accent-yellow);
+  font-size: var(--font-size-sm);
+}
+
+.hintText {
+  color: var(--text-tertiary);
+  font-size: var(--font-size-md);
+}

package/src/components/layout/BottomStatusBar.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect } from "@storybook/test";
+import { MemoryRouter } from "react-router";
+import { BottomStatusBar } from "./BottomStatusBar.js";
+
+const meta: Meta<typeof BottomStatusBar> = {
+  component: BottomStatusBar,
+  title: "Grackle/Layout/BottomStatusBar",
+  tags: ["autodocs"],
+  parameters: { skipRouter: true },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Empty state on the root route returns an empty fragment. */
+export const EmptyState: Story = {
+  args: {
+    sessions: [],
+    tasks: [],
+    environments: [],
+  },
+  decorators: [
+    (Story) => (
+      <MemoryRouter initialEntries={["/"]}>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+  play: async ({ canvas }) => {
+    // On the root "/" route with no data, the bar renders an empty fragment.
+    // The container should exist but the bar itself should not render any visible hint.
+    const bar = canvas.queryByText("Loading...");
+    await expect(bar).not.toBeInTheDocument();
+  },
+};