@grackle-ai/web-components 0.107.2

package/src/components/layout/BottomStatusBar.tsx

@@ -0,0 +1,206 @@
+import type { JSX } from "react";
+import { useLocation, useMatch } from "react-router";
+import type { Session, TaskData, Environment } from "../../hooks/types.js";
+import { newTaskUrl, newChatUrl, useAppNavigate } from "../../utils/navigation.js";
+import styles from "./BottomStatusBar.module.scss";
+
+/**
+ * Thin, read-only status bar that shows contextual hints based on the current
+ * route and application state. Does NOT contain any form inputs or send/spawn
+ * actions — those live in {@link ChatInput} on each page.
+ *
+ * Returns an empty fragment when the current page is showing a ChatInput or
+ * when the route has no meaningful hint to display.
+ */
+/** Props for the BottomStatusBar component. */
+interface BottomStatusBarProps {
+  /** All sessions. */
+  sessions: Session[];
+  /** All tasks. */
+  tasks: TaskData[];
+  /** All environments. */
+  environments: Environment[];
+}
+
+export function BottomStatusBar({ sessions, tasks, environments }: BottomStatusBarProps): JSX.Element {
+  const navigate = useAppNavigate();
+  const location = useLocation();
+
+  // Match current route (both global and workspace-scoped task URLs)
+  const sessionMatch = useMatch("/sessions/:sessionId");
+  const taskMatch = useMatch("/tasks/:taskId");
+  const taskStreamMatch = useMatch("/tasks/:taskId/stream");
+  const taskFindingsMatch = useMatch("/tasks/:taskId/findings");
+  const taskEditMatch = useMatch("/tasks/:taskId/edit");
+  const wsTaskMatch = useMatch("/environments/:environmentId/workspaces/:workspaceId/tasks/:taskId");
+  const wsTaskStreamMatch = useMatch("/environments/:environmentId/workspaces/:workspaceId/tasks/:taskId/stream");
+  const wsTaskFindingsMatch = useMatch("/environments/:environmentId/workspaces/:workspaceId/tasks/:taskId/findings");
+  const wsTaskEditMatch = useMatch("/environments/:environmentId/workspaces/:workspaceId/tasks/:taskId/edit");
+  const newChatMatch = useMatch("/sessions/new");
+  const workspaceMatch = useMatch("/environments/:environmentId/workspaces/:workspaceId");
+  const newTaskMatch = useMatch("/tasks/new");
+  const chatMatch = useMatch("/chat");
+  const emptyMatch = useMatch("/");
+  const settingsMatch = useMatch("/settings/*");
+
+  // Derive current page context
+  const sessionId = sessionMatch?.params.sessionId;
+  const taskId = taskMatch?.params.taskId ?? taskStreamMatch?.params.taskId ?? taskFindingsMatch?.params.taskId
+    ?? wsTaskMatch?.params.taskId ?? wsTaskStreamMatch?.params.taskId ?? wsTaskFindingsMatch?.params.taskId ?? wsTaskEditMatch?.params.taskId;
+  const wsMatch = wsTaskMatch ?? wsTaskStreamMatch ?? wsTaskFindingsMatch ?? wsTaskEditMatch;
+  const routeEnvironmentId = wsMatch?.params.environmentId ?? workspaceMatch?.params.environmentId;
+  const isEnvironments = location.pathname.startsWith("/environments") && !workspaceMatch && !wsMatch;
+  const isChat = !!chatMatch;
+  const isNewChat = !!newChatMatch;
+  const isWorkspace = !!workspaceMatch && !wsTaskMatch && !wsTaskStreamMatch && !wsTaskFindingsMatch && !wsTaskEditMatch;
+  const isNewTask = !!newTaskMatch;
+  const isTaskEdit = !!taskEditMatch || !!wsTaskEditMatch;
+  const isEmpty = !!emptyMatch && !isNewChat && !isWorkspace && !isNewTask;
+  const isSettings = !!settingsMatch;
+
+  // --- dashboard / settings / edit / new / environments / new_chat — empty ---
+  if (isEmpty || isSettings || isTaskEdit || isNewTask || isEnvironments || isNewChat) {
+    return <></>;
+  }
+
+  // --- /chat route — ChatInput handles input on the page; only show hint if no local env ---
+  if (isChat) {
+    const localEnv = environments.find((e) => e.adapterType === "local" && e.status === "connected");
+    if (!localEnv) {
+      return (
+        <div className={styles.bar}>
+          <span className={styles.hintText}>Add a local environment to start chatting</span>
+        </div>
+      );
+    }
+    return <></>;
+  }
+
+  // --- workspace mode (no specific task) ---
+  if (isWorkspace) {
+    return (
+      <div className={styles.bar}>
+        <span className={styles.hintText}>
+          Select a task or click + to create one
+        </span>
+      </div>
+    );
+  }
+
+  // --- task modes ---
+  if (taskId) {
+    const task = tasks.find((t) => t.id === taskId);
+    if (!task) {
+      return (
+        <div className={styles.bar}>
+          <span className={styles.hintText}>Loading...</span>
+        </div>
+      );
+    }
+
+    const tasksById = new Map(tasks.map((t) => [t.id, t]));
+    const isTaskBlocked = task.dependsOn.some((depId) => {
+      const dep = tasksById.get(depId);
+      return dep !== undefined && dep.status !== "complete";
+    });
+
+    // Not started (blocked or unblocked)
+    if (task.status === "not_started") {
+      const blockerNames = isTaskBlocked
+        ? task.dependsOn
+          .map((depId) => tasksById.get(depId))
+          .filter((t) => t && t.status !== "complete")
+          .map((t) => t!.title)
+        : [];
+      return (
+        <div className={styles.bar}>
+          {isTaskBlocked ? (
+            <span className={styles.statusBlocked}>
+              Blocked by: {blockerNames.join(", ")}
+            </span>
+          ) : (
+            <span className={styles.hintText}>Use the buttons above to start or manage this task</span>
+          )}
+        </div>
+      );
+    }
+
+    // Working / paused — check if session is active
+    if (task.status === "working" || task.status === "paused") {
+      const taskSessionId = task.latestSessionId || undefined;
+      const taskSession = taskSessionId
+        ? sessions.find((s) => s.id === taskSessionId)
+        : undefined;
+      const isActive = taskSession && taskSession.status !== "stopped";
+
+      // Active session — ChatInput on the page handles this; return empty
+      if (isActive) {
+        return <></>;
+      }
+
+      return (
+        <div className={styles.bar}>
+          <span className={styles.hintText}>Waiting for agent...</span>
+        </div>
+      );
+    }
+
+    // Complete
+    if (task.status === "complete") {
+      return (
+        <div className={styles.bar}>
+          <span className={`${styles.statusText} ${styles.statusCompleted}`}>
+            Task completed
+          </span>
+          <button
+            onClick={() => navigate(newTaskUrl(task.workspaceId, undefined, routeEnvironmentId))}
+            className={styles.btnPrimary}
+          >
+            + New Task
+          </button>
+        </div>
+      );
+    }
+
+    // Failed
+    if (task.status === "failed") {
+      return (
+        <div className={styles.bar}>
+          <span className={`${styles.statusText} ${styles.statusFailed}`}>
+            Task failed
+          </span>
+        </div>
+      );
+    }
+  }
+
+  // --- session mode ---
+  if (sessionId) {
+    const session = sessions.find((s) => s.id === sessionId);
+    const isEnded = session?.status === "stopped";
+    const isActive = session !== undefined && !isEnded;
+
+    // Active session — ChatInput on the page handles this; return empty
+    if (isActive) {
+      return <></>;
+    }
+
+    if (isEnded) {
+      return (
+        <div className={styles.bar}>
+          <span className={`${styles.statusText} ${styles.hintText}`}>Session {session.endReason || session.status}</span>
+          <button onClick={() => navigate(newChatUrl(session.environmentId))} className={styles.btnPrimary}>
+            + New Chat
+          </button>
+        </div>
+      );
+    }
+  }
+
+  // fallback
+  return (
+    <div className={styles.bar}>
+      <span className={styles.hintText}>Loading...</span>
+    </div>
+  );
+}

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

