@stigmer/react 3.1.16 → 3.2.0

package/src/workflow/WorkflowArtifactDocument.tsx

@@ -0,0 +1,257 @@
+"use client";
+
+// Editor-area document rendering one workflow Artifact resource's content.
+// Domain: workflow (the Artifact-resource counterpart of execution/ArtifactDocument).
+
+import { useCallback, useState } from "react";
+import type { Artifact } from "@stigmer/protos/ai/stigmer/agentic/artifact/v1/api_pb";
+import { cn } from "@stigmer/theme";
+import { ArtifactFileContent } from "../execution/ArtifactFileContent.js";
+import { formatArtifactSize } from "../execution/artifact-utils.js";
+import { useArtifactContentById } from "../execution/useArtifactContentById.js";
+import { useWorkflowArtifactDownload } from "./useWorkflowArtifactDownload.js";
+
+const COPIED_FEEDBACK_MS = 2000;
+
+/** Props for {@link WorkflowArtifactDocument}. */
+export interface WorkflowArtifactDocumentProps {
+  /** The workflow artifact to render. */
+  readonly artifact: Artifact;
+  /** Additional CSS classes for the root element. */
+  readonly className?: string;
+}
+
+/**
+ * MIME types whose content is fetchable and renderable as text. The `Artifact`
+ * spec requires a content type at creation, so gating is MIME-first — unlike
+ * the session model, which infers text-ness from the file extension.
+ */
+function isTextContentType(contentType: string): boolean {
+  const ct = contentType.toLowerCase();
+  return (
+    ct.startsWith("text/") ||
+    ct.includes("json") ||
+    ct.includes("yaml") ||
+    ct.includes("xml") ||
+    ct.includes("markdown") ||
+    ct.includes("csv")
+  );
+}
+
+/**
+ * The editor-pane rendering of a single workflow `Artifact` resource — the
+ * `SurfaceVirtualDocument` body the workflow execution panel mounts when an
+ * artifact opens from its Artifacts facet (VS Code "each file is a tab").
+ *
+ * The `Artifact`-resource counterpart of the session's `ArtifactDocument`:
+ * same toolbar-over-body shape and the same shared file-content states
+ * ({@link ArtifactFileContent}), but file-only (the resource model has no
+ * directory concept) and deliberately read-only — no resource detection and
+ * no Apply/Push, which are session-specific product features.
+ *
+ * Content is fetched through `stigmer.artifact.getContent` (server-proxied
+ * bytes, CORS-safe for embedded hosts) only for text content types; binary
+ * artifacts show an honest "not available for preview" body with Download as
+ * the escape hatch. A `cacheKey` keeps reopening a recently-viewed tab
+ * instant (DD-014).
+ *
+ * All visual properties flow through `--stgm-*` tokens (DD-005).
+ */
+export function WorkflowArtifactDocument({
+  artifact,
+  className,
+}: WorkflowArtifactDocumentProps) {
+  const id = artifact.metadata?.id ?? "";
+  const displayName =
+    artifact.spec?.displayName || artifact.metadata?.name || "Unnamed";
+  const specContentType = artifact.spec?.contentType ?? "";
+  const sizeBytes = artifact.status?.sizeBytes ?? BigInt(0);
+
+  const canFetchContent = !!id && isTextContentType(specContentType);
+  const { content, contentType, isTruncated, isLoading, error } =
+    useArtifactContentById(
+      canFetchContent ? id : null,
+      // Artifacts are immutable after creation (append-only store), so the id
+      // alone is a safe cache identity — no contentHash needed.
+      canFetchContent ? `workflow-artifact-doc:${id}` : undefined,
+    );
+
+  const { download, isDownloading } = useWorkflowArtifactDownload();
+
+  const [copied, setCopied] = useState(false);
+  const copy = useCallback(() => {
+    if (!content) return;
+    void navigator.clipboard.writeText(content).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);
+    });
+  }, [content]);
+
+  const showCopy = content !== null;
+
+  return (
+    <div
+      role="article"
+      aria-label={`Artifact ${displayName}`}
+      className={cn("flex min-h-0 min-w-0 flex-1 flex-col", className)}
+    >
+      {/* Toolbar sticks to the top of the editor pane's scroll container so the
+          file identity and actions stay visible while the body scrolls. Rows
+          wrap on narrow panes (min-w-0 + flex-wrap) rather than forcing a
+          horizontal scrollbar — the DD-20 reflow contract. */}
+      <div className="sticky top-0 z-10 flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1.5 border-b border-border bg-background px-4 py-2">
+        <span className="shrink-0 text-muted-foreground">
+          <FileIcon />
+        </span>
+        <span className="truncate text-sm font-medium text-foreground">
+          {displayName}
+        </span>
+        <span className="shrink-0 text-[0.65rem] tabular-nums text-muted-foreground-faint">
+          {formatArtifactSize(sizeBytes)}
+        </span>
+        {specContentType && (
+          <span className="shrink-0 text-[0.65rem] text-muted-foreground">
+            {specContentType}
+          </span>
+        )}
+
+        <div className="ml-auto flex min-w-0 flex-wrap items-center gap-3">
+          {showCopy && (
+            <button
+              type="button"
+              onClick={copy}
+              aria-label={copied ? "Copied to clipboard" : "Copy content"}
+              className={cn(
+                "inline-flex items-center gap-1.5 text-xs font-medium transition-colors",
+                copied
+                  ? "text-success"
+                  : "text-muted-foreground hover:text-foreground",
+                FOCUS_RING_CLASSES,
+              )}
+            >
+              {copied ? <CheckIcon /> : <CopyIcon />}
+              {copied ? "Copied" : "Copy"}
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={() => download(id)}
+            disabled={isDownloading || !id}
+            className={cn(
+              "inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50",
+              FOCUS_RING_CLASSES,
+            )}
+          >
+            <DownloadIcon />
+            {isDownloading ? "Preparing\u2026" : "Download"}
+          </button>
+        </div>
+      </div>
+
+      <div className="min-w-0">
+        <ArtifactFileContent
+          fileName={displayName}
+          content={content}
+          contentType={contentType ?? specContentType}
+          isLoading={isLoading}
+          error={error}
+          isTruncated={isTruncated}
+        />
+      </div>
+
+      <div role="status" aria-live="polite" aria-atomic="true" className="sr-only">
+        {copied && "Content copied to clipboard"}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Shared style constants
+// ---------------------------------------------------------------------------
+
+const FOCUS_RING_CLASSES =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm";
+
+// ---------------------------------------------------------------------------
+// Inline SVG icons (SDK independence — no lucide dependency)
+// ---------------------------------------------------------------------------
+
+function FileIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M9.5 1.5H5C4.17 1.5 3.5 2.17 3.5 3V13C3.5 13.83 4.17 14.5 5 14.5H11C11.83 14.5 12.5 13.83 12.5 13V4.5L9.5 1.5Z" />
+      <path d="M9.5 1.5V4.5H12.5" />
+    </svg>
+  );
+}
+
+function CopyIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="shrink-0"
+      aria-hidden="true"
+    >
+      <rect x="4" y="4" width="6.5" height="6.5" rx="1" />
+      <path d="M8 4V2.5C8 1.95 7.55 1.5 7 1.5H2.5C1.95 1.5 1.5 1.95 1.5 2.5V7C1.5 7.55 1.95 8 2.5 8H4" />
+    </svg>
+  );
+}
+
+function DownloadIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="shrink-0"
+      aria-hidden="true"
+    >
+      <path d="M6 1.5V8.5" />
+      <path d="M3 6L6 9L9 6" />
+      <path d="M2 10.5H10" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="shrink-0"
+      aria-hidden="true"
+    >
+      <path d="M2 6.5L4.5 9L10 3" />
+    </svg>
+  );
+}

