= ({ message, authorLabel, t
{pendingToolCall ? (
<>
-
- {pendingToolCall.tool}
-
-
- {JSON.stringify(pendingToolCall.canonicalArgs, null, 2)}
-
+ {readable?.verb ? (
+
+ {t(readable.verb.key, readable.verb.vars)}
+ {pendingToolCall.tool}
+
+ ) : (
+ {pendingToolCall.tool}
+ )}
+ {/* Every pinned argument, relabelled but never dropped (toolCallView). */}
+ {readable && readable.rows.length > 0 && (
+
+ {readable.rows.map((row) => (
+
+
- {row.labelKey ? t(row.labelKey) : row.label}
+
-
+ {row.href
+ ? {row.value}
+ : row.value}
+
+
+ )}
+
+ {t('approvalCard.toolCall.exactArgs')}
+
+ {JSON.stringify(pendingToolCall.canonicalArgs, null, 2)}
+
+
) : isToolCall ? (
<>
diff --git a/frontend/src/v2/components/toolCallView.ts b/frontend/src/v2/components/toolCallView.ts
new file mode 100644
index 0000000000..b1f018d5c5
--- /dev/null
+++ b/frontend/src/v2/components/toolCallView.ts
@@ -0,0 +1,145 @@
+// A parked connector call, readable: the verb on the action line and every
+// pinned argument as a labelled row (demo plan must-have 6, Sam's "small
+// sub-UI for external connectors").
+//
+// The card is a consent surface, so this view may relabel and format, but it
+// never drops an argument: every key of `canonicalArgs` lands in a row (owner
+// and repo share one), and the exact JSON stays one click away beside it.
+// Rows are built from the server-pinned arguments only, never from the
+// agent's prose.
+
+export type ToolCallRowKind = 'text' | 'mono' | 'block';
+
+export interface ToolCallRow {
+ /** The canonical argument key(s) this row shows. */
+ keys: string[];
+ /** i18n key for the row label; absent for an argument with no known name. */
+ labelKey?: string;
+ /** The raw argument name, shown when there is no labelKey. */
+ label: string;
+ value: string;
+ kind: ToolCallRowKind;
+ /** A github.com link, built only from validated pinned values. */
+ href?: string;
+ /** The full value when `value` is shortened (a commit SHA). */
+ title?: string;
+}
+
+export interface ToolCallView {
+ verb: { key: string; vars: Record } | null;
+ rows: ToolCallRow[];
+}
+
+const VERB_KEYS: Record = {
+ 'github.merge_pull_request': 'approvalCard.toolCall.verb.mergePullRequest',
+ 'github.create_issue': 'approvalCard.toolCall.verb.createIssue',
+ 'github.comment_on_issue': 'approvalCard.toolCall.verb.commentOnIssue',
+ 'github.close_issue': 'approvalCard.toolCall.verb.closeIssue',
+};
+
+const LABEL_KEYS: Record = {
+ mergeMethod: 'approvalCard.toolCall.label.mergeMethod',
+ commitTitle: 'approvalCard.toolCall.label.commitTitle',
+ commitMessage: 'approvalCard.toolCall.label.commitMessage',
+ title: 'approvalCard.toolCall.label.title',
+ body: 'approvalCard.toolCall.label.body',
+ labels: 'approvalCard.toolCall.label.labels',
+};
+
+const BLOCK_KEYS = new Set(['body', 'commitMessage']);
+
+// A GitHub owner or repository name, as GitHub allows them. Anything else is
+// shown as text and never put in a URL.
+const GITHUB_SEGMENT = /^(?!\.{1,2}$)[A-Za-z0-9_.-]{1,100}$/;
+const COMMIT_SHA = /^[0-9a-f]{7,64}$/i;
+
+const asText = (value: unknown): string => {
+ if (typeof value === 'string') return value;
+ if (typeof value === 'number' || typeof value === 'boolean') return String(value);
+ return JSON.stringify(value ?? null);
+};
+
+const isPositiveInteger = (value: unknown): value is number => (
+ typeof value === 'number' && Number.isInteger(value) && value > 0
+);
+
+export const toolCallView = (tool: string, args: Record): ToolCallView => {
+ const rows: ToolCallRow[] = [];
+ const shown = new Set();
+ const isGithub = tool.startsWith('github.');
+ const { owner, repo } = args;
+ const repoBase = isGithub && typeof owner === 'string' && typeof repo === 'string'
+ && GITHUB_SEGMENT.test(owner) && GITHUB_SEGMENT.test(repo)
+ ? `https://github.com/${owner}/${repo}`
+ : undefined;
+
+ if (owner !== undefined || repo !== undefined) {
+ const keys = ['owner', 'repo'].filter((key) => key in args);
+ rows.push({
+ keys,
+ labelKey: 'approvalCard.toolCall.label.repository',
+ label: keys.join('/'),
+ value: [owner, repo].filter((part) => part !== undefined).map(asText).join('/'),
+ kind: 'text',
+ ...(repoBase ? { href: repoBase } : {}),
+ });
+ keys.forEach((key) => shown.add(key));
+ }
+
+ const numbered = (key: 'pullNumber' | 'issueNumber', path: 'pull' | 'issues', labelKey: string) => {
+ if (!(key in args)) return;
+ const raw = args[key];
+ rows.push({
+ keys: [key],
+ labelKey,
+ label: key,
+ value: isPositiveInteger(raw) ? `#${raw}` : asText(raw),
+ kind: 'text',
+ ...(repoBase && isPositiveInteger(raw) ? { href: `${repoBase}/${path}/${raw}` } : {}),
+ });
+ shown.add(key);
+ };
+ numbered('pullNumber', 'pull', 'approvalCard.toolCall.label.pullRequest');
+ numbered('issueNumber', 'issues', 'approvalCard.toolCall.label.issue');
+
+ if ('headSha' in args) {
+ const raw = args.headSha;
+ const sha = typeof raw === 'string' && COMMIT_SHA.test(raw) ? raw : null;
+ rows.push({
+ keys: ['headSha'],
+ labelKey: 'approvalCard.toolCall.label.head',
+ label: 'headSha',
+ value: sha ? sha.slice(0, 7) : asText(raw),
+ kind: 'mono',
+ ...(sha ? { title: sha } : {}),
+ ...(sha && repoBase ? { href: `${repoBase}/commit/${sha}` } : {}),
+ });
+ shown.add('headSha');
+ }
+
+ for (const [key, raw] of Object.entries(args)) {
+ if (shown.has(key)) continue;
+ const labelKey = Object.prototype.hasOwnProperty.call(LABEL_KEYS, key) ? LABEL_KEYS[key] : undefined;
+ const isLabels = key === 'labels' && Array.isArray(raw) && raw.every((label) => typeof label === 'string');
+ rows.push({
+ keys: [key],
+ ...(labelKey ? { labelKey } : {}),
+ label: key,
+ value: isLabels ? JSON.stringify(raw) : asText(raw),
+ kind: BLOCK_KEYS.has(key) && typeof raw === 'string'
+ ? 'block'
+ : (typeof raw === 'string' || isLabels ? 'text' : 'mono'),
+ });
+ }
+
+ const verbKey = Object.prototype.hasOwnProperty.call(VERB_KEYS, tool) ? VERB_KEYS[tool] : undefined;
+ const requiredNumber = tool === 'github.merge_pull_request' ? args.pullNumber
+ : (tool === 'github.comment_on_issue' || tool === 'github.close_issue' ? args.issueNumber : null);
+ const number = isPositiveInteger(requiredNumber) ? requiredNumber : null;
+ // A numbered verb with no valid number would read "#undefined"; fall back to the tool name.
+ const needsNumber = verbKey && verbKey !== VERB_KEYS['github.create_issue'];
+ const verb = verbKey && (!needsNumber || number !== null)
+ ? { key: verbKey, vars: number !== null ? { number: String(number) } : {} }
+ : null;
+ return { verb, rows };
+};
diff --git a/frontend/src/v2/v2.css b/frontend/src/v2/v2.css
index 6239cfedb7..75c2252e4f 100644
--- a/frontend/src/v2/v2.css
+++ b/frontend/src/v2/v2.css
@@ -9125,6 +9125,97 @@ body.modern-ui.v2-canvas {
overflow-x: auto;
}
+/* A readable connector call: the verb, then the tool's own name as meta. The
+ gap is a column gap, so a tool name that wraps onto its own line starts
+ flush left rather than indented (Cofounder at 390). */
+.v2-approval__action--tool {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: baseline;
+ column-gap: 8px;
+}
+
+/* The tool name wraps as one unit, so a narrow card never splits the verb from its number. */
+.v2-approval__tool-name {
+ white-space: nowrap;
+ font: 500 11.5px/1.4 var(--v2-font-mono);
+ color: var(--v2-text-muted);
+}
+
+/* A parked call's pinned arguments as rows (Signal rows grammar): a bordered
+ list with divider hairlines, the label in mono meta, the value in body. */
+.v2-approval__args {
+ margin: 0;
+ border: 1px solid var(--v2-border-soft);
+ border-radius: var(--v2-radius-sm);
+ display: flex;
+ flex-direction: column;
+}
+
+.v2-approval__arg {
+ display: grid;
+ grid-template-columns: minmax(96px, 28%) minmax(0, 1fr);
+ gap: 12px;
+ padding: 6px 10px;
+ border-top: 1px solid var(--v2-border-soft);
+}
+
+.v2-approval__arg:first-child {
+ border-top: 0;
+}
+
+.v2-approval__arg dt {
+ font: 500 11.5px/1.6 var(--v2-font-mono);
+ color: var(--v2-text-muted);
+ overflow-wrap: anywhere;
+}
+
+.v2-approval__arg dd {
+ margin: 0;
+ font-size: 13px;
+ line-height: 1.45;
+ color: var(--v2-text-primary);
+ overflow-wrap: anywhere;
+ min-width: 0;
+}
+
+.v2-approval__arg-value--mono {
+ font-family: var(--v2-font-mono);
+ font-size: 12.5px;
+}
+
+.v2-approval__arg-value--block {
+ white-space: pre-wrap;
+ max-height: 12em;
+ overflow-y: auto;
+}
+
+.v2-approval__arg dd a {
+ color: var(--v2-accent-text);
+ text-decoration: none;
+}
+
+.v2-approval__arg dd a:hover {
+ text-decoration: underline;
+}
+
+.v2-approval__exact summary {
+ font-size: 12px;
+ color: var(--v2-text-muted);
+ cursor: pointer;
+}
+
+.v2-approval__exact[open] summary {
+ margin-bottom: 6px;
+}
+
+@media (max-width: 480px) {
+ .v2-approval__arg {
+ grid-template-columns: minmax(0, 1fr);
+ gap: 2px;
+ }
+}
+
/* The agent's reason for asking, demoted below the action it belongs to. */
.v2-approval__pitch {
font-size: 13px;