From b8b108f341060a8c934390a1547dc35bd98c0d17 Mon Sep 17 00:00:00 2001
From: mrzmyr <mrzmyr@users.noreply.github.com>
Date: Sat, 18 Apr 2026 09:42:48 +0200
Subject: [PATCH 1/6] chore(react): drop shadow-xs from form input primitives
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removes the `shadow-xs` class from 6 form primitive components
(Input, Textarea, Select, NativeSelect, Combobox, InputGroup). This
flattens the inputs to match the visual direction that the upcoming
source-config refactor builds on.

## Stack role

First PR in the `source-detail-refactor` stack (12 PRs total). The
overall goal is to rewrite the source-detail page against a new set
of reusable building blocks (KeyValueList, SourceConfig,
SourceOperations, RunOperationPanel). This PR is purely cosmetic and
unblocks nothing — it only lands here so the shipping PR (PR 08) isn't
reviewed simultaneously with a global style change.

## Changes
- Remove `shadow-xs` from Input, Textarea, Select, NativeSelect,
  Combobox, InputGroup className strings. 12 LOC, no behaviour change.

## Relationship to neighbours
- Previous: none (stack base).
- Next (PR 02 — lucide-react + shell icon swap): unrelated chore;
  kept separate so reviewers of either don't have to reason about
  the other.
---
 packages/react/src/components/combobox.tsx      | 2 +-
 packages/react/src/components/input-group.tsx   | 2 +-
 packages/react/src/components/input.tsx         | 2 +-
 packages/react/src/components/native-select.tsx | 2 +-
 packages/react/src/components/select.tsx        | 2 +-
 packages/react/src/components/textarea.tsx      | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/components/combobox.tsx b/packages/react/src/components/combobox.tsx
