@@ -0,0 +1,7 @@
+---
+"@electric-ax/agents-server-ui": patch
+---
+
+Polish the agents UI with improved spawn-form model controls, tooltips,
+macOS sidebar vibrancy styling, select sizing fixes, and a response-footer
+fork action in the timeline.
@@ -29,12 +29,22 @@
   width: 100%;
 }
 
-.copyButton {
+.metaActions {
   margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.tooltipTrigger {
+  display: inline-flex;
+}
+
+.metaActionButton {
   color: var(--ds-text-4);
   opacity: 0.7;
 }
 
-.copyButton:hover {
+.metaActionButton:hover {
   opacity: 1;
 }
@@ -1,4 +1,4 @@
-import { Check, Copy } from 'lucide-react'
+import { Check, Copy, GitFork } from 'lucide-react'
 import {
   memo,
   useEffect,
@@ -28,6 +28,7 @@ import { ThinkingIndicator } from './ThinkingIndicator'
 import { ElapsedTime } from './ElapsedTime'
 import { formatElapsedDuration, toMillis } from '../lib/formatTime'
 import styles from './AgentResponse.module.css'
+import type { ForkFromHereAction } from './UserMessage'
 import type {
   EntityTimelineContentItem,
   EntityTimelineRunRow,
@@ -383,13 +384,15 @@ export const AgentResponseLive = memo(function AgentResponseLive({
   isStreaming,
   timestamp,
   renderWidth = 0,
+  forkFromHere,
   onSearchTextChange,
 }: {
   rowKey: string
   run: EntityTimelineRunRow
   isStreaming: boolean
   timestamp?: number | null
   renderWidth?: number
+  forkFromHere?: ForkFromHereAction
   onSearchTextChange?: (rowKey: string, text: string) => void
 }): React.ReactElement {
   const { data: items = [] } = useLiveQuery(
@@ -433,6 +436,7 @@ export const AgentResponseLive = memo(function AgentResponseLive({
     isStreaming && !done && !failureText && !lastTextHasContent
   const showTimestamp = timestamp != null && !isStreaming
   const hasLeadingMeta = showThinking || done || Boolean(failureText)
+  const showCopyAction = Boolean((done || failureText) && copyText)
   const [copied, setCopied] = useState(false)
   const copiedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
@@ -542,39 +546,88 @@ export const AgentResponseLive = memo(function AgentResponseLive({
             <TimeText ts={timestamp} className={styles.timeText} />
           </>
         )}
-        {(done || failureText) && copyText && (
-          <Tooltip content={copied ? `Copied!` : `Copy response`} side="top">
+        <ResponseMetaActions
+          showCopy={showCopyAction}
+          copied={copied}
+          onCopy={() => void copyResponseText()}
+          forkFromHere={done ? forkFromHere : undefined}
+        />
+      </Stack>
+    </Stack>
+  )
+})
+
+function ResponseMetaActions({
+  showCopy,
+  copied,
+  onCopy,
+  forkFromHere,
+}: {
+  showCopy: boolean
+  copied: boolean
+  onCopy: () => void
+  forkFromHere?: ForkFromHereAction
+}): React.ReactElement | null {
+  const showFork = forkFromHere !== undefined
+  if (!showCopy && !showFork) return null
+
+  const forkDisabled = forkFromHere?.disabled === true || !forkFromHere?.onFork
+  const forkLabel = forkDisabled ? `Fork permission required` : `Fork from here`
+
+  return (
+    <span className={styles.metaActions}>
+      {showFork && (
+        <Tooltip content={forkLabel} side="top">
+          <span className={styles.tooltipTrigger}>
             <IconButton
               size={1}
               variant="ghost"
               tone="neutral"
-              className={styles.copyButton}
-              onClick={() => void copyResponseText()}
-              aria-label="Copy response text"
+              className={styles.metaActionButton}
+              disabled={forkDisabled}
+              onClick={forkFromHere?.onFork}
+              aria-label="Fork from here"
+              title={forkLabel}
             >
-              {copied ? (
-                <Icon icon={Check} size={1} />
-              ) : (
-                <Icon icon={Copy} size={1} />
-              )}
+              <Icon icon={GitFork} size={1} />
             </IconButton>
-          </Tooltip>
-        )}
-      </Stack>
-    </Stack>
+          </span>
+        </Tooltip>
+      )}
+      {showCopy && (
+        <Tooltip content={copied ? `Copied!` : `Copy response`} side="top">
+          <IconButton
+            size={1}
+            variant="ghost"
+            tone="neutral"
+            className={styles.metaActionButton}
+            onClick={onCopy}
+            aria-label="Copy response text"
+          >
+            {copied ? (
+              <Icon icon={Check} size={1} />
+            ) : (
+              <Icon icon={Copy} size={1} />
+            )}
+          </IconButton>
+        </Tooltip>
+      )}
+    </span>
   )
-})
+}
 
 export const AgentResponse = memo(function AgentResponse({
   section,
   isStreaming,
   timestamp,
   renderWidth = 0,
+  forkFromHere,
 }: {
   section: AgentResponseSection
   isStreaming: boolean
   timestamp?: number | null
   renderWidth?: number
+  forkFromHere?: ForkFromHereAction
 }): React.ReactElement {
   const canCache = !isStreaming && section.done === true
   const [copied, setCopied] = useState(false)
@@ -616,6 +669,7 @@ export const AgentResponse = memo(function AgentResponse({
     isStreaming && !section.done && !section.error && !lastTextHasContent
   const showTimestamp = timestamp != null && !isStreaming
   const hasLeadingMeta = showThinking || section.done || Boolean(section.error)
+  const showCopyAction = Boolean(section.done && copyText)
 
   // Mirror of the `sawStreamingRef` / `finalDurationMs` capture from
   // `AgentResponseLive` — see the comment there for why we only
@@ -696,36 +750,12 @@ export const AgentResponse = memo(function AgentResponse({
             <TimeText ts={timestamp} className={styles.timeText} />
           </>
         )}
-        {section.done && copyText && (
-          <Tooltip content={copied ? `Copied!` : `Copy response`} side="top">
-            <IconButton
-              size={1}
-              variant="ghost"
-              tone="neutral"
-              className={styles.copyButton}
-              onClick={() => void copyResponseText()}
-              aria-label="Copy response text"
-            >
-              {copied ? (
-                <Icon icon={Check} size={1} />
-              ) : (
-                <Icon icon={Copy} size={1} />
-              )}
-            </IconButton>
-          </Tooltip>
-        )}
-        {section.done && copyText && (
-          <button
-            type="button"
-            className={styles.copyButton}
-            onClick={() => void copyResponseText()}
-            aria-label="Copy response text"
-            title={copied ? `Copied` : `Copy all response text`}
-          >
-            {copied ? <Check size={12} /> : <Copy size={12} />}
-            <span>{copied ? `Copied` : `Copy`}</span>
-          </button>
-        )}
+        <ResponseMetaActions
+          showCopy={showCopyAction}
+          copied={copied}
+          onCopy={() => void copyResponseText()}
+          forkFromHere={section.done ? forkFromHere : undefined}
+        />
       </Stack>
     </Stack>
   )
 
@@ -7,7 +7,7 @@ import {
   X,
 } from 'lucide-react'
 import { formatAttachmentSize } from '../lib/attachments'
-import { Icon, Menu, Text } from '../ui'
+import { Icon, Menu, Text, Tooltip } from '../ui'
 import styles from './AttachmentDrafts.module.css'
 
 type Focusable = {
@@ -294,17 +294,22 @@ export function AttachmentActionMenu({
       />
       <Menu.Root>
         <Menu.Trigger
-          render={
-            <button
-              type="button"
-              aria-label="Message actions"
-              title="Message actions"
-              className={styles.addMenuTrigger}
-              disabled={disabled}
-            >
-              <Icon icon={Plus} size={2} />
-            </button>
-          }
+          disabled={disabled}
+          render={(triggerProps) => (
+            <Tooltip content="Attach files" side="top" align="start">
+              <button
+                {...triggerProps}
+                type="button"
+                aria-label="Message actions"
+                className={[triggerProps.className, styles.addMenuTrigger]
+                  .filter(Boolean)
+                  .join(` `)}
+                disabled={disabled}
+              >
+                <Icon icon={Plus} size={2} />
+              </button>
+            </Tooltip>
+          )}
         />
         <Menu.Content side="top" align="start" sideOffset={8}>
           <Menu.Item disabled={disabled} onSelect={onAttach}>
 
@@ -933,8 +933,9 @@ const TimelineRow = memo(function TimelineRow({
   stopUserMessageKey: string | null
   stopPending: boolean
   onStopGeneration?: () => void
-  /** When set on a user-message row, enables the "Fork from here" hover
-   * button. Caller pre-resolved the pointer; we just invoke. */
+  /** When set on a completed run row, shows the always-visible
+   * "Fork from here" footer action. Caller pre-resolved the pointer;
+   * we just invoke. */
   onForkFromHere?: ForkFromHereAction
   onRunSearchTextChange: (rowKey: string, text: string) => void
 }): React.ReactElement {
@@ -960,7 +961,6 @@ const TimelineRow = memo(function TimelineRow({
         }
         stopPending={stopPending}
         onStop={onStopGeneration}
-        forkFromHere={onForkFromHere}
       />
     )
   }
@@ -1004,6 +1004,7 @@ const TimelineRow = memo(function TimelineRow({
       isStreaming={!entityStopped && isStreaming}
       timestamp={responseTimestamp}
       renderWidth={renderWidth}
+      forkFromHere={onForkFromHere}
       onSearchTextChange={onRunSearchTextChange}
     />
   )
@@ -1022,7 +1023,7 @@ export function EntityTimeline({
   scrollToBottomSignal = 0,
   stopPending = false,
   onStopGeneration,
-  forkFromHereByInboxKey,
+  forkFromHereByRunKey,
 }: {
   rows: Array<EntityTimelineQueryRow>
   loading: boolean
@@ -1037,12 +1038,12 @@ export function EntityTimeline({
   stopPending?: boolean
   onStopGeneration?: () => void
   /**
-   * Per-inbox-row click handlers for the "Fork from here" hover button.
+   * Per-run-row click handlers for the "Fork from here" footer button.
    * The map is keyed by the row's `$key`; rows not in the map (or when
    * the prop is omitted) get no fork affordance. The caller resolves
    * the fork pointer and runs the fork → navigate flow.
    */
-  forkFromHereByInboxKey?: Map<string, ForkFromHereAction>
+  forkFromHereByRunKey?: Map<string, ForkFromHereAction>
 }): React.ReactElement {
   const { entitiesCollection, runnersCollection, usersCollection } =
     useElectricAgents()
@@ -1745,7 +1746,7 @@ export function EntityTimeline({
                         stopUserMessageKey={stopUserMessageKey}
                         stopPending={stopPending}
                         onStopGeneration={onStopGeneration}
-                        onForkFromHere={forkFromHereByInboxKey?.get(rowKey)}
+                        onForkFromHere={forkFromHereByRunKey?.get(rowKey)}
                         onRunSearchTextChange={updateRunSearchText}
                       />
                     </TimelineRowErrorBoundary>
 
@@ -359,6 +359,10 @@
   line-height: var(--ds-text-xs-lh);
 }
 
+.tooltipTrigger {
+  display: inline-flex;
+}
+
 .composerSend {
   all: unset;
   display: inline-flex;