@gokulvenkatareddy/cortex 0.1.7

package/apps/octogent/apps/web/tests/CanvasPrimaryView.test.tsx

@@ -0,0 +1,347 @@
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { CanvasPrimaryView } from "../src/components/CanvasPrimaryView";
+
+type MockCanvasNode = {
+  id: string;
+  type: "tentacle" | "active-session";
+  tentacleId: string;
+  label: string;
+  color: string;
+  x: number;
+  y: number;
+  radius: number;
+  sessionId?: string;
+  agentState?: "live";
+  agentRuntimeState?: "idle";
+  hasUserPrompt?: boolean;
+  workspaceMode?: "shared";
+  parentTerminalId?: string;
+};
+
+const nodes: MockCanvasNode[] = [
+  {
+    id: "t:tentacle-a",
+    type: "tentacle" as const,
+    tentacleId: "tentacle-a",
+    label: "tentacle-a",
+    color: "#ff6b2b",
+    x: 80,
+    y: 80,
+    radius: 28,
+  },
+  {
+    id: "a:terminal-1",
+    type: "active-session" as const,
+    sessionId: "terminal-1",
+    tentacleId: "tentacle-a",
+    label: "terminal-1",
+    color: "#ff6b2b",
+    x: 120,
+    y: 120,
+    radius: 20,
+    agentState: "live" as const,
+    agentRuntimeState: "idle" as const,
+    hasUserPrompt: true,
+    workspaceMode: "shared" as const,
+  },
+];
+
+vi.mock("../src/app/hooks/useAgentRuntimeStates", () => ({
+  useAgentRuntimeStates: () => new Map(),
+}));
+
+vi.mock("../src/app/hooks/useCanvasGraphData", () => ({
+  useCanvasGraphData: () => ({
+    nodes,
+    edges: [],
+    tentacleById: new Map(),
+    sessionsByTentacleId: new Map(),
+    refresh: vi.fn(),
+    refreshDeckTentacles: vi.fn(),
+  }),
+}));
+
+vi.mock("../src/app/hooks/useCanvasTransform", () => ({
+  useCanvasTransform: () => ({
+    transform: { translateX: 0, translateY: 0, scale: 1 },
+    isPanning: false,
+    svgRef: { current: null },
+    handleWheel: vi.fn(),
+    handlePointerDown: vi.fn(),
+    handlePointerMove: vi.fn(),
+    handlePointerUp: vi.fn(),
+    screenToGraph: () => ({ x: 0, y: 0 }),
+    fitAll: vi.fn(),
+  }),
+}));
+
+vi.mock("../src/app/hooks/useForceSimulation", () => ({
+  DEFAULT_FORCE_PARAMS: {},
+  useForceSimulation: ({ nodes: nextNodes }: { nodes: typeof nodes }) => ({
+    simulatedNodes: nextNodes,
+    pinNode: vi.fn(),
+    unpinNode: vi.fn(),
+    moveNode: vi.fn(),
+    reheat: vi.fn(),
+  }),
+}));
+
+vi.mock("../src/components/canvas/SessionNode", () => ({
+  SessionNode: ({
+    node,
+    onClick,
+  }: {
+    node: (typeof nodes)[number];
+    onClick: (nodeId: string) => void;
+  }) => (
+    <button type="button" data-node-id={node.id} onClick={() => onClick(node.id)}>
+      {node.label}
+    </button>
+  ),
+}));
+
+vi.mock("../src/components/canvas/OctopusNode", () => ({
+  OctopusNode: ({
+    node,
+    onClick,
+  }: {
+    node: (typeof nodes)[number];
+    onClick: (nodeId: string) => void;
+  }) => (
+    <g
+      data-node-id={node.id}
+      onClick={() => onClick(node.id)}
+      onKeyDown={(event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          onClick(node.id);
+        }
+      }}
+    >
+      <circle cx={node.x} cy={node.y} r={node.radius} />
+      <title>{node.label}</title>
+    </g>
+  ),
+}));
+
+vi.mock("../src/components/canvas/CanvasTerminalColumn", () => ({
+  CanvasTerminalColumn: ({
+    node,
+    panelRef,
+  }: {
+    node: (typeof nodes)[number];
+    panelRef?: ((element: HTMLElement | null) => void) | undefined;
+  }) => (
+    <section ref={panelRef} data-testid={`panel-${node.id}`} tabIndex={-1}>
+      panel {node.id} label {node.label}
+    </section>
+  ),
+}));
+
+vi.mock("../src/components/canvas/CanvasTentaclePanel", () => ({
+  CanvasTentaclePanel: () => null,
+}));
+
+describe("CanvasPrimaryView", () => {
+  beforeEach(() => {
+    vi.spyOn(window, "requestAnimationFrame").mockImplementation(
+      (callback: FrameRequestCallback) => {
+        callback(0);
+        return 1;
+      },
+    );
+    vi.spyOn(window, "cancelAnimationFrame").mockImplementation(() => {});
+    Object.defineProperty(HTMLElement.prototype, "scrollIntoView", {
+      configurable: true,
+      value: vi.fn(),
+      writable: true,
+    });
+    Object.defineProperty(HTMLElement.prototype, "focus", {
+      configurable: true,
+      value: vi.fn(),
+      writable: true,
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+    nodes.splice(2);
+    vi.restoreAllMocks();
+  });
+
+  it("reveals and focuses a newly opened terminal panel when a session node is clicked", async () => {
+    render(<CanvasPrimaryView columns={[]} isUiStateHydrated />);
+
+    const [terminalButton] = screen.getAllByRole("button", { name: "terminal-1" });
+    expect(terminalButton).toBeDefined();
+    if (!terminalButton) throw new Error("Missing terminal button");
+
+    fireEvent.click(terminalButton);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("panel-a:terminal-1")).toBeInTheDocument();
+      expect(HTMLElement.prototype.scrollIntoView).toHaveBeenCalledTimes(1);
+      expect(HTMLElement.prototype.focus).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it("auto-opens a newly created child terminal when its parent panel is already open", async () => {
+    const { rerender } = render(
+      <CanvasPrimaryView
+        columns={[
+          {
+            terminalId: "terminal-1",
+            label: "terminal-1",
+            state: "live",
+            tentacleId: "tentacle-a",
+            createdAt: "2026-02-24T10:00:00.000Z",
+          },
+        ]}
+        isUiStateHydrated
+      />,
+    );
+
+    const [terminalButton] = screen.getAllByRole("button", { name: "terminal-1" });
+    expect(terminalButton).toBeDefined();
+    if (!terminalButton) throw new Error("Missing terminal button");
+
+    fireEvent.click(terminalButton);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("panel-a:terminal-1")).toBeInTheDocument();
+    });
+
+    nodes.push({
+      id: "a:terminal-2",
+      type: "active-session" as const,
+      sessionId: "terminal-2",
+      tentacleId: "tentacle-a",
+      label: "terminal-2",
+      color: "#ff6b2b",
+      x: 160,
+      y: 160,
+      radius: 20,
+      agentState: "live" as const,
+      agentRuntimeState: "idle" as const,
+      hasUserPrompt: true,
+      workspaceMode: "shared" as const,
+      parentTerminalId: "terminal-1",
+    });
+
+    rerender(
+      <CanvasPrimaryView
+        columns={[
+          {
+            terminalId: "terminal-1",
+            label: "terminal-1",
+            state: "live",
+            tentacleId: "tentacle-a",
+            createdAt: "2026-02-24T10:00:00.000Z",
+          },
+          {
+            terminalId: "terminal-2",
+            label: "terminal-2",
+            state: "live",
+            tentacleId: "tentacle-a",
+            tentacleName: "tentacle-a",
+            parentTerminalId: "terminal-1",
+            workspaceMode: "shared",
+            createdAt: "2026-02-24T10:05:00.000Z",
+            hasUserPrompt: true,
+          },
+        ]}
+        isUiStateHydrated
+        recentlyCreatedTerminal={{
+          terminalId: "terminal-2",
+          label: "terminal-2",
+          state: "live",
+          tentacleId: "tentacle-a",
+          tentacleName: "tentacle-a",
+          parentTerminalId: "terminal-1",
+          workspaceMode: "shared",
+          createdAt: "2026-02-24T10:05:00.000Z",
+          hasUserPrompt: true,
+        }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("panel-a:terminal-2")).toBeInTheDocument();
+    });
+  });
+
+  it("updates an open terminal panel label when the terminal is renamed", async () => {
+    const { rerender } = render(
+      <CanvasPrimaryView
+        columns={[
+          {
+            terminalId: "terminal-1",
+            label: "terminal-1",
+            state: "live",
+            tentacleId: "tentacle-a",
+            tentacleName: "tentacle-a",
+            createdAt: "2026-02-24T10:00:00.000Z",
+          },
+        ]}
+        isUiStateHydrated
+      />,
+    );
+
+    const [terminalButton] = screen.getAllByRole("button", { name: "terminal-1" });
+    expect(terminalButton).toBeDefined();
+    if (!terminalButton) throw new Error("Missing terminal button");
+
+    fireEvent.click(terminalButton);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("panel-a:terminal-1")).toHaveTextContent(
+        "panel a:terminal-1 label tentacle-a",
+      );
+    });
+
+    rerender(
+      <CanvasPrimaryView
+        columns={[
+          {
+            terminalId: "terminal-1",
+            label: "terminal-1",
+            state: "live",
+            tentacleId: "tentacle-a",
+            tentacleName: "renamed-tentacle",
+            createdAt: "2026-02-24T10:00:00.000Z",
+          },
+        ]}
+        isUiStateHydrated
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("panel-a:terminal-1")).toHaveTextContent(
+        "panel a:terminal-1 label renamed-tentacle",
+      );
+    });
+  });
+
+  it("shows tentacle maintenance actions in the context menu and passes the tentacle ID", async () => {
+    const onTentacleAction = vi.fn().mockResolvedValue(undefined);
+
+    const { container } = render(
+      <CanvasPrimaryView columns={[]} isUiStateHydrated onTentacleAction={onTentacleAction} />,
+    );
+
+    const tentacleNode = container.querySelector('[data-node-id="t:tentacle-a"]');
+    expect(tentacleNode).not.toBeNull();
+
+    fireEvent.contextMenu(tentacleNode as Element, { clientX: 160, clientY: 120 });
+
+    expect(await screen.findByRole("button", { name: "Update To-Do List" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Update Tentacle" })).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Update To-Do List" }));
+
+    await waitFor(() => {
+      expect(onTentacleAction).toHaveBeenCalledWith("tentacle-a", "tentacle-reorganize-todos");
+    });
+  });
+});

