feat(desktop): drag sessions into chat as @session links + spawn loader

Drag a sidebar session into the composer to drop an @session:<profile>/<id> chip the agent resolves via session_search. New READ shape dumps a whole session by id (head+tail when large); a `profile` param reads another profile's DB read-only, and a cross-profile locate scan resolves bare ids when the model drops the owning profile from the link. Also: ASCII "waking up <profile>" overlay during lazy gateway swaps, global haptic rate-limit to kill the reconnect-storm "clickity" buzz, and reauth toasts surfaced once per disconnect instead of every backoff tick.
2026-06-04 19:41:51 -05:00
parent a40e20e136
commit 9dbd3c57d7
15 changed files with 604 additions and 45 deletions
@@ -1,26 +1,43 @@
+import { useRef } from 'react'
+
+import type { DragKind } from '@/app/chat/hooks/use-file-drop-zone'
 import { Codicon } from '@/components/ui/codicon'
 import { cn } from '@/lib/utils'

+const COPY: Record<'files' | 'session', { icon: string; label: string }> = {
+  files: { icon: 'cloud-upload', label: 'Drop files to attach' },
+  session: { icon: 'comment-discussion', label: 'Drop to link this chat' }
+}
+
 /**
- * Full-bleed affordance shown while files are dragged over the chat area. Always
- * `pointer-events-none` so the drop lands on the real element underneath and the
- * drop-zone handler claims it — the overlay is purely visual. Mirrors the
- * composer surface so the two read as one family.
+ * Full-bleed affordance shown while files or a session are dragged over the chat
+ * area. Always `pointer-events-none` so the drop lands on the real element
+ * underneath and the drop-zone handler claims it — the overlay is purely visual.
+ * Copy adapts to whatever is being dragged; the last kind is held through the
+ * fade-out so the label doesn't blank.
 */
-export function ChatDropOverlay({ active }: { active: boolean }) {
+export function ChatDropOverlay({ kind }: { kind: DragKind }) {
+  const lastKind = useRef<'files' | 'session'>('files')
+
+  if (kind) {
+    lastKind.current = kind
+  }
+
+  const { icon, label } = COPY[kind ?? lastKind.current]
+
  return (
    <div
      aria-hidden
      className={cn(
        'pointer-events-none absolute inset-0 z-40 flex items-center justify-center p-4 transition-opacity duration-150 ease-out',
-        active ? 'opacity-100' : 'opacity-0'
+        kind ? 'opacity-100' : 'opacity-0'
      )}
      data-slot="chat-drop-overlay"
    >
      <div className="absolute inset-2 rounded-2xl border-2 border-dashed border-[color-mix(in_srgb,var(--dt-composer-ring)_55%,transparent)] bg-[color-mix(in_srgb,var(--dt-card)_55%,transparent)] backdrop-blur-[2px] [-webkit-backdrop-filter:blur(2px)]" />
      <div className="relative flex items-center gap-2 rounded-full border border-[color-mix(in_srgb,var(--dt-composer-ring)_45%,transparent)] bg-[color-mix(in_srgb,var(--dt-card)_92%,transparent)] px-4 py-2 text-[0.8125rem] font-medium text-foreground shadow-composer">
-        <Codicon className="text-(--ui-accent)" name="cloud-upload" size="1rem" />
-        Drop files to attach
+        <Codicon className="text-(--ui-accent)" name={icon} size="1rem" />
+        {label}
      </div>
    </div>
  )
@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react'
+
+import { cn } from '@/lib/utils'
+
+// Braille spinner frames — reads as a tiny ASCII loader in monospace.
+const FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
+
+// Shown over the conversation while the live gateway swaps to another profile's
+// backend (lazily spawned). Keeps the last profile name through the fade-out so
+// the label doesn't blank. Purely visual — pointer-events-none.
+export function ChatSwapOverlay({ profile }: { profile: string | null }) {
+  const [frame, setFrame] = useState(0)
+  const [label, setLabel] = useState<null | string>(profile)
+
+  useEffect(() => {
+    if (profile) {
+      setLabel(profile)
+    }
+  }, [profile])
+
+  useEffect(() => {
+    if (!profile) {
+      return
+    }
+
+    const id = window.setInterval(() => setFrame(value => (value + 1) % FRAMES.length), 80)
+
+    return () => window.clearInterval(id)
+  }, [profile])
+
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        'pointer-events-none absolute inset-0 z-50 flex items-center justify-center transition-opacity duration-150 ease-out',
+        profile ? 'opacity-100' : 'opacity-0'
+      )}
+    >
+      <div className="flex items-center gap-2 rounded-full border border-[color-mix(in_srgb,var(--dt-composer-ring)_45%,transparent)] bg-[color-mix(in_srgb,var(--dt-card)_92%,transparent)] px-4 py-2 font-mono text-[0.8125rem] text-foreground shadow-composer">
+        <span className="w-3 text-(--ui-accent)">{FRAMES[frame]}</span>
+        Waking up {label}…
+      </div>
+    </div>
+  )
+}
@@ -10,6 +10,8 @@
 * steal focus from the composer effect.
 */

