feat(mcp) [split 6/8]: add Tools and Profiles UI foundation (#9561)

## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work > - Governed MCP access spans contracts, runtime enforcement, adapters, UI surfaces, and operator verification > - The parity reference PR #9534 is too large for effective automated or human review > - The feature therefore needs a linear stack whose individual diffs stay below the 100-file review limit > - This pull request is split 6/8 and focuses on UI API, shared components, and Tools/Profile surfaces > - The benefit is a standalone, testable review boundary while preserving byte-for-byte parity at the top of the stack ## Linked Issues or Issue Description - Related parity reference: #9534 - Problem: Operators need typed clients and administration surfaces that compile independently before navigation exposes them. - Proposed solution: Adds UI APIs, hooks, libraries, shared components, Tools/Profiles pages, and the plugin settings consumer required by the new company-scoped API. - Alternatives considered: keeping #9534 as one 403-file review, or rewriting the feature to manufacture seams; both were rejected in favor of path extraction plus compile-driven boundary moves. - Roadmap alignment: this advances the existing governed MCP/tool-access work already represented by #9534; it does not introduce a separate roadmap initiative. - Stack position: base branch is `pap10341-split/05-runtime-integration`. - Merge policy: merge bottom-up, in order, only after the complete eight-PR stack has been reviewed and the top-of-stack parity gate remains empty. - Requested review: UXDesigner sanity pass on Tools/Profile surfaces; Greptile on every PR. ## What Changed - Adds UI APIs, hooks, libraries, shared components, Tools/Profiles pages, and the plugin settings consumer required by the new company-scoped API. - Keeps this PR below 100 changed files and independently typecheckable. - Preserves the final tree from #9534 when combined with the other seven stack levels. ## Verification - `pnpm typecheck` - `pnpm check:token-gates` — all gates clean - Focused UI Vitest run with `NODE_ENV=test` — 28 files, 183 tests passed ## Risks - Large dead-code UI additions can drift from activation routes; PR 7 supplies the registration layer and top-level parity catches omissions. - Stack risk: merging out of order can expose incomplete layers; mitigate by following the documented bottom-up merge policy. - Parity risk: later edits to an intermediate branch can drift from #9534; mitigate by re-running the empty top-of-stack diff before merge. > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected — check the roadmap first. See `CONTRIBUTING.md`. ## Model Used - OpenAI Codex, exact model ID `gpt-5.4`; runtime-managed context window; medium reasoning with repository, shell, Git, GitHub CLI, and code-execution tools enabled. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] Internal references are omitted except the execution-plan link explicitly required for this coordinated split stack - [x] My branch name describes the change and contains no internal Paperclip ticket id or instance-derived details - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [ ] All Paperclip CI gates are green - [ ] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge ## Stack Coordination - Internal execution plan: [PAP-13874](/PAP/issues/PAP-13874#document-plan) - Parity reference: #9534 - Stack: #9556 → #9557 → #9558 → #9559 → #9560 → #9561 → #9562 → #9563 - Merge bottom-up only after full-stack review and an empty parity diff at #9563. ## UI Evidence QA captured these from the live Garden MCP split stack at 1440px and verified clean rendering: ![Profiles index](https://raw.githubusercontent.com/paperclipai/paperclip/ac72de3ec85feb14c5ec1ed0a3d39b29baa0abff/doc/screenshots/garden-mcp-split-stack/profiles-index.png) ![Profile wizard](https://raw.githubusercontent.com/paperclipai/paperclip/ac72de3ec85feb14c5ec1ed0a3d39b29baa0abff/doc/screenshots/garden-mcp-split-stack/profile-wizard.png) ![Policies](https://raw.githubusercontent.com/paperclipai/paperclip/ac72de3ec85feb14c5ec1ed0a3d39b29baa0abff/doc/screenshots/garden-mcp-split-stack/policies.png) --------- Co-authored-by: Paperclip <noreply@paperclip.ing>
2026-11-10 20:46:28 +01:00 · 2026-07-14 15:31:12 -05:00
1 parent 9c8adee48b
commit a116713b9a
@@ -3,8 +3,8 @@
 import { describe, expect, it } from "vitest";
 import { renderToStaticMarkup } from "react-dom/server";
 import { parseAcpxStdoutLine } from "@paperclipai/adapter-utils/acpx-engine/ui";
-import type { TranscriptEntry } from "../../adapters";
-import { buildTranscript, type RunLogChunk } from "../../adapters";
+import { buildTranscript, type RunLogChunk, type TranscriptEntry } from "../../adapters";
+import type { ToolRunDecision } from "@paperclipai/shared";
 import { ThemeProvider } from "../../context/ThemeContext";
 import { RunTranscriptView, normalizeTranscript } from "./RunTranscriptView";

@@ -207,6 +207,103 @@ describe("RunTranscriptView", () => {
    expect(html).not.toContain("result");
  });

+  it("links tool rows to pending governed action decisions", () => {
+    const invocationId = "11111111-1111-4111-8111-111111111111";
+    const actionRequestId = "22222222-2222-4222-8222-222222222222";
+    const decision: ToolRunDecision = {
+      invocation: {
+        id: invocationId,
+        companyId: "company-1",
+        idempotencyKey: null,
+        actorType: "agent",
+        actorId: "agent-1",
+        agentId: "agent-1",
+        issueId: "issue-1",
+        runId: "run-1",
+        applicationId: null,
+        connectionId: null,
+        catalogEntryId: null,
+        toolName: "send_email",
+        argumentsHash: "hash-1",
+        argumentsSummary: { summary: "{\"to\":\"redacted\"}" },
+        policyDecision: "require_approval",
+        matchedPolicyIds: [],
+        approvalState: "pending",
+        status: "awaiting_approval",
+        upstreamRequestId: null,
+        resultHash: null,
+        resultSummary: null,
+        resultSizeBytes: null,
+        resultArtifactId: null,
+        errorCode: null,
+        errorMessage: null,
+        startedAt: null,
+        completedAt: null,
+        createdAt: new Date("2026-03-12T00:00:00.000Z"),
+        updatedAt: new Date("2026-03-12T00:00:00.000Z"),
+      },
+      actionRequest: {
+        id: actionRequestId,
+        companyId: "company-1",
+        invocationId,
+        issueId: "issue-1",
+        interactionId: "33333333-3333-4333-8333-333333333333",
+        approvalId: null,
+        status: "pending",
+        canonicalArgumentsHash: "hash-1",
+        canonicalArgumentsSummary: { summary: "{\"to\":\"redacted\"}" },
+        signedArguments: null,
+        previewMarkdown: "Tool: `send_email`",
+        requestedByAgentId: "agent-1",
+        requestedByUserId: null,
+        resolvedByAgentId: null,
+        resolvedByUserId: null,
+        decidedByAgentId: null,
+        decidedByUserId: null,
+        decidedAt: null,
+        expiresAt: null,
+        resolvedAt: null,
+        createdAt: new Date("2026-03-12T00:00:00.000Z"),
+        updatedAt: new Date("2026-03-12T00:00:00.000Z"),
+      },
+      auditEvents: [],
+      latestAuditEvent: null,
+      decision: "require_approval",
+      outcome: "pending",
+      reasonCode: "requires_approval_policy",
+      denialReason: null,
+      pendingAction: {
+        actionRequestId,
+        issueId: "issue-1",
+        interactionId: "33333333-3333-4333-8333-333333333333",
+        approvalId: null,
+        status: "pending",
+        previewMarkdown: "Tool: `send_email`",
+      },
+    };
+
+    const html = renderToStaticMarkup(
+      <ThemeProvider>
+        <RunTranscriptView
+          density="compact"
+          entries={[
+            {
+              kind: "tool_call",
+              ts: "2026-03-12T00:00:00.000Z",
+              name: "send_email",
+              invocationId,
+              input: { to: "redacted@example.com" },
+            },
+          ]}
+          toolDecisions={[decision]}
+        />
+      </ThemeProvider>,
+    );
+
+    expect(html).toContain("Needs approval");
+    expect(html).toContain(`Action request ${actionRequestId.slice(0, 8)}`);
+  });
+
  it("windows large raw transcripts instead of rendering every entry at once", () => {
    const entries: TranscriptEntry[] = Array.from({ length: 500 }, (_, index) => ({
      kind: "stdout",