lael-labs/executor

executor/apps/web/src/app/globals.css+8−1

   }
 }
+@media (max-width: 768px) {
+  input,
+  textarea,
+  select {
+    font-size: 16px !important;
+  }
+}
 /* ── Shiki / Streamdown code block theme overrides ─────────────────────────── */
 /* Light mode: use shiki-light tokens */
 [style*="--shiki-light"] {
   margin: 0;
   padding: 0 0 0 1rem;
 }

executor/apps/web/src/components/app-shell.tsx+2−2

@@ -117,7 +117,7 @@ function RepoStarLink() { · 116 unmodified lines
117	href={EXECUTOR_REPO_URL}	117	href={EXECUTOR_REPO_URL}
118	target="_blank"	118	target="_blank"
119	rel="noreferrer"	119	rel="noreferrer"
120	className="group flex items-center justify-between px-1 py-1 text-[10px] uppercase tracking-[0.14em] text-muted-foreground transition-colors hover:text-foreground"	120	className="group flex items-center justify-between px-1 py-1 text-xs text-muted-foreground transition-colors hover:text-foreground"
121	>	121	>
122	<span className="flex items-center gap-1.5">	122	<span className="flex items-center gap-1.5">
123	<Github className="h-3.5 w-3.5" />	123	<Github className="h-3.5 w-3.5" />
@@ -134,7 +134,7 @@ function FeedbackLink() { · 10 unmodified lines
134	href={TWITTER_FEEDBACK_URL}	134	href={TWITTER_FEEDBACK_URL}
135	target="_blank"	135	target="_blank"
136	rel="noreferrer"	136	rel="noreferrer"
137	className="group flex items-center justify-between px-1 py-1 text-[10px] uppercase tracking-[0.14em] text-muted-foreground transition-colors hover:text-foreground"	137	className="group flex items-center justify-between px-1 py-1 text-xs text-muted-foreground transition-colors hover:text-foreground"
138	>	138	>
139	<span className="flex items-center gap-1.5">	139	<span className="flex items-center gap-1.5">
140	<MessageCircle className="h-3.5 w-3.5" />	140	<MessageCircle className="h-3.5 w-3.5" />

executor/apps/web/src/components/approvals/approvals-view.tsx+93−40

@@ -67,25 +67,25 @@ function ApprovalCard({ · 66 unmodified lines
67	);	67	);
68		68
69	return (	69	return (
70	<Card className="rounded-none bg-card/40 border-border/50 border-l-2 border-l-terminal-amber glow-amber">	70	<Card className="rounded-none border-border/50 border-l-2 border-l-primary/40 bg-card/40">
71	<CardContent className="p-4 space-y-3">	71	<CardContent className="p-4 space-y-3">
72	{/* Header */}	72	{/* Header */}
73	<div className="flex items-start justify-between gap-3">	73	<div className="flex items-start justify-between gap-3">
74	<div className="min-w-0">	74	<div className="min-w-0">
75	<div className="flex items-center gap-2">	75	<div className="flex items-center gap-2">
76	<ShieldCheck className="h-4 w-4 text-terminal-amber shrink-0" />	76	<ShieldCheck className="h-4 w-4 shrink-0 text-primary" />
77	<span className="text-sm font-mono font-medium text-foreground truncate">	77	<span className="truncate text-sm font-medium text-foreground">
78	{approval.toolPath}	78	{approval.toolPath}
79	</span>	79	</span>
80	</div>	80	</div>
81	<div className="flex items-center gap-2 mt-1 pl-6">	81	<div className="flex items-center gap-2 mt-1 pl-6">
82	<span className="text-[11px] text-muted-foreground">	82	<span className="text-xs text-muted-foreground">
83	Task: {approval.taskId}	83	Task: {approval.taskId}
84	</span>	84	</span>
85	<span className="text-[11px] text-muted-foreground">	85	<span className="text-xs text-muted-foreground">
86	·	86	·
87	</span>	87	</span>
88	<span className="text-[11px] text-muted-foreground">	88	<span className="text-xs text-muted-foreground">
89	{formatTimeAgo(approval.createdAt)}	89	{formatTimeAgo(approval.createdAt)}
90	</span>	90	</span>
91	</div>	91	</div>
@@ -106,7 +106,7 @@ function ApprovalCard({ · 14 unmodified lines
106	{/* Input */}	106	{/* Input */}
107	{inputDisplay && (	107	{inputDisplay && (
108	<div>	108	<div>
109	<span className="text-[10px] uppercase tracking-widest text-muted-foreground block mb-1.5">	109	<span className="mb-1.5 block text-xs font-medium text-muted-foreground">
110	Input	110	Input
111	</span>	111	</span>
112	<FormattedCodeBlock	112	<FormattedCodeBlock
@@ -124,7 +124,7 @@ function ApprovalCard({ · 11 unmodified lines
124	<Button	124	<Button
125	onClick={() => handleResolve("approved")}	125	onClick={() => handleResolve("approved")}
126	disabled={resolving !== null}	126	disabled={resolving !== null}
127	className="flex-1 bg-terminal-green/15 text-terminal-green border border-terminal-green/30 hover:bg-terminal-green/25 h-9"	127	className="h-9 flex-1 border border-primary/30 bg-primary/10 text-primary hover:bg-primary/20"
128	variant="outline"	128	variant="outline"
129	size="sm"	129	size="sm"
130	>	130	>
@@ -134,7 +134,7 @@ function ApprovalCard({ · 3 unmodified lines
134	<Button	134	<Button
135	onClick={() => handleResolve("denied")}	135	onClick={() => handleResolve("denied")}
136	disabled={resolving !== null}	136	disabled={resolving !== null}
137	className="flex-1 bg-terminal-red/15 text-terminal-red border border-terminal-red/30 hover:bg-terminal-red/25 h-9"	137	className="h-9 flex-1 border border-destructive/30 bg-destructive/10 text-destructive hover:bg-destructive/20"
138	variant="outline"	138	variant="outline"
139	size="sm"	139	size="sm"
140	>	140	>
@@ -158,13 +158,16 @@ export function ApprovalsView() { · 17 unmodified lines
158		158
159	if (sessionLoading) {	159	if (sessionLoading) {
160	return (	160	return (
161	<div className="p-4 md:p-6 lg:p-8 space-y-6">	161	<div className="flex h-full min-h-0 overflow-hidden bg-background">
162	<Skeleton className="h-8 w-48" />	162	<div className="w-72 shrink-0 border-r border-border/40 p-3 space-y-3">
163	<div className="space-y-4">	163	<Skeleton className="h-8 w-full" />
164	{Array.from({ length: 3 }).map((_, i) => (	164	{Array.from({ length: 3 }).map((_, i) => (
165	<Skeleton key={i} className="h-40" />	165	<Skeleton key={i} className="h-16" />
166	))}	166	))}
167	</div>	167	</div>
		168	<div className="flex-1 p-4">
		169	<Skeleton className="h-40" />
		170	</div>
168	</div>	171	</div>
169	);	172	);
170	}	173	}
@@ -172,40 +175,90 @@ export function ApprovalsView() { · 1 unmodified line
172	const count = approvals?.length ?? 0;	175	const count = approvals?.length ?? 0;
173		176
174	return (	177	return (
175	<div className="flex h-full min-h-0 flex-col p-4 md:p-6 lg:p-8">	178	<div className="flex h-full min-h-0 overflow-hidden bg-background">
176	{approvalsLoading ? (	179	{/* ── Left sidebar: approval list ── */}
177	<div className="space-y-4">	180	<aside className="flex h-full w-72 shrink-0 flex-col border-r border-border/40 bg-card/30 lg:w-80">
178	{Array.from({ length: 3 }).map((_, i) => (	181	{/* Sidebar header */}
179	<Skeleton key={i} className="h-40" />	182	<div className="shrink-0 border-b border-border/30 px-3 py-2.5">
180	))}	183	<div className="flex items-center gap-2">
		184	<ShieldCheck className="h-4 w-4 text-muted-foreground" />
		185	<h3 className="text-sm font-medium leading-none">Approvals</h3>
		186	</div>
		187	<p className="text-[10px] text-muted-foreground mt-1">
		188	{count} pending
		189	</p>
		190	</div>
		191
		192	{/* Approval items in sidebar */}
		193	<div className="flex-1 min-h-0 overflow-y-auto">
		194	{approvalsLoading ? (
		195	<div className="space-y-2 p-3">
		196	{Array.from({ length: 3 }).map((_, i) => (
		197	<Skeleton key={i} className="h-16" />
		198	))}
		199	</div>
		200	) : count === 0 ? (
		201	<div className="flex flex-col items-center justify-center py-16 gap-3 px-4">
		202	<div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
		203	<CheckCircle2 className="h-5 w-5 text-primary/60" />
		204	</div>
		205	<p className="text-xs text-muted-foreground text-center">No pending approvals</p>
		206	<p className="text-[10px] text-muted-foreground/60 text-center">
		207	Tool calls requiring approval will appear here
		208	</p>
		209	</div>
		210	) : (
		211	<div className="p-2 space-y-1">
		212	{(approvals ?? []).map((a: PendingApprovalRecord) => (
		213	<div
		214	key={a.id}
		215	className="rounded-md border border-border/40 bg-background/70 px-2.5 py-2 transition-colors hover:bg-accent/20"
		216	>
		217	<div className="flex items-center gap-2">
		218	<ShieldCheck className="h-3.5 w-3.5 shrink-0 text-primary" />
		219	<span className="text-xs font-medium truncate">{a.toolPath}</span>
		220	</div>
		221	<div className="flex items-center gap-2 mt-1 pl-5">
		222	<span className="text-[10px] text-muted-foreground truncate">
		223	{formatTimeAgo(a.createdAt)}
		224	</span>
		225	<TaskStatusBadge status={a.task.status} />
		226	</div>
		227	</div>
		228	))}
		229	</div>
		230	)}
181	</div>	231	</div>
182	) : count === 0 ? (	232	</aside>
183	<Card className="rounded-none bg-card/40 border-border/50 flex-1">	233
184	<CardContent className="flex flex-col items-center justify-center py-20 gap-3">	234	{/* ── Right content: full approval cards ── */}
185	<div className="h-12 w-12 rounded-full bg-terminal-green/10 flex items-center justify-center">	235	<div className="flex-1 min-w-0 max-h-screen overflow-y-auto bg-background/50">
186	<CheckCircle2 className="h-6 w-6 text-terminal-green/60" />	236	{approvalsLoading ? (
		237	<div className="p-4 space-y-4">
		238	{Array.from({ length: 3 }).map((_, i) => (
		239	<Skeleton key={i} className="h-40" />
		240	))}
		241	</div>
		242	) : count === 0 ? (
		243	<div className="flex h-full items-center justify-center">
		244	<div className="text-center space-y-2">
		245	<CheckCircle2 className="h-8 w-8 text-primary/40 mx-auto" />
		246	<p className="text-sm text-muted-foreground">All clear</p>
		247	<p className="text-[11px] text-muted-foreground/60">No approvals waiting for review</p>
187	</div>	248	</div>
188	<p className="text-sm text-muted-foreground">
189	No pending approvals
190	</p>
191	<p className="text-[11px] text-muted-foreground/60">
192	Tool calls requiring approval will appear here
193	</p>
194	</CardContent>
195	</Card>
196	) : (
197	<div className="flex min-h-0 flex-1 flex-col max-w-2xl">
198	<div className="mb-3 flex items-center gap-2 text-xs text-muted-foreground">
199	<Clock className="h-3.5 w-3.5" />
200	{count} pending approval{count !== 1 ? "s" : ""}
201	</div>	249	</div>
202	<div className="min-h-0 flex-1 space-y-4 overflow-y-auto pr-1">	250	) : (
		251	<div className="p-4 sm:p-6 space-y-4 max-w-3xl">
		252	<div className="flex items-center gap-2 text-xs text-muted-foreground mb-2">
		253	<Clock className="h-3.5 w-3.5" />
		254	{count} pending approval{count !== 1 ? "s" : ""}
		255	</div>
203	{(approvals ?? []).map((a: PendingApprovalRecord) => (	256	{(approvals ?? []).map((a: PendingApprovalRecord) => (
204	<ApprovalCard key={a.id} approval={a} />	257	<ApprovalCard key={a.id} approval={a} />
205	))}	258	))}
206	</div>	259	</div>
207	</div>	260	)}
208	)}	261	</div>
209	</div>	262	</div>
210	);	263	);
211	}	264	}

executor/apps/web/src/components/organization/members-view.tsx+34−19

 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { useSession } from "@/lib/session-context";
 import { convexApi } from "@/lib/convex-api";
 import type { Id } from "@executor/database/convex/_generated/dataModel";
               type="email"
               disabled={!canManageMembers || inviteState === "sending"}
             />
-            <select
+            <Select
-              className="h-9 rounded-md border border-input bg-background px-3 text-sm"
               value={inviteRole}
-              onChange={(event) => setInviteRole(event.target.value as Role)}
+              onValueChange={(value) => setInviteRole(value as Role)}
               disabled={!canManageMembers || inviteState === "sending"}
             >
-              {ROLE_OPTIONS.map((role) => (
+              <SelectTrigger className="h-9 min-w-40">
-                <option key={role} value={role}>
+                <SelectValue />
-                  {role}
+              </SelectTrigger>
-                </option>
+              <SelectContent>
-              ))}
+                {ROLE_OPTIONS.map((role) => (
-            </select>
+                  <SelectItem key={role} value={role}>
+                    {role}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
             <Button
               type="submit"
               disabled={!canManageMembers || inviteState === "sending" || inviteEmail.trim().length === 0}
                     <p className="text-xs text-muted-foreground">Status: {member.status}</p>
                   </div>
                   <div className="flex flex-wrap items-center gap-2">
-                    <select
+                    <Select
-                      className="h-8 rounded-md border border-input bg-background px-2 text-xs"
                       value={member.role}
                       disabled={!canManageMembers || busyMemberAccountId === member.accountId}
-                      onChange={async (event) => {
+                      onValueChange={async (value) => {
                         setBusyMemberAccountId(member.accountId);
                         try {
                           if (!typedOrganizationId) {
                           await updateRole({
                             organizationId: typedOrganizationId,
                             accountId: member.accountId,
-                            role: event.target.value as Role,
+                            role: value as Role,
                             sessionId: context?.sessionId ?? undefined,
                           });
                         } finally {
                         }
                       }}
                     >
-                      {ROLE_OPTIONS.map((role) => (
+                      <SelectTrigger className="h-8 min-w-36">
-                        <option key={role} value={role}>
+                        <SelectValue />
-                          {role}
+                      </SelectTrigger>
-                        </option>
+                      <SelectContent>
-                      ))}
+                        {ROLE_OPTIONS.map((role) => (
-                    </select>
+                          <SelectItem key={role} value={role}>
+                            {role}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
                     <Button
                       variant="outline"

executor/apps/web/src/components/session-info.tsx+2−2

@@ -96,7 +96,7 @@ export function SessionInfo() { · 95 unmodified lines
96	if (loading) {	96	if (loading) {
97	return (	97	return (
98	<div className="border-t border-border px-3 py-2">	98	<div className="border-t border-border px-3 py-2">
99	<span className="text-[11px] font-mono text-muted-foreground">Loading session...</span>	99	<span className="text-xs text-muted-foreground">Loading session...</span>
100	</div>	100	</div>
101	);	101	);
102	}	102	}
@@ -121,7 +121,7 @@ export function SessionInfo() { · 18 unmodified lines
121	referrerPolicy="no-referrer"	121	referrerPolicy="no-referrer"
122	/>	122	/>
123	) : (	123	) : (
124	<span className="h-6 w-6 rounded-full border border-border bg-muted text-[10px] font-mono text-muted-foreground flex items-center justify-center">	124	<span className="flex h-6 w-6 items-center justify-center rounded-full border border-border bg-muted text-xs text-muted-foreground">
125	{avatarInitial}	125	{avatarInitial}
126	</span>	126	</span>
127	)}	127	)}

executor/apps/web/src/components/status-badge.tsx+1−1

@@ -41,7 +41,7 @@ export function TaskStatusBadge({ status }: { status: TaskStatus }) { · 40 unmodified lines
41	return (	41	return (
42	<Badge	42	<Badge
43	variant="outline"	43	variant="outline"
44	className={cn("text-[10px] font-mono uppercase tracking-wider", config.className)}	44	className={cn("text-xs font-medium", config.className)}
45	>	45	>
46	{status === "running" && (	46	{status === "running" && (
47	<span className="inline-block h-1.5 w-1.5 rounded-full bg-current mr-1.5 pulse-dot" />	47	<span className="inline-block h-1.5 w-1.5 rounded-full bg-current mr-1.5 pulse-dot" />

executor/apps/web/src/components/tasks/task-composer.tsx+108−93

@@ -1,10 +1,9 @@
1	"use client";	1	"use client";
2		2
3	import { useEffect, useMemo, useRef, useState } from "react";	3	import { useCallback, useEffect, useMemo, useRef, useState } from "react";
4	import { Send } from "lucide-react";	4	import { Send } from "lucide-react";
5	import { useAction } from "convex/react";	5	import { useAction } from "convex/react";
6	import { toast } from "sonner";	6	import { toast } from "sonner";
7	import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
8	import { Button } from "@/components/ui/button";	7	import { Button } from "@/components/ui/button";
9	import { Input } from "@/components/ui/input";	8	import { Input } from "@/components/ui/input";
10	import { Label } from "@/components/ui/label";	9	import { Label } from "@/components/ui/label";
@@ -142,6 +141,8 @@ export function TaskComposer() { · 131 unmodified lines
142	: runtimeTargets[0]?.id ?? "";	141	: runtimeTargets[0]?.id ?? "";
143	const selectedRuntime = runtimeTargets.find((runtime) => runtime.id === effectiveRuntimeId);	142	const selectedRuntime = runtimeTargets.find((runtime) => runtime.id === effectiveRuntimeId);
144	const showRuntimeSelector = runtimeTargets.length > 1;	143	const showRuntimeSelector = runtimeTargets.length > 1;
		144	const isMac = useMemo(() => typeof navigator !== "undefined" && /Mac\|iPhone\|iPad\|iPod/.test(navigator.userAgent), []);
		145	const modKey = isMac ? "⌘" : "Ctrl";
145		146
146	useEffect(() => {	147	useEffect(() => {
147	const draft = readCodeDraftForWorkspace(storageWorkspaceId);	148	const draft = readCodeDraftForWorkspace(storageWorkspaceId);
@@ -178,7 +179,9 @@ export function TaskComposer() { · 30 unmodified lines
178	};	179	};
179	}, [codeDraftStorageKey]);	180	}, [codeDraftStorageKey]);
180		181
181	const handleSubmit = async () => {	182	const handleSubmitRef = useRef<(() => void) \| undefined>(undefined);
		183
		184	const handleSubmit = useCallback(async () => {
182	if (!context \|\| !code.trim()) return;	185	if (!context \|\| !code.trim()) return;
183	setSubmitting(true);	186	setSubmitting(true);
184	try {	187	try {
@@ -213,79 +216,91 @@ export function TaskComposer() { · 28 unmodified lines
213	} finally {	216	} finally {
214	setSubmitting(false);	217	setSubmitting(false);
215	}	218	}
216	};	219	}, [context, code, effectiveRuntimeId, timeoutMs, createTask, submitting]);
		220
		221	handleSubmitRef.current = handleSubmit;
		222
		223	useEffect(() => {
		224	const onKeyDown = (e: KeyboardEvent) => {
		225	if (e.key === "Enter" && (e.metaKey \|\| e.ctrlKey)) {
		226	e.preventDefault();
		227	handleSubmitRef.current?.();
		228	}
		229	};
		230	window.addEventListener("keydown", onKeyDown);
		231	return () => window.removeEventListener("keydown", onKeyDown);
		232	}, []);
217		233
218	return (	234	return (
219	<Card className="bg-card border-border">	235	<div className="flex h-full min-h-0 flex-col overflow-hidden bg-background">
220	<CardHeader className="pb-3">	236	{/* ── Toolbar ── */}
221	<CardTitle className="text-sm font-medium">Editor</CardTitle>	237	<div className="shrink-0 flex items-center justify-between gap-3 border-b border-border/40 px-4 py-2">
222	</CardHeader>	238	<div className="flex items-center gap-3">
223	<CardContent className="space-y-4">	239	<h3 className="text-sm font-medium">Editor</h3>
224	<div className="grid grid-cols-2 gap-3">	240	<span className="text-[10px] font-mono text-muted-foreground">
225	<div className="space-y-1.5">	241	{loadingTools
226	{showRuntimeSelector ? <Label className="text-xs text-muted-foreground">Runtime</Label> : null}	242	? "Loading tool inventory..."
227	{showRuntimeSelector ? (	243	: `${tools.length} tool${tools.length === 1 ? "" : "s"} loaded${typesUrl ? ", type defs ready" : ""}`}
228	<Select value={effectiveRuntimeId} onValueChange={setRuntimeId}>	244	</span>
229	<SelectTrigger className="h-8 text-xs font-mono bg-background">	245	</div>
230	<SelectValue />	246	<div className="flex items-center gap-3">
231	</SelectTrigger>	247	{showRuntimeSelector ? (
232	<SelectContent>	248	<Select value={effectiveRuntimeId} onValueChange={setRuntimeId}>
233	{runtimeTargets.map((r: RuntimeTargetDescriptor) => (	249	<SelectTrigger className="h-7 text-xs font-mono bg-background w-[160px]">
234	<SelectItem key={r.id} value={r.id} className="text-xs">	250	<SelectValue />
235	{r.label}	251	</SelectTrigger>
236	</SelectItem>	252	<SelectContent>
237	))}	253	{runtimeTargets.map((r: RuntimeTargetDescriptor) => (
238	</SelectContent>	254	<SelectItem key={r.id} value={r.id} className="text-xs">
239	</Select>	255	{r.label}
240	) : (	256	</SelectItem>
241	null	257	))}
242	)}	258	</SelectContent>
243	</div>	259	</Select>
244	<div className="space-y-1.5">	260	) : null}
245	<Label className="text-xs text-muted-foreground">	261	<div className="flex items-center gap-1.5">
246	Timeout (ms)	262	<Label className="text-[10px] text-muted-foreground shrink-0">Timeout</Label>
247	</Label>
248	<Input	263	<Input
249	type="number"	264	type="number"
250	value={timeoutMs}	265	value={timeoutMs}
251	onChange={(e) => setTimeoutMs(e.target.value)}	266	onChange={(e) => setTimeoutMs(e.target.value)}
252	className="h-8 text-xs font-mono bg-background"	267	className="h-7 text-xs font-mono bg-background w-[100px]"
253	/>	268	/>
254	</div>	269	</div>
		270	<Button
		271	onClick={handleSubmit}
		272	disabled={submitting \|\| !code.trim()}
		273	className="h-7 bg-primary text-primary-foreground hover:bg-primary/90 text-xs gap-1.5 px-3"
		274	size="sm"
		275	>
		276	<Send className="h-3 w-3" />
		277	{submitting ? "Executing..." : "Execute"}
		278	<kbd className="ml-1 pointer-events-none inline-flex items-center gap-0.5 rounded border border-primary-foreground/20 bg-primary-foreground/10 px-1 py-0.5 font-mono text-[10px] font-medium text-primary-foreground/70">
		279	{modKey}↵
		280	</kbd>
		281	</Button>
255	</div>	282	</div>
256	<div className="space-y-1.5">	283	</div>
257	<div className="flex items-center justify-between gap-2">	284
258	<Label className="text-xs text-muted-foreground">Code</Label>	285	{/* ── Main content area ── */}
259	<span className="text-[10px] font-mono text-muted-foreground">	286	<div className="flex flex-1 min-h-0 overflow-hidden">
260	{loadingTools	287	{/* Code editor - fills available space */}
261	? "Loading tool inventory..."	288	<div className="flex-1 min-w-0 min-h-0 flex flex-col" style={{ borderRight: lastExecution ? '1px solid hsl(var(--border) / 0.4)' : undefined }}>
262	: `${tools.length} tool${tools.length === 1 ? "" : "s"} loaded${typesUrl ? ", type defs ready" : ""}`}	289	<CodeEditor
263	</span>	290	value={code}
264	</div>	291	onChange={handleCodeChange}
265	<div className="rounded-md border border-border">	292	tools={tools}
266	<CodeEditor	293	typesUrl={typesUrl}
267	value={code}	294	stateStorageKey={editorViewStateStorageKey}
268	onChange={handleCodeChange}	295	className="h-full"
269	tools={tools}	296	height="100%"
270	typesUrl={typesUrl}	297	/>
271	stateStorageKey={editorViewStateStorageKey}
272	height="400px"
273	/>
274	</div>
275	</div>	298	</div>
276	<Button
277	onClick={handleSubmit}
278	disabled={submitting \|\| !code.trim()}
279	className="w-full bg-primary text-primary-foreground hover:bg-primary/90 h-9"
280	size="sm"
281	>
282	<Send className="h-3.5 w-3.5 mr-2" />
283	{submitting ? "Executing..." : "Execute Task"}
284	</Button>
285		299
		300	{/* Result panel - right side */}
286	{lastExecution && (	301	{lastExecution && (
287	<div className="space-y-2">	302	<div className="w-[400px] lg:w-[480px] shrink-0 flex flex-col min-h-0 overflow-hidden">
288	<div className="flex items-center justify-between gap-2">	303	<div className="shrink-0 flex items-center justify-between gap-2 border-b border-border/30 px-3 py-2">
289	<span className="text-[10px] uppercase tracking-widest text-muted-foreground">	304	<span className="text-[10px] uppercase tracking-widest text-muted-foreground">
290	Last execution	305	Last execution
291	</span>	306	</span>
@@ -293,36 +308,36 @@ export function TaskComposer() { · 1 unmodified line
293	{lastExecution.status} - {lastExecution.taskId}	308	{lastExecution.status} - {lastExecution.taskId}
294	</span>	309	</span>
295	</div>	310	</div>
296		311	<div className="flex-1 min-h-0 overflow-y-auto p-3 space-y-3">
297	{lastExecution.result !== undefined && (	312	{lastExecution.result !== undefined && (
298	<div>	313	<div>
299	<span className="text-[10px] uppercase tracking-widest text-terminal-green block mb-2">	314	<span className="text-[10px] uppercase tracking-widest text-terminal-green block mb-2">
300	Returned result	315	Returned result
301	</span>	316	</span>
302	<FormattedCodeBlock	317	<FormattedCodeBlock
303	content={lastExecution.result}	318	content={lastExecution.result}
304	language="json"	319	language="json"
305	className="min-h-40 max-h-[65vh] overflow-auto resize-y"	320	className="min-h-40 max-h-full overflow-auto resize-y"
306	/>	321	/>
307	</div>	322	</div>
308	)}	323	)}
309		324	{lastExecution.error && (
310	{lastExecution.error && (	325	<div>
311	<div>	326	<span className="text-[10px] uppercase tracking-widest text-terminal-red block mb-2">
312	<span className="text-[10px] uppercase tracking-widest text-terminal-red block mb-2">	327	Error
313	Error	328	</span>
314	</span>	329	<FormattedCodeBlock
315	<FormattedCodeBlock	330	content={lastExecution.error}
316	content={lastExecution.error}	331	language="text"
317	language="text"	332	tone="red"
318	tone="red"	333	className="min-h-32 max-h-full overflow-auto resize-y"
319	className="min-h-32 max-h-[50vh] overflow-auto resize-y"	334	/>
320	/>	335	</div>
321	</div>	336	)}
322	)}	337	</div>
323	</div>	338	</div>
324	)}	339	)}
325	</CardContent>	340	</div>
326	</Card>	341	</div>
327	);	342	);
328	}	343	}

executor/apps/web/src/components/tasks/task-detail.tsx+18−17

     <Card className="bg-card border-border">
       <CardHeader className="pb-3">
         <div className="flex items-center justify-between">
-          <CardTitle className="text-sm font-medium font-mono truncate pr-4">
+          <div className="min-w-0 pr-4">
-            {liveTask.id}
+            <CardTitle className="truncate text-sm font-semibold">Task details</CardTitle>
-          </CardTitle>
+            <p className="truncate text-xs text-muted-foreground">{liveTask.id}</p>
+          </div>
           <Button
             variant="ghost"
             size="icon"
         <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
           {[
             { label: "Status", value: <TaskStatusBadge status={liveTask.status} /> },
-            { label: "Runtime", value: <span className="font-mono text-xs">{runtimeLabel ?? liveTask.runtimeId}</span> },
+            { label: "Runtime", value: <span className="text-sm">{runtimeLabel ?? liveTask.runtimeId}</span> },
-            { label: "Duration", value: <span className="font-mono text-xs">{duration}</span> },
+            { label: "Duration", value: <span className="text-sm">{duration}</span> },
             {
               label: "Exit Code",
               value: (
-                <span className={cn("font-mono text-xs", liveTask.exitCode === 0 ? "text-terminal-green" : liveTask.exitCode ? "text-terminal-red" : "text-muted-foreground")}>
+                <span className={cn("text-sm", liveTask.exitCode === 0 ? "text-primary" : liveTask.exitCode ? "text-destructive" : "text-muted-foreground")}>
                   {liveTask.exitCode ?? "—"}
                 </span>
               ),
             },
           ].map((item) => (
             <div key={item.label}>
-              <span className="text-[10px] uppercase tracking-widest text-muted-foreground block mb-1">
+              <span className="mb-1 block text-xs font-medium text-muted-foreground">
                 {item.label}
               </span>
               {item.value}
             <Separator />
             <div className="space-y-2.5">
               <div className="flex items-center justify-between">
-                <span className="text-[10px] uppercase tracking-widest text-terminal-amber">
+                <span className="text-xs font-medium text-primary">
                   Pending approvals
                 </span>
-                <span className="text-[10px] font-mono bg-terminal-amber/10 text-terminal-amber px-1.5 py-0.5 rounded">
+                <span className="rounded bg-primary/10 px-1.5 py-0.5 text-xs text-primary">
                   {pendingApprovals.length}
                 </span>
               </div>
                 return (
                   <div
                     key={approval.id}
-                    className="rounded-md border border-terminal-amber/30 bg-terminal-amber/6 p-3 space-y-2"
+                    className="space-y-2 rounded-md border border-primary/20 bg-primary/5 p-3"
                   >
                     <div className="flex items-center justify-between gap-3">
                       <div className="min-w-0">
-                        <p className="text-xs font-mono text-foreground truncate">
+                        <p className="truncate text-sm font-medium text-foreground">
                           {approval.toolPath}
                         </p>
-                        <p className="text-[10px] text-muted-foreground">
+                        <p className="text-xs text-muted-foreground">
                           Requested {formatDate(approval.createdAt)}
                         </p>
                       </div>
                         <Button
                           variant="outline"
                           size="sm"
-                          className="h-7 text-[11px] border-terminal-green/30 text-terminal-green hover:bg-terminal-green/10"
+                          className="h-7 border-primary/30 bg-primary/10 text-primary hover:bg-primary/20"
                           disabled={resolvingApprovalId !== null}
                           onClick={() =>
                             void handleResolveApproval(
                         <Button
                           variant="outline"
                           size="sm"
-                          className="h-7 text-[11px] border-terminal-red/30 text-terminal-red hover:bg-terminal-red/10"
+                          className="h-7 border-destructive/30 bg-destructive/10 text-destructive hover:bg-destructive/20"
                           disabled={resolvingApprovalId !== null}
                           onClick={() =>
                             void handleResolveApproval(
         <Separator />
         <div>
-          <span className="text-[10px] uppercase tracking-widest text-muted-foreground block mb-2">
+          <span className="mb-2 block text-xs font-medium text-muted-foreground">
             Code
           </span>
           <FormattedCodeBlock
         {liveResult && (
           <div>
-            <span className="text-[10px] uppercase tracking-widest text-terminal-green block mb-2">
+            <span className="mb-2 block text-xs font-medium text-primary">
               Result
             </span>
             <FormattedCodeBlock
         {liveTask.error && (
           <div>
-            <span className="text-[10px] uppercase tracking-widest text-terminal-red block mb-2">
+            <span className="mb-2 block text-xs font-medium text-destructive">
               Error
             </span>
             <FormattedCodeBlock

executor/apps/web/src/components/tasks/task/list-item.tsx+3−3

@@ -34,15 +34,15 @@ export function TaskListItem({ task, selected, onClick, runtimeLabel = task.runt · 33 unmodified lines
34	>	34	>
35	<div className="flex-1 min-w-0">	35	<div className="flex-1 min-w-0">
36	<div className="flex items-center gap-2">	36	<div className="flex items-center gap-2">
37	<span className="text-xs font-mono text-foreground truncate">	37	<span className="truncate text-sm font-medium text-foreground">
38	{task.id}	38	{task.id}
39	</span>	39	</span>
40	</div>	40	</div>
41	<div className="flex items-center gap-2 mt-0.5">	41	<div className="flex items-center gap-2 mt-0.5">
42	<span className="text-[10px] font-mono text-muted-foreground">	42	<span className="text-xs text-muted-foreground">
43	{runtimeLabel}	43	{runtimeLabel}
44	</span>	44	</span>
45	<span className="text-[10px] text-muted-foreground">	45	<span className="text-xs text-muted-foreground">
46	{formatDate(task.createdAt)}	46	{formatDate(task.createdAt)}
47	</span>	47	</span>
48	</div>	48	</div>

executor/apps/web/src/components/tasks/tasks-view.tsx+77−70

@@ -4,7 +4,6 @@ import { useCallback } from "react"; · 3 unmodified lines
4	import { useQueryStates } from "nuqs";	4	import { useQueryStates } from "nuqs";
5	import { useNavigate } from "@/lib/router";	5	import { useNavigate } from "@/lib/router";
6	import { ShieldCheck } from "lucide-react";	6	import { ShieldCheck } from "lucide-react";
7	import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
8	import { Button } from "@/components/ui/button";	7	import { Button } from "@/components/ui/button";
9	import { Skeleton } from "@/components/ui/skeleton";	8	import { Skeleton } from "@/components/ui/skeleton";
10	import { TaskDetail } from "@/components/tasks/task-detail";	9	import { TaskDetail } from "@/components/tasks/task-detail";
@@ -59,83 +58,91 @@ export function TasksView() { · 48 unmodified lines
59		58
60	if (sessionLoading) {	59	if (sessionLoading) {
61	return (	60	return (
62	<div className="p-4 md:p-6 lg:p-8 space-y-6">	61	<div className="flex h-full min-h-0 overflow-hidden bg-background">
63	<Skeleton className="h-8 w-48" />	62	<div className="w-80 shrink-0 border-r border-border/40 p-3 space-y-3">
64	<Skeleton className="h-64" />	63	<Skeleton className="h-8 w-full" />
		64	{Array.from({ length: 4 }).map((_, i) => (
		65	<Skeleton key={i} className="h-14" />
		66	))}
		67	</div>
		68	<div className="flex-1 p-4">
		69	<Skeleton className="h-64" />
		70	</div>
65	</div>	71	</div>
66	);	72	);
67	}	73	}
68		74
69	return (	75	return (
70	<div className="flex h-full min-h-0 flex-col p-4 md:p-6 lg:p-8">	76	<div className="flex h-full min-h-0 overflow-hidden bg-background">
71	<div className="mb-4 flex items-center justify-end gap-2">	77	{/* ── Left sidebar: task list ── */}
72	<Button variant="outline" size="sm" className="h-8 text-xs" onClick={() => navigate("/approvals")}>	78	<aside className="flex h-full w-80 shrink-0 flex-col border-r border-border/40 bg-card/30 lg:w-[360px]">
73	<ShieldCheck className="h-3.5 w-3.5 mr-1.5" />	79	{/* Sidebar header */}
74	{pendingApprovals.length} pending	80	<div className="shrink-0 border-b border-border/30 px-3 py-2.5">
75	</Button>	81	<div className="flex items-center justify-between">
76	</div>	82	<div className="flex items-center gap-2">
77		83	<h3 className="text-sm font-medium leading-none">Tasks</h3>
78	<div className="flex min-h-0 flex-1 flex-col">	84	{tasks && (
79	<div className="grid h-full min-h-0 gap-6 lg:grid-cols-[minmax(360px,440px)_1fr]">	85	<span className="text-[10px] font-mono bg-muted text-muted-foreground px-1.5 py-0.5 rounded">
80	<Card className="rounded-none bg-card/40 border-border/50 min-h-0 flex flex-col">	86	{taskItems.length}
81	<CardHeader className="pb-3">	87	</span>
82	<CardTitle className="text-sm font-medium flex items-center gap-2">
83	Task History
84	{tasks && (
85	<span className="text-[10px] font-mono bg-muted text-muted-foreground px-1.5 py-0.5 rounded">
86	{taskItems.length}
87	</span>
88	)}
89	</CardTitle>
90	</CardHeader>
91	<CardContent className="pt-0 min-h-0 flex-1">
92	{tasksLoading ? (
93	<div className="space-y-2">
94	{Array.from({ length: 4 }).map((_, i) => (
95	<Skeleton key={i} className="h-14" />
96	))}
97	</div>
98	) : taskItems.length === 0 ? (
99	<div className="flex flex-col items-center justify-center py-12 text-sm text-muted-foreground gap-2">
100	<p>No tasks yet.</p>
101	</div>
102	) : (
103	<div className="h-full overflow-y-auto space-y-1 pr-1">
104	{taskItems.map((task: TaskRecord) => (
105	<TaskListItem
106	key={task.id}
107	task={task}
108	selected={task.id === selectedId}
109	runtimeLabel={getTaskRuntimeLabel(task.runtimeId, runtimeItems)}
110	onClick={() => selectTask(task.id)}
111	/>
112	))}
113	</div>
114	)}	88	)}
115	</CardContent>	89	</div>
116	</Card>	90	<Button variant="outline" size="sm" className="h-7 text-[10px] gap-1" onClick={() => navigate("/approvals")}>
117		91	<ShieldCheck className="h-3 w-3" />
118	<div className="min-h-0">	92	{pendingApprovals.length} pending
119	{selectedTask && context ? (	93	</Button>
120	<TaskDetail
121	task={selectedTask}
122	workspaceId={context.workspaceId}
123	sessionId={context?.sessionId}
124	runtimeLabel={getTaskRuntimeLabel(selectedTask.runtimeId, runtimeItems)}
125	pendingApprovals={selectedTaskApprovals}
126	onClose={() => selectTask(null)}
127	/>
128	) : (
129	<Card className="rounded-none bg-card/40 border-border/50 h-full">
130	<CardContent className="flex items-center justify-center py-24">
131	<p className="text-sm text-muted-foreground">
132	Select a task to view logs, output, and approval actions
133	</p>
134	</CardContent>
135	</Card>
136	)}
137	</div>	94	</div>
138	</div>	95	</div>
		96
		97	{/* Task list */}
		98	<div className="flex-1 min-h-0 overflow-y-auto">
		99	{tasksLoading ? (
		100	<div className="space-y-2 p-3">
		101	{Array.from({ length: 4 }).map((_, i) => (
		102	<Skeleton key={i} className="h-14" />
		103	))}
		104	</div>
		105	) : taskItems.length === 0 ? (
		106	<div className="flex flex-col items-center justify-center py-16 text-sm text-muted-foreground gap-2 px-4">
		107	<p>No tasks yet.</p>
		108	<p className="text-[11px] text-muted-foreground/60">
		109	Execute a task from the editor to see it here.
		110	</p>
		111	</div>
		112	) : (
		113	<div className="p-2 space-y-1">
		114	{taskItems.map((task: TaskRecord) => (
		115	<TaskListItem
		116	key={task.id}
		117	task={task}
		118	selected={task.id === selectedId}
		119	runtimeLabel={getTaskRuntimeLabel(task.runtimeId, runtimeItems)}
		120	onClick={() => selectTask(task.id)}
		121	/>
		122	))}
		123	</div>
		124	)}
		125	</div>
		126	</aside>
		127
		128	{/* ── Right content: task detail ── */}
		129	<div className="flex-1 min-w-0 max-h-screen overflow-y-auto bg-background/50">
		130	{selectedTask && context ? (
		131	<TaskDetail
		132	task={selectedTask}
		133	workspaceId={context.workspaceId}
		134	sessionId={context?.sessionId}
		135	runtimeLabel={getTaskRuntimeLabel(selectedTask.runtimeId, runtimeItems)}
		136	pendingApprovals={selectedTaskApprovals}
		137	onClose={() => selectTask(null)}
		138	/>
		139	) : (
		140	<div className="flex h-full items-center justify-center">
		141	<p className="text-sm text-muted-foreground">
		142	Select a task to view logs, output, and approval actions
		143	</p>
		144	</div>
		145	)}
139	</div>	146	</div>
140	</div>	147	</div>
141	);	148	);

executor/apps/web/src/components/tools/add/source-dialog.tsx+1−3

   trigger?: ReactNode;
 }) {
   const { context } = useSession();
-  const upsertToolSource = useMutation(convexApi.workspace.upsertToolSource);
+  const upsertToolSource = useAction(convexApi.workspace.upsertToolSource);
   const deleteToolSource = useMutation(convexApi.workspace.deleteToolSource);
-  const upsertCredential = useAction(convexApi.credentialsNode.upsertCredential);
   const previewOpenApiSourceUpgrade = useAction(convexApi.executorNode.previewOpenApiSourceUpgrade);
   const credentials = useQuery(
     convexApi.workspace.listCredentials,
         sourceToEdit,
         credentialsLoading,
         upsertToolSource,
-        upsertCredential,
         form: {
           name: form.name,
           endpoint: form.endpoint,

executor/apps/web/src/components/tools/add/source-submit.ts+36−44

@@ -1,4 +1,3 @@
1	import { sourceKeyForSource } from "@/lib/tools/source-helpers";
2	import type {	1	import type {
3	AnonymousContext,	2	AnonymousContext,
4	CredentialRecord,	3	CredentialRecord,
@@ -18,16 +17,12 @@ type UpsertToolSourceFn = (args: { · 13 unmodified lines
18	name: string;	17	name: string;
19	type: SourceType;	18	type: SourceType;
20	config: Record<string, unknown>;	19	config: Record<string, unknown>;
21	}) => Promise<unknown>;	20	credential?: {
22		21	id?: CredentialRecord["id"];
23	type UpsertCredentialFn = (args: {	22	scopeType?: CredentialScope;
24	id?: CredentialRecord["id"];	23	accountId?: AnonymousContext["accountId"];
25	workspaceId: AnonymousContext["workspaceId"];	24	secretJson: Record<string, unknown>;
26	sessionId: AnonymousContext["sessionId"];	25	};
27	scopeType?: CredentialScope;
28	sourceKey: string;
29	accountId?: AnonymousContext["accountId"];
30	secretJson: Record<string, unknown>;
31	}) => Promise<unknown>;	26	}) => Promise<unknown>;
32		27
33	type SaveFormSnapshot = {	28	type SaveFormSnapshot = {
@@ -63,46 +58,29 @@ export async function saveSourceWithCredentials({ · 29 unmodified lines
63	form,	58	form,
64	credentialsLoading,	59	credentialsLoading,
65	upsertToolSource,	60	upsertToolSource,
66	upsertCredential,
67	}: {	61	}: {
68	context: AnonymousContext;	62	context: AnonymousContext;
69	sourceToEdit?: ToolSourceRecord;	63	sourceToEdit?: ToolSourceRecord;
70	form: SaveFormSnapshot;	64	form: SaveFormSnapshot;
71	credentialsLoading: boolean;	65	credentialsLoading: boolean;
72	upsertToolSource: UpsertToolSourceFn;	66	upsertToolSource: UpsertToolSourceFn;
73	upsertCredential: UpsertCredentialFn;
74	}): Promise<{ source: ToolSourceRecord; connected: boolean }> {	67	}): Promise<{ source: ToolSourceRecord; connected: boolean }> {
75	const authConfig = form.type === "openapi" \|\| form.type === "graphql" \|\| form.type === "mcp"	68	const authConfig = form.type === "openapi" \|\| form.type === "graphql" \|\| form.type === "mcp"
76	? form.buildAuthConfig()	69	? form.buildAuthConfig()
77	: undefined;	70	: undefined;
78		71
79	const config = createCustomSourceConfig({
80	type: form.type,
81	endpoint: form.endpoint.trim(),
82	baseUrl: form.baseUrl,
83	auth: authConfig,
84	mcpTransport: form.mcpTransport,
85	accountId: context.accountId,
86	});
87
88	const created = await upsertToolSource({
89	...(sourceToEdit ? { id: sourceToEdit.id } : {}),
90	workspaceId: context.workspaceId,
91	sessionId: context.sessionId,
92	scopeType: form.scopeType,
93	name: form.name.trim(),
94	type: form.type,
95	config,
96	}) as ToolSourceRecord;
97
98	let linkedCredential = false;	72	let linkedCredential = false;
		73	let credentialPayload:
		74	\| {
		75	id?: CredentialRecord["id"];
		76	scopeType: CredentialScope;
		77	accountId?: AnonymousContext["accountId"];
		78	secretJson: Record<string, unknown>;
		79	}
		80	\| undefined;
99		81
100	if ((form.type === "openapi" \|\| form.type === "graphql" \|\| form.type === "mcp") && form.authType !== "none") {	82	if ((form.type === "openapi" \|\| form.type === "graphql" \|\| form.type === "mcp") && form.authType !== "none") {
101	const credentialScopeType = credentialScopeTypeForAuthScope(form.authScope, form.scopeType);	83	const credentialScopeType = credentialScopeTypeForAuthScope(form.authScope, form.scopeType);
102	const sourceKey = sourceKeyForSource(created);
103	if (!sourceKey) {
104	throw new Error("Failed to resolve source key for credentials");
105	}
106		84
107	if (form.authScope === "account" && !context.accountId) {	85	if (form.authScope === "account" && !context.accountId) {
108	throw new Error("Account credentials require an authenticated account");	86	throw new Error("Account credentials require an authenticated account");
@@ -119,30 +97,44 @@ export async function saveSourceWithCredentials({ · 10 unmodified lines
119	throw new Error(secret.error ?? "Credential values are required");	97	throw new Error(secret.error ?? "Credential values are required");
120	}	98	}
121		99
122	await upsertCredential({	100	credentialPayload = {
123	...(form.existingScopedCredential ? { id: form.existingScopedCredential.id } : {}),	101	...(form.existingScopedCredential ? { id: form.existingScopedCredential.id } : {}),
124	workspaceId: context.workspaceId,
125	sessionId: context.sessionId,
126	scopeType: credentialScopeType,	102	scopeType: credentialScopeType,
127	sourceKey,
128	...(credentialScopeType === "account" ? { accountId: context.accountId } : {}),	103	...(credentialScopeType === "account" ? { accountId: context.accountId } : {}),
129	secretJson: secret.value,	104	secretJson: secret.value,
130	});	105	};
131	linkedCredential = true;	106	linkedCredential = true;
132	} else if (form.existingScopedCredential) {	107	} else if (form.existingScopedCredential) {
133	if (!existingCredentialMatchesAuthType(form.existingScopedCredential, form.authType)) {	108	if (!existingCredentialMatchesAuthType(form.existingScopedCredential, form.authType)) {
134	// Existing credential doesn't match — save source without credentials.
135	linkedCredential = false;	109	linkedCredential = false;
136	} else {	110	} else {
137	linkedCredential = true;	111	linkedCredential = true;
138	}	112	}
139	} else {	113	} else {
140	// No credentials entered and none saved — save source without credentials.
141	// The caller will show a warning toast.
142	linkedCredential = false;	114	linkedCredential = false;
143	}	115	}
144	}	116	}
145		117
		118	const config = createCustomSourceConfig({
		119	type: form.type,
		120	endpoint: form.endpoint.trim(),
		121	baseUrl: form.baseUrl,
		122	auth: authConfig,
		123	mcpTransport: form.mcpTransport,
		124	accountId: context.accountId,
		125	});
		126
		127	const created = await upsertToolSource({
		128	...(sourceToEdit ? { id: sourceToEdit.id } : {}),
		129	workspaceId: context.workspaceId,
		130	sessionId: context.sessionId,
		131	scopeType: form.scopeType,
		132	name: form.name.trim(),
		133	type: form.type,
		134	config,
		135	...(credentialPayload ? { credential: credentialPayload } : {}),
		136	}) as ToolSourceRecord;
		137
146	return {	138	return {
147	source: created,	139	source: created,
148	connected: linkedCredential,	140	connected: linkedCredential,

executor/apps/web/src/components/tools/connection/form-dialog.tsx+19−15

 } from "@/lib/types";
 import {
   connectionDisplayName,
-  parseHeaderOverrideEntries,
+  parseAdditionalHeaderEntries,
-  parseHeaderOverrideRows,
+  parseAdditionalHeaderRows,
-  serializeHeaderOverrideRows,
+  serializeAdditionalHeaderRows,
-  type HeaderOverrideEntry,
+  type AdditionalHeaderEntry,
 } from "@/lib/credentials/source-helpers";
 import { sourceForCredentialKey } from "@/lib/tools/source-helpers";
 import { ConnectionAuthFields } from "./auth-fields";
   const { context, clientConfig } = useSession();
   const upsertCredential = useAction(convexApi.credentialsNode.upsertCredential);
   const [saving, setSaving] = useState(false);
-  const [headerRows, setHeaderRows] = useState<HeaderOverrideEntry[]>(() => parseHeaderOverrideEntries(""));
+  const [headerRows, setHeaderRows] = useState<AdditionalHeaderEntry[]>(() => parseAdditionalHeaderEntries(""));
   const {
     sourceKey,
     scopeType,
     apiKeyValue,
     basicUsername,
     basicPassword,
-    customHeadersText,
+    additionalHeadersText,
     sourceOptions,
     connectionOptions,
     compatibleConnectionOptions,
     setApiKeyValue,
     setBasicUsername,
     setBasicPassword,
-    setCustomHeadersText,
+    setAdditionalHeadersText,
     handleSourceKeyChange,
   } = useConnectionFormDialogForm({
     open,
       return;
     }
-    setHeaderRows(parseHeaderOverrideEntries(customHeadersText));
+    setHeaderRows(parseAdditionalHeaderEntries(additionalHeadersText));
-  }, [open, customHeadersText]);
+  }, [open, additionalHeadersText]);
   const handleSave = async () => {
     if (!context) {
       return;
     }
-    const parsedHeaders = parseHeaderOverrideRows(headerRows);
+    const parsedHeaders = parseAdditionalHeaderRows(headerRows);
     if (!parsedHeaders.value) {
-      toast.error(parsedHeaders.error ?? "Invalid header overrides");
+      toast.error(parsedHeaders.error ?? "Invalid additional headers");
       return;
     }
-    const serializedHeaders = serializeHeaderOverrideRows(headerRows);
+    const serializedHeaders = serializeAdditionalHeaderRows(headerRows);
-    setCustomHeadersText(serializedHeaders);
+    setAdditionalHeadersText(serializedHeaders);
     const linkExisting = !editing && connectionMode === "existing";
     if (linkExisting && !existingConnectionKey) {
       basicPassword,
       apiKeyValue,
       tokenValue,
-      parsedHeaders: parsedHeaders.value,
     });
     if (!secretResult.secretJson) {
         : scopeType === "organization"
           ? "organization"
           : "workspace";
+      const additionalHeaders = Object.entries(parsedHeaders.value).map(([name, value]) => ({
+        name,
+        value,
+      }));
       await upsertCredential({
         ...(editing ? { id: editing.id } : selectedExistingConnection ? { id: selectedExistingConnection.id } : {}),
         scopeType: credentialScopeType,
         ...(credentialScopeType === "account" ? { accountId: accountId.trim() as typeof context.accountId } : {}),
         secretJson: secretResult.secretJson,
+        additionalHeaders,
       });
       toast.success(connectionSuccessCopy(Boolean(editing), linkExisting));
     });
   };
-  const updateHeaderRow = (index: number, patch: Partial<HeaderOverrideEntry>) => {
+  const updateHeaderRow = (index: number, patch: Partial<AdditionalHeaderEntry>) => {
     setHeaderRows((current) =>
       current.map((entry, rowIndex) => {
         if (rowIndex !== index) {

executor/apps/web/src/components/tools/connection/form-panel.tsx+441−0

@@ -0,0 +1,441 @@
	1	"use client";
	2
	3	import { type ChangeEvent, useEffect, useState } from "react";
	4	import { useAction } from "convex/react";
	5	import { toast } from "sonner";
	6	import { Button } from "@/components/ui/button";
	7	import { Input } from "@/components/ui/input";
	8	import { Label } from "@/components/ui/label";
	9	import { Badge } from "@/components/ui/badge";
	10	import { Plus, Trash2, X } from "lucide-react";
	11	import {
	12	Select,
	13	SelectContent,
	14	SelectItem,
	15	SelectTrigger,
	16	SelectValue,
	17	} from "@/components/ui/select";
	18	import { useSession } from "@/lib/session-context";
	19	import { convexApi } from "@/lib/convex-api";
	20	import type {
	21	CredentialRecord,
	22	SourceAuthProfile,
	23	ToolSourceRecord,
	24	} from "@/lib/types";
	25	import {
	26	connectionDisplayName,
	27	parseAdditionalHeaderEntries,
	28	parseAdditionalHeaderRows,
	29	serializeAdditionalHeaderRows,
	30	type AdditionalHeaderEntry,
	31	} from "@/lib/credentials/source-helpers";
	32	import { sourceForCredentialKey } from "@/lib/tools/source-helpers";
	33	import { ConnectionAuthFields } from "./auth-fields";
	34	import { type ConnectionMode } from "./form/dialog-state";
	35	import { useConnectionFormDialogForm } from "./form/dialog-form";
	36	import {
	37	buildSecretJson,
	38	connectionSubmitCopy,
	39	connectionSuccessCopy,
	40	} from "./form-save";
	41
	42	export function ConnectionFormPanel({
	43	editing,
	44	initialSourceKey,
	45	sources,
	46	credentials,
	47	sourceAuthProfiles,
	48	loadingSourceNames = [],
	49	onClose,
	50	onSaved,
	51	}: {
	52	editing: CredentialRecord \| null;
	53	initialSourceKey?: string \| null;
	54	sources: ToolSourceRecord[];
	55	credentials: CredentialRecord[];
	56	sourceAuthProfiles: Record<string, SourceAuthProfile>;
	57	loadingSourceNames?: string[];
	58	onClose: () => void;
	59	onSaved?: () => void;
	60	}) {
	61	const { context, clientConfig } = useSession();
	62	const upsertCredential = useAction(convexApi.credentialsNode.upsertCredential);
	63	const [saving, setSaving] = useState(false);
	64	const [headerRows, setHeaderRows] = useState<AdditionalHeaderEntry[]>(() => parseAdditionalHeaderEntries(""));
	65	const {
	66	sourceKey,
	67	scopeType,
	68	scopePreset,
	69	scope,
	70	accountId,
	71	connectionMode,
	72	existingConnectionKey,
	73	tokenValue,
	74	apiKeyValue,
	75	basicUsername,
	76	basicPassword,
	77	additionalHeadersText,
	78	sourceOptions,
	79	connectionOptions,
	80	compatibleConnectionOptions,
	81	selectedAuth,
	82	authBadge,
	83	setScopePreset,
	84	setAccountId,
	85	setConnectionMode,
	86	setExistingConnectionKey,
	87	setTokenValue,
	88	setApiKeyValue,
	89	setBasicUsername,
	90	setBasicPassword,
	91	setAdditionalHeadersText,
	92	handleSourceKeyChange,
	93	} = useConnectionFormDialogForm({
	94	open: true,
	95	editing,
	96	initialSourceKey,
	97	sources,
	98	credentials,
	99	sourceAuthProfiles,
	100	accountIdFallback: context?.accountId,
	101	});
	102
	103	const storageCopy = clientConfig?.authProviderMode === "workos"
	104	? "Stored encrypted"
	105	: "Stored locally on this machine";
	106	const selectedSource = sourceForCredentialKey(sources, sourceKey);
	107	const selectedSourceName = selectedSource?.name;
	108	const authDetectionPending =
	109	!editing
	110	&& selectedAuth.type === "none"
	111	&& Boolean(selectedSource)
	112	&& Boolean(selectedSource?.type === "openapi" \|\| selectedSource?.type === "graphql")
	113	&& selectedSource?.config.auth === undefined
	114	&& (selectedSourceName ? loadingSourceNames.includes(selectedSourceName) : false);
	115	const detectedAuthLabel = authDetectionPending ? "Detecting..." : authBadge;
	116
	117	useEffect(() => {
	118	setHeaderRows(parseAdditionalHeaderEntries(additionalHeadersText));
	119	}, [additionalHeadersText]);
	120
	121	const handleSave = async () => {
	122	if (!context) {
	123	return;
	124	}
	125	if (!sourceKey.trim()) {
	126	toast.error("Choose an API source");
	127	return;
	128	}
	129	if (scope === "account" && !accountId.trim()) {
	130	toast.error("Account ID is required for personal credentials");
	131	return;
	132	}
	133
	134	const parsedHeaders = parseAdditionalHeaderRows(headerRows);
	135	if (!parsedHeaders.value) {
	136	toast.error(parsedHeaders.error ?? "Invalid additional headers");
	137	return;
	138	}
	139
	140	const serializedHeaders = serializeAdditionalHeaderRows(headerRows);
	141	setAdditionalHeadersText(serializedHeaders);
	142
	143	const linkExisting = !editing && connectionMode === "existing";
	144	if (linkExisting && !existingConnectionKey) {
	145	toast.error("Select saved credentials");
	146	return;
	147	}
	148	if (linkExisting && !compatibleConnectionOptions.some((connection) => connection.key === existingConnectionKey)) {
	149	toast.error("Selected credentials do not match this scope");
	150	return;
	151	}
	152	const selectedExistingConnection = linkExisting
	153	? compatibleConnectionOptions.find((connection) => connection.key === existingConnectionKey) ?? null
	154	: null;
	155
	156	if (selectedAuth.type === "none") {
	157	if (authDetectionPending) {
	158	toast.error("Still detecting auth from the API spec. Try again in a few seconds.");
	159	return;
	160	}
	161	toast.error("This source is currently set to no auth. Configure auth before adding a connection.");
	162	return;
	163	}
	164
	165	if (selectedAuth.type === "mixed" && !linkExisting && !editing) {
	166	toast.error("This API uses mixed auth and must reuse saved credentials");
	167	return;
	168	}
	169
	170	const secretResult = buildSecretJson({
	171	selectedAuthType: selectedAuth.type,
	172	linkExisting,
	173	editing: Boolean(editing),
	174	basicUsername,
	175	basicPassword,
	176	apiKeyValue,
	177	tokenValue,
	178	});
	179
	180	if (!secretResult.secretJson) {
	181	toast.error(secretResult.error ?? "Failed to prepare secret payload");
	182	return;
	183	}
	184
	185	setSaving(true);
	186	try {
	187	const credentialScopeType = scope === "account"
	188	? "account"
	189	: scopeType === "organization"
	190	? "organization"
	191	: "workspace";
	192	const additionalHeaders = Object.entries(parsedHeaders.value).map(([name, value]) => ({
	193	name,
	194	value,
	195	}));
	196
	197	await upsertCredential({
	198	...(editing ? { id: editing.id } : selectedExistingConnection ? { id: selectedExistingConnection.id } : {}),
	199	workspaceId: context.workspaceId,
	200	sessionId: context.sessionId,
	201	sourceKey: sourceKey.trim(),
	202	scopeType: credentialScopeType,
	203	...(credentialScopeType === "account" ? { accountId: accountId.trim() as typeof context.accountId } : {}),
	204	secretJson: secretResult.secretJson,
	205	additionalHeaders,
	206	});
	207
	208	toast.success(connectionSuccessCopy(Boolean(editing), linkExisting));
	209	onSaved?.();
	210	onClose();
	211	} catch (err) {
	212	toast.error(err instanceof Error ? err.message : "Failed to save connection");
	213	} finally {
	214	setSaving(false);
	215	}
	216	};
	217
	218	const addHeaderRow = () => {
	219	setHeaderRows((current) => [...current, { key: "", value: "" }]);
	220	};
	221
	222	const removeHeaderRow = (index: number) => {
	223	setHeaderRows((current) => {
	224	const next = current.filter((_, rowIndex) => rowIndex !== index);
	225	return next.length === 0 ? [{ key: "", value: "" }] : next;
	226	});
	227	};
	228
	229	const updateHeaderRow = (index: number, patch: Partial<AdditionalHeaderEntry>) => {
	230	setHeaderRows((current) =>
	231	current.map((entry, rowIndex) => {
	232	if (rowIndex !== index) {
	233	return entry;
	234	}
	235	return {
	236	...entry,
	237	...patch,
	238	};
	239	}),
	240	);
	241	};
	242
	243	return (
	244	<div className="flex h-full flex-col">
	245	{/* Panel header */}
	246	<div className="shrink-0 flex items-center justify-between gap-3 border-b border-border/30 px-4 py-2.5">
	247	<h3 className="text-sm font-medium">
	248	{editing ? "Update Connection" : "New Connection"}
	249	</h3>
	250	<Button variant="ghost" size="sm" className="h-7 w-7 p-0" onClick={onClose}>
	251	<X className="h-3.5 w-3.5" />
	252	</Button>
	253	</div>
	254
	255	{/* Form content */}
	256	<div className="flex-1 min-h-0 overflow-y-auto p-4 sm:p-5">
	257	<div className="max-w-lg space-y-4">
	258	<div className="space-y-1.5">
	259	<Label className="text-xs text-muted-foreground">API Source</Label>
	260	{sourceOptions.length > 0 ? (
	261	<Select value={sourceKey} onValueChange={handleSourceKeyChange}>
	262	<SelectTrigger className="h-8 text-xs bg-background">
	263	<SelectValue placeholder="Select a source" />
	264	</SelectTrigger>
	265	<SelectContent>
	266	{sourceOptions.map((entry) => (
	267	<SelectItem key={entry.key} value={entry.key} className="text-xs">
	268	{entry.label}
	269	</SelectItem>
	270	))}
	271	</SelectContent>
	272	</Select>
	273	) : (
	274	<Input
	275	value={sourceKey}
	276	onChange={(e) => handleSourceKeyChange(e.target.value)}
	277	placeholder="Enter source id"
	278	className="h-8 text-xs font-mono bg-background"
	279	/>
	280	)}
	281	</div>
	282
	283	<div className="rounded-md border border-border/70 bg-muted/30 px-2.5 py-2">
	284	<div className="flex items-center gap-2 flex-wrap">
	285	<span className="text-[11px] text-muted-foreground">Detected auth</span>
	286	<Badge variant="outline" className="text-[9px] font-mono uppercase tracking-wider">
	287	{detectedAuthLabel}
	288	</Badge>
	289	{selectedAuth.inferred && !authDetectionPending && (
	290	<Badge variant="outline" className="text-[9px] uppercase tracking-wider">
	291	inferred from spec
	292	</Badge>
	293	)}
	294	</div>
	295	{authDetectionPending && (
	296	<p className="text-[10px] text-muted-foreground mt-1">
	297	This spec is still loading. Auth settings will auto-fill once parsing completes.
	298	</p>
	299	)}
	300	{selectedAuth.type === "apiKey" && selectedAuth.header && (
	301	<p className="text-[10px] text-muted-foreground mt-1">
	302	API key header: <span className="font-mono">{selectedAuth.header}</span>
	303	</p>
	304	)}
	305	</div>
	306
	307	<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
	308	<div className="space-y-1.5">
	309	<Label className="text-xs text-muted-foreground">Scope</Label>
	310	<Select value={scopePreset} onValueChange={(value) => setScopePreset(value as "only_me" \| "workspace" \| "organization") }>
	311	<SelectTrigger className="h-8 text-xs bg-background">
	312	<SelectValue />
	313	</SelectTrigger>
	314	<SelectContent>
	315	<SelectItem value="only_me" className="text-xs">Only me</SelectItem>
	316	<SelectItem value="workspace" className="text-xs">Workspace</SelectItem>
	317	<SelectItem value="organization" className="text-xs">Organization</SelectItem>
	318	</SelectContent>
	319	</Select>
	320	</div>
	321	<div className="space-y-1.5">
	322	<Label className="text-xs text-muted-foreground">Storage</Label>
	323	<Input value={storageCopy} readOnly className="h-8 text-xs bg-background" />
	324	</div>
	325	</div>
	326
	327	{scopePreset === "only_me" && (
	328	<div className="space-y-1.5">
	329	<Label className="text-xs text-muted-foreground">Account ID</Label>
	330	<Input
	331	value={accountId}
	332	onChange={(e) => setAccountId(e.target.value)}
	333	placeholder="account_123"
	334	className="h-8 text-xs font-mono bg-background"
	335	/>
	336	</div>
	337	)}
	338
	339	{!editing && connectionOptions.length > 0 && (
	340	<div className="space-y-1.5">
	341	<Label className="text-xs text-muted-foreground">How to connect</Label>
	342	<Select value={connectionMode} onValueChange={(value) => setConnectionMode(value as ConnectionMode)}>
	343	<SelectTrigger className="h-8 text-xs bg-background">
	344	<SelectValue />
	345	</SelectTrigger>
	346	<SelectContent>
	347	<SelectItem value="new" className="text-xs">Enter new credentials</SelectItem>
	348	<SelectItem value="existing" className="text-xs">Reuse saved credentials</SelectItem>
	349	</SelectContent>
	350	</Select>
	351	</div>
	352	)}
	353
	354	{!editing && connectionMode === "existing" && (
	355	<div className="space-y-1.5">
	356	<Label className="text-xs text-muted-foreground">Saved Credentials</Label>
	357	<Select value={existingConnectionKey} onValueChange={setExistingConnectionKey}>
	358	<SelectTrigger className="h-8 text-xs bg-background">
	359	<SelectValue placeholder="Select saved credentials" />
	360	</SelectTrigger>
	361	<SelectContent>
	362	{compatibleConnectionOptions.map((connection) => (
	363	<SelectItem key={connection.key} value={connection.key} className="text-xs">
	364	{connectionDisplayName(sources, connection)} ({connection.sourceKeys.size} API{connection.sourceKeys.size === 1 ? "" : "s"})
	365	</SelectItem>
	366	))}
	367	</SelectContent>
	368	</Select>
	369	{compatibleConnectionOptions.length === 0 && (
	370	<p className="text-[10px] text-muted-foreground">No compatible saved credentials for this scope.</p>
	371	)}
	372	</div>
	373	)}
	374
	375	<ConnectionAuthFields
	376	editing={Boolean(editing)}
	377	connectionMode={connectionMode}
	378	selectedAuth={selectedAuth}
	379	tokenValue={tokenValue}
	380	apiKeyValue={apiKeyValue}
	381	basicUsername={basicUsername}
	382	basicPassword={basicPassword}
	383	onTokenValueChange={setTokenValue}
	384	onApiKeyValueChange={setApiKeyValue}
	385	onBasicUsernameChange={setBasicUsername}
	386	onBasicPasswordChange={setBasicPassword}
	387	/>
	388
	389	<div className="space-y-2">
	390	<div className="flex items-center justify-between gap-2">
	391	<Label className="text-xs text-muted-foreground">Extra Headers (optional)</Label>
	392	<Button type="button" variant="outline" size="sm" onClick={addHeaderRow} className="h-7 px-2 text-[11px]">
	393	<Plus className="h-3.5 w-3.5 mr-1.5" />
	394	Add header
	395	</Button>
	396	</div>
	397	<div className="space-y-2">
	398	{headerRows.map((headerRow, index) => (
	399	<div key={`${headerRow.key \|\| "header"}-${index}`} className="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] gap-2 items-start">
	400	<Input
	401	value={headerRow.key}
	402	onChange={(event: ChangeEvent<HTMLInputElement>) =>
	403	updateHeaderRow(index, { key: event.target.value })
	404	}
	405	placeholder="Header"
	406	className="h-8 text-xs font-mono bg-background"
	407	/>
	408	<Input
	409	value={headerRow.value}
	410	onChange={(event: ChangeEvent<HTMLInputElement>) =>
	411	updateHeaderRow(index, { value: event.target.value })
	412	}
	413	placeholder="Value"
	414	className="h-8 text-xs font-mono bg-background"
	415	/>
	416	<Button
	417	type="button"
	418	variant="outline"
	419	size="sm"
	420	className="h-8 px-2"
	421	disabled={headerRows.length === 1}
	422	onClick={() => void removeHeaderRow(index)}
	423	>
	424	<Trash2 className="h-3.5 w-3.5" />
	425	</Button>
	426	</div>
	427	))}
	428	</div>
	429	<p className="text-[10px] text-muted-foreground">
	430	Add one `Header` and `Value` pair per line.
	431	</p>
	432	</div>
	433
	434	<Button onClick={handleSave} disabled={saving \|\| authDetectionPending} className="w-full h-9" size="sm">
	435	{connectionSubmitCopy(Boolean(editing), saving, connectionMode)}
	436	</Button>
	437	</div>
	438	</div>
	439	</div>
	440	);
	441	}

executor/apps/web/src/components/tools/connection/form-save.ts+0−7

   basicPassword: string;
   apiKeyValue: string;
   tokenValue: string;
-  parsedHeaders: Record<string, string>;
 };
 export function buildSecretJson({
   basicPassword,
   apiKeyValue,
   tokenValue,
-  parsedHeaders,
 }: BuildSecretJsonParams): { secretJson?: Record<string, unknown>; error?: string } {
   const secretJson: Record<string, unknown> = {};
   if (!linkExisting) {
       }
     }
   }
-  if (Object.keys(parsedHeaders).length > 0) {
-    secretJson.__headers = parsedHeaders;
-  }
   if (Object.keys(secretJson).length === 0 && !editing && !linkExisting) {
     if (selectedAuthType === "basic") {
       return { error: "Username and password are required" };

executor/apps/web/src/components/tools/connection/form/dialog-form.ts+9−9

@@ -6,7 +6,7 @@ import type { · 5 unmodified lines
6	ToolSourceRecord,	6	ToolSourceRecord,
7	} from "@/lib/types";	7	} from "@/lib/types";
8	import {	8	import {
9	formatHeaderOverrides,	9	formatAdditionalHeaders,
10	sourceAuthForKey,	10	sourceAuthForKey,
11	} from "@/lib/credentials/source-helpers";	11	} from "@/lib/credentials/source-helpers";
12	import {	12	import {
@@ -40,7 +40,7 @@ type FormState = { · 27 unmodified lines
40	apiKeyValue: string;	40	apiKeyValue: string;
41	basicUsername: string;	41	basicUsername: string;
42	basicPassword: string;	42	basicPassword: string;
43	customHeadersText: string;	43	additionalHeadersText: string;
44	};	44	};
45		45
46	type SharingScope = "only_me" \| "workspace" \| "organization";	46	type SharingScope = "only_me" \| "workspace" \| "organization";
@@ -102,7 +102,7 @@ function initialFormState({ · 55 unmodified lines
102	apiKeyValue: "",	102	apiKeyValue: "",
103	basicUsername: "",	103	basicUsername: "",
104	basicPassword: "",	104	basicPassword: "",
105	customHeadersText: formatHeaderOverrides(editing.overridesJson),	105	additionalHeadersText: formatAdditionalHeaders(editing.additionalHeaders),
106	};	106	};
107	}	107	}
108		108
@@ -120,7 +120,7 @@ function initialFormState({ · 11 unmodified lines
120	apiKeyValue: "",	120	apiKeyValue: "",
121	basicUsername: "",	121	basicUsername: "",
122	basicPassword: "",	122	basicPassword: "",
123	customHeadersText: "",	123	additionalHeadersText: "",
124	};	124	};
125	}	125	}
126		126
@@ -157,7 +157,7 @@ export function useConnectionFormDialogForm({ · 30 unmodified lines
157	apiKeyValue,	157	apiKeyValue,
158	basicUsername,	158	basicUsername,
159	basicPassword,	159	basicPassword,
160	customHeadersText,	160	additionalHeadersText,
161	} = form;	161	} = form;
162	const compatibleConnectionOptions = useMemo(	162	const compatibleConnectionOptions = useMemo(
163	() => compatibleConnections(connectionOptions, scopeType, scope, accountId),	163	() => compatibleConnections(connectionOptions, scopeType, scope, accountId),
@@ -253,8 +253,8 @@ export function useConnectionFormDialogForm({ · 89 unmodified lines
253	dispatch({ type: "patch", patch: { basicPassword: nextBasicPassword } });	253	dispatch({ type: "patch", patch: { basicPassword: nextBasicPassword } });
254	};	254	};
255		255
256	const setCustomHeadersText = (nextCustomHeadersText: string) => {	256	const setAdditionalHeadersText = (nextAdditionalHeadersText: string) => {
257	dispatch({ type: "patch", patch: { customHeadersText: nextCustomHeadersText } });	257	dispatch({ type: "patch", patch: { additionalHeadersText: nextAdditionalHeadersText } });
258	};	258	};
259		259
260	return {	260	return {
@@ -269,7 +269,7 @@ export function useConnectionFormDialogForm({ · 8 unmodified lines
269	apiKeyValue,	269	apiKeyValue,
270	basicUsername,	270	basicUsername,
271	basicPassword,	271	basicPassword,
272	customHeadersText,	272	additionalHeadersText,
273	sourceOptions,	273	sourceOptions,
274	connectionOptions,	274	connectionOptions,
275	compatibleConnectionOptions,	275	compatibleConnectionOptions,
@@ -283,7 +283,7 @@ export function useConnectionFormDialogForm({ · 7 unmodified lines
283	setApiKeyValue,	283	setApiKeyValue,
284	setBasicUsername,	284	setBasicUsername,
285	setBasicPassword,	285	setBasicPassword,
286	setCustomHeadersText,	286	setAdditionalHeadersText,
287	handleSourceKeyChange,	287	handleSourceKeyChange,
288	};	288	};
289	}	289	}

executor/apps/web/src/components/tools/credentials.tsx+180−99

 "use client";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { KeyRound, Plus } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Skeleton } from "@/components/ui/skeleton";
-import { useSession } from "@/lib/session-context";
 import type {
   CredentialRecord,
+  SourceAuthProfile,
   ToolSourceScopeType,
   ToolSourceRecord,
 } from "@/lib/types";
 import {
   connectionDisplayName,
-  ownerScopeLabel,
-  providerLabel,
 } from "@/lib/credentials/source-helpers";
 import {
   sourceForCredentialKey,
 } from "@/lib/tools/source-helpers";
 import { SourceFavicon } from "./source-favicon";
+import { ConnectionFormPanel } from "./connection/form-panel";
+import { cn } from "@/lib/utils";
 type ConnectionScope = "account" | "workspace";
+type PanelState =
+  | { mode: "idle" }
+  | { mode: "create"; sourceKey?: string }
+  | { mode: "edit"; credential: CredentialRecord };
 export function CredentialsPanel({
   sources,
   credentials,
   loading,
-  onCreateConnection,
+  sourceAuthProfiles,
-  onEditConnection,
+  loadingSourceNames,
 }: {
   sources: ToolSourceRecord[];
   credentials: CredentialRecord[];
   loading: boolean;
-  onCreateConnection: (sourceKey?: string) => void;
+  sourceAuthProfiles: Record<string, SourceAuthProfile>;
-  onEditConnection: (credential: CredentialRecord) => void;
+  loadingSourceNames?: string[];
 }) {
-  const { clientConfig } = useSession();
+  const [panel, setPanel] = useState<PanelState>({ mode: "idle" });
-  const storageCopy = clientConfig?.authProviderMode === "workos"
-    ? "Stored encrypted"
-    : "Stored locally on this machine";
   const connectionOptions = useMemo(() => {
       const grouped = new Map<string, {
     return map;
   }, [credentials]);
+  const selectedConnectionKey = panel.mode === "edit"
+    ? (() => {
+        const scopeType = panel.credential.scopeType === "organization" ? "organization" : "workspace";
+        return `${scopeType}:${panel.credential.id}`;
+      })()
+    : null;
   return (
-    <section className="mx-auto flex h-full min-h-0 w-full max-w-6xl flex-col rounded-none border border-border/50 bg-card/30">
+    <section className="flex h-full min-h-0 w-full overflow-hidden bg-background">
-      <div className="flex items-center justify-between border-b border-border/40 px-4 py-3 sm:px-5">
+      {/* ── Left sidebar ── */}
-        <div className="flex items-center gap-2">
+      <aside className="flex h-full w-64 shrink-0 flex-col border-r border-border/40 bg-card/30 lg:w-72">
-          <div className="flex h-7 w-7 items-center justify-center border border-border/60 bg-background/80">
+        {/* Sidebar header */}
-            <KeyRound className="h-4 w-4 text-muted-foreground" />
+        <div className="shrink-0 border-b border-border/30 px-3 py-2.5">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <KeyRound className="h-4 w-4 text-muted-foreground" />
+              <h3 className="text-sm font-medium leading-none">Connections</h3>
+            </div>
+            <Button
+              size="sm"
+              variant="ghost"
+              className="h-7 w-7 p-0"
+              onClick={() => setPanel({ mode: "create" })}
+            >
+              <Plus className="h-3.5 w-3.5" />
+            </Button>
           </div>
-          <h2 className="text-sm font-medium">Connections</h2>
+          <p className="text-[10px] text-muted-foreground mt-1">
-        </div>
+            {connectionOptions.length} {connectionOptions.length === 1 ? "connection" : "connections"}
-        <div className="flex items-center gap-2">
+          </p>
-          <Badge variant="outline" className="h-5 px-2 text-[10px] font-mono uppercase tracking-wide text-muted-foreground">
-            {connectionOptions.length}
-          </Badge>
-          <Button size="sm" className="h-8 text-xs" onClick={() => onCreateConnection()}>
-            <Plus className="h-3.5 w-3.5 mr-1.5" />
-            Add Connection
-          </Button>
         </div>
-      </div>
-      <div className="min-h-0 flex-1 overflow-y-auto p-4 sm:p-5">
+        {/* Sidebar connection list */}
-        {loading ? (
+        <div className="flex-1 min-h-0 overflow-y-auto">
-          <div className="space-y-2">
+          {loading ? (
-            {Array.from({ length: 3 }).map((_, i) => (
+            <div className="space-y-2 p-3">
-              <Skeleton key={i} className="h-14" />
+              {Array.from({ length: 4 }).map((_, i) => (
-            ))}
+                <Skeleton key={i} className="h-12 rounded-md" />
-          </div>
+              ))}
-        ) : connectionOptions.length === 0 ? (
-          <div className="flex h-full min-h-[280px] flex-col items-center justify-center gap-2 border border-dashed border-border/50 bg-background/50">
-            <div className="flex h-10 w-10 items-center justify-center border border-border/60 bg-muted/40">
-              <KeyRound className="h-5 w-5 text-muted-foreground/50" />
             </div>
-            <p className="text-sm text-muted-foreground">No connections configured</p>
+          ) : connectionOptions.length === 0 ? (
-            <p className="text-[11px] text-muted-foreground/70 text-center max-w-md">
+            <div className="flex flex-col items-center gap-2.5 px-4 py-10">
-              Add a source, then create or link a reusable connection.
+              <div className="flex h-10 w-10 items-center justify-center border border-border/60 bg-muted/40">
-            </p>
+                <KeyRound className="h-5 w-5 text-muted-foreground/50" />
-          </div>
+              </div>
-        ) : (
+              <div className="text-center">
-          <div className="space-y-2">
+                <p className="text-xs text-muted-foreground">No connections</p>
-            {connectionOptions.map((connection) => {
+                <p className="text-[10px] text-muted-foreground/60 mt-0.5">
-              const representative = representativeCredentialByConnection.get(connection.key);
+                  Add a source, then create or link a reusable connection.
-              if (!representative) {
+                </p>
-                return null;
+              </div>
-              }
+              <Button
-              const firstSource = sourceForCredentialKey(sources, representative.sourceKey);
+                variant="outline"
-              return (
+                size="sm"
-                <div
+                className="h-7 text-[11px] gap-1 mt-1"
-                  key={connection.key}
+                onClick={() => setPanel({ mode: "create" })}
-                  className="group flex items-center gap-3 border border-border/50 bg-background/70 px-3 py-2.5 transition-colors hover:border-border hover:bg-accent/20"
+              >
-                  style={{ boxShadow: "inset 2px 0 0 0 color-mix(in oklch, var(--border) 70%, transparent)" }}
+                <Plus className="h-3 w-3" />
-                >
+                Add connection
-                  <div className="flex h-8 w-8 shrink-0 items-center justify-center border border-border/60 bg-muted/50 overflow-hidden">
+              </Button>
-                    {firstSource ? (
+            </div>
-                      <SourceFavicon
+          ) : (
-                        source={firstSource}
+            <div className="p-2 space-y-1">
-                        iconClassName="h-4 w-4 text-muted-foreground"
+              {connectionOptions.map((connection) => {
-                        imageClassName="w-5 h-5"
+                const representative = representativeCredentialByConnection.get(connection.key);
-                      />
+                if (!representative) {
-                    ) : (
+                  return null;
-                      <KeyRound className="h-4 w-4 text-muted-foreground" />
+                }
+                const firstSource = sourceForCredentialKey(sources, representative.sourceKey);
+                const isSelected = selectedConnectionKey === connection.key;
+                return (
+                  <button
+                    key={connection.key}
+                    type="button"
+                    onClick={() => setPanel({ mode: "edit", credential: representative })}
+                    className={cn(
+                      "group flex w-full items-center gap-2.5 rounded-md border px-2.5 py-2 text-left transition-colors",
+                      isSelected
+                        ? "border-primary/40 bg-primary/5"
+                        : "border-border/40 bg-background/70 hover:border-border hover:bg-accent/20",
                     )}
-                  </div>
+                  >
-                  <div className="flex-1 min-w-0">
+                    <div className="flex h-7 w-7 shrink-0 items-center justify-center border border-border/60 bg-muted/50 overflow-hidden rounded-sm">
-                    <div className="mb-1 flex items-center gap-1.5 flex-wrap">
+                      {firstSource ? (
-                      <span className="text-sm font-medium">{connectionDisplayName(sources, connection)}</span>
+                        <SourceFavicon
-                      <Badge variant="outline" className="text-[9px] font-mono uppercase tracking-wider">
+                          source={firstSource}
-                        {connection.scope}
+                          iconClassName="h-3.5 w-3.5 text-muted-foreground"
-                      </Badge>
+                          imageClassName="w-4 h-4"
-                      <Badge variant="outline" className="text-[9px] font-mono uppercase tracking-wider">
+                        />
-                        {ownerScopeLabel(connection.scopeType)}
+                      ) : (
-                      </Badge>
+                        <KeyRound className="h-3.5 w-3.5 text-muted-foreground" />
-                      <Badge variant="outline" className="text-[9px] font-mono uppercase tracking-wider">
+                      )}
-                        {providerLabel(connection.provider)}
+                    </div>
-                      </Badge>
+                    <div className="flex-1 min-w-0">
-                      {connection.scope === "account" && connection.accountId ? (
+                      <span className="text-xs font-medium truncate block">{connectionDisplayName(sources, connection)}</span>
-                        <span className="text-[10px] font-mono text-muted-foreground bg-muted px-1.5 py-0.5 rounded-sm">
+                      <div className="flex items-center gap-1 mt-0.5">
-                          {connection.accountId}
+                        <Badge variant="outline" className="text-[8px] px-1 py-0 font-mono uppercase tracking-wider">
+                          {connection.scope}
+                        </Badge>
+                        <span className="text-[9px] text-muted-foreground">
+                          {connection.sourceKeys.size} API{connection.sourceKeys.size === 1 ? "" : "s"}
                         </span>
-                      ) : null}
+                      </div>
                     </div>
-                    <p className="text-[11px] text-muted-foreground">
+                  </button>
-                      Linked to {connection.sourceKeys.size} API{connection.sourceKeys.size === 1 ? "" : "s"} - {storageCopy}
+                );
-                    </p>
+              })}
-                    <p className="mt-0.5 text-[11px] text-muted-foreground">
+            </div>
-                      Updated {new Date(connection.updatedAt).toLocaleString()}
+          )}
-                    </p>
+        </div>
-                  </div>
+      </aside>
+      {/* ── Right content panel ── */}
+      <div className="flex-1 min-w-0 max-h-screen overflow-hidden bg-background/50">
+        {panel.mode === "create" ? (
+          <ConnectionFormPanel
+            key="create"
+            editing={null}
+            initialSourceKey={panel.sourceKey}
+            sources={sources}
+            credentials={credentials}
+            sourceAuthProfiles={sourceAuthProfiles}
+            loadingSourceNames={loadingSourceNames}
+            onClose={() => setPanel({ mode: "idle" })}
+          />
+        ) : panel.mode === "edit" ? (
+          <ConnectionFormPanel
+            key={`edit-${panel.credential.id}`}
+            editing={panel.credential}
+            sources={sources}
+            credentials={credentials}
+            sourceAuthProfiles={sourceAuthProfiles}
+            loadingSourceNames={loadingSourceNames}
+            onClose={() => setPanel({ mode: "idle" })}
+          />
+        ) : (
+          <div className="flex h-full items-center justify-center">
+            <div className="text-center space-y-3 max-w-sm px-6">
+              <div className="flex h-12 w-12 mx-auto items-center justify-center border border-border/60 bg-muted/40 rounded-sm">
+                <KeyRound className="h-6 w-6 text-muted-foreground/40" />
+              </div>
+              {loading ? (
+                <p className="text-xs text-muted-foreground">Loading connections...</p>
+              ) : connectionOptions.length === 0 ? (
+                <>
+                  <p className="text-sm text-muted-foreground">No connections configured</p>
+                  <p className="text-[11px] text-muted-foreground/60">
+                    Add a source, then create or link a reusable connection to get started.
+                  </p>
                   <Button
-                    variant="outline"
                     size="sm"
-                    className="h-7 text-[11px] border-border/70 group-hover:border-border"
+                    className="h-8 text-xs gap-1.5 mt-2"
-                    onClick={() => onEditConnection(representative)}
+                    onClick={() => setPanel({ mode: "create" })}
                   >
-                    Edit
+                    <Plus className="h-3.5 w-3.5" />
+                    Add Connection
                   </Button>
-                </div>
+                </>
-              );
+              ) : (
-            })}
+                <>
+                  <p className="text-sm text-muted-foreground">
+                    {connectionOptions.length} {connectionOptions.length === 1 ? "connection" : "connections"} configured
+                  </p>
+                  <p className="text-[11px] text-muted-foreground/60">
+                    Select a connection from the sidebar to edit it, or add a new one.
+                  </p>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="h-8 text-xs gap-1.5 mt-2"
+                    onClick={() => setPanel({ mode: "create" })}
+                  >
+                    <Plus className="h-3.5 w-3.5" />
+                    Add Connection
+                  </Button>
+                </>
+              )}
+            </div>
           </div>
         )}
       </div>

executor/apps/web/src/components/tools/explorer-derived.ts+0−9

@@ -252,12 +252,3 @@ export function autoExpandedKeysForSearch( · 251 unmodified lines
252		252
253	return allGroupKeys;	253	return allGroupKeys;
254	}	254	}
255
256	export function countSelectedTools(
257	selectedKeys: Set<string>,
258	filteredTools: ToolDescriptor[],
259	): number {
260	return Array.from(selectedKeys).filter((key) =>
261	filteredTools.some((tool) => tool.path === key),
262	).length;
263	}

executor/apps/web/src/components/tools/explorer-groups.tsx+13−25

           <span
             className={cn(
-              "font-mono text-[13px] truncate",
+              "truncate text-sm",
               isSource
                 ? "font-semibold text-foreground"
                 : "font-medium text-foreground/90",
             {displayLabel}
           </span>
-          <span className="text-[10px] font-mono text-muted-foreground/60 ml-auto flex items-center gap-2 shrink-0">
+          <span className="ml-auto flex shrink-0 items-center gap-2 text-xs text-muted-foreground/70">
             {isSource && group.sourceType && (
-              <span className="uppercase tracking-wider opacity-70">
+              <span className="opacity-80">
                 {group.sourceType}
               </span>
             )}
   onToggle,
   focusedPath,
   focusedSource,
-  selectedKeys,
   onFocusTool,
-  onSelectTool,
   onSourceClick,
   source,
 }: {
   onToggle: (key: string) => void;
   focusedPath: string | null;
   focusedSource?: string | null;
-  selectedKeys: Set<string>;
   onFocusTool: (tool: ToolDescriptor) => void;
-  onSelectTool?: (path: string, e: React.MouseEvent) => void;
   onSourceClick?: (sourceName: string) => void;
   source?: ToolSourceRecord;
 }) {
             )}
           </div>
-          <span className="font-mono text-[11px] font-semibold text-foreground/90 truncate">
+          <span className="truncate text-xs font-semibold text-foreground/90">
             {displayLabel}
           </span>
-          <span className="text-[9px] font-mono text-muted-foreground/50 ml-auto flex items-center gap-1 shrink-0">
+          <span className="ml-auto flex shrink-0 items-center gap-1 text-xs text-muted-foreground/60">
             {isLoading ? (
               <Loader2 className="h-2.5 w-2.5 animate-spin" />
             ) : (
               )}
             </div>
-            <span className="font-mono text-[11px] font-medium text-foreground/80 truncate">
+            <span className="truncate text-xs font-medium text-foreground/80">
               {displayLabel}
             </span>
-            <span className="text-[9px] font-mono text-muted-foreground/50 ml-auto flex items-center gap-1 shrink-0">
+            <span className="ml-auto flex shrink-0 items-center gap-1 text-xs text-muted-foreground/60">
               {group.approvalCount > 0 && (
                 <span className="inline-flex items-center gap-0.5 text-terminal-amber">
                   <ShieldCheck className="h-2 w-2" />
                     onToggle={onToggle}
                     focusedPath={focusedPath}
                     focusedSource={focusedSource}
-                    selectedKeys={selectedKeys}
                     onFocusTool={onFocusTool}
-                    onSelectTool={onSelectTool}
                     onSourceClick={onSourceClick}
                   />
                 );
                   tool={child}
                   label={toolDisplayOperation(child.path)}
                   focused={child.path === focusedPath}
-                  selected={selectedKeys.has(child.path)}
                   onFocus={onFocusTool}
-                  onSelect={
-                    onSelectTool
-                      ? (e) => onSelectTool(child.path, e)
-                      : undefined
-                  }
                   depth={depth + 1}
                 />
               );
     <div className="w-52 shrink-0 border-r border-border/50 pr-0 hidden lg:block">
       <div className="px-3 pb-2 pt-1">
         <div className="flex items-center justify-between">
-          <p className="text-[10px] font-mono uppercase tracking-widest text-muted-foreground/50">
+          <p className="text-xs font-medium text-muted-foreground/70">
             Sources
           </p>
           {onRegenerate ? (
         </div>
         <p
           className={cn(
-            "mt-1 flex items-center gap-1 text-[10px] font-mono",
+            "mt-1 flex items-center gap-1 text-xs",
             inventoryStatus.tone === "loading"
               ? "text-terminal-amber/90"
               : inventoryStatus.tone === "error"
                     className="h-3 w-3 shrink-0 text-muted-foreground"
                   />
                 )}
-                <span className="font-mono font-medium truncate">{g.name}</span>
+                <span className="truncate font-medium">{g.name}</span>
-                <span className="ml-auto text-[10px] font-mono tabular-nums opacity-60 flex items-center gap-1">
+                <span className="ml-auto flex items-center gap-1 text-xs tabular-nums opacity-70">
                   {g.warningCount > 0 ? (
                     <span
                       className="inline-flex items-center gap-0.5 text-terminal-amber"
         {activeSource && activeSourceWarnings.length > 0 ? (
           <div className="mt-2 rounded-md border border-terminal-amber/30 bg-terminal-amber/5 px-2 py-2">
-            <p className="text-[10px] font-mono text-terminal-amber/90">
+            <p className="text-xs font-medium text-terminal-amber/90">
               {activeSourceWarnings.length} warning{activeSourceWarnings.length !== 1 ? "s" : ""}
             </p>
             <div className="mt-1.5 space-y-1">
               {activeSourceWarnings.map((warning, index) => (
-                <p key={`${activeSource}-${index}`} className="text-[10px] leading-4 text-muted-foreground">
+                <p key={`${activeSource}-${index}`} className="text-xs leading-4 text-muted-foreground">
                   {warning}
                 </p>
               ))}

executor/apps/web/src/components/tools/explorer-rows.tsx+1−34

   tool,
   label,
   focused,
-  selected,
   onFocus,
-  onSelect,
   depth = 0,
 }: {
   tool: ToolDescriptor;
   label: string;
   focused: boolean;
-  selected: boolean;
   onFocus: (tool: ToolDescriptor) => void;
-  onSelect?: (e: React.MouseEvent) => void;
   depth?: number;
 }) {
   const handleClick = useCallback(() => {
     <div
       onClick={handleClick}
       className={cn(
-        "flex items-center gap-1.5 px-2 py-1 cursor-pointer transition-colors group/item",
+        "flex items-center gap-1.5 px-2 py-1 cursor-pointer transition-colors",
         focused
           ? "bg-accent/50 border-l-2 border-l-primary"
           : "hover:bg-accent/20 border-l-2 border-l-transparent",
-        selected && !focused && "bg-primary/5",
       )}
       style={{ paddingLeft: `${depth * 14 + 8}px` }}
     >
-      {onSelect ? (
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            onSelect(e);
-          }}
-          className={cn(
-            "h-3.5 w-3.5 rounded border flex items-center justify-center shrink-0 transition-colors",
-            selected
-              ? "bg-primary border-primary text-primary-foreground"
-              : "border-border/60 opacity-0 group-hover/item:opacity-100",
-          )}
-        >
-          {selected && <Check className="h-2 w-2" />}
-        </button>
-      ) : null}
       <Zap className="h-2.5 w-2.5 text-primary/50 shrink-0" />
       <span
   prev.tool === next.tool &&
   prev.label === next.label &&
   prev.focused === next.focused &&
-  prev.selected === next.selected &&
   prev.depth === next.depth,
 );
 export function ToolListSidebar({
   tools,
   focusedPath,
-  selectedKeys,
   onFocusTool,
-  onSelectTool,
   loadingRows,
   hasMoreTools = false,
   loadingMoreTools = false,
 }: {
   tools: ToolDescriptor[];
   focusedPath: string | null;
-  selectedKeys: Set<string>;
   onFocusTool: (tool: ToolDescriptor) => void;
-  onSelectTool?: (path: string, e: React.MouseEvent) => void;
   loadingRows?: { source: string; count: number }[];
   hasMoreTools?: boolean;
   loadingMoreTools?: boolean;
               tool={tool}
               label={toolDisplayPath(tool.path)}
               focused={tool.path === focusedPath}
-              selected={selectedKeys.has(tool.path)}
               onFocus={onFocusTool}
-              onSelect={
-                onSelectTool
-                  ? (e) => onSelectTool(tool.path, e)
-                  : undefined
-              }
             />
           ))}

executor/apps/web/src/components/tools/explorer-toolbar.tsx+1−50

@@ -1,6 +1,5 @@
1	import {	1	import {
2	Search,	2	Search,
3	ShieldCheck,
4	Filter,	3	Filter,
5	Plus,	4	Plus,
6	X,	5	X,
@@ -29,13 +28,10 @@ interface ToolExplorerToolbarProps { · 22 unmodified lines
29	loadingInventory?: boolean;	28	loadingInventory?: boolean;
30	filterApproval: FilterApproval;	29	filterApproval: FilterApproval;
31	activeSource: string \| null;	30	activeSource: string \| null;
32	selectedToolCount: number;
33	onSearchChange: (value: string) => void;	31	onSearchChange: (value: string) => void;
34	onClearSearch: () => void;	32	onClearSearch: () => void;
35	onFilterApprovalChange: (filter: FilterApproval) => void;	33	onFilterApprovalChange: (filter: FilterApproval) => void;
36	onAddSource?: () => void;	34	onAddSource?: () => void;
37	onSelectAll: () => void;
38	onClearSelection: () => void;
39	}	35	}
40		36
41	export function ToolExplorerToolbar({	37	export function ToolExplorerToolbar({
@@ -43,18 +39,13 @@ export function ToolExplorerToolbar({ · 1 unmodified line
43	filteredToolCount,	39	filteredToolCount,
44	loadingInventory = false,	40	loadingInventory = false,
45	filterApproval,	41	filterApproval,
46	selectedToolCount,
47	onSearchChange,	42	onSearchChange,
48	onClearSearch,	43	onClearSearch,
49	onFilterApprovalChange,	44	onFilterApprovalChange,
50	onAddSource,	45	onAddSource,
51	onSelectAll,
52	onClearSelection,
53	}: ToolExplorerToolbarProps) {	46	}: ToolExplorerToolbarProps) {
54	const hasSelection = selectedToolCount > 0;
55
56	return (	47	return (
57	<div className="shrink-0 relative space-y-1.5">	48	<div className="shrink-0 space-y-1.5">
58	{/* Search — own row */}	49	{/* Search — own row */}
59	<div className="relative">	50	<div className="relative">
60	<Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground/50" />	51	<Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground/50" />
@@ -135,46 +126,6 @@ export function ToolExplorerToolbar({ · 74 unmodified lines
135	</Button>	126	</Button>
136	) : null}	127	) : null}
137	</div>	128	</div>
138
139	<div
140	className={cn(
141	"absolute inset-x-0 top-full mt-1 z-30 transition-opacity duration-150 pointer-events-none",
142	hasSelection ? "opacity-100 pointer-events-auto" : "opacity-0",
143	)}
144	aria-hidden={!hasSelection}
145	>
146	<div className="flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-primary/5 border border-primary/10">
147	<span className="text-[11px] font-mono text-primary">
148	{selectedToolCount} selected
149	</span>
150	<div className="flex-1" />
151	<Button
152	variant="ghost"
153	size="sm"
154	className="h-5 text-[10px] text-muted-foreground px-1.5"
155	onClick={onSelectAll}
156	>
157	All ({filteredToolCount})
158	</Button>
159	<Button
160	variant="ghost"
161	size="sm"
162	className="h-5 text-[10px] text-muted-foreground px-1.5"
163	onClick={onClearSelection}
164	>
165	Clear
166	</Button>
167	<div className="h-3 w-px bg-border/50" />
168	<Button
169	variant="outline"
170	size="sm"
171	className="h-5 text-[10px] border-terminal-amber/30 text-terminal-amber hover:bg-terminal-amber/10 px-1.5"
172	>
173	<ShieldCheck className="h-2.5 w-2.5 mr-0.5" />
174	Approval
175	</Button>
176	</div>
177	</div>
178	</div>	129	</div>
179	);	130	);
180	}	131	}

executor/apps/web/src/components/tools/explorer.tsx+1−66

 import type { SourceAuthProfile } from "@/lib/types";
 import {
   autoExpandedKeysForSearch,
-  countSelectedTools,
   filterToolsBySearch,
   filterToolsBySourceAndApproval,
   treeGroupsForView,
   type FilterApproval,
 } from "./explorer-derived";
-import { collectGroupKeys } from "@/lib/tool/explorer-grouping";
 import { sourceLabel } from "@/lib/tool/source-utils";
 import { traverseSchema } from "@/lib/tool/schema-traverse";
 import {
   searchValue: string;
   filterApprovalValue: FilterApproval;
   focusedToolPathValue: string | null;
-  selectedToolPathsValue: string[];
   focusedSourceNameValue: string | null;
   onSearchValueChange: (value: string) => void;
   onFilterApprovalValueChange: (filter: FilterApproval) => void;
   onFocusedToolPathChange: (toolPath: string | null) => void;
-  onSelectedToolPathsChange: (toolPaths: string[]) => void;
   onFocusedSourceNameChange: (sourceName: string | null) => void;
   onSourceAdded?: (source: ToolSourceRecord, options?: SourceAddedOptions) => void;
   sourceDialogMeta?: Record<string, SourceDialogMeta>;
   searchValue,
   filterApprovalValue,
   focusedToolPathValue,
-  selectedToolPathsValue,
   focusedSourceNameValue,
   onSearchValueChange,
   onFilterApprovalValueChange,
   onFocusedToolPathChange,
-  onSelectedToolPathsChange,
   onFocusedSourceNameChange,
   onSourceAdded,
   sourceDialogMeta,
   const searchInput = searchValue;
   const filterApproval = filterApprovalValue;
   const focusedToolPath = focusedToolPathValue;
-  const selectedKeys = useMemo(() => new Set(selectedToolPathsValue), [selectedToolPathsValue]);
   const focusedSourceName = focusedSourceNameValue;
   const search = useDeferredValue(searchInput);
     onFocusedToolPathChange(toolPath);
   }, [onFocusedToolPathChange]);
-  const setSelectedKeys = useCallback((next: Set<string>) => {
-    onSelectedToolPathsChange(Array.from(next));
-  }, [onSelectedToolPathsChange]);
   const setFocusedSourceName = useCallback((sourceName: string | null) => {
     onFocusedSourceNameChange(sourceName);
   }, [onFocusedSourceNameChange]);
     return filterToolsBySearch(filteredTools, search);
   }, [filteredTools, search]);
-  const selectedToolCount = useMemo(() => {
-    return countSelectedTools(selectedKeys, filteredTools);
-  }, [selectedKeys, filteredTools]);
   const sidebarExistingSourceNames = useMemo(() => {
     return existingSourceNames ?? new Set(visibleSources.map((source) => source.name));
   }, [existingSourceNames, visibleSources]);
     }
   }, [focusedSourceNameValue, formSource, sourceByName, setFocusedToolPath]);
-  const toggleSelectTool = useCallback(
-    (path: string, e: React.MouseEvent) => {
-      e.stopPropagation();
-      e.preventDefault();
-      const next = new Set(selectedKeys);
-      if (next.has(path)) {
-        next.delete(path);
-      } else {
-        next.add(path);
-      }
-      setSelectedKeys(next);
-    },
-    [selectedKeys, setSelectedKeys],
-  );
-  const clearSelection = useCallback(() => {
-    setSelectedKeys(new Set());
-  }, []);
-  const selectAll = useCallback(() => {
-    setSelectedKeys(new Set(filteredTools.map((t) => t.path)));
-  }, [filteredTools]);
   const maybeLoadToolDetails = useCallback(async (tool: ToolDescriptor, expanded: boolean) => {
     if (!expanded || !onLoadToolDetails) {
       return;
     });
   }, [searchedTools, loadingSources, visibleSources, sourceCounts, resolvedActiveSource]);
-  const [expandedKeys, setExpandedKeys] = useState<Set<string>>(() => {
+  const [expandedKeys, setExpandedKeys] = useState<Set<string>>(new Set());
-    // Start with all source-level groups expanded
-    const keys = new Set<string>();
-    for (const group of treeGroups) {
-      keys.add(group.key);
-    }
-    return keys;
-  });
   // Auto-expand all groups when search is active
   const searchAutoExpanded = useMemo(
   const effectiveExpandedKeys = searchAutoExpanded ?? expandedKeys;
-  // When new source groups appear, auto-expand them
-  useEffect(() => {
-    const allKeys = collectGroupKeys(treeGroups);
-    setExpandedKeys((prev) => {
-      const next = new Set(prev);
-      let changed = false;
-      for (const key of allKeys) {
-        if (key.startsWith("source:") && !key.includes(":ns:") && !next.has(key)) {
-          next.add(key);
-          changed = true;
-        }
-      }
-      return changed ? next : prev;
-    });
-  }, [treeGroups]);
   const toggleExpand = useCallback((key: string) => {
     setExpandedKeys((prev) => {
             loadingInventory={awaitingInitialInventory}
             filterApproval={filterApproval}
             activeSource={resolvedActiveSource}
-            selectedToolCount={selectedToolCount}
             onSearchChange={setSearchInput}
             onClearSearch={() => setSearchInput("")}
             onFilterApprovalChange={setFilterApproval}
             onAddSource={handleAddSource}
-            onSelectAll={selectAll}
-            onClearSelection={clearSelection}
           />
         </div>
                       onToggle={toggleExpand}
                       focusedPath={focusedToolPath}
                       focusedSource={focusedSourceName}
-                      selectedKeys={selectedKeys}
                       onFocusTool={handleFocusTool}
-                      onSelectTool={toggleSelectTool}
                       onSourceClick={handleSourceClick}
                       source={sourceByName.get(group.label) ?? undefined}
                     />

executor/apps/web/src/components/tools/explorer/source-form-panel.tsx+4−6

   onClose: () => void;
 }) {
   const { context } = useSession();
-  const upsertToolSource = useMutation(convexApi.workspace.upsertToolSource);
+  const upsertToolSource = useAction(convexApi.workspace.upsertToolSource);
   const deleteToolSource = useMutation(convexApi.workspace.deleteToolSource);
-  const upsertCredential = useAction(convexApi.credentialsNode.upsertCredential);
   const previewOpenApiSourceUpgrade = useAction(convexApi.executorNode.previewOpenApiSourceUpgrade);
   const credentials = useQuery(
     convexApi.workspace.listCredentials,
         sourceToEdit,
         credentialsLoading,
         upsertToolSource,
-        upsertCredential,
         form: {
           name: form.name,
           endpoint: form.endpoint,
             <ArrowLeft className="h-3.5 w-3.5" />
           </button>
           <div className="min-w-0 flex-1">
-            <h2 className="text-[14px] font-mono font-semibold text-foreground">
+            <h2 className="text-sm font-semibold text-foreground">
               {editing ? "Edit source" : "Add source"}
             </h2>
-            <p className="text-[10px] text-muted-foreground/60 mt-0.5">
+            <p className="mt-0.5 text-xs text-muted-foreground/70">
               {editing
                 ? "Update endpoint, auth, and credentials."
                 : "Connect a source and configure credentials."}
                   <p className="text-[13px] font-medium truncate">
                     {displaySourceName(sourceToEdit.name)}
                   </p>
-                  <p className="text-[10px] text-muted-foreground truncate mt-0.5">
+                  <p className="mt-0.5 truncate text-xs text-muted-foreground">
                     {compactEndpointLabel(sourceToEdit)}
                   </p>
                   <div className="mt-2 flex items-center gap-1.5 flex-wrap">

executor/apps/web/src/components/tools/explorer/tool-detail.tsx+21−21

@@ -86,7 +86,7 @@ function ConstraintBadges({ entry }: { entry: SchemaFieldEntry }) { · 85 unmodified lines
86	return (	86	return (
87	<span className="inline-flex items-center gap-1 ml-0.5">	87	<span className="inline-flex items-center gap-1 ml-0.5">
88	{parts.map((p, i) => (	88	{parts.map((p, i) => (
89	<span key={i} className="font-mono text-[9px] text-muted-foreground/65 bg-muted rounded-sm px-1 leading-[1.4]">	89	<span key={i} className="rounded-sm bg-muted px-1 text-[11px] leading-[1.4] text-muted-foreground/70">
90	{p}	90	{p}
91	</span>	91	</span>
92	))}	92	))}
@@ -104,7 +104,7 @@ function FieldRow({ entry }: { entry: SchemaFieldEntry }) { · 11 unmodified lines
104	>	104	>
105	{/* Name + type line */}	105	{/* Name + type line */}
106	<div className="flex items-center gap-1.5 flex-wrap">	106	<div className="flex items-center gap-1.5 flex-wrap">
107	<span className="font-mono text-[11px] font-semibold text-foreground leading-tight">	107	<span className="text-sm font-semibold leading-tight text-foreground">
108	{entry.path.split(".").pop()}	108	{entry.path.split(".").pop()}
109	</span>	109	</span>
110		110
@@ -117,7 +117,7 @@ function FieldRow({ entry }: { entry: SchemaFieldEntry }) { · 6 unmodified lines
117		117
118	<span	118	<span
119	className={cn(	119	className={cn(
120	"font-mono text-[10px] leading-none px-1.5 py-0.5 rounded-[3px] border font-medium",	120	"rounded-[3px] border px-1.5 py-0.5 text-[11px] leading-none font-medium",
121	typeColorClasses(entry.type),	121	typeColorClasses(entry.type),
122	)}	122	)}
123	>	123	>
@@ -125,7 +125,7 @@ function FieldRow({ entry }: { entry: SchemaFieldEntry }) { · 1 unmodified line
125	</span>	125	</span>
126		126
127	{entry.deprecated ? (	127	{entry.deprecated ? (
128	<span className="font-mono text-[9px] font-medium uppercase tracking-wide text-[oklch(0.6_0.16_75)] dark:text-[oklch(0.78_0.14_75)] bg-[oklch(0.6_0.16_75_/_0.08)] dark:bg-[oklch(0.78_0.14_75_/_0.1)] border border-[oklch(0.6_0.16_75_/_0.18)] dark:border-[oklch(0.78_0.14_75_/_0.2)] rounded-[3px] px-1.5 py-px leading-none">	128	<span className="rounded-[3px] border border-[oklch(0.6_0.16_75_/_0.18)] bg-[oklch(0.6_0.16_75_/_0.08)] px-1.5 py-px text-[10px] font-medium leading-none text-[oklch(0.6_0.16_75)] dark:border-[oklch(0.78_0.14_75_/_0.2)] dark:bg-[oklch(0.78_0.14_75_/_0.1)] dark:text-[oklch(0.78_0.14_75)]">
129	deprecated	129	deprecated
130	</span>	130	</span>
131	) : null}	131	) : null}
@@ -135,7 +135,7 @@ function FieldRow({ entry }: { entry: SchemaFieldEntry }) { · 3 unmodified lines
135		135
136	{/* Description */}	136	{/* Description */}
137	{entry.description ? (	137	{entry.description ? (
138	<div className="text-[11px] leading-relaxed text-muted-foreground [&_p]:m-0 [&_p+p]:mt-0.5 [&_code]:font-mono [&_code]:text-[10px] [&_code]:bg-muted [&_code]:border [&_code]:border-border/70 [&_code]:rounded-sm [&_code]:px-1 [&_code]:py-px [&_code]:text-terminal-cyan [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2 [&_a]:decoration-primary/25 hover:[&_a]:decoration-primary/70">	138	<div className="text-xs leading-relaxed text-muted-foreground [&_p]:m-0 [&_p+p]:mt-0.5 [&_code]:font-mono [&_code]:text-[11px] [&_code]:bg-muted [&_code]:border [&_code]:border-border/70 [&_code]:rounded-sm [&_code]:px-1 [&_code]:py-px [&_code]:text-primary [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2 [&_a]:decoration-primary/25 hover:[&_a]:decoration-primary/70">
139	<Streamdown plugins={{ code: codePlugin }} controls={false}>{entry.description}</Streamdown>	139	<Streamdown plugins={{ code: codePlugin }} controls={false}>{entry.description}</Streamdown>
140	</div>	140	</div>
141	) : null}	141	) : null}
@@ -144,7 +144,7 @@ function FieldRow({ entry }: { entry: SchemaFieldEntry }) { · 2 unmodified lines
144	{entry.enumValues && entry.enumValues.length > 0 && entry.enumValues.length <= 12 ? (	144	{entry.enumValues && entry.enumValues.length > 0 && entry.enumValues.length <= 12 ? (
145	<div className="flex flex-wrap gap-1 mt-0.5">	145	<div className="flex flex-wrap gap-1 mt-0.5">
146	{entry.enumValues.map((v, i) => (	146	{entry.enumValues.map((v, i) => (
147	<code key={i} className="font-mono text-[10px] bg-muted border border-border/60 rounded-[3px] px-1.5 py-px text-foreground/80">	147	<code key={i} className="rounded-[3px] border border-border/60 bg-muted px-1.5 py-px font-mono text-[11px] text-foreground/80">
148	{v}	148	{v}
149	</code>	149	</code>
150	))}	150	))}
@@ -156,14 +156,14 @@ function FieldRow({ entry }: { entry: SchemaFieldEntry }) { · 5 unmodified lines
156	<div className="flex flex-wrap gap-2 mt-0.5">	156	<div className="flex flex-wrap gap-2 mt-0.5">
157	{entry.example ? (	157	{entry.example ? (
158	<span className="inline-flex items-center gap-1">	158	<span className="inline-flex items-center gap-1">
159	<span className="font-mono text-[9px] uppercase tracking-wider text-muted-foreground/50">example</span>	159	<span className="text-[11px] text-muted-foreground/60">Example</span>
160	<code className="font-mono text-[10px] text-muted-foreground/85">{entry.example}</code>	160	<code className="font-mono text-xs text-muted-foreground/85">{entry.example}</code>
161	</span>	161	</span>
162	) : null}	162	) : null}
163	{entry.defaultValue ? (	163	{entry.defaultValue ? (
164	<span className="inline-flex items-center gap-1">	164	<span className="inline-flex items-center gap-1">
165	<span className="font-mono text-[9px] uppercase tracking-wider text-muted-foreground/50">default</span>	165	<span className="text-[11px] text-muted-foreground/60">Default</span>
166	<code className="font-mono text-[10px] text-muted-foreground/85">{entry.defaultValue}</code>	166	<code className="font-mono text-xs text-muted-foreground/85">{entry.defaultValue}</code>
167	</span>	167	</span>
168	) : null}	168	) : null}
169	</div>	169	</div>
@@ -212,11 +212,11 @@ function SchemaFieldsSection({ · 42 unmodified lines
212	<div className="flex flex-col gap-2">	212	<div className="flex flex-col gap-2">
213	{/* Section header */}	213	{/* Section header */}
214	<div className="flex items-baseline gap-2">	214	<div className="flex items-baseline gap-2">
215	<span className="font-mono text-[9px] font-medium tracking-wider uppercase text-muted-foreground/60">	215	<span className="text-xs font-medium text-muted-foreground/70">
216	{label}	216	{label}
217	</span>	217	</span>
218	{hasEntries ? (	218	{hasEntries ? (
219	<span className="font-mono text-[10px] text-muted-foreground/50">	219	<span className="text-xs text-muted-foreground/60">
220	{entries.length} field{entries.length !== 1 ? "s" : ""}	220	{entries.length} field{entries.length !== 1 ? "s" : ""}
221	{truncated ? "+" : ""}	221	{truncated ? "+" : ""}
222	</span>	222	</span>
@@ -228,7 +228,7 @@ function SchemaFieldsSection({ · 5 unmodified lines
228	<div className="border border-border rounded-md bg-muted/30 overflow-hidden">	228	<div className="border border-border rounded-md bg-muted/30 overflow-hidden">
229	{collapsedByDefault ? (	229	{collapsedByDefault ? (
230	<details open={false}>	230	<details open={false}>
231	<summary className="cursor-pointer select-none font-mono text-[10px] text-muted-foreground/60 px-3.5 py-2 block transition-opacity hover:opacity-100">	231	<summary className="block cursor-pointer select-none px-3.5 py-2 text-xs text-muted-foreground/70 transition-opacity hover:opacity-100">
232	Show all fields ({entries.length}{truncated ? "+" : ""})	232	Show all fields ({entries.length}{truncated ? "+" : ""})
233	</summary>	233	</summary>
234	<div className="flex flex-col">	234	<div className="flex flex-col">
@@ -236,7 +236,7 @@ function SchemaFieldsSection({ · 1 unmodified line
236	<FieldRow key={`${entry.path}-${i}`} entry={entry} />	236	<FieldRow key={`${entry.path}-${i}`} entry={entry} />
237	))}	237	))}
238	{truncated ? (	238	{truncated ? (
239	<p className="font-mono text-[10px] text-muted-foreground/50 px-3.5 py-2">	239	<p className="px-3.5 py-2 text-xs text-muted-foreground/60">
240	Showing first {entries.length} fields...	240	Showing first {entries.length} fields...
241	</p>	241	</p>
242	) : null}	242	) : null}
@@ -251,7 +251,7 @@ function SchemaFieldsSection({ · 8 unmodified lines
251	)}	251	)}
252	</div>	252	</div>
253	) : empty ? (	253	) : empty ? (
254	<p className="text-[11px] font-mono text-muted-foreground/50 italic pl-0.5">	254	<p className="pl-0.5 text-xs italic text-muted-foreground/60">
255	Empty object	255	Empty object
256	</p>	256	</p>
257	) : schemaJson ? (	257	) : schemaJson ? (
@@ -261,7 +261,7 @@ function SchemaFieldsSection({ · 3 unmodified lines
261	{/* Raw schema toggle */}	261	{/* Raw schema toggle */}
262	{hasEntries && schemaJson ? (	262	{hasEntries && schemaJson ? (
263	<details className="mt-1">	263	<details className="mt-1">
264	<summary className="cursor-pointer select-none font-mono text-[9px] uppercase tracking-wider text-muted-foreground/50 transition-opacity hover:opacity-80">	264	<summary className="cursor-pointer select-none text-xs font-medium text-muted-foreground/60 transition-opacity hover:opacity-80">
265	Raw schema	265	Raw schema
266	</summary>	266	</summary>
267	<div className="mt-1.5">	267	<div className="mt-1.5">
@@ -308,11 +308,11 @@ export function ToolDetailPanel({ · 40 unmodified lines
308	<div className="sticky top-0 z-10 bg-background/95 backdrop-blur-sm border-b border-border/40 px-5 py-3">	308	<div className="sticky top-0 z-10 bg-background/95 backdrop-blur-sm border-b border-border/40 px-5 py-3">
309	<div className="flex items-center gap-2.5 min-w-0">	309	<div className="flex items-center gap-2.5 min-w-0">
310	<Zap className="h-3.5 w-3.5 text-primary/70 shrink-0" />	310	<Zap className="h-3.5 w-3.5 text-primary/70 shrink-0" />
311	<h2 className="text-[14px] font-mono font-semibold text-foreground truncate">	311	<h2 className="truncate text-sm font-semibold text-foreground">
312	{tool.path}	312	{tool.path}
313	</h2>	313	</h2>
314	{tool.approval === "required" ? (	314	{tool.approval === "required" ? (
315	<span className="inline-flex items-center gap-0.5 text-[9px] font-mono uppercase tracking-wider text-terminal-amber bg-terminal-amber/8 px-1.5 py-0.5 rounded border border-terminal-amber/15 shrink-0">	315	<span className="inline-flex shrink-0 items-center gap-0.5 rounded border border-terminal-amber/15 bg-terminal-amber/8 px-1.5 py-0.5 text-xs font-medium text-terminal-amber">
316	<ShieldCheck className="h-2.5 w-2.5" />	316	<ShieldCheck className="h-2.5 w-2.5" />
317	gated	317	gated
318	</span>	318	</span>
@@ -322,7 +322,7 @@ export function ToolDetailPanel({ · 3 unmodified lines
322	</div>	322	</div>
323	</div>	323	</div>
324	{tool.source ? (	324	{tool.source ? (
325	<p className="mt-0.5 text-[10px] font-mono text-muted-foreground/50 pl-6">	325	<p className="mt-0.5 pl-6 text-xs text-muted-foreground/60">
326	{tool.source}	326	{tool.source}
327	</p>	327	</p>
328	) : null}	328	) : null}
@@ -404,11 +404,11 @@ function ToolDetailContent({ · 75 unmodified lines
404	<div className="space-y-3">	404	<div className="space-y-3">
405	<Skeleton className="h-3.5 w-72" />	405	<Skeleton className="h-3.5 w-72" />
406	<div>	406	<div>
407	<p className="font-mono text-[9px] font-medium tracking-wider uppercase text-muted-foreground/60">Arguments</p>	407	<p className="text-xs font-medium text-muted-foreground/70">Arguments</p>
408	<Skeleton className="h-20 w-full rounded-md mt-1" />	408	<Skeleton className="h-20 w-full rounded-md mt-1" />
409	</div>	409	</div>
410	<div>	410	<div>
411	<p className="font-mono text-[9px] font-medium tracking-wider uppercase text-muted-foreground/60">Returns</p>	411	<p className="text-xs font-medium text-muted-foreground/70">Returns</p>
412	<Skeleton className="h-14 w-full rounded-md mt-1" />	412	<Skeleton className="h-14 w-full rounded-md mt-1" />
413	</div>	413	</div>
414	</div>	414	</div>

executor/apps/web/src/components/tools/policies.tsx+93−91

           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="h-9 w-full justify-between text-xs font-mono bg-background hover:bg-muted/50 border-border/70"
+          className="h-9 w-full justify-between bg-background text-sm hover:bg-muted/50 border-border/70"
         >
           <span className="truncate text-left">{selectionSummary}</span>
           <ChevronDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[460px] p-0" align="start">
-        {/* Search input — raw input, deferred for filtering so typing never lags */}
+        {/* Search input — deferred for filtering so typing never lags */}
         <div className="flex h-9 items-center gap-2 border-b px-3">
           <Search className="size-4 shrink-0 opacity-50" />
-          <input
+          <Input
             ref={searchRef}
             value={searchInput}
             onChange={(e) => setSearchInput(e.target.value)}
             placeholder="Search tools..."
-            className="flex h-10 w-full bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+            className="h-8 border-0 bg-transparent px-0 shadow-none focus-visible:ring-0"
           />
           {searchInput && (
             <button
         {/* Footer */}
         {selectedPaths.length > 0 && (
           <div className="border-t border-border/50 p-2 flex items-center justify-between">
-            <span className="text-[10px] text-muted-foreground">{selectedPaths.length} selected</span>
+            <span className="text-xs text-muted-foreground">{selectedPaths.length} selected</span>
             <Button
               variant="ghost"
               size="sm"
-              className="h-6 text-[10px] px-2"
+              className="h-6 px-2 text-xs"
               onClick={() => { onSelectionChange([]); onPatternChange("*"); }}
             >
               Clear
   // ── Render ──
   return (
-    <section className="mx-auto flex h-full min-h-0 w-full max-w-6xl flex-col border border-border/50 bg-card/40">
+    <section className="flex h-full min-h-0 w-full overflow-hidden bg-background">
-      <div className="min-h-0 flex-1 overflow-y-auto p-4 sm:p-5">
+      {/* ── Left sidebar ── */}
-        <div className="space-y-4">
+      <aside className="flex h-full w-64 shrink-0 flex-col border-r border-border/40 bg-card/30 lg:w-72">
-      {/* Header */}
+        {/* Sidebar header */}
-      <div className="flex items-center justify-between">
+        <div className="shrink-0 border-b border-border/30 px-3 py-2.5">
-        <div className="flex items-center gap-2.5">
+          <div className="flex items-center justify-between">
-          <Shield className="h-4 w-4 text-muted-foreground" />
+            <div className="flex items-center gap-2">
-          <div>
+              <Shield className="h-4 w-4 text-muted-foreground" />
-            <h3 className="text-sm font-medium leading-none">Tool Policies</h3>
+              <h3 className="text-sm font-medium leading-none">Policies</h3>
-            <p className="text-[11px] text-muted-foreground mt-1">
+            </div>
-              Control which tools or sources are approved, gated, or blocked
+            <Button
-            </p>
+              onClick={() => { setForm(defaultFormState()); setDialogOpen(true); }}
+              size="sm"
+              variant="ghost"
+              className="h-7 w-7 p-0"
+              disabled={!context}
+            >
+              <Plus className="h-3.5 w-3.5" />
+            </Button>
           </div>
+          <p className="text-[10px] text-muted-foreground mt-1">
+            {policies.length} {policies.length === 1 ? "policy" : "policies"}
+          </p>
         </div>
-        <Button
-          onClick={() => { setForm(defaultFormState()); setDialogOpen(true); }}
-          size="sm"
-          className="h-8 text-xs gap-1.5"
-          disabled={!context}
-        >
-          <Plus className="h-3.5 w-3.5" />
-          Quick Policy
-        </Button>
-      </div>
-      <Separator className="bg-border/40" />
-      {/* Policies list */}
+        {/* Sidebar policy list */}
-      {loading || loadingTools ? (
+        <div className="flex-1 min-h-0 overflow-y-auto">
-        <div className="space-y-2">
+          {loading || loadingTools ? (
-          {Array.from({ length: 3 }).map((_, i) => (
+            <div className="space-y-2 p-3">
-            <Skeleton key={i} className="h-16 rounded-lg" />
+              {Array.from({ length: 4 }).map((_, i) => (
-          ))}
+                <Skeleton key={i} className="h-12 rounded-md" />
-        </div>
+              ))}
-      ) : policies.length === 0 ? (
+            </div>
-        <div className="rounded-none border border-dashed border-border/50 py-10 flex flex-col items-center gap-2.5">
+          ) : policies.length === 0 ? (
-          <Shield className="h-8 w-8 text-muted-foreground/30" />
+            <div className="flex flex-col items-center gap-2.5 px-4 py-10">
-          <div className="text-center">
+              <Shield className="h-7 w-7 text-muted-foreground/30" />
-            <p className="text-xs text-muted-foreground">No tool policies configured</p>
+              <div className="text-center">
-            <p className="text-[11px] text-muted-foreground/60 mt-0.5">
+                <p className="text-xs text-muted-foreground">No policies</p>
-              Tools use default approval behavior. Create a tool policy to customize it.
+                <p className="text-[10px] text-muted-foreground/60 mt-0.5">
-            </p>
+                  Create a policy to customize tool approval behavior.
-          </div>
+                </p>
-          <Button
-            variant="outline"
-            size="sm"
-            className="h-7 text-[11px] gap-1 mt-1"
-            onClick={() => { setForm(defaultFormState()); setDialogOpen(true); }}
-          >
-            <Plus className="h-3 w-3" />
-            Create first policy
-          </Button>
-        </div>
-      ) : (
-        <div className="space-y-4">
-          {(["deny", "require_approval", "allow"] as const).map((decisionType) => {
-            const group = groupedPolicies[decisionType];
-            if (group.length === 0) return null;
-            const config = DECISION_CONFIG[decisionType];
-            return (
-              <div key={decisionType}>
-                <div className="flex items-center gap-2 mb-2">
-                  <config.icon className={cn("h-3 w-3", config.color)} />
-                  <span className={cn("text-[11px] font-medium uppercase tracking-wider", config.color)}>
-                    {config.label}
-                  </span>
-                  <span className="text-[10px] text-muted-foreground/40">
-                    ({group.length})
-                  </span>
-                </div>
-                <div className="space-y-1.5">
-                  {group.map((policy) => (
-                    <PolicyCard
-                      key={policy.id}
-                      policy={policy}
-                      tools={tools}
-                      currentAccountId={context?.accountId}
-                      onDelete={handleDelete}
-                      canDelete={isDirectToolPolicy(policy)}
-                      deleting={deletingId === policy.id}
-                    />
-                  ))}
-                </div>
               </div>
-            );
+              <Button
-          })}
+                variant="outline"
+                size="sm"
+                className="h-7 text-[11px] gap-1 mt-1"
+                onClick={() => { setForm(defaultFormState()); setDialogOpen(true); }}
+              >
+                <Plus className="h-3 w-3" />
+                Create first policy
+              </Button>
+            </div>
+          ) : (
+            <div className="p-2 space-y-3">
+              {(["deny", "require_approval", "allow"] as const).map((decisionType) => {
+                const group = groupedPolicies[decisionType];
+                if (group.length === 0) return null;
+                const config = DECISION_CONFIG[decisionType];
+                return (
+                  <div key={decisionType}>
+                    <div className="flex items-center gap-2 mb-1.5 px-1">
+                      <config.icon className={cn("h-3 w-3", config.color)} />
+                      <span className={cn("text-[10px] font-medium uppercase tracking-wider", config.color)}>
+                        {config.label}
+                      </span>
+                      <span className="text-[9px] text-muted-foreground/40">
+                        ({group.length})
+                      </span>
+                    </div>
+                    <div className="space-y-1">
+                      {group.map((policy) => (
+                        <PolicyCard
+                          key={policy.id}
+                          policy={policy}
+                          tools={tools}
+                          currentAccountId={context?.accountId}
+                          onDelete={handleDelete}
+                          canDelete={isDirectToolPolicy(policy)}
+                          deleting={deletingId === policy.id}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
         </div>
-      )}
+      </aside>
-      <Separator className="bg-border/40" />
+      {/* ── Right content panel ── */}
+      <div className="flex-1 min-w-0 max-h-screen overflow-y-auto bg-background/50">
+        <div className="p-4 sm:p-5 space-y-4">
       <details className="group rounded-none border border-border/60 bg-card/30">
         <summary className="flex cursor-pointer list-none items-center justify-between gap-3 px-3 py-2.5">
           <div>

executor/apps/web/src/components/tools/storage.tsx+34−0

@@ -8,6 +8,7 @@ import { · 7 unmodified lines
8	KeyRound,	8	KeyRound,
9	Table,	9	Table,
10	} from "lucide-react";	10	} from "lucide-react";
		11	import { Skeleton } from "@/components/ui/skeleton";
11	import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";	12	import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
12	import type { StorageDurability, StorageInstanceRecord, StorageScopeType } from "@/lib/types";	13	import type { StorageDurability, StorageInstanceRecord, StorageScopeType } from "@/lib/types";
13	import { convexApi } from "@/lib/convex-api";	14	import { convexApi } from "@/lib/convex-api";
@@ -32,6 +33,37 @@ import { · 18 unmodified lines
32	type StorageSqlResult,	33	type StorageSqlResult,
33	} from "./storage_panel_shared";	34	} from "./storage_panel_shared";
34		35
		36	function StorageInspectorSkeleton() {
		37	return (
		38	<div className="flex h-full min-h-0 flex-col">
		39	<div className="flex items-center justify-between border-b border-border/40 px-4 py-1.5 bg-card/20">
		40	<div className="space-y-1">
		41	<Skeleton className="h-3 w-40 rounded" />
		42	<Skeleton className="h-2.5 w-56 rounded" />
		43	</div>
		44	<div className="flex items-center gap-1.5">
		45	<Skeleton className="h-7 w-12 rounded-md" />
		46	<Skeleton className="h-7 w-12 rounded-md" />
		47	<Skeleton className="h-7 w-12 rounded-md" />
		48	</div>
		49	</div>
		50
		51	<div className="flex items-center gap-2 border-b border-border/30 px-4 py-2 bg-muted/20">
		52	<Skeleton className="h-7 flex-1 rounded-md" />
		53	<Skeleton className="h-7 w-16 rounded-md" />
		54	</div>
		55
		56	<div className="flex-1 min-h-0 overflow-hidden p-4">
		57	<div className="space-y-2">
		58	{Array.from({ length: 6 }).map((_, index) => (
		59	<Skeleton key={index} className="h-9 w-full rounded-md" />
		60	))}
		61	</div>
		62	</div>
		63	</div>
		64	);
		65	}
		66
35	// ── Main Component ─────────────────────────────────────────────────────────	67	// ── Main Component ─────────────────────────────────────────────────────────
36		68
37	export function StoragePanel({	69	export function StoragePanel({
@@ -478,6 +510,8 @@ export function StoragePanel({ · 440 unmodified lines
478	onSqlViewModeChange={setSqlViewMode}	510	onSqlViewModeChange={setSqlViewMode}
479	/>	511	/>
480	</Tabs>	512	</Tabs>
		513	) : loading ? (
		514	<StorageInspectorSkeleton />
481	) : (	515	) : (
482	<div className="flex h-full items-center justify-center">	516	<div className="flex h-full items-center justify-center">
483	<div className="flex flex-col items-center gap-3">	517	<div className="flex flex-col items-center gap-3">

executor/apps/web/src/components/tools/storage_panel_sidebar.tsx+51−30

 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";
 import type { StorageDurability, StorageInstanceRecord, StorageScopeType } from "@/lib/types";
           <Database className="h-3.5 w-3.5 text-muted-foreground" />
           <span className="text-xs font-medium text-foreground">Instances</span>
           {visibleInstances.length > 0 && (
-            <Badge variant="outline" className="h-4 px-1.5 text-[9px] font-mono text-muted-foreground">
+            <Badge variant="outline" className="h-4 px-1.5 text-xs text-muted-foreground">
               {visibleInstances.length}
             </Badge>
           )}
         <div className="border-b border-border/40 bg-muted/30 px-3 py-3">
           <div className="space-y-2">
             <div className="grid grid-cols-2 gap-2">
-              <label className="flex flex-col gap-1 text-[10px] text-muted-foreground">
+              <label className="flex flex-col gap-1 text-xs text-muted-foreground">
                 Scope
-                <select
+                <Select
-                  className="h-7 rounded-md border border-border/60 bg-background px-2 text-[11px] text-foreground"
                   value={scopeType}
-                  onChange={(event) => onScopeTypeChange(event.target.value as StorageScopeType)}
+                  onValueChange={(value) => onScopeTypeChange(value as StorageScopeType)}
                 >
-                  <option value="scratch">scratch</option>
+                  <SelectTrigger className="h-8 w-full">
-                  <option value="account">account</option>
+                    <SelectValue />
-                  <option value="workspace">workspace</option>
+                  </SelectTrigger>
-                  <option value="organization">organization</option>
+                  <SelectContent>
-                </select>
+                    <SelectItem value="scratch">scratch</SelectItem>
+                    <SelectItem value="account">account</SelectItem>
+                    <SelectItem value="workspace">workspace</SelectItem>
+                    <SelectItem value="organization">organization</SelectItem>
+                  </SelectContent>
+                </Select>
               </label>
-              <label className="flex flex-col gap-1 text-[10px] text-muted-foreground">
+              <label className="flex flex-col gap-1 text-xs text-muted-foreground">
                 Durability
-                <select
+                <Select
-                  className="h-7 rounded-md border border-border/60 bg-background px-2 text-[11px] text-foreground"
                   value={durability}
-                  onChange={(event) => onDurabilityChange(event.target.value as StorageDurability)}
+                  onValueChange={(value) => onDurabilityChange(value as StorageDurability)}
                 >
-                  <option value="ephemeral">ephemeral</option>
+                  <SelectTrigger className="h-8 w-full">
-                  <option value="durable">durable</option>
+                    <SelectValue />
-                </select>
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="ephemeral">ephemeral</SelectItem>
+                    <SelectItem value="durable">durable</SelectItem>
+                  </SelectContent>
+                </Select>
               </label>
             </div>
             <Input
               value={purpose}
               onChange={(event) => onPurposeChange(event.target.value)}
               placeholder="Purpose (optional)"
-              className="h-7 rounded-md text-[11px]"
+              className="h-8 rounded-md"
             />
             <div className="flex items-end gap-2">
               <Input
                 onChange={(event) => onTtlHoursChange(event.target.value)}
                 disabled={durability !== "ephemeral"}
                 placeholder="TTL (hours)"
-                className="h-7 flex-1 rounded-md text-[11px]"
+                className="h-8 flex-1 rounded-md"
               />
-              <Button size="sm" className="h-7 rounded-md px-3 text-[10px]" disabled={creating} onClick={onCreate}>
+              <Button size="sm" className="h-8 rounded-md px-3 text-xs" disabled={creating} onClick={onCreate}>
                 Create
               </Button>
             </div>
       <div className="min-h-0 flex-1 overflow-y-auto">
         {loading ? (
-          <div className="space-y-1 p-2">
+          <div className="space-y-1 p-1.5">
-            {Array.from({ length: 4 }).map((_, i) => (
+            {Array.from({ length: 5 }).map((_, index) => (
-              <Skeleton key={i} className="h-14 rounded-md" />
+              <div key={index} className="flex items-start gap-2.5 rounded-md px-2.5 py-2">
+                <Skeleton className="mt-0.5 h-6 w-6 shrink-0 rounded-md" />
+                <div className="min-w-0 flex-1 space-y-1.5">
+                  <Skeleton className="h-3 w-24 rounded" />
+                  <Skeleton className="h-2.5 w-36 rounded" />
+                </div>
+              </div>
             ))}
           </div>
         ) : visibleInstances.length === 0 ? (
             </div>
             <div className="text-center">
               <p className="text-xs font-medium text-muted-foreground">No instances</p>
-              <p className="mt-0.5 text-[10px] text-muted-foreground/60">Create one to get started</p>
+              <p className="mt-0.5 text-xs text-muted-foreground/60">Create one to get started</p>
             </div>
           </div>
         ) : (
                     </div>
                     <div className="min-w-0 flex-1">
                       <p className={cn(
-                        "truncate text-[11px] font-medium",
+                        "truncate text-xs font-medium",
                         active ? "text-foreground" : "text-foreground/80",
                       )}>
                         {instance.purpose || instance.id.slice(0, 12)}
                       </p>
                       <div className="mt-0.5 flex items-center gap-1.5">
-                        <span className={cn("text-[9px] font-medium uppercase tracking-wider", scopeColor(instance.scopeType))}>
+                        <span className={cn("text-xs font-medium", scopeColor(instance.scopeType))}>
                           {instance.scopeType}
                         </span>
-                        <span className="text-[9px] text-muted-foreground/40">/</span>
+                        <span className="text-xs text-muted-foreground/40">/</span>
-                        <span className="text-[9px] text-muted-foreground">
+                        <span className="text-xs text-muted-foreground">
                           {prettyBytes(instance.sizeBytes)}
                         </span>
-                        <span className="text-[9px] text-muted-foreground/40">/</span>
+                        <span className="text-xs text-muted-foreground/40">/</span>
-                        <span className="text-[9px] text-muted-foreground">
+                        <span className="text-xs text-muted-foreground">
                           {relativeTime(instance.lastSeenAt)}
                         </span>
                       </div>

executor/apps/web/src/components/tools/storage_panel_sql_tab.tsx+36−35

 import { Play } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 import { TabsContent } from "@/components/ui/tabs";
 import { cn } from "@/lib/utils";
 import { sqlCellText, truncateText, type StorageSqlObject, type StorageSqlResult } from "./storage_panel_shared";
   return (
     <TabsContent value="sql" className="flex-1 min-h-0 overflow-hidden">
-      <div className="flex h-full min-h-0 flex-col">
+        <div className="flex h-full min-h-0 flex-col">
-        {visibleSqlObjects.length > 0 && (
+          {visibleSqlObjects.length > 0 && (
-          <div className="flex items-center gap-1.5 border-b border-border/30 bg-muted/15 px-4 py-1.5 overflow-x-auto shrink-0">
+            <div className="flex items-center gap-1.5 border-b border-border/30 bg-muted/15 px-4 py-1.5 overflow-x-auto shrink-0">
-            <span className="shrink-0 text-[9px] font-medium text-muted-foreground/60 uppercase tracking-wider mr-0.5">Tables</span>
+              <span className="mr-0.5 shrink-0 text-xs font-medium text-muted-foreground/70">Tables</span>
-            {visibleSqlObjects.map((entry) => (
+              {visibleSqlObjects.map((entry) => (
-              <button
+                <button
-                key={entry.name}
+                  key={entry.name}
-                type="button"
+                  type="button"
-                className={cn(
+                  className={cn(
-                  "shrink-0 rounded-md px-2 py-0.5 text-[10px] font-medium transition-colors",
+                    "shrink-0 rounded-md px-2 py-0.5 text-xs font-medium transition-colors",
-                  selectedSqlObjectName === entry.name
+                    selectedSqlObjectName === entry.name
-                    ? "bg-primary/15 text-primary ring-1 ring-primary/20"
+                      ? "bg-primary/15 text-primary ring-1 ring-primary/20"
-                    : "text-foreground/60 hover:bg-accent/50 hover:text-foreground",
+                      : "text-foreground/60 hover:bg-accent/50 hover:text-foreground",
-                )}
+                  )}
-                onClick={() => onOpenSqlObject(entry.name)}
+                  onClick={() => onOpenSqlObject(entry.name)}
               >
                 {entry.name}
               </button>
               <Button
                 variant="ghost"
                 size="sm"
-                className="h-5 rounded px-1.5 text-[9px] text-muted-foreground/50"
+                className="h-5 rounded px-1.5 text-xs text-muted-foreground/60"
                 onClick={onToggleShowInternalObjects}
               >
                 {sqlShowInternalObjects ? "Hide sys" : "Show sys"}
               <Button
                 variant="ghost"
                 size="sm"
-                className="h-5 rounded px-1.5 text-[9px] text-muted-foreground/50"
+                className="h-5 rounded px-1.5 text-xs text-muted-foreground/60"
                 onClick={onRefreshSqlObjects}
                 disabled={sqlObjectsLoading}
               >
         )}
         <div className="shrink-0 border-b border-border/30 bg-muted/20 p-3">
-          <textarea
+          <Textarea
             value={sqlText}
             onChange={(event) => {
               onSqlTextChange(event.target.value);
                 onRunSql();
               }
             }}
-            className="min-h-[3.5rem] max-h-32 w-full resize-y rounded-md border border-border/40 bg-background px-3 py-2 font-mono text-[11px] leading-relaxed text-foreground placeholder:text-muted-foreground/40 focus:outline-none focus:ring-1 focus:ring-primary/30"
+            className="min-h-[3.5rem] max-h-32 resize-y font-mono leading-relaxed placeholder:text-muted-foreground/40"
             placeholder="SELECT * FROM ..."
           />
           <div className="mt-2 flex flex-wrap items-center gap-1.5">
             <Button
               size="sm"
-              className="h-6 rounded-md px-2.5 text-[10px]"
+              className="h-6 rounded-md px-2.5 text-xs"
               disabled={sqlLoading || !canInspect}
               onClick={onRunSql}
             >
               <Play className="mr-1 h-2.5 w-2.5" /> Run
             </Button>
             <div className="h-4 w-px bg-border/40 mx-0.5" />
-            <Button variant="ghost" size="sm" className="h-6 rounded-md px-2 text-[10px] text-muted-foreground" onClick={onRunUserTables}>
+            <Button variant="ghost" size="sm" className="h-6 rounded-md px-2 text-xs text-muted-foreground" onClick={onRunUserTables}>
               User tables
             </Button>
-            <Button variant="ghost" size="sm" className="h-6 rounded-md px-2 text-[10px] text-muted-foreground" onClick={onRunAllObjects}>
+            <Button variant="ghost" size="sm" className="h-6 rounded-md px-2 text-xs text-muted-foreground" onClick={onRunAllObjects}>
               All objects
             </Button>
-            <Button variant="ghost" size="sm" className="h-6 rounded-md px-2 text-[10px] text-muted-foreground" onClick={onRunKvSchema}>
+            <Button variant="ghost" size="sm" className="h-6 rounded-md px-2 text-xs text-muted-foreground" onClick={onRunKvSchema}>
               KV schema
             </Button>
-            <Button variant="ghost" size="sm" className="h-6 rounded-md px-2 text-[10px] text-muted-foreground" onClick={onRunKvData}>
+            <Button variant="ghost" size="sm" className="h-6 rounded-md px-2 text-xs text-muted-foreground" onClick={onRunKvData}>
               KV data
             </Button>
-            <Button variant="ghost" size="sm" className="h-6 rounded-md px-2 text-[10px] text-muted-foreground" onClick={onRunFsEntries}>
+            <Button variant="ghost" size="sm" className="h-6 rounded-md px-2 text-xs text-muted-foreground" onClick={onRunFsEntries}>
               FS entries
             </Button>
             <div className="ml-auto flex items-center gap-1.5">
-              <span className="text-[9px] text-muted-foreground/50">Limit</span>
+              <span className="text-xs text-muted-foreground/60">Limit</span>
               <Input
                 value={sqlMaxRows}
                 onChange={(event) => onSqlMaxRowsChange(event.target.value)}
-                className="h-6 w-14 rounded-md text-center text-[10px]"
+                className="h-6 w-14 rounded-md text-center"
               />
             </div>
           </div>
-          <p className="mt-1.5 text-[9px] text-muted-foreground/40">
+          <p className="mt-1.5 text-xs text-muted-foreground/50">
-            Press <kbd className="rounded border border-border/40 bg-muted/50 px-1 py-0.5 text-[8px] font-mono">Cmd+Enter</kbd> to run
+            Press <kbd className="rounded border border-border/40 bg-muted/50 px-1 py-0.5 text-[11px] font-mono">Cmd+Enter</kbd> to run
           </p>
         </div>
           ) : sqlResult ? (
             <>
               <div className="flex items-center justify-between border-b border-border/20 px-4 py-1.5 bg-muted/10">
-                <span className="text-[10px] text-muted-foreground">
+                <span className="text-xs text-muted-foreground">
                   {sqlResult.rowCount} row{sqlResult.rowCount === 1 ? "" : "s"}
                   {typeof sqlResult.changes === "number" ? ` · ${sqlResult.changes} change${sqlResult.changes === 1 ? "" : "s"}` : ""}
                   {sqlColumns.length > 0 ? ` · ${sqlColumns.length} col${sqlColumns.length === 1 ? "" : "s"}` : ""}
                   <Button
                     variant={sqlViewMode === "table" ? "default" : "ghost"}
                     size="sm"
-                    className="h-5 rounded-md px-2 text-[9px]"
+                    className="h-5 rounded-md px-2 text-xs"
                     onClick={() => onSqlViewModeChange("table")}
                   >
                     Table
                   <Button
                     variant={sqlViewMode === "json" ? "default" : "ghost"}
                     size="sm"
-                    className="h-5 rounded-md px-2 text-[9px]"
+                    className="h-5 rounded-md px-2 text-xs"
                     onClick={() => onSqlViewModeChange("json")}
                   >
                     JSON
                     <p className="text-xs text-muted-foreground/60">Query returned no rows</p>
                   </div>
                 ) : (
-                  <table className="min-w-full border-collapse text-[11px]">
+                  <table className="min-w-full border-collapse text-xs">
                     <thead className="sticky top-0 z-10 bg-muted/80 backdrop-blur-sm">
                       <tr>
-                        <th className="border-b border-r border-border/30 px-3 py-1.5 text-left text-[10px] font-medium text-muted-foreground w-10">#</th>
+                        <th className="w-10 border-b border-r border-border/30 px-3 py-1.5 text-left text-xs font-medium text-muted-foreground">#</th>
                         {sqlColumns.map((column) => (
                           <th
                             key={column}
-                            className="border-b border-r border-border/30 px-3 py-1.5 text-left text-[10px] font-medium text-muted-foreground last:border-r-0"
+                            className="border-b border-r border-border/30 px-3 py-1.5 text-left text-xs font-medium text-muted-foreground last:border-r-0"
                           >
                             {column}
                           </th>

executor/apps/web/src/components/tools/view.tsx+22−58

 import { TaskComposer } from "@/components/tasks/task-composer";
 import { CredentialsPanel } from "@/components/tools/credentials";
-import { ConnectionFormDialog } from "@/components/tools/connection/form-dialog";
 import { PoliciesPanel } from "@/components/tools/policies";
 import { StoragePanel } from "@/components/tools/storage";
 import { useSession } from "@/lib/session-context";
 type ToolsTab = "catalog" | "connections" | "policies" | "storage" | "editor";
 const INVENTORY_REGENERATION_TOAST_ID = "tool-inventory-regeneration";
+const TAB_USES_OWN_LOADING_STATE: Record<ToolsTab, boolean> = {
+  catalog: true,
+  connections: true,
+  policies: true,
+  storage: true,
+  editor: true,
+};
 function parseToolsTab(pathname: string): ToolsTab {
   const segments = pathname.split("/").filter(Boolean);
   const catalogFilterValue = catalogQueryState.approval as FilterApproval;
   const catalogSourceValue = useMemo(() => mapEmptyQueryValueToNull(catalogQueryState.source), [catalogQueryState.source]);
   const catalogActiveToolPath = mapEmptyQueryValueToNull(catalogQueryState.tool);
-  const catalogSelectedToolPaths = useMemo(
-    () => catalogQueryState.selected ?? [],
-    [catalogQueryState.selected],
-  );
   const catalogFocusedSourceName = useMemo(
     () => mapEmptyQueryValueToNull(catalogQueryState.sourcePanel),
     [catalogQueryState.sourcePanel],
   );
-  const [connectionDialogOpen, setConnectionDialogOpen] = useState(false);
-  const [connectionDialogEditing, setConnectionDialogEditing] = useState<CredentialRecord | null>(null);
-  const [connectionDialogSourceKey, setConnectionDialogSourceKey] = useState<string | null>(null);
   const [storageMutationBusyId, setStorageMutationBusyId] = useState<string | undefined>(undefined);
   const [storageCreateBusy, setStorageCreateBusy] = useState(false);
   const [regenerationInFlight, setRegenerationInFlight] = useState(false);
   const credentialsLoading = !!context && credentials === undefined;
   const storageItems = storageInstances ?? [];
   const storageLoading = !!context && storageInstances === undefined;
+  const catalogPanelLoading = sessionLoading || loadingTools;
+  const connectionsPanelLoading = sessionLoading || credentialsLoading || sourcesLoading;
+  const policiesPanelLoading = sessionLoading || loadingTools;
+  const storagePanelLoading = sessionLoading || storageLoading;
+  const shouldRenderShellSkeleton = sessionLoading && !TAB_USES_OWN_LOADING_STATE[activeTab];
   const globalWarnings = useMemo(
     () => warnings.filter((warning) => !parseWarningSourceName(warning)),
     });
   }, [setCatalogQueryState]);
-  const setCatalogSelectedToolPaths = useCallback((toolPaths: string[]) => {
-    void setCatalogQueryState({
-      selected: toolPaths,
-    }, {
-      history: "replace",
-    });
-  }, [setCatalogQueryState]);
   const setCatalogFocusedSourceName = useCallback((sourceName: string | null) => {
     void setCatalogQueryState({
       sourcePanel: sourceName ?? "",
       setRegenerationInFlight(false);
     }
   }, [context, rebuildInventoryNow, regenerationInFlight, showRegenerationToast]);
-  const openConnectionCreate = (sourceKey?: string) => {
-    setConnectionDialogEditing(null);
-    setConnectionDialogSourceKey(sourceKey ?? null);
-    setConnectionDialogOpen(true);
-  };
-  const openConnectionEdit = (credential: CredentialRecord) => {
-    setConnectionDialogEditing(credential);
-    setConnectionDialogSourceKey(null);
-    setConnectionDialogOpen(true);
-  };
-  const handleConnectionDialogOpenChange = (open: boolean) => {
-    setConnectionDialogOpen(open);
-    if (!open) {
-      setConnectionDialogEditing(null);
-      setConnectionDialogSourceKey(null);
-    }
-  };
   const handleCreateStorageInstance = useCallback(async (args: {
     scopeType: StorageScopeType;
     durability: StorageDurability;
     }
   }, [context, deleteStorageInstance, storageMutationBusyId]);
-  if (sessionLoading) {
+  if (shouldRenderShellSkeleton) {
     return (
       <div className="flex h-full min-h-0 flex-col">
         <div className="flex flex-1 min-h-0 rounded-none border border-border/50 p-4">
   return (
     <div className="flex h-full min-h-0 flex-col">
       {activeTab === "editor" ? (
-        <div className="flex-1 min-h-0 overflow-y-auto p-4 md:p-6 lg:p-8">
+        <div className="flex-1 min-h-0 overflow-hidden p-0">
           <TaskComposer />
         </div>
       ) : null}
             sourceHasMoreTools={sourceHasMoreTools}
             sourceLoadingMoreTools={sourceLoadingMoreTools}
             onLoadMoreToolsForSource={loadMoreToolsForSource}
-            loading={loadingTools}
+            loading={catalogPanelLoading}
             sourceDialogMeta={sourceDialogMeta}
             sourceAuthProfiles={sourceAuthProfiles}
             existingSourceNames={existingSourceNames}
             searchValue={catalogSearchValue}
             filterApprovalValue={catalogFilterValue}
             focusedToolPathValue={catalogActiveToolPath}
-            selectedToolPathsValue={catalogSelectedToolPaths}
             focusedSourceNameValue={catalogFocusedSourceName}
             onSearchValueChange={setCatalogSearch}
             onFilterApprovalValueChange={setCatalogApprovalFilter}
             onFocusedToolPathChange={setCatalogActiveToolPath}
-            onSelectedToolPathsChange={setCatalogSelectedToolPaths}
             onFocusedSourceNameChange={setCatalogFocusedSourceName}
             onRegenerate={handleRegenerateInventory}
             inventoryState={inventoryStatus?.state}
       ) : null}
       {activeTab === "connections" ? (
-        <div className="flex-1 min-h-0 overflow-y-auto p-4 md:p-6 lg:p-8">
+        <div className="flex-1 min-h-0 overflow-hidden p-0">
           <CredentialsPanel
             sources={sourceItems}
             credentials={credentialItems}
-            loading={credentialsLoading || sourcesLoading}
+            loading={connectionsPanelLoading}
-            onCreateConnection={openConnectionCreate}
+            sourceAuthProfiles={sourceAuthProfiles}
-            onEditConnection={openConnectionEdit}
+            loadingSourceNames={visibleLoadingSources}
           />
         </div>
       ) : null}
       {activeTab === "policies" ? (
-        <div className="flex-1 min-h-0 overflow-y-auto p-4 md:p-6 lg:p-8">
+        <div className="flex-1 min-h-0 overflow-hidden p-0">
           <PoliciesPanel
             tools={visibleTools}
-            loadingTools={loadingTools}
+            loadingTools={policiesPanelLoading}
           />
         </div>
       ) : null}
             workspaceId={context?.workspaceId}
             sessionId={context?.sessionId}
             instances={storageItems}
-            loading={storageLoading}
+            loading={storagePanelLoading}
             creating={storageCreateBusy}
             busyInstanceId={storageMutationBusyId}
             onCreate={handleCreateStorageInstance}
         </div>
       ) : null}
-      <ConnectionFormDialog
-        open={connectionDialogOpen}
-        onOpenChange={handleConnectionDialogOpenChange}
-        editing={connectionDialogEditing}
-        initialSourceKey={connectionDialogSourceKey}
-        sources={sourceItems}
-        credentials={credentialItems}
-        sourceAuthProfiles={sourceAuthProfiles}
-        loadingSourceNames={visibleLoadingSources}
-      />
     </div>
   );
 }

executor/apps/web/src/components/ui/textarea.tsx+20−0

@@ -0,0 +1,20 @@
	1	import * as React from "react"
	2
	3	import { cn } from "@/lib/utils"
	4
	5	function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
	6	return (
	7	<textarea
	8	data-slot="textarea"
	9	className={cn(
	10	"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 flex w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
	11	"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
	12	"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
	13	className
	14	)}
	15	{...props}
	16	/>
	17	)
	18	}
	19
	20	export { Textarea }

executor/apps/web/src/lib/credentials/source-helpers.ts+19−9

   type SourceAuthType,
 } from "@/lib/tools/source-helpers";
 import type {
+  CredentialAdditionalHeader,
   CredentialScope,
   SourceAuthProfile,
   ToolSourceScopeType,
   return `${base} ${ownerScopeLabel(connection.scopeType)}`;
 }
-export function parseHeaderOverrides(text: string): { value?: Record<string, string>; error?: string } {
+type AdditionalHeadersParseResult = {
+  value?: Record<string, string>;
+  error?: string;
+};
+export function parseAdditionalHeadersText(text: string): AdditionalHeadersParseResult {
   const lines = text
     .split("\n")
     .map((line) => line.trim())
   return { value: headers };
 }
-export type HeaderOverrideEntry = {
+export type AdditionalHeaderEntry = {
   key: string;
   value: string;
 };
-export function parseHeaderOverrideEntries(text: string): HeaderOverrideEntry[] {
+export function parseAdditionalHeaderEntries(text: string): AdditionalHeaderEntry[] {
   const rows = text
     .split("\n")
     .map((line) => line.trim())
   });
 }
-export function parseHeaderOverrideRows(entries: HeaderOverrideEntry[]): { value?: Record<string, string>; error?: string } {
+export function parseAdditionalHeaderRows(entries: AdditionalHeaderEntry[]): AdditionalHeadersParseResult {
   const headers: Record<string, string> = {};
   for (let index = 0; index < entries.length; index += 1) {
   return { value: headers };
 }
-export function serializeHeaderOverrideRows(entries: HeaderOverrideEntry[]): string {
+export function serializeAdditionalHeaderRows(entries: AdditionalHeaderEntry[]): string {
   return entries
     .map((entry) => ({
       key: entry.key.trim(),
     .join("\n");
 }
-export function formatHeaderOverrides(overrides: Record<string, unknown> | undefined): string {
+export function formatAdditionalHeaders(headers: CredentialAdditionalHeader[] | undefined): string {
-  const headers = overrides && typeof overrides.headers === "object" ? (overrides.headers as Record<string, unknown>) : {};
+  return (headers ?? [])
-  return Object.entries(headers)
+    .map((header) => ({
-    .map(([key, value]) => `${key}: ${String(value)}`)
+      key: header.name.trim(),
+      value: header.value.trim(),
+    }))
+    .filter((entry) => entry.key.length > 0 && entry.value.length > 0)
+    .map((entry) => `${entry.key}: ${entry.value}`)
     .join("\n");
 }

executor/apps/web/src/lib/tools/source-helpers.ts+4−2

 import { parse as parseDomain } from "tldts";
 import type {
+  CredentialScope,
   CredentialRecord,
   OpenApiSourceQuality,
   SourceAuthProfile,
+  SourceAuthType as SharedSourceAuthType,
   ToolSourceRecord,
 } from "@/lib/types";
-export type SourceAuthType = "none" | "bearer" | "apiKey" | "basic" | "mixed";
+export type SourceAuthType = SharedSourceAuthType;
-export type SourceAuthMode = "workspace" | "account" | "organization";
+export type SourceAuthMode = CredentialScope;
 const RAW_HOSTS = new Set([
   "raw.githubusercontent.com",

executor/apps/web/src/lib/types.ts+9−23

 import type { Id } from "@executor/database/convex/_generated/dataModel";
 import type {
   ApprovalStatus as CoreApprovalStatus,
+  ArgumentCondition as CoreArgumentCondition,
   ArgumentConditionOperator as CoreArgumentConditionOperator,
+  CredentialAdditionalHeader as CoreCredentialAdditionalHeader,
   CredentialProvider as CoreCredentialProvider,
   CredentialScope as CoreCredentialScope,
   CredentialScopeType as CoreCredentialScopeType,
+  OpenApiSourceQuality as CoreOpenApiSourceQuality,
   PolicyApprovalMode as CorePolicyApprovalMode,
   PolicyDecision as CorePolicyDecision,
   PolicyEffect as CorePolicyEffect,
   PolicyMatchType as CorePolicyMatchType,
   PolicyScopeType as CorePolicyScopeType,
+  SourceAuthProfile as CoreSourceAuthProfile,
   SourceAuthType as CoreSourceAuthType,
   StorageDurability as CoreStorageDurability,
   StorageInstanceStatus as CoreStorageInstanceStatus,
 export type ToolRoleBindingStatus = CoreToolRoleBindingStatus;
 export type ArgumentConditionOperator = CoreArgumentConditionOperator;
-export interface ArgumentCondition {
+export type ArgumentCondition = CoreArgumentCondition;
-  key: string;
+export type CredentialAdditionalHeader = CoreCredentialAdditionalHeader;
-  operator: ArgumentConditionOperator;
-  value: string;
-}
 export type CredentialScope = CoreCredentialScope;
 export type CredentialProvider = CoreCredentialProvider;
 export type ToolSourceScopeType = CoreToolSourceScopeType;
 export type SourceAuthType = CoreSourceAuthType;
-export interface SourceAuthProfile {
+export type SourceAuthProfile = CoreSourceAuthProfile;
-  type: SourceAuthType;
-  mode?: CredentialScope;
-  header?: string;
-  inferred: boolean;
-}
 export interface TaskRecord {
   id: string;
   organizationId?: string;
   workspaceId?: string;
   sourceKey: string;
-  overridesJson?: Record<string, unknown>;
+  additionalHeaders: CredentialAdditionalHeader[];
   boundAuthFingerprint?: string;
   provider: CredentialProvider;
   secretJson: Record<string, unknown>;
   };
 }
-export interface OpenApiSourceQuality {
+export type OpenApiSourceQuality = CoreOpenApiSourceQuality;
-  sourceKey: string;
-  toolCount: number;
-  unknownArgsCount: number;
-  unknownReturnsCount: number;
-  partialUnknownArgsCount: number;
-  partialUnknownReturnsCount: number;
-  argsQuality: number;
-  returnsQuality: number;
-  overallQuality: number;
-}
 export interface AnonymousContext {
   sessionId: string;

executor/apps/web/src/lib/url-state/tools.ts+0−6

 import {
-  parseAsNativeArrayOf,
   parseAsString,
   parseAsStringLiteral,
 } from "nuqs";
 import {
   asTrimmedString,
-  asTrimmedStringArray,
 } from "@/lib/url-state/shared";
 export const toolsApprovalValues = ["all", "required", "auto"] as const;
   q: parseAsString.withDefault(""),
   approval: parseAsStringLiteral(toolsApprovalValues).withDefault("all"),
   tool: parseAsString.withDefault(""),
-  selected: parseAsNativeArrayOf(parseAsString),
   source: parseAsString.withDefault(""),
   sourcePanel: parseAsString.withDefault(""),
 };
   q?: string;
   approval?: ToolsApproval;
   tool?: string;
-  selected?: string[];
   source?: string;
   sourcePanel?: string;
 };
   const q = asTrimmedString(search.q);
   const approval = normalizeToolsApproval(search.approval);
   const tool = asTrimmedString(search.tool);
-  const selected = asTrimmedStringArray(search.selected);
   const source = asTrimmedString(search.source);
   const sourcePanel = asTrimmedString(search.sourcePanel);
     ...(q ? { q } : {}),
     ...(approval === "all" ? {} : { approval }),
     ...(tool ? { tool } : {}),
-    ...(selected ? { selected } : {}),
     ...(source ? { source } : {}),
     ...(sourcePanel ? { sourcePanel } : {}),
   };