@stigmer/react 1.0.4 → 2.0.1

package/src/session/useSessionUsage.ts

@@ -1,21 +1,29 @@
 "use client";
 
-import { useMemo } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { create } from "@bufbuild/protobuf";
 import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
 import {
   GetSessionUsageReportInputSchema,
   type GetSessionUsageReportOutput,
 } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/io_pb";
-import type { ModelUsage, RunnerUsageSummary } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/usage_pb";
+import type { ModelUsage, StreamingUsageSummary } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/usage_pb";
 import { useStigmer } from "../hooks";
+import { isTerminalPhase } from "../execution/execution-phases";
 import { useFetch } from "../internal/useFetch";
 
+/**
+ * Poll cadence for the session usage report while an execution is in flight.
+ * The proxy writes one authoritative billing record per turn, so polling lets
+ * the settled cost climb live during the run rather than only at completion.
+ */
+const ACTIVE_POLL_INTERVAL_MS = 2500;
+
 /**
  * Per-model cost breakdown.
  */
 export interface ModelCostEntry {
-  /** Model identifier (e.g. "claude-sonnet-4-20250514"). */
+  /** Model identifier (e.g. "claude-sonnet-4-6"). */
   readonly model: string;
   /** Provider name (e.g. "anthropic", "openai"). */
   readonly provider: string;
@@ -57,6 +65,12 @@ export interface UseSessionUsageReturn {
   readonly primaryProvider: string;
   /** `true` when usage data is available. */
   readonly hasUsage: boolean;
+  /**
+   * `true` when the displayed cost comes from runner-reported streaming data
+   * rather than settled billing records. The UI should show an "Estimated"
+   * badge when this is true.
+   */
+  readonly isEstimated: boolean;
 }
 
 const EMPTY: UseSessionUsageReturn = {
@@ -71,6 +85,7 @@ const EMPTY: UseSessionUsageReturn = {
   primaryModel: "",
   primaryProvider: "",
   hasUsage: false,
+  isEstimated: false,
 };
 
 function microsToUsd(micros: bigint): number {
@@ -94,27 +109,32 @@ function mapReport(report: GetSessionUsageReportOutput): UseSessionUsageReturn {
   const agg = report.totalUsage;
   if (!agg) return EMPTY;
 
+  const llmCallCount = agg.llmCallCount;
+  const totalTokens = Number(agg.totalTokens);
+  const billableCost = microsToUsd(agg.billableCostMicros);
+
   return {
-    totalCostUsd: microsToUsd(agg.billableCostMicros),
-    totalTokens: Number(agg.totalTokens),
+    totalCostUsd: billableCost,
+    totalTokens,
     inputTokens: Number(agg.inputTokens),
     outputTokens: Number(agg.outputTokens),
     cacheReadTokens: Number(agg.cacheReadInputTokens),
     cacheCreationTokens: Number(agg.cacheCreationInputTokens),
-    llmCallCount: agg.llmCallCount,
+    llmCallCount,
     modelBreakdown: report.modelBreakdown.map(mapModelUsage),
     primaryModel: agg.primaryModel,
     primaryProvider: agg.primaryProvider,
-    hasUsage: true,
+    hasUsage: llmCallCount > 0 || totalTokens > 0 || billableCost > 0,
+    isEstimated: report.isEstimated ?? false,
   };
 }
 
 /**
- * Aggregate runner-reported usage from execution status objects.
+ * Aggregate streaming-reported usage from execution status objects.
  * Used as a fallback when the server-side session usage report is empty
  * (e.g., Cursor harness where the proxy does not capture main agent turns).
  */
-function aggregateRunnerUsage(
+function aggregateStreamingUsage(
   executions: readonly AgentExecution[],
 ): UseSessionUsageReturn {
   let inputTokens = 0;
@@ -127,7 +147,7 @@ function aggregateRunnerUsage(
   let model = "";
 
   for (const exec of executions) {
-    const ru = exec.status?.runnerUsage;
+    const ru = exec.status?.streamingUsage;
     if (!ru || ru.turnCount === 0) continue;
     inputTokens += Number(ru.inputTokens);
     outputTokens += Number(ru.outputTokens);
@@ -166,17 +186,23 @@ function aggregateRunnerUsage(
     primaryModel: model,
     primaryProvider: model ? "cursor" : "",
     hasUsage: true,
+    isEstimated: true,
   };
 }
 
 /**
  * Usage hook for session-level cost and token aggregation.
  *
- * Calls `getSessionUsageReport` to fetch real usage data from the
- * billing domain. Returns zeros while loading or when no session is
- * available.
+ * Uses exactly ONE data source at a time to avoid displaying a cost total
+ * from one pipeline with a model breakdown from another:
+ *
+ * - When billing records exist (proxy-metered), the billing report is shown
+ *   as authoritative (`isEstimated: false`).
+ * - When execution is in-flight and only streaming data is available,
+ *   streaming is shown with `isEstimated: true`.
+ * - The two sources are never mixed in the same display.
  *
- * @param executions - All executions for a session (used to derive session ID).
+ * @param executions - All executions for a session (completed + active).
  */
 export function useSessionUsage(
   executions: readonly AgentExecution[],
@@ -188,28 +214,65 @@ export function useSessionUsage(
     [executions],
   );
 
-  const { data: report } = useFetch(
-    sessionId
-      ? () =>
-          stigmer.agentExecution.getSessionUsageReport(
-            create(GetSessionUsageReportInputSchema, { sessionId }),
-          )
-      : null,
+  // Any execution still in flight means more authoritative records are coming,
+  // so the report must be polled to stay current during the run.
+  const hasActiveExecution = useMemo(
+    () =>
+      executions.some((e) => {
+        const phase = e.status?.phase;
+        return phase !== undefined && !isTerminalPhase(phase);
+      }),
+    [executions],
+  );
+
+  // Stable fetch identity so the poll timer in useFetch is not torn down and
+  // recreated on every streaming re-render (which would prevent it firing).
+  const fetchReport = useCallback(
+    () =>
+      stigmer.agentExecution.getSessionUsageReport(
+        create(GetSessionUsageReportInputSchema, { sessionId: sessionId! }),
+      ),
+    [sessionId, stigmer],
+  );
+
+  const { data: report, refetch } = useFetch(
+    sessionId ? fetchReport : null,
     [sessionId, stigmer],
     null as GetSessionUsageReportOutput | null,
-    { cacheKey: sessionId ? `session-usage:${sessionId}` : undefined },
+    {
+      cacheKey: sessionId ? `session-usage:${sessionId}` : undefined,
+      refetchInterval: hasActiveExecution ? ACTIVE_POLL_INTERVAL_MS : false,
+    },
   );
 
-  const runnerFallback = useMemo(
-    () => aggregateRunnerUsage(executions),
+  // When the last execution settles, poll stops — do one final fetch so the
+  // authoritative total (incl. the final turn) replaces the live estimate
+  // promptly instead of waiting for a remount.
+  const wasActiveRef = useRef(hasActiveExecution);
+  useEffect(() => {
+    if (wasActiveRef.current && !hasActiveExecution) {
+      refetch();
+    }
+    wasActiveRef.current = hasActiveExecution;
+  }, [hasActiveExecution, refetch]);
+
+  const streamingFallback = useMemo(
+    () => aggregateStreamingUsage(executions),
     [executions],
   );
 
   return useMemo(() => {
-    if (report) {
-      const mapped = mapReport(report);
-      if (mapped.hasUsage) return mapped;
-    }
-    return runnerFallback;
-  }, [report, runnerFallback]);
+    const billingReport = report ? mapReport(report) : EMPTY;
+
+    // Authoritative proxy-metered report wins as soon as any record exists.
+    // While an execution runs, per-turn records land continuously and polling
+    // keeps this total fresh, so it is never shadowed by a stale snapshot.
+    if (billingReport.hasUsage) return billingReport;
+
+    // No billing record yet (e.g. before the first turn settles) — fall back
+    // to the runner's display-only streaming estimate.
+    if (streamingFallback.hasUsage) return streamingFallback;
+
+    return EMPTY;
+  }, [report, streamingFallback]);
 }

package/src/skill/SkillDetailView.tsx

@@ -12,6 +12,7 @@ import { useSkill } from "./useSkill";
 import { SkillFileBrowser } from "./SkillFileBrowser";
 import { ErrorMessage } from "../error/ErrorMessage";
 import { VisibilityToggle } from "../library/VisibilityToggle";
+import { PermissionGate } from "../iam-policy/PermissionGate";
 import { MARKDOWN_COMPONENTS, REMARK_PLUGINS, stripFrontmatter } from "../internal/markdown-components";
 import { ResourceDetailShell } from "../resource-detail/ResourceDetailShell";
 import { Section } from "../resource-detail/Section";
@@ -242,20 +243,28 @@ export function SkillDetailView({
     statusLabel: status ? skillStateLabel(status.state) : undefined,
   };
 
-  const isPublic = meta?.visibility === ApiResourceVisibility.visibility_public;
-  const visibilityControl =
-    onVisibilityChange && meta ? (
-      <VisibilityToggle
-        visibility={meta.visibility}
-        onVisibilityChange={onVisibilityChange}
-        isPending={isVisibilityPending}
-      />
-    ) : isPublic ? (
+  const visibilityBadge =
+    meta?.visibility === ApiResourceVisibility.visibility_public ? (
       <span className="shrink-0 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
         Public
       </span>
     ) : undefined;
 
+  const visibilityControl =
+    onVisibilityChange && meta ? (
+      <PermissionGate
+        resource={{ kind: "skill", id: meta.id }}
+        relation="can_edit"
+        fallback={visibilityBadge}
+      >
+        <VisibilityToggle
+          visibility={meta.visibility}
+          onVisibilityChange={onVisibilityChange}
+          isPending={isVisibilityPending}
+        />
+      </PermissionGate>
+    ) : visibilityBadge;
+
   let tabContent: React.ReactNode;
   if (activeAdditionalTab) {
     tabContent = activeAdditionalTab.content;

package/src/skill/SkillFileBrowser.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import { useCallback, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import Markdown from "react-markdown";
 import { cn } from "@stigmer/theme";
 import { MARKDOWN_COMPONENTS, REMARK_PLUGINS, stripFrontmatter } from "../internal/markdown-components";
+import { buildFileTree, FileTreeNode } from "../internal/file-tree";
 import { useSkillArtifact } from "./useSkillArtifact";
-import type { SkillFileEntry } from "./useSkillUpload";
 
 // ---------------------------------------------------------------------------
 // Public types
@@ -148,80 +148,6 @@ export function SkillFileBrowser({
   );
 }
 
-// ---------------------------------------------------------------------------
-// File tree node
-// ---------------------------------------------------------------------------
-
-interface TreeNode {
-  name: string;
-  path: string;
-  children?: TreeNode[];
-}
-
-function FileTreeNode({
-  node,
-  selectedPath,
-  onSelect,
-  depth,
-}: {
-  readonly node: TreeNode;
-  readonly selectedPath: string;
-  readonly onSelect: (path: string) => void;
-  readonly depth: number;
-}) {
-  const [expanded, setExpanded] = useState(true);
-  const isFolder = !!node.children;
-  const isSelected = node.path === selectedPath;
-
-  const handleClick = useCallback(() => {
-    if (isFolder) {
-      setExpanded((prev) => !prev);
-    } else {
-      onSelect(node.path);
-    }
-  }, [isFolder, node.path, onSelect]);
-
-  return (
-    <li role="treeitem" aria-expanded={isFolder ? expanded : undefined}>
-      <button
-        type="button"
-        onClick={handleClick}
-        className={cn(
-          "flex w-full items-center gap-1.5 px-3 py-1 text-left text-xs transition-colors",
-          "hover:bg-muted",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-          isSelected && !isFolder && "bg-muted text-foreground font-medium",
-          !isSelected && "text-muted-foreground",
-        )}
-        style={{ paddingLeft: `${12 + depth * 12}px` }}
-        aria-current={isSelected ? "true" : undefined}
-      >
-        {isFolder && (
-          <span className="text-[10px] text-muted-foreground-subtle">
-            {expanded ? "▼" : "▶"}
-          </span>
-        )}
-        <span className={cn("truncate", isFolder && "font-medium text-foreground")}>
-          {node.name}
-        </span>
-      </button>
-      {isFolder && expanded && node.children && (
-        <ul role="group">
-          {node.children.map((child) => (
-            <FileTreeNode
-              key={child.path}
-              node={child}
-              selectedPath={selectedPath}
-              onSelect={onSelect}
-              depth={depth + 1}
-            />
-          ))}
-        </ul>
-      )}
-    </li>
-  );
-}
-
 // ---------------------------------------------------------------------------
 // Content viewer
 // ---------------------------------------------------------------------------
@@ -250,40 +176,3 @@ function FileContentViewer({
   );
 }
 
-// ---------------------------------------------------------------------------
-// Tree building utility
-// ---------------------------------------------------------------------------
-
-function buildFileTree(files: SkillFileEntry[]): TreeNode[] {
-  const root: TreeNode[] = [];
-
-  const sorted = [...files].sort((a, b) => a.path.localeCompare(b.path));
-
-  for (const file of sorted) {
-    const parts = file.path.split("/");
-
-    if (parts.length === 1) {
-      root.push({ name: parts[0], path: file.path });
-    } else {
-      let currentLevel = root;
-      for (let i = 0; i < parts.length - 1; i++) {
-        const folderName = parts[i];
-        let folder = currentLevel.find(
-          (n) => n.name === folderName && n.children,
-        );
-        if (!folder) {
-          folder = {
-            name: folderName,
-            path: parts.slice(0, i + 1).join("/") + "/",
-            children: [],
-          };
-          currentLevel.push(folder);
-        }
-        currentLevel = folder.children!;
-      }
-      currentLevel.push({ name: parts[parts.length - 1], path: file.path });
-    }
-  }
-
-  return root;
-}

package/src/styles.css

@@ -7,6 +7,12 @@
 @import "tailwindcss/utilities.css" layer(stgm);
 @import "@stigmer/theme/tokens.css" layer(stgm);
 
+/* React Flow base styles for workflow graphs. Imported centrally (rather than
+   as a per-component side effect) so the headless @stigmer/react entry stays
+   loadable under Node/tsx — e.g. the @stigmer/ink terminal CLI — which cannot
+   resolve `.css` imports. */
+@import "@xyflow/react/dist/style.css";
+
 @custom-variant dark (&:is([data-stgm-color-mode="dark"] *));
 
 @theme inline {
@@ -140,6 +146,31 @@
 }
 
 @layer stgm {
+  /* T06: Active edge animation (marching ants for currently-flowing edges) */
+  @keyframes stgm-marching-ants {
+    to {
+      stroke-dashoffset: -12;
+    }
+  }
+
+  .stgm-edge-active path {
+    animation: stgm-marching-ants 0.6s linear infinite;
+  }
+
+  /* T16: Running node border pulse — subtle glow to indicate active execution */
+  @keyframes stgm-running-pulse {
+    0%, 100% {
+      box-shadow: 0 0 0 0 var(--stgm-primary, #6366f1);
+    }
+    50% {
+      box-shadow: 0 0 0 4px color-mix(in srgb, var(--stgm-primary, #6366f1) 20%, transparent);
+    }
+  }
+
+  .stgm-exec-running {
+    animation: stgm-running-pulse 2s ease-in-out infinite;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .stgm {
       --stgm-motion-duration: 0ms;

package/src/tabs/Tabs.tsx

@@ -149,6 +149,7 @@ export function Tabs({
               {tab.label}
               {tab.badge != null && tab.badge > 0 && (
                 <span
+                  aria-hidden="true"
                   className={cn(
                     "inline-flex min-w-[1.25rem] items-center justify-center rounded-full px-1 py-px text-[10px] font-medium leading-none",
                     isActive
@@ -175,7 +176,7 @@ export function Tabs({
         role="tabpanel"
         aria-labelledby={tabId(activeTab)}
         tabIndex={0}
-        className="pt-4 focus-visible:outline-none"
+        className="min-h-0 flex-1 pt-4 focus-visible:outline-none"
       >
         {children}
       </div>

package/src/workflow/CanvasActionsContext.ts

@@ -1,12 +1,26 @@
 "use client";
 
 import { createContext } from "react";
+import type { WorkflowGraphModel } from "./workflow-graph-model";
 
 export interface CanvasActions {
   insertTaskOnEdge: (edgeId: string, kindString: string) => void;
   deleteNode: (nodeId: string) => void;
   addSuccessorTask: (sourceNodeId: string, kindString: string) => void;
   duplicateNode: (nodeId: string) => void;
+  addSwitchCase: (switchNodeId: string, caseName: string, condition: string) => void;
+  addForkBranch: (forkNodeId: string, branchName: string) => void;
+  addCatchHandler: (tryCatchNodeId: string, errorType: string) => void;
+  removeSwitchCase: (switchNodeId: string, caseName: string) => void;
+  reorderSwitchCases: (switchNodeId: string, newOrder: readonly string[]) => void;
+  removeForkBranch: (forkNodeId: string, branchName: string) => void;
+  reorderForkBranches: (forkNodeId: string, newOrder: readonly string[]) => void;
+  renameForkBranch: (forkNodeId: string, oldName: string, newName: string) => void;
+  setForkCompete: (forkNodeId: string, compete: boolean) => void;
+  updateCatchConfig: (tryCatchNodeId: string, updates: { as?: string; compensate?: boolean }) => void;
+  removeCatchBlock: (tryCatchNodeId: string) => void;
+  updateForEachConfig: (forEachNodeId: string, updates: Partial<{ each: string; in: string; max_parallelism: number; batch_size: number; on_error: string }>) => void;
+  getGraphModel: () => WorkflowGraphModel;
 }
 
 export const CanvasActionsContext = createContext<CanvasActions | null>(null);