@stigmer/react 3.1.17 → 3.2.0

package/src/workflow/facets/WorkflowArtifactsTab.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+// Artifacts facet for the workflow execution panel's activity rail.
+// Domain: workflow (the Artifact-resource analog of session/facets/ArtifactsTab).
+
+import type { Artifact } from "@stigmer/protos/ai/stigmer/agentic/artifact/v1/api_pb";
+import { useMemo } from "react";
+import { ArtifactRowView } from "../../execution/ArtifactRowView.js";
+import type { ArtifactRowItem } from "../../execution/artifact-row-item.js";
+import { deriveWorkflowArtifactItems } from "../deriveWorkflowArtifactItems.js";
+import { useWorkflowArtifactDownload } from "../useWorkflowArtifactDownload.js";
+
+/** Props for {@link WorkflowArtifactsTab}. */
+export interface WorkflowArtifactsTabProps {
+  /** Artifacts produced by the execution (from `useWorkflowExecutionArtifacts`). */
+  readonly artifacts: readonly Artifact[];
+  /** Single click / Enter / Space: open the artifact as an editor-pane document tab. */
+  readonly onOpen: (artifact: Artifact) => void;
+  /**
+   * Double click: pin the artifact's document tab — the double-click half of
+   * the open/activate split (mirrors the file tree's preview/pin model).
+   */
+  readonly onActivate?: (artifact: Artifact) => void;
+}
+
+/**
+ * Artifacts facet for the workflow execution panel (a
+ * `useWorkflowExecutionRailViews` rail view): a VS Code-style dense list of
+ * the execution's outputs across ALL tasks (data/http/llm/agent — the
+ * server aggregates via `listByExecution`), one row per artifact.
+ *
+ * Clicking a row opens the artifact as an editor-pane document
+ * (`WorkflowArtifactDocument`); the hover Download mints a fresh URL. Rows
+ * share `ArtifactRowView` with the session's Artifacts facet — one row UI
+ * over two deliberately-separate artifact data models.
+ */
+export function WorkflowArtifactsTab({
+  artifacts,
+  onOpen,
+  onActivate,
+}: WorkflowArtifactsTabProps) {
+  const entries = useMemo(
+    () => deriveWorkflowArtifactItems(artifacts),
+    [artifacts],
+  );
+
+  if (entries.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center px-4 py-8 text-center">
+        <p className="text-xs text-muted-foreground">
+          No artifacts yet. Files produced by workflow tasks will appear here.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <ul role="list" className="flex flex-col">
+      {entries.map(({ artifact, item }) => (
+        <WorkflowArtifactRow
+          key={artifact.metadata?.id ?? item.name}
+          artifact={artifact}
+          item={item}
+          onOpen={() => onOpen(artifact)}
+          onActivate={onActivate ? () => onActivate(artifact) : undefined}
+        />
+      ))}
+    </ul>
+  );
+}
+
+/**
+ * The `Artifact`-resource host of the shared `ArtifactRowView`: it owns the
+ * workflow model's download mechanics (URL minted by artifact id). Internal —
+ * hosts compose the facet, not individual rows.
+ */
+function WorkflowArtifactRow({
+  artifact,
+  item,
+  onOpen,
+  onActivate,
+}: {
+  readonly artifact: Artifact;
+  readonly item: ArtifactRowItem;
+  readonly onOpen: () => void;
+  readonly onActivate?: () => void;
+}) {
+  const { download, isDownloading } = useWorkflowArtifactDownload();
+
+  return (
+    <ArtifactRowView
+      item={item}
+      onOpen={onOpen}
+      onActivate={onActivate}
+      onDownload={() => download(artifact.metadata?.id ?? "")}
+      isDownloading={isDownloading}
+    />
+  );
+}

