@stigmer/react 0.0.52 → 0.0.54

package/src/execution/ToolCallItem.tsx

@@ -16,6 +16,7 @@ import {
   extractPrimaryArg,
   type ToolCategory,
 } from "./tool-categories";
+import { useSandboxNormalize } from "./SandboxContext";
 
 export interface ToolCallItemProps {
   readonly toolCall: ToolCall;
@@ -66,7 +67,7 @@ export function ToolCallItem({
   const duration = formatDuration(toolCall.startedAt, toolCall.completedAt);
   const isSubAgent = subAgentExecution != null;
 
-  const categoryInfo = resolveToolCategory(toolCall.name);
+  const categoryInfo = resolveToolCategory(toolCall.name, toolCall.mcpServerSlug);
   const CategoryIcon = CATEGORY_ICON[categoryInfo.category];
   const primaryArg = extractPrimaryArg(toolCall);
 
@@ -74,6 +75,7 @@ export function ToolCallItem({
     ? subAgentExecution.subject || subAgentExecution.name || categoryInfo.label
     : categoryInfo.label;
 
+  const normalize = useSandboxNormalize();
   const approvalBadge = getApprovalBadge(toolCall);
 
   // Completed/skipped Read items are non-expandable — the clickable
@@ -144,7 +146,11 @@ export function ToolCallItem({
     );
   }
 
-  const displaySubtitle = isSubAgent ? null : primaryArg;
+  const displaySubtitle = isSubAgent
+    ? null
+    : categoryInfo.category === "shell" && primaryArg
+      ? normalize(primaryArg)
+      : primaryArg;
 
   return (
     <div className={cn("border-b border-border/50 last:border-b-0", className)}>
@@ -255,7 +261,7 @@ const STATUS_COLOR: Record<ItemStatus, string> = {
 // Category-specific icons (inline SVG, SDK pattern)
 // ---------------------------------------------------------------------------
 
-const CATEGORY_ICON: Record<ToolCategory, () => React.JSX.Element> = {
+export const CATEGORY_ICON: Record<ToolCategory, () => React.JSX.Element> = {
   shell: TerminalIcon,
   read: FileIcon,
   write: FilePenIcon,
@@ -265,6 +271,7 @@ const CATEGORY_ICON: Record<ToolCategory, () => React.JSX.Element> = {
   list: FolderIcon,
   think: BrainIcon,
   "sub-agent": BotIcon,
+  mcp: McpPlugIcon,
   unknown: WrenchIcon,
 };
 
@@ -355,6 +362,17 @@ function WrenchIcon() {
   );
 }
 
+function McpPlugIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M4 1.5V4" />
+      <path d="M8 1.5V4" />
+      <path d="M2.5 4H9.5V6.5C9.5 8.43 7.93 10 6 10C4.07 10 2.5 8.43 2.5 6.5V4Z" />
+      <path d="M6 10V11" />
+    </svg>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Status icons
 // ---------------------------------------------------------------------------

package/src/execution/WriteBackCard.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import type { WorkspaceWriteBack } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/writeback_pb";
+import { WorkspaceWriteBackPhase } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/writeback_pb";
+import { cn } from "@stigmer/theme";
+
+export interface WriteBackCardProps {
+  /** The workspace write-back outcome to render. */
+  readonly writeBack: WorkspaceWriteBack;
+  /** Additional CSS classes for the root element. */
+  readonly className?: string;
+}
+
+/**
+ * Renders a single workspace write-back outcome as a compact card.
+ *
+ * Shows the workspace entry name, branch, diff summary, phase
+ * indicator, and a "View PR" link when the pull request was
+ * successfully created. On failure, displays the error message.
+ *
+ * Themed via standard semantic tokens — no hardcoded colors, no
+ * Console dependencies. Embedders can theme this card through
+ * their Tailwind/CSS configuration.
+ *
+ * @example
+ * ```tsx
+ * const { writeBacks } = useWorkspaceWriteBacks(execution);
+ *
+ * {writeBacks.map((wb) => (
+ *   <WriteBackCard
+ *     key={wb.workspaceEntryName}
+ *     writeBack={wb}
+ *   />
+ * ))}
+ * ```
+ *
+ * @see useWorkspaceWriteBacks — extracts write-back data from an execution
+ */
+export function WriteBackCard({ writeBack, className }: WriteBackCardProps) {
+  const isFailed =
+    writeBack.phase === WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_FAILED;
+  const hasPR = !!writeBack.pullRequestUrl;
+
+  return (
+    <div
+      role="article"
+      aria-label={`Write-back: ${writeBack.workspaceEntryName}`}
+      className={cn(
+        "rounded-md border p-3",
+        isFailed ? "border-destructive/40" : "border-border",
+        className,
+      )}
+    >
+      {/* Header: icon + workspace name + phase badge */}
+      <div className="flex items-start gap-2">
+        <span className="mt-0.5 shrink-0 text-muted-foreground">
+          <GitBranchIcon />
+        </span>
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <span className="truncate text-sm font-medium text-foreground">
+              {writeBack.workspaceEntryName}
+            </span>
+            <PhaseBadge phase={writeBack.phase} />
+          </div>
+          {writeBack.branchName && (
+            <div className="mt-0.5 truncate font-mono text-xs text-muted-foreground">
+              {writeBack.branchName}
+              {writeBack.baseBranch && (
+                <span className="text-muted-foreground/60">
+                  {" \u2190 "}
+                  {writeBack.baseBranch}
+                </span>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Diff summary */}
+      {writeBack.diffSummary && (
+        <div className="mt-1.5 whitespace-pre-wrap font-mono text-xs text-muted-foreground">
+          {writeBack.diffSummary}
+        </div>
+      )}
+
+      {/* Error message */}
+      {isFailed && writeBack.error && (
+        <div className="mt-1.5 rounded bg-destructive/10 px-2 py-1 text-xs text-destructive">
+          {writeBack.error}
+        </div>
+      )}
+
+      {/* PR link */}
+      {hasPR && (
+        <div className="mt-2">
+          <a
+            href={writeBack.pullRequestUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={cn(
+              "inline-flex items-center gap-1 text-xs font-medium text-primary transition-colors hover:text-primary/80",
+              FOCUS_RING_CLASSES,
+            )}
+          >
+            <ExternalLinkIcon />
+            View PR #{writeBack.pullRequestNumber}
+          </a>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Phase badge
+// ---------------------------------------------------------------------------
+
+const PHASE_CONFIG: Record<
+  number,
+  { label: string; className: string }
+> = {
+  [WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_COMMITTED]: {
+    label: "Committed",
+    className: "bg-muted text-muted-foreground",
+  },
+  [WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_PUSHED]: {
+    label: "Pushed",
+    className: "bg-muted text-muted-foreground",
+  },
+  [WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_PR_CREATED]: {
+    label: "PR Created",
+    className: "bg-primary/10 text-primary",
+  },
+  [WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_FAILED]: {
+    label: "Failed",
+    className: "bg-destructive/10 text-destructive",
+  },
+};
+
+function PhaseBadge({ phase }: { phase: number }) {
+  const config = PHASE_CONFIG[phase];
+  if (!config) return null;
+
+  return (
+    <span
+      className={cn(
+        "inline-flex shrink-0 items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium leading-none",
+        config.className,
+      )}
+    >
+      {config.label}
+    </span>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// 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
+// ---------------------------------------------------------------------------
+
+function GitBranchIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="4" cy="3.5" r="1.5" />
+      <circle cx="4" cy="10.5" r="1.5" />
+      <circle cx="10" cy="5.5" r="1.5" />
+      <path d="M4 5V9" />
+      <path d="M10 7V5.5" />
+      <path d="M4 5C4 5 4 7 7 7C10 7 10 5.5 10 5.5" />
+    </svg>
+  );
+}
+
+function ExternalLinkIcon() {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="shrink-0"
+      aria-hidden="true"
+    >
+      <path d="M9 3L3 9" />
+      <path d="M5 3H9V7" />
+      <path d="M9 8V10H2V3H4" />
+    </svg>
+  );
+}

package/src/execution/WriteBacksWidget.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
+import { cn } from "@stigmer/theme";
+import { useSessionWriteBacks } from "../session/useSessionWriteBacks";
+import { WriteBackCard } from "./WriteBackCard";
+
+export interface WriteBacksWidgetProps {
+  /**
+   * All executions for the current session — both completed and
+   * actively streaming.  The widget aggregates write-backs across
+   * every execution, deduplicates by `workspace_entry_name` (latest
+   * wins), and sorts alphabetically.
+   *
+   * Renders nothing when the list is empty or no execution has
+   * write-backs.
+   */
+  readonly executions: readonly AgentExecution[];
+  /** Additional CSS classes for the root element. */
+  readonly className?: string;
+}
+
+/**
+ * Right-sidebar widget that surfaces pull requests created by the
+ * platform's incremental git write-back workflow.
+ *
+ * Write-backs from multiple executions are aggregated and
+ * deduplicated by `workspace_entry_name` (latest execution wins),
+ * presenting the user with a flat list of PRs — one per workspace
+ * entry.
+ *
+ * Returns `null` when no execution has write-backs, matching the
+ * conditional-render pattern of {@link ArtifactsWidget} and
+ * {@link ExecutionProgress}.
+ *
+ * All visual properties flow through `--stgm-*` tokens.  Zero
+ * Console dependencies.
+ *
+ * @example
+ * ```tsx
+ * const conv = useSessionConversation(sessionId, org);
+ *
+ * <WriteBacksWidget
+ *   executions={[
+ *     ...conv.completedExecutions,
+ *     ...(conv.activeStreamExecution ? [conv.activeStreamExecution] : []),
+ *   ]}
+ * />
+ * ```
+ *
+ * @see {@link WriteBackCard} — compact card per write-back
+ * @see {@link useSessionWriteBacks} — headless session-level write-back aggregation hook
+ * @see {@link useWorkspaceWriteBacks} — headless single-execution write-back extraction hook
+ */
+export function WriteBacksWidget({
+  executions,
+  className,
+}: WriteBacksWidgetProps) {
+  const { writeBacks, hasWriteBacks, writeBackCount } =
+    useSessionWriteBacks(executions);
+
+  if (!hasWriteBacks) return null;
+
+  return (
+    <section aria-label="Pull Requests" className={cn(className)}>
+      <div className="mb-2 flex items-center gap-2">
+        <h3 className="text-sm font-medium text-foreground">Pull Requests</h3>
+        <span className="inline-flex min-w-[1.25rem] items-center justify-center rounded-full bg-muted px-1.5 text-xs tabular-nums text-muted-foreground">
+          {writeBackCount}
+        </span>
+      </div>
+
+      <div role="list" className="space-y-2">
+        {writeBacks.map((entry) => (
+          <div key={entry.writeBack.workspaceEntryName} role="listitem">
+            <WriteBackCard writeBack={entry.writeBack} />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/src/execution/__tests__/file-path-resolver.test.ts

@@ -0,0 +1,295 @@
+import { describe, it, expect } from "vitest";
+import { create } from "@bufbuild/protobuf";
+import {
+  WorkspaceEntrySchema,
+  WorkspaceSourceSchema,
+  GitRepoSourceSchema,
+  LocalPathSourceSchema,
+} from "@stigmer/protos/ai/stigmer/agentic/session/v1/workspace_pb";
+import type { WorkspaceEntry } from "@stigmer/protos/ai/stigmer/agentic/session/v1/workspace_pb";
+import {
+  classifyPath,
+  resolveGitBrowseUrl,
+  resolvePathAction,
+} from "../file-path-resolver";
+
+// ---------------------------------------------------------------------------
+// Factory helpers
+// ---------------------------------------------------------------------------
+
+function gitEntry(name: string, url: string, branch = "main"): WorkspaceEntry {
+  return create(WorkspaceEntrySchema, {
+    name,
+    source: create(WorkspaceSourceSchema, {
+      source: {
+        case: "gitRepo",
+        value: create(GitRepoSourceSchema, { url, branch, commit: "" }),
+      },
+    }),
+  });
+}
+
+function localEntry(name: string, path: string): WorkspaceEntry {
+  return create(WorkspaceEntrySchema, {
+    name,
+    source: create(WorkspaceSourceSchema, {
+      source: {
+        case: "localPath",
+        value: create(LocalPathSourceSchema, { path }),
+      },
+    }),
+  });
+}
+
+// ---------------------------------------------------------------------------
+// classifyPath
+// ---------------------------------------------------------------------------
+
+describe("classifyPath", () => {
+  it("classifies platform paths", () => {
+    expect(classifyPath(".stigmer/skills/foo.md")).toEqual({
+      kind: "platform",
+      subpath: "skills/foo.md",
+    });
+  });
+
+  it("classifies bare .stigmer directory", () => {
+    expect(classifyPath(".stigmer")).toEqual({
+      kind: "platform",
+      subpath: "",
+    });
+  });
+
+  it("strips leading slashes from platform paths", () => {
+    expect(classifyPath("/.stigmer/inputs/bar")).toEqual({
+      kind: "platform",
+      subpath: "inputs/bar",
+    });
+  });
+
+  it("classifies workspace paths", () => {
+    expect(classifyPath("src/main.go")).toEqual({
+      kind: "workspace",
+      remainder: "src/main.go",
+    });
+  });
+
+  it("strips leading slashes from workspace paths", () => {
+    expect(classifyPath("/src/main.go")).toEqual({
+      kind: "workspace",
+      remainder: "src/main.go",
+    });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// resolveGitBrowseUrl
+// ---------------------------------------------------------------------------
+
+describe("resolveGitBrowseUrl", () => {
+  it("constructs a correct GitHub blob URL", () => {
+    expect(
+      resolveGitBrowseUrl(
+        "https://github.com/acme/app.git",
+        "main",
+        "",
+        "src/index.ts",
+      ),
+    ).toBe("https://github.com/acme/app/blob/main/src/index.ts");
+  });
+
+  it("prefers commit over branch", () => {
+    expect(
+      resolveGitBrowseUrl(
+        "https://github.com/acme/app.git",
+        "main",
+        "abc123",
+        "README.md",
+      ),
+    ).toBe("https://github.com/acme/app/blob/abc123/README.md");
+  });
+
+  it("falls back to HEAD when both branch and commit are empty", () => {
+    expect(
+      resolveGitBrowseUrl(
+        "https://github.com/acme/app.git",
+        "",
+        "",
+        "README.md",
+      ),
+    ).toBe("https://github.com/acme/app/blob/HEAD/README.md");
+  });
+
+  it("returns null for non-GitHub hosts", () => {
+    expect(
+      resolveGitBrowseUrl(
+        "https://gitlab.com/acme/app.git",
+        "main",
+        "",
+        "src/main.go",
+      ),
+    ).toBeNull();
+  });
+
+  it("returns null for invalid URLs", () => {
+    expect(
+      resolveGitBrowseUrl("not-a-url", "main", "", "file.txt"),
+    ).toBeNull();
+  });
+
+  it("strips duplicate org/repo prefix from relPath", () => {
+    expect(
+      resolveGitBrowseUrl(
+        "https://github.com/plantonhq/agent-fleet.git",
+        "main",
+        "",
+        "plantonhq/agent-fleet/mcp-servers/mcp-server-planton.yaml",
+      ),
+    ).toBe(
+      "https://github.com/plantonhq/agent-fleet/blob/main/mcp-servers/mcp-server-planton.yaml",
+    );
+  });
+
+  it("does not strip when relPath shares a partial prefix", () => {
+    expect(
+      resolveGitBrowseUrl(
+        "https://github.com/acme/app.git",
+        "main",
+        "",
+        "acme/other-thing/file.txt",
+      ),
+    ).toBe("https://github.com/acme/app/blob/main/acme/other-thing/file.txt");
+  });
+
+  it("handles clone URLs without .git suffix", () => {
+    expect(
+      resolveGitBrowseUrl(
+        "https://github.com/acme/app",
+        "main",
+        "",
+        "src/lib.rs",
+      ),
+    ).toBe("https://github.com/acme/app/blob/main/src/lib.rs");
+  });
+});
+
+// ---------------------------------------------------------------------------
+// resolvePathAction — integration (exercises matchWorkspaceEntry internally)
+// ---------------------------------------------------------------------------
+
+describe("resolvePathAction", () => {
+  it("returns copy for empty path", () => {
+    const result = resolvePathAction("", []);
+    expect(result.action).toBe("copy");
+  });
+
+  it("returns copy for platform paths", () => {
+    const entries = [gitEntry("app", "https://github.com/acme/app.git")];
+    const result = resolvePathAction(".stigmer/skills/foo.md", entries);
+    expect(result.action).toBe("copy");
+  });
+
+  it("returns copy when no workspace entries", () => {
+    const result = resolvePathAction("src/main.go", []);
+    expect(result.action).toBe("copy");
+  });
+
+  describe("single git workspace entry", () => {
+    const entries = [
+      gitEntry("agent-fleet", "https://github.com/plantonhq/agent-fleet.git"),
+    ];
+
+    it("produces a GitHub link for a relative path", () => {
+      const result = resolvePathAction(
+        "mcp-servers/mcp-server-planton.yaml",
+        entries,
+      );
+      expect(result).toEqual({
+        action: "link",
+        url: "https://github.com/plantonhq/agent-fleet/blob/main/mcp-servers/mcp-server-planton.yaml",
+        tooltip: "Open on GitHub",
+      });
+    });
+  });
+
+  describe("multiple git workspace entries — first-segment match", () => {
+    const entries = [
+      gitEntry(
+        "mcp-server-planton",
+        "https://github.com/plantonhq/mcp-server-planton.git",
+      ),
+      gitEntry(
+        "agent-fleet",
+        "https://github.com/plantonhq/agent-fleet.git",
+      ),
+    ];
+
+    it("matches entry by first path segment and strips it", () => {
+      const result = resolvePathAction(
+        "agent-fleet/mcp-servers/mcp-server-planton.yaml",
+        entries,
+      );
+      expect(result).toEqual({
+        action: "link",
+        url: "https://github.com/plantonhq/agent-fleet/blob/main/mcp-servers/mcp-server-planton.yaml",
+        tooltip: "Open on GitHub",
+      });
+    });
+  });
+
+  describe("multiple git workspace entries — deep segment match (bug fix)", () => {
+    const entries = [
+      gitEntry(
+        "mcp-server-planton",
+        "https://github.com/plantonhq/mcp-server-planton.git",
+      ),
+      gitEntry(
+        "agent-fleet",
+        "https://github.com/plantonhq/agent-fleet.git",
+      ),
+    ];
+
+    it("matches entry by deeper segment when org prefix is present", () => {
+      const result = resolvePathAction(
+        "plantonhq/agent-fleet/mcp-servers/mcp-server-planton.yaml",
+        entries,
+      );
+      expect(result).toEqual({
+        action: "link",
+        url: "https://github.com/plantonhq/agent-fleet/blob/main/mcp-servers/mcp-server-planton.yaml",
+        tooltip: "Open on GitHub",
+      });
+    });
+  });
+
+  describe("fallback to first entry when no segment matches", () => {
+    const entries = [
+      gitEntry("my-app", "https://github.com/acme/my-app.git"),
+      gitEntry("my-lib", "https://github.com/acme/my-lib.git"),
+    ];
+
+    it("falls back to entries[0] with full path as relPath", () => {
+      const result = resolvePathAction("unknown/path/file.txt", entries);
+      expect(result).toEqual({
+        action: "link",
+        url: "https://github.com/acme/my-app/blob/main/unknown/path/file.txt",
+        tooltip: "Open on GitHub",
+      });
+    });
+  });
+
+  describe("local path workspace entry", () => {
+    const entries = [
+      localEntry("my-app", "/Users/dev/projects/my-app"),
+    ];
+
+    it("joins local path for copy action", () => {
+      const result = resolvePathAction("src/main.go", entries);
+      expect(result).toEqual({
+        action: "copy",
+        value: "/Users/dev/projects/my-app/src/main.go",
+        tooltip: "Copy path",
+      });
+    });
+  });
+});