@grackle-ai/web-components 0.107.2

package/src/components/layout/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Layout components for the application shell structure.
+ * @module layout
+ */
+export { StatusBar } from "./StatusBar.js";
+export { AppNav, TABS } from "./AppNav.js";
+export type { AppTab } from "./AppNav.js";
+export { Sidebar } from "./Sidebar.js";
+export { BottomStatusBar } from "./BottomStatusBar.js";

package/src/components/lists/EnvironmentNav.module.scss

@@ -0,0 +1,118 @@
+@use '../../styles/mixins' as *;
+
+.nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  width: 100%;
+  padding: var(--space-md);
+  overflow-y: auto;
+
+  @include mobile {
+    flex-direction: row;
+    width: 100%;
+    min-width: unset;
+    border-right: none;
+    border-bottom: 1px solid var(--border-subtle);
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding: var(--space-xs) var(--space-sm);
+    gap: 0;
+    flex-wrap: nowrap;
+  }
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  border: none;
+  border-left: 3px solid transparent;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+  font-family: var(--font-ui);
+  cursor: pointer;
+  transition: background var(--transition-fast),
+              color var(--transition-fast),
+              border-color var(--transition-fast);
+  text-align: left;
+  width: 100%;
+
+  &:hover {
+    background: var(--bg-overlay);
+    color: var(--text-primary);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--accent-green);
+    outline-offset: -2px;
+  }
+
+  @include mobile {
+    border-left: none;
+    border-bottom: 2px solid transparent;
+    white-space: nowrap;
+    flex-shrink: 0;
+    padding: var(--space-xs) var(--space-sm);
+    font-size: var(--font-size-xs);
+    width: auto;
+    border-radius: 0;
+  }
+}
+
+.tabActive {
+  border-left-color: var(--accent-green);
+  background: var(--bg-overlay);
+  color: var(--text-primary);
+  font-weight: var(--font-weight-medium);
+
+  @include mobile {
+    border-left-color: transparent;
+    border-bottom-color: var(--accent-green);
+  }
+}
+
+.tabLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.statusDot {
+  flex-shrink: 0;
+  font-size: var(--font-size-xs);
+  line-height: 1;
+}
+
+.pulse {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+@keyframes pulse-glow {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.addButton {
+  @include btn-ghost;
+  font-size: var(--font-size-sm);
+  padding: var(--space-sm) var(--space-md);
+  margin-top: var(--space-sm);
+  text-align: left;
+  width: 100%;
+  color: var(--text-tertiary);
+
+  &:hover {
+    color: var(--accent-green);
+  }
+}
+
+.empty {
+  padding: var(--space-md);
+  font-size: var(--font-size-sm);
+  color: var(--text-tertiary);
+  text-align: center;
+}

package/src/components/lists/EnvironmentNav.stories.tsx

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent } from "@storybook/test";
+import { EnvironmentNav } from "./EnvironmentNav.js";
+import { buildEnvironment } from "../../test-utils/storybook-helpers.js";
+
+const meta: Meta<typeof EnvironmentNav> = {
+  title: "Grackle/Lists/EnvironmentNav",
+  tags: ["autodocs"],
+  component: EnvironmentNav,
+  args: {
+    environments: [
+      buildEnvironment({ id: "env-1", displayName: "test-local", status: "connected" }),
+      buildEnvironment({ id: "env-2", displayName: "test-ssh", status: "disconnected", adapterType: "ssh" }),
+      buildEnvironment({ id: "env-3", displayName: "test-docker", status: "error", adapterType: "docker" }),
+    ],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EnvironmentNav>;
+
+/** Environment card renders with its display name. */
+export const CardRendersWithName: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText("test-local")).toBeInTheDocument();
+    await expect(canvas.getByText("test-ssh")).toBeInTheDocument();
+    await expect(canvas.getByText("test-docker")).toBeInTheDocument();
+  },
+};
+
+/** Status dot is colored based on the environment status. */
+export const StatusDotColored: Story = {
+  args: {
+    environments: [
+      buildEnvironment({ id: "env-connected", displayName: "Connected Env", status: "connected" }),
+      buildEnvironment({ id: "env-disconnected", displayName: "Disconnected Env", status: "disconnected" }),
+      buildEnvironment({ id: "env-error", displayName: "Error Env", status: "error" }),
+    ],
+  },
+  play: async ({ canvas }) => {
+    const items: HTMLElement[] = canvas.getAllByTestId("env-nav-item");
+    await expect(items.length).toBe(3);
+
+    // Connected and disconnected dots should have different colors
+    const connectedDot: HTMLElement | null = items[0].querySelector("span");
+    const disconnectedDot: HTMLElement | null = items[1].querySelector("span");
+    await expect(connectedDot).not.toBeNull();
+    await expect(disconnectedDot).not.toBeNull();
+    if (connectedDot && disconnectedDot) {
+      const connectedColor: string = window.getComputedStyle(connectedDot).color;
+      const disconnectedColor: string = window.getComputedStyle(disconnectedDot).color;
+      await expect(connectedColor).not.toBe(disconnectedColor);
+    }
+  },
+};
+
+/** The "+ Add Environment" button is visible and accessible. */
+export const AddButtonVisible: Story = {
+  play: async ({ canvas }) => {
+    const addButton = canvas.getByTestId("env-nav-add");
+    await expect(addButton).toBeInTheDocument();
+    await expect(addButton).toHaveTextContent("+ Add Environment");
+  },
+};
+
+/** Environment cards appear in the nav list. */
+export const CardsInList: Story = {
+  play: async ({ canvas }) => {
+    const navItems = canvas.getAllByTestId("env-nav-item");
+    await expect(navItems.length).toBe(3);
+  },
+};
+
+/** Arrow keys navigate between environment items. */
+export const KeyboardNavigation: Story = {
+  play: async ({ canvas }) => {
+    const tabs = canvas.getAllByRole("tab");
+    tabs[0].focus();
+    await expect(tabs[0]).toHaveFocus();
+
+    // ArrowDown moves to next
+    await userEvent.keyboard("{ArrowDown}");
+    await expect(tabs[1]).toHaveFocus();
+
+    // ArrowUp moves back
+    await userEvent.keyboard("{ArrowUp}");
+    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 environment items (vim-style aliases). */
+export const JKNavigation: Story = {
+  play: async ({ canvas }) => {
+    const tabs = canvas.getAllByRole("tab");
+    tabs[0].focus();
+
+    await userEvent.keyboard("j");
+    await expect(tabs[1]).toHaveFocus();
+
+    await userEvent.keyboard("k");
+    await expect(tabs[0]).toHaveFocus();
+  },
+};
+
+/** Empty state shows a message when there are no environments. */
+export const EmptyState: Story = {
+  args: {
+    environments: [],
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText("No environments yet.")).toBeInTheDocument();
+    // Add button should still be visible
+    await expect(canvas.getByTestId("env-nav-add")).toBeInTheDocument();
+  },
+};

package/src/components/lists/EnvironmentNav.tsx

@@ -0,0 +1,133 @@
+import { useCallback, useRef, type JSX, type KeyboardEvent } from "react";
+import { Circle } from "lucide-react";
+import { ICON_XS } from "../../utils/iconSize.js";
+import { useMatch } from "react-router";
+import type { Environment } from "../../hooks/types.js";
+import { environmentUrl, NEW_ENVIRONMENT_URL, useAppNavigate } from "../../utils/navigation.js";
+import styles from "./EnvironmentNav.module.scss";
+
+/** Status-dot color mapping using CSS custom properties. */
+const STATUS_COLORS: Record<string, string> = {
+  connected: "var(--accent-green)",
+  sleeping: "var(--accent-yellow)",
+  error: "var(--accent-red)",
+  disconnected: "var(--text-tertiary)",
+  connecting: "var(--accent-blue)",
+};
+
+/** Props for the EnvironmentNav component. */
+interface EnvironmentNavProps {
+  /** List of all environments to display in the nav. */
+  environments: Environment[];
+}
+
+/** Vertical nav rail listing environments with status dots. */
+export function EnvironmentNav({ environments }: EnvironmentNavProps): JSX.Element {
+  const navigate = useAppNavigate();
+  const tabListRef = useRef<HTMLElement>(null);
+
+  const envMatch = useMatch("/environments/:environmentId");
+  const editMatch = useMatch("/environments/:environmentId/edit");
+  const workspaceMatch = useMatch("/environments/:environmentId/workspaces/:workspaceId");
+  const workspaceSubMatch = useMatch("/environments/:environmentId/workspaces/:workspaceId/*");
+  const rawId = envMatch?.params.environmentId ?? editMatch?.params.environmentId
+    ?? workspaceMatch?.params.environmentId ?? workspaceSubMatch?.params.environmentId;
+  /** Filter out the "new" pseudo-ID so /environments/new doesn't highlight a real tab. */
+  const activeId = rawId === "new" ? undefined : rawId;
+
+  const handleClick = useCallback((envId: string) => {
+    navigate(environmentUrl(envId));
+  }, [navigate]);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLElement>) => {
+    const buttons = tabListRef.current?.querySelectorAll<HTMLButtonElement>('[role="tab"]');
+    if (!buttons || buttons.length === 0) {
+      return;
+    }
+    const focusedIndex = Array.from(buttons).findIndex((b) => b === document.activeElement);
+    const currentIndex = focusedIndex >= 0 ? focusedIndex : environments.findIndex((env) => env.id === activeId);
+    let nextIndex = currentIndex;
+
+    if (e.key === "ArrowDown" || e.key === "j" || e.key === "J") {
+      e.preventDefault();
+      nextIndex = (currentIndex + 1) % buttons.length;
+    } else if (e.key === "ArrowUp" || e.key === "k" || e.key === "K") {
+      e.preventDefault();
+      nextIndex = (currentIndex - 1 + buttons.length) % buttons.length;
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      nextIndex = 0;
+    } else if (e.key === "End") {
+      e.preventDefault();
+      nextIndex = buttons.length - 1;
+    } else {
+      return;
+    }
+
+    if (nextIndex < environments.length) {
+      navigate(environmentUrl(environments[nextIndex].id));
+    }
+    buttons[nextIndex].focus();
+  }, [activeId, environments, navigate]);
+
+  /** When no environment is selected, the first tab should be focusable. */
+  const focusableId = activeId ?? (environments.length > 0 ? environments[0].id : undefined);
+
+  return (
+    <div className={styles.nav} data-testid="environment-nav">
+      <nav
+        ref={tabListRef}
+        role="tablist"
+        aria-orientation="vertical"
+        aria-label="Environments"
+        onKeyDown={handleKeyDown}
+      >
+        {environments.map((env) => {
+          const isActive = env.id === activeId;
+          const isFocusable = env.id === focusableId;
+          const statusColor = STATUS_COLORS[env.status] || "var(--text-tertiary)";
+          const isConnected = env.status === "connected";
+          return (
+            <button
+              key={env.id}
+              role="tab"
+              type="button"
+              aria-selected={isActive}
+              tabIndex={isFocusable ? 0 : -1}
+              className={`${styles.tab} ${isActive ? styles.tabActive : ""}`}
+              onClick={() => handleClick(env.id)}
+              data-testid="env-nav-item"
+            >
+              <span
+                className={`${styles.statusDot} ${isConnected ? styles.pulse : ""}`}
+                style={{ color: statusColor }}
+                aria-hidden="true"
+              >
+                <Circle size={ICON_XS} fill="currentColor" />
+              </span>
+              <span className={styles.tabLabel} title={env.displayName || env.id}>
+                {env.displayName || env.id}
+              </span>
+            </button>
+          );
+        })}
+      </nav>
+
+      <button
+        type="button"
+        className={styles.addButton}
+        onClick={() => navigate(NEW_ENVIRONMENT_URL)}
+        title="Add environment"
+        data-testid="env-nav-add"
+      >
+        + Add Environment
+      </button>
+
+      {environments.length === 0 && (
+        <div className={styles.empty}>
+          No environments yet.
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/lists/FindingsNav.module.scss

@@ -0,0 +1,126 @@
+@use '../../styles/mixins' as *;
+
+.nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  width: 100%;
+  padding: var(--space-md);
+  overflow-y: auto;
+
+  @include mobile {
+    flex-direction: row;
+    width: 100%;
+    min-width: unset;
+    border-right: none;
+    border-bottom: 1px solid var(--border-subtle);
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding: var(--space-xs) var(--space-sm);
+    gap: 0;
+    flex-wrap: nowrap;
+  }
+}
+
+.categoryPills {
+  display: flex;
+  gap: var(--space-xs);
+  flex-wrap: wrap;
+  padding-bottom: var(--space-sm);
+  border-bottom: 1px solid var(--border-subtle);
+  margin-bottom: var(--space-xs);
+}
+
+.categoryPill {
+  font-size: 10px;
+  font-weight: var(--font-weight-bold);
+  text-transform: uppercase;
+  padding: 1px var(--space-xs);
+  border-radius: var(--radius-full);
+  background: var(--bg-elevated);
+}
+
+.tab {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  border: none;
+  border-left: 3px solid transparent;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+  font-family: var(--font-ui);
+  cursor: pointer;
+  transition: background var(--transition-fast),
+              color var(--transition-fast),
+              border-color var(--transition-fast);
+  text-align: left;
+  width: 100%;
+
+  &:hover {
+    background: var(--bg-overlay);
+    color: var(--text-primary);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--accent-blue);
+    outline-offset: -2px;
+  }
+
+  @include mobile {
+    border-left: none;
+    border-bottom: 2px solid transparent;
+    white-space: nowrap;
+    flex-shrink: 0;
+    padding: var(--space-xs) var(--space-sm);
+    font-size: var(--font-size-xs);
+    width: auto;
+    border-radius: 0;
+  }
+}
+
+.tabActive {
+  border-left-color: var(--accent-blue);
+  background: var(--bg-overlay);
+  color: var(--text-primary);
+  font-weight: var(--font-weight-medium);
+
+  @include mobile {
+    border-left-color: transparent;
+    border-bottom-color: var(--accent-blue);
+  }
+}
+
+.tabContent {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.tabLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tabMeta {
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+}
+
+.categoryDot {
+  flex-shrink: 0;
+  font-size: var(--font-size-xs);
+  line-height: 1;
+  margin-top: 3px;
+}
+
+.empty {
+  padding: var(--space-md);
+  font-size: var(--font-size-sm);
+  color: var(--text-tertiary);
+  text-align: center;
+}

package/src/components/lists/FindingsNav.tsx

@@ -0,0 +1,146 @@
+/**
+ * Sidebar navigation for the Findings pages.
+ *
+ * Displays a list of findings with category pills and relative timestamps.
+ *
+ * @module
+ */
+
+import { useCallback, useMemo, useRef, type JSX, type KeyboardEvent } from "react";
+import { Circle } from "lucide-react";
+import { ICON_XS } from "../../utils/iconSize.js";
+import { useMatch } from "react-router";
+import type { FindingData } from "../../hooks/types.js";
+import { findingUrl, useAppNavigate } from "../../utils/navigation.js";
+import { formatRelativeTime } from "../../utils/time.js";
+import { getCategoryColor } from "../../utils/findingCategory.js";
+import styles from "./FindingsNav.module.scss";
+
+/** Props for the FindingsNav component. */
+interface FindingsNavProps {
+  /** All loaded findings to display. */
+  findings: FindingData[];
+  /** Optional workspace ID for scoped navigation. */
+  workspaceId?: string;
+  /** Optional environment ID for scoped navigation. */
+  environmentId?: string;
+}
+
+/** Sidebar nav listing findings with category badges and relative timestamps. */
+export function FindingsNav({ findings, workspaceId, environmentId }: FindingsNavProps): JSX.Element {
+  const navigate = useAppNavigate();
+  const tabListRef = useRef<HTMLElement>(null);
+
+  // Match both global and workspace-scoped finding detail routes.
+  const globalMatch = useMatch("/findings/:findingId");
+  const scopedMatch = useMatch("/environments/:environmentId/workspaces/:workspaceId/findings/:findingId");
+  const activeFindingId = globalMatch?.params.findingId ?? scopedMatch?.params.findingId;
+
+  /** Unique categories derived from the current findings list. */
+  const categories = useMemo(() => {
+    const cats = new Set(findings.map((f) => f.category).filter(Boolean));
+    return Array.from(cats).sort();
+  }, [findings]);
+
+  const handleClick = useCallback((findingId: string) => {
+    navigate(findingUrl(findingId, workspaceId, environmentId));
+  }, [navigate, workspaceId, environmentId]);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLElement>) => {
+    const buttons = tabListRef.current?.querySelectorAll<HTMLButtonElement>('[role="tab"]');
+    if (!buttons || buttons.length === 0) {
+      return;
+    }
+    const focusedIndex = Array.from(buttons).findIndex((b) => b === document.activeElement);
+    const currentIndex = focusedIndex >= 0 ? focusedIndex : findings.findIndex((f) => f.id === activeFindingId);
+    let nextIndex = currentIndex;
+
+    if (e.key === "ArrowDown" || e.key === "j" || e.key === "J") {
+      e.preventDefault();
+      nextIndex = (currentIndex + 1) % buttons.length;
+    } else if (e.key === "ArrowUp" || e.key === "k" || e.key === "K") {
+      e.preventDefault();
+      nextIndex = (currentIndex - 1 + buttons.length) % buttons.length;
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      nextIndex = 0;
+    } else if (e.key === "End") {
+      e.preventDefault();
+      nextIndex = buttons.length - 1;
+    } else {
+      return;
+    }
+
+    if (nextIndex < findings.length) {
+      navigate(findingUrl(findings[nextIndex].id, workspaceId, environmentId));
+    }
+    buttons[nextIndex].focus();
+  }, [activeFindingId, findings, navigate, workspaceId, environmentId]);
+
+  const focusableId = activeFindingId ?? (findings.length > 0 ? findings[0].id : undefined);
+
+  return (
+    <div className={styles.nav} data-testid="findings-nav">
+      {categories.length > 1 && (
+        <div className={styles.categoryPills} data-testid="findings-nav-categories">
+          {categories.map((cat) => (
+            <span
+              key={cat}
+              className={styles.categoryPill}
+              style={{ color: getCategoryColor(cat).text }}
+            >
+              {cat}
+            </span>
+          ))}
+        </div>
+      )}
+
+      <nav
+        ref={tabListRef}
+        role="tablist"
+        aria-orientation="vertical"
+        aria-label="Findings"
+        onKeyDown={handleKeyDown}
+      >
+        {findings.map((f) => {
+          const isActive = f.id === activeFindingId;
+          const isFocusable = f.id === focusableId;
+          return (
+            <button
+              key={f.id}
+              role="tab"
+              type="button"
+              aria-selected={isActive}
+              tabIndex={isFocusable ? 0 : -1}
+              className={`${styles.tab} ${isActive ? styles.tabActive : ""}`}
+              onClick={() => handleClick(f.id)}
+              data-testid="finding-nav-item"
+            >
+              <span
+                className={styles.categoryDot}
+                style={{ color: getCategoryColor(f.category).text }}
+                aria-hidden="true"
+              >
+                <Circle size={ICON_XS} fill="currentColor" />
+              </span>
+              <span className={styles.tabContent}>
+                <span className={styles.tabLabel} title={f.title}>
+                  {f.title}
+                </span>
+                <span className={styles.tabMeta} title={f.createdAt}>
+                  {formatRelativeTime(f.createdAt)}
+                </span>
+              </span>
+            </button>
+          );
+        })}
+      </nav>
+
+      {findings.length === 0 && (
+        <div className={styles.empty}>
+          No findings yet. Agents will post discoveries here.
+        </div>
+      )}
+    </div>
+  );
+}