package/src/workflow/WorkflowExecutionGraph.tsx

@@ -11,7 +11,7 @@ import {
   useReactFlow,
   ReactFlowProvider,
 } from "@xyflow/react";
-import type { Node, NodeChange, Viewport } from "@xyflow/react";
+import type { NodeChange, Viewport } from "@xyflow/react";
 import { cn } from "@stigmer/theme";
 import { WorkflowNode } from "./WorkflowNode.js";
 import { CanvasTransitionEdge } from "./CanvasTransitionEdge.js";
@@ -22,18 +22,16 @@ import { useWorkflowExecutionGraph } from "./useWorkflowExecutionGraph.js";
 import type { UseWorkflowExecutionGraphReturn } from "./useWorkflowExecutionGraph.js";
 import type { DerivedTaskState } from "../internal/store/workflow-execution-event-store.js";
 import type { WorkflowExecution } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/api_pb";
-import { useFollowExecution, computeFollowSelection } from "./useFollowExecution.js";
+import { useFollowExecution } from "./useFollowExecution.js";
 import { useActiveTaskName } from "./useActiveTaskName.js";
-import { useExecutionAnnouncements } from "./useExecutionAnnouncements.js";
 import { ExecutionActiveTaskIndicator } from "./ExecutionActiveTaskIndicator.js";