index cd575183cb..96d535a52c 100644
--- a/packages/react/src/components/combobox.tsx
+++ b/packages/react/src/components/combobox.tsx
@@ -204,7 +204,7 @@ function ComboboxChips({
     <ComboboxPrimitive.Chips
       data-slot="combobox-chips"
       className={cn(
-        "flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-[3px] has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
+        "flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-[3px] has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
         className,
       )}
       {...props}
diff --git a/packages/react/src/components/input-group.tsx b/packages/react/src/components/input-group.tsx
index a91612a3a5..d7c65a7454 100644
--- a/packages/react/src/components/input-group.tsx
+++ b/packages/react/src/components/input-group.tsx
@@ -12,7 +12,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="input-group"
       role="group"
       className={cn(
-        "group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30",
+        "group/input-group relative flex w-full items-center rounded-md border border-input transition-[color,box-shadow] outline-none dark:bg-input/30",
         "h-9 min-w-0 has-[>textarea]:h-auto",
 
         // Variants based on alignment.
diff --git a/packages/react/src/components/input.tsx b/packages/react/src/components/input.tsx
index 93dd42741c..55503187c4 100644
--- a/packages/react/src/components/input.tsx
+++ b/packages/react/src/components/input.tsx
@@ -9,7 +9,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
         "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
         "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
         className,
diff --git a/packages/react/src/components/native-select.tsx b/packages/react/src/components/native-select.tsx
index 6b970cdef1..ad17741f80 100644
--- a/packages/react/src/components/native-select.tsx
+++ b/packages/react/src/components/native-select.tsx
@@ -18,7 +18,7 @@ function NativeSelect({
         data-slot="native-select"
         data-size={size}
         className={cn(
-          "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1 dark:bg-input/30 dark:hover:bg-input/50",
+          "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1 dark:bg-input/30 dark:hover:bg-input/50",
           "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
           "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
           className,
diff --git a/packages/react/src/components/select.tsx b/packages/react/src/components/select.tsx
index 26d6bc032a..ac8f0ae3a4 100644
--- a/packages/react/src/components/select.tsx
+++ b/packages/react/src/components/select.tsx
@@ -31,7 +31,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        "flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
         className,
       )}
       {...props}
diff --git a/packages/react/src/components/textarea.tsx b/packages/react/src/components/textarea.tsx
index 944951fb21..299b7e64db 100644
--- a/packages/react/src/components/textarea.tsx
+++ b/packages/react/src/components/textarea.tsx
@@ -12,7 +12,7 @@ function Textarea({
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
         className,
       )}
       {...props}

From 4de8afa4d3674f8a925bbcba479b91476e13b8fb Mon Sep 17 00:00:00 2001
From: mrzmyr <mrzmyr@users.noreply.github.com>
Date: Sat, 18 Apr 2026 09:44:11 +0200
Subject: [PATCH 2/6] chore(apps): add lucide-react + swap shell icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds `lucide-react` as a dependency of both `@executor/cloud` and
`@executor/local`, and migrates the shell chrome to import icons
from `lucide-react` instead of the hand-maintained
`@executor/react/components/icons` module. Also folds in minor
shell-level styling tweaks that came in the same sweep
(text-xs → text-sm on source list rows, drop redundant
`transition-colors`, align CheckIcon).

PR 02 of 12 in the `source-detail-refactor` stack. Unrelated to the
refactor's load-bearing work, but splits cleanly so reviewers of
either this PR or the later ones aren't reading icon import changes
mixed with component rewrites.

- `apps/cloud/package.json` + `apps/local/package.json`: add
  `lucide-react@^1.7.0`.
- `apps/cloud/src/web/shell.tsx` + `apps/local/src/web/shell.tsx`:
  import `CheckIcon`, `ChevronDownIcon`, `MenuIcon`, `XIcon` from
  `lucide-react`; remove local icon re-exports at call sites; minor
  text-size + transition tweaks.
- `bun.lock`: regenerated for the new dep.

- Previous (PR 01 — shadow-xs drop): unrelated styling chore.
- Next (PR 03a — secret-picker/AddSecretDialog): first PR that adds
  new `packages/react` primitives. Imports `lucide-react` icons which
  this PR makes available in the apps.
---
 apps/cloud/package.json      |   1 +
 apps/cloud/src/web/shell.tsx |  86 +++++++++---------------
 apps/local/package.json      |   1 +
 apps/local/src/web/shell.tsx | 123 ++++++++++++-----------------------
 bun.lock                     |  52 +--------------
 5 files changed, 75 insertions(+), 188 deletions(-)

diff --git a/apps/cloud/package.json b/apps/cloud/package.json
index 73d6ae9d4a..a2fcff60cb 100644
--- a/apps/cloud/package.json
+++ b/apps/cloud/package.json
@@ -61,6 +61,7 @@
     "drizzle-orm": "catalog:",
     "effect": "catalog:",
     "jose": "^5.6.3",
+    "lucide-react": "^1.7.0",
     "postgres": "^3.4.9",
     "react": "catalog:",
     "react-dom": "catalog:",
diff --git a/apps/cloud/src/web/shell.tsx b/apps/cloud/src/web/shell.tsx
index 70cc935fda..7aeec7faf8 100644
--- a/apps/cloud/src/web/shell.tsx
+++ b/apps/cloud/src/web/shell.tsx
@@ -2,6 +2,12 @@ import { Link, Outlet, useLocation } from "@tanstack/react-router";
 import { useEffect, useRef, useState } from "react";
 import { useAtomValue, useAtomSet, Result } from "@effect-atom/atom-react";
 import { useSourcesWithPending } from "@executor/react/api/optimistic";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  MenuIcon,
+  XIcon,
+} from "lucide-react";
 import { useScope } from "@executor/react/api/scope-context";
 import { Button } from "@executor/react/components/button";
 import { Skeleton } from "@executor/react/components/skeleton";
@@ -51,9 +57,9 @@ function NavItem(props: { to: string; label: string; active: boolean; onNavigate
       to={props.to}
       onClick={props.onNavigate}
       className={[
-        "flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors",
+        "flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm",
         props.active
-          ? "bg-sidebar-active text-foreground font-medium"
+          ? "bg-sidebar-active text-foreground"
           : "text-sidebar-foreground hover:bg-sidebar-active/60 hover:text-foreground",
       ].join(" ")}
     >
@@ -80,7 +86,7 @@ function SourceList(props: { pathname: string; onNavigate?: () => void }) {
       </div>
     ),
     onFailure: () => (
-      <div className="px-2.5 py-2 text-xs text-muted-foreground">No sources yet</div>
+      <div className="px-2.5 py-2 text-sm text-muted-foreground">No sources yet</div>
     ),
     onSuccess: ({ value }) =>
       value.length === 0 ? (
@@ -100,15 +106,15 @@ function SourceList(props: { pathname: string; onNavigate?: () => void }) {
                 params={{ namespace: s.id }}
                 onClick={props.onNavigate}
                 className={[
-                  "group flex items-center gap-2 rounded-md px-2.5 py-1.5 text-xs transition-colors",
+                  "group flex items-center gap-2 rounded-md px-2.5 py-1.5 text-sm",
                   active
-                    ? "bg-sidebar-active text-foreground font-medium"
+                    ? "bg-sidebar-active text-foreground"
                     : "text-sidebar-foreground hover:bg-sidebar-active/60 hover:text-foreground",
                 ].join(" ")}
               >
                 <SourceFavicon url={s.url} />
                 <span className="flex-1 truncate">{s.name}</span>
-                <span className="rounded bg-secondary/50 px-1 py-px text-xs font-medium text-muted-foreground">
+                <span className="rounded bg-secondary/50 px-1 py-px text-xs text-muted-foreground">
                   {s.kind}
                 </span>
               </Link>
@@ -176,7 +182,7 @@ function OrganizationSwitcherItems(props: { activeOrganizationId: string | null
                 className="text-xs"
               >
                 <span className="min-w-0 flex-1 truncate">{organization.name}</span>
-                {isActive && <CheckIcon />}
+                {isActive && <CheckIcon className="ml-auto size-4 text-muted-foreground" />}
               </DropdownMenuItem>
             );
           })}
@@ -185,20 +191,6 @@ function OrganizationSwitcherItems(props: { activeOrganizationId: string | null
   });
 }
 
-function CheckIcon() {
-  return (
-    <svg viewBox="0 0 16 16" fill="none" className="ml-auto size-3 text-muted-foreground">
-      <path
-        d="M3.5 8.5L6.5 11.5L12.5 5"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
 function UserFooter() {
   const auth = useAuth();
   const [createOrganizationOpen, setCreateOrganizationOpen] = useState(false);
@@ -244,26 +236,14 @@ function UserFooter() {
                 email={auth.user.email}
               />
               <div className="min-w-0 flex-1">
-                <p className="truncate text-xs font-medium text-foreground">
+                <p className="truncate text-sm font-medium text-foreground">
                   {auth.user.name ?? auth.user.email}
                 </p>
                 {auth.organization && (
                   <p className="truncate text-xs text-muted-foreground">{auth.organization.name}</p>
                 )}
               </div>
-              <svg
-                viewBox="0 0 16 16"
-                fill="none"
-                className="size-3.5 shrink-0 text-muted-foreground"
-              >
-                <path
-                  d="M4 6l4 4 4-4"
-                  stroke="currentColor"
-                  strokeWidth="1.3"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
+              <ChevronDownIcon className="size-4 shrink-0 text-muted-foreground" />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start" side="top" className="w-64">
@@ -362,6 +342,7 @@ function SidebarContent(props: { pathname: string; onNavigate?: () => void; show
   const isSecrets = props.pathname === "/secrets";
   const isBilling = props.pathname === "/billing" || props.pathname.startsWith("/billing/");
   const isOrg = props.pathname === "/org";
+  const isSourcesList = props.pathname === "/sources";
 
   return (
     <>
@@ -373,15 +354,22 @@ function SidebarContent(props: { pathname: string; onNavigate?: () => void; show
         </div>
       )}
 
-      <nav className="flex flex-1 flex-col overflow-y-auto p-2">
-        <NavItem to="/" label="Sources" active={isHome} onNavigate={props.onNavigate} />
+      <nav className="flex flex-1 flex-col gap-px overflow-y-auto p-2">
+        <NavItem to="/" label="Getting Started" active={isHome} onNavigate={props.onNavigate} />
         <NavItem to="/secrets" label="Secrets" active={isSecrets} onNavigate={props.onNavigate} />
         <NavItem to="/org" label="Organization" active={isOrg} onNavigate={props.onNavigate} />
         <NavItem to="/billing" label="Billing" active={isBilling} onNavigate={props.onNavigate} />
 
-        <div className="mt-5 mb-1 px-2.5 text-xs font-medium uppercase tracking-widest text-muted-foreground">
-          <span>Sources</span>
-        </div>
+        <Link
+          to="/sources"
+          onClick={props.onNavigate}
+          className={[
+            "mt-5 mb-1 flex items-center rounded-md px-2.5 py-1 font-mono text-xs uppercase tracking-wide",
+            isSourcesList ? "text-foreground" : "text-muted-foreground hover:text-foreground",
+          ].join(" ")}
+        >
+          Sources
+        </Link>
 
         <SourceList pathname={props.pathname} onNavigate={props.onNavigate} />
       </nav>
@@ -446,14 +434,7 @@ export function Shell() {
                 onClick={() => setMobileSidebarOpen(false)}
                 className="text-sidebar-foreground hover:bg-sidebar-active hover:text-foreground"
               >
-                <svg viewBox="0 0 16 16" className="size-3.5">
-                  <path
-                    d="M3 3l10 10M13 3L3 13"
-                    stroke="currentColor"
-                    strokeWidth="1.4"
-                    strokeLinecap="round"
-                  />
-                </svg>
+                <XIcon className="size-4" />
               </Button>
             </div>
             <SidebarContent
@@ -477,14 +458,7 @@ export function Shell() {
             onClick={() => setMobileSidebarOpen(true)}
             className="bg-card hover:bg-accent/50"
           >
-            <svg viewBox="0 0 16 16" className="size-4">
-              <path
-                d="M2 4h12M2 8h12M2 12h12"
-                stroke="currentColor"
-                strokeWidth="1.2"
-                strokeLinecap="round"
-              />
-            </svg>
+            <MenuIcon className="size-4" />
           </Button>
           <Link to="/" className="flex items-center gap-1.5">
             <span className="font-display text-base tracking-tight text-foreground">executor</span>
diff --git a/apps/local/package.json b/apps/local/package.json
index e0d64b9b94..923c16827f 100644
--- a/apps/local/package.json
+++ b/apps/local/package.json
@@ -41,6 +41,7 @@
     "drizzle-orm": "catalog:",
     "jsonc-parser": "^3.3.1",
     "effect": "catalog:",
+    "lucide-react": "^1.7.0",
     "react": "catalog:",
     "react-dom": "catalog:"
   },
diff --git a/apps/local/src/web/shell.tsx b/apps/local/src/web/shell.tsx
index a8d3add9b9..4d447b5bea 100644
--- a/apps/local/src/web/shell.tsx
+++ b/apps/local/src/web/shell.tsx
@@ -1,6 +1,14 @@
 import { Link, Outlet, useLocation } from "@tanstack/react-router";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useAtomRefresh, Result } from "@effect-atom/atom-react";
+import {
+  ArrowDownToLine,
+  CheckIcon,
+  CopyIcon,
+  FolderIcon,
+  MenuIcon,
+  XIcon,
+} from "lucide-react";
 import { sourcesAtom, toolsAtom } from "@executor/react/api/atoms";
 import { useSourcesWithPending } from "@executor/react/api/optimistic";
 import { useScope, useScopeInfo } from "@executor/react/api/scope-context";
@@ -142,21 +150,10 @@ function UpdateCard(props: { latestVersion: string; channel: UpdateChannel }) {
   return (
     <div className="mx-2 mb-2 rounded-xl border border-primary/25 bg-primary/[0.06] p-3">
       <div className="flex items-center gap-2">
-        <div className="flex size-5 shrink-0 items-center justify-center rounded-full bg-primary/15">
-          <svg viewBox="0 0 16 16" fill="none" className="size-3 text-primary">
-            <path
-              d="M8 3v7M5 7l3 3 3-3"
-              stroke="currentColor"
-              strokeWidth="1.4"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-            <path d="M3 12h10" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
-          </svg>
-        </div>
+        <ArrowDownToLine className="size-4 shrink-0 text-primary" />
         <div className="min-w-0">
-          <p className="text-xs font-semibold text-foreground">Update available</p>
-          <p className="text-sm text-muted-foreground">v{props.latestVersion}</p>
+          <p className="text-sm font-semibold text-foreground">Update available</p>
+          <p className="text-sm text-muted-foreground tabular-nums">v{props.latestVersion}</p>
         </div>
       </div>
       <Button
@@ -166,37 +163,11 @@ function UpdateCard(props: { latestVersion: string; channel: UpdateChannel }) {
         className="mt-2.5 flex w-full items-center justify-between gap-2 rounded-lg border-border/60 bg-background/50 px-2.5 py-1.5 text-left hover:bg-background/80"
       >
         <code className="truncate font-mono text-xs text-sidebar-foreground">{command}</code>
-        <span className="shrink-0 text-muted-foreground transition-colors group-hover:text-foreground">
-          {copied ? (
-            <svg viewBox="0 0 16 16" fill="none" className="size-3 text-primary">
-              <path
-                d="M3 8.5l3.5 3.5L13 4"
-                stroke="currentColor"
-                strokeWidth="1.4"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          ) : (
-            <svg viewBox="0 0 16 16" fill="none" className="size-3">
-              <rect
-                x="5"
-                y="5"
-                width="8"
-                height="8"
-                rx="1.5"
-                stroke="currentColor"
-                strokeWidth="1.2"
-              />
-              <path
-                d="M3 11V3.5A.5.5 0 013.5 3H11"
-                stroke="currentColor"
-                strokeWidth="1.2"
-                strokeLinecap="round"
-              />
-            </svg>
-          )}
-        </span>
+        {copied ? (
+          <CheckIcon className="size-4 shrink-0 text-primary" />
+        ) : (
+          <CopyIcon className="size-4 shrink-0 text-muted-foreground" />
+        )}
       </Button>
     </div>
   );
@@ -210,9 +181,9 @@ function NavItem(props: { to: string; label: string; active: boolean; onNavigate
       to={props.to}
       onClick={props.onNavigate}
       className={[
-        "flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors",
+        "flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm",
         props.active
-          ? "bg-sidebar-active text-foreground font-medium"
+          ? "bg-sidebar-active text-foreground"
           : "text-sidebar-foreground hover:bg-sidebar-active/60 hover:text-foreground",
       ].join(" ")}
     >
@@ -229,10 +200,10 @@ function SourceList(props: { pathname: string; onNavigate?: () => void }) {
 
   return Result.match(sources, {
     onInitial: () => (
-      <div className="px-2.5 py-2 text-xs text-muted-foreground">Loading…</div>
+      <div className="px-2.5 py-2 text-sm text-muted-foreground">Loading…</div>
     ),
     onFailure: () => (
-      <div className="px-2.5 py-2 text-xs text-muted-foreground">No sources yet</div>
+      <div className="px-2.5 py-2 text-sm text-muted-foreground">No sources yet</div>
     ),
     onSuccess: ({ value }) =>
       value.length === 0 ? (
@@ -252,15 +223,15 @@ function SourceList(props: { pathname: string; onNavigate?: () => void }) {
                 params={{ namespace: s.id }}
                 onClick={props.onNavigate}
                 className={[
-                  "group flex items-center gap-2 rounded-md px-2.5 py-1.5 text-xs transition-colors",
+                  "group flex items-center gap-2 rounded-md px-2.5 py-1.5 text-sm",
                   active
-                    ? "bg-sidebar-active text-foreground font-medium"
+                    ? "bg-sidebar-active text-foreground"
                     : "text-sidebar-foreground hover:bg-sidebar-active/60 hover:text-foreground",
                 ].join(" ")}
               >
                 <SourceFavicon url={s.url} />
                 <span className="flex-1 truncate">{s.name}</span>
-                <span className="rounded bg-secondary/50 px-1 py-px text-xs font-medium text-muted-foreground">
+                <span className="rounded bg-secondary/50 px-1 py-px text-xs text-muted-foreground">
                   {s.kind}
                 </span>
               </Link>
@@ -280,15 +251,9 @@ function ScopeLabel() {
   const folder = parts[parts.length - 1] || name;
 
   return (
-    <div className="mb-1.5 flex items-center gap-1.5 rounded-md px-2.5 py-1.5" title={name}>
-      <svg viewBox="0 0 16 16" fill="none" className="size-3.5 shrink-0 text-muted-foreground">
-        <path
-          d="M2 4.5C2 3.67 2.67 3 3.5 3h3.09a1 1 0 0 1 .7.29l1.42 1.42a1 1 0 0 0 .7.29H12.5c.83 0 1.5.67 1.5 1.5v5.5c0 .83-.67 1.5-1.5 1.5h-9A1.5 1.5 0 0 1 2 12V4.5z"
-          stroke="currentColor"
-          strokeWidth="1.2"
-        />
-      </svg>
-      <span className="truncate text-xs font-medium text-foreground/80">{folder}</span>
+    <div className="flex items-center gap-1.5 rounded-md px-2.5 py-1.5" title={name}>
+      <FolderIcon className="size-4 shrink-0 text-muted-foreground" />
+      <span className="truncate text-sm font-medium text-foreground/80">{folder}</span>
     </div>
   );
 }
@@ -305,6 +270,7 @@ function SidebarContent(props: {
 }) {
   const isHome = props.pathname === "/";
   const isSecrets = props.pathname === "/secrets";
+  const isSourcesList = props.pathname === "/sources";
 
   return (
     <>
@@ -316,15 +282,22 @@ function SidebarContent(props: {
         </div>
       )}
 
-      <nav className="flex flex-1 flex-col overflow-y-auto p-2">
+      <nav className="flex flex-1 flex-col gap-px overflow-y-auto p-2">
         <ScopeLabel />
-        <NavItem to="/" label="Sources" active={isHome} onNavigate={props.onNavigate} />
+        <NavItem to="/" label="Getting Started" active={isHome} onNavigate={props.onNavigate} />
         <NavItem to="/secrets" label="Secrets" active={isSecrets} onNavigate={props.onNavigate} />
 
         {/* Sources list */}
-        <div className="mt-5 mb-1 px-2.5 text-xs font-medium uppercase tracking-widest text-muted-foreground">
-          <span>Sources</span>
-        </div>
+        <Link
+          to="/sources"
+          onClick={props.onNavigate}
+          className={[
+            "mt-5 mb-1 flex items-center rounded-md px-2.5 py-1 font-mono text-xs uppercase tracking-wide",
+            isSourcesList ? "text-foreground" : "text-muted-foreground hover:text-foreground",
+          ].join(" ")}
+        >
+          Sources
+        </Link>
 
         <SourceList pathname={props.pathname} onNavigate={props.onNavigate} />
       </nav>
@@ -441,14 +414,7 @@ export function Shell() {
                 onClick={() => setMobileSidebarOpen(false)}
                 className="text-sidebar-foreground hover:bg-sidebar-active hover:text-foreground"
               >
-                <svg viewBox="0 0 16 16" className="size-3.5">
-                  <path
-                    d="M3 3l10 10M13 3L3 13"
-                    stroke="currentColor"
-                    strokeWidth="1.4"
-                    strokeLinecap="round"
-                  />
-                </svg>
+                <XIcon className="size-4" />
               </Button>
             </div>
             <SidebarContent
@@ -474,14 +440,7 @@ export function Shell() {
             onClick={() => setMobileSidebarOpen(true)}
             className="bg-card hover:bg-accent/50"
           >
-            <svg viewBox="0 0 16 16" className="size-4">
-              <path
-                d="M2 4h12M2 8h12M2 12h12"
-                stroke="currentColor"
-                strokeWidth="1.2"
-                strokeLinecap="round"
-              />
-            </svg>
+            <MenuIcon className="size-4" />
           </Button>
           <Link to="/" className="flex items-center gap-1.5">
             <span className="font-display text-base tracking-tight text-foreground">executor</span>
diff --git a/bun.lock b/bun.lock
index cce3a10945..5b5353af57 100644
--- a/bun.lock
+++ b/bun.lock
@@ -84,6 +84,7 @@
         "drizzle-orm": "catalog:",
         "effect": "catalog:",
         "jose": "^5.6.3",
+        "lucide-react": "^1.7.0",
         "postgres": "^3.4.9",
         "react": "catalog:",
         "react-dom": "catalog:",
@@ -148,6 +149,7 @@
         "drizzle-orm": "catalog:",
         "effect": "catalog:",
         "jsonc-parser": "^3.3.1",
+        "lucide-react": "^1.7.0",
         "react": "catalog:",
         "react-dom": "catalog:",
       },
@@ -879,28 +881,6 @@
 
     "@astrojs/underscore-redirects": ["@astrojs/underscore-redirects@1.0.3", "", {}, "sha512-cxnGSw+sJigBLdX4TMSZKkzV6C3gMLJMucDk2W+n281Xhie68T2/9f1+1NMNDCZsc5i0FED7Qt5I10g2O9wtZg=="],
 
-    "@azure/abort-controller": ["@azure/abort-controller@2.1.2", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-nBrLsEWm4J2u5LpAPjxADTlq3trDgVZZXHNKabeXZtpq3d3AbN/KGO82R87rdDz5/lYB024rtEf10/q0urNgsA=="],
-
-    "@azure/core-auth": ["@azure/core-auth@1.10.1", "", { "dependencies": { "@azure/abort-controller": "^2.1.2", "@azure/core-util": "^1.13.0", "tslib": "^2.6.2" } }, "sha512-ykRMW8PjVAn+RS6ww5cmK9U2CyH9p4Q88YJwvUslfuMmN98w/2rdGRLPqJYObapBCdzBVeDgYWdJnFPFb7qzpg=="],
-
-    "@azure/core-client": ["@azure/core-client@1.10.1", "", { "dependencies": { "@azure/abort-controller": "^2.1.2", "@azure/core-auth": "^1.10.0", "@azure/core-rest-pipeline": "^1.22.0", "@azure/core-tracing": "^1.3.0", "@azure/core-util": "^1.13.0", "@azure/logger": "^1.3.0", "tslib": "^2.6.2" } }, "sha512-Nh5PhEOeY6PrnxNPsEHRr9eimxLwgLlpmguQaHKBinFYA/RU9+kOYVOQqOrTsCL+KSxrLLl1gD8Dk5BFW/7l/w=="],
-
-    "@azure/core-rest-pipeline": ["@azure/core-rest-pipeline@1.23.0", "", { "dependencies": { "@azure/abort-controller": "^2.1.2", "@azure/core-auth": "^1.10.0", "@azure/core-tracing": "^1.3.0", "@azure/core-util": "^1.13.0", "@azure/logger": "^1.3.0", "@typespec/ts-http-runtime": "^0.3.4", "tslib": "^2.6.2" } }, "sha512-Evs1INHo+jUjwHi1T6SG6Ua/LHOQBCLuKEEE6efIpt4ZOoNonaT1kP32GoOcdNDbfqsD2445CPri3MubBy5DEQ=="],
-
-    "@azure/core-tracing": ["@azure/core-tracing@1.3.1", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-9MWKevR7Hz8kNzzPLfX4EAtGM2b8mr50HPDBvio96bURP/9C+HjdH3sBlLSNNrvRAr5/k/svoH457gB5IKpmwQ=="],
-
-    "@azure/core-util": ["@azure/core-util@1.13.1", "", { "dependencies": { "@azure/abort-controller": "^2.1.2", "@typespec/ts-http-runtime": "^0.3.0", "tslib": "^2.6.2" } }, "sha512-XPArKLzsvl0Hf0CaGyKHUyVgF7oDnhKoP85Xv6M4StF/1AhfORhZudHtOyf2s+FcbuQ9dPRAjB8J2KvRRMUK2A=="],
-
-    "@azure/identity": ["@azure/identity@4.13.1", "", { "dependencies": { "@azure/abort-controller": "^2.0.0", "@azure/core-auth": "^1.9.0", "@azure/core-client": "^1.9.2", "@azure/core-rest-pipeline": "^1.17.0", "@azure/core-tracing": "^1.0.0", "@azure/core-util": "^1.11.0", "@azure/logger": "^1.0.0", "@azure/msal-browser": "^5.5.0", "@azure/msal-node": "^5.1.0", "open": "^10.1.0", "tslib": "^2.2.0" } }, "sha512-5C/2WD5Vb1lHnZS16dNQRPMjN6oV/Upba+C9nBIs15PmOi6A3ZGs4Lr2u60zw4S04gi+u3cEXiqTVP7M4Pz3kw=="],
-
-    "@azure/logger": ["@azure/logger@1.3.0", "", { "dependencies": { "@typespec/ts-http-runtime": "^0.3.0", "tslib": "^2.6.2" } }, "sha512-fCqPIfOcLE+CGqGPd66c8bZpwAji98tZ4JI9i/mlTNTlsIWslCfpg48s/ypyLxZTump5sypjrKn2/kY7q8oAbA=="],
-
-    "@azure/msal-browser": ["@azure/msal-browser@5.6.3", "", { "dependencies": { "@azure/msal-common": "16.4.1" } }, "sha512-sTjMtUm+bJpENU/1WlRzHEsgEHppZDZ1EtNyaOODg/sQBtMxxJzGB+MOCM+T2Q5Qe1fKBrdxUmjyRxm0r7Ez9w=="],
-
-    "@azure/msal-common": ["@azure/msal-common@16.4.1", "", {}, "sha512-Bl8f+w37xkXsYh7QRkAKCFGYtWMYuOVO7Lv+BxILrvGz3HbIEF22Pt0ugyj0QPOl6NLrHcnNUQ9yeew98P/5iw=="],
-
-    "@azure/msal-node": ["@azure/msal-node@5.1.2", "", { "dependencies": { "@azure/msal-common": "16.4.1", "jsonwebtoken": "^9.0.0", "uuid": "^8.3.0" } }, "sha512-DoeSJ9U5KPAIZoHsPywvfEj2MhBniQe0+FSpjLUTdWoIkI999GB5USkW6nNEHnIaLVxROHXvprWA1KzdS1VQ4A=="],
-
     "@babel/code-frame": ["@babel/code-frame@7.27.1", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.27.1", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg=="],
 
     "@babel/compat-data": ["@babel/compat-data@7.29.0", "", {}, "sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg=="],
@@ -2349,8 +2329,6 @@
 
     "@typescript/native-preview-win32-x64": ["@typescript/native-preview-win32-x64@7.0.0-dev.20260415.1", "", { "os": "win32", "cpu": "x64" }, "sha512-Z+rclKC7FqkUsqQ+ErgWJmf5J55LEl/rooFq71prC6V0vCBa5yLMmLBmFxZLLj2BsCBuwbN2O7aWUWrpCUEkmw=="],
 
-    "@typespec/ts-http-runtime": ["@typespec/ts-http-runtime@0.3.5", "", { "dependencies": { "http-proxy-agent": "^7.0.0", "https-proxy-agent": "^7.0.0", "tslib": "^2.6.2" } }, "sha512-yURCknZhvywvQItHMMmFSo+fq5arCUIyz/CVk7jD89MSai7dkaX8ufjCWp3NttLojoTVbcE72ri+be/TnEbMHw=="],
-
     "@ungap/structured-clone": ["@ungap/structured-clone@1.3.0", "", {}, "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="],
 
     "@upsetjs/venn.js": ["@upsetjs/venn.js@2.0.0", "", { "optionalDependencies": { "d3-selection": "^3.0.0", "d3-transition": "^3.0.1" } }, "sha512-WbBhLrooyePuQ1VZxrJjtLvTc4NVfpOyKx0sKqioq9bX1C1m7Jgykkn8gLrtwumBioXIqam8DLxp88Adbue6Hw=="],
@@ -2537,8 +2515,6 @@
 
     "buffer-crc32": ["buffer-crc32@0.2.13", "", {}, "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ=="],
 
-    "buffer-equal-constant-time": ["buffer-equal-constant-time@1.0.1", "", {}, "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA=="],
-
     "buffer-from": ["buffer-from@1.1.2", "", {}, "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="],
 
     "buffer-xor": ["buffer-xor@1.0.3", "", {}, "sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ=="],
@@ -2915,8 +2891,6 @@
 
     "eastasianwidth": ["eastasianwidth@0.2.0", "", {}, "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="],
 
-    "ecdsa-sig-formatter": ["ecdsa-sig-formatter@1.0.11", "", { "dependencies": { "safe-buffer": "^5.0.1" } }, "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ=="],
-
     "ee-first": ["ee-first@1.1.1", "", {}, "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="],
 
     "effect": ["effect@3.21.0", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "fast-check": "^3.23.1" } }, "sha512-PPN80qRokCd1f015IANNhrwOnLO7GrrMQfk4/lnZRE/8j7UPWrNNjPV0uBrZutI/nHzernbW+J0hdqQysHiSnQ=="],
@@ -3447,12 +3421,6 @@
 
     "jsonfile": ["jsonfile@4.0.0", "", { "optionalDependencies": { "graceful-fs": "^4.1.6" } }, "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg=="],
 
-    "jsonwebtoken": ["jsonwebtoken@9.0.3", "", { "dependencies": { "jws": "^4.0.1", "lodash.includes": "^4.3.0", "lodash.isboolean": "^3.0.3", "lodash.isinteger": "^4.0.4", "lodash.isnumber": "^3.0.3", "lodash.isplainobject": "^4.0.6", "lodash.isstring": "^4.0.1", "lodash.once": "^4.0.0", "ms": "^2.1.1", "semver": "^7.5.4" } }, "sha512-MT/xP0CrubFRNLNKvxJ2BYfy53Zkm++5bX9dtuPbqAeQpTVe0MQTFhao8+Cp//EmJp244xt6Drw/GVEGCUj40g=="],
-
-    "jwa": ["jwa@2.0.1", "", { "dependencies": { "buffer-equal-constant-time": "^1.0.1", "ecdsa-sig-formatter": "1.0.11", "safe-buffer": "^5.0.1" } }, "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg=="],
-
-    "jws": ["jws@4.0.1", "", { "dependencies": { "jwa": "^2.0.1", "safe-buffer": "^5.0.1" } }, "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA=="],
-
     "katex": ["katex@0.16.45", "", { "dependencies": { "commander": "^8.3.0" }, "bin": { "katex": "cli.js" } }, "sha512-pQpZbdBu7wCTmQUh7ufPmLr0pFoObnGUoL/yhtwJDgmmQpbkg/0HSVti25Fu4rmd1oCR6NGWe9vqTWuWv3GcNA=="],
 
     "keyv": ["keyv@4.5.4", "", { "dependencies": { "json-buffer": "3.0.1" } }, "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw=="],
@@ -3517,20 +3485,6 @@
 
     "lodash-es": ["lodash-es@4.18.1", "", {}, "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A=="],
 
-    "lodash.includes": ["lodash.includes@4.3.0", "", {}, "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w=="],
-
-    "lodash.isboolean": ["lodash.isboolean@3.0.3", "", {}, "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg=="],
-
-    "lodash.isinteger": ["lodash.isinteger@4.0.4", "", {}, "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA=="],
-
-    "lodash.isnumber": ["lodash.isnumber@3.0.3", "", {}, "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw=="],
-
-    "lodash.isplainobject": ["lodash.isplainobject@4.0.6", "", {}, "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="],
-
-    "lodash.isstring": ["lodash.isstring@4.0.1", "", {}, "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw=="],
-
-    "lodash.once": ["lodash.once@4.1.1", "", {}, "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg=="],
-
     "lodash.startcase": ["lodash.startcase@4.4.0", "", {}, "sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg=="],
 
     "log-symbols": ["log-symbols@6.0.0", "", { "dependencies": { "chalk": "^5.3.0", "is-unicode-supported": "^1.3.0" } }, "sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw=="],
@@ -4729,8 +4683,6 @@
 
     "@astrojs/cloudflare/vite": ["vite@7.3.2", "", { "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg=="],
 
-    "@azure/msal-node/uuid": ["uuid@8.3.2", "", { "bin": { "uuid": "dist/bin/uuid" } }, "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="],
-
     "@babel/core/@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
 
     "@babel/core/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],

From 5126beb7255b46b983a45b938f3429c11737ca93 Mon Sep 17 00:00:00 2001
From: mrzmyr <mrzmyr@users.noreply.github.com>
Date: Sat, 18 Apr 2026 09:44:53 +0200
Subject: [PATCH 3/6] feat(react): inline secret creation in SecretPicker +
 extract AddSecretDialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds an `AddSecretDialog` component and wires the `SecretPicker`
popover to offer "+ New secret" inline. Also adds two opt-in
styling props to `SecretPicker` (`showChevron`, `invalid`) that the
upcoming `SourceConfig` primitive relies on to make the picker
visually consistent with a select/input.

PR 03a of 12. This is the first of the new shared primitives the
source-detail refactor is built on. Purely additive — existing
callers get no behaviour change because both new props default to
the old behaviour. Lets PR 03b (KeyValueList) and PR 04a
(SourceConfig) reuse inline secret creation without re-implementing
the dialog.

- NEW `packages/react/src/plugins/add-secret-dialog.tsx`: small,
  self-contained dialog that creates a secret via the
  `setSecret` mutation atom and refreshes `secretsAtom`.
- `packages/react/src/plugins/secret-picker.tsx`:
  - Add `showChevron` prop — renders a dropdown chevron affordance.
  - Add `invalid` prop — applies a destructive-ring style.
  - Add a separator + "New secret" entry in the Command popover
    that opens `AddSecretDialog`.
  - Auto-selects the newly-created secret via the dialog's onCreated
    callback.

- Previous (PR 02 — lucide-react + shell): supplies the icon package
  the new lucide imports resolve against in the apps that consume
  `@executor/react`. packages/react already had lucide-react as a
  dep, so no dep change here.
- Next (PR 03b — KeyValueList): uses the enhanced `SecretPicker`
  (with `invalid`) for rows whose value type is `secret`.
---
 .../react/src/plugins/add-secret-dialog.tsx   | 130 +++++++++++++
 .../react/src/plugins/secret-header-auth.tsx  |   1 -
 packages/react/src/plugins/secret-picker.tsx  | 176 ++++++++++--------
 3 files changed, 231 insertions(+), 76 deletions(-)
 create mode 100644 packages/react/src/plugins/add-secret-dialog.tsx

diff --git a/packages/react/src/plugins/add-secret-dialog.tsx b/packages/react/src/plugins/add-secret-dialog.tsx
new file mode 100644
index 0000000000..6d268b8cab
--- /dev/null
+++ b/packages/react/src/plugins/add-secret-dialog.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import { useState } from "react";
+import { useAtomSet, useAtomRefresh } from "@effect-atom/atom-react";
+
+import { SecretId } from "@executor/sdk";
+import { secretsAtom, setSecret } from "../api/atoms";
+import { useScope } from "../api/scope-context";
+import { Button } from "../components/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../components/dialog";
+import { Input } from "../components/input";
+import { Label } from "../components/label";
+
+/**
+ * Dialog for creating a new secret in the current scope. On success calls
+ * `onCreated(secretId)` and closes itself via `onOpenChange(false)`.
+ */
+export function AddSecretDialog(props: {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly onCreated: (secretId: string) => void;
+}) {
+  const [secretId, setSecretId] = useState("");
+  const [secretName, setSecretName] = useState("");
+  const [secretValue, setSecretValue] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const scopeId = useScope();
+  const doSet = useAtomSet(setSecret, { mode: "promise" });
+  const refreshSecrets = useAtomRefresh(secretsAtom(scopeId));
+
+  const handleSave = async () => {
+    if (!secretId.trim() || !secretValue.trim()) return;
+    setSaving(true);
+    setError(null);
+    try {
+      await doSet({
+        path: { scopeId },
+        payload: {
+          id: SecretId.make(secretId.trim()),
+          name: secretName.trim() || secretId.trim(),
+          value: secretValue.trim(),
+        },
+      });
+      refreshSecrets();
+      props.onCreated(secretId.trim());
+      // Reset form
+      setSecretId("");
+      setSecretName("");
+      setSecretValue("");
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to save secret");
+      setSaving(false);
+    }
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      setSecretId("");
+      setSecretName("");
+      setSecretValue("");
+      setError(null);
+      setSaving(false);
+    }
+    props.onOpenChange(open);
+  };
+
+  return (
+    <Dialog open={props.open} onOpenChange={handleOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Add Secret</DialogTitle>
+          <DialogDescription>
+            Create a new secret to use for authentication. The value is stored securely and never
+            exposed in plaintext.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-3">
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5">
+              <Label className="text-sm">ID</Label>
+              <Input
+                value={secretId}
+                onChange={(e) => setSecretId((e.target as HTMLInputElement).value)}
+                placeholder="my-api-key"
+                className="font-mono text-sm"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">Label</Label>
+              <Input
+                value={secretName}
+                onChange={(e) => setSecretName((e.target as HTMLInputElement).value)}
+                placeholder="My API Key"
+                className="text-sm"
+              />
+            </div>
+          </div>
+          <div className="space-y-1.5">
+            <Label className="text-sm">Value</Label>
+            <Input
+              type="password"
+              value={secretValue}
+              onChange={(e) => setSecretValue((e.target as HTMLInputElement).value)}
+              placeholder="paste your secret value…"
+              className="font-mono text-sm"
+            />
+          </div>
+          {error && <p className="text-sm text-destructive">{error}</p>}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => handleOpenChange(false)} disabled={saving}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave} disabled={!secretId.trim() || !secretValue.trim() || saving}>
+            {saving ? "Creating…" : "Create secret"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/packages/react/src/plugins/secret-header-auth.tsx b/packages/react/src/plugins/secret-header-auth.tsx
index f426fc8d64..bfdfaef581 100644
--- a/packages/react/src/plugins/secret-header-auth.tsx
+++ b/packages/react/src/plugins/secret-header-auth.tsx
@@ -407,7 +407,6 @@ export function SecretHeaderAuthRow(props: {
         value={secretId}
         onSelect={onSelectSecret}
         secrets={existingSecrets}
-        onCreateNew={() => setCreating(true)}
       />
 
       {secretId && name.trim() && (
diff --git a/packages/react/src/plugins/secret-picker.tsx b/packages/react/src/plugins/secret-picker.tsx
index 3be19bc948..b3f0379816 100644
--- a/packages/react/src/plugins/secret-picker.tsx
+++ b/packages/react/src/plugins/secret-picker.tsx
@@ -1,6 +1,7 @@
-import { useState, type ChangeEvent, type FocusEvent } from "react";
-import { PlusIcon } from "lucide-react";
+import { useMemo, useState, type ChangeEvent, type FocusEvent } from "react";
+import { ChevronDownIcon, PlusIcon } from "lucide-react";
 
+import { cn } from "../lib/utils";
 import { Input } from "../components/input";
 import {
   Command,
@@ -11,6 +12,7 @@ import {
   CommandSeparator,
 } from "../components/command";
 import { Popover, PopoverAnchor, PopoverContent } from "../components/popover";
+import { AddSecretDialog } from "./add-secret-dialog";
 
 export interface SecretPickerSecret {
   readonly id: string;
@@ -35,53 +37,84 @@ export function SecretPicker(props: {
   readonly onSelect: (secretId: string) => void;
   readonly secrets: readonly SecretPickerSecret[];
   readonly placeholder?: string;
-  /** When provided, renders a "+ New secret" row at the bottom of the dropdown. */
-  readonly onCreateNew?: () => void;
+  /** Show a chevron indicator to make the input look like a select dropdown. */
+  readonly showChevron?: boolean;
+  /** Mark the field as invalid (renders destructive ring). */
+  readonly invalid?: boolean;
 }) {
-  const { value, onSelect, secrets, placeholder = "Search secrets…", onCreateNew } = props;
+  const { value, onSelect, secrets, placeholder = "Search secrets…", showChevron = false, invalid = false } = props;
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
+  const [addDialogOpen, setAddDialogOpen] = useState(false);
 
   const selected = secrets.find((secret) => secret.id === value) ?? null;
 
-  const grouped = new Map<string, SecretPickerSecret[]>();
-  for (const secret of secrets) {
-    const key = providerLabel(secret.provider);
-    const group = grouped.get(key);
-    if (group) {
-      group.push(secret);
-    } else {
-      grouped.set(key, [secret]);
+  // Group + sort only when the secrets list changes (not on every keystroke).
+  const groups = useMemo<readonly (readonly [string, readonly SecretPickerSecret[]])[]>(() => {
+    const grouped = new Map<string, SecretPickerSecret[]>();
+    for (const secret of secrets) {
+      const key = providerLabel(secret.provider);
+      const group = grouped.get(key);
+      if (group) {
+        group.push(secret);
+      } else {
+        grouped.set(key, [secret]);
+      }
     }
-  }
+    return [...grouped.entries()]
+      .map(
+        ([label, items]) =>
+          [label, [...items].sort((a, b) => a.name.localeCompare(b.name))] as const,
+      )
+      .sort(([a], [b]) => a.localeCompare(b));
+  }, [secrets]);
 
-  const groups: [string, SecretPickerSecret[]][] = [...grouped.entries()]
-    .map(([label, items]): [string, SecretPickerSecret[]] => [
-      label,
-      [...items].sort((a, b) => a.name.localeCompare(b.name)),
-    ])
-    .sort(([a], [b]) => a.localeCompare(b));
   const showGroupHeadings = groups.length > 1;
 
+  // Apply query filter once per keystroke, not per-group in render.
+  const filteredGroups = useMemo(() => {
+    const lowerQuery = query.trim().toLowerCase();
+    if (!lowerQuery) return groups;
+    const result: (readonly [string, readonly SecretPickerSecret[]])[] = [];
+    for (const [label, items] of groups) {
+      const filtered = items.filter(
+        (secret) =>
+          secret.name.toLowerCase().includes(lowerQuery) ||
+          secret.id.toLowerCase().includes(lowerQuery),
+      );
+      if (filtered.length > 0) result.push([label, filtered] as const);
+    }
+    return result;
+  }, [groups, query]);
+
   return (
     <div className="relative w-full">
       <Popover open={open} onOpenChange={setOpen} modal={false}>
         <PopoverAnchor asChild>
-          <Input
-            value={open ? query : selected ? selected.name : ""}
-            onChange={(event: ChangeEvent<HTMLInputElement>) => {
-              setQuery(event.target.value);
-              if (!open) setOpen(true);
-            }}
-            onFocus={() => setOpen(true)}
-            onBlur={(event: FocusEvent<HTMLInputElement>) => {
-              const related = event.relatedTarget as HTMLElement | null;
-              if (related?.closest("[data-slot=popover-content]")) return;
-              setOpen(false);
-            }}
-            placeholder={placeholder}
-            className="text-sm"
-          />
+          <div className="relative">
+            <Input
+              value={open ? query : selected ? selected.name : ""}
+              onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                setQuery(event.target.value);
+                if (!open) setOpen(true);
+              }}
+              onFocus={() => setOpen(true)}
+              onBlur={(event: FocusEvent<HTMLInputElement>) => {
+                const related = event.relatedTarget as HTMLElement | null;
+                if (related?.closest("[data-slot=popover-content]")) return;
+                setOpen(false);
+              }}
+              placeholder={placeholder}
+              aria-invalid={invalid || undefined}
+              className={cn("text-sm", showChevron && "pr-8")}
+            />
+            {showChevron && (
+              <ChevronDownIcon
+                className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground/50"
+                aria-hidden
+              />
+            )}
+          </div>
         </PopoverAnchor>
         <PopoverContent
           className="w-(--radix-popover-trigger-width) p-0"
@@ -97,58 +130,51 @@ export function SecretPicker(props: {
         >
           <Command shouldFilter={false}>
             <CommandList>
+              <CommandGroup>
+                <CommandItem
+                  onSelect={() => {
+                    setOpen(false);
+                    setQuery("");
+                    setAddDialogOpen(true);
+                  }}
+                  className="gap-2 text-primary"
+                >
+                  <PlusIcon className="size-3.5" />
+                  <span>Add secret…</span>
+                </CommandItem>
+              </CommandGroup>
+              <CommandSeparator />
               <CommandEmpty>No secrets found</CommandEmpty>
-              {groups.map(([label, items]) => {
-                const lowerQuery = query.toLowerCase();
-                const filtered = lowerQuery
-                  ? items.filter(
-                      (secret) =>
-                        secret.name.toLowerCase().includes(lowerQuery) ||
-                        secret.id.toLowerCase().includes(lowerQuery),
-                    )
-                  : items;
-                if (filtered.length === 0) return null;
-                return (
-                  <CommandGroup key={label} heading={showGroupHeadings ? label : undefined}>
-                    {filtered.map((secret) => (
-                      <CommandItem
-                        key={secret.id}
-                        value={`${secret.name} ${secret.id}`}
-                        onSelect={() => {
-                          onSelect(secret.id);
-                          setOpen(false);
-                          setQuery("");
-                        }}
-                      >
-                        <span className="truncate">{secret.name}</span>
-                      </CommandItem>
-                    ))}
-                  </CommandGroup>
-                );
-              })}
-              {onCreateNew && (
-                <>
-                  {secrets.length > 0 && <CommandSeparator />}
-                  <CommandGroup>
+              {filteredGroups.map(([label, items]) => (
+                <CommandGroup key={label} heading={showGroupHeadings ? label : undefined}>
+                  {items.map((secret) => (
                     <CommandItem
-                      value="__create_new__"
+                      key={secret.id}
+                      value={`${secret.name} ${secret.id}`}
                       onSelect={() => {
-                        onCreateNew();
+                        onSelect(secret.id);
                         setOpen(false);
                         setQuery("");
                       }}
-                      className="text-muted-foreground data-[selected=true]:text-foreground"
                     >
-                      <PlusIcon aria-hidden className="size-3.5" />
-                      <span>New secret</span>
+                      <span className="truncate">{secret.name}</span>
                     </CommandItem>
-                  </CommandGroup>
-                </>
-              )}
+                  ))}
+                </CommandGroup>
+              ))}
             </CommandList>
           </Command>
         </PopoverContent>
       </Popover>
+
+      <AddSecretDialog
+        open={addDialogOpen}
+        onOpenChange={setAddDialogOpen}
+        onCreated={(secretId) => {
+          onSelect(secretId);
+          setAddDialogOpen(false);
+        }}
+      />
     </div>
   );
 }

From dced20613a2daee8000d4ba417055e62af00f488 Mon Sep 17 00:00:00 2001
From: mrzmyr <mrzmyr@users.noreply.github.com>
Date: Sat, 18 Apr 2026 09:45:09 +0200
Subject: [PATCH 4/6] feat(react): add KeyValueList (additive, replaces
 HeadersList in later PRs)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Introduces a new `key-value-list` primitive: a generic list where
each row has a `key`, a `value`, and a `type` of `"text" | "secret"`.
When the row is of secret-type, the value renders as a `SecretPicker`.
Each row has a stable `id` so React's reconciliation never loses
input focus across re-orders/removes.

## Stack role

PR 03b of 12. This is the load-bearing replacement for the existing
`headers-list` + `secret-header-auth` primitives, which are still in
use on main. This PR is purely additive — the old files stay for now
and are deleted in PR 07c once every call site has migrated.

## Changes
- NEW `packages/react/src/plugins/key-value-list.tsx`:
  - `KeyValueEntry` type (stable `id`, `key`, `value`, `type`).
  - `newKeyValueEntry()` helper that mints a fresh `id` — the preferred
    constructor so callers don't forget to assign one (losing focus on
    re-render otherwise).
  - `KeyValueList` component: renders an `Input` for `key`, a
    `NativeSelect` for `type`, and either an `Input` (text) or
    `SecretPicker` (secret) for `value`.
  - Empty-state prop, customisable placeholders.

## Relationship to neighbours
- Previous (PR 03a — SecretPicker/AddSecretDialog): provides the
  enhanced picker used by `type === "secret"` rows.
- Next (PR 04a — SourceConfig): the SourceConfig component consumes
  `KeyValueList` / `KeyValueEntry` for its "Headers" and
  "Query params" sections.
---
 packages/react/src/plugins/key-value-list.tsx | 169 ++++++++++++++++++
 1 file changed, 169 insertions(+)
 create mode 100644 packages/react/src/plugins/key-value-list.tsx

diff --git a/packages/react/src/plugins/key-value-list.tsx b/packages/react/src/plugins/key-value-list.tsx
new file mode 100644
index 0000000000..b94a85b44f
--- /dev/null
+++ b/packages/react/src/plugins/key-value-list.tsx
@@ -0,0 +1,169 @@
+import { useId, type ReactNode } from "react";
+import { TrashIcon } from "lucide-react";
+
+import { Button } from "../components/button";
+import { CardStackEmpty } from "../components/card-stack";
+import { Input } from "../components/input";
+import { NativeSelect, NativeSelectOption } from "../components/native-select";
+import { SecretPicker, type SecretPickerSecret } from "./secret-picker";
+
+export type KeyValueType = "text" | "secret";
+
+export interface KeyValueEntry {
+  /**
+   * Stable identity for this row. Used as the React `key` so that focus and
+   * uncontrolled state do not leak across re-orders/removes. Callers should
+   * generate it once when adding a new row (e.g. `newKeyValueEntry()` below).
+   */
+  id: string;
+  key: string;
+  value: string;
+  type: KeyValueType;
+}
+
+/**
+ * Create a new empty `KeyValueEntry` with a fresh stable `id`. Prefer this
+ * helper over hand-constructing entries so the row identity is never missed.
+ */
+export function newKeyValueEntry(overrides?: Partial<Omit<KeyValueEntry, "id">>): KeyValueEntry {
+  return {
+    id: generateEntryId(),
+    key: overrides?.key ?? "",
+    value: overrides?.value ?? "",
+    type: overrides?.type ?? "text",
+  };
+}
+
+function generateEntryId(): string {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  // Fallback for environments without crypto.randomUUID (older test harnesses).
+  return `kv-${Math.random().toString(36).slice(2)}-${Date.now().toString(36)}`;
+}
+
+export interface KeyValueListProps {
+  readonly entries: readonly KeyValueEntry[];
+  readonly onChange: (entries: readonly KeyValueEntry[]) => void;
+  readonly secrets?: readonly SecretPickerSecret[];
+  readonly emptyLabel?: ReactNode;
+  readonly keyPlaceholder?: string;
+  readonly valuePlaceholder?: string;
+}
+
+/**
+ * Renders key-value rows without a wrapper. Expects to be placed inside
+ * a `CardStackContent`. The parent is responsible for the CardStack shell
+ * and header (with the add button).
+ */
+export function KeyValueList({
+  entries,
+  onChange,
+  secrets = [],
+  emptyLabel = "No entries",
+  keyPlaceholder = "Key",
+  valuePlaceholder = "Value",
+}: KeyValueListProps) {
+  const updateEntry = (id: string, update: Partial<Omit<KeyValueEntry, "id">>) => {
+    onChange(
+      entries.map((entry) => (entry.id === id ? { ...entry, ...update } : entry)),
+    );
+  };
+
+  const removeEntry = (id: string) => {
+    onChange(entries.filter((entry) => entry.id !== id));
+  };
+
+  if (entries.length === 0) {
+    return <CardStackEmpty>{emptyLabel}</CardStackEmpty>;
+  }
+
+  return (
+    <>
+      {entries.map((entry) => (
+        <KeyValueRow
+          key={entry.id}
+          entry={entry}
+          onChange={(update) => updateEntry(entry.id, update)}
+          onRemove={() => removeEntry(entry.id)}
+          secrets={secrets}
+          keyPlaceholder={keyPlaceholder}
+          valuePlaceholder={valuePlaceholder}
+        />
+      ))}
+    </>
+  );
+}
+
+function KeyValueRow(props: {
+  entry: KeyValueEntry;
+  onChange: (update: Partial<Omit<KeyValueEntry, "id">>) => void;
+  onRemove: () => void;
+  secrets: readonly SecretPickerSecret[];
+  keyPlaceholder: string;
+  valuePlaceholder: string;
+}) {
+  const keyId = useId();
+  const valueId = useId();
+  const { entry, onChange, onRemove, secrets, keyPlaceholder, valuePlaceholder } = props;
+
+  return (
+    <div className="flex items-center gap-2 px-4 py-3">
+      <div className="min-w-0 flex-1">
+        <Input
+          id={keyId}
+          value={entry.key}
+          onChange={(e) => onChange({ key: (e.target as HTMLInputElement).value })}
+          placeholder={keyPlaceholder}
+          aria-label="Key"
+          className="font-mono text-sm"
+        />
+      </div>
+      <div className="min-w-0 flex-1">
+        {entry.type === "secret" ? (
+          <SecretPicker
+            value={entry.value || null}
+            onSelect={(secretId) => onChange({ value: secretId })}
+            secrets={secrets}
+            showChevron
+          />
+        ) : (
+          <Input
+            id={valueId}
+            value={entry.value}
+            onChange={(e) => onChange({ value: (e.target as HTMLInputElement).value })}
+            placeholder={valuePlaceholder}
+            aria-label="Value"
+            className="font-mono text-sm"
+          />
+        )}
+      </div>
+      <div className="shrink-0">
+        <NativeSelect
+          value={entry.type}
+          onChange={(e) =>
+            onChange({
+              type: (e.target as HTMLSelectElement).value as KeyValueType,
+              value: "",
+            })
+          }
+          size="sm"
+          className="text-sm"
+        >
+          <NativeSelectOption value="text">Text</NativeSelectOption>
+          <NativeSelectOption value="secret">Secret</NativeSelectOption>
+        </NativeSelect>
+      </div>
+      <Button
+        variant="ghost"
+        size="icon-xs"
+        type="button"
+        className="mb-1 shrink-0 text-muted-foreground hover:text-destructive"
+        onClick={onRemove}
+        aria-label="Remove"
+      >
+        <TrashIcon className="size-4 shrink-0" />
+      </Button>
+    </div>
+  );
+}

From 165e5e8fe5dee9d31508ffa7e2a4ac596d4afda4 Mon Sep 17 00:00:00 2001
From: mrzmyr <mrzmyr@users.noreply.github.com>
Date: Sat, 18 Apr 2026 09:45:41 +0200
Subject: [PATCH 5/6] feat(react): SourceConfig primitive +
 SourceIdentityFields extensions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds the `SourceConfig` component — the central source-authoring
surface used by every Add/Edit flow — and extends
`SourceIdentityFields` / `useSourceIdentity` with the props needed
to support it (endpoint row, hints, custom labels, prepend slot).

## Stack role

PR 04a of 12. Purely additive: no call sites migrate to it yet.
PRs 07a/07b/07c wire Add/Edit flows in the graphql, mcp, and
openapi plugins onto this primitive; PR 08 uses it in the
source-detail page's edit card.

## Changes
- NEW `packages/react/src/plugins/source-config.tsx`: builds on
  `KeyValueList` + `SecretPicker` to render Name/Namespace/Endpoint
  +  Auth (none/basic/apikey/bearer/oauth) + Headers + Query params
  in a single `CardStack`. Exposes the `AuthMode` union type.
- `packages/react/src/plugins/source-identity.tsx`:
  - `useSourceIdentity`: add `userProvidedName` /
    `userProvidedNamespace` booleans so callers know whether the
    current value is user-entered (avoids clobbering user intent
    when a fallback later becomes available).
  - `SourceIdentityFields`: add `endpoint` / `onEndpointChange` /
    `endpointLabel` / `endpointPlaceholder` / `endpointHints` /
    `endpointLabelAction` / `endpointExtra` / `prepend` props so the
    component can render the endpoint row and plugin-specific rows
    without the caller stitching its own CardStack.
  - Default name label changed from "Display Name" → "Name".

## Relationship to neighbours
- Previous (PR 03b — KeyValueList): SourceConfig consumes
  `KeyValueList` + `KeyValueEntry` for Headers and Query params.
- Next (PR 04b — SourceOperations / RunOperationPanel /
  OperationDetail / SourceHeader): the remaining building blocks
  that combine with SourceConfig to power the rewritten source
  detail page in PR 08.
---
 packages/react/src/plugins/source-config.tsx  | 511 ++++++++++++++++++
 .../react/src/plugins/source-identity.tsx     | 144 ++++-
 2 files changed, 628 insertions(+), 27 deletions(-)
 create mode 100644 packages/react/src/plugins/source-config.tsx

diff --git a/packages/react/src/plugins/source-config.tsx b/packages/react/src/plugins/source-config.tsx
new file mode 100644
index 0000000000..a2d7cbb6ae
--- /dev/null
+++ b/packages/react/src/plugins/source-config.tsx
@@ -0,0 +1,511 @@
+"use client";
+
+import { type ReactNode, useMemo } from "react";
+import { PlusIcon } from "lucide-react";
+
+import { Button } from "../components/button";
+import { CardStack, CardStackContent, CardStackHeader } from "../components/card-stack";
+import { Input } from "../components/input";
+import { NativeSelect, NativeSelectOption } from "../components/native-select";
+import { Spinner } from "../components/spinner";
+import { SecretPicker, type SecretPickerSecret } from "./secret-picker";
+import { KeyValueList, type KeyValueEntry, newKeyValueEntry } from "./key-value-list";
+
+// ---------------------------------------------------------------------------
+// Auth mode types
+// ---------------------------------------------------------------------------
+
+export type AuthMode = "none" | "basic" | "apikey" | "bearer" | "oauth";
+
+export type OAuthStatus =
+  | { step: "idle" }
+  | { step: "starting" }
+  | { step: "waiting" }
+  | { step: "authenticated" }
+  | { step: "error"; message: string };
+
+// ---------------------------------------------------------------------------
+// SourceConfig props
+// ---------------------------------------------------------------------------
+
+export interface SourceConfigProps {
+  // ── Authorization ───────────────────────────────────────────────────
+  /** Currently selected auth mode. */
+  authMode: AuthMode;
+  onAuthModeChange: (mode: AuthMode) => void;
+  /**
+   * Restrict which auth modes are shown. Defaults to all. If a mode is
+   * omitted here, its config panel will never render — and its handler
+   * props are therefore not required.
+   */
+  allowedAuthModes?: readonly AuthMode[];
+  /** Auth modes to render disabled in the sidebar (not selectable). */
+  disabledAuthModes?: readonly AuthMode[];
+
+  // Bearer
+  bearerSecretId?: string | null;
+  onBearerSecretChange?: (secretId: string) => void;
+
+  // Basic Auth
+  basicUsername?: string;
+  onBasicUsernameChange?: (username: string) => void;
+  basicSecretId?: string | null;
+  onBasicSecretChange?: (secretId: string) => void;
+
+  // API Key
+  apiKeyName?: string;
+  onApiKeyNameChange?: (name: string) => void;
+  apiKeySecretId?: string | null;
+  onApiKeySecretChange?: (secretId: string) => void;
+  apiKeyLocation?: "header" | "query";
+  onApiKeyLocationChange?: (location: "header" | "query") => void;
+
+  // OAuth
+  oauthStatus?: OAuthStatus;
+  onOAuthSignIn?: () => void;
+  onOAuthCancel?: () => void;
+  /** Called when the user wants to sign out of an authenticated OAuth session. */
+  onOAuthSignOut?: () => void;
+  /** Extra content rendered inside the OAuth panel (below the status UI). */
+  oauthExtra?: ReactNode;
+
+  // ── Headers ─────────────────────────────────────────────────────────
+  headers?: readonly KeyValueEntry[];
+  onHeadersChange?: (headers: readonly KeyValueEntry[]) => void;
+
+  // ── Shared ──────────────────────────────────────────────────────────
+  /** Existing secrets list, surfaced to any nested picker that needs it. */
+  secrets?: readonly SecretPickerSecret[];
+}
+
+// ---------------------------------------------------------------------------
+// Auth mode definitions
+// ---------------------------------------------------------------------------
+
+const ALL_AUTH_MODES: { value: AuthMode; label: string }[] = [
+  { value: "none", label: "No Auth" },
+  { value: "basic", label: "Basic Auth" },
+  { value: "apikey", label: "API Key" },
+  { value: "bearer", label: "Bearer Token" },
+  { value: "oauth", label: "OAuth 2.0" },
+];
+
+export type ApiKeyLocation = "header" | "query";
+
+const API_KEY_LOCATIONS: { value: ApiKeyLocation; label: string }[] = [
+  { value: "header", label: "Header" },
+  { value: "query", label: "Query Parameter" },
+];
+
+// ---------------------------------------------------------------------------
+// Add button for card stack headers
+// ---------------------------------------------------------------------------
+
+function AddButton({ onClick }: { onClick: () => void }) {
+  return (
+    <Button variant="ghost" size="icon-xs" type="button" onClick={onClick} aria-label="Add">
+      <PlusIcon className="size-4" />
+    </Button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Labeled SecretPicker — shared by the three auth panels (Basic, API key, Bearer).
+// ---------------------------------------------------------------------------
+
+function SecretField(props: {
+  label: string;
+  value: string | null;
+  onSelect: (secretId: string) => void;
+  secrets: readonly SecretPickerSecret[];
+  placeholder?: string;
+}) {
+  return (
+    <div className="space-y-1.5">
+      <label className="text-sm text-muted-foreground">{props.label}</label>
+      <SecretPicker
+        value={props.value}
+        onSelect={props.onSelect}
+        secrets={props.secrets}
+        placeholder={props.placeholder ?? "Select a secret..."}
+        showChevron
+      />
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function SourceConfig({
+  authMode,
+  onAuthModeChange,
+  allowedAuthModes,
+  disabledAuthModes,
+  bearerSecretId,
+  onBearerSecretChange,
+  basicUsername = "",
+  onBasicUsernameChange,
+  basicSecretId,
+  onBasicSecretChange,
+  apiKeyName = "",
+  onApiKeyNameChange,
+  apiKeySecretId,
+  onApiKeySecretChange,
+  apiKeyLocation = "header",
+  onApiKeyLocationChange,
+  oauthStatus = { step: "idle" },
+  onOAuthSignIn,
+  onOAuthCancel,
+  onOAuthSignOut,
+  oauthExtra,
+  headers = [],
+  onHeadersChange,
+  secrets = [],
+}: SourceConfigProps) {
+  const addHeader = () =>
+    onHeadersChange?.([...headers, newKeyValueEntry()]);
+
+  const visibleModes = useMemo(
+    () =>
+      allowedAuthModes
+        ? ALL_AUTH_MODES.filter((m) => allowedAuthModes.includes(m.value))
+        : ALL_AUTH_MODES,
+    [allowedAuthModes],
+  );
+  const disabledSet = useMemo(
+    () => new Set<AuthMode>(disabledAuthModes ?? []),
+    [disabledAuthModes],
+  );
+
+  return (
+    <div className="space-y-6">
+      {/* Authorization */}
+      <CardStack>
+        <CardStackHeader
+          rightSlot={
+            <NativeSelect
+              size="sm"
+              value={authMode}
+              onChange={(e) =>
+                onAuthModeChange(
+                  (e.target as HTMLSelectElement).value as AuthMode,
+                )
+              }
+              data-testid="auth-mode-select"
+            >
+              {visibleModes.map((mode) => (
+                <NativeSelectOption
+                  key={mode.value}
+                  value={mode.value}
+                  disabled={
+                    disabledSet.has(mode.value) && authMode !== mode.value
+                  }
+                >
+                  {mode.label}
+                </NativeSelectOption>
+              ))}
+            </NativeSelect>
+          }
+        >
+          Authorization
+        </CardStackHeader>
+        <CardStackContent>
+          <div className="p-4">
+            {authMode === "none" && <NoAuthPanel />}
+
+            {authMode === "basic" && onBasicSecretChange && onBasicUsernameChange && (
+              <BasicAuthPanel
+                username={basicUsername}
+                onUsernameChange={onBasicUsernameChange}
+                secretId={basicSecretId ?? null}
+                onSecretChange={onBasicSecretChange}
+                secrets={secrets}
+              />
+            )}
+
+            {authMode === "apikey" && onApiKeySecretChange && onApiKeyNameChange && onApiKeyLocationChange && (
+              <ApiKeyPanel
+                name={apiKeyName}
+                onNameChange={onApiKeyNameChange}
+                secretId={apiKeySecretId ?? null}
+                onSecretChange={onApiKeySecretChange}
+                location={apiKeyLocation}
+                onLocationChange={onApiKeyLocationChange}
+                secrets={secrets}
+              />
+            )}
+
+            {authMode === "bearer" && onBearerSecretChange && (
+              <BearerTokenPanel
+                secretId={bearerSecretId ?? null}
+                onSecretChange={onBearerSecretChange}
+                secrets={secrets}
+              />
+            )}
+
+            {authMode === "oauth" && (
+              <OAuthPanel
+                status={oauthStatus}
+                onSignIn={onOAuthSignIn}
+                onCancel={onOAuthCancel}
+                onSignOut={onOAuthSignOut}
+                extra={oauthExtra}
+              />
+            )}
+          </div>
+        </CardStackContent>
+      </CardStack>
+
+      {/* Headers — only rendered when the caller wants to manage headers */}
+      {onHeadersChange && (
+        <CardStack>
+          <CardStackHeader rightSlot={<AddButton onClick={addHeader} />}>
+            Headers
+          </CardStackHeader>
+          <CardStackContent>
+            <KeyValueList
+              entries={headers}
+              onChange={onHeadersChange}
+              secrets={secrets}
+              emptyLabel="No headers"
+              keyPlaceholder="Header-Name"
+              valuePlaceholder="value"
+            />
+          </CardStackContent>
+        </CardStack>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// No Auth panel
+// ---------------------------------------------------------------------------
+
+function NoAuthPanel() {
+  return (
+    <p className="text-sm/6 text-muted-foreground text-pretty">
+      No authentication will be used for requests to this source.
+    </p>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Basic Auth panel
+// ---------------------------------------------------------------------------
+
+function BasicAuthPanel(props: {
+  username: string;
+  onUsernameChange: (username: string) => void;
+  secretId: string | null;
+  onSecretChange: (secretId: string) => void;
+  secrets: readonly SecretPickerSecret[];
+}) {
+  return (
+    <div className="space-y-3">
+      <p className="text-sm/6 text-muted-foreground text-pretty">
+        A Basic Authentication header will be generated from the username and password.
+      </p>
+      <div className="space-y-1.5">
+        <label className="text-sm text-muted-foreground">Username</label>
+        <Input
+          value={props.username}
+          onChange={(e) => props.onUsernameChange((e.target as HTMLInputElement).value)}
+          placeholder="username"
+          className="text-sm"
+        />
+      </div>
+      <SecretField
+        label="Password"
+        value={props.secretId}
+        onSelect={props.onSecretChange}
+        secrets={props.secrets}
+      />
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// API Key panel
+// ---------------------------------------------------------------------------
+
+function ApiKeyPanel(props: {
+  name: string;
+  onNameChange: (name: string) => void;
+  secretId: string | null;
+  onSecretChange: (secretId: string) => void;
+  location: "header" | "query";
+  onLocationChange: (location: "header" | "query") => void;
+  secrets: readonly SecretPickerSecret[];
+}) {
+  return (
+    <div className="space-y-3">
+      <p className="text-sm/6 text-muted-foreground text-pretty">
+        An API key will be sent as a header or query parameter with each request.
+      </p>
+      <div className="space-y-1.5">
+        <label className="text-sm text-muted-foreground">Key</label>
+        <Input
+          value={props.name}
+          onChange={(e) => props.onNameChange((e.target as HTMLInputElement).value)}
+          placeholder="X-API-Key"
+          className="font-mono text-sm"
+        />
+      </div>
+      <SecretField
+        label="Value"
+        value={props.secretId}
+        onSelect={props.onSecretChange}
+        secrets={props.secrets}
+      />
+      <div className="space-y-1.5">
+        <label className="text-sm text-muted-foreground">Add to</label>
+        <NativeSelect
+          value={props.location}
+          onChange={(e) =>
+            props.onLocationChange((e.target as HTMLSelectElement).value as "header" | "query")
+          }
+          size="sm"
+          className="text-sm"
+        >
+          {API_KEY_LOCATIONS.map((option) => (
+            <NativeSelectOption key={option.value} value={option.value}>
+              {option.label}
+            </NativeSelectOption>
+          ))}
+        </NativeSelect>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Bearer Token panel
+// ---------------------------------------------------------------------------
+
+function BearerTokenPanel(props: {
+  secretId: string | null;
+  onSecretChange: (secretId: string) => void;
+  secrets: readonly SecretPickerSecret[];
+}) {
+  return (
+    <div className="space-y-3">
+      <p className="text-sm/6 text-muted-foreground text-pretty">
+        The authorization header will be automatically generated when you send the request.
+        The token is stored as a secret and never exposed in plaintext.
+      </p>
+      <SecretField
+        label="Token"
+        value={props.secretId}
+        onSelect={props.onSecretChange}
+        secrets={props.secrets}
+      />
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// OAuth panel
+// ---------------------------------------------------------------------------
+
+function OAuthPanel(props: {
+  status: OAuthStatus;
+  onSignIn?: () => void;
+  onCancel?: () => void;
+  onSignOut?: () => void;
+  extra?: ReactNode;
+}) {
+  const { status, onSignIn, onCancel, onSignOut, extra } = props;
+
+  const description = (
+    <p className="text-sm/6 text-muted-foreground text-pretty">
+      Sign in via your provider's OAuth flow. Tokens are securely stored and
+      automatically refreshed when they expire.
+    </p>
+  );
+
+  let content: ReactNode;
+
+  if (status.step === "authenticated") {
+    content = (
+      <div className="flex items-center gap-2 rounded-md ring-1 ring-emerald-500/20 bg-emerald-500/5 px-3 py-2.5">
+        <svg viewBox="0 0 16 16" fill="none" className="size-4 shrink-0 stroke-emerald-500">
+          <path
+            d="M3 8.5l3 3 7-7"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+        <span className="text-sm text-emerald-600 dark:text-emerald-400">
+          Authenticated
+        </span>
+        {onSignOut && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onSignOut}
+            className="ml-auto py-1 px-2 text-sm"
+          >
+            Sign out
+          </Button>
+        )}
+      </div>
+    );
+  } else if (status.step === "starting") {
+    content = (
+      <div className="flex items-center gap-2 rounded-md ring-1 ring-black/5 dark:ring-white/10 px-3 py-2.5">
+        <Spinner className="size-4 shrink-0" />
+        <span className="text-sm text-muted-foreground">Starting authorization...</span>
+      </div>
+    );
+  } else if (status.step === "waiting") {
+    content = (
+      <div className="flex items-center gap-2 rounded-md ring-1 ring-blue-500/20 bg-blue-500/5 px-3 py-2.5">
+        <Spinner className="size-4 shrink-0 text-blue-500" />
+        <span className="text-sm text-blue-600 dark:text-blue-400">
+          Waiting for authorization in popup...
+        </span>
+        {onCancel && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onCancel}
+            className="ml-auto py-1 px-2 text-sm"
+          >
+            Cancel
+          </Button>
+        )}
+      </div>
+    );
+  } else if (status.step === "error") {
+    content = (
+      <div className="space-y-2">
+        <div className="rounded-md ring-1 ring-destructive/20 bg-destructive/5 px-3 py-2.5">
+          <p className="text-sm text-destructive">{status.message}</p>
+        </div>
+        {onSignIn && (
+          <Button onClick={onSignIn} variant="outline" size="sm">
+            Try again
+          </Button>
+        )}
+      </div>
+    );
+  } else {
+    content = (
+      <Button onClick={onSignIn} variant="outline" type="button">
+        Sign in
+      </Button>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {description}
+      {content}
+      {extra}
+    </div>
+  );
+}
diff --git a/packages/react/src/plugins/source-identity.tsx b/packages/react/src/plugins/source-identity.tsx
index db4cd646bb..991d3f3936 100644
--- a/packages/react/src/plugins/source-identity.tsx
+++ b/packages/react/src/plugins/source-identity.tsx
@@ -33,6 +33,18 @@ export interface SourceIdentity {
   readonly name: string;
   /** Namespace — the user's override if they've typed one, otherwise slugified from `name`. */
   readonly namespace: string;
+  /**
+   * `true` when the user has explicitly typed a name (i.e. the current
+   * `name` came from `setName`, not the fallback). Useful for "only prefill
+   * once" logic so the caller doesn't clobber a user-entered value when the
+   * fallback later changes.
+   */
+  readonly userProvidedName: boolean;
+  /**
+   * `true` when the user has explicitly typed a namespace (i.e. the current
+   * `namespace` came from `setNamespace`, not the slug-of-name fallback).
+   */
+  readonly userProvidedNamespace: boolean;
   readonly setName: (name: string) => void;
   readonly setNamespace: (namespace: string) => void;
   /** Clears any user overrides so both fields return to deriving from the fallback. */
@@ -56,6 +68,11 @@ export interface UseSourceIdentityOptions {
  * derived state: the user's `setName` / `setNamespace` call stores an
  * override, otherwise the hook returns the caller-supplied fallback
  * (passed fresh on every render). Call `reset()` to drop overrides.
+ *
+ * The returned `userProvidedName` / `userProvidedNamespace` booleans
+ * expose whether the user has explicitly typed into each field — callers
+ * use these flags to decide whether it's safe to auto-populate the field
+ * from a newly-available fallback without clobbering user intent.
  */
 export function useSourceIdentity(options?: UseSourceIdentityOptions): SourceIdentity {
   const [nameOverride, setNameOverride] = useState<string | null>(null);
@@ -79,7 +96,15 @@ export function useSourceIdentity(options?: UseSourceIdentityOptions): SourceIde
     setNamespaceOverride(null);
   }, []);
 
-  return { name, namespace, setName, setNamespace, reset };
+  return {
+    name,
+    namespace,
+    userProvidedName: nameOverride !== null,
+    userProvidedNamespace: namespaceOverride !== null,
+    setName,
+    setNamespace,
+    reset,
+  };
 }
 
 // ---------------------------------------------------------------------------
@@ -98,46 +123,111 @@ export interface SourceIdentityFieldsProps {
    * would require a delete + recreate flow.
    */
   readonly namespaceReadOnly?: boolean;
+  /** Optional endpoint URL field rendered as the first row in the card stack. */
+  readonly endpoint?: string;
+  readonly onEndpointChange?: (endpoint: string) => void;
+  readonly endpointLabel?: string;
+  readonly endpointPlaceholder?: string;
+  /** Clickable endpoint presets shown below the label (e.g. server environments from the spec). */
+  readonly endpointHints?: readonly { label: string; url: string }[];
+  /** Extra content rendered below the endpoint input, inside the same card (e.g. error messages). */
+  readonly endpointExtra?: React.ReactNode;
+  /** Content rendered inline next to the endpoint label (e.g. loading spinner). */
+  readonly endpointLabelAction?: React.ReactNode;
+  /** Content rendered as the first row(s) in the card stack, before the endpoint field. */
+  readonly prepend?: React.ReactNode;
 }
 
 export function SourceIdentityFields({
   identity,
   namePlaceholder = "e.g. Sentry API",
   namespacePlaceholder = "sentry_api",
-  nameLabel = "Display Name",
+  nameLabel = "Name",
   namespaceHint,
   namespaceReadOnly = false,
+  endpoint,
+  onEndpointChange,
+  endpointLabel = "URL",
+  endpointPlaceholder = "https://api.example.com",
+  endpointHints,
+  endpointExtra,
+  endpointLabelAction,
+  prepend,
 }: SourceIdentityFieldsProps) {
-  const effectiveNamespaceHint =
-    namespaceHint ??
-    (namespaceReadOnly
-      ? "The namespace is part of the source's identity and cannot be changed."
-      : "Prefix for the tool names. Auto-derived from the display name.");
+  const hasEndpoint = endpoint !== undefined && onEndpointChange !== undefined;
 
   return (
     <CardStack>
       <CardStackContent className="border-t-0">
-        <CardStackEntryField label={nameLabel}>
-          <Input
-            value={identity.name}
-            onChange={(e) => identity.setName((e.target as HTMLInputElement).value)}
-            placeholder={namePlaceholder}
-            className="text-sm"
-          />
-        </CardStackEntryField>
+        {prepend}
+        {hasEndpoint && (
+          <>
+            <CardStackEntryField
+              labelAction={endpointLabelAction}
+              label={
+                <div>
+                  <span>{endpointLabel}</span>
+                  {endpointHints && endpointHints.length > 0 && (
+                    <div className="mt-0.5 text-xs font-normal text-muted-foreground">
+                      {"Use "}
+                      {endpointHints.map((hint, i) => (
+                        <span key={hint.url}>
+                          {i > 0 && ", "}
+                          {/* oxlint-disable-next-line react/forbid-elements */}
+                          <button
+                            type="button"
+                            className="underline text-muted-foreground hover:text-foreground"
+                            onClick={() => onEndpointChange(hint.url)}
+                          >
+                            {hint.label}
+                          </button>
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              }
+            >
+              <Input
+                value={endpoint}
+                onChange={(e) => onEndpointChange((e.target as HTMLInputElement).value)}
+                placeholder={endpointPlaceholder}
+                className="w-full font-mono text-sm"
+              />
+              {endpointExtra}
+            </CardStackEntryField>
+          </>
+        )}
+        <CardStackEntryField
+          label={nameLabel}
+          labelAction={
+            <Input
+              value={identity.name}
+              onChange={(e) => identity.setName((e.target as HTMLInputElement).value)}
+              placeholder={namePlaceholder}
+              className="w-56 text-sm"
+            />
+          }
+        />
         <CardStackEntryField
-          label="Namespace"
-          description={namespaceReadOnly ? undefined : "(optional)"}
-          hint={effectiveNamespaceHint}
-        >
-          <Input
-            value={identity.namespace}
-            onChange={(e) => identity.setNamespace((e.target as HTMLInputElement).value)}
-            placeholder={namespacePlaceholder}
-            className="font-mono text-sm"
-            disabled={namespaceReadOnly}
-          />
-        </CardStackEntryField>
+          label={
+            <div>
+              <span>Namespace</span>
+              <div className="mt-0.5 text-xs font-normal text-muted-foreground">
+                e.g. <code className="font-mono text-foreground/70">{identity.namespace || namespacePlaceholder}.list_users</code>
+              </div>
+            </div>
+          }
+          labelAction={
+            <Input
+              value={identity.namespace}
+              onChange={(e) => identity.setNamespace((e.target as HTMLInputElement).value)}
+              placeholder={namespacePlaceholder}
+              className="w-56 font-mono text-sm"
+              disabled={namespaceReadOnly}
+            />
+          }
+        />
       </CardStackContent>
     </CardStack>
   );

From e16f9da96cb409e0fbcfc8358073c6c1258b2d39 Mon Sep 17 00:00:00 2001
From: mrzmyr <mrzmyr@users.noreply.github.com>
Date: Sat, 18 Apr 2026 09:46:03 +0200
Subject: [PATCH 6/6] feat(react): SourceOperations, RunOperationPanel,
 OperationDetail, SourceHeader
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds the remaining reusable primitives the rewritten source-detail
page and the migrated Add/Edit flows need:

- `SourceOperations` — operation/tool tree with filterable sidebar.
- `RunOperationPanel` — form-driven invocation panel using the new
  `executeCode` mutation atom.
- `OperationDetail` — schema / TypeScript / run tabs for an
  operation.
- `SourceHeader` — favicon + title header used across source pages.

Also exposes a new `executeCode` mutation atom in
`packages/react/src/api/atoms.tsx` so the run panel can invoke
operations without each caller wiring its own client.

## Stack role

PR 04b of 12. Together with PR 04a (SourceConfig), this completes
the set of new primitives the source-detail rewrite (PR 08) relies
on. Still purely additive — no call sites migrate yet.

## Changes
- NEW `packages/react/src/plugins/source-operations.tsx` (199 LOC):
  `OperationEntry` type + tree component.
- NEW `packages/react/src/plugins/run-operation.tsx` (435 LOC):
  `RunOperationPanel`, form generated from operation inputSchema.
- NEW `packages/react/src/components/operation-detail.tsx` (99 LOC):
  combines `SchemaExplorer` + `ExpandableCodeBlock` + `FilterTabs`.
- NEW `packages/react/src/components/source-header.tsx` (22 LOC):
  thin favicon + title wrapper for reuse across source pages.
- `packages/react/src/api/atoms.tsx`: add `executeCode` mutation
  atom bound to the executions.execute endpoint.

All four new files reuse existing primitives (SchemaExplorer,
ExpandableCodeBlock, CardStack, FilterTabs, Tabs, SourceFavicon).

## Relationship to neighbours
- Previous (PR 04a — SourceConfig + SourceIdentity extensions):
  completes the "configure a source" UI. This PR completes the
  "operate on a source" UI.
- Next (PR 05 — OpenAPI SDK schema/oauth2/probe-rename): SDK-side
  contract changes so the OpenAPI plugin's Add/Edit (migrated in
  PR 07c) and source-detail (PR 08) have the data they need
  (inputSchema / outputSchema on PreviewOperation; oauth2 update
  support).
---
 packages/react/src/api/atoms.tsx              |   2 +
 .../react/src/components/operation-detail.tsx |  99 ++++
 .../react/src/components/source-header.tsx    |  22 +
 packages/react/src/plugins/run-operation.tsx  | 435 ++++++++++++++++++
 .../react/src/plugins/source-operations.tsx   | 199 ++++++++
 5 files changed, 757 insertions(+)
 create mode 100644 packages/react/src/components/operation-detail.tsx
 create mode 100644 packages/react/src/components/source-header.tsx
 create mode 100644 packages/react/src/plugins/run-operation.tsx
 create mode 100644 packages/react/src/plugins/source-operations.tsx

diff --git a/packages/react/src/api/atoms.tsx b/packages/react/src/api/atoms.tsx
index e94ebb0b39..1e0c13620a 100644
--- a/packages/react/src/api/atoms.tsx
+++ b/packages/react/src/api/atoms.tsx
@@ -81,3 +81,5 @@ export const removeSource = ExecutorApiClient.mutation("sources", "remove");
 export const refreshSource = ExecutorApiClient.mutation("sources", "refresh");
 
 export const detectSource = ExecutorApiClient.mutation("sources", "detect");
+
+export const executeCode = ExecutorApiClient.mutation("executions", "execute");
diff --git a/packages/react/src/components/operation-detail.tsx b/packages/react/src/components/operation-detail.tsx
new file mode 100644
index 0000000000..ff383af196
--- /dev/null
+++ b/packages/react/src/components/operation-detail.tsx
@@ -0,0 +1,99 @@
+import { useState, type ReactNode } from "react";
+import { SchemaExplorer } from "./schema-explorer";
+import { ExpandableCodeBlock } from "./expandable-code-block";
+import { CardStack, CardStackHeader, CardStackContent } from "./card-stack";
+import { FilterTabs, type FilterTab } from "./filter-tabs";
+
+export interface OperationDetailData {
+  readonly inputSchema?: unknown;
+  readonly outputSchema?: unknown;
+  readonly inputTypeScript?: string | null;
+  readonly outputTypeScript?: string | null;
+  readonly definitions?: readonly { name: string; code: string }[];
+}
+
+type Tab = "schema" | "typescript" | "run";
+
+function EmptySection(props: { title: string; message: string }) {
+  return (
+    <CardStack>
+      <CardStackHeader>{props.title}</CardStackHeader>
+      <CardStackContent>
+        <p className="px-4 py-3 text-sm text-muted-foreground">{props.message}</p>
+      </CardStackContent>
+    </CardStack>
+  );
+}
+
+export function OperationDetail({
+  data,
+  runPanel,
+}: {
+  data: OperationDetailData;
+  runPanel?: ReactNode;
+}) {
+  const [tab, setTab] = useState<Tab>("schema");
+
+  const hasTypeScript = Boolean(data.inputTypeScript || data.outputTypeScript);
+  const hasRun = Boolean(runPanel);
+
+  const tabs: FilterTab<Tab>[] = [
+    { label: "Schema", value: "schema" },
+    ...(hasTypeScript ? [{ label: "TypeScript", value: "typescript" as const }] : []),
+    ...(hasRun ? [{ label: "Run", value: "run" as const }] : []),
+  ];
+
+  return (
+    <div className="flex flex-col gap-4">
+      <FilterTabs<Tab> tabs={tabs} value={tab} onChange={setTab} />
+
+      {tab === "run" && hasRun ? (
+        runPanel
+      ) : tab === "schema" ? (
+        <div className="flex flex-col gap-4">
+          {data.inputSchema !== undefined && data.inputSchema !== null ? (
+            <SchemaExplorer schema={data.inputSchema} title="Parameters" />
+          ) : (
+            <EmptySection title="Parameters" message="None" />
+          )}
+          {data.outputSchema !== undefined && data.outputSchema !== null ? (
+            <SchemaExplorer schema={data.outputSchema} title="Response" />
+          ) : (
+            <EmptySection title="Response" message="None" />
+          )}
+        </div>
+      ) : (
+        <div className="flex flex-col gap-4">
+          {data.inputTypeScript ? (
+            <CardStack>
+              <CardStackHeader>Input</CardStackHeader>
+              <CardStackContent>
+                <ExpandableCodeBlock
+                  code={data.inputTypeScript}
+                  definitions={data.definitions}
+                  className="rounded-none border-0"
+                />
+              </CardStackContent>
+            </CardStack>
+          ) : (
+            <EmptySection title="Input" message="void" />
+          )}
+          {data.outputTypeScript ? (
+            <CardStack>
+              <CardStackHeader>Output</CardStackHeader>
+              <CardStackContent>
+                <ExpandableCodeBlock
+                  code={data.outputTypeScript}
+                  definitions={data.definitions}
+                  className="rounded-none border-0"
+                />
+              </CardStackContent>
+            </CardStack>
+          ) : (
+            <EmptySection title="Output" message="void" />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/react/src/components/source-header.tsx b/packages/react/src/components/source-header.tsx
new file mode 100644
index 0000000000..ff73c17805
--- /dev/null
+++ b/packages/react/src/components/source-header.tsx
@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import { SourceFavicon } from "./source-favicon";
+
+export function SourceHeader(props: {
+  url?: string;
+  title: string;
+  subtitle?: ReactNode;
+}) {
+  return (
+    <div className="flex items-center gap-3">
+      <div className="flex size-9 shrink-0 items-center justify-center rounded-lg border border-border/60 bg-white shadow-xs dark:bg-neutral-900 dark:shadow-none">
+        <SourceFavicon url={props.url} size={20} />
+      </div>
+      <div className="min-w-0">
+        <p className="text-sm font-semibold text-foreground">{props.title}</p>
+        {props.subtitle !== undefined && (
+          <p className="text-xs text-muted-foreground">{props.subtitle}</p>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/react/src/plugins/run-operation.tsx b/packages/react/src/plugins/run-operation.tsx
new file mode 100644
index 0000000000..4e2be0ed2a
--- /dev/null
+++ b/packages/react/src/plugins/run-operation.tsx
@@ -0,0 +1,435 @@
+import { useMemo, useState } from "react";
+import { useAtomSet } from "@effect-atom/atom-react";
+import { executeCode } from "../api/atoms";
+import { Button } from "../components/button";
+import { Input } from "../components/input";
+import { Textarea } from "../components/textarea";
+import { Checkbox } from "../components/checkbox";
+import { Label } from "../components/label";
+import { NativeSelect, NativeSelectOption } from "../components/native-select";
+import { CardStack, CardStackContent, CardStackHeader } from "../components/card-stack";
+
+interface RunResult {
+  readonly status: "completed" | "paused";
+  readonly text: string;
+  readonly isError: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Schema helpers
+// ---------------------------------------------------------------------------
+
+type JsonSchema = {
+  type?: string | string[];
+  properties?: Record<string, JsonSchema>;
+  required?: readonly string[];
+  items?: JsonSchema;
+  enum?: readonly unknown[];
+  const?: unknown;
+  $ref?: string;
+  $defs?: Record<string, JsonSchema>;
+  description?: string;
+  title?: string;
+  default?: unknown;
+  nullable?: boolean;
+  format?: string;
+  oneOf?: readonly JsonSchema[];
+  anyOf?: readonly JsonSchema[];
+};
+
+const resolveRef = (ref: string, root: JsonSchema): JsonSchema | null => {
+  const name = ref.match(/^#\/\$defs\/(.+)$/)?.[1];
+  if (!name || !root.$defs) return null;
+  return root.$defs[name] ?? null;
+};
+
+const resolve = (schema: JsonSchema, root: JsonSchema): JsonSchema => {
+  let s = schema;
+  if (s.$ref) {
+    const r = resolveRef(s.$ref, root);
+    if (r) s = r;
+  }
+  if (s.oneOf?.length === 1) s = resolve(s.oneOf[0]!, root);
+  if (s.anyOf?.length === 1) s = resolve(s.anyOf[0]!, root);
+  return s;
+};
+
+const primaryType = (s: JsonSchema): string | undefined => {
+  if (Array.isArray(s.type)) return s.type.find((t) => t !== "null");
+  return s.type;
+};
+
+type FieldKind =
+  | { kind: "string"; enum?: readonly unknown[] }
+  | { kind: "number" }
+  | { kind: "integer" }
+  | { kind: "boolean" }
+  | { kind: "json"; hint: string };
+
+const classifyField = (schema: JsonSchema, root: JsonSchema): FieldKind => {
+  const s = resolve(schema, root);
+
+  if (s.enum && s.enum.length > 0) {
+    return { kind: "string", enum: s.enum };
+  }
+
+  const t = primaryType(s);
+  if (t === "boolean") return { kind: "boolean" };
+  if (t === "integer") return { kind: "integer" };
+  if (t === "number") return { kind: "number" };
+  if (t === "string") return { kind: "string" };
+
+  if (t === "array") return { kind: "json", hint: "[]" };
+  if (t === "object") return { kind: "json", hint: "{}" };
+
+  return { kind: "json", hint: "null" };
+};
+
+type FormValue = string | number | boolean | null;
+
+const initialFieldValue = (field: FieldKind, schema: JsonSchema): FormValue => {
+  if (schema.default !== undefined) {
+    if (field.kind === "json") {
+      try {
+        return JSON.stringify(schema.default, null, 2);
+      } catch {
+        return "";
+      }
+    }
+    if (typeof schema.default === "string" || typeof schema.default === "number" || typeof schema.default === "boolean") {
+      return schema.default;
+    }
+  }
+
+  if (field.kind === "boolean") return false;
+  if (field.kind === "string" && field.enum && field.enum.length > 0) {
+    const first = field.enum[0];
+    return typeof first === "string" || typeof first === "number" ? String(first) : "";
+  }
+  return "";
+};
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function RunOperationPanel({
+  toolId,
+  inputSchema,
+}: {
+  toolId: string;
+  inputSchema?: unknown;
+}) {
+  const properties = useMemo(() => {
+    const root = (inputSchema ?? null) as JsonSchema | null;
+    const resolvedRoot = root ? resolve(root, root) : null;
+    if (!resolvedRoot || primaryType(resolvedRoot) !== "object" || !resolvedRoot.properties) {
+      return null;
+    }
+    const required = new Set(resolvedRoot.required ?? []);
+    return Object.entries(resolvedRoot.properties).map(([name, propSchema]) => {
+      const resolvedProp = resolve(propSchema, root!);
+      const field = classifyField(propSchema, root!);
+      return {
+        name,
+        schema: resolvedProp,
+        field,
+        required: required.has(name),
+      };
+    });
+  }, [inputSchema]);
+
+  const [values, setValues] = useState<Record<string, FormValue>>(() => {
+    if (!properties) return {};
+    const initial: Record<string, FormValue> = {};
+    for (const p of properties) initial[p.name] = initialFieldValue(p.field, p.schema);
+    return initial;
+  });
+  const [enabled, setEnabled] = useState<Record<string, boolean>>(() => {
+    if (!properties) return {};
+    const init: Record<string, boolean> = {};
+    for (const p of properties) init[p.name] = p.required || p.schema.default !== undefined;
+    return init;
+  });
+  const [rawJson, setRawJson] = useState("{}");
+  const [running, setRunning] = useState(false);
+  const [result, setResult] = useState<RunResult | null>(null);
+  const [parseError, setParseError] = useState<string | null>(null);
+
+  const doExecute = useAtomSet(executeCode, { mode: "promise" });
+
+  const buildArgs = (): { ok: true; args: unknown } | { ok: false; error: string } => {
+    if (!properties) {
+      const trimmed = rawJson.trim();
+      if (trimmed.length === 0) return { ok: true, args: {} };
+      try {
+        return { ok: true, args: JSON.parse(trimmed) };
+      } catch (e) {
+        return { ok: false, error: e instanceof Error ? e.message : "Invalid JSON" };
+      }
+    }
+
+    const args: Record<string, unknown> = {};
+    for (const p of properties) {
+      if (!enabled[p.name] && !p.required) continue;
+      const raw = values[p.name];
+      if (p.field.kind === "boolean") {
+        args[p.name] = Boolean(raw);
+      } else if (p.field.kind === "integer") {
+        if (raw === "" || raw === null) {
+          if (p.required) return { ok: false, error: `"${p.name}" is required` };
+          continue;
+        }
+        const n = Number(raw);
+        if (!Number.isInteger(n)) return { ok: false, error: `"${p.name}" must be an integer` };
+        args[p.name] = n;
+      } else if (p.field.kind === "number") {
+        if (raw === "" || raw === null) {
+          if (p.required) return { ok: false, error: `"${p.name}" is required` };
+          continue;
+        }
+        const n = Number(raw);
+        if (Number.isNaN(n)) return { ok: false, error: `"${p.name}" must be a number` };
+        args[p.name] = n;
+      } else if (p.field.kind === "string") {
+        if (raw === "" || raw === null) {
+          if (p.required) return { ok: false, error: `"${p.name}" is required` };
+          continue;
+        }
+        args[p.name] = String(raw);
+      } else {
+        const trimmed = typeof raw === "string" ? raw.trim() : "";
+        if (trimmed.length === 0) {
+          if (p.required) return { ok: false, error: `"${p.name}" is required` };
+          continue;
+        }
+        try {
+          args[p.name] = JSON.parse(trimmed);
+        } catch (e) {
+          return {
+            ok: false,
+            error: `"${p.name}": ${e instanceof Error ? e.message : "Invalid JSON"}`,
+          };
+        }
+      }
+    }
+    return { ok: true, args };
+  };
+
+  const handleRun = async () => {
+    setParseError(null);
+    setResult(null);
+
+    const built = buildArgs();
+    if (!built.ok) {
+      setParseError(built.error);
+      return;
+    }
+
+    const code = `return await tools.${toolId}(${JSON.stringify(built.args)});`;
+
+    setRunning(true);
+    try {
+      const response = await doExecute({ payload: { code } });
+      if (response.status === "completed") {
+        setResult({ status: "completed", text: response.text, isError: response.isError });
+      } else {
+        setResult({ status: "paused", text: response.text, isError: false });
+      }
+    } catch (e) {
+      setResult({
+        status: "completed",
+        text: e instanceof Error ? e.message : String(e),
+        isError: true,
+      });
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <CardStack>
+        <CardStackHeader>Parameters</CardStackHeader>
+        <CardStackContent>
+          <div className="flex flex-col gap-4 p-4">
+            {properties ? (
+              properties.length === 0 ? (
+                <p className="text-xs text-muted-foreground">No parameters.</p>
+              ) : (
+                properties.map((p) => (
+                  <FieldRow
+                    key={p.name}
+                    name={p.name}
+                    field={p.field}
+                    schema={p.schema}
+                    required={p.required}
+                    value={values[p.name] ?? ""}
+                    enabled={enabled[p.name] ?? false}
+                    onValueChange={(v) =>
+                      setValues((prev) => ({ ...prev, [p.name]: v }))
+                    }
+                    onEnabledChange={(v) =>
+                      setEnabled((prev) => ({ ...prev, [p.name]: v }))
+                    }
+                  />
+                ))
+              )
+            ) : (
+              <div className="flex flex-col gap-2">
+                <Label className="text-xs text-muted-foreground">
+                  Input (JSON)
+                </Label>
+                <Textarea
+                  value={rawJson}
+                  onChange={(e) => setRawJson(e.target.value)}
+                  className="font-mono text-xs"
+                  rows={6}
+                  spellCheck={false}
+                  placeholder="{}"
+                />
+              </div>
+            )}
+
+            {parseError && (
+              <p className="text-xs text-destructive">{parseError}</p>
+            )}
+            <div className="flex justify-end">
+              <Button size="sm" onClick={() => void handleRun()} disabled={running}>
+                {running ? "Running…" : "Run"}
+              </Button>
+            </div>
+          </div>
+        </CardStackContent>
+      </CardStack>
+
+      {result && (
+        <CardStack>
+          <CardStackHeader>
+            {result.status === "paused"
+              ? "Paused (awaiting elicitation)"
+              : result.isError
+                ? "Error"
+                : "Result"}
+          </CardStackHeader>
+          <CardStackContent>
+            <pre
+              className={[
+                "overflow-x-auto whitespace-pre-wrap break-words px-4 py-3 font-mono text-xs",
+                result.isError ? "text-destructive" : "text-foreground",
+              ].join(" ")}
+            >
+              {result.text || "(empty)"}
+            </pre>
+          </CardStackContent>
+        </CardStack>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Field row
+// ---------------------------------------------------------------------------
+
+function FieldRow({
+  name,
+  field,
+  schema,
+  required,
+  value,
+  enabled,
+  onValueChange,
+  onEnabledChange,
+}: {
+  name: string;
+  field: FieldKind;
+  schema: JsonSchema;
+  required: boolean;
+  value: FormValue;
+  enabled: boolean;
+  onValueChange: (v: FormValue) => void;
+  onEnabledChange: (v: boolean) => void;
+}) {
+  const disabled = !required && !enabled;
+  const description = schema.description;
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className="flex items-center gap-2">
+        {!required && (
+          <Checkbox
+            checked={enabled}
+            onCheckedChange={(v) => onEnabledChange(v === true)}
+            aria-label={`Include ${name}`}
+          />
+        )}
+        <Label className="font-mono text-xs">
+          {name}
+          {required && <span className="ml-1 text-destructive">*</span>}
+          <span className="ml-2 font-sans font-normal text-muted-foreground">
+            {fieldTypeLabel(field, schema)}
+          </span>
+        </Label>
+      </div>
+
+      {field.kind === "boolean" ? (
+        <div className="flex items-center">
+          <Checkbox
+            checked={value === true}
+            onCheckedChange={(v) => onValueChange(v === true)}
+            disabled={disabled}
+          />
+        </div>
+      ) : field.kind === "string" && field.enum ? (
+        <NativeSelect
+          value={typeof value === "string" ? value : ""}
+          onChange={(e) => onValueChange((e.target as HTMLSelectElement).value)}
+          disabled={disabled}
+          className="text-sm"
+        >
+          {field.enum.map((v) => {
+            const str = typeof v === "string" || typeof v === "number" ? String(v) : JSON.stringify(v);
+            return (
+              <NativeSelectOption key={str} value={str}>
+                {str}
+              </NativeSelectOption>
+            );
+          })}
+        </NativeSelect>
+      ) : field.kind === "json" ? (
+        <Textarea
+          value={typeof value === "string" ? value : ""}
+          onChange={(e) => onValueChange(e.target.value)}
+          disabled={disabled}
+          className="font-mono text-xs"
+          rows={3}
+          spellCheck={false}
+          placeholder={field.hint}
+        />
+      ) : (
+        <Input
+          type={field.kind === "integer" || field.kind === "number" ? "number" : "text"}
+          step={field.kind === "integer" ? 1 : "any"}
+          value={typeof value === "string" || typeof value === "number" ? value : ""}
+          onChange={(e) => onValueChange(e.target.value)}
+          disabled={disabled}
+          placeholder={schema.default !== undefined ? String(schema.default) : ""}
+        />
+      )}
+
+      {description && (
+        <p className="text-xs text-muted-foreground">{description}</p>
+      )}
+    </div>
+  );
+}
+
+const fieldTypeLabel = (field: FieldKind, schema: JsonSchema): string => {
+  if (field.kind === "string" && field.enum) return "enum";
+  if (field.kind === "json") {
+    const t = primaryType(schema);
+    return t ?? "json";
+  }
+  return field.kind;
+};
diff --git a/packages/react/src/plugins/source-operations.tsx b/packages/react/src/plugins/source-operations.tsx
new file mode 100644
index 0000000000..96e0e27054
--- /dev/null
+++ b/packages/react/src/plugins/source-operations.tsx
@@ -0,0 +1,199 @@
+import * as React from "react";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils";
+import {
+  CardStack,
+  CardStackContent,
+  CardStackEntry,
+  CardStackEntryActions,
+  CardStackEntryContent,
+  CardStackEntryDescription,
+  CardStackEntryTitle,
+  CardStackHeader,
+} from "../components/card-stack";
+import { Tabs, TabsList, TabsTrigger } from "../components/tabs";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type OperationPermission = "read" | "write" | "deny";
+
+export interface OperationEntry {
+  /** Stable row key (operationId, tool name, etc.) */
+  id: string;
+  /** HTTP method (GET, POST, PUT, PATCH, DELETE) or tool name */
+  method?: string;
+  /** URL path or tool identifier */
+  path: string;
+  /** Human-readable summary */
+  summary?: string;
+  /** Whether the operation is deprecated */
+  deprecated?: boolean;
+  /** Current permission level */
+  permission?: OperationPermission;
+  /** When provided, row is expandable and this renders the expanded detail. */
+  renderDetail?: () => React.ReactNode;
+}
+
+export interface SourceOperationsProps {
+  readonly operations: readonly OperationEntry[];
+  readonly onPermissionChange?: (index: number, permission: OperationPermission) => void;
+  /** Content displayed above the operations list (e.g. scopes) */
+  readonly prepend?: React.ReactNode;
+  /** Placeholder when there are no operations */
+  readonly emptyLabel?: string;
+}
+
+// ---------------------------------------------------------------------------
+// HTTP method badge colors
+// ---------------------------------------------------------------------------
+
+const METHOD_COLORS: Record<string, string> = {
+  GET: "text-green-600 dark:text-green-500",
+  POST: "text-blue-700 dark:text-blue-500",
+  PUT: "text-yellow-700 dark:text-yellow-500",
+  PATCH: "text-yellow-700 dark:text-yellow-500",
+  DELETE: "text-red-600 dark:text-red-500",
+};
+
+function MethodBadge({ method }: { method: string }) {
+  const upper = method.toUpperCase();
+  const color = METHOD_COLORS[upper] ?? "text-muted-foreground";
+
+  return (
+    <span
+      className={cn(
+        "w-16 shrink-0 text-left font-mono text-xs font-medium uppercase",
+        color,
+      )}
+    >
+      {upper}
+    </span>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Permission tabs (read / write / deny)
+// ---------------------------------------------------------------------------
+
+function PermissionTabs({
+  value = "read",
+  onChange,
+}: {
+  value?: OperationPermission;
+  onChange?: (value: OperationPermission) => void;
+}) {
+  return (
+    <Tabs
+      value={value}
+      onValueChange={(v) => onChange?.(v as OperationPermission)}
+    >
+      <TabsList className="h-7">
+        <TabsTrigger value="read" className="h-6 px-2 text-xs">
+          read
+        </TabsTrigger>
+        <TabsTrigger value="write" className="h-6 px-2 text-xs">
+          write
+        </TabsTrigger>
+        <TabsTrigger value="deny" className="h-6 px-2 text-xs">
+          deny
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function SourceOperations({
+  operations,
+  onPermissionChange,
+  prepend,
+  emptyLabel = "No operations",
+}: SourceOperationsProps) {
+  const [query, setQuery] = React.useState("");
+  const [openId, setOpenId] = React.useState<string | null>(null);
+
+  const filtered = React.useMemo(() => {
+    const trimmed = query.trim().toLowerCase();
+    if (!trimmed) return operations;
+    return operations.filter((op) =>
+      `${op.method ?? ""} ${op.path} ${op.summary ?? ""}`.toLowerCase().includes(trimmed),
+    );
+  }, [operations, query]);
+
+  return (
+    <CardStack searchable searchQuery={query} onSearchChange={setQuery}>
+      <CardStackHeader>Operations</CardStackHeader>
+      {prepend}
+      <CardStackContent>
+        {filtered.length === 0 ? (
+          <div className="px-4 py-6 text-center text-sm text-muted-foreground">
+            {emptyLabel}
+          </div>
+        ) : (
+          filtered.map((op) => {
+            const rowIndex = operations.indexOf(op);
+            const expandable = Boolean(op.renderDetail);
+            const open = expandable && openId === op.id;
+
+            return (
+              <div key={op.id} className="flex flex-col">
+                <CardStackEntry
+                  className={cn(expandable && "cursor-pointer hover:bg-accent/40")}
+                  onClick={
+                    expandable
+                      ? () => setOpenId(open ? null : op.id)
+                      : undefined
+                  }
+                  aria-expanded={expandable ? open : undefined}
+                >
+                  {expandable && (
+                    <ChevronRight
+                      className={cn(
+                        "size-3.5 shrink-0 text-muted-foreground transition-transform duration-150",
+                        open && "rotate-90",
+                      )}
+                    />
+                  )}
+                  {op.method && <MethodBadge method={op.method} />}
+                  <CardStackEntryContent>
+                    <CardStackEntryTitle
+                      className={cn(
+                        "font-mono text-xs",
+                        op.deprecated && "line-through text-muted-foreground",
+                      )}
+                    >
+                      {op.path}
+                    </CardStackEntryTitle>
+                    {op.summary && (
+                      <CardStackEntryDescription>{op.summary}</CardStackEntryDescription>
+                    )}
+                  </CardStackEntryContent>
+                  {onPermissionChange && (
+                    <CardStackEntryActions
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <PermissionTabs
+                        value={op.permission ?? "read"}
+                        onChange={(perm) => onPermissionChange(rowIndex, perm)}
+                      />
+                    </CardStackEntryActions>
+                  )}
+                </CardStackEntry>
+                {open && (
+                  <div className="border-t border-border/40 bg-muted/20 px-4 py-4">
+                    {op.renderDetail!()}
+                  </div>
+                )}
+              </div>
+            );
+          })
+        )}
+      </CardStackContent>
+    </CardStack>
+  );
+}