+import type { InlineRefInput } from './inline-refs'
+
 export type ComposerTarget = 'edit' | 'main'
 export type ComposerInsertMode = 'block' | 'inline'

@@ -23,8 +25,14 @@ interface InsertDetail {
  text: string
 }

+interface InsertRefsDetail {
+  refs: InlineRefInput[]
+  target: ComposerTarget
+}
+
 const FOCUS_EVENT = 'hermes:composer-focus'
 const INSERT_EVENT = 'hermes:composer-insert'
+const INSERT_REFS_EVENT = 'hermes:composer-insert-refs'

 let activeTarget: ComposerTarget = 'main'

@@ -82,6 +90,20 @@ export const onComposerFocusRequest = (handler: (target: ComposerTarget) => void
 export const onComposerInsertRequest = (handler: (detail: InsertDetail) => void) =>
  subscribe<InsertDetail>(INSERT_EVENT, handler)

+/** Insert typed ref chips (carrying a display label) into a composer — the
+ * structured cousin of {@link requestComposerInsert}, used for session links. */
+export const requestComposerInsertRefs = (
+  refs: InlineRefInput[],
+  { target = 'active' }: { target?: ComposerTarget | 'active' } = {}
+) => {
+  if (refs.length) {
+    dispatch<InsertRefsDetail>(INSERT_REFS_EVENT, { refs, target: resolve(target) })
+  }
+}
+
+export const onComposerInsertRefsRequest = (handler: (detail: InsertRefsDetail) => void) =>
+  subscribe<InsertRefsDetail>(INSERT_REFS_EVENT, handler)
+
 /**
 * Focus a composer input across React commit + browser focus restore.
 *
@@ -44,6 +44,7 @@ import {
  focusComposerInput,
  markActiveComposer,
  onComposerFocusRequest,
+  onComposerInsertRefsRequest,
  onComposerInsertRequest
 } from './focus'
 import { HelpHint } from './help-hint'
@@ -51,7 +52,12 @@ import { useAtCompletions } from './hooks/use-at-completions'
 import { useSlashCompletions } from './hooks/use-slash-completions'
 import { useVoiceConversation } from './hooks/use-voice-conversation'
 import { useVoiceRecorder } from './hooks/use-voice-recorder'
-import { dragHasAttachments, droppedFileInlineRef, insertInlineRefsIntoEditor } from './inline-refs'
+import {
+  dragHasAttachments,
+  droppedFileInlineRef,
+  type InlineRefInput,
+  insertInlineRefsIntoEditor
+} from './inline-refs'
 import { QueuePanel } from './queue-panel'
 import {
  composerPlainText,
@@ -431,7 +437,7 @@ export function ChatBar({
    requestMainFocus()
  }

-  const insertInlineRefs = (refs: string[]) => {
+  const insertInlineRefs = (refs: InlineRefInput[]) => {
    const editor = editorRef.current

    if (!editor) {
@@ -451,6 +457,19 @@ export function ChatBar({
    return true
  }

+  // Latest-closure ref so the (once-only) subscription always calls the current
+  // insertInlineRefs without re-subscribing every render.
+  const insertInlineRefsRef = useRef(insertInlineRefs)
+  insertInlineRefsRef.current = insertInlineRefs
+
+  useEffect(() => {
+    return onComposerInsertRefsRequest(({ refs, target }) => {
+      if (target === 'main') {
+        insertInlineRefsRef.current(refs)
+      }
+    })
+  }, [])
+
  const selectSkinSlashCommand = (command: string) => {
    draftRef.current = command
    aui.composer().setText(command)
@@ -5,6 +5,49 @@ import type { DroppedFile } from '../hooks/use-composer-actions'

 import { composerPlainText, escapeHtml, placeCaretEnd, refChipHtml } from './rich-editor'

+/** A chip to insert: a raw `@kind:value` string, or a typed value + display label. */
+export type InlineRefInput = string | { kind: string; label?: string; value: string }
+
+/** MIME for an in-app session drag (sidebar row → composer). */
+export const HERMES_SESSION_MIME = 'application/x-hermes-session'
+
+export interface SessionDragPayload {
+  id: string
+  profile: string
+  title: string
+}
+
+export function writeSessionDrag(transfer: DataTransfer, payload: SessionDragPayload) {
+  transfer.setData(HERMES_SESSION_MIME, JSON.stringify(payload))
+  transfer.effectAllowed = 'copy'
+}
+
+export function dragHasSession(transfer: DataTransfer | null) {
+  return Boolean(transfer) && Array.from(transfer!.types || []).includes(HERMES_SESSION_MIME)
+}
+
+export function readSessionDrag(transfer: DataTransfer | null): null | SessionDragPayload {
+  const raw = transfer?.getData(HERMES_SESSION_MIME)
+
+  if (!raw) {
+    return null
+  }
+
+  try {
+    const parsed = JSON.parse(raw) as Partial<SessionDragPayload>
+
+    return parsed.id ? { id: parsed.id, profile: parsed.profile || 'default', title: parsed.title || '' } : null
+  } catch {
+    return null
+  }
+}
+
+/** Build a `@session:<profile>/<id>` chip. Value carries the metadata the agent
+ * needs to resolve the link (session_search); label shows the friendly title. */
+export function sessionInlineRef({ id, profile, title }: SessionDragPayload): InlineRefInput {
+  return { kind: 'session', label: title || `chat ${id.slice(0, 8)}`, value: `${profile || 'default'}/${id}` }
+}
+
 export function dragHasAttachments(transfer: DataTransfer | null, pathsMime: string) {
  if (!transfer) {
    return false
@@ -40,13 +83,17 @@ export function droppedFileInlineRef(candidate: DroppedFile, cwd: string | null
  return `@${kind}:${formatRefValue(rel)}`
 }

-export function insertInlineRefsIntoEditor(editor: HTMLDivElement, refs: readonly string[]) {
+export function insertInlineRefsIntoEditor(editor: HTMLDivElement, refs: readonly InlineRefInput[]) {
  if (!refs.length) {
    return null
  }

  const refsHtml = refs
    .map(ref => {
+      if (typeof ref !== 'string') {
+        return refChipHtml(ref.kind, ref.value, ref.label)
+      }
+
      const match = ref.match(/^@([^:]+):(.+)$/)

      return match ? refChipHtml(match[1], match[2]) : escapeHtml(ref)
@@ -15,7 +15,7 @@ import {

 export const RICH_INPUT_SLOT = 'composer-rich-input'

-export const REF_RE = /@(file|folder|url|image|tool|line|terminal):(`[^`\n]+`|"[^"\n]+"|'[^'\n]+'|\S+)/g
+export const REF_RE = /@(file|folder|url|image|tool|line|terminal|session):(`[^`\n]+`|"[^"\n]+"|'[^'\n]+'|\S+)/g

 const ESC: Record<string, string> = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' }

@@ -52,14 +52,14 @@ export function quoteRefValue(value: string) {
  return formatRefValue(value)
 }

-export function refChipHtml(kind: string, rawValue: string) {
+export function refChipHtml(kind: string, rawValue: string, displayLabel?: string) {
  const id = unquoteRef(rawValue)
  const text = `@${kind}:${quoteRefValue(id)}`

-  return `<span contenteditable="false" data-ref-text="${escapeHtml(text)}" data-ref-id="${escapeHtml(id)}" data-ref-kind="${escapeHtml(kind)}" class="${DIRECTIVE_CHIP_CLASS}">${directiveIconSvg(kind)}<span class="truncate">${escapeHtml(refLabel(id))}</span></span>`
+  return `<span contenteditable="false" data-ref-text="${escapeHtml(text)}" data-ref-id="${escapeHtml(id)}" data-ref-kind="${escapeHtml(kind)}" class="${DIRECTIVE_CHIP_CLASS}">${directiveIconSvg(kind)}<span class="truncate">${escapeHtml(displayLabel || refLabel(id))}</span></span>`
 }

-export function refChipElement(kind: string, rawValue: string) {
+export function refChipElement(kind: string, rawValue: string, displayLabel?: string) {
  const id = unquoteRef(rawValue)
  const text = `@${kind}:${quoteRefValue(id)}`
  const chip = document.createElement('span')
@@ -71,7 +71,7 @@ export function refChipElement(kind: string, rawValue: string) {
  chip.dataset.refKind = kind
  chip.className = DIRECTIVE_CHIP_CLASS
  label.className = 'truncate'
-  label.textContent = refLabel(id)
+  label.textContent = displayLabel || refLabel(id)
  chip.append(directiveIconElement(kind), label)

  return chip
@@ -1,50 +1,71 @@
 import { type DragEvent as ReactDragEvent, useCallback, useRef, useState } from 'react'

-import { dragHasAttachments } from '@/app/chat/composer/inline-refs'
+import {
+  dragHasAttachments,
+  dragHasSession,
+  readSessionDrag,
+  type SessionDragPayload
+} from '@/app/chat/composer/inline-refs'

 import { type DroppedFile, extractDroppedFiles, HERMES_PATHS_MIME } from './use-composer-actions'

-const hasFiles = (event: ReactDragEvent) => dragHasAttachments(event.dataTransfer, HERMES_PATHS_MIME)
+export type DragKind = 'files' | 'session' | null
+
+const dragKindOf = (event: ReactDragEvent): DragKind => {
+  if (dragHasSession(event.dataTransfer)) {
+    return 'session'
+  }
+
+  if (dragHasAttachments(event.dataTransfer, HERMES_PATHS_MIME)) {
+    return 'files'
+  }
+
+  return null
+}

 interface FileDropZoneOptions {
  /** When false the zone ignores drags entirely. */
  enabled?: boolean
  onDropFiles: (files: DroppedFile[]) => void
+  onDropSession?: (session: SessionDragPayload) => void
 }

 /**
- * "Drop files anywhere in this region" affordance. An enter/leave depth counter
- * keeps nested children from flickering the active state; `onDropCapture` clears
- * it even when a nested target (the composer) handles the drop and stops
- * propagation before our bubble-phase `onDrop` would fire.
+ * "Drop anywhere in this region" affordance for files *and* in-app session
+ * links. An enter/leave depth counter keeps nested children from flickering the
+ * active state; `onDropCapture` clears it even when a nested target (the
+ * composer) handles the drop and stops propagation before our bubble-phase
+ * `onDrop` would fire.
 *
- * Spread `dropHandlers` onto the container; render an overlay off `dragActive`.
+ * Spread `dropHandlers` onto the container; render an overlay off `dragKind`.
 */
-export function useFileDropZone({ enabled = true, onDropFiles }: FileDropZoneOptions) {
-  const [dragActive, setDragActive] = useState(false)
+export function useFileDropZone({ enabled = true, onDropFiles, onDropSession }: FileDropZoneOptions) {
+  const [dragKind, setDragKind] = useState<DragKind>(null)
  const depth = useRef(0)

  const reset = useCallback(() => {
    depth.current = 0
-    setDragActive(false)
+    setDragKind(null)
  }, [])

  const onDragEnter = useCallback(
    (event: ReactDragEvent) => {
-      if (!enabled || !hasFiles(event)) {
+      const kind = enabled ? dragKindOf(event) : null
+
+      if (!kind) {
        return
      }

      event.preventDefault()
      depth.current += 1
-      setDragActive(true)
+      setDragKind(kind)
    },
    [enabled]
  )

  const onDragOver = useCallback(
    (event: ReactDragEvent) => {
-      if (!enabled || !hasFiles(event)) {
+      if (!enabled || !dragKindOf(event)) {
        return
      }

@@ -62,21 +83,36 @@ export function useFileDropZone({ enabled = true, onDropFiles }: FileDropZoneOpt

  const onDrop = useCallback(
    (event: ReactDragEvent) => {
-      if (!enabled || !hasFiles(event)) {
+      const kind = enabled ? dragKindOf(event) : null
+
+      if (!kind) {
        return
      }

      event.preventDefault()
      reset()

+      if (kind === 'session') {
+        const session = readSessionDrag(event.dataTransfer)
+
+        if (session) {
+          onDropSession?.(session)
+        }
+
+        return
+      }
+
      const files = extractDroppedFiles(event.dataTransfer)

      if (files.length) {
        onDropFiles(files)
      }
    },
-    [enabled, onDropFiles, reset]
+    [enabled, onDropFiles, onDropSession, reset]
  )

-  return { dragActive, dropHandlers: { onDragEnter, onDragLeave, onDragOver, onDrop, onDropCapture: reset } }
+  return {
+    dragKind,
+    dropHandlers: { onDragEnter, onDragLeave, onDragOver, onDrop, onDropCapture: reset }
+  }
 }
@@ -22,6 +22,7 @@ import { useIncrementalExternalStoreRuntime } from '@/lib/incremental-external-s
 import { cn } from '@/lib/utils'
 import type { ComposerAttachment } from '@/store/composer'
 import { $pinnedSessionIds } from '@/store/layout'
+import { $gatewaySwapTarget } from '@/store/profile'
 import {
  $activeSessionId,
  $awaitingResponse,
@@ -45,9 +46,10 @@ import { routeSessionId } from '../routes'
 import { titlebarHeaderBaseClass, titlebarHeaderShadowClass } from '../shell/titlebar'

 import { ChatDropOverlay } from './chat-drop-overlay'
+import { ChatSwapOverlay } from './chat-swap-overlay'
 import { ChatBar, ChatBarFallback } from './composer'
-import { requestComposerInsert } from './composer/focus'
-import { droppedFileInlineRef } from './composer/inline-refs'
+import { requestComposerInsert, requestComposerInsertRefs } from './composer/focus'
+import { droppedFileInlineRef, type SessionDragPayload, sessionInlineRef } from './composer/inline-refs'
 import type { ChatBarState } from './composer/types'
 import type { DroppedFile } from './hooks/use-composer-actions'
 import { useFileDropZone } from './hooks/use-file-drop-zone'
@@ -178,6 +180,7 @@ export function ChatView({
  const currentProvider = useStore($currentProvider)
  const freshDraftReady = useStore($freshDraftReady)
  const gatewayState = useStore($gatewayState)
+  const gatewaySwapTarget = useStore($gatewaySwapTarget)
  const gatewayOpen = gatewayState === 'open'
  const introPersonality = useStore($introPersonality)
  const introSeed = useStore($introSeed)
@@ -306,7 +309,13 @@ export function ChatView({
    [currentCwd]
  )

-  const { dragActive, dropHandlers } = useFileDropZone({ enabled: showChatBar, onDropFiles })
+  // Dropping a sidebar session inserts an @session link the agent can resolve
+  // via session_search (carries the source profile, so cross-profile works).
+  const onDropSession = useCallback((session: SessionDragPayload) => {
+    requestComposerInsertRefs([sessionInlineRef(session)], { target: 'main' })
+  }, [])
+
+  const { dragKind, dropHandlers } = useFileDropZone({ enabled: showChatBar, onDropFiles, onDropSession })

  return (
    <div
@@ -370,7 +379,8 @@ export function ChatView({
            </Suspense>
          )}
        </AssistantRuntimeProvider>
-        <ChatDropOverlay active={dragActive} />
+        <ChatDropOverlay kind={dragKind} />
+        <ChatSwapOverlay profile={gatewaySwapTarget} />
      </div>
    </div>
  )
@@ -1,6 +1,7 @@
 import { useStore } from '@nanostores/react'
 import type * as React from 'react'

+import { writeSessionDrag } from '@/app/chat/composer/inline-refs'
 import { Button } from '@/components/ui/button'
 import { Codicon } from '@/components/ui/codicon'
 import type { SessionInfo } from '@/hermes'
@@ -87,6 +88,22 @@ export function SidebarSessionRow({
          className
        )}
        data-working={isWorking ? 'true' : undefined}
+        draggable
+        onDragStart={event => {
+          // Reorder drags belong to dnd-kit (the grab handle) — cancel the
+          // native drag so the two DnD systems don't fight.
+          if ((event.target as HTMLElement).closest('[data-reorder-handle]')) {
+            event.preventDefault()
+
+            return
+          }
+
+          writeSessionDrag(event.dataTransfer, {
+            id: session.id,
+            profile: session.profile || 'default',
+            title
+          })
+        }}
        ref={ref}
        style={style}
        {...rest}
@@ -132,6 +149,7 @@ export function SidebarSessionRow({
                // out instead of being clipped by this handle's overflow-hidden.
                needsInput && 'overflow-visible'
              )}
+              data-reorder-handle
              onClick={event => event.stopPropagation()}
            >
              <SidebarRowDot
@@ -77,6 +77,10 @@ export function useGatewayBoot({
    let reconnecting = false
    let reconnectTimer: ReturnType<typeof setTimeout> | null = null
    let reconnectAttempt = 0
+    // Surface "sign in again" once per disconnect episode, not on every backoff
+    // tick — a stale OAuth ticket fails every attempt and would otherwise stack
+    // identical error toasts (and their haptics). Reset on the next clean open.
+    let reauthNotified = false

    // Wrap the live getter in a call so TS control-flow analysis doesn't narrow
    // `connectionState` to a constant across the early-return guards (the state
@@ -128,7 +132,8 @@ export function useGatewayBoot({
        // again" message once instead of silently looping the backoff against a
        // ticket that can never succeed. Transport failures fall through to the
        // backoff in the finally block below.
-        if (!cancelled && isGatewayReauthRequired(err)) {
+        if (!cancelled && isGatewayReauthRequired(err) && !reauthNotified) {
+          reauthNotified = true
          notifyError(err, 'Gateway sign-in required')
        }
      } finally {
@@ -188,6 +193,7 @@ export function useGatewayBoot({

      if (st === 'open') {
        reconnectAttempt = 0
+        reauthNotified = false
        clearReconnectTimer()
      } else if (bootCompleted && (st === 'closed' || st === 'error')) {
        // The socket dropped after a healthy boot (typically sleep/wake). Try
@@ -8,7 +8,7 @@ import { Fragment, useEffect, useMemo, useState } from 'react'
 import { ZoomableImage } from '@/components/chat/zoomable-image'
 import { extractEmbeddedImages } from '@/lib/embedded-images'

-const HERMES_REF_TYPES = ['file', 'folder', 'url', 'image', 'tool', 'line', 'terminal'] as const
+const HERMES_REF_TYPES = ['file', 'folder', 'url', 'image', 'tool', 'line', 'terminal', 'session'] as const
 type HermesRefType = (typeof HERMES_REF_TYPES)[number]

 /** Single source of truth for chip icon glyphs (Tabler outline @ 24×24).
@@ -38,7 +38,12 @@ const ICON_PATHS: Record<HermesRefType, string[]> = {
  ],
  tool: ['M7 10h3v-3l-3.5 -3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1 -3 3l-6 -6a6 6 0 0 1 -8 -8l3.5 3.5'],
  line: ['M5 9l14 0', 'M5 15l14 0', 'M11 4l-4 16', 'M17 4l-4 16'],
-  terminal: ['M5 7l5 5l-5 5', 'M12 19l7 0']
+  terminal: ['M5 7l5 5l-5 5', 'M12 19l7 0'],
+  session: [
+    'M8 9h8',
+    'M8 13h6',
+    'M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3z'
+  ]
 }

 const ICON_FALLBACK = ['M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0', 'M16 12v1.5a2.5 2.5 0 0 0 5 0v-1.5a9 9 0 1 0 -5.5 8.28']
@@ -98,7 +103,7 @@ const DirectiveIcon: FC<{ type: string }> = ({ type }) => (
 * raw HTML composer chips in `rich-editor.ts`. Neutral subtle wash + plain
 * muted-foreground text so chips read as quiet tags on any bubble color. */
 export const DIRECTIVE_CHIP_CLASS =
-  'mx-0.5 inline-flex max-w-56 items-center gap-1 rounded px-1.5 py-0.5 align-[0.02em] text-[0.86em] font-normal leading-none bg-[color-mix(in_srgb,currentColor_8%,transparent)] text-muted-foreground'
+  'mx-0.5 inline-flex max-w-56 items-center gap-1 rounded px-1.5 py-0.5 align-middle text-[0.86em] font-normal leading-none bg-[color-mix(in_srgb,currentColor_8%,transparent)] text-muted-foreground'

 /**
 * Parses our composer's `@type:value` references into directive segments
@@ -113,7 +118,7 @@ export const DIRECTIVE_CHIP_CLASS =
 const CANONICAL_DIRECTIVE_RE = /:([\w-]{1,64})\[([^\]\n]{1,1024})\](?:\{name=([^}\n]{1,1024})\})?/g

 const HERMES_DIRECTIVE_RE = new RegExp(
-  '@(file|folder|url|image|tool|line|terminal):(' + '`[^`\\n]+`' + '|"[^"\\n]+"' + "|'[^'\\n]+'" + '|\\S+' + ')',
+  '@(file|folder|url|image|tool|line|terminal|session):(' + '`[^`\\n]+`' + '|"[^"\\n]+"' + "|'[^'\\n]+'" + '|\\S+' + ')',
  'g'
 )

@@ -263,6 +268,14 @@ function shortLabel(type: HermesRefType, id: string): string {
    }
  }

+  // `@session:<profile>/<id>` — show a short id; the composer chip carries the
+  // friendly title, but once sent the wire form only has the id.
+  if (type === 'session') {
+    const sid = id.split('/').filter(Boolean).pop() || id
+
+    return sid.length > 10 ? `${sid.slice(0, 8)}…` : sid
+  }
+
  const tail = id.split(/[\\/]/).filter(Boolean).pop()

  return tail || id
@@ -87,6 +87,15 @@ export type HapticTrigger = (input?: HapticInput, options?: TriggerOptions) => P
 let registeredTrigger: HapticTrigger | null = null
 let lastSelectionAt = 0

+// Global rolling rate-limit. A runaway upstream loop (auth-expiry error-toast
+// storms, reconnect flaps) can request dozens of haptics a second, which the
+// trackpad actuator renders as a frantic "clickity" buzz. Cap firings to
+// RATE_LIMIT per RATE_WINDOW so no source can machine-gun the actuator;
+// intentional UI haptics are human-paced and never approach the ceiling.
+const RATE_WINDOW = 1000
+const RATE_LIMIT = 5
+let recentFires: number[] = []
+
 export function registerHapticTrigger(trigger: HapticTrigger | null) {
  registeredTrigger = trigger
 }
@@ -106,6 +115,14 @@ export function triggerHaptic(intent: HapticIntent = 'selection') {
    lastSelectionAt = now
  }

+  recentFires = recentFires.filter(t => now - t < RATE_WINDOW)
+
+  if (recentFires.length >= RATE_LIMIT) {
+    return
+  }
+
+  recentFires.push(now)
+
  const config = HAPTIC_INTENTS[intent]

  void registeredTrigger(config.pattern, config.options)?.catch(() => undefined)
@@ -141,6 +141,11 @@ $activeGatewayProfile.subscribe(value => {
  _lastRoutedProfile = key
 })

+// Target profile while a gateway swap is mid-flight (spawning/reconnecting that
+// profile's backend), else null. Drives the chat's "waking up <profile>" loader
+// so a lazy spawn doesn't read as a hang. Single-profile users never swap.
+export const $gatewaySwapTarget = atom<string | null>(null)
+
 let gatewaySwitch: Promise<void> | null = null

 // Reconnect the single live gateway to `profile`'s backend if it isn't already
@@ -176,6 +181,7 @@ export async function ensureGatewayProfile(profile: string | null | undefined):
    }
  }

+  $gatewaySwapTarget.set(target)
  gatewaySwitch = (async () => {
    const desktop = window.hermesDesktop
    const gateway = $gateway.get()
@@ -205,6 +211,7 @@ export async function ensureGatewayProfile(profile: string | null | undefined):
    await gatewaySwitch
  } finally {
    gatewaySwitch = null
+    $gatewaySwapTarget.set(null)
  }
 }