+import { useExecutionAnnouncements } from "./useExecutionAnnouncements.js";
 import { getAnimationDuration } from "../internal/motion-preference.js";
 
 /** Props for {@link WorkflowExecutionGraph}. */
 export interface WorkflowExecutionGraphProps {
   /** ID of the workflow execution to visualize. */
   readonly executionId: string;
-  /** Callback when a task node is selected or deselected. */
-  readonly onTaskSelect?: (taskName: string | null) => void;
   /** When true, the viewport auto-pans to follow the currently running node. */
   readonly followExecution?: boolean;
   /**
@@ -48,12 +46,6 @@ export interface WorkflowExecutionGraphProps {
    * Pass `undefined` (or omit) for standalone usage.
    */
   readonly taskStates?: ReadonlyMap<string, DerivedTaskState>;
-  /**
-   * Callback invoked when the graph auto-selects a failed task on
-   * terminal executions. Wire this to the parent's selected-task
-   * state to keep sibling components (like the inspector) in sync.
-   */
-  readonly onAutoSelectTask?: (taskName: string) => void;
   /**
    * Pixel width of a panel that **overlays** (absolutely positioned over)
    * the graph viewport, occluding the right side. The follow-execution
@@ -74,6 +66,16 @@ export interface WorkflowExecutionGraphProps {
    * @default false
    */
   readonly nodesDraggable?: boolean;
+  /**
+   * Whether the graph renders its own `aria-live` region announcing task
+   * state changes. Keep the default for standalone embedding. Set `false`
+   * when a parent owns a shared announcer for multiple views of the same
+   * task states — a live region inside a CSS-hidden (`display:none`) graph
+   * is removed from the accessibility tree and would go silent, and two
+   * mounted announcers would double-announce.
+   * @default true
+   */
+  readonly announceTaskStates?: boolean;
   /** Additional CSS class names for the root container. */
   readonly className?: string;
 }