package/src/workflow/facets/WorkflowChangesTab.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+// Changes facet for the workflow execution panel's activity rail.
+// Domain: workflow. Deliberate naming divergence from the SESSION's Changes
+// tab (which shows git write-backs — the session renders file diffs inline in
+// its transcript): the workflow has no transcript, so here "Changes" is the
+// execution-level net file-diff rollup across all AGENT_CALL tasks.
+
+import { useMemo } from "react";
+import type { FileChange } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
+import { toFileDiffEntry } from "../../execution/deriveExecutionFileChanges.js";
+import { DiffFileList } from "../../version-history/DiffFileList.js";
+
+/** Props for {@link WorkflowChangesTab}. */
+export interface WorkflowChangesTabProps {
+  /** Net file changes across all tasks (from `useWorkflowExecutionFileChanges`). */
+  readonly fileChanges: readonly FileChange[];
+  /** `true` while the first child-execution fetches are in flight (no data yet). */
+  readonly isLoading?: boolean;
+  /** `true` while later fetches are in flight and the current list is stale. */
+  readonly isRefetching?: boolean;
+  /** Fetch error, or `null`. Partial results still render below the notice. */
+  readonly error?: Error | null;
+  /**
+   * Tab path of the active file-change diff document, or `null` — drives the
+   * list's active-row highlight so it tracks the open editor tab.
+   */
+  readonly activePath?: string | null;
+  /** Single click / Enter / Space: open the change's diff as an editor-pane tab. */
+  readonly onOpen: (change: FileChange) => void;
+}
+
+/**
+ * Changes facet for the workflow execution panel (a
+ * `useWorkflowExecutionRailViews` rail view): a VS Code Source Control-style
+ * dense file list of the execution's net file changes across ALL agent-call
+ * tasks — path, M/A/D badge, `+N -N` — one row per changed file.
+ *
+ * Clicking a row opens that file's diff in the editor pane
+ * (`FileChangeDiff` as a virtual document); the active tab highlights its
+ * row. Rows reuse the shared `DiffFileList`, and the `+N -N` counts come from
+ * the shared `toFileDiffEntry` projection — the same numbers the session's
+ * `FileChangesView` shows for the same capture.
+ *
+ * Freshness contract (from the data hook): the list refreshes at task
+ * boundaries, not token-by-token while an agent is mid-run — surfaced
+ * honestly via the "Updating…" status line instead of pretending to be live.
+ */
+export function WorkflowChangesTab({
+  fileChanges,
+  isLoading = false,
+  isRefetching = false,
+  error = null,
+  activePath = null,
+  onOpen,
+}: WorkflowChangesTabProps) {
+  const entries = useMemo(
+    () => fileChanges.map(toFileDiffEntry),
+    [fileChanges],
+  );
+
+  // The rollup keys one net change per path, so path → change lookup is total.
+  const changeByPath = useMemo(
+    () => new Map(fileChanges.map((c) => [c.path || c.absolutePath, c])),
+    [fileChanges],
+  );
+
+  if (isLoading) {
+    return (
+      <div
+        role="status"
+        className="flex flex-col items-center justify-center px-4 py-8 text-center"
+      >
+        <p className="text-xs text-muted-foreground">Loading file changes…</p>
+      </div>
+    );
+  }
+
+  if (fileChanges.length === 0) {
+    return (
+      <div className="flex flex-col gap-2 px-4 py-8 text-center">
+        {error && <ErrorNotice error={error} />}
+        <p className="text-xs text-muted-foreground">
+          No file changes yet. Files edited by agent tasks will appear here.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      {error && (
+        <div className="px-2 pt-2">
+          <ErrorNotice error={error} />
+        </div>
+      )}
+
+      <DiffFileList
+        files={entries}
+        selectedPath={activePath}
+        onSelect={(path) => {
+          const change = changeByPath.get(path);
+          if (change) onOpen(change);
+        }}
+      />
+
+      {isRefetching && (
+        <p role="status" className="px-3 pb-2 text-[0.65rem] text-muted-foreground-faint">
+          Updating…
+        </p>
+      )}
+    </div>
+  );
+}
+
+/**
+ * A failed child fetch never blanks the facet — partial results render and
+ * the failure is named (DD-006: what happened + what it means).
+ */
+function ErrorNotice({ error }: { readonly error: Error }) {
+  return (
+    <div
+      role="alert"
+      className="rounded-md border border-border bg-muted-subtle px-3 py-2 text-left text-xs text-destructive"
+    >
+      Some task changes could not be loaded: {error.message}
+    </div>
+  );
+}

package/src/workflow/facets/WorkflowUsageTab.tsx

@@ -0,0 +1,258 @@
+"use client";
+
+// Usage facet for the workflow execution panel's activity rail.
+// Domain: workflow (the budget/rollup analog of session/facets/UsageTab).
+
+import { useMemo } from "react";
+import { cn } from "@stigmer/theme";
+import type {
+  DerivedCostSummary,
+  DerivedTaskState,
+} from "../../internal/store/workflow-execution-event-store.js";
+import { deriveWorkflowUsageItems } from "../deriveWorkflowUsageItems.js";
+import type { WorkflowUsageItem } from "../deriveWorkflowUsageItems.js";
+import { formatMicroUsd, formatTokenCount } from "../format-utils.js";
+
+const BIGINT_ZERO = BigInt(0);
+
+/** Props for {@link WorkflowUsageTab}. */
+export interface WorkflowUsageTabProps {
+  /** Execution-level cost/budget rollup (from `useWorkflowExecutionEventStream`). */
+  readonly costSummary: DerivedCostSummary;
+  /** Per-task derived states — drives the per-task breakdown list. */
+  readonly taskStates: ReadonlyMap<string, DerivedTaskState>;
+}
+
+/**
+ * Usage facet for the workflow execution panel (a
+ * `useWorkflowExecutionRailViews` rail view): the execution-level cost/token
+ * rollup with budget context on top, and a per-task breakdown (most expensive
+ * first) below — "which task is burning my budget?" at a glance.
+ *
+ * The aggregate and the breakdown deliberately come from different derived
+ * sources and are NEVER reconciled against each other: the aggregate reads
+ * `costSummary` (authoritative — the latest `budget_checkpoint` can include
+ * mid-task and orchestration usage), while rows read `taskStates` (summed
+ * from per-task events). Summing the rows to "fix" the aggregate would
+ * under-report; scaling rows to match the aggregate would fabricate data.
+ *
+ * Model-level detail (per-model breakdown, prompt/completion split) is
+ * absent by design: no workflow usage-report data source exists yet — that
+ * is a backend-gated later slice, not a frontend omission.
+ */
+export function WorkflowUsageTab({
+  costSummary,
+  taskStates,
+}: WorkflowUsageTabProps) {
+  const items = useMemo(
+    () => deriveWorkflowUsageItems(taskStates),
+    [taskStates],
+  );
+
+  const hasAggregate =
+    costSummary.costConsumedMicros > BIGINT_ZERO ||
+    costSummary.tokensConsumed > BIGINT_ZERO;
+
+  if (!hasAggregate && items.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center px-4 py-8 text-center">
+        <p className="text-xs text-muted-foreground">
+          No usage data yet. Cost and token stats will appear here.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <UsageSummary costSummary={costSummary} />
+
+      {items.length > 0 && (
+        <div className="flex flex-col gap-1">
+          <h3 className="px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            By task
+          </h3>
+          <ul role="list" className="flex flex-col">
+            {items.map((item) => (
+              <UsageRow key={item.taskName} item={item} />
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * The execution-level rollup block: consumed cost/tokens with the budget
+ * limit when the stream reported one (`remaining >= 0` — `-1` means "no
+ * limit known"), a budget progress gauge per known limit (absorbed from the
+ * retired sidebar `WorkflowExecutionCostPanel` so the layout consolidation
+ * lost no information), plus an explicit threshold-breach notice (text +
+ * icon, never color alone).
+ */
+function UsageSummary({
+  costSummary,
+}: {
+  readonly costSummary: DerivedCostSummary;
+}) {
+  const costLimit =
+    costSummary.costRemainingMicros >= BIGINT_ZERO
+      ? costSummary.costConsumedMicros + costSummary.costRemainingMicros
+      : undefined;
+  const tokenLimit =
+    costSummary.tokensRemaining >= BIGINT_ZERO
+      ? costSummary.tokensConsumed + costSummary.tokensRemaining
+      : undefined;
+
+  return (
+    <div
+      className="flex flex-col gap-1.5 px-2"
+      role="region"
+      aria-label="Execution cost summary"
+    >
+      <div className="flex items-baseline gap-1.5">
+        <span className="text-sm font-medium tabular-nums text-foreground">
+          {formatMicroUsd(costSummary.costConsumedMicros)}
+        </span>
+        {costLimit !== undefined && (
+          <span className="text-xs tabular-nums text-muted-foreground">
+            of {formatMicroUsd(costLimit)} budget
+          </span>
+        )}
+      </div>
+      <BudgetGauge
+        consumed={costSummary.costConsumedMicros}
+        limit={costLimit}
+        breached={costSummary.thresholdBreached}
+        label="Cost budget"
+      />
+
+      <div className="text-xs tabular-nums text-muted-foreground">
+        {formatTokenCount(costSummary.tokensConsumed)} tokens
+        {tokenLimit !== undefined && ` of ${formatTokenCount(tokenLimit)}`}
+      </div>
+      <BudgetGauge
+        consumed={costSummary.tokensConsumed}
+        limit={tokenLimit}
+        breached={costSummary.thresholdBreached}
+        label="Token budget"
+      />
+
+      {costSummary.thresholdBreached && (
+        <p className="flex items-center gap-1.5 text-xs text-warning">
+          <WarningIcon />
+          Budget threshold breached
+        </p>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Budget consumption bar + percentage, shown only when a limit is known.
+ * The color shift (primary → warning past 80% or on breach) is a secondary
+ * channel — the breach notice above carries the accessible signal.
+ */
+function BudgetGauge({
+  consumed,
+  limit,
+  breached,
+  label,
+}: {
+  readonly consumed: bigint;
+  readonly limit: bigint | undefined;
+  readonly breached: boolean;
+  readonly label: string;
+}) {
+  if (limit === undefined || limit <= BIGINT_ZERO) return null;
+  const percentage = Number((consumed * BigInt(100)) / limit);
+
+  return (
+    <div className="flex items-center gap-2" aria-label={label}>
+      <div
+        role="progressbar"
+        aria-valuenow={Math.min(percentage, 100)}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        className="h-1.5 min-w-0 flex-1 overflow-hidden rounded-full bg-muted"
+      >
+        <div
+          className={cn(
+            "h-full rounded-full transition-all",
+            breached || percentage > 80 ? "bg-warning" : "bg-primary",
+          )}
+          style={{ width: `${Math.min(percentage, 100)}%` }}
+        />
+      </div>
+      <span className="shrink-0 text-[10px] tabular-nums text-muted-foreground">
+        {percentage.toFixed(0)}%
+      </span>
+    </div>
+  );
+}
+
+/**
+ * One per-task usage row — a static entry: the task's own card in the
+ * thread is where its detail lives (T06), so the breakdown reports rather
+ * than navigates.
+ */
+function UsageRow({ item }: { readonly item: WorkflowUsageItem }) {
+  return (
+    <li className="flex items-stretch">
+      <div className="flex min-w-0 flex-1 items-center gap-2 px-2 py-1 text-left text-xs text-muted-foreground">
+        <span className="min-w-0 flex-1 truncate text-foreground">
+          {item.taskName}
+          <span className="ml-1.5 text-[0.65rem] text-muted-foreground">
+            {item.kindLabel}
+            {isInFlight(item.status) && ` · ${statusLabel(item.status)}`}
+          </span>
+        </span>
+        <span className="shrink-0 tabular-nums text-foreground">
+          {formatMicroUsd(item.costMicros)}
+        </span>
+        <span className="w-14 shrink-0 text-right tabular-nums text-[0.65rem] text-muted-foreground-faint">
+          {formatTokenCount(item.tokensUsed)} tok
+        </span>
+      </div>
+    </li>
+  );
+}
+
+/** Whether a task is still accruing usage (live tokens keep updating). */
+function isInFlight(status: WorkflowUsageItem["status"]): boolean {
+  return (
+    status === "running" ||
+    status === "retrying" ||
+    status === "waiting_approval"
+  );
+}
+
+function statusLabel(status: WorkflowUsageItem["status"]): string {
+  return status === "waiting_approval" ? "waiting approval" : status;
+}
+
+// ---------------------------------------------------------------------------
+// Inline SVG icons (SDK independence — no lucide dependency)
+// ---------------------------------------------------------------------------
+
+function WarningIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="shrink-0"
+      aria-hidden="true"
+    >
+      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+      <path d="M12 9v4" />
+      <path d="M12 17h.01" />
+    </svg>
+  );
+}

package/src/workflow/format-utils.ts

@@ -2,9 +2,8 @@
  * Shared formatting utilities for workflow execution metrics.
  *
  * Consolidates formatting logic previously duplicated across
- * WorkflowExecutionViewer, WorkflowExecutionHeader,
- * WorkflowExecutionCostPanel, WorkflowExecutionTaskPanel,
- * and WorkflowExecutionTimelineEvent.
+ * WorkflowExecutionViewer, WorkflowExecutionHeader, and
+ * WorkflowExecutionTaskPanel.
  *
  * @since T05 (Runtime Inspector)
  */