package/apps/octogent/apps/web/tests/HttpTerminalSnapshotReader.test.tsx

@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest";
+
+import { HttpTerminalSnapshotReader } from "../src/runtime/HttpTerminalSnapshotReader";
+
+describe("HttpTerminalSnapshotReader", () => {
+  it("loads snapshots and filters out malformed payload entries", async () => {
+    const reader = new HttpTerminalSnapshotReader({
+      endpoint: "https://runtime.example.com/api/terminal-snapshots",
+      fetcher: async () => ({
+        ok: true,
+        status: 200,
+        json: async () => [
+          {
+            terminalId: "agent-1",
+            label: "root-a",
+            state: "live",
+            tentacleId: "tentacle-a",
+            tentacleName: "planner",
+            createdAt: "2026-02-24T10:00:00.000Z",
+          },
+          {
+            label: "invalid-entry",
+          },
+        ],
+      }),
+    });
+
+    await expect(reader.listTerminalSnapshots()).resolves.toEqual([
+      {
+        terminalId: "agent-1",
+        label: "root-a",
+        state: "live",
+        tentacleId: "tentacle-a",
+        tentacleName: "planner",
+        createdAt: "2026-02-24T10:00:00.000Z",
+      },
+    ]);
+  });
+
+  it("throws when API response is not ok", async () => {
+    const reader = new HttpTerminalSnapshotReader({
+      endpoint: "https://runtime.example.com/api/terminal-snapshots",
+      fetcher: async () => ({
+        ok: false,
+        status: 503,
+        json: async () => [],
+      }),
+    });
+
+    await expect(reader.listTerminalSnapshots()).rejects.toThrow(
+      "Unable to load terminal snapshots (503)",
+    );
+  });
+});

