@grackle-ai/web-components 0.108.3 → 0.110.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grackle-ai/web-components",
-  "version": "0.108.3",
+  "version": "0.110.1",
   "description": "Presentational React component library for the Grackle web UI",
   "license": "MIT",
   "repository": {
@@ -40,7 +40,7 @@
     "remark-gfm": "^4.0.0",
     "lucide-react": "~0.474.0",
     "react-router": "^7.0.0",
-    "@grackle-ai/common": "0.108.3"
+    "@grackle-ai/common": "0.110.1"
   },
   "devDependencies": {
     "@rushstack/heft": "1.2.7",

package/rush-logs/web-components._phase_build.cache.log

@@ -1,4 +1,4 @@
 Build cache hit.
-Cache key: 9f397c070a4229568e12d273f46cf0cda84b9bd2
+Cache key: 3629cc83b3804ac8bcea27905e83162210fb5dd6
 Clearing cached folders: dist, storybook-static, .rush/temp/operation/_phase_build
 Successfully restored output from the build cache.

package/rush-logs/web-components._phase_build.log

@@ -0,0 +1,18 @@
+Invoking: heft run --only build -- --clean 
+ ---- build started ---- 
+[build:typescript] Using TypeScript version 5.7.3
+[build:storybook-build] Building Storybook...
+[build:storybook-build] Storybook build completed.
+[build:vite-build] Starting Vite build...
+[build:lint] Using ESLint version 9.39.4
+vite v6.4.2 building for production...
+transforming...
+✓ 2574 modules transformed.
+rendering chunks...
+computing gzip size...
+dist/index.css    156.09 kB │ gzip:  20.37 kB
+dist/index.js   1,377.68 kB │ gzip: 352.31 kB
+✓ built in 5.19s
+[build:vite-build] Vite build completed.
+ ---- build finished (73.056s) ---- 
+-------------------- Finished (73.061s) --------------------

package/rush-logs/web-components._phase_test.cache.log

@@ -1,4 +1,4 @@
 Build cache hit.
-Cache key: 28d8c029b5d0c4a740412c3ca7a7aa456ad48c1b
+Cache key: f2b8b611fc00c7b912256986db4cc966d6560387
 Clearing cached folders: .rush/temp/operation/_phase_test
 Successfully restored output from the build cache.

package/rush-logs/web-components._phase_test.log

@@ -0,0 +1,121 @@
+Invoking: heft run --only test 
+The provided list of phases does not contain all phase dependencies. You may need to run the excluded phases manually.
+ ---- test started ---- 
+[test:vitest] Running vitest...
+
+ RUN  v3.2.4 /home/runner/work/grackle/grackle/packages/web-components
+
+ ✓ src/utils/sessionEvents.test.ts (14 tests) 55ms
+ ✓ src/utils/eventContent.test.ts (38 tests) 103ms
+ ✓ src/utils/dashboard.test.ts (4 tests) 25ms
+ ✓ src/utils/route-config.test.ts (23 tests) 72ms
+ ✓ src/utils/breadcrumbs.test.ts (18 tests) 24ms
+ ✓ src/utils/scrollUtils.test.ts (11 tests) 24ms
+ ✓ src/components/tools/classifyTool.test.ts (6 tests) 37ms
+ ✓ src/components/tools/toolCardHelpers.test.ts (10 tests) 17ms
+ ✓ src/components/display/extractText.test.tsx (8 tests) 12ms
+ ✓ src/components/editable/useEditableField.test.tsx (17 tests) 181ms
+ ✓ src/hooks/useEventSelection.test.ts (13 tests) 182ms
+ ✓ src/components/notifications/UpdateBanner.test.tsx (4 tests) 125ms
+
+ Test Files  12 passed (12)
+      Tests  166 passed (166)
+   Start at  20:39:06
+   Duration  13.92s (transform 2.79s, setup 0ms, collect 15.06s, tests 856ms, environment 6.97s, prepare 5.20s)
+
+[test:vitest] Vitest completed.
+[test:storybook-test] Starting Storybook static server on port 43017...
+[test:storybook-test] Storybook server ready. Running interaction tests...
+jest-haste-map: duplicate manual mock found: adapter-manager
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/adapter-manager.js
+    * <rootDir>/packages/server/src/__mocks__/adapter-manager.ts
+
+jest-haste-map: duplicate manual mock found: auto-reconnect
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/auto-reconnect.js
+    * <rootDir>/packages/server/src/__mocks__/auto-reconnect.ts
+
+jest-haste-map: duplicate manual mock found: event-bus
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/event-bus.js
+    * <rootDir>/packages/server/src/__mocks__/event-bus.ts
+
+jest-haste-map: duplicate manual mock found: event-processor
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/event-processor.js
+    * <rootDir>/packages/server/src/__mocks__/event-processor.ts
+
+jest-haste-map: duplicate manual mock found: github-import
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/github-import.js
+    * <rootDir>/packages/server/src/__mocks__/github-import.ts
+
+jest-haste-map: duplicate manual mock found: lifecycle
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/lifecycle.js
+    * <rootDir>/packages/server/src/__mocks__/lifecycle.ts
+
+jest-haste-map: duplicate manual mock found: log-writer
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/log-writer.js
+    * <rootDir>/packages/server/src/__mocks__/log-writer.ts
+
+jest-haste-map: duplicate manual mock found: logger
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/logger.js
+    * <rootDir>/packages/server/src/__mocks__/logger.ts
+
+jest-haste-map: duplicate manual mock found: pipe-delivery
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/pipe-delivery.js
+    * <rootDir>/packages/server/src/__mocks__/pipe-delivery.ts
+
+jest-haste-map: duplicate manual mock found: processor-registry
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/processor-registry.js
+    * <rootDir>/packages/server/src/__mocks__/processor-registry.ts
+
+jest-haste-map: duplicate manual mock found: reanimate-agent
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/reanimate-agent.js
+    * <rootDir>/packages/server/src/__mocks__/reanimate-agent.ts
+
+jest-haste-map: duplicate manual mock found: session-recovery
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/session-recovery.js
+    * <rootDir>/packages/server/src/__mocks__/session-recovery.ts
+
+jest-haste-map: duplicate manual mock found: stream-hub
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/stream-hub.js
+    * <rootDir>/packages/server/src/__mocks__/stream-hub.ts
+
+jest-haste-map: duplicate manual mock found: stream-registry
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/stream-registry.js
+    * <rootDir>/packages/server/src/__mocks__/stream-registry.ts
+
+jest-haste-map: duplicate manual mock found: token-push
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/token-push.js
+    * <rootDir>/packages/server/src/__mocks__/token-push.ts
+
+jest-haste-map: duplicate manual mock found: utils/exec
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/utils/exec.js
+    * <rootDir>/packages/server/src/__mocks__/utils/exec.ts
+
+jest-haste-map: duplicate manual mock found: utils/format-gh-error
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/utils/format-gh-error.js
+    * <rootDir>/packages/server/src/__mocks__/utils/format-gh-error.ts
+
+jest-haste-map: duplicate manual mock found: utils/network
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/utils/network.js
+    * <rootDir>/packages/server/src/__mocks__/utils/network.ts
+
+[test:storybook-test] Storybook interaction tests completed.
+ ---- test finished (112.648s) ---- 
+-------------------- Finished (112.652s) --------------------

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

@@ -80,3 +80,9 @@
   color: var(--text-primary);
   font-weight: var(--font-weight-medium);
 }