@@ -0,0 +1,60 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// Sidebar — left panel with permanent workspace/task tree
+// =============================================================================
+
+.container {
+  @include surface-panel;
+  background: var(--bg-surface);
+  width: 320px;
+  min-width: 220px;
+  max-width: 600px;
+  border-right: 1px solid var(--border-subtle);
+  display: flex;
+  flex-direction: column;
+  resize: horizontal;
+  overflow: hidden;
+
+  @include mobile {
+    width: 100% !important;
+    min-width: unset;
+    max-width: unset;
+    resize: none;
+    border-right: none;
+    height: 100%;
+  }
+}
+
+.tabBar {
+  display: flex;
+  border-bottom: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+}
+
+.tab {
+  flex: 1;
+  padding: var(--space-sm) var(--space-md);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-tertiary);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: color 150ms, border-color 150ms;
+
+  &:hover {
+    color: var(--text-secondary);
+  }
+
+  &[data-active='true'] {
+    color: var(--text-primary);
+    border-bottom-color: var(--accent-blue);
+  }
+}
+
+.content {
+  flex: 1;
+  overflow-y: auto;
+}

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

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect } from "@storybook/test";
+import { Sidebar } from "./Sidebar.js";
+
+const meta: Meta<typeof Sidebar> = {
+  component: Sidebar,
+  title: "Primitives/Layout/Sidebar",
+  tags: ["autodocs"],
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Sidebar renders its content slot. */
+export const WithContent: Story = {
+  args: {
+    content: (
+      <div data-testid="sidebar-child">
+        <h3>Navigation</h3>
+        <ul>
+          <li>Home</li>
+          <li>Tasks</li>
+          <li>Settings</li>
+        </ul>
+      </div>
+    ),
+  },
+  play: async ({ canvas }) => {
+    const sidebar = canvas.getByTestId("sidebar");
+    await expect(sidebar).toBeInTheDocument();
+    const child = canvas.getByTestId("sidebar-child");
+    await expect(child).toBeInTheDocument();
+    await expect(canvas.getByText("Navigation")).toBeInTheDocument();
+    await expect(canvas.getByText("Tasks")).toBeInTheDocument();
+  },
+};
+
+/** Sidebar is hidden when content is undefined. */
+export const Empty: Story = {
+  args: {
+    content: undefined,
+  },
+  play: async ({ canvas }) => {
+    const sidebar = canvas.queryByTestId("sidebar");
+    await expect(sidebar).not.toBeInTheDocument();
+  },
+};

package/src/components/layout/Sidebar.tsx

@@ -0,0 +1,84 @@
+import { useState, useRef, useEffect, type JSX, type ReactNode } from "react";
+import styles from "./Sidebar.module.scss";
+
+/** Default sidebar width in pixels. */
+const DEFAULT_SIDEBAR_WIDTH: number = 320;
+/** Minimum sidebar width in pixels. */
+const MIN_SIDEBAR_WIDTH: number = 220;
+/** Maximum sidebar width in pixels. */
+const MAX_SIDEBAR_WIDTH: number = 600;
+/** localStorage key for persisted sidebar width. */
+const STORAGE_KEY: string = "grackle-sidebar-width";
+
+/** Read persisted sidebar width from localStorage, falling back to the default. */
+function loadWidth(): number {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored !== null) {
+      const parsed = Number(stored);
+      if (Number.isFinite(parsed) && parsed >= MIN_SIDEBAR_WIDTH && parsed <= MAX_SIDEBAR_WIDTH) {
+        return parsed;
+      }
+    }
+  } catch {
+    // localStorage unavailable
+  }
+  return DEFAULT_SIDEBAR_WIDTH;
+}
+
+/** Persist sidebar width to localStorage. */
+function saveWidth(width: number): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, String(width));
+  } catch {
+    // localStorage unavailable
+  }
+}
+
+/** Props for the Sidebar component. */
+export interface SidebarProps {
+  /** Content to render inside the sidebar slot. When undefined, the sidebar is hidden. */
+  content: ReactNode | undefined;
+}
+
+/** Left sidebar rendering slot content passed via props. */
+export function Sidebar({ content }: SidebarProps): JSX.Element | undefined {
+  const [width] = useState<number>(loadWidth);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  /** Observe container resizes and persist width to localStorage. */
+  useEffect(() => {
+    const element = containerRef.current;
+    if (!element) {
+      return;
+    }
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const borderBox = entry.borderBoxSize[0];
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- borderBoxSize[0] may be undefined in some browsers
+        if (borderBox) {
+          const boxWidth = Math.round(borderBox.inlineSize);
+          if (boxWidth >= MIN_SIDEBAR_WIDTH && boxWidth <= MAX_SIDEBAR_WIDTH) {
+            saveWidth(boxWidth);
+          }
+        }
+      }
+    });
+
+    observer.observe(element);
+    return () => { observer.disconnect(); };
+  }, []);
+
+  if (content === undefined) {
+    return undefined;
+  }
+
+  return (
+    <div className={styles.container} ref={containerRef} data-testid="sidebar" style={{ width }}>
+      <div className={styles.content}>
+        {content}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,108 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// Status Bar — top bar with brand name, connection indicator, and env count
+// =============================================================================
+
+.container {
+  @include surface-panel;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-sm) var(--space-lg);
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: var(--font-size-lg);
+
+  @include mobile {
+    padding: var(--space-xs) var(--space-sm);
+    z-index: 101;
+  }
+}
+
+.hamburger {
+  display: none;
+  background: none;
+  border: none;
+  color: var(--text-primary);
+  font-size: var(--font-size-xl);
+  cursor: pointer;
+  padding: var(--space-xs);
+  line-height: 1;
+
+  @include mobile {
+    display: block;
+  }
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+  font-weight: var(--font-weight-heavy);
+  font-size: var(--font-size-xl);
+  letter-spacing: -0.5px;
+  color: var(--text-primary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  font-family: inherit;
+  transition: color var(--transition-fast);
+
+  &:hover {
+    color: var(--accent-green);
+  }
+}
+
+.brandLogo {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+  border-radius: var(--radius-sm);
+}
+
+.info {
+  display: flex;
+  gap: var(--space-lg);
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  align-items: center;
+
+  @include mobile {
+    gap: var(--space-sm);
+    font-size: var(--font-size-xs);
+  }
+}
+
+.connectionLabel {
+  @include mobile {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+.connectionDot {
+  font-size: var(--font-size-sm);
+
+  &.connected {
+    color: var(--accent-green);
+    animation: pulse 2s ease-in-out infinite;
+  }
+
+  &.disconnected {
+    color: var(--accent-red);
+  }
+
+  &.connecting {
+    color: var(--accent-yellow);
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+}
+

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

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent } from "@storybook/test";
+import { StatusBar } from "./StatusBar.js";
+import { makeEnvironment, makeSession } from "../../test-utils/storybook-helpers.js";
+
+const meta: Meta<typeof StatusBar> = {
+  component: StatusBar,
+  title: "Grackle/Layout/StatusBar",
+  tags: ["autodocs"],
+  args: {
+    connectionStatus: "connected",
+    environments: [makeEnvironment({ id: "local", displayName: "Local", status: "connected" })],
+    sessions: [makeSession({ status: "running" })],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Connected state with 1 environment and 1 active session. */
+export const Connected: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getByLabelText("Connected")).toBeInTheDocument();
+    await expect(canvas.getByText("Connected")).toBeInTheDocument();
+    await expect(canvas.getByText("1/1 env")).toBeInTheDocument();
+    await expect(canvas.getByText("1 active")).toBeInTheDocument();
+  },
+};
+
+/** Disconnected state. */
+export const Disconnected: Story = {
+  args: {
+    connectionStatus: "disconnected",
+    environments: [],
+    sessions: [],
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText("Disconnected")).toBeInTheDocument();
+    await expect(canvas.getByText("0/0 envs")).toBeInTheDocument();
+    await expect(canvas.getByText("0 active")).toBeInTheDocument();
+  },
+};
+
+/** Connecting state shown during reconnection attempts. */
+export const Connecting: Story = {
+  args: {
+    connectionStatus: "connecting",
+    environments: [],
+    sessions: [],
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByLabelText("Connecting...")).toBeInTheDocument();
+    await expect(canvas.getByText("Connecting...")).toBeInTheDocument();
+    await expect(canvas.getByText("0/0 envs")).toBeInTheDocument();
+    await expect(canvas.getByText("0 active")).toBeInTheDocument();
+  },
+};
+
+/** Hamburger button is visible when onToggleSidebar is provided (mobile drawer). */
+export const HamburgerVisible: Story = {
+  args: {
+    onToggleSidebar: fn(),
+    sidebarOpen: false,
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByLabelText("Toggle sidebar")).toBeInTheDocument();
+  },
+};
+
+/** Hamburger button is hidden when onToggleSidebar is not provided (no sidebar page). */
+export const HamburgerHidden: Story = {
+  args: {
+    onToggleSidebar: undefined,
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.queryByLabelText("Toggle sidebar")).not.toBeInTheDocument();
+  },
+};
+
+/** Hamburger fires callback and shows aria-expanded=true when sidebar is open. */
+export const HamburgerToggle: Story = {
+  args: {
+    onToggleSidebar: fn(),
+    sidebarOpen: true,
+  },
+  play: async ({ canvas, args }) => {
+    const hamburger = canvas.getByLabelText("Toggle sidebar");
+    await expect(hamburger).toHaveAttribute("aria-expanded", "true");
+    await userEvent.click(hamburger);
+    await expect(args.onToggleSidebar).toHaveBeenCalled();
+  },
+};
+
+/** Persona button is NOT rendered in the StatusBar (removed in favor of Settings tab). */
+export const NoPersonaButton: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.queryByLabelText("Personas")).not.toBeInTheDocument();
+  },
+};
+
+/** Multiple environments -- some connected, some not. */
+export const MultipleEnvironments: Story = {
+  args: {
+    environments: [
+      makeEnvironment({ id: "e1", status: "connected" }),
+      makeEnvironment({ id: "e2", status: "disconnected" }),
+      makeEnvironment({ id: "e3", status: "connected" }),
+    ],
+    sessions: [
+      makeSession({ id: "s1", status: "running" }),
+      makeSession({ id: "s2", status: "idle" }),
+      makeSession({ id: "s3", status: "stopped" }),
+    ],
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText("2/3 envs")).toBeInTheDocument();
+    await expect(canvas.getByText("2 active")).toBeInTheDocument();
+  },
+};