package/apps/octogent/apps/web/tests/RuntimeStatusStrip.test.tsx

@@ -0,0 +1,70 @@
+import { render, screen, within } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { RuntimeStatusStrip } from "../src/components/RuntimeStatusStrip";
+
+describe("RuntimeStatusStrip", () => {
+  it("shows loading placeholders before claude usage loads", () => {
+    render(<RuntimeStatusStrip sparklinePoints="" usageData={null} claudeUsage={null} />);
+
+    const usage = screen.getByLabelText("Claude usage limits");
+    expect(within(usage).getAllByText("···")).toHaveLength(2);
+  });
+
+  it("uses a 5h label for oauth-backed usage", () => {
+    render(
+      <RuntimeStatusStrip
+        sparklinePoints=""
+        usageData={null}
+        claudeUsage={{
+          status: "ok",
+          source: "oauth-api",
+          fetchedAt: "2026-04-09T10:00:00.000Z",
+          primaryUsedPercent: 14,
+          secondaryUsedPercent: 52,
+        }}
+      />,
+    );
+
+    const usage = screen.getByLabelText("Claude usage limits");
+    expect(within(usage).getByText("5h")).toBeInTheDocument();
+    expect(within(usage).getByText("14%")).toBeInTheDocument();
+    expect(within(usage).getByText("52%")).toBeInTheDocument();
+  });
+
+  it("shows unavailable values instead of a permanent loading state", () => {
+    render(
+      <RuntimeStatusStrip
+        sparklinePoints=""
+        usageData={null}
+        claudeUsage={{
+          status: "unavailable",
+          source: "none",
+          fetchedAt: "2026-04-09T10:00:00.000Z",
+          message: "Claude credentials not found. Run `claude login`.",
+        }}
+      />,
+    );
+
+    const usage = screen.getByLabelText("Claude usage limits");
+    expect(within(usage).getAllByText("NA")).toHaveLength(2);
+    expect(within(usage).queryByText("···")).toBeNull();
+  });
+
+  it("marks the refresh button as rotating while Claude usage is refreshing", () => {
+    render(
+      <RuntimeStatusStrip
+        sparklinePoints=""
+        usageData={null}
+        claudeUsage={null}
+        isRefreshingClaudeUsage
+        onRefreshClaudeUsage={() => {}}
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: "Refresh Claude usage" })).toHaveAttribute(
+      "data-refreshing",
+      "true",
+    );
+  });
+});

