@grackle-ai/web-components 0.107.2

package/src/utils/dashboard.ts

@@ -0,0 +1,195 @@
+/**
+ * Dashboard data selectors — derive KPIs, attention lists, and rollups
+ * from the live Grackle state (sessions, tasks, environments, workspaces).
+ */
+
+import type { Environment, Session, TaskData, Workspace } from "../hooks/types.js";
+
+// ─── KPI computation ────────────────────────────────────────────────────────
+
+/** Summary KPIs surfaced across the top of the dashboard. */
+export interface DashboardKpis {
+  activeSessions: number;
+  blockedTasks: number;
+  attentionTasks: number;
+  unhealthyEnvironments: number;
+}
+
+/** Compute dashboard KPI counts from live state. */
+export function computeKpis(
+  sessions: Session[],
+  tasks: TaskData[],
+  environments: Environment[],
+): DashboardKpis {
+  const activeSessions = sessions.filter(
+    (s) => s.status === "running" || s.status === "idle" || s.status === "waiting",
+  ).length;
+
+  const taskStatusById = buildTaskStatusMap(tasks);
+
+  const blockedTasks = tasks.filter((t) => isTaskBlocked(t, taskStatusById)).length;
+
+  const attentionTasks = tasks.filter(
+    (t) =>
+      t.status === "paused" ||
+      t.status === "failed" ||
+      isTaskBlocked(t, taskStatusById),
+  ).length;
+
+  const unhealthyEnvironments = environments.filter(
+    (e) => e.status === "disconnected" || e.status === "error",
+  ).length;
+
+  return { activeSessions, blockedTasks, attentionTasks, unhealthyEnvironments };
+}
+
+// ─── Task helpers ───────────────────────────────────────────────────────────
+
+/** Build a lookup map of task-id → status. */
+function buildTaskStatusMap(tasks: TaskData[]): Map<string, string> {
+  const map = new Map<string, string>();
+  for (const t of tasks) {
+    map.set(t.id, t.status);
+  }
+  return map;
+}
+
+/** Returns true if the task has unresolved (non-complete) dependencies. */
+function isTaskBlocked(task: TaskData, statusMap: Map<string, string>): boolean {
+  return task.dependsOn.some((depId) => statusMap.get(depId) !== "complete");
+}
+
+/** A task that needs operator attention (blocked, paused, or failed). */
+export interface AttentionTask {
+  task: TaskData;
+  reason: "blocked" | "paused" | "failed";
+  workspaceName: string;
+}
+
+/** Collect tasks requiring attention, ordered: failed → blocked → paused. */
+export function getAttentionTasks(
+  tasks: TaskData[],
+  workspaces: Workspace[],
+): AttentionTask[] {
+  const wsMap = new Map<string, Workspace>();
+  for (const ws of workspaces) {
+    wsMap.set(ws.id, ws);
+  }
+  const taskStatusMap = buildTaskStatusMap(tasks);
+
+  const result: AttentionTask[] = [];
+
+  for (const task of tasks) {
+    const workspaceName = task.workspaceId
+      ? (wsMap.get(task.workspaceId)?.name ?? "Unknown")
+      : "Unknown";
+
+    if (task.status === "failed") {
+      result.push({ task, reason: "failed", workspaceName });
+    } else if (isTaskBlocked(task, taskStatusMap)) {
+      result.push({ task, reason: "blocked", workspaceName });
+    } else if (task.status === "paused") {
+      result.push({ task, reason: "paused", workspaceName });
+    }
+  }
+
+  // Sort: failed first, then blocked, then paused
+  const ORDER: Record<string, number> = { failed: 0, blocked: 1, paused: 2 };
+  result.sort((a, b) => (ORDER[a.reason] ?? 3) - (ORDER[b.reason] ?? 3));
+
+  return result;
+}
+
+// ─── Active sessions with context ───────────────────────────────────────────
+
+/** A session enriched with display context. */
+export interface ActiveSession {
+  session: Session;
+  environmentName: string;
+}
+
+/** Get active sessions (running/idle/waiting) with resolved environment names. */
+export function getActiveSessions(
+  sessions: Session[],
+  environments: Environment[],
+): ActiveSession[] {
+  const envMap = new Map<string, Environment>();
+  for (const e of environments) {
+    envMap.set(e.id, e);
+  }
+
+  return sessions
+    .filter((s) => s.status === "running" || s.status === "idle" || s.status === "waiting")
+    .map((session) => ({
+      session,
+      environmentName: envMap.get(session.environmentId)?.displayName ?? "Unknown",
+    }));
+}
+
+// ─── Workspace snapshots ────────────────────────────────────────────────────
+
+/** Progress rollup for a single workspace. */
+export interface WorkspaceSnapshot {
+  workspace: Workspace;
+  totalTasks: number;
+  completedTasks: number;
+  workingTasks: number;
+  failedTasks: number;
+}
+
+/** Build progress snapshots for each workspace. */
+export function getWorkspaceSnapshots(
+  workspaces: Workspace[],
+  tasks: TaskData[],
+  _environments: Environment[],
+): WorkspaceSnapshot[] {
+  const statsByWorkspace = new Map<string, {
+    totalTasks: number;
+    completedTasks: number;
+    workingTasks: number;
+    failedTasks: number;
+  }>();
+
+  for (const task of tasks) {
+    if (!task.workspaceId) {
+      continue;
+    }
+
+    let stats = statsByWorkspace.get(task.workspaceId);
+    if (!stats) {
+      stats = {
+        totalTasks: 0,
+        completedTasks: 0,
+        workingTasks: 0,
+        failedTasks: 0,
+      };
+      statsByWorkspace.set(task.workspaceId, stats);
+    }
+
+    stats.totalTasks += 1;
+    if (task.status === "complete") {
+      stats.completedTasks += 1;
+    } else if (task.status === "working") {
+      stats.workingTasks += 1;
+    } else if (task.status === "failed") {
+      stats.failedTasks += 1;
+    }
+  }
+
+  return workspaces.map((workspace) => {
+    const stats = statsByWorkspace.get(workspace.id) ?? {
+      totalTasks: 0,
+      completedTasks: 0,
+      workingTasks: 0,
+      failedTasks: 0,
+    };
+
+    return {
+      workspace,
+      totalTasks: stats.totalTasks,
+      completedTasks: stats.completedTasks,
+      workingTasks: stats.workingTasks,
+      failedTasks: stats.failedTasks,
+    };
+  });
+}

