@stigmer/react 0.5.0 → 1.0.0

package/src/execution/SummarizationBadge.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import { memo, useCallback, useState } from "react";
+import { cn } from "@stigmer/theme";
+import type { SummarizationEventView } from "./useContextWindow";
+import { formatTokenCount } from "./UsageWidget";
+
+/** Props for {@link SummarizationBadge}. */
+export interface SummarizationBadgeProps {
+  /** Summarization events ordered chronologically (oldest first). */
+  readonly events: readonly SummarizationEventView[];
+  /** Additional CSS classes for the root element. */
+  readonly className?: string;
+}
+
+/**
+ * Collapsible badge showing summarization event history for an execution.
+ *
+ * Collapsed state shows a count badge ("2 summarizations").
+ * Expanded state lists each event with before/after token counts,
+ * compression ratio, duration, and cost.
+ *
+ * Returns `null` when there are no events.
+ *
+ * All visual properties flow through `--stgm-*` tokens.
+ * Accessible via `role="group"` and keyboard-expandable.
+ *
+ * @example
+ * ```tsx
+ * const ctx = useContextWindow(execution);
+ * <SummarizationBadge events={ctx.summarizationEvents} />
+ * ```
+ *
+ * @see {@link useContextWindow} - data source for summarization events
+ */
+export const SummarizationBadge = memo(function SummarizationBadge({
+  events,
+  className,
+}: SummarizationBadgeProps) {
+  const [expanded, setExpanded] = useState(false);
+  const toggle = useCallback(() => setExpanded((v) => !v), []);
+
+  if (events.length === 0) return null;
+
+  return (
+    <div
+      role="group"
+      aria-label="Summarization history"
+      className={cn("flex flex-col gap-1", className)}
+    >
+      <button
+        type="button"
+        onClick={toggle}
+        aria-expanded={expanded}
+        className={cn(
+          "inline-flex items-center gap-1.5 rounded px-1.5 py-0.5",
+          "text-xs text-muted-foreground",
+          "hover:bg-muted/50 transition-colors",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        )}
+      >
+        <SummarizationIcon />
+        <span className="tabular-nums">
+          {events.length}{" "}
+          {events.length === 1 ? "summarization" : "summarizations"}
+        </span>
+        <ChevronIcon expanded={expanded} />
+      </button>
+
+      {expanded && (
+        <div
+          role="list"
+          aria-label="Summarization events"
+          className="flex flex-col gap-1 pl-2"
+        >
+          {events.map((event, i) => (
+            <EventRow key={event.timestamp || i} event={event} index={i} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+});
+
+const EventRow = memo(function EventRow({
+  event,
+  index,
+}: {
+  readonly event: SummarizationEventView;
+  readonly index: number;
+}) {
+  const reduction = Math.round(event.compressionRatio * 100);
+
+  return (
+    <div
+      role="listitem"
+      className="flex flex-col gap-0.5 rounded border border-border/50 px-2 py-1.5"
+    >
+      <div className="flex items-baseline justify-between text-xs text-muted-foreground">
+        <span className="font-medium">#{index + 1}</span>
+        {event.timestamp && (
+          <time
+            dateTime={event.timestamp}
+            className="tabular-nums"
+          >
+            {formatTime(event.timestamp)}
+          </time>
+        )}
+      </div>
+      <div className="text-xs tabular-nums text-muted-foreground">
+        {formatTokenCount(event.tokensBefore)} →{" "}
+        {formatTokenCount(event.tokensAfter)} tokens ({reduction}% reduction)
+      </div>
+      <div className="text-xs tabular-nums text-muted-foreground">
+        {event.durationMs > 0 && <>{formatDurationMs(event.durationMs)}</>}
+        {event.model && (
+          <>
+            {event.durationMs > 0 && " · "}
+            {event.model}
+          </>
+        )}
+        {event.costUsd > 0 && (
+          <>
+            {" · "}${event.costUsd < 0.01 ? event.costUsd.toFixed(4) : event.costUsd.toFixed(2)}
+          </>
+        )}
+      </div>
+    </div>
+  );
+});
+
+function formatTime(iso: string): string {
+  try {
+    const d = new Date(iso);
+    return d.toLocaleTimeString(undefined, {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    });
+  } catch {
+    return iso;
+  }
+}
+
+function formatDurationMs(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+function SummarizationIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M2 3h8M2 6h5M2 9h3" />
+    </svg>
+  );
+}
+
+function ChevronIcon({ expanded }: { readonly expanded: boolean }) {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className={cn(
+        "transition-transform",
+        expanded && "rotate-180",
+      )}
+    >
+      <path d="M2.5 4L5 6.5L7.5 4" />
+    </svg>
+  );
+}

package/src/execution/SummarizationCard.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { memo } from "react";
+import { cn } from "@stigmer/theme";
+import type { SummarizationEventView } from "./useContextWindow";
+import { formatTokenCount } from "./UsageWidget";
+
+/** Props for {@link SummarizationCard}. */
+export interface SummarizationCardProps {
+  /** The summarization event to display. */
+  readonly event: SummarizationEventView;
+  /** Additional CSS classes for the root element. */
+  readonly className?: string;
+}
+
+/**
+ * Inline timeline card shown when context summarization occurs mid-conversation.
+ *
+ * Renders as a compact system-event divider in the {@link MessageThread},
+ * positioned chronologically between messages based on the event timestamp.
+ *
+ * Shows:
+ * - "Context compacted" header with compression icon
+ * - Token reduction (before -> after) and compression percentage
+ * - Duration, model, and cost when available (native harness)
+ * - For Cursor harness (model/duration unavailable): "Detected context compaction"
+ *
+ * All visual properties flow through `--stgm-*` tokens.
+ *
+ * @see {@link useContextWindow} - data source for summarization events
+ * @see {@link SummarizationBadge} - sidebar aggregate widget (complementary)
+ */
+export const SummarizationCard = memo(function SummarizationCard({
+  event,
+  className,
+}: SummarizationCardProps) {
+  const reduction = Math.round(event.compressionRatio * 100);
+  const isInferred = !event.model;
+
+  return (
+    <div
+      role="status"
+      aria-label="Context compacted"
+      className={cn(
+        "mx-4 flex items-center gap-3 rounded-md border border-border/50",
+        "bg-muted/30 px-3 py-2",
+        className,
+      )}
+    >
+      <CompactionIcon />
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <div className="flex items-baseline gap-1.5 text-xs font-medium text-muted-foreground">
+          <span>{isInferred ? "Detected context compaction" : "Context compacted"}</span>
+          {event.timestamp && (
+            <time dateTime={event.timestamp} className="ml-auto tabular-nums text-muted-foreground/70">
+              {formatTime(event.timestamp)}
+            </time>
+          )}
+        </div>
+        <div className="flex flex-wrap items-center gap-x-2 text-xs tabular-nums text-muted-foreground/80">
+          <span>
+            {formatTokenCount(event.tokensBefore)} &rarr; {formatTokenCount(event.tokensAfter)} tokens
+          </span>
+          <span className="text-muted-foreground/50">&middot;</span>
+          <span>{reduction}% reduction</span>
+          {event.durationMs > 0 && (
+            <>
+              <span className="text-muted-foreground/50">&middot;</span>
+              <span>{formatDuration(event.durationMs)}</span>
+            </>
+          )}
+          {event.model && (
+            <>
+              <span className="text-muted-foreground/50">&middot;</span>
+              <span>{event.model}</span>
+            </>
+          )}
+          {event.costUsd > 0 && (
+            <>
+              <span className="text-muted-foreground/50">&middot;</span>
+              <span>
+                ${event.costUsd < 0.01 ? event.costUsd.toFixed(4) : event.costUsd.toFixed(2)}
+              </span>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+function formatTime(iso: string): string {
+  try {
+    return new Date(iso).toLocaleTimeString(undefined, {
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  } catch {
+    return iso;
+  }
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+function CompactionIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="shrink-0 text-muted-foreground/70"
+      aria-hidden="true"
+    >
+      <path d="M4 2v4l4-2-4-2zM12 14v-4l-4 2 4 2z" />
+      <path d="M4 8h8" />
+    </svg>
+  );
+}

package/src/execution/__tests__/PlanCompletionCard.test.tsx

@@ -0,0 +1,67 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, fireEvent, cleanup } from "@testing-library/react";
+import { PlanCompletionCard } from "../PlanCompletionCard";
+
+describe("PlanCompletionCard", () => {
+  it("renders the card with status text and implement button", () => {
+    const { container } = render(<PlanCompletionCard onImplement={() => {}} />);
+
+    const root = container.firstElementChild as HTMLElement;
+    expect(root).toBeTruthy();
+    expect(root.getAttribute("role")).toBe("status");
+    expect(root.getAttribute("aria-label")).toBe("Plan complete");
+
+    const button = root.querySelector("button");
+    expect(button).toBeTruthy();
+    expect(button!.textContent).toContain("Implement");
+
+    expect(root.textContent).toContain("Plan complete");
+    cleanup();
+  });
+
+  it("calls onImplement when the button is clicked", () => {
+    const onImplement = vi.fn();
+    const { container } = render(<PlanCompletionCard onImplement={onImplement} />);
+
+    const button = container.querySelector("button")!;
+    fireEvent.click(button);
+
+    expect(onImplement).toHaveBeenCalledTimes(1);
+    cleanup();
+  });
+
+  it("renders nothing when onImplement is not provided", () => {
+    const { container } = render(<PlanCompletionCard />);
+
+    expect(container.firstChild).toBeNull();
+    cleanup();
+  });
+
+  it("disables the button when disabled prop is true", () => {
+    const { container } = render(<PlanCompletionCard onImplement={() => {}} disabled />);
+
+    const button = container.querySelector("button")!;
+    expect(button.disabled).toBe(true);
+    cleanup();
+  });
+
+  it("does not fire onImplement when disabled and clicked", () => {
+    const onImplement = vi.fn();
+    const { container } = render(<PlanCompletionCard onImplement={onImplement} disabled />);
+
+    const button = container.querySelector("button")!;
+    fireEvent.click(button);
+
+    expect(onImplement).not.toHaveBeenCalled();
+    cleanup();
+  });
+
+  it("has role=status and aria-label for accessibility", () => {
+    const { container } = render(<PlanCompletionCard onImplement={() => {}} />);
+
+    const statusEl = container.querySelector("[role='status']");
+    expect(statusEl).toBeTruthy();
+    expect(statusEl!.getAttribute("aria-label")).toBe("Plan complete");
+    cleanup();
+  });
+});

package/src/execution/__tests__/buildThreadItems-plan-completion.test.ts

@@ -0,0 +1,197 @@
+import { describe, it, expect } from "vitest";
+import { create } from "@bufbuild/protobuf";
+import {
+  AgentExecutionSchema,
+  AgentExecutionStatusSchema,
+  type AgentExecution,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
+import {
+  AgentExecutionSpecSchema,
+  ExecutionConfigSchema,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/spec_pb";
+import { ApiResourceMetadataSchema } from "@stigmer/protos/ai/stigmer/commons/apiresource/metadata_pb";
+import { AgentMessageSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
+import {
+  ExecutionPhase,
+  InteractionMode,
+  MessageType,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { buildThreadItems } from "../MessageThread";
+
+function makeMessage(type: MessageType, content: string) {
+  const msg = create(AgentMessageSchema);
+  msg.type = type;
+  msg.content = content;
+  return msg;
+}
+
+function makeExecution(opts: {
+  id: string;
+  specMessage?: string;
+  phase?: ExecutionPhase;
+  interactionMode?: InteractionMode;
+  messages?: ReturnType<typeof makeMessage>[];
+}): AgentExecution {
+  const exec = create(AgentExecutionSchema);
+
+  const meta = create(ApiResourceMetadataSchema);
+  meta.id = opts.id;
+  exec.metadata = meta;
+
+  const spec = create(AgentExecutionSpecSchema);
+  spec.message = opts.specMessage ?? "test message";
+  if (opts.interactionMode !== undefined) {
+    const config = create(ExecutionConfigSchema);
+    config.interactionMode = opts.interactionMode;
+    spec.executionConfig = config;
+  }
+  exec.spec = spec;
+
+  const status = create(AgentExecutionStatusSchema);
+  status.phase = opts.phase ?? ExecutionPhase.EXECUTION_COMPLETED;
+  if (opts.messages) {
+    status.messages = opts.messages;
+  }
+  exec.status = status;
+
+  return exec;
+}
+
+describe("buildThreadItems plan-completion variant", () => {
+  it("emits plan-completion for COMPLETED Plan-mode execution", () => {
+    const exec = makeExecution({
+      id: "exec-plan",
+      phase: ExecutionPhase.EXECUTION_COMPLETED,
+      interactionMode: InteractionMode.PLAN,
+      messages: [makeMessage(MessageType.MESSAGE_AI, "Here is the plan")],
+    });
+
+    const items = buildThreadItems([exec], null, null, false, undefined);
+    const planItem = items.find((i) => i.kind === "plan-completion");
+
+    expect(planItem).toBeDefined();
+    expect(planItem!.key).toBe("plan-completion");
+  });
+
+  it("does NOT emit plan-completion for COMPLETED Agent-mode execution", () => {
+    const exec = makeExecution({
+      id: "exec-agent",
+      phase: ExecutionPhase.EXECUTION_COMPLETED,
+      interactionMode: InteractionMode.AGENT,
+      messages: [makeMessage(MessageType.MESSAGE_AI, "Done")],
+    });
+
+    const items = buildThreadItems([exec], null, null, false, undefined);
+    const planItem = items.find((i) => i.kind === "plan-completion");
+
+    expect(planItem).toBeUndefined();
+  });
+
+  it("does NOT emit plan-completion for COMPLETED execution with no interactionMode", () => {
+    const exec = makeExecution({
+      id: "exec-default",
+      phase: ExecutionPhase.EXECUTION_COMPLETED,
+      messages: [makeMessage(MessageType.MESSAGE_AI, "Done")],
+    });
+
+    const items = buildThreadItems([exec], null, null, false, undefined);
+    const planItem = items.find((i) => i.kind === "plan-completion");
+
+    expect(planItem).toBeUndefined();
+  });
+
+  it("does NOT emit plan-completion for FAILED Plan-mode execution", () => {
+    const exec = makeExecution({
+      id: "exec-fail",
+      phase: ExecutionPhase.EXECUTION_FAILED,
+      interactionMode: InteractionMode.PLAN,
+      messages: [makeMessage(MessageType.MESSAGE_AI, "Error")],
+    });
+
+    const items = buildThreadItems([exec], null, null, false, undefined);
+    const planItem = items.find((i) => i.kind === "plan-completion");
+
+    expect(planItem).toBeUndefined();
+  });
+
+  it("does NOT emit plan-completion for TERMINATED Plan-mode execution", () => {
+    const exec = makeExecution({
+      id: "exec-term",
+      phase: ExecutionPhase.EXECUTION_TERMINATED,
+      interactionMode: InteractionMode.PLAN,
+    });
+
+    const items = buildThreadItems([exec], null, null, false, undefined);
+    const planItem = items.find((i) => i.kind === "plan-completion");
+
+    expect(planItem).toBeUndefined();
+  });
+
+  it("does NOT emit plan-completion when a Plan execution is actively streaming", () => {
+    const exec = makeExecution({
+      id: "exec-streaming",
+      phase: ExecutionPhase.EXECUTION_IN_PROGRESS,
+      interactionMode: InteractionMode.PLAN,
+      messages: [makeMessage(MessageType.MESSAGE_AI, "Analyzing...")],
+    });
+
+    const items = buildThreadItems([], exec, null, false, undefined);
+    const planItem = items.find((i) => i.kind === "plan-completion");
+
+    expect(planItem).toBeUndefined();
+  });
+
+  it("emits plan-completion only for the last execution in a multi-execution thread", () => {
+    const agentExec = makeExecution({
+      id: "exec-1",
+      phase: ExecutionPhase.EXECUTION_COMPLETED,
+      interactionMode: InteractionMode.AGENT,
+      messages: [makeMessage(MessageType.MESSAGE_AI, "Built it")],
+    });
+
+    const planExec = makeExecution({
+      id: "exec-2",
+      phase: ExecutionPhase.EXECUTION_COMPLETED,
+      interactionMode: InteractionMode.PLAN,
+      messages: [makeMessage(MessageType.MESSAGE_AI, "Here is the plan")],
+    });
+
+    const items = buildThreadItems(
+      [agentExec, planExec],
+      null,
+      null,
+      false,
+      undefined,
+    );
+    const planItems = items.filter((i) => i.kind === "plan-completion");
+
+    expect(planItems).toHaveLength(1);
+  });
+
+  it("does NOT emit plan-completion when last execution is Agent after a Plan", () => {
+    const planExec = makeExecution({
+      id: "exec-plan",
+      phase: ExecutionPhase.EXECUTION_COMPLETED,
+      interactionMode: InteractionMode.PLAN,
+      messages: [makeMessage(MessageType.MESSAGE_AI, "Here is the plan")],
+    });
+
+    const agentExec = makeExecution({
+      id: "exec-impl",
+      phase: ExecutionPhase.EXECUTION_COMPLETED,
+      interactionMode: InteractionMode.AGENT,
+      messages: [makeMessage(MessageType.MESSAGE_AI, "Implemented")],
+    });
+
+    const items = buildThreadItems(
+      [planExec, agentExec],
+      null,
+      null,
+      false,
+      undefined,
+    );
+    const planItem = items.find((i) => i.kind === "plan-completion");
+
+    expect(planItem).toBeUndefined();
+  });
+});