package/apps/octogent/apps/web/tests/Terminal.test.tsx

@@ -0,0 +1,87 @@
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { Terminal } from "../src/components/Terminal";
+
+type Listener = (event: { data: unknown }) => void;
+
+class MockWebSocket {
+  static instances: MockWebSocket[] = [];
+
+  readonly url: string;
+  private listeners = new Map<string, Set<Listener>>();
+
+  close = vi.fn();
+  send = vi.fn();
+
+  constructor(url: string) {
+    this.url = url;
+    MockWebSocket.instances.push(this);
+  }
+
+  addEventListener(type: string, listener: Listener) {
+    const bucket = this.listeners.get(type) ?? new Set<Listener>();
+    bucket.add(listener);
+    this.listeners.set(type, bucket);
+  }
+
+  removeEventListener(type: string, listener: Listener) {
+    this.listeners.get(type)?.delete(listener);
+  }
+
+  emit(type: string, data?: unknown) {
+    const event = { data };
+    for (const listener of this.listeners.get(type) ?? []) {
+      listener(event);
+    }
+  }
+}
+
+describe("Terminal", () => {
+  afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+    MockWebSocket.instances = [];
+  });
+
+  it("renders idle badge and updates it from websocket state events", async () => {
+    vi.stubGlobal("WebSocket", MockWebSocket as unknown as typeof WebSocket);
+
+    render(<Terminal terminalId="tentacle-a" />);
+
+    expect(screen.getByText("IDLE")).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(MockWebSocket.instances.length).toBe(1);
+    });
+
+    const socket = MockWebSocket.instances[0];
+    if (!socket) {
+      throw new Error("Expected websocket instance");
+    }
+    socket.emit("message", JSON.stringify({ type: "state", state: "processing" }));
+
+    await waitFor(() => {
+      const badge = screen.getByText("PROCESSING").closest(".status-badge");
+      expect(badge).not.toBeNull();
+      expect(badge).toHaveClass("pill", "processing");
+    });
+
+    socket.emit("message", JSON.stringify({ type: "state", state: "idle" }));
+
+    await waitFor(() => {
+      const badge = screen.getByText("IDLE").closest(".status-badge");
+      expect(badge).not.toBeNull();
+      expect(badge).toHaveClass("pill", "idle");
+    });
+  });
+
+  it("renders terminal with the provided terminal label", async () => {
+    vi.stubGlobal("WebSocket", MockWebSocket as unknown as typeof WebSocket);
+
+    render(<Terminal terminalId="tentacle-a-agent-1" terminalLabel="tentacle-a-agent-1" />);
+
+    expect(screen.getByText("tentacle-a-agent-1")).toBeInTheDocument();
+  });
+});

package/apps/octogent/apps/web/tests/add-tentacle-form.test.tsx

@@ -0,0 +1,48 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { AddTentacleForm } from "../src/components/deck/AddTentacleForm";
+
+describe("AddTentacleForm", () => {
+  it("submits selected suggested skills", () => {
+    const onSubmit = vi.fn();
+
+    render(
+      <AddTentacleForm
+        onSubmit={onSubmit}
+        onCancel={() => {}}
+        isSubmitting={false}
+        error={null}
+        availableSkills={[
+          {
+            name: "docs-writer",
+            description: "Keeps docs aligned with the product.",
+            source: "project",
+          },
+          {
+            name: "release-helper",
+            description: "Helps with release coordination.",
+            source: "user",
+          },
+        ]}
+      />,
+    );
+
+    fireEvent.change(screen.getByLabelText("Name"), { target: { value: "docs" } });
+    fireEvent.click(screen.getByLabelText(/docs-writer/i));
+    fireEvent.click(screen.getByRole("button", { name: /create tentacle/i }));
+
+    expect(onSubmit).toHaveBeenCalledWith(
+      "docs",
+      "",
+      expect.any(String),
+      expect.objectContaining({
+        animation: expect.any(String),
+        expression: expect.any(String),
+        accessory: expect.any(String),
+        hairColor: expect.any(String),
+      }),
+      ["docs-writer"],
+    );
+  });
+});