diff --git a/apps/storybook/src/patterns/LayoutPatterns.stories.tsx b/apps/storybook/src/patterns/LayoutPatterns.stories.tsx
index 292fbc731..dda7c42bf 100644
--- a/apps/storybook/src/patterns/LayoutPatterns.stories.tsx
+++ b/apps/storybook/src/patterns/LayoutPatterns.stories.tsx
@@ -351,7 +351,7 @@ function DapValueField({
         {label}
         {required && <RequiredIndicator />}
       </Label>
-      <InputGroup className="h-9 bg-surface-overlay" error={error}>
+      <InputGroup className="h-9 future:bg-surface-overlay" error={error}>
         <InputGroupInput
           id={id}
           value={value}
@@ -426,7 +426,7 @@ function DapValidationPanel({ onClose }: { onClose: () => void }) {
               <Select defaultValue="gmail-finance">
                 <SelectTrigger
                   id="dap-validation-connection"
-                  className="h-9 w-full bg-surface-overlay text-xs"
+                  className="h-9 w-full future:bg-surface-overlay text-xs"
                 >
                   <SelectValue />
                 </SelectTrigger>
@@ -467,7 +467,7 @@ function DapValidationPanel({ onClose }: { onClose: () => void }) {
                   value={body}
                   required
                   onChange={(event) => setBody(event.target.value)}
-                  className="min-h-24 resize-none bg-surface-overlay text-xs"
+                  className="min-h-24 resize-none future:bg-surface-overlay text-xs"
                 />
               </div>
             </section>
@@ -500,7 +500,7 @@ function DapValidationPanel({ onClose }: { onClose: () => void }) {
                 value={retryCount}
                 onChange={(event) => setRetryCount(event.target.value)}
                 error="Retry count must be between 0 and 5."
-                className="bg-surface-overlay text-xs"
+                className="future:bg-surface-overlay text-xs"
               />
             </div>
           </div>
@@ -519,7 +519,7 @@ function DapValidationPanel({ onClose }: { onClose: () => void }) {
             ].map(([name, metadata]) => (
               <div
                 key={name}
-                className="flex items-center gap-3 rounded-lg border border-border-subtle bg-surface-overlay px-3 py-2.5"
+                className="flex items-center gap-3 rounded-lg border border-border-subtle future:bg-surface-overlay px-3 py-2.5"
               >
                 <div className="min-w-0 flex-1">
                   <p className="truncate font-mono text-xs font-medium">{name}</p>
@@ -539,7 +539,7 @@ function DebugPanelContent() {
     <div className="grid h-full grid-cols-[220px_1fr]">
       <div className="border-r border-border-subtle p-3">
         <p className="mb-2 text-xs font-semibold text-foreground">Run history</p>
-        <div className="rounded-lg bg-surface-overlay p-3">
+        <div className="rounded-lg future:bg-surface-overlay p-3">
           <span className="block text-xs font-medium text-foreground">Flow run</span>
           <span className="mt-1 block text-[11px] text-foreground-muted">Failed after 1.8s</span>
         </div>
diff --git a/packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx b/packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx
index 85a4c2913..412c3ca6a 100644
--- a/packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx
+++ b/packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx
@@ -111,6 +111,7 @@ import {
   GripVertical,
   HardDrive,
   Info,
+  Link2,
   MoreHorizontal,
   Pencil,
   Play,
@@ -496,6 +497,14 @@ const TAB_TRIGGER_CLASS =
 export const PanelUIInventory: Story = {
   name: 'UI Inventory',
   render: () => <PanelUIInventoryStory />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Tabs and inventory sections are deep-linkable. Use hashes such as `#ui-inventory/states` or `#ui-inventory/layout/text-fields` after the Storybook story URL to open a tab or section directly.',
+      },
+    },
+  },
 };
 
 export const Responsive: Story = {
@@ -974,7 +983,7 @@ function CasePanel({
           title="Delete case"
           className="shrink-0 rounded hover:bg-transparent text-foreground-subtle opacity-0 hover:text-foreground group-hover:opacity-100"
         >
-          <X size={12} />
+          <Trash2 size={12} />
         </Button>
       </div>
 
@@ -2691,7 +2700,7 @@ function LockableCaseRow({
                   'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 has-[[aria-expanded=true]]:opacity-100'
               )}
             >
-              <X size={12} />
+              <Trash2 size={12} />
             </button>
           }
           value={value}
@@ -2853,7 +2862,7 @@ function FormButtonChip({
             onClick={onDelete}
             className="flex w-full items-center gap-1.5 rounded-lg px-1.5 py-1 text-xs text-destructive transition hover:bg-destructive/10"
           >
-            <X size={12} />
+            <Trash2 size={12} />
             Delete button
           </button>
         </PopoverContent>
@@ -2960,7 +2969,7 @@ function LockableValueFieldShowcase({
                   'opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 has-[[aria-expanded=true]]:opacity-100'
               )}
             >
-              <X size={14} />
+              <Trash2 size={14} />
             </button>
           }
           value={showcaseValue}
@@ -3003,7 +3012,7 @@ function LockableValueFieldShowcase({
                     'opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 has-[[aria-expanded=true]]:opacity-100'
                 )}
               >
-                <X size={14} />
+                <Trash2 size={14} />
               </button>
             }
             value={showcaseValue}
@@ -3515,15 +3524,38 @@ const PatternNotesVisibilityContext = createContext(true);
 function PatternNote({
   title,
   eyebrow = 'Layout pattern',
+  linkTarget,
   children,
 }: {
   title: string;
   eyebrow?: string;
+  linkTarget?: string;
   children: ReactNode;
 }) {
   const [dismissed, setDismissed] = useState(false);
+  const [copied, setCopied] = useState(false);
   const notesVisible = useContext(PatternNotesVisibilityContext);
 
+  const copyLink = async () => {
+    if (!linkTarget) return;
+    const url = new URL(window.location.href);
+    url.hash = `ui-inventory/${linkTarget}`;
+    window.history.replaceState(null, '', url);
+    try {
+      if (!navigator.clipboard?.writeText) return;
+      await navigator.clipboard.writeText(url.toString());
+      setCopied(true);
+    } catch {
+      setCopied(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!copied) return;
+    const timeoutId = window.setTimeout(() => setCopied(false), 1500);
+    return () => window.clearTimeout(timeoutId);
+  }, [copied]);
+
   if (dismissed || !notesVisible) return null;
 
   return (
@@ -3532,17 +3564,32 @@ function PatternNote({
         <p className="pt-0.5 text-[10px] font-semibold uppercase tracking-[0.08em] text-brand">
           {eyebrow}
         </p>
-        <Button
-          variant="ghost"
-          size="4xs"
-          icon
-          onClick={() => setDismissed(true)}
-          aria-label={`Dismiss ${title} note`}
-          title="Dismiss note"
-          className="-mr-1 -mt-1 shrink-0 text-foreground-subtle hover:bg-surface-raised hover:text-foreground"
-        >
-          <X size={12} />
-        </Button>
+        <div className="-mr-1 -mt-1 flex shrink-0 items-center">
+          {linkTarget && (
+            <Button
+              variant="ghost"
+              size="4xs"
+              icon
+              onClick={copyLink}
+              aria-label={copied ? `Copied link to ${title}` : `Copy link to ${title}`}
+              title={copied ? 'Link copied' : 'Copy link'}
+              className="text-foreground-subtle hover:bg-surface-raised hover:text-foreground"
+            >
+              <Link2 size={12} />
+            </Button>
+          )}
+          <Button
+            variant="ghost"
+            size="4xs"
+            icon
+            onClick={() => setDismissed(true)}
+            aria-label={`Dismiss ${title} note`}
+            title="Dismiss note"
+            className="text-foreground-subtle hover:bg-surface-raised hover:text-foreground"
+          >
+            <X size={12} />
+          </Button>
+        </div>
       </div>
       <h3 className="mt-1 text-sm font-semibold text-foreground">{title}</h3>
       <p className="mt-1 text-xs leading-4 text-foreground-muted">{children}</p>
@@ -3601,7 +3648,7 @@ function InventorySubContainer({
                 <Input type="number" defaultValue="3" min="0" />
               </InventoryField>
               <InventoryField label="System identifier">
-                <Input value="invoice-extraction-01" readOnly disabled />
+                <Input value="invoice-extraction-01" readOnly />
               </InventoryField>
             </section>
           </div>
@@ -3663,7 +3710,12 @@ function InventorySubContainer({
             </div>
             <div className="flex items-center justify-between gap-4">
               <Label htmlFor="sub-container-enabled">Enabled</Label>
-              <Switch id="sub-container-enabled" checked={enabled} onCheckedChange={setEnabled} />
+              <Switch
+                id="sub-container-enabled"
+                size="sm"
+                checked={enabled}
+                onCheckedChange={setEnabled}
+              />
             </div>
             <InventoryField label="Confidence threshold" description="Current value: 75%">
               <Slider defaultValue={[75]} max={100} step={5} />
@@ -3782,6 +3834,8 @@ function CompositionFieldDragOverlay({ field }: { field: CompositionFieldItem })
 }
 
 function PanelUIInventoryStory() {
+  const [inventoryTab, setInventoryTab] = useState('layout');
+  const [inventorySection, setInventorySection] = useState<string | null>(null);
   const [enabled, setEnabled] = useState(true);
   const [checked, setChecked] = useState(true);
   const [notesVisible, setNotesVisible] = useState(true);
@@ -3808,6 +3862,51 @@ function PanelUIInventoryStory() {
   const allSubContainerSections = ['text-fields', 'choices', 'advanced'];
   const [expandedSections, setExpandedSections] = useState<string[]>([]);
   const [expandedSubContainerSections, setExpandedSubContainerSections] = useState<string[]>([]);
+
+  useEffect(() => {
+    const syncFromHash = () => {
+      let decodedHash = '';
+      try {
+        decodedHash = decodeURIComponent(window.location.hash.slice(1));
+      } catch {
+        return;
+      }
+
+      const match = decodedHash.match(/^ui-inventory\/([^/]+)(?:\/(.+))?$/);
+      if (!match) return;
+
+      const [, tab, section] = match;
+      if (!['layout', 'states', 'actions', 'composition'].includes(tab)) return;
+      setInventoryTab(tab);
+      setInventorySection(section ?? null);
+      if (tab === 'layout' && section && ['text-fields', 'choices', 'advanced'].includes(section)) {
+        setExpandedSections((current) =>
+          current.includes(section) ? current : [...current, section]
+        );
+      }
+    };
+
+    syncFromHash();
+    window.addEventListener('hashchange', syncFromHash);
+    return () => window.removeEventListener('hashchange', syncFromHash);
+  }, []);
+
+  useEffect(() => {
+    if (!inventorySection) return;
+
+    const timeoutId = window.setTimeout(() => {
+      document.getElementById(`ui-inventory-${inventoryTab}-${inventorySection}`)?.scrollIntoView({
+        block: 'start',
+      });
+    }, 0);
+    return () => window.clearTimeout(timeoutId);
+  }, [inventorySection, inventoryTab]);
+
+  const handleInventoryTabChange = (tab: string) => {
+    setInventoryTab(tab);
+    setInventorySection(null);
+    window.history.replaceState(null, '', `#ui-inventory/${tab}`);
+  };
   const allSectionsExpanded =
     expandedSections.length === allInventorySections.length &&
     expandedSubContainerSections.length === allSubContainerSections.length;
@@ -3843,22 +3942,42 @@ function PanelUIInventoryStory() {
           className="h-[720px]"
         >
           <PatternNotesVisibilityContext.Provider value={notesVisible}>
-            <Tabs defaultValue="layout" className="flex h-full min-h-0 flex-col">
+            <Tabs
+              value={inventoryTab}
+              onValueChange={handleInventoryTabChange}
+              className="flex h-full min-h-0 flex-col"
+            >
               <div className="flex shrink-0 items-center gap-2 border-b border-border-subtle px-3.5 py-3">
                 <ScrollableTabsList
                   className={cn(TAB_LIST_CLASS, 'min-w-0 flex-1')}
                   scrollButtonClassName="size-6 hover:bg-surface-overlay"
                 >
-                  <TabsTrigger value="layout" className={TAB_TRIGGER_CLASS}>
+                  <TabsTrigger
+                    value="layout"
+                    className={TAB_TRIGGER_CLASS}
+                    id="ui-inventory-tab-layout"
+                  >
                     Layout
                   </TabsTrigger>
-                  <TabsTrigger value="states" className={TAB_TRIGGER_CLASS}>
+                  <TabsTrigger
+                    value="states"
+                    className={TAB_TRIGGER_CLASS}
+                    id="ui-inventory-tab-states"
+                  >
                     States
                   </TabsTrigger>
-                  <TabsTrigger value="actions" className={TAB_TRIGGER_CLASS}>
+                  <TabsTrigger
+                    value="actions"
+                    className={TAB_TRIGGER_CLASS}
+                    id="ui-inventory-tab-actions"
+                  >
                     Actions
                   </TabsTrigger>
-                  <TabsTrigger value="composition" className={TAB_TRIGGER_CLASS}>
+                  <TabsTrigger
+                    value="composition"
+                    className={TAB_TRIGGER_CLASS}
+                    id="ui-inventory-tab-composition"
+                  >
                     Composition
                   </TabsTrigger>
                 </ScrollableTabsList>
@@ -3887,8 +4006,8 @@ function PanelUIInventoryStory() {
               </div>
 
               <TabsContent value="layout" className="mt-0 min-h-0 flex-1 overflow-y-auto">
-                <div className="grid gap-4 px-3.5 py-5">
-                  <PatternNote title="Flat content">
+                <div id="ui-inventory-layout-flat-content" className="grid gap-4 px-3.5 py-5">
+                  <PatternNote title="Flat content" linkTarget="layout/flat-content">
                     A simple, always-visible layout for short configurations that do not need
                     collapsible sections or nested containers.
                   </PatternNote>
@@ -3917,12 +4036,15 @@ function PanelUIInventoryStory() {
                           Run this node in the workflow.
                         </p>
                       </div>
-                      <Switch id="flat-pattern-enabled" defaultChecked />
+                      <Switch id="flat-pattern-enabled" size="sm" defaultChecked />
                     </div>
                   </div>
                 </div>
-                <div className="border-t border-border-subtle px-3.5 has-[aside]:pt-5">
-                  <PatternNote title="Expandable sections">
+                <div
+                  id="ui-inventory-layout-expandable-sections"
+                  className="border-t border-border-subtle px-3.5 has-[aside]:pt-5"
+                >
+                  <PatternNote title="Expandable sections" linkTarget="layout/expandable-sections">
                     Full-width sections that reveal or hide related fields without adding nested
                     container chrome.
                   </PatternNote>
@@ -3932,7 +4054,11 @@ function PanelUIInventoryStory() {
                   value={expandedSections}
                   onValueChange={setExpandedSections}
                 >
-                  <AccordionItem value="text-fields" className="border-border-subtle px-3.5">
+                  <AccordionItem
+                    value="text-fields"
+                    id="ui-inventory-layout-text-fields"
+                    className="border-border-subtle px-3.5"
+                  >
                     <AccordionTrigger className="group py-4 text-sm hover:no-underline">
                       <span className="text-foreground transition-colors group-hover:text-foreground-muted">
                         Text and numeric fields
@@ -3952,12 +4078,16 @@ function PanelUIInventoryStory() {
                         <Input type="number" defaultValue="3" min="0" />
                       </InventoryField>
                       <InventoryField label="Read-only value">
-                        <Input value="Generated by the system" readOnly disabled />
+                        <Input value="Generated by the system" readOnly />
                       </InventoryField>
                     </AccordionContent>
                   </AccordionItem>
 
-                  <AccordionItem value="choices" className="border-border-subtle px-3.5">
+                  <AccordionItem
+                    value="choices"
+                    id="ui-inventory-layout-choices"
+                    className="border-border-subtle px-3.5"
+                  >
                     <AccordionTrigger className="group py-4 text-sm hover:no-underline">
                       <span className="text-foreground transition-colors group-hover:text-foreground-muted">
                         Selection controls
@@ -4010,6 +4140,7 @@ function PanelUIInventoryStory() {
                         </div>
                         <Switch
                           id="enabled-switch"
+                          size="sm"
                           checked={enabled}
                           onCheckedChange={setEnabled}
                         />
@@ -4020,7 +4151,11 @@ function PanelUIInventoryStory() {
                     </AccordionContent>
                   </AccordionItem>
 
-                  <AccordionItem value="advanced" className="border-border-subtle px-3.5">
+                  <AccordionItem
+                    value="advanced"
+                    id="ui-inventory-layout-advanced"
+                    className="border-border-subtle px-3.5"
+                  >
                     <AccordionTrigger className="group py-4 text-sm hover:no-underline">
                       <span className="text-foreground transition-colors group-hover:text-foreground-muted">
                         Advanced options
@@ -4033,8 +4168,11 @@ function PanelUIInventoryStory() {
                     </AccordionContent>
                   </AccordionItem>
                 </Accordion>
-                <div className="grid gap-3 border-t border-border-subtle px-3.5 py-5">
-                  <PatternNote title="Sub-containers">
+                <div
+                  id="ui-inventory-layout-sub-containers"
+                  className="grid gap-3 border-t border-border-subtle px-3.5 py-5"
+                >
+                  <PatternNote title="Sub-containers" linkTarget="layout/sub-containers">
                     Dense, collapsible cards for related configuration when stronger visual grouping
                     is useful.
                   </PatternNote>
@@ -4047,8 +4185,12 @@ function PanelUIInventoryStory() {
 
               <TabsContent value="states" className="mt-0 min-h-0 flex-1 overflow-y-auto p-3.5">
                 <div className="grid gap-5">
-                  <section className="grid gap-3">
-                    <PatternNote title="Section messages" eyebrow="State pattern">
+                  <section id="ui-inventory-states-section-messages" className="grid gap-3">
+                    <PatternNote
+                      title="Section messages"
+                      eyebrow="State pattern"
+                      linkTarget="states/section-messages"
+                    >
                       Persistent feedback summarizes a panel-level result and provides the next
                       action when one is needed.
                     </PatternNote>
@@ -4074,8 +4216,15 @@ function PanelUIInventoryStory() {
                     />
                   </section>
 
-                  <section className="grid gap-3 border-t border-border-subtle pt-5">
-                    <PatternNote title="Navigation validation" eyebrow="State pattern">
+                  <section
+                    id="ui-inventory-states-navigation-validation"
+                    className="grid gap-3 border-t border-border-subtle pt-5"
+                  >
+                    <PatternNote
+                      title="Navigation validation"
+                      eyebrow="State pattern"
+                      linkTarget="states/navigation-validation"
+                    >
                       Error counts on tabs reveal where unresolved issues live, including problems
                       in sections that are not currently visible.
                     </PatternNote>
@@ -4097,8 +4246,15 @@ function PanelUIInventoryStory() {
                     </Tabs>
                   </section>
 
-                  <section className="grid gap-3 border-t border-border-subtle pt-5">
-                    <PatternNote title="Inline validation" eyebrow="State pattern">
+                  <section
+                    id="ui-inventory-states-inline-validation"
+                    className="grid gap-3 border-t border-border-subtle pt-5"
+                  >
+                    <PatternNote
+                      title="Inline validation"
+                      eyebrow="State pattern"
+                      linkTarget="states/inline-validation"
+                    >
                       Field-specific feedback stays beside the control so the issue and resolution
                       are clear in context.
                     </PatternNote>
@@ -4122,8 +4278,15 @@ function PanelUIInventoryStory() {
                     </InventoryField>
                   </section>
 
-                  <section className="grid gap-3 border-t border-border-subtle pt-5">
-                    <PatternNote title="Transient feedback" eyebrow="State pattern">
+                  <section
+                    id="ui-inventory-states-transient-feedback"
+                    className="grid gap-3 border-t border-border-subtle pt-5"
+                  >
+                    <PatternNote
+                      title="Transient feedback"
+                      eyebrow="State pattern"
+                      linkTarget="states/transient-feedback"
+                    >
                       Toasts confirm the result of a user action without interrupting the task. Keep
                       actionable errors visible in the panel instead.
                     </PatternNote>
@@ -4171,8 +4334,15 @@ function PanelUIInventoryStory() {
                     </div>
                   </section>
 
-                  <section className="grid gap-3 border-t border-border-subtle pt-5">
-                    <PatternNote title="Status labels" eyebrow="State pattern">
+                  <section
+                    id="ui-inventory-states-status-labels"
+                    className="grid gap-3 border-t border-border-subtle pt-5"
+                  >
+                    <PatternNote
+                      title="Status labels"
+                      eyebrow="State pattern"
+                      linkTarget="states/status-labels"
+                    >
                       Short labels communicate passive field or setting states without interrupting
                       the task.
                     </PatternNote>
@@ -4187,8 +4357,12 @@ function PanelUIInventoryStory() {
 
               <TabsContent value="actions" className="mt-0 min-h-0 flex-1 overflow-y-auto p-3.5">
                 <div className="grid gap-5">
-                  <section className="grid gap-3">
-                    <PatternNote title="Button hierarchy" eyebrow="Action pattern">
+                  <section id="ui-inventory-actions-button-hierarchy" className="grid gap-3">
+                    <PatternNote
+                      title="Button hierarchy"
+                      eyebrow="Action pattern"
+                      linkTarget="actions/button-hierarchy"
+                    >
                       Use one primary action per context, with secondary, tertiary, and destructive
                       styles reflecting lower emphasis or greater consequence.
                     </PatternNote>
@@ -4200,8 +4374,15 @@ function PanelUIInventoryStory() {
                     </div>
                   </section>
 
-                  <section className="grid gap-3 border-t border-border-subtle pt-5">
-                    <PatternNote title="Header actions" eyebrow="Action pattern">
+                  <section
+                    id="ui-inventory-actions-header-actions"
+                    className="grid gap-3 border-t border-border-subtle pt-5"
+                  >
+                    <PatternNote
+                      title="Header actions"
+                      eyebrow="Action pattern"
+                      linkTarget="actions/header-actions"
+                    >
                       Reserve the panel header for high-frequency node-level commands such as
                       running or debugging. Keep the set small so the primary task remains clear.
                     </PatternNote>
@@ -4211,8 +4392,15 @@ function PanelUIInventoryStory() {
                     </div>
                   </section>
 
-                  <section className="grid gap-3 border-t border-border-subtle pt-5">
-                    <PatternNote title="Inline links" eyebrow="Action pattern">
+                  <section
+                    id="ui-inventory-actions-inline-links"
+                    className="grid gap-3 border-t border-border-subtle pt-5"
+                  >
+                    <PatternNote
+                      title="Inline links"
+                      eyebrow="Action pattern"
+                      linkTarget="actions/inline-links"
+                    >
                       Use a compact link when the action is related to nearby content and should not
                       compete with the panel's primary controls.
                     </PatternNote>
@@ -4221,8 +4409,15 @@ function PanelUIInventoryStory() {
                     </Button>
                   </section>
 
-                  <section className="grid gap-3 border-t border-border-subtle pt-5">
-                    <PatternNote title="Footer actions" eyebrow="Action pattern">
+                  <section
+                    id="ui-inventory-actions-footer-actions"
+                    className="grid gap-3 border-t border-border-subtle pt-5"
+                  >
+                    <PatternNote
+                      title="Footer actions"
+                      eyebrow="Action pattern"
+                      linkTarget="actions/footer-actions"
+                    >
                       Place panel-level actions at the end of the content, with the primary action
                       last and the cancel action immediately before it.
                     </PatternNote>
@@ -4232,8 +4427,15 @@ function PanelUIInventoryStory() {
                     </div>
                   </section>
 
-                  <section className="grid gap-3 border-t border-border-subtle pt-5">
-                    <PatternNote title="Manage" eyebrow="Action pattern">
+                  <section
+                    id="ui-inventory-actions-manage"
+                    className="grid gap-3 border-t border-border-subtle pt-5"
+                  >
+                    <PatternNote
+                      title="Manage"
+                      eyebrow="Action pattern"
+                      linkTarget="actions/manage"
+                    >
                       Use a secondary button when the action opens a separate configuration surface
                       for the field or section it affects.
                     </PatternNote>
@@ -4244,8 +4446,11 @@ function PanelUIInventoryStory() {
                     </div>
                   </section>
 
-                  <section className="grid gap-3 border-t border-border-subtle pt-5">
-                    <PatternNote title="Add" eyebrow="Action pattern">
+                  <section
+                    id="ui-inventory-actions-add"
+                    className="grid gap-3 border-t border-border-subtle pt-5"
+                  >
+                    <PatternNote title="Add" eyebrow="Action pattern" linkTarget="actions/add">
                       Use the lightweight plus link when adding another item to a repeatable list.
                       Keep it separate from manage actions so the two intents are easy to scan.
                     </PatternNote>
@@ -4254,8 +4459,15 @@ function PanelUIInventoryStory() {
                     </div>
                   </section>
 
-                  <section className="grid gap-3 border-t border-border-subtle pt-5">
-                    <PatternNote title="Icon-only utilities" eyebrow="Action pattern">
+                  <section
+                    id="ui-inventory-actions-icon-utilities"
+                    className="grid gap-3 border-t border-border-subtle pt-5"
+                  >
+                    <PatternNote
+                      title="Icon-only utilities"
+                      eyebrow="Action pattern"
+                      linkTarget="actions/icon-utilities"
+                    >
                       Use compact icon actions for familiar utilities when space is limited. Always
                       provide a tooltip and accessible name.
                     </PatternNote>
@@ -4291,8 +4503,12 @@ function PanelUIInventoryStory() {
                 className="mt-0 min-h-0 flex-1 overflow-y-auto p-3.5"
               >
                 <div className="grid gap-5">
-                  <section className="grid gap-3">
-                    <PatternNote title="Repeatable field list" eyebrow="Composition pattern">
+                  <section id="ui-inventory-composition-repeatable-list" className="grid gap-3">
+                    <PatternNote
+                      title="Repeatable field list"
+                      eyebrow="Composition pattern"
+                      linkTarget="composition/repeatable-list"
+                    >
                       Use reorder, add, and remove controls when users build a variable-length set
                       of related fields.
                     </PatternNote>
@@ -4361,8 +4577,15 @@ function PanelUIInventoryStory() {
                     </div>
                   </section>
 
-                  <section className="grid gap-3 border-t border-border-subtle pt-5">
-                    <PatternNote title="Editing modes" eyebrow="Composition pattern">
+                  <section
+                    id="ui-inventory-composition-editing-modes"
+                    className="grid gap-3 border-t border-border-subtle pt-5"
+                  >
+                    <PatternNote
+                      title="Editing modes"
+                      eyebrow="Composition pattern"
+                      linkTarget="composition/editing-modes"
+                    >
                       Switch between a guided interface and a source representation without changing
                       the underlying configuration.
                     </PatternNote>
@@ -4394,8 +4617,15 @@ function PanelUIInventoryStory() {
                     )}
                   </section>
 
-                  <section className="grid gap-3 border-t border-border-subtle pt-5">
-                    <PatternNote title="Lockable value field" eyebrow="Composition pattern">
+                  <section
+                    id="ui-inventory-composition-lockable-value-field"
+                    className="grid gap-3 border-t border-border-subtle pt-5"
+                  >
+                    <PatternNote
+                      title="Lockable value field"
+                      eyebrow="Composition pattern"
+                      linkTarget="composition/lockable-value-field"
+                    >
                       Combines field type, required state, AI assistance, variable insertion, and
                       fixed or expression values in one reusable Flow control.
                     </PatternNote>
@@ -4413,7 +4643,7 @@ function PanelUIInventoryStory() {
                       headerActions={
                         <CanvasTooltip content="Remove field">
                           <Button variant="ghost" size="4xs" icon aria-label="Remove field">
-                            <X size={14} />
+                            <Trash2 size={14} />
                           </Button>
                         </CanvasTooltip>
                       }
diff --git a/packages/apollo-react/src/canvas/stories/templates/Flow.stories.tsx b/packages/apollo-react/src/canvas/stories/templates/Flow.stories.tsx
index aa10a8ec8..a5e9af93a 100644
--- a/packages/apollo-react/src/canvas/stories/templates/Flow.stories.tsx
+++ b/packages/apollo-react/src/canvas/stories/templates/Flow.stories.tsx
@@ -3775,6 +3775,7 @@ function DapValueField({
 }
 
 function DapPanel({ onClose }: { onClose: () => void }) {
+  const [connection, setConnection] = useState('gmail-finance');
   const [subject, setSubject] = useState('Invoice approval required');
   const [recipient, setRecipient] = useState('$vars.approverEmail');
   const [body, setBody] = useState(
@@ -3852,30 +3853,29 @@ function DapPanel({ onClose }: { onClose: () => void }) {
             </p>
 
             <section className="space-y-1.5">
-              <div className="flex items-center justify-between gap-3">
-                <Label htmlFor="dap-connection" className="text-xs font-semibold text-foreground">
-                  Connection
-                </Label>
-                <Button
-                  size="3xs"
-                  variant="link"
-                  className="h-6 px-0 text-[11px] font-medium text-brand hover:text-brand"
-                >
-                  Refresh schema
-                </Button>
-              </div>
-              <Select defaultValue="gmail-finance">
-                <SelectTrigger
-                  id="dap-connection"
-                  className="h-9 w-full bg-surface-overlay text-xs"
-                >
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="gmail-finance">Gmail · Finance operations</SelectItem>
-                  <SelectItem value="gmail-personal">Gmail · Personal</SelectItem>
-                </SelectContent>
-              </Select>
+              <LockableValueField
+                id="dap-connection"
+                label={
+                  <Label htmlFor="dap-connection" className="text-xs font-semibold text-foreground">
+                    Connection
+                  </Label>
+                }
+                fieldType="single-select"
+                value={connection}
+                onValueChange={setConnection}
+                locked={false}
+                showLock={false}
+                options={[
+                  { value: 'gmail-finance', label: 'Gmail · Finance operations' },
+                  { value: 'gmail-personal', label: 'Gmail · Personal' },
+                ]}
+                more={{
+                  onClear: () => setConnection(''),
+                  onRefresh: () => setConnection('gmail-finance'),
+                }}
+                showFieldActions={false}
+                className="gap-1.5"
+              />
               <Alert className="border-brand/30 bg-brand-subtle/30 py-2.5">
                 <AlertDescription className="text-[11px] leading-4">
                   Schema is current. Nine configurable message properties are available.
@@ -3921,7 +3921,7 @@ function DapPanel({ onClose }: { onClose: () => void }) {
                     </Button>
                   </VariablePicker>
                 </div>
-                <div className="overflow-hidden rounded-lg border border-border-subtle bg-surface-overlay focus-within:border-border-focus">
+                <div className="overflow-hidden rounded-lg border border-border-subtle future:bg-surface-overlay focus-within:border-border-focus">
                   <div className="flex h-8 items-center gap-1 border-b border-border-subtle px-2">
                     <Button size="sm" variant="ghost" className="size-6 p-0" aria-label="Bold">
                       <Bold size={13} />
@@ -3988,7 +3988,7 @@ function DapPanel({ onClose }: { onClose: () => void }) {
                   <div className="space-y-1.5">
                     <Label className="text-xs">Importance</Label>
                     <Select defaultValue="normal">
-                      <SelectTrigger className="h-9 w-full bg-surface-overlay text-xs">
+                      <SelectTrigger className="h-9 w-full future:bg-surface-overlay text-xs">
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
diff --git a/packages/apollo-wind/src/components/ui/button.stories.tsx b/packages/apollo-wind/src/components/ui/button.stories.tsx
index dbc06f01f..a035dd18e 100644
--- a/packages/apollo-wind/src/components/ui/button.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/button.stories.tsx
@@ -104,6 +104,31 @@ export const LinkSizes: Story = {
   ),
 };
 
+export const AddFieldAction: Story = {
+  name: 'Add field action',
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        story:
+          'Lightweight plus-link action for adding another field to a repeatable list. Use the Theme toolbar to preview it in Future Light or Future Dark.',
+      },
+    },
+  },
+  render: () => (
+    <div className="flex min-h-24 w-full max-w-md items-center rounded-lg border border-border-subtle bg-background p-4 text-foreground">
+      <Button
+        variant="link"
+        size="3xs"
+        className="w-fit gap-1.5 text-brand hover:text-brand-hover future:text-brand future:hover:text-brand-hover"
+      >
+        <Plus />
+        Add field
+      </Button>
+    </div>
+  ),
+};
+
 export const LinkAsAnchor: Story = {
   name: 'Link as anchor',
   render: () => (
diff --git a/packages/apollo-wind/src/components/ui/combobox.stories.tsx b/packages/apollo-wind/src/components/ui/combobox.stories.tsx
index f43370e32..1f7702569 100644
--- a/packages/apollo-wind/src/components/ui/combobox.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/combobox.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta } from '@storybook/react-vite';
-import { Check, ChevronsUpDown, Loader2, X } from 'lucide-react';
+import { Check, ChevronDown, Loader2, X } from 'lucide-react';
 import * as React from 'react';
 import { cn } from '../../lib';
 import { Badge } from './badge';
@@ -98,7 +98,7 @@ function MultiSelectCombobox() {
             className="w-[320px] justify-between future:gap-4 future:rounded-xl future:border-0 future:bg-surface-overlay future:font-normal future:text-muted-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background"
           >
             {selected.length > 0 ? `${selected.length} selected` : 'Select frameworks...'}
-            <ChevronsUpDown className="opacity-50" />
+            <ChevronDown className="opacity-50" />
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-[320px] p-0">
@@ -192,7 +192,7 @@ function CustomDisplayCombobox() {
           ) : (
             'Select issue type...'
           )}
-          <ChevronsUpDown className="opacity-50" />
+          <ChevronDown className="opacity-50" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[320px] p-0">
@@ -287,7 +287,7 @@ function AsyncCombobox() {
             className="w-[280px] justify-between future:gap-4 future:rounded-xl future:border-0 future:bg-surface-overlay future:font-normal future:text-muted-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background"
           >
             {selected ? selected.label : 'Search libraries...'}
-            <ChevronsUpDown className="opacity-50" />
+            <ChevronDown className="opacity-50" />
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-[280px] p-0">
diff --git a/packages/apollo-wind/src/components/ui/combobox.tsx b/packages/apollo-wind/src/components/ui/combobox.tsx
index 172e85fb6..e1f5a1e66 100644
--- a/packages/apollo-wind/src/components/ui/combobox.tsx
+++ b/packages/apollo-wind/src/components/ui/combobox.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Check, ChevronsUpDown } from 'lucide-react';
+import { Check, ChevronDown } from 'lucide-react';
 import * as React from 'react';
 import { Button } from '@/components/ui/button';
 import {
@@ -63,7 +63,7 @@ export const Combobox = React.forwardRef<HTMLButtonElement, ComboboxProps>(funct
           disabled={disabled}
         >
           {selectedItem ? selectedItem.label : placeholder}
-          <ChevronsUpDown className="opacity-50" />
+          <ChevronDown className="opacity-50" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[280px] p-0">
diff --git a/packages/apollo-wind/src/components/ui/date-picker.tsx b/packages/apollo-wind/src/components/ui/date-picker.tsx
index 198385862..970d496a8 100644
--- a/packages/apollo-wind/src/components/ui/date-picker.tsx
+++ b/packages/apollo-wind/src/components/ui/date-picker.tsx
@@ -2,8 +2,8 @@
 
 import { format } from 'date-fns';
 import { CalendarIcon } from 'lucide-react';
-import type { DateRange } from 'react-day-picker';
 import * as React from 'react';
+import type { DateRange } from 'react-day-picker';
 import { Button } from '@/components/ui/button';
 import { Calendar } from '@/components/ui/calendar';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
@@ -34,6 +34,7 @@ export const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(f
           aria-label={value ? `Selected date: ${format(value, 'PPP')}` : placeholder}
           className={cn(
             'w-full justify-start text-left font-normal',
+            'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-muted-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background',
             !value && 'text-muted-foreground',
             className
           )}
@@ -94,6 +95,7 @@ export const DateRangePicker = React.forwardRef<HTMLButtonElement, DateRangePick
             }
             className={cn(
               'w-[300px] justify-start text-left font-normal',
+              'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-muted-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background',
               !value && 'text-muted-foreground',
               className
             )}
diff --git a/packages/apollo-wind/src/components/ui/datetime-picker.tsx b/packages/apollo-wind/src/components/ui/datetime-picker.tsx
index ba8d09a87..1a40a2f10 100644
--- a/packages/apollo-wind/src/components/ui/datetime-picker.tsx
+++ b/packages/apollo-wind/src/components/ui/datetime-picker.tsx
@@ -1,11 +1,11 @@
-import * as React from 'react';
 import { format } from 'date-fns';
 import { CalendarIcon, Clock } from 'lucide-react';
+import * as React from 'react';
 import { Button } from '@/components/ui/button';
 import { Calendar } from '@/components/ui/calendar';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { cn } from '@/lib';
 
 export interface DateTimePickerProps {
@@ -79,6 +79,7 @@ export const DateTimePicker = React.forwardRef<HTMLButtonElement, DateTimePicker
             variant="outline"
             className={cn(
               'w-full justify-start text-left font-normal',
+              'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-muted-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background',
               !selectedDate && 'text-muted-foreground',
               className
             )}
diff --git a/packages/apollo-wind/src/components/ui/dropdown-menu.stories.tsx b/packages/apollo-wind/src/components/ui/dropdown-menu.stories.tsx
index e70101b92..0c737f350 100644
--- a/packages/apollo-wind/src/components/ui/dropdown-menu.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/dropdown-menu.stories.tsx
@@ -82,6 +82,7 @@ export const WithInlineValidation = {
         <DropdownMenuTrigger
           asChild
           field
+          className="w-fit"
           error="Select a connection before continuing."
           errorId="connection-dropdown-error"
         >
@@ -110,7 +111,7 @@ export const DropdownWithActions = {
   name: 'Dropdown with Actions',
   render: () => (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
+      <DropdownMenuTrigger asChild field>
         <Button variant="outline">
           Actions
           <ChevronDown className="ml-2 h-4 w-4" />
@@ -148,7 +149,7 @@ export const DropdownWithActions = {
           Download
         </DropdownMenuItem>
         <DropdownMenuSeparator />
-        <DropdownMenuItem className="text-destructive focus:text-destructive">
+        <DropdownMenuItem className="text-error focus:text-error">
           <Trash2 className="mr-2 h-4 w-4" />
           Delete
           <DropdownMenuShortcut>⌫</DropdownMenuShortcut>
@@ -172,7 +173,7 @@ export const DropdownWithCheckboxes = {
 
     return (
       <DropdownMenu>
-        <DropdownMenuTrigger asChild>
+        <DropdownMenuTrigger asChild field>
           <Button variant="outline">
             Columns
             <ChevronDown className="ml-2 h-4 w-4" />
@@ -279,17 +280,17 @@ export const FileActions = {
     ];
 
     return (
-      <div className="w-[500px] rounded-lg border">
+      <div className="w-[500px] overflow-hidden rounded-xl border border-border-subtle bg-surface-overlay">
         {files.map((file, i) => (
           <div
             key={file.name}
-            className={`flex items-center justify-between px-4 py-3 ${i < files.length - 1 ? 'border-b' : ''}`}
+            className={`flex items-center justify-between px-4 py-3 ${i < files.length - 1 ? 'border-b border-border-subtle' : ''}`}
           >
             <div className="flex items-center gap-3">
-              <FileText className="h-4 w-4 text-muted-foreground" />
+              <FileText className="h-4 w-4 text-foreground-muted" />
               <div>
                 <p className="text-sm font-medium">{file.name}</p>
-                <p className="text-xs text-muted-foreground">
+                <p className="text-xs text-foreground-muted">
                   {file.type} · {file.size}
                 </p>
               </div>
@@ -325,7 +326,7 @@ export const FileActions = {
                   </DropdownMenuSubContent>
                 </DropdownMenuSub>
                 <DropdownMenuSeparator />
-                <DropdownMenuItem className="text-destructive focus:text-destructive">
+                <DropdownMenuItem className="text-error focus:text-error">
                   <Trash2 className="mr-2 h-4 w-4" />
                   Delete
                 </DropdownMenuItem>
@@ -471,7 +472,7 @@ export const DataTable = {
                     Duplicate
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
-                  <DropdownMenuItem className="text-destructive focus:text-destructive">
+                  <DropdownMenuItem className="text-error focus:text-error">
                     <Trash2 className="mr-2 h-4 w-4" />
                     Delete
                   </DropdownMenuItem>
diff --git a/packages/apollo-wind/src/components/ui/file-upload.tsx b/packages/apollo-wind/src/components/ui/file-upload.tsx
index 6532761c0..5649d7b6e 100644
--- a/packages/apollo-wind/src/components/ui/file-upload.tsx
+++ b/packages/apollo-wind/src/components/ui/file-upload.tsx
@@ -237,7 +237,7 @@ export const FileUpload = React.forwardRef<HTMLFieldSetElement, FileUploadProps>
       const k = 1024;
       const sizes = ['Bytes', 'KB', 'MB', 'GB'];
       const i = Math.floor(Math.log(bytes) / Math.log(k));
-      return Math.round((bytes / k ** i) * 100) / 100 + ' ' + sizes[i];
+      return `${Math.round((bytes / k ** i) * 100) / 100} ${sizes[i]}`;
     };
 
     return (
@@ -279,15 +279,15 @@ export const FileUpload = React.forwardRef<HTMLFieldSetElement, FileUploadProps>
           tabIndex={disabled ? -1 : 0}
           className={cn(
             // Base styles (all themes)
-            'relative flex flex-col items-center justify-center w-full h-32 px-4 py-6 border-2 border-dashed rounded-lg cursor-pointer transition-colors',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+            'relative flex w-full flex-col items-center justify-center h-32 border-2 border-dashed rounded-lg px-4 py-6 cursor-pointer transition-colors',
+            'text-foreground-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
             // Future Dark / Future Light overrides
-            'future:rounded-xl',
+            'future:rounded-xl future:border-border-subtle future:bg-surface-overlay future:hover:bg-surface-hover future:focus-visible:ring-offset-background',
             isDragging
               ? 'border-primary bg-primary/5'
-              : 'border-input bg-background hover:bg-accent/50 future:border-border future:bg-surface-raised future:hover:bg-surface-overlay',
+              : 'border-input bg-background hover:bg-accent/50',
             disabled &&
-              'opacity-50 cursor-not-allowed hover:bg-background future:hover:bg-surface-raised'
+              'opacity-50 cursor-not-allowed hover:bg-background future:hover:bg-surface-overlay'
           )}
           onDragEnter={handleDragEnter}
           onDragOver={handleDragOver}
@@ -301,15 +301,19 @@ export const FileUpload = React.forwardRef<HTMLFieldSetElement, FileUploadProps>
             }
           }}
         >
-          <Upload className="w-8 h-8 mb-2 text-muted-foreground" />
-          <p className="text-sm text-muted-foreground text-center">
+          <Upload className="mb-2 h-8 w-8 text-muted-foreground future:text-foreground-muted" />
+          <p className="text-center text-sm text-muted-foreground future:text-foreground-muted">
             <span className="font-semibold">Click to upload</span> or drag and drop
           </p>
           {accept && (
-            <p className="text-xs text-muted-foreground mt-1">{accept.split(',').join(', ')}</p>
+            <p className="mt-1 text-xs text-muted-foreground future:text-foreground-muted">
+              {accept.split(',').join(', ')}
+            </p>
           )}
           {maxSize && (
-            <p className="text-xs text-muted-foreground">Max size: {formatFileSize(maxSize)}</p>
+            <p className="text-xs text-muted-foreground future:text-foreground-muted">
+              Max size: {formatFileSize(maxSize)}
+            </p>
           )}
         </div>
 
diff --git a/packages/apollo-wind/src/components/ui/input.stories.tsx b/packages/apollo-wind/src/components/ui/input.stories.tsx
index bcc3a9bef..58543a410 100644
--- a/packages/apollo-wind/src/components/ui/input.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/input.stories.tsx
@@ -84,6 +84,21 @@ export const WithValue: Story = {
   },
 };
 
+export const ReadOnly: Story = {
+  args: {
+    value: 'Generated by the system',
+    readOnly: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Use read-only when the value is available for reference but should not invite editing. Keep it visually present without the disabled treatment.',
+      },
+    },
+  },
+};
+
 export const Password: Story = {
   args: {
     type: 'password',
diff --git a/packages/apollo-wind/src/components/ui/input.tsx b/packages/apollo-wind/src/components/ui/input.tsx
index 1034194e2..5857b64eb 100644
--- a/packages/apollo-wind/src/components/ui/input.tsx
+++ b/packages/apollo-wind/src/components/ui/input.tsx
@@ -49,7 +49,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           aria-invalid={error ? true : ariaInvalid}
           className={cn(
             // Base styles (all themes)
-            'flex w-full transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-error aria-invalid:focus-visible:ring-error',
+            'flex w-full transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring read-only:cursor-default disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-error aria-invalid:focus-visible:ring-error',
             // Size
             size === 'default' &&
               'h-9 rounded-md px-3 py-1 text-base placeholder:text-muted-foreground md:text-sm',
diff --git a/packages/apollo-wind/src/components/ui/lockable-value-field/components/field-header.tsx b/packages/apollo-wind/src/components/ui/lockable-value-field/components/field-header.tsx
index 03ee3e060..4c3bdb833 100644
--- a/packages/apollo-wind/src/components/ui/lockable-value-field/components/field-header.tsx
+++ b/packages/apollo-wind/src/components/ui/lockable-value-field/components/field-header.tsx
@@ -28,6 +28,7 @@ export function FieldHeader({
   onRequiredChange,
   compact,
   showFieldActions,
+  showAiAssist,
   value,
   onValueChange,
   variables,
@@ -43,6 +44,7 @@ export function FieldHeader({
   onRequiredChange?: (required: boolean) => void;
   compact?: boolean;
   showFieldActions: boolean;
+  showAiAssist: boolean;
   value: string;
   onValueChange?: (value: string) => void;
   variables: LockableValueFieldOption[];
@@ -161,52 +163,54 @@ export function FieldHeader({
             )}
             {showFieldActions && (
               <>
-                <Popover>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <PopoverTrigger asChild>
-                        <button
-                          type="button"
-                          aria-label="AI assist"
-                          className="grid size-7 place-items-center rounded-lg text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground"
+                {showAiAssist && (
+                  <Popover>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <PopoverTrigger asChild>
+                          <button
+                            type="button"
+                            aria-label="AI assist"
+                            className="grid size-7 place-items-center rounded-lg text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground"
+                          >
+                            <Sparkles size={12} />
+                          </button>
+                        </PopoverTrigger>
+                      </TooltipTrigger>
+                      <TooltipContent>Generate with AI</TooltipContent>
+                    </Tooltip>
+                    <PopoverContent align="end" className="space-y-3">
+                      <div className="space-y-1.5">
+                        <Label
+                          htmlFor={promptId}
+                          className="text-xs font-medium text-foreground-muted"
                         >
-                          <Sparkles size={12} />
-                        </button>
-                      </PopoverTrigger>
-                    </TooltipTrigger>
-                    <TooltipContent>Generate with AI</TooltipContent>
-                  </Tooltip>
-                  <PopoverContent align="end" className="space-y-3">
-                    <div className="space-y-1.5">
-                      <Label
-                        htmlFor={promptId}
-                        className="text-xs font-medium text-foreground-muted"
+                          Describe what you want
+                        </Label>
+                        <Textarea
+                          id={promptId}
+                          rows={3}
+                          value={aiPrompt}
+                          onChange={(e) => setAiPrompt(e.target.value)}
+                          placeholder="Display a value from the previous step"
+                          className="resize-none text-sm"
+                        />
+                      </div>
+                      <span className="block text-[11px] text-foreground-subtle">
+                        Output: {typeMeta.label}
+                        {typeMeta.supportsExpression ? ' expression' : ' value'}
+                      </span>
+                      <Button
+                        size="sm"
+                        className="w-full"
+                        disabled={!onGenerateWithAi}
+                        onClick={() => onGenerateWithAi?.(aiPrompt)}
                       >
-                        Describe what you want
-                      </Label>
-                      <Textarea
-                        id={promptId}
-                        rows={3}
-                        value={aiPrompt}
-                        onChange={(e) => setAiPrompt(e.target.value)}
-                        placeholder="Display a value from the previous step"
-                        className="resize-none text-sm"
-                      />
-                    </div>
-                    <span className="block text-[11px] text-foreground-subtle">
-                      Output: {typeMeta.label}
-                      {typeMeta.supportsExpression ? ' expression' : ' value'}
-                    </span>
-                    <Button
-                      size="sm"
-                      className="w-full"
-                      disabled={!onGenerateWithAi}
-                      onClick={() => onGenerateWithAi?.(aiPrompt)}
-                    >
-                      Generate
-                    </Button>
-                  </PopoverContent>
-                </Popover>
+                        Generate
+                      </Button>
+                    </PopoverContent>
+                  </Popover>
+                )}
                 <VariablePicker
                   disabled={variables.length === 0 || !onValueChange}
                   items={[
diff --git a/packages/apollo-wind/src/components/ui/lockable-value-field/index.ts b/packages/apollo-wind/src/components/ui/lockable-value-field/index.ts
index 7991efcb8..5946985a1 100644
--- a/packages/apollo-wind/src/components/ui/lockable-value-field/index.ts
+++ b/packages/apollo-wind/src/components/ui/lockable-value-field/index.ts
@@ -2,6 +2,7 @@ export { LockableValueField } from './lockable-value-field';
 export type {
   LockableFieldType,
   LockableValueFieldMode,
+  LockableValueFieldMoreActions,
   LockableValueFieldOption,
   LockableValueFieldProps,
 } from './types';
diff --git a/packages/apollo-wind/src/components/ui/lockable-value-field/lockable-value-field.stories.tsx b/packages/apollo-wind/src/components/ui/lockable-value-field/lockable-value-field.stories.tsx
index 14e95716b..fdc73a856 100644
--- a/packages/apollo-wind/src/components/ui/lockable-value-field/lockable-value-field.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/lockable-value-field/lockable-value-field.stories.tsx
@@ -115,6 +115,44 @@ export const Default: Story = {
   render: () => <DefaultDemo />,
 };
 
+function MoreActionsDemo() {
+  const fieldId = 'lockable-value-field-more-actions';
+  const [value, setValue] = useState('Invoice value');
+  const [mode, setMode] = useState<LockableValueFieldMode>('fixed');
+
+  return (
+    <div className="w-80">
+      <LockableValueField
+        id={fieldId}
+        label={<Label htmlFor={fieldId}>Value</Label>}
+        value={value}
+        onValueChange={setValue}
+        locked={false}
+        mode={mode}
+        onModeChange={setMode}
+        showAiAssist={false}
+        more={{
+          onClear: () => setValue(''),
+          onRefresh: () => setValue('Refreshed value'),
+        }}
+      />
+    </div>
+  );
+}
+
+export const MoreActions: Story = {
+  name: 'Value field with more actions',
+  render: () => <MoreActionsDemo />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Adds a field-level overflow menu beside the value type control for actions such as clearing the value or forcing a refresh.',
+      },
+    },
+  },
+};
+
 function ExpressionValueFieldDemo() {
   const fieldId = useId();
   const [value, setValue] = useState('');
diff --git a/packages/apollo-wind/src/components/ui/lockable-value-field/lockable-value-field.test.tsx b/packages/apollo-wind/src/components/ui/lockable-value-field/lockable-value-field.test.tsx
index 7c5f4388c..5da67367a 100644
--- a/packages/apollo-wind/src/components/ui/lockable-value-field/lockable-value-field.test.tsx
+++ b/packages/apollo-wind/src/components/ui/lockable-value-field/lockable-value-field.test.tsx
@@ -39,6 +39,22 @@ describe('LockableValueField', () => {
     expect(screen.getByPlaceholderText('String value')).toHaveAttribute('readonly');
   });
 
+  it('can hide the built-in lock control', () => {
+    render(<LockableValueField locked={false} showLock={false} />);
+    expect(screen.queryByRole('button', { name: /Editable|Read-only/ })).not.toBeInTheDocument();
+  });
+
+  it('keeps a custom leading addon when the built-in lock control is hidden', () => {
+    render(
+      <LockableValueField
+        locked={false}
+        showLock={false}
+        leadingAddon={<span data-testid="custom-leading-addon">=</span>}
+      />
+    );
+    expect(screen.getByTestId('custom-leading-addon')).toBeInTheDocument();
+  });
+
   it('forwards blur from the built-in value control', () => {
     const handleBlur = vi.fn();
     render(
@@ -167,6 +183,12 @@ describe('LockableValueField', () => {
     expect(screen.queryByRole('button', { name: 'Insert variable' })).not.toBeInTheDocument();
   });
 
+  it('can hide only the AI-assist action', () => {
+    render(<LockableValueField locked={false} showAiAssist={false} />);
+    expect(screen.queryByRole('button', { name: 'AI assist' })).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Insert variable' })).toBeInTheDocument();
+  });
+
   it('shows AI-assist and Insert-variable actions by default', () => {
     render(<LockableValueField locked={false} />);
     expect(screen.getByRole('button', { name: 'AI assist' })).toBeInTheDocument();
@@ -181,6 +203,38 @@ describe('LockableValueField', () => {
     expect(screen.getByRole('button', { name: 'Choose value type' })).toBeInTheDocument();
   });
 
+  it('renders the More actions menu beside the value type control', async () => {
+    const user = userEvent.setup();
+    render(
+      <LockableValueField
+        locked={false}
+        onValueChange={vi.fn()}
+        onModeChange={vi.fn()}
+        more={{ onClear: vi.fn(), onRefresh: vi.fn() }}
+      />
+    );
+
+    await user.click(screen.getByRole('button', { name: 'More value actions' }));
+
+    expect(screen.getByRole('menuitem', { name: 'Clear value' })).toBeInTheDocument();
+    expect(screen.getByRole('menuitem', { name: 'Force refresh' })).toBeInTheDocument();
+  });
+
+  it('only renders available More actions and hides Clear value when locked', async () => {
+    const user = userEvent.setup();
+    render(<LockableValueField locked more={{ onClear: vi.fn(), onRefresh: vi.fn() }} />);
+
+    await user.click(screen.getByRole('button', { name: 'More value actions' }));
+
+    expect(screen.queryByRole('menuitem', { name: 'Clear value' })).not.toBeInTheDocument();
+    expect(screen.getByRole('menuitem', { name: 'Force refresh' })).toBeInTheDocument();
+  });
+
+  it('does not render More actions when no handlers are provided', () => {
+    render(<LockableValueField locked={false} more={{}} />);
+    expect(screen.queryByRole('button', { name: 'More value actions' })).not.toBeInTheDocument();
+  });
+
   it('allows null addons to suppress the default controls', () => {
     const { container } = render(
       <LockableValueField
@@ -275,20 +329,19 @@ describe('LockableValueField', () => {
   it('renders a file upload control for file fields when unlocked', () => {
     const { container } = render(<LockableValueField locked={false} fieldType="file" />);
     expect(screen.getByText(/drag/i, { exact: false })).toBeInTheDocument();
-    expect(container.querySelector('[role="group"].bg-surface-overlay')).toHaveClass(
-      'h-auto',
-      'items-stretch'
-    );
+    expect(container.querySelector('[role="group"]')).toHaveClass('h-auto', 'items-stretch');
   });
 
   it('keeps locked file fields in the compact read-only layout', () => {
     const { container } = render(
       <LockableValueField locked fieldType="file" value="invoice.pdf" />
     );
-    expect(container.querySelector('[role="group"].bg-surface-overlay')).not.toHaveClass(
-      'h-auto',
-      'items-stretch'
-    );
+    expect(container.querySelector('[role="group"]')).not.toHaveClass('h-auto', 'items-stretch');
+  });
+
+  it('does not force the Future overlay background in classic themes', () => {
+    const { container } = render(<LockableValueField locked={false} value="INV-2024-0587" />);
+    expect(container.querySelector('[role="group"]')).not.toHaveClass('bg-surface-overlay');
   });
 
   it('allows expression values for file and object fields', () => {
diff --git a/packages/apollo-wind/src/components/ui/lockable-value-field/lockable-value-field.tsx b/packages/apollo-wind/src/components/ui/lockable-value-field/lockable-value-field.tsx
index 01f6f58b8..f7dbf7d5d 100644
--- a/packages/apollo-wind/src/components/ui/lockable-value-field/lockable-value-field.tsx
+++ b/packages/apollo-wind/src/components/ui/lockable-value-field/lockable-value-field.tsx
@@ -1,14 +1,13 @@
-import { Code2, Type } from 'lucide-react';
+import { Code2, MoreHorizontal, RefreshCw, Trash2, Type } from 'lucide-react';
 import { useId, useState } from 'react';
 import { Calendar } from '@/components/ui/calendar';
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { FileUpload } from '@/components/ui/file-upload';
-import { FormFieldError } from '@/components/ui/form-field';
-import { Input } from '@/components/ui/input';
 import {
   InputGroup,
   InputGroupAddon,
@@ -30,7 +29,7 @@ import { FieldHeader } from './components/field-header';
 import { LockToggleButton } from './components/lock-toggle-button';
 import { ModeMenuItem } from './components/mode-menu-item';
 import type { LockableValueFieldProps } from './types';
-import { FIELD_TYPE_META } from './types';
+import { FIELD_TYPE_META, type LockableValueFieldMoreActions } from './types';
 import {
   DEFAULT_SELECT_OPTIONS,
   formatDateValue,
@@ -40,6 +39,43 @@ import {
   toDateOnlyString,
 } from './utils';
 
+function MoreActionsMenu({
+  more,
+  locked,
+}: {
+  more: LockableValueFieldMoreActions;
+  locked: boolean;
+}) {
+  const onClear = locked ? undefined : more.onClear;
+  const onRefresh = more.onRefresh;
+
+  if (!onClear && !onRefresh) return null;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <InputGroupButton icon size="3xs" aria-label="More value actions">
+          <MoreHorizontal />
+        </InputGroupButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-40">
+        {onClear && (
+          <DropdownMenuItem className="text-error focus:text-error" onClick={onClear}>
+            <Trash2 />
+            Clear value
+          </DropdownMenuItem>
+        )}
+        {onRefresh && (
+          <DropdownMenuItem onClick={onRefresh}>
+            <RefreshCw />
+            Force refresh
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
 /**
  * LockableValueField — a field that can be locked to read-only, typed as one
  * of several data types, and (for scalar types) switched between a literal
@@ -58,8 +94,10 @@ export function LockableValueField({
   onValueBlur,
   locked = true,
   onLockedChange,
+  showLock = true,
   leadingAddon,
   trailingAddon,
+  more,
   mode = 'fixed',
   onModeChange,
   renderExpressionEditor,
@@ -75,6 +113,7 @@ export function LockableValueField({
   headerActions,
   compact,
   showFieldActions = true,
+  showAiAssist = true,
   options = DEFAULT_SELECT_OPTIONS,
   onGenerateWithAi,
   variables = [],
@@ -95,6 +134,7 @@ export function LockableValueField({
     effectiveMode === 'expression'
       ? `Write ${expressionArticle} ${fieldTypeLabel} expression`
       : `${typeMeta.label} value`;
+  const hasMoreActions = Boolean(more?.onRefresh || (!locked && more?.onClear));
 
   // Locked fields are read-only, not disabled — the raw control (switch, date
   // picker, select) has nothing left to do once editing is blocked, so it's
@@ -113,6 +153,7 @@ export function LockableValueField({
         onRequiredChange={onRequiredChange}
         compact={compact}
         showFieldActions={showFieldActions}
+        showAiAssist={showAiAssist}
         value={value}
         onValueChange={editableOnValueChange}
         variables={variables}
@@ -125,17 +166,14 @@ export function LockableValueField({
           error={error}
           errorId={validationId}
           className={cn(
-            'bg-surface-overlay',
             fieldType === 'file' && !locked && effectiveMode === 'fixed' && 'h-auto items-stretch'
           )}
         >
-          {leadingAddon !== null && (
+          {(showLock || leadingAddon !== undefined) && leadingAddon !== null && (
             <InputGroupAddon align="inline-start">
-              {leadingAddon !== undefined ? (
-                leadingAddon
-              ) : (
-                <LockToggleButton locked={locked} onLockedChange={onLockedChange} />
-              )}
+              {leadingAddon !== undefined
+                ? leadingAddon
+                : showLock && <LockToggleButton locked={locked} onLockedChange={onLockedChange} />}
             </InputGroupAddon>
           )}
 
@@ -246,63 +284,62 @@ export function LockableValueField({
           )}
 
           {trailingAddon !== null && (
-            <InputGroupAddon
-              align="inline-end"
-              className={trailingAddon != null ? 'cursor-default' : undefined}
-            >
+            <InputGroupAddon align="inline-end" className="cursor-default">
               {trailingAddon !== undefined ? (
                 trailingAddon
               ) : (
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <InputGroupButton
-                      icon
-                      size="3xs"
-                      disabled={!onModeChange}
-                      aria-label="Choose value type"
-                    >
-                      {effectiveMode === 'expression' ? <Code2 /> : <Type />}
-                    </InputGroupButton>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end" className="w-56">
-                    <ModeMenuItem
-                      icon={Type}
-                      label={typeMeta.fixedLabel}
-                      description={typeMeta.fixedDescription}
-                      active={effectiveMode === 'fixed'}
-                      onClick={() => onModeChange?.('fixed')}
-                    />
-                    <ModeMenuItem
-                      icon={Code2}
-                      label="Expression"
-                      description="Use a JS expression"
-                      active={effectiveMode === 'expression'}
-                      onClick={() => onModeChange?.('expression')}
-                    />
-                  </DropdownMenuContent>
-                </DropdownMenu>
+                <>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <InputGroupButton
+                        icon
+                        size="3xs"
+                        disabled={!onModeChange}
+                        aria-label="Choose value type"
+                      >
+                        {effectiveMode === 'expression' ? <Code2 /> : <Type />}
+                      </InputGroupButton>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" className="w-56">
+                      <ModeMenuItem
+                        icon={Type}
+                        label={typeMeta.fixedLabel}
+                        description={typeMeta.fixedDescription}
+                        active={effectiveMode === 'fixed'}
+                        onClick={() => onModeChange?.('fixed')}
+                      />
+                      <ModeMenuItem
+                        icon={Code2}
+                        label="Expression"
+                        description="Use a JS expression"
+                        active={effectiveMode === 'expression'}
+                        onClick={() => onModeChange?.('expression')}
+                      />
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                  {hasMoreActions && more && <MoreActionsMenu more={more} locked={locked} />}
+                </>
               )}
             </InputGroupAddon>
           )}
         </InputGroup>
       ) : (
-        <div className="flex items-center gap-2">
-          {leadingAddon !== undefined ? (
-            leadingAddon
-          ) : (
-            <LockToggleButton locked={locked} onLockedChange={onLockedChange} />
+        <InputGroup error={error} errorId={validationId}>
+          {(showLock || leadingAddon !== undefined) && leadingAddon !== null && (
+            <InputGroupAddon align="inline-start">
+              {leadingAddon !== undefined
+                ? leadingAddon
+                : showLock && <LockToggleButton locked={locked} onLockedChange={onLockedChange} />}
+            </InputGroupAddon>
           )}
 
           {locked ? (
-            <Input
+            <InputGroupInput
               id={fieldId}
-              aria-invalid={error ? true : undefined}
-              aria-describedby={error ? validationId : undefined}
-              aria-errormessage={error ? validationId : undefined}
               readOnly
               value={lockedDisplayValue}
               placeholder={fieldLabel}
-              className="flex-1"
+              className="min-w-0"
               onBlur={onValueBlur}
             />
           ) : fieldType === 'single-select' ? (
@@ -318,7 +355,7 @@ export function LockableValueField({
             >
               <SelectTrigger
                 id={fieldId}
-                className="flex-1"
+                className="min-w-0 flex-1 rounded-none border-0 bg-transparent px-0 shadow-none future:rounded-none future:border-0 future:bg-transparent future:px-0"
                 aria-invalid={error ? true : undefined}
                 aria-describedby={error ? validationId : undefined}
                 aria-errormessage={error ? validationId : undefined}
@@ -336,7 +373,7 @@ export function LockableValueField({
           ) : fieldType === 'multi-select' ? (
             <MultiSelect
               id={fieldId}
-              className="flex-1"
+              className="min-w-0 flex-1"
               options={options}
               selected={parseListValue(value)}
               onChange={(selected) => onValueChange?.(JSON.stringify(selected))}
@@ -348,13 +385,12 @@ export function LockableValueField({
               aria-errormessage={error ? validationId : undefined}
             />
           ) : null}
-        </div>
-      )}
-
-      {!typeMeta.supportsExpression && (
-        <FormFieldError id={validationId} data-slot="lockable-value-field-error" className="mt-1">
-          {error}
-        </FormFieldError>
+          {hasMoreActions && more && (
+            <InputGroupAddon align="inline-end" className="cursor-default">
+              <MoreActionsMenu more={more} locked={locked} />
+            </InputGroupAddon>
+          )}
+        </InputGroup>
       )}
 
       {belowValue}
diff --git a/packages/apollo-wind/src/components/ui/lockable-value-field/types.ts b/packages/apollo-wind/src/components/ui/lockable-value-field/types.ts
index 2df4e3a57..deb6b468f 100644
--- a/packages/apollo-wind/src/components/ui/lockable-value-field/types.ts
+++ b/packages/apollo-wind/src/components/ui/lockable-value-field/types.ts
@@ -106,6 +106,11 @@ export interface LockableValueFieldOption {
   value: string;
 }
 
+export interface LockableValueFieldMoreActions {
+  onClear?: () => void;
+  onRefresh?: () => void;
+}
+
 export interface LockableValueFieldProps {
   /** Current field value. Encoding depends on fieldType (e.g. multi-select is a JSON array string). */
   value?: string;
@@ -117,6 +122,8 @@ export interface LockableValueFieldProps {
   locked?: boolean;
   /** Called when the user toggles the lock. */
   onLockedChange?: (locked: boolean) => void;
+  /** Whether the built-in lock control renders. Defaults to true. */
+  showLock?: boolean;
   /**
    * Replaces the leading lock toggle with a semantic prefix such as `=`.
    * Pass `null` to suppress the built-in toggle; omitting the prop preserves it.
@@ -128,6 +135,8 @@ export interface LockableValueFieldProps {
    * menu; omitting the prop preserves it.
    */
   trailingAddon?: ReactNode;
+  /** Adds a field-level overflow menu beside the value control. */
+  more?: LockableValueFieldMoreActions;
   /** Fixed value vs. JS expression. Defaults to 'fixed'. Ignored for types that don't support expressions. */
   mode?: LockableValueFieldMode;
   /** Called when the user switches modes. */
@@ -175,6 +184,8 @@ export interface LockableValueFieldProps {
   controlsVisibility?: 'visible' | 'hover';
   /** Whether the AI-assist and Insert-variable actions render at all. Set to false for read-only reviewer contexts where field configuration isn't editable. Defaults to true. */
   showFieldActions?: boolean;
+  /** Whether the Generate with AI action renders. Defaults to true. */
+  showAiAssist?: boolean;
   /** Options for 'single-select' / 'multi-select' field types. Defaults to a small set of demo options. */
   options?: LockableValueFieldOption[];
   /** Called with the entered prompt when the user clicks Generate in the AI-assist popover. */
diff --git a/packages/apollo-wind/src/index.ts b/packages/apollo-wind/src/index.ts
index 2e3d22e65..146388517 100644
--- a/packages/apollo-wind/src/index.ts
+++ b/packages/apollo-wind/src/index.ts
@@ -68,6 +68,7 @@ export type {
   LockableValueFieldMode,
   LockableFieldType,
   LockableValueFieldOption,
+  LockableValueFieldMoreActions,
 } from './components/ui/lockable-value-field';
 
 export { Textarea } from './components/ui/textarea';