package/src/components/layout/StatusBar.tsx

@@ -0,0 +1,70 @@
+import type { JSX } from "react";
+import { Circle, Menu } from "lucide-react";
+import type { ConnectionStatus, Environment, Session } from "../../hooks/types.js";
+import { ICON_LG, ICON_XS } from "../../utils/iconSize.js";
+import { HOME_URL, useAppNavigate } from "../../utils/navigation.js";
+import { Tooltip } from "../display/Tooltip.js";
+import styles from "./StatusBar.module.scss";
+
+/** Human-readable label for each connection state. */
+const CONNECTION_LABEL: Record<ConnectionStatus, string> = {
+  connected: "Connected",
+  connecting: "Connecting...",
+  disconnected: "Disconnected",
+};
+
+/** CSS class for the connection dot in each state. */
+const CONNECTION_DOT_CLASS: Record<ConnectionStatus, string> = {
+  connected: styles.connected,
+  connecting: styles.connecting,
+  disconnected: styles.disconnected,
+};
+
+/** Props for the StatusBar component. */
+interface StatusBarProps {
+  /** Current connection state of the event stream. */
+  connectionStatus: ConnectionStatus;
+  /** List of all environments. */
+  environments: Environment[];
+  /** List of all sessions. */
+  sessions: Session[];
+  /** Callback to toggle the mobile sidebar drawer. */
+  onToggleSidebar?: () => void;
+  /** Whether the sidebar drawer is currently open (for aria-expanded). */
+  sidebarOpen?: boolean;
+}
+
+/** Top status bar showing connection state, environment counts, and active session count. */
+export function StatusBar({ connectionStatus, environments, sessions, onToggleSidebar, sidebarOpen }: StatusBarProps): JSX.Element {
+  const navigate = useAppNavigate();
+  const totalEnvs = environments.length;
+  const connectedEnvs = environments.filter((e) => e.status === "connected").length;
+  const activeCount = sessions.filter((s) => ["running", "idle"].includes(s.status)).length;
+  const label = CONNECTION_LABEL[connectionStatus];
+
+  return (
+    <div className={styles.container}>
+      {onToggleSidebar && (
+        <button type="button" className={styles.hamburger} onClick={onToggleSidebar} aria-label="Toggle sidebar" aria-expanded={sidebarOpen}>
+          <Menu size={ICON_LG} aria-hidden="true" />
+        </button>
+      )}
+      <Tooltip text="Home" placement="bottom">
+        <button type="button" className={styles.brand} onClick={() => navigate(HOME_URL)} data-testid="statusbar-brand">
+          <img src="/icon-192x192.png" alt="" className={styles.brandLogo} aria-hidden="true" data-testid="statusbar-logo" />
+          Grackle
+        </button>
+      </Tooltip>
+      <div className={styles.info}>
+        <span aria-label={label}>
+          <span className={`${styles.connectionDot} ${CONNECTION_DOT_CLASS[connectionStatus]}`} aria-hidden="true">
+            <Circle size={ICON_XS} fill="currentColor" />
+          </span>
+          {" "}<span className={styles.connectionLabel} aria-hidden="true">{label}</span>
+        </span>
+        <span>{connectedEnvs}/{totalEnvs} env{totalEnvs !== 1 ? "s" : ""}</span>
+        <span>{activeCount} active</span>
+      </div>
+    </div>
+  );
+}