@stigmer/react 0.0.42 → 0.0.44

package/src/execution/ArtifactPreviewModal.tsx

@@ -1,21 +1,12 @@
 "use client";
 
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  type ReactNode,
-} from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { ExecutionArtifact } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/artifact_pb";
 import { ExecutionArtifactKind } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import { cn } from "@stigmer/theme";
 import { useArtifactContent } from "./useArtifactContent";
-import {
-  isTextArtifact,
-  formatArtifactSize,
-  getArtifactExtension,
-} from "./artifact-utils";
+import { isTextArtifact, formatArtifactSize } from "./artifact-utils";
+import { ArtifactContentRenderer } from "./ArtifactContentRenderer";
 import { useDetectStigmerResource } from "../library/useDetectStigmerResource";
 import { useDetectSkillPackage } from "../library/useDetectSkillPackage";
 import type { SkillPackageDetection } from "../library/detect-skill-package";
@@ -66,8 +57,9 @@ export interface ArtifactPreviewModalProps {
  * Internally orchestrates the same detection pipeline as {@link ArtifactCard}:
  *
  * - **FILE artifacts**: Fetches text content via {@link useArtifactContent},
- *   displays with CSS-only YAML highlighting, and detects Agent/McpServer
- *   resources via {@link useDetectStigmerResource}.
+ *   renders via {@link ArtifactContentRenderer} (markdown, YAML, JSON, or
+ *   plain text based on file type), and detects Agent/McpServer resources
+ *   via {@link useDetectStigmerResource}.
  *
  * - **DIRECTORY artifacts**: Shows the file listing from
  *   `artifact.entries` and detects skill packages via
@@ -253,14 +245,6 @@ export function ArtifactPreviewModal({
     if (!open) setCopied(false);
   }, [open]);
 
-  // ---------------------------------------------------------------------------
-  // Content mode
-  // ---------------------------------------------------------------------------
-
-  const ext = getArtifactExtension(artifact);
-  const isYaml =
-    ext === "yaml" || ext === "yml" || (contentType?.includes("yaml") ?? false);
-
   let ctaLabel: string | null = null;
   if (yamlDetection.detected) {
     ctaLabel = `Apply to ${org}`;
@@ -278,7 +262,7 @@ export function ArtifactPreviewModal({
       onCancel={handleCancel}
       aria-label={`Preview ${artifact.name}`}
       className={cn(
-        "w-full max-w-2xl rounded-lg border border-border bg-background p-0 text-foreground shadow-lg outline-none",
+        "fixed inset-0 m-auto w-full max-w-3xl rounded-lg border border-border bg-background p-0 text-foreground shadow-lg outline-none",
         "[&::backdrop]:bg-black/50",
         className,
       )}
@@ -299,12 +283,13 @@ export function ArtifactPreviewModal({
               skillDetection={skillDetection}
             />
           ) : (
-            <FileContentView
+            <FileContentStateView
+              artifact={artifact}
               content={content}
+              contentType={contentType}
               isLoading={isContentLoading}
               error={contentError}
               isTruncated={isTruncated}
-              isYaml={isYaml}
             />
           )}
         </div>
@@ -406,23 +391,25 @@ function ModalHeader({
 }
 
 // ---------------------------------------------------------------------------
-// FileContentView (internal)
+// FileContentStateView (internal — loading/error/empty states + renderer)
 // ---------------------------------------------------------------------------
 
 const SKELETON_LINE_WIDTHS = [85, 72, 90, 65, 78, 88, 70, 82] as const;
 
-function FileContentView({
+function FileContentStateView({
+  artifact,
   content,
+  contentType,
   isLoading,
   error,
   isTruncated,
-  isYaml,
 }: {
+  readonly artifact: ExecutionArtifact;
   readonly content: string | null;
+  readonly contentType: string | null;
   readonly isLoading: boolean;
   readonly error: string | null;
   readonly isTruncated: boolean;
-  readonly isYaml: boolean;
 }) {
   if (isLoading) {
     return (
@@ -457,16 +444,12 @@ function FileContentView({
   }
 
   return (
-    <div>
-      <pre className="overflow-x-auto p-4 font-mono text-xs leading-relaxed text-foreground">
-        <code>{isYaml ? highlightYaml(content) : content}</code>
-      </pre>
-      {isTruncated && (
-        <div className="border-t border-border bg-warning/10 px-4 py-2 text-xs text-warning">
-          Content was truncated. Download the full file for complete content.
-        </div>
-      )}
-    </div>
+    <ArtifactContentRenderer
+      content={content}
+      fileName={artifact.name}
+      contentType={contentType}
+      isTruncated={isTruncated}
+    />
   );
 }
 
@@ -669,81 +652,6 @@ function ApplyButton({
   );
 }
 
-// ---------------------------------------------------------------------------
-// YAML syntax highlighting (CSS-only, zero dependencies)
-// ---------------------------------------------------------------------------
-
-/**
- * Applies lightweight CSS-only highlighting to YAML content.
- *
- * Processes content line-by-line, wrapping structural tokens in styled
- * `<span>` elements using `--stgm-*` theme tokens:
- *
- * - Keys → `text-primary`
- * - Comments → `text-muted-foreground italic`
- * - Document separators (`---`) → `text-muted-foreground`
- * - Boolean/null values → `font-medium`
- * - Multi-line scalar indicators → `text-muted-foreground`
- *
- * Values and block scalar content render in the default `text-foreground`.
- * Non-YAML content passes through unstyled.
- */
-function highlightYaml(content: string): ReactNode {
-  return content.split("\n").map((line, i) => (
-    <span key={i}>
-      {i > 0 && "\n"}
-      {highlightYamlLine(line)}
-    </span>
-  ));
-}
-
-function highlightYamlLine(line: string): ReactNode {
-  if (!line.trim()) return line;
-
-  if (/^---\s*$/.test(line) || /^\.\.\.\s*$/.test(line)) {
-    return <span className="text-muted-foreground">{line}</span>;
-  }
-
-  const commentMatch = line.match(/^(\s*)(#.*)$/);
-  if (commentMatch) {
-    return (
-      <>
-        {commentMatch[1]}
-        <span className="text-muted-foreground italic">{commentMatch[2]}</span>
-      </>
-    );
-  }
-
-  const kvMatch = line.match(/^(\s*(?:-\s+)?)([\w][\w.-]*)(:(?:\s|$))(.*)/);
-  if (kvMatch) {
-    const [, indent, key, colon, value] = kvMatch;
-    return (
-      <>
-        {indent}
-        <span className="text-primary">{key}</span>
-        <span className="text-muted-foreground">{colon}</span>
-        {value ? highlightYamlValue(value) : null}
-      </>
-    );
-  }
-
-  return <>{line}</>;
-}
-
-function highlightYamlValue(value: string): ReactNode {
-  const trimmed = value.trim();
-
-  if (/^[|>][-+]?\s*$/.test(trimmed)) {
-    return <span className="text-muted-foreground">{value}</span>;
-  }
-
-  if (/^(true|false|null|~)$/.test(trimmed)) {
-    return <span className="font-medium">{value}</span>;
-  }
-
-  return <>{value}</>;
-}
-
 // ---------------------------------------------------------------------------
 // Inline SVG icons (SDK pattern: no external icon dependency)
 // ---------------------------------------------------------------------------

package/src/execution/ExecutionPhaseBadge.tsx

@@ -19,7 +19,7 @@ const PHASE_CONFIG: ReadonlyMap<ExecutionPhase, PhaseConfig> = new Map([
     ExecutionPhase.EXECUTION_PENDING,
     {
       label: "Pending",
-      icon: DotIcon,
+      icon: PulseDotIcon,
       colorClass: "text-muted-foreground",
     },
   ],

package/src/execution/MessageThread.tsx

@@ -18,6 +18,7 @@ import { isTerminalPhase } from "./execution-phases";
 import { MessageEntry } from "./MessageEntry";
 import { ToolCallGroup } from "./ToolCallGroup";
 import { ExecutionPhaseBadge } from "./ExecutionPhaseBadge";
+import { SetupProgress } from "./SetupProgress";
 import { ApprovalCard } from "./ApprovalCard";
 import { FilePathContext, type FilePathContextValue } from "./FilePathContext";
 import type { ResolvedPathAction } from "./file-path-resolver";
@@ -101,7 +102,17 @@ type ThreadItem =
   | { readonly kind: "tool-group"; readonly toolCalls: readonly ToolCall[]; readonly subAgentExecutions: readonly SubAgentExecution[]; readonly key: string }
   | { readonly kind: "phase-badge"; readonly phase: ExecutionPhase; readonly key: string }
   | { readonly kind: "pending-message"; readonly content: string; readonly key: string }
-  | { readonly kind: "approval-request"; readonly pendingApproval: PendingApproval; readonly key: string };
+  | { readonly kind: "approval-request"; readonly pendingApproval: PendingApproval; readonly key: string }
+  | { readonly kind: "setup-progress"; readonly workspaceEntries: readonly WorkspaceEntry[]; readonly key: string };
+
+function hasAiMessages(execution: AgentExecution): boolean {
+  const messages = execution.status?.messages;
+  if (!messages || messages.length === 0) return false;
+  return messages.some(
+    (m) =>
+      m.type === MessageType.MESSAGE_AI && (m.content.trim() || m.toolCalls.length > 0),
+  );
+}
 
 function buildThreadItems(
   executions: readonly AgentExecution[],
@@ -109,6 +120,7 @@ function buildThreadItems(
   pendingUserMessage: string | null | undefined,
   includeApprovals: boolean,
   dismissedApprovalIds: ReadonlySet<string> | undefined,
+  workspaceEntries: readonly WorkspaceEntry[] | undefined,
 ): ThreadItem[] {
   const items: ThreadItem[] = [];
   const allExecutions = activeStreamExecution
@@ -168,6 +180,19 @@ function buildThreadItems(
   const lastPhase =
     lastExec?.status?.phase ?? ExecutionPhase.EXECUTION_PHASE_UNSPECIFIED;
 
+  if (
+    activeStreamExecution &&
+    (lastPhase === ExecutionPhase.EXECUTION_PENDING ||
+      lastPhase === ExecutionPhase.EXECUTION_PHASE_UNSPECIFIED) &&
+    !hasAiMessages(activeStreamExecution)
+  ) {
+    items.push({
+      kind: "setup-progress",
+      workspaceEntries: workspaceEntries ?? [],
+      key: "setup-progress",
+    });
+  }
+
   if (
     isTerminalPhase(lastPhase) &&
     lastPhase !== ExecutionPhase.EXECUTION_COMPLETED
@@ -247,8 +272,8 @@ export function MessageThread({
 
   const includeApprovals = onApprovalSubmit != null;
   const items = useMemo(
-    () => buildThreadItems(executions, activeStreamExecution, pendingUserMessage, includeApprovals, dismissedApprovalIds),
-    [executions, activeStreamExecution, pendingUserMessage, includeApprovals, dismissedApprovalIds],
+    () => buildThreadItems(executions, activeStreamExecution, pendingUserMessage, includeApprovals, dismissedApprovalIds, workspaceEntries),
+    [executions, activeStreamExecution, pendingUserMessage, includeApprovals, dismissedApprovalIds, workspaceEntries],
   );
 
   const handleScroll = useCallback(() => {
@@ -322,6 +347,13 @@ export function MessageThread({
                   className="mx-4"
                 />
               );
+            case "setup-progress":
+              return (
+                <SetupProgress
+                  key={item.key}
+                  workspaceEntries={item.workspaceEntries}
+                />
+              );
             case "pending-message":
               return (
                 <div

package/src/execution/SetupProgress.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import type { WorkspaceEntry } from "@stigmer/protos/ai/stigmer/agentic/session/v1/workspace_pb";
+import { cn } from "@stigmer/theme";
+
+export interface SetupProgressProps {
+  /**
+   * Workspace entries from the session spec. When git-sourced entries
+   * are present, the indicator shows workspace-specific messaging
+   * (e.g. "Setting up workspace...") to match the backend's actual
+   * setup sequence.
+   */
+  readonly workspaceEntries?: readonly WorkspaceEntry[];
+  readonly className?: string;
+}
+
+interface SetupStep {
+  readonly message: string;
+  readonly durationMs: number;
+}
+
+const STEP_INTERVAL_MS = 4000;
+
+function buildSteps(
+  workspaceEntries: readonly WorkspaceEntry[] | undefined,
+): SetupStep[] {
+  const hasGitRepo = workspaceEntries?.some(
+    (e) => e.source?.source.case === "gitRepo",
+  );
+
+  const steps: SetupStep[] = [
+    { message: "Initializing execution\u2026", durationMs: STEP_INTERVAL_MS },
+  ];
+
+  if (hasGitRepo) {
+    steps.push({
+      message: "Setting up workspace\u2026",
+      durationMs: STEP_INTERVAL_MS,
+    });
+  }
+
+  steps.push(
+    {
+      message: "Preparing agent environment\u2026",
+      durationMs: STEP_INTERVAL_MS,
+    },
+    { message: "Almost ready\u2026", durationMs: STEP_INTERVAL_MS },
+  );
+
+  return steps;
+}
+
+/**
+ * Animated inline indicator shown in the message thread while an
+ * execution is in the `PENDING` phase and no AI messages have arrived.
+ *
+ * Cycles through contextual status messages derived from the session
+ * configuration (workspace entries, etc.) to communicate that the
+ * backend is actively setting up the sandbox, cloning repositories,
+ * merging environment variables, loading skills, and connecting MCP
+ * servers.
+ *
+ * Uses time-based progression that approximates the backend's actual
+ * setup sequence. A future backend-enriched phase (surfacing real
+ * setup phase labels through the execution stream) can replace the
+ * timer with server-reported progress.
+ *
+ * All visual properties flow through `--stgm-*` tokens.
+ *
+ * @example
+ * ```tsx
+ * <SetupProgress workspaceEntries={session.spec?.workspaceEntries} />
+ * ```
+ */
+export function SetupProgress({
+  workspaceEntries,
+  className,
+}: SetupProgressProps) {
+  const steps = useMemo(() => buildSteps(workspaceEntries), [workspaceEntries]);
+  const [stepIndex, setStepIndex] = useState(0);
+
+  useEffect(() => {
+    setStepIndex(0);
+  }, [steps]);
+
+  useEffect(() => {
+    if (stepIndex >= steps.length - 1) return;
+
+    const timer = setTimeout(() => {
+      setStepIndex((i) => Math.min(i + 1, steps.length - 1));
+    }, steps[stepIndex].durationMs);
+
+    return () => clearTimeout(timer);
+  }, [stepIndex, steps]);
+
+  const currentMessage = steps[Math.min(stepIndex, steps.length - 1)].message;
+
+  return (
+    <div
+      role="status"
+      aria-label={currentMessage}
+      className={cn("flex items-center gap-2.5 px-4 py-2", className)}
+    >
+      <PulseIndicator />
+      <span className="text-sm text-muted-foreground animate-in fade-in duration-300">
+        {currentMessage}
+      </span>
+    </div>
+  );
+}
+
+function PulseIndicator() {
+  return (
+    <span className="relative flex h-2 w-2 shrink-0" aria-hidden="true">
+      <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-muted-foreground opacity-75" />
+      <span className="relative inline-flex h-2 w-2 rounded-full bg-muted-foreground" />
+    </span>
+  );
+}

package/src/execution/ToolCallGroup.tsx

@@ -3,7 +3,10 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import type { ToolCall } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
 import type { SubAgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/subagent_pb";
-import { ToolCallStatus } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import {
+  ApprovalAction,
+  ToolCallStatus,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import { cn } from "@stigmer/theme";
 import { ToolCallItem } from "./ToolCallItem";
 import { resolveToolCategory, extractPrimaryArg } from "./tool-categories";
@@ -32,6 +35,14 @@ export interface ToolCallGroupProps {
 
 type AggregateStatus = "running" | "waiting" | "failed" | "completed" | "pending";
 
+function isResolvedApproval(tc: ToolCall): boolean {
+  return (
+    tc.approvalAction === ApprovalAction.APPROVE ||
+    tc.approvalAction === ApprovalAction.SKIP ||
+    tc.approvalAction === ApprovalAction.REJECT
+  );
+}
+
 function deriveAggregateStatus(toolCalls: readonly ToolCall[]): AggregateStatus {
   let hasRunning = false;
   let hasWaiting = false;
@@ -45,6 +56,9 @@ function deriveAggregateStatus(toolCalls: readonly ToolCall[]): AggregateStatus
         allTerminal = false;
         break;
       case ToolCallStatus.TOOL_CALL_WAITING_APPROVAL:
+        if (isResolvedApproval(tc)) {
+          break;
+        }
         hasWaiting = true;
         allTerminal = false;
         break;

package/src/execution/ToolCallItem.tsx

@@ -61,7 +61,7 @@ export function ToolCallItem({
 }: ToolCallItemProps) {
   const [expanded, setExpanded] = useState(defaultExpanded);
 
-  const status = mapToolCallStatus(toolCall.status);
+  const status = mapToolCallStatus(toolCall);
   const StatusIcon = STATUS_ICON[status];
   const duration = formatDuration(toolCall.startedAt, toolCall.completedAt);
   const isSubAgent = subAgentExecution != null;
@@ -220,11 +220,18 @@ function getApprovalBadge(toolCall: ToolCall): ApprovalBadgeInfo | null {
 
 type ItemStatus = "running" | "waiting" | "failed" | "completed" | "pending";
 
-function mapToolCallStatus(status: ToolCallStatus): ItemStatus {
-  switch (status) {
+function mapToolCallStatus(toolCall: ToolCall): ItemStatus {
+  switch (toolCall.status) {
     case ToolCallStatus.TOOL_CALL_RUNNING:
       return "running";
     case ToolCallStatus.TOOL_CALL_WAITING_APPROVAL:
+      if (
+        toolCall.approvalAction === ApprovalAction.APPROVE ||
+        toolCall.approvalAction === ApprovalAction.SKIP ||
+        toolCall.approvalAction === ApprovalAction.REJECT
+      ) {
+        return "completed";
+      }
       return "waiting";
     case ToolCallStatus.TOOL_CALL_FAILED:
       return "failed";

package/src/execution/artifact-utils.ts

@@ -41,6 +41,7 @@ const TEXT_EXTENSIONS = new Set([
  * Extracts the lowercase file extension from an artifact's name.
  *
  * Returns `null` when the name has no extension or is empty.
+ * Delegates to {@link getFileExtension} for the actual parsing.
  *
  * @example
  * ```ts
@@ -51,10 +52,7 @@ const TEXT_EXTENSIONS = new Set([
 export function getArtifactExtension(
   artifact: ExecutionArtifact,
 ): string | null {
-  const name = artifact.name;
-  const lastDot = name.lastIndexOf(".");
-  if (lastDot === -1 || lastDot === name.length - 1) return null;
-  return name.slice(lastDot + 1).toLowerCase();
+  return getFileExtension(artifact.name);
 }
 
 /**
@@ -100,6 +98,92 @@ export function isArtifactExpired(artifact: ExecutionArtifact): boolean {
   return Date.now() >= expiresMs;
 }
 
+// ---------------------------------------------------------------------------
+// Render mode classification
+// ---------------------------------------------------------------------------
+
+/**
+ * Content rendering strategy for artifact file preview.
+ *
+ * Used by {@link ArtifactContentRenderer} to dispatch to the correct
+ * renderer, and by platform builders who want to implement custom
+ * rendering logic based on file type.
+ *
+ * - `"markdown"` — rendered HTML via `react-markdown` with themed components
+ * - `"yaml"` — CSS-only YAML syntax highlighting
+ * - `"json"` — pretty-printed JSON with key/value coloring
+ * - `"text"` — monospace plain text with line numbers
+ */
+export type ArtifactRenderMode = "markdown" | "yaml" | "json" | "text";
+
+const YAML_EXTENSIONS = new Set(["yaml", "yml"]);
+const JSON_EXTENSIONS = new Set(["json"]);
+const MARKDOWN_EXTENSIONS = new Set(["md", "mdx"]);
+
+/**
+ * Extracts the lowercase file extension from a file name string.
+ *
+ * Returns `null` when the name has no extension or is empty.
+ * Unlike {@link getArtifactExtension}, this operates on a plain
+ * string — usable without a full `ExecutionArtifact` object.
+ *
+ * @example
+ * ```ts
+ * getFileExtension("agent.yaml");      // "yaml"
+ * getFileExtension("README.md");       // "md"
+ * getFileExtension("Makefile");        // null
+ * ```
+ */
+export function getFileExtension(fileName: string): string | null {
+  const lastDot = fileName.lastIndexOf(".");
+  if (lastDot === -1 || lastDot === fileName.length - 1) return null;
+  return fileName.slice(lastDot + 1).toLowerCase();
+}
+
+/**
+ * Determines the optimal rendering strategy for a text artifact.
+ *
+ * Inspects the file extension first, then falls back to the optional
+ * `contentType` MIME string returned by the server. Platform builders
+ * can use this to implement custom rendering or to display a mode
+ * indicator in their UI.
+ *
+ * @param fileName - Artifact file name (e.g., `"README.md"`, `"config.yaml"`)
+ * @param contentType - Optional MIME content type from the server response
+ *
+ * @example
+ * ```ts
+ * getArtifactRenderMode("README.md");                   // "markdown"
+ * getArtifactRenderMode("config.yaml");                 // "yaml"
+ * getArtifactRenderMode("data.json");                   // "json"
+ * getArtifactRenderMode("script.py");                   // "text"
+ * getArtifactRenderMode("unknown", "application/json"); // "json"
+ * ```
+ */
+export function getArtifactRenderMode(
+  fileName: string,
+  contentType?: string | null,
+): ArtifactRenderMode {
+  const ext = getFileExtension(fileName);
+
+  if (ext && MARKDOWN_EXTENSIONS.has(ext)) return "markdown";
+  if (ext && YAML_EXTENSIONS.has(ext)) return "yaml";
+  if (ext && JSON_EXTENSIONS.has(ext)) return "json";
+
+  if (contentType) {
+    const ct = contentType.toLowerCase();
+    if (ct.includes("markdown")) return "markdown";
+    if (ct.includes("yaml")) return "yaml";
+    if (ct.includes("json")) return "json";
+  }
+
+  return "text";
+}
+
+// ---------------------------------------------------------------------------
+// Size formatting
+// ---------------------------------------------------------------------------
+
 const SIZE_UNITS = ["B", "KB", "MB", "GB", "TB"] as const;
 
 /**

package/src/execution/index.ts

@@ -24,11 +24,17 @@ export {
   isArtifactExpired,
   formatArtifactSize,
   getArtifactExtension,
+  getFileExtension,
+  getArtifactRenderMode,
 } from "./artifact-utils";
+export type { ArtifactRenderMode } from "./artifact-utils";
 
 export { ExecutionPhaseBadge } from "./ExecutionPhaseBadge";
 export type { ExecutionPhaseBadgeProps } from "./ExecutionPhaseBadge";
 
+export { SetupProgress } from "./SetupProgress";
+export type { SetupProgressProps } from "./SetupProgress";
+
 export { ToolCallGroup } from "./ToolCallGroup";
 export type { ToolCallGroupProps } from "./ToolCallGroup";
 
@@ -65,6 +71,9 @@ export type { ApprovalCardProps } from "./ApprovalCard";
 export { ArtifactCard } from "./ArtifactCard";
 export type { ArtifactCardProps } from "./ArtifactCard";
 
+export { ArtifactContentRenderer } from "./ArtifactContentRenderer";
+export type { ArtifactContentRendererProps } from "./ArtifactContentRenderer";
+
 export { ArtifactPreviewModal } from "./ArtifactPreviewModal";
 export type { ArtifactPreviewModalProps } from "./ArtifactPreviewModal";