@@ -91,7 +93,10 @@ const defaultEdgeOptions = {
 };
 
 /**
- * Read-only execution graph canvas for workflow executions.
+ * Read-only execution graph canvas for workflow executions — a PASSIVE
+ * topology visualization (T06): status colors, live overlays, pan/zoom,
+ * and follow-the-run camera, with no node selection or click actions. A
+ * task's detail lives on its thread card, the single home for task data.
  *
  * Reuses the same `WorkflowNode` / `NodeShell` node rendering system from
  * the visual editor, wrapped in execution mode context to show live status
@@ -102,10 +107,7 @@ const defaultEdgeOptions = {
  *
  * @example
  * ```tsx
- * <WorkflowExecutionGraph
- *   executionId="wex_abc123"
- *   onTaskSelect={(name) => setInspectedTask(name)}
- * />
+ * <WorkflowExecutionGraph executionId="wex_abc123" />
  * ```
  */
 export const WorkflowExecutionGraph = memo(function WorkflowExecutionGraph(
@@ -122,12 +124,11 @@ const TERMINAL_EXECUTION_PHASES = new Set([3, 4, 5, 6]);
 
 function WorkflowExecutionGraphInner({
   executionId,
-  onTaskSelect,
   followExecution = false,
   execution: externalExecution,
   taskStates: externalTaskStates,
-  onAutoSelectTask,
   panelOffsetPx = 0,
+  announceTaskStates = true,
   nodesDraggable: draggable = false,
   className,
 }: WorkflowExecutionGraphProps) {
@@ -135,7 +136,6 @@ function WorkflowExecutionGraphInner({
     executionId,
     execution: externalExecution,
     taskStates: externalTaskStates,
-    onAutoSelectTask,
     nodesDraggable: draggable,
   });
   const {
@@ -143,8 +143,6 @@ function WorkflowExecutionGraphInner({
     edges,
     isLoading,
     error,
-    selectedTaskName,
-    setSelectedTaskName,
     versionMismatch,
     taskStates,
     executionPhase,
@@ -230,42 +228,11 @@ function WorkflowExecutionGraphInner({
     panelOffsetPx,
   });
 
-  // ── Follow-selection: auto-select the active task while following ──
-  // Couples node selection to the follow state machine so "Follow" means
-  // viewport centering + node highlighting + inspector display.
-  useEffect(() => {
-    const taskToSelect = computeFollowSelection({
-      isFollowing,
-      activeTaskName: activeTaskInfo?.taskName ?? null,
-      currentSelectedTask: selectedTaskName,
-    });
-    if (!taskToSelect) return;
-    setSelectedTaskName(taskToSelect);
-    onTaskSelect?.(taskToSelect);
-  }, [isFollowing, activeTaskInfo?.taskName, selectedTaskName, setSelectedTaskName, onTaskSelect]);
-
-  // Screen reader announcements for task state changes
+  // Screen reader announcements for task state changes (standalone
+  // embedding). The viewer sets `announceTaskStates={false}` and owns a
+  // shared announcer instead — see the prop docs.
   const announcement = useExecutionAnnouncements(taskStates);
 
-  const handleNodeClick = useCallback(
-    (_event: React.MouseEvent, node: Node) => {
-      const data = node.data as CanvasTaskNodeData;
-      if (data.isSentinel) return;
-      const name = data.taskName;
-      const next = name === selectedTaskName ? null : name;
-      setSelectedTaskName(next);
-      onTaskSelect?.(next);
-      if (isFollowing) disableFollow();
-    },
-    [selectedTaskName, setSelectedTaskName, onTaskSelect, isFollowing, disableFollow],
-  );
-
-  const handlePaneClick = useCallback(() => {
-    setSelectedTaskName(null);
-    onTaskSelect?.(null);
-    if (isFollowing) disableFollow();
-  }, [setSelectedTaskName, onTaskSelect, isFollowing, disableFollow]);
-
   const onMoveStart = useCallback(
     (event: MouseEvent | TouchEvent | null, viewport: Viewport) => {
       handleMoveStart(event, viewport);
@@ -273,19 +240,14 @@ function WorkflowExecutionGraphInner({
     [handleMoveStart],
   );
 
-  // Mark selected node + apply drag position overrides
-  const nodesWithSelection = useMemo(
+  // Apply ephemeral drag position overrides
+  const nodesWithPositions = useMemo(
     () =>
       nodes.map((n) => {
-        const selected = (n.data as CanvasTaskNodeData).taskName === selectedTaskName;
         const pos = dragPositions[n.id];
-        return pos
-          ? { ...n, selected, position: pos }
-          : selected !== n.selected
-            ? { ...n, selected }
-            : n;
+        return pos ? { ...n, position: pos } : n;
       }),
-    [nodes, selectedTaskName, dragPositions],
+    [nodes, dragPositions],
   );
 
   if (isLoading) {
@@ -346,27 +308,25 @@ function WorkflowExecutionGraphInner({
         )}
 
         <ReactFlow
-          nodes={nodesWithSelection}
+          nodes={nodesWithPositions}
           edges={edges}
           nodeTypes={nodeTypes}
           edgeTypes={edgeTypes}
           defaultEdgeOptions={defaultEdgeOptions}
           onInit={handleInit}
-          onNodeClick={handleNodeClick}
-          onPaneClick={handlePaneClick}
           onMoveStart={onMoveStart}
           onNodesChange={draggable ? handleNodesChange : undefined}
           nodesDraggable={draggable}
           nodesConnectable={false}
-          nodesFocusable={true}
-          elementsSelectable={true}
+          nodesFocusable={false}
+          elementsSelectable={false}
           panOnDrag={true}
           zoomOnScroll={true}
           fitView={false}
           minZoom={0.2}
           maxZoom={2}
           proOptions={{ hideAttribution: true }}
-          aria-label="Workflow execution graph. Use Tab to navigate between tasks."
+          aria-label="Workflow execution graph"
         >
           <Background variant={BackgroundVariant.Dots} gap={16} size={1} />
           <Controls showInteractive={false} />
@@ -385,14 +345,16 @@ function WorkflowExecutionGraphInner({
         </ReactFlow>
 
         {/* Screen reader live region for execution state announcements */}
-        <div
-          role="log"
-          aria-live="polite"
-          aria-atomic="false"
-          className="sr-only"
-        >
-          {announcement}
-        </div>
+        {announceTaskStates && (
+          <div
+            role="log"
+            aria-live="polite"
+            aria-atomic="false"
+            className="sr-only"
+          >
+            {announcement}
+          </div>
+        )}
       </div>
     </WorkflowGraphModeProvider>
   );