package/src/utils/eventContent.test.ts

@@ -0,0 +1,353 @@
+import { describe, it, expect } from "vitest";
+import {
+  isContentBearingEvent,
+  getEventCopyText,
+  formatEventsAsMarkdown,
+  formatForwardEnvelope,
+} from "./eventContent.js";
+import type { SessionEvent } from "../hooks/types.js";
+import type { DisplayEvent } from "./sessionEvents.js";
+
+/** Helper to build a minimal SessionEvent. */
+function makeEvent(overrides: Partial<SessionEvent> & { eventType: string }): SessionEvent {
+  return {
+    sessionId: "sess-1",
+    timestamp: "2026-01-15T14:34:00Z",
+    content: "",
+    ...overrides,
+  };
+}
+
+/** Helper to build a DisplayEvent with optional toolUseCtx. */
+function makeDisplayEvent(
+  overrides: Partial<DisplayEvent> & { eventType: string },
+): DisplayEvent {
+  return {
+    sessionId: "sess-1",
+    timestamp: "2026-01-15T14:34:00Z",
+    content: "",
+    ...overrides,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// isContentBearingEvent
+// ---------------------------------------------------------------------------
+
+describe("isContentBearingEvent", () => {
+  it("returns true for text events", () => {
+    expect(isContentBearingEvent(makeEvent({ eventType: "text" }))).toBe(true);
+  });
+
+  it("returns true for output events", () => {
+    expect(isContentBearingEvent(makeEvent({ eventType: "output" }))).toBe(true);
+  });
+
+  it("returns true for user_input events", () => {
+    expect(isContentBearingEvent(makeEvent({ eventType: "user_input" }))).toBe(true);
+  });
+
+  it("returns true for tool_use events", () => {
+    expect(isContentBearingEvent(makeEvent({ eventType: "tool_use" }))).toBe(true);
+  });
+
+  it("returns true for tool_result events", () => {
+    expect(isContentBearingEvent(makeEvent({ eventType: "tool_result" }))).toBe(true);
+  });
+
+  it("returns true for error events", () => {
+    expect(isContentBearingEvent(makeEvent({ eventType: "error" }))).toBe(true);
+  });
+
+  it("returns false for status events", () => {
+    expect(isContentBearingEvent(makeEvent({ eventType: "status" }))).toBe(false);
+  });
+
+  it("returns false for signal events", () => {
+    expect(isContentBearingEvent(makeEvent({ eventType: "signal" }))).toBe(false);
+  });
+
+  it("returns false for usage events", () => {
+    expect(isContentBearingEvent(makeEvent({ eventType: "usage" }))).toBe(false);
+  });
+
+  it("returns false for system events", () => {
+    expect(isContentBearingEvent(makeEvent({ eventType: "system" }))).toBe(false);
+  });
+
+  it("returns false for unknown event types", () => {
+    expect(isContentBearingEvent(makeEvent({ eventType: "unknown_future_type" }))).toBe(false);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// getEventCopyText
+// ---------------------------------------------------------------------------
+
+describe("getEventCopyText", () => {
+  it("returns content for text events", () => {
+    const event = makeDisplayEvent({ eventType: "text", content: "Hello world" });
+    expect(getEventCopyText(event)).toBe("Hello world");
+  });
+
+  it("returns content for user_input events", () => {
+    const event = makeDisplayEvent({ eventType: "user_input", content: "Fix the bug" });
+    expect(getEventCopyText(event)).toBe("Fix the bug");
+  });
+
+  it("returns content for error events", () => {
+    const event = makeDisplayEvent({ eventType: "error", content: "Something broke" });
+    expect(getEventCopyText(event)).toBe("Something broke");
+  });
+
+  it("extracts content from JSON-wrapped tool_result", () => {
+    const event = makeDisplayEvent({
+      eventType: "tool_result",
+      content: JSON.stringify({ content: "file contents here" }),
+    });
+    expect(getEventCopyText(event)).toBe("file contents here");
+  });
+
+  it("returns raw content for plain-text tool_result", () => {
+    const event = makeDisplayEvent({
+      eventType: "tool_result",
+      content: "plain result text",
+    });
+    expect(getEventCopyText(event)).toBe("plain result text");
+  });
+
+  it("formats tool_use as tool name + args", () => {
+    const event = makeDisplayEvent({
+      eventType: "tool_use",
+      content: JSON.stringify({ tool: "Read", args: { file_path: "src/index.ts" } }),
+    });
+    const result = getEventCopyText(event);
+    expect(result).toContain("Read");
+    expect(result).toContain("src/index.ts");
+  });
+
+  it("returns raw content for unparseable tool_use", () => {
+    const event = makeDisplayEvent({
+      eventType: "tool_use",
+      content: "not json",
+    });
+    expect(getEventCopyText(event)).toBe("not json");
+  });
+});
+
+// ---------------------------------------------------------------------------
+// formatEventsAsMarkdown
+// ---------------------------------------------------------------------------
+
+describe("formatEventsAsMarkdown", () => {
+  it("returns empty string for empty array", () => {
+    expect(formatEventsAsMarkdown([])).toBe("");
+  });
+
+  it("formats a single text event with Assistant label and timestamp", () => {
+    const event = makeDisplayEvent({
+      eventType: "text",
+      content: "I found the bug.",
+      timestamp: "2026-01-15T14:34:00Z",
+    });
+    const md = formatEventsAsMarkdown([event]);
+    expect(md).toContain("**Assistant**");
+    expect(md).toContain("I found the bug.");
+  });
+
+  it("formats a user_input event with User label", () => {
+    const event = makeDisplayEvent({
+      eventType: "user_input",
+      content: "Fix the login bug",
+    });
+    const md = formatEventsAsMarkdown([event]);
+    expect(md).toContain("**User**");
+    expect(md).toContain("Fix the login bug");
+  });
+
+  it("formats a tool_result event with paired tool_use context", () => {
+    const event = makeDisplayEvent({
+      eventType: "tool_result",
+      content: "const x = 42;",
+      toolUseCtx: { tool: "Read", args: { file_path: "src/index.ts" } },
+    });
+    const md = formatEventsAsMarkdown([event]);
+    expect(md).toContain("**Tool: Read**");
+    expect(md).toContain("`src/index.ts`");
+    expect(md).toContain("const x = 42;");
+  });
+
+  it("formats an unpaired tool_result with generic label", () => {
+    const event = makeDisplayEvent({
+      eventType: "tool_result",
+      content: "some result",
+    });
+    const md = formatEventsAsMarkdown([event]);
+    expect(md).toContain("**Tool output**");
+    expect(md).toContain("some result");
+  });
+
+  it("formats an error event", () => {
+    const event = makeDisplayEvent({
+      eventType: "error",
+      content: "Connection refused",
+    });
+    const md = formatEventsAsMarkdown([event]);
+    expect(md).toContain("**Error**");
+    expect(md).toContain("Connection refused");
+  });
+
+  it("preserves code fences within content", () => {
+    const event = makeDisplayEvent({
+      eventType: "text",
+      content: "Here is code:\n```ts\nconst x = 42;\n```",
+    });
+    const md = formatEventsAsMarkdown([event]);
+    expect(md).toContain("```ts");
+    expect(md).toContain("const x = 42;");
+    expect(md).toContain("```");
+  });
+
+  it("formats multiple events in order with blank line separation", () => {
+    const events: DisplayEvent[] = [
+      makeDisplayEvent({
+        eventType: "user_input",
+        content: "Fix the bug",
+        timestamp: "2026-01-15T14:34:00Z",
+      }),
+      makeDisplayEvent({
+        eventType: "text",
+        content: "Looking into it.",
+        timestamp: "2026-01-15T14:34:05Z",
+      }),
+    ];
+    const md = formatEventsAsMarkdown(events);
+    const userIdx = md.indexOf("**User**");
+    const assistantIdx = md.indexOf("**Assistant**");
+    expect(userIdx).toBeLessThan(assistantIdx);
+    // Blank line separation
+    expect(md).toContain("\n\n");
+  });
+
+  it("skips non-content-bearing events", () => {
+    const events: DisplayEvent[] = [
+      makeDisplayEvent({ eventType: "text", content: "Hello" }),
+      makeDisplayEvent({ eventType: "status", content: "running" }),
+      makeDisplayEvent({ eventType: "text", content: "World" }),
+    ];
+    const md = formatEventsAsMarkdown(events);
+    expect(md).not.toContain("running");
+    expect(md).toContain("Hello");
+    expect(md).toContain("World");
+  });
+
+  it("formats a tool_use event with tool name, args summary, and JSON body", () => {
+    const event = makeDisplayEvent({
+      eventType: "tool_use",
+      content: JSON.stringify({ tool: "Bash", args: { command: "npm test" } }),
+    });
+    const md = formatEventsAsMarkdown([event]);
+    expect(md).toContain("**Tool: Bash**");
+    expect(md).toContain("`npm test`");
+    expect(md).toContain("```json");
+    expect(md).toContain("npm test");
+  });
+
+  it("prefers detailedResult for tool_result in getEventCopyText", () => {
+    const event = makeDisplayEvent({
+      eventType: "tool_result",
+      content: "short result",
+      toolUseCtx: { tool: "Edit", args: {}, detailedResult: "--- a/file\n+++ b/file\n@@ -1 +1 @@\n-old\n+new" },
+    });
+    expect(getEventCopyText(event)).toContain("--- a/file");
+  });
+
+  it("prefers detailedResult for tool_result in formatEventsAsMarkdown", () => {
+    const event = makeDisplayEvent({
+      eventType: "tool_result",
+      content: "short result",
+      toolUseCtx: { tool: "Edit", args: {}, detailedResult: "full diff content here" },
+    });
+    const md = formatEventsAsMarkdown([event]);
+    expect(md).toContain("full diff content here");
+    expect(md).not.toContain("short result");
+  });
+});
+
+// ---------------------------------------------------------------------------
+// formatForwardEnvelope
+// ---------------------------------------------------------------------------
+
+describe("formatForwardEnvelope", () => {
+  it("wraps content in forwarding envelope markers", () => {
+    const events: DisplayEvent[] = [
+      makeDisplayEvent({ eventType: "text", content: "Hello" }),
+    ];
+    const result = formatForwardEnvelope("my-env", events);
+    expect(result).toContain("--- Forwarded from my-env ---");
+    expect(result).toContain("--- End forwarded ---");
+  });
+
+  it("includes the formatted event markdown in the body", () => {
+    const events: DisplayEvent[] = [
+      makeDisplayEvent({ eventType: "user_input", content: "Fix the bug" }),
+    ];
+    const result = formatForwardEnvelope("staging", events);
+    expect(result).toContain("**User**");
+    expect(result).toContain("Fix the bug");
+  });
+
+  it("includes the sourceLabel in the header", () => {
+    const result = formatForwardEnvelope("prod-env / main", [
+      makeDisplayEvent({ eventType: "text", content: "done" }),
+    ]);
+    expect(result).toContain("--- Forwarded from prod-env / main ---");
+  });
+
+  it("sanitizes newlines in sourceLabel to spaces", () => {
+    const result = formatForwardEnvelope("env\nwith\nnewlines", [
+      makeDisplayEvent({ eventType: "text", content: "x" }),
+    ]);
+    expect(result).toContain("--- Forwarded from env with newlines ---");
+  });
+
+  it("sanitizes --- sequences in sourceLabel to em-dashes", () => {
+    const result = formatForwardEnvelope("env---name", [
+      makeDisplayEvent({ eventType: "text", content: "x" }),
+    ]);
+    expect(result).toContain("--- Forwarded from env\u2014name ---");
+    expect(result).not.toContain("env---name");
+  });
+
+  it("envelope body starts after header and ends before footer", () => {
+    const events: DisplayEvent[] = [
+      makeDisplayEvent({ eventType: "text", content: "line one" }),
+    ];
+    const result = formatForwardEnvelope("env-1", events);
+    const headerEnd = result.indexOf("--- Forwarded from env-1 ---") + "--- Forwarded from env-1 ---".length;
+    const footerStart = result.indexOf("--- End forwarded ---");
+    const body = result.slice(headerEnd, footerStart).trim();
+    expect(body).toContain("line one");
+  });
+
+  it("skips non-content-bearing events in the body", () => {
+    const events: DisplayEvent[] = [
+      makeDisplayEvent({ eventType: "text", content: "visible" }),
+      makeDisplayEvent({ eventType: "status", content: "running" }),
+    ];
+    const result = formatForwardEnvelope("env", events);
+    expect(result).toContain("visible");
+    expect(result).not.toContain("running");
+  });
+
+  it("formats multiple events separated by blank lines within the envelope", () => {
+    const events: DisplayEvent[] = [
+      makeDisplayEvent({ eventType: "user_input", content: "first" }),
+      makeDisplayEvent({ eventType: "text", content: "second" }),
+    ];
+    const result = formatForwardEnvelope("env", events);
+    expect(result).toContain("\n\n");
+    expect(result).toContain("first");
+    expect(result).toContain("second");
+  });
+});