+
+// Pins this tab (and any after it) to the right edge by absorbing the free
+// space to its left. Inert on mobile, where the nav scrolls horizontally.
+.tabEnd {
+  margin-left: auto;
+}

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

@@ -66,6 +66,53 @@ export const AllTabsExplicit: Story = {
   },
 };
 
+/**
+ * Settings is pinned to the right edge even when the incoming tab list places it
+ * mid-list (as `buildTabs` does: core tabs, including Settings, come before
+ * orchestration and knowledge tabs). The component reorders end-aligned tabs last.
+ */
+export const SettingsPinnedRight: Story = {
+  // Fullscreen so the nav fills the viewport and the auto margin has free space
+  // to absorb (otherwise margin-left: auto would resolve to 0).
+  parameters: { layout: "fullscreen" },
+  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", align: "end" },
+      { view: "tasks", label: "Tasks", icon: <ClipboardList size={ICON_LG} />, route: TASKS_URL, testId: "sidebar-tab-tasks" },
+      { view: "findings", label: "Findings", icon: <Search size={ICON_LG} />, route: FINDINGS_URL, testId: "sidebar-tab-findings" },
+      { view: "knowledge", label: "Knowledge", icon: <Brain size={ICON_LG} />, route: KNOWLEDGE_URL, testId: "sidebar-tab-knowledge" },
+    ],
+  },
+  play: async ({ canvas }) => {
+    const renderedTabs = canvas.getAllByRole("tab");
+    // Despite Settings being 4th in the input, it must render last (rightmost).
+    const settingsTab = renderedTabs[renderedTabs.length - 1];
+    await expect(settingsTab).toHaveAccessibleName(/Settings/);
+
+    // The end-alignment lives on the flex item (the Tooltip wrapper around the
+    // button), not the button itself. Verify margin-left: auto resolves to a
+    // positive used value there, so Settings is actually pushed to the right edge.
+    const settingsFlexItem = settingsTab.parentElement;
+    if (!settingsFlexItem) {
+      throw new Error("expected the Settings tab to have a flex-item wrapper");
+    }
+    const settingsMarginLeft = Number.parseFloat(globalThis.getComputedStyle(settingsFlexItem).marginLeft);
+    await expect(settingsMarginLeft).toBeGreaterThan(0);
+
+    // The neighbor immediately before it (Knowledge) must NOT have an auto
+    // margin, confirming the spacer is applied only to the pinned tab.
+    const neighborFlexItem = renderedTabs[renderedTabs.length - 2].parentElement;
+    if (!neighborFlexItem) {
+      throw new Error("expected the neighbor tab to have a flex-item wrapper");
+    }
+    const neighborMarginLeft = Number.parseFloat(globalThis.getComputedStyle(neighborFlexItem).marginLeft);
+    await expect(neighborMarginLeft).toBe(0);
+  },
+};
+
 /** Arrow keys navigate between tabs horizontally. */
 export const KeyboardNavigation: Story = {
   play: async ({ canvas }) => {

package/src/components/layout/AppNav.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef, type JSX, type KeyboardEvent, type ReactNode } from "react";
+import { useCallback, useMemo, 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";
@@ -21,6 +21,8 @@ export interface AppTab {
   route: string;
   /** data-testid suffix. */
   testId: string;
+  /** Horizontal alignment within the nav bar. `"end"` pins the tab to the right edge. */
+  align?: "end";
 }
 
 /** Ordered list of all app navigation tabs. Exported for plugin registry use. */
@@ -31,7 +33,7 @@ export const TABS: AppTab[] = [
   { 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" },
+  { view: "settings", label: "Settings", icon: <Settings size={ICON_LG} />, route: SETTINGS_CREDENTIALS_URL, testId: "sidebar-tab-settings", align: "end" },
 ];
 
 /** Derive the active application view from a URL pathname. */
@@ -65,6 +67,17 @@ export function AppNav({ tabs = TABS }: { tabs?: AppTab[] }): JSX.Element {
 
   const activeView = getActiveView(location.pathname);
 
+  // Render end-aligned tabs (e.g. Settings) last regardless of the incoming order,
+  // so they stay pinned to the right edge no matter which plugins contribute tabs.
+  const orderedTabs = useMemo(
+    () => [
+      ...tabs.filter((t) => t.align !== "end"),
+      ...tabs.filter((t) => t.align === "end"),
+    ],
+    [tabs],
+  );
+  const firstEndAlignedView = orderedTabs.find((t) => t.align === "end")?.view;
+
   const handleClick = useCallback((tab: AppTab) => {
     navigate(tab.route);
   }, [navigate]);
@@ -75,28 +88,28 @@ export function AppNav({ tabs = TABS }: { tabs?: AppTab[] }): JSX.Element {
       return;
     }
     const focusedIndex = Array.from(buttons).findIndex((b) => b === document.activeElement);
-    const currentIndex = focusedIndex >= 0 ? focusedIndex : tabs.findIndex((t) => t.view === activeView);
+    const currentIndex = focusedIndex >= 0 ? focusedIndex : orderedTabs.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;
+      nextIndex = (currentIndex + 1) % orderedTabs.length;
     } else if (e.key === "ArrowLeft" || e.key === "k" || e.key === "K") {
       e.preventDefault();
-      nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+      nextIndex = (currentIndex - 1 + orderedTabs.length) % orderedTabs.length;
     } else if (e.key === "Home") {
       e.preventDefault();
       nextIndex = 0;
     } else if (e.key === "End") {
       e.preventDefault();
-      nextIndex = tabs.length - 1;
+      nextIndex = orderedTabs.length - 1;
     } else {
       return;
     }
 
-    navigate(tabs[nextIndex].route);
+    navigate(orderedTabs[nextIndex].route);
     buttons[nextIndex]?.focus(); // eslint-disable-line @typescript-eslint/no-unnecessary-condition -- index may be out of bounds
-  }, [activeView, navigate, tabs]);
+  }, [activeView, navigate, orderedTabs]);
 
   return (
     <nav
@@ -108,10 +121,11 @@ export function AppNav({ tabs = TABS }: { tabs?: AppTab[] }): JSX.Element {
       onKeyDown={handleKeyDown}
       data-testid="sidebar-nav"
     >
-      {tabs.map((tab) => {
+      {orderedTabs.map((tab) => {
         const isActive = tab.view === activeView;
+        const isFirstEndAligned = tab.view === firstEndAlignedView;
         return (
-          <Tooltip key={tab.view} text={tab.label} placement="bottom">
+          <Tooltip key={tab.view} text={tab.label} placement="bottom" className={isFirstEndAligned ? styles.tabEnd : undefined}>
             <button
               role="tab"
               type="button"

package/src/components/panels/EnvironmentEditPanel.stories.tsx

@@ -18,6 +18,9 @@ const meta: Meta<typeof EnvironmentEditPanel> = {
     codespaceListError: "",
     codespaceCreating: false,
     onCreateCodespace: fn(),
+    onListDockerContainers: fn(),
+    dockerContainers: [],
+    dockerContainersError: "",
     onShowToast: fn(),
   },
 };
@@ -133,13 +136,96 @@ export const SwitchingAdapterShowsFields: Story = {
     await expect(canvas.getByTestId("env-create-port")).toBeInTheDocument();
     await expect(canvas.getByTestId("env-create-identity")).toBeInTheDocument();
 
-    // Switch to Docker — shows image and repo
+    // Switch to Docker — shows the source toggle plus image and repo (create mode default)
     await userEvent.selectOptions(adapterSelect, "docker");
+    await expect(canvas.getByTestId("env-docker-mode")).toBeInTheDocument();
     await expect(canvas.getByTestId("env-create-image")).toBeInTheDocument();
     await expect(canvas.getByTestId("env-create-repo")).toBeInTheDocument();
   },
 };
 
+/** Docker attach mode lists running containers and requests them when selected. */
+export const DockerAttachLists: Story = {
+  args: {
+    dockerContainers: [
+      { id: "abc123", name: "demo-ext", image: "node:22", state: "running", status: "Up 3 minutes" },
+    ],
+  },
+  play: async ({ canvas, args }) => {
+    const adapterSelect = canvas.getByTestId("env-create-adapter");
+    await userEvent.selectOptions(adapterSelect, "docker");
+
+    // Switch the docker source to "attach" — the container list should be requested
+    const modeSelect = canvas.getByTestId("env-docker-mode");
+    await userEvent.selectOptions(modeSelect, "attach");
+    await expect(args.onListDockerContainers).toHaveBeenCalled();
+
+    // The picker replaces the image/repo fields
+    await expect(canvas.getByTestId("env-docker-container-select")).toBeInTheDocument();
+    await expect(canvas.queryByTestId("env-create-image")).not.toBeInTheDocument();
+  },
+};
+
+/** Selecting a container in attach mode builds an { attach } config on Create. */
+export const DockerAttachCreatesConfig: Story = {
+  args: {
+    dockerContainers: [
+      { id: "abc123", name: "demo-ext", image: "node:22", state: "running", status: "Up 3 minutes" },
+    ],
+  },
+  play: async ({ canvas, args }) => {
+    await userEvent.selectOptions(canvas.getByTestId("env-create-adapter"), "docker");
+    await userEvent.selectOptions(canvas.getByTestId("env-docker-mode"), "attach");
+
+    // Pick the running container; the env name auto-fills from it
+    await userEvent.selectOptions(canvas.getByTestId("env-docker-container-select"), "demo-ext");
+
+    const createButton = canvas.getByTestId("env-create-submit");
+    await expect(createButton).toBeEnabled();
+    await userEvent.click(createButton);
+
+    await expect(args.onAddEnvironment).toHaveBeenCalledWith(
+      "demo-ext",
+      "docker",
+      { attach: "demo-ext" },
+      undefined,
+    );
+  },
+};
+
+/** When docker container listing fails, a manual entry input appears. */
+export const DockerAttachManualEntry: Story = {
+  args: {
+    dockerContainersError: "docker: command not found",
+  },
+  play: async ({ canvas }) => {
+    await userEvent.selectOptions(canvas.getByTestId("env-create-adapter"), "docker");
+    await userEvent.selectOptions(canvas.getByTestId("env-docker-mode"), "attach");
+
+    await expect(canvas.getByTestId("env-docker-container-manual")).toBeInTheDocument();
+    await expect(canvas.queryByTestId("env-docker-container-select")).not.toBeInTheDocument();
+  },
+};
+
+/** When discovery succeeds but finds no running containers, manual entry is still offered. */
+export const DockerAttachEmptyListManualEntry: Story = {
+  args: {
+    dockerContainers: [],
+  },
+  play: async ({ canvas }) => {
+    await userEvent.selectOptions(canvas.getByTestId("env-create-adapter"), "docker");
+    await userEvent.selectOptions(canvas.getByTestId("env-docker-mode"), "attach");
+
+    // No select (nothing to pick), but a manual input is available
+    await expect(canvas.queryByTestId("env-docker-container-select")).not.toBeInTheDocument();
+    const manual = canvas.getByTestId("env-docker-container-manual");
+    await userEvent.type(manual, "demo-ext");
+
+    const createButton = canvas.getByTestId("env-create-submit");
+    await expect(createButton).toBeEnabled();
+  },
+};
+
 /** When codespace listing fails, a manual entry input appears and the select dropdown is hidden. */
 export const CodespaceManualEntry: Story = {
   args: {