chore: uptick

2026-05-02 03:19:39 -05:00
parent 420f68e4e2
commit db884f4646
240 changed files with 25206 additions and 3155 deletions
@@ -10,7 +10,7 @@ export function AttachmentList({
  onRemove?: (id: string) => void
 }) {
  return (
-    <div className="flex flex-wrap gap-1.5 px-1 pt-1">
+    <div className="flex flex-wrap gap-1 px-1 pt-1">
      {attachments.map(a => (
        <AttachmentPill attachment={a} key={a.id} onRemove={onRemove} />
      ))}
@@ -22,28 +22,30 @@ function AttachmentPill({ attachment, onRemove }: { attachment: ComposerAttachme
  const Icon = { folder: FolderOpen, url: Link, image: ImageIcon, file: FileText }[attachment.kind]

  return (
-    <div className="group/attachment flex max-w-full items-center gap-2 rounded-2xl border border-border/70 bg-muted/35 py-1 pl-1 pr-1.5 text-xs text-foreground/90">
-      {attachment.previewUrl ? (
-        <img alt="" className="size-9 rounded-xl object-cover" draggable={false} src={attachment.previewUrl} />
+    <div
+      className="group/attachment relative shrink-0"
+      title={attachment.label}
+    >
+      {attachment.previewUrl && attachment.kind === 'image' ? (
+        <img
+          alt={attachment.label}
+          className="size-7 rounded-md border border-border/70 object-cover"
+          draggable={false}
+          src={attachment.previewUrl}
+        />
      ) : (
-        <span className="grid size-9 shrink-0 place-items-center rounded-xl bg-background/70 text-muted-foreground">
-          <Icon className="size-4" />
+        <span className="grid size-7 place-items-center rounded-md border border-border/70 bg-muted/30 text-muted-foreground">
+          <Icon className="size-3.5" />
        </span>
      )}
-      <span className="grid min-w-0 gap-0.5">
-        <span className="truncate font-medium">{attachment.label}</span>
-        {attachment.detail && (
-          <span className="truncate text-[0.6875rem] text-muted-foreground">{attachment.detail}</span>
-        )}
-      </span>
      {onRemove && (
        <button
          aria-label={`Remove ${attachment.label}`}
-          className="grid size-5 shrink-0 place-items-center rounded-full text-muted-foreground opacity-70 transition hover:bg-accent hover:text-foreground group-hover/attachment:opacity-100"
+          className="absolute -right-1 -top-1 grid size-3.5 place-items-center rounded-full border border-border/70 bg-background text-muted-foreground opacity-0 shadow-xs transition hover:bg-accent hover:text-foreground group-hover/attachment:opacity-100 focus-visible:opacity-100"
          onClick={() => onRemove(attachment.id)}
          type="button"
        >
-          <X className="size-3.5" />
+          <X className="size-2.5" />
        </button>
      )}
    </div>
@@ -7,7 +7,7 @@ import { cn } from '@/lib/utils'
 import type { ConversationStatus } from './hooks/use-voice-conversation'
 import type { ChatBarState, VoiceStatus } from './types'

-export const ICON_BTN = 'h-8 w-8 shrink-0 rounded-full'
+export const ICON_BTN = 'size-(--composer-control-size) shrink-0 rounded-full'
 export const GHOST_ICON_BTN = cn(ICON_BTN, 'text-muted-foreground hover:bg-accent hover:text-foreground')

 interface ConversationProps {
@@ -47,7 +47,7 @@ export function ComposerControls({
  const showVoicePrimary = !busy && !hasComposerPayload

  return (
-    <div className="ml-auto flex shrink-0 items-center gap-1.5">
+    <div className="ml-auto flex shrink-0 items-center gap-(--composer-control-gap)">
      <DictationButton disabled={disabled} onToggle={onDictate} state={state.voice} status={voiceStatus} />
      {showVoicePrimary ? (
        <Button
@@ -102,7 +102,7 @@ function ConversationPill({
            : 'Listening'

  return (
-    <div className="ml-auto flex shrink-0 items-center gap-1">
+    <div className="ml-auto flex shrink-0 items-center gap-(--composer-control-gap)">
      <Button
        aria-label={muted ? 'Unmute microphone' : 'Mute microphone'}
        aria-pressed={muted}
@@ -122,7 +122,7 @@ function ConversationPill({
      {listening && (
        <Button
          aria-label="Stop listening and send"
-          className="h-8 shrink-0 gap-1.5 rounded-full px-2.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
+          className="h-(--composer-control-size) shrink-0 gap-1.5 rounded-full px-2.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
          disabled={disabled}
          onClick={() => {
            triggerHaptic('submit')
@@ -138,7 +138,7 @@ function ConversationPill({
      )}
      <Button
        aria-label="End voice conversation"
-        className="h-8 gap-1.5 rounded-full bg-primary px-3 text-xs font-medium text-primary-foreground hover:bg-primary/90"
+        className="h-(--composer-control-size) gap-1.5 rounded-full bg-primary px-3 text-xs font-medium text-primary-foreground hover:bg-primary/90"
        disabled={disabled}
        onClick={() => {
          triggerHaptic('close')
@@ -2,22 +2,22 @@ import type { Unstable_TriggerAdapter, Unstable_TriggerItem } from '@assistant-u
 import { useCallback } from 'react'

 import type { HermesGateway } from '@/hermes'
+import {
+  desktopSlashDescription,
+  filterDesktopCommandsCatalog,
+  isDesktopSlashSuggestion,
+  type CommandsCatalogLike
+} from '@/lib/desktop-slash-commands'

 import type { CompletionEntry, CompletionPayload } from './use-live-completion-adapter'
 import { useLiveCompletionAdapter } from './use-live-completion-adapter'

-const PICKER_OWNED = new Set(['/model', '/provider', 'model', 'provider'])
-
 interface SlashItemMetadata extends Record<string, string> {
  command: string
  display: string
  meta: string
 }

-interface CommandsCatalogResponse {
-  pairs?: [string, string][]
-}
-
 function textValue(value: unknown, fallback = ''): string {
  if (typeof value === 'string') {
    return value
@@ -53,14 +53,9 @@ export function useSlashCompletions(options: { gateway: HermesGateway | null }):

      const text = `/${query}`

-      // Model/provider have a dedicated picker; suppress slash completions for them once typed.
-      if (text.startsWith('/model') || text.startsWith('/provider')) {
-        return { items: [], query }
-      }
-
      try {
        if (!query) {
-          const catalog = await gateway.request<CommandsCatalogResponse>('commands.catalog')
+          const catalog = filterDesktopCommandsCatalog(await gateway.request<CommandsCatalogLike>('commands.catalog'))

          const items = (catalog.pairs ?? [])
            .map(([command, meta]) => ({
@@ -68,13 +63,17 @@ export function useSlashCompletions(options: { gateway: HermesGateway | null }):
              display: command,
              meta
            }))
-            .filter(item => !PICKER_OWNED.has(item.text))

          return { items, query }
        }

        const result = await gateway.request<{ items?: CompletionEntry[] }>('complete.slash', { text })
-        const items = (result.items ?? []).filter(item => !PICKER_OWNED.has(item.text))
+        const items = (result.items ?? [])
+          .filter(item => isDesktopSlashSuggestion(item.text))
+          .map(item => ({
+            ...item,
+            meta: desktopSlashDescription(item.text, textValue(item.meta))
+          }))

        return { items, query }
      } catch {
@@ -3,17 +3,27 @@ import './liquid-glass-overrides.css'
 import { ComposerPrimitive, useAui, useAuiState } from '@assistant-ui/react'
 import { useStore } from '@nanostores/react'
 import LiquidGlass from 'liquid-glass-react'
-import { type ClipboardEvent, type CSSProperties, useEffect, useRef, useState } from 'react'
+import {
+  type ClipboardEvent,
+  type CSSProperties,
+  type DragEvent as ReactDragEvent,
+  useEffect,
+  useRef,
+  useState
+} from 'react'

 import { hermesDirectiveFormatter } from '@/components/assistant-ui/directive-text'
 import { useMediaQuery } from '@/hooks/use-media-query'
 import { chatMessageText } from '@/lib/chat-messages'
+import { DATA_IMAGE_URL_RE, dataUrlToBlob } from '@/lib/embedded-images'
 import { triggerHaptic } from '@/lib/haptics'
 import { cn } from '@/lib/utils'
-import { $composerAttachments } from '@/store/composer'
+import { $composerAttachments, $composerDraft } from '@/store/composer'
 import { $messages } from '@/store/session'
 import { $threadScrolledUp } from '@/store/thread-scroll'

+import { extractDroppedFiles } from '../hooks/use-composer-actions'
+
 import { AttachmentList } from './attachments'
 import { ContextMenu } from './context-menu'
 import { ComposerControls } from './controls'
@@ -24,13 +34,73 @@ import { useComposerGlassTweaks } from './hooks/use-composer-glass-tweaks'
 import { useSlashCompletions } from './hooks/use-slash-completions'
 import { useVoiceConversation } from './hooks/use-voice-conversation'
 import { useVoiceRecorder } from './hooks/use-voice-recorder'
+import { SkinSlashPopover } from './skin-slash-popover'
 import { SlashPopover } from './slash-popover'
 import type { ChatBarProps } from './types'
 import { UrlDialog } from './url-dialog'
 import { VoiceActivity, VoicePlaybackActivity } from './voice-activity'

 const COMPOSER_SHELL_CLASS =
-  'group/composer absolute bottom-0 left-1/2 z-30 w-[min(calc(100%-1rem),clamp(26rem,61.8%,56rem))] max-w-full -translate-x-1/2 pt-2 pb-[var(--composer-shell-pad-block-end)]'
+  'group/composer absolute bottom-0 left-1/2 z-30 max-w-full -translate-x-1/2 pt-2 pb-[var(--composer-shell-pad-block-end)]'
+
+function extractClipboardImageBlobs(clipboard: DataTransfer): Blob[] {
+  const blobs: Blob[] = []
+  const seen = new Set<Blob>()
+
+  const push = (blob: Blob | null) => {
+    if (!blob || blob.size === 0 || seen.has(blob)) {
+      return
+    }
+
+    seen.add(blob)
+    blobs.push(blob)
+  }
+
+  if (clipboard.items?.length) {
+    for (const item of clipboard.items) {
+      if (item.kind === 'file' && item.type.startsWith('image/')) {
+        push(item.getAsFile())
+      }
+    }
+  }
+
+  if (clipboard.files?.length) {
+    for (let i = 0; i < clipboard.files.length; i += 1) {
+      const file = clipboard.files.item(i)
+
+      if (file && file.type.startsWith('image/')) {
+        push(file)
+      }
+    }
+  }
+
+  if (blobs.length > 0) {
+    return blobs
+  }
+
+  const text = clipboard.getData('text/plain').trim()
+
+  if (DATA_IMAGE_URL_RE.test(text)) {
+    push(dataUrlToBlob(text))
+  }
+
+  if (blobs.length === 0) {
+    const html = clipboard.getData('text/html')
+
+    if (html) {
+      const matches = html.matchAll(/<img\b[^>]*?\bsrc\s*=\s*["'](data:image\/[^"']+)["']/gi)
+
+      for (const match of matches) {
+        push(dataUrlToBlob(match[1]))
+      }
+    }
+  }
+
+  return blobs
+}
+
+// Below this composer width the input gets cramped — drop controls onto a second row.
+const COMPOSER_STACK_BREAKPOINT_PX = 380

 const COMPOSER_SCROLLED_DIM_CLASS =
  'opacity-30 group-hover/composer:opacity-100 group-focus-within/composer:opacity-100'
@@ -58,6 +128,8 @@ export function ChatBar({
  state,
  onCancel,
  onAddUrl,
+  onAttachDroppedItems,
+  onAttachImageBlob,
  onPasteClipboardImage,
  onPickFiles,
  onPickFolders,
@@ -82,9 +154,11 @@ export function ChatBar({
  const [expanded, setExpanded] = useState(false)
  const [voiceConversationActive, setVoiceConversationActive] = useState(false)
  const [tight, setTight] = useState(false)
+  const [dragActive, setDragActive] = useState(false)
+  const dragDepthRef = useRef(0)
  const lastSpokenIdRef = useRef<string | null>(null)

-  const narrow = useMediaQuery('(max-width: 680px)')
+  const narrow = useMediaQuery('(max-width: 480px)')

  const [askPlaceholder] = useState(() => {
    const lines = [
@@ -108,9 +182,17 @@ export function ChatBar({
  const canSubmit = busy || hasComposerPayload
  const showHelpHint = draft === '?'

+  const placeholder = disabled
+    ? stacked
+      ? 'Starting...'
+      : 'Starting Hermes...'
+    : stacked
+      ? 'Ask anything'
+      : askPlaceholder
+
  const glassTweaks = useComposerGlassTweaks()

-  const focusInput = () => window.requestAnimationFrame(() => textareaRef.current?.focus())
+  const focusInput = () => window.requestAnimationFrame(() => textareaRef.current?.focus({ preventScroll: true }))

  useEffect(() => {
    if (!disabled) {
@@ -120,11 +202,22 @@ export function ChatBar({

  useEffect(() => {
    draftRef.current = draft
+    $composerDraft.set(draft)
  }, [draft])

+  useEffect(
+    () =>
+      $composerDraft.subscribe(value => {
+        if (value !== draftRef.current) {
+          aui.composer().setText(value)
+        }
+      }),
+    [aui]
+  )
+
  useEffect(() => {
    if (urlOpen) {
-      window.requestAnimationFrame(() => urlInputRef.current?.focus())
+      window.requestAnimationFrame(() => urlInputRef.current?.focus({ preventScroll: true }))
    }
  }, [urlOpen])

@@ -153,7 +246,7 @@ export function ChatBar({
      return
    }

-    const update = () => setTight(el.getBoundingClientRect().width < 500)
+    const update = () => setTight(el.getBoundingClientRect().width < COMPOSER_STACK_BREAKPOINT_PX)

    update()
    const ro = new ResizeObserver(update)
@@ -172,13 +265,45 @@ export function ChatBar({
    focusInput()
  }

+  const selectSkinSlashCommand = (command: string) => {
+    draftRef.current = command
+    aui.composer().setText(command)
+    focusInput()
+  }
+
  const handlePaste = (event: ClipboardEvent<HTMLTextAreaElement>) => {
+    const imageBlobs = extractClipboardImageBlobs(event.clipboardData)
+
+    if (imageBlobs.length > 0) {
+      event.preventDefault()
+
+      if (onAttachImageBlob) {
+        triggerHaptic('selection')
+
+        for (const blob of imageBlobs) {
+          void onAttachImageBlob(blob)
+        }
+      }
+
+      return
+    }
+
    const pastedText = event.clipboardData.getData('text')

    if (!pastedText) {
      return
    }

+    // Some clipboard sources deliver an image as a giant `data:image/...;base64,...`
+    // text/plain payload. Without this guard the whole base64 string would be
+    // inserted into the textarea (and persisted as the user message). Drop it
+    // outright — image pastes belong on the image-blob path above.
+    if (DATA_IMAGE_URL_RE.test(pastedText.trim())) {
+      event.preventDefault()
+
+      return
+    }
+
    const trimmedText = pastedText.replace(/^[\t ]*(?:\r\n|\r|\n)+|(?:\r\n|\r|\n)+[\t ]*$/g, '')

    if (trimmedText === pastedText) {
@@ -202,19 +327,99 @@ export function ChatBar({
        return
      }

-      current.focus()
+      current.focus({ preventScroll: true })
      current.setSelectionRange(cursor, cursor)
    })
  }

+  const dragHasAttachments = (transfer: DataTransfer | null) => {
+    if (!transfer) {
+      return false
+    }
+
+    if (Array.from(transfer.types || []).includes('Files')) {
+      return true
+    }
+
+    return Array.from(transfer.items || []).some(item => item.kind === 'file')
+  }
+
+  const resetDragState = () => {
+    dragDepthRef.current = 0
+    setDragActive(false)
+  }
+
+  const handleDragEnter = (event: ReactDragEvent<HTMLFormElement>) => {
+    if (!onAttachDroppedItems || !dragHasAttachments(event.dataTransfer)) {
+      return
+    }
+
+    event.preventDefault()
+    dragDepthRef.current += 1
+
+    if (!dragActive) {
+      setDragActive(true)
+    }
+  }
+
+  const handleDragOver = (event: ReactDragEvent<HTMLFormElement>) => {
+    if (!onAttachDroppedItems || !dragHasAttachments(event.dataTransfer)) {
+      return
+    }
+
+    event.preventDefault()
+    event.dataTransfer.dropEffect = 'copy'
+  }
+
+  const handleDragLeave = (event: ReactDragEvent<HTMLFormElement>) => {
+    if (!onAttachDroppedItems) {
+      return
+    }
+
+    event.preventDefault()
+    dragDepthRef.current = Math.max(0, dragDepthRef.current - 1)
+
+    if (dragDepthRef.current === 0) {
+      setDragActive(false)
+    }
+  }
+
+  const handleDrop = (event: ReactDragEvent<HTMLFormElement>) => {
+    if (!onAttachDroppedItems) {
+      return
+    }
+
+    event.preventDefault()
+    resetDragState()
+
+    const candidates = extractDroppedFiles(event.dataTransfer)
+
+    if (candidates.length === 0) {
+      return
+    }
+
+    void Promise.resolve(onAttachDroppedItems(candidates)).then(attached => {
+      if (attached) {
+        triggerHaptic('selection')
+        focusInput()
+      }
+    })
+  }
+
+  const clearDraft = () => {
+    aui.composer().setText('')
+    draftRef.current = ''
+  }
+
  const submitDraft = () => {
    if (busy) {
      triggerHaptic('cancel')
      onCancel()
    } else if (draft.trim() || attachments.length > 0) {
+      const submitted = draft
      triggerHaptic('submit')
-      void onSubmit(draft)
-      aui.composer().setText('')
+      clearDraft()
+      void onSubmit(submitted)
    }

    focusInput()
@@ -281,9 +486,8 @@ export function ChatBar({
    }

    triggerHaptic('submit')
+    clearDraft()
    await onSubmit(text)
-    aui.composer().setText('')
-    draftRef.current = ''
  }

  const conversation = useVoiceConversation({
@@ -339,13 +543,13 @@ export function ChatBar({
  const input = (
    <ComposerPrimitive.Input
      className={cn(
-        'min-h-8 max-h-37.5 resize-none overflow-y-auto bg-transparent pb-1 pr-1 pt-1 leading-normal text-foreground outline-none placeholder:text-muted-foreground/80 disabled:cursor-not-allowed',
+        'min-h-(--composer-input-min-height) max-h-(--composer-input-max-height) resize-none overflow-y-auto bg-transparent pb-1 pr-1 pt-1 leading-normal text-foreground outline-none placeholder:text-muted-foreground/80 disabled:cursor-not-allowed',
        stacked && 'pl-3',
-        stacked ? 'w-full' : 'min-w-48 flex-1'
+        stacked ? 'w-full' : 'min-w-(--composer-input-inline-min-width) flex-1'
      )}
      disabled={disabled}
      onPaste={handlePaste}
-      placeholder={disabled ? 'Starting Hermes...' : askPlaceholder}
+      placeholder={placeholder}
      ref={textareaRef}
      rows={1}
      unstable_focusOnScrollToBottom={false}
@@ -357,8 +561,13 @@ export function ChatBar({
      <ComposerPrimitive.Unstable_TriggerPopoverRoot>
        <ComposerPrimitive.Root
          className={COMPOSER_SHELL_CLASS}
+          data-drag-active={dragActive ? '' : undefined}
          data-slot="composer-root"
          data-thread-scrolled-up={scrolledUp ? '' : undefined}
+          onDragEnter={handleDragEnter}
+          onDragLeave={handleDragLeave}
+          onDragOver={handleDragOver}
+          onDrop={handleDrop}
          onSubmit={e => {
            e.preventDefault()
            submitDraft()
@@ -378,6 +587,7 @@ export function ChatBar({
            loading={at.loading}
          />
          <SlashPopover adapter={slash.adapter} loading={slash.loading} />
+          <SkinSlashPopover draft={draft} onSelect={selectSkinSlashCommand} />
          <div className="pointer-events-none absolute inset-0" style={{ background: glassTweaks.fadeBackground }} />
          <div className="relative w-full">
            <div
@@ -413,14 +623,23 @@ export function ChatBar({
                'relative z-4 isolate overflow-hidden rounded-(--composer-active-radius) border border-input/70 shadow-composer transition-[border-color,box-shadow] duration-200 ease-out',
                'group-focus-within/composer:border-ring/35 group-focus-within/composer:shadow-composer-focus',
                'group-has-data-[state=open]/composer:rounded-t-none group-has-data-[state=open]/composer:border-t-transparent',
-                'group-has-data-[state=open]/composer:shadow-[0_0.0625rem_0_0.0625rem_color-mix(in_srgb,var(--dt-ring)_35%,transparent),0_0.5rem_1.5rem_color-mix(in_srgb,var(--shadow-ink)_6%,transparent)]'
+                'group-has-data-[state=open]/composer:shadow-[0_0.0625rem_0_0.0625rem_color-mix(in_srgb,var(--dt-ring)_35%,transparent),0_0.5rem_1.5rem_color-mix(in_srgb,var(--shadow-ink)_6%,transparent)]',
+                dragActive && 'border-primary/70 shadow-composer-focus ring-2 ring-primary/40'
              )}
              data-slot="composer-surface"
            >
              <div aria-hidden className={COMPOSER_FROST_CLASS} />
+              {dragActive && (
+                <div
+                  aria-hidden
+                  className="pointer-events-none absolute inset-0 z-3 flex items-center justify-center rounded-(--composer-active-radius) bg-primary/10 text-sm font-medium text-primary backdrop-blur-[1px]"
+                >
+                  Drop files to attach
+                </div>
+              )}
              <div
                className={cn(
-                  'relative z-1 flex min-h-0 w-full flex-col gap-1.5 px-2 py-1.5 transition-opacity duration-200 ease-out',
+                  'relative z-1 flex min-h-0 w-full flex-col gap-(--composer-row-gap) px-(--composer-surface-pad-x) py-(--composer-surface-pad-y) transition-opacity duration-200 ease-out',
                  scrolledUp ? COMPOSER_SCROLLED_DIM_CLASS : 'opacity-100'
                )}
                data-slot="composer-fade"
@@ -431,13 +650,13 @@ export function ChatBar({
                {stacked ? (
                  <>
                    {input}
-                    <div className="flex w-full items-center gap-1.5">
+                    <div className="flex w-full items-center gap-(--composer-control-gap)">
                      {contextMenu}
                      {controls}
                    </div>
                  </>
                ) : (
-                  <div className="flex w-full items-end gap-1.5">
+                  <div className="flex w-full items-end gap-(--composer-control-gap)">
                    {contextMenu}
                    {input}
                    {controls}
@@ -468,7 +687,7 @@ export function ChatBarFallback() {
      data-slot="composer-root"
      style={{ '--composer-active-radius': '1.25rem' } as CSSProperties}
    >
-      <div className="relative isolate h-11 w-full overflow-hidden rounded-(--composer-active-radius) border border-input/70 shadow-composer">
+      <div className="relative isolate h-(--composer-fallback-height) w-full overflow-hidden rounded-(--composer-active-radius) border border-input/70 shadow-composer">
        <div aria-hidden className={COMPOSER_FROST_CLASS} />
      </div>
    </div>
@@ -0,0 +1,56 @@
+import { desktopSkinSlashCompletions } from '@/lib/desktop-slash-commands'
+import { triggerHaptic } from '@/lib/haptics'
+import { useTheme } from '@/themes/context'
+
+import { COMPLETION_DRAWER_CLASS, COMPLETION_DRAWER_ROW_CLASS, CompletionDrawerEmpty } from './completion-drawer'
+
+interface SkinSlashPopoverProps {
+  draft: string
+  onSelect: (command: string) => void
+}
+
+export function SkinSlashPopover({ draft, onSelect }: SkinSlashPopoverProps) {
+  const { availableThemes, themeName } = useTheme()
+  const match = draft.match(/^\/skin\s+(\S*)$/i)
+
+  if (!match) {
+    return null
+  }
+
+  const items = desktopSkinSlashCompletions(availableThemes, themeName, match[1] ?? '')
+
+  return (
+    <div
+      aria-label="Desktop theme suggestions"
+      className={COMPLETION_DRAWER_CLASS}
+      data-slot="composer-skin-completion-drawer"
+      data-state="open"
+      role="listbox"
+    >
+      <div className="grid gap-0.5 pt-0.5">
+        {items.length === 0 ? (
+          <CompletionDrawerEmpty title="No matching themes.">
+            Try <span className="font-mono text-foreground/80">/skin list</span>.
+          </CompletionDrawerEmpty>
+        ) : (
+          items.map(item => (
+            <button
+              className={COMPLETION_DRAWER_ROW_CLASS}
+              key={item.text}
+              onClick={() => {
+                triggerHaptic('selection')
+                onSelect(item.text)
+              }}
+              onMouseDown={event => event.preventDefault()}
+              role="option"
+              type="button"
+            >
+              <span className="shrink-0 font-mono font-medium leading-5 text-foreground">{item.display}</span>
+              <span className="min-w-0 truncate leading-5 text-muted-foreground/80">{item.meta}</span>
+            </button>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
@@ -28,7 +28,7 @@ export function SlashPopover({ adapter, loading }: { adapter: Unstable_TriggerAd
          <div className="grid gap-0.5 pt-0.5">
            {items.length === 0 ? (
              <CompletionDrawerEmpty title={loading ? 'Looking up...' : 'No matching commands.'}>
-                Try <span className="font-mono text-foreground/80">/help</span> for the full list.
+                Try <span className="font-mono text-foreground/80">/help</span> for the desktop command list.
              </CompletionDrawerEmpty>
            ) : (
              items.map((item, index) => {
@@ -1,5 +1,7 @@
 import type { HermesGateway } from '@/hermes'

+import type { DroppedFile } from '../hooks/use-composer-actions'
+
 export interface ContextSuggestion {
  text: string
  display: string
@@ -36,6 +38,8 @@ export interface ChatBarProps {
  onCancel: () => void
  onAddContextRef?: (refText: string, label?: string, detail?: string) => void
  onAddUrl?: (url: string) => void
+  onAttachImageBlob?: (blob: Blob) => Promise<boolean | void> | boolean | void
+  onAttachDroppedItems?: (candidates: DroppedFile[]) => Promise<boolean | void> | boolean | void
  onPasteClipboardImage?: () => void
  onPickFiles?: () => void
  onPickFolders?: () => void
@@ -5,7 +5,88 @@ import { attachmentId, contextPath, pathLabel } from '@/lib/chat-runtime'
 import { addComposerAttachment, type ComposerAttachment, removeComposerAttachment } from '@/store/composer'
 import { notify, notifyError } from '@/store/notifications'

-import type { ImageAttachResponse, ImageDetachResponse } from '../../types'
+import type { ImageDetachResponse } from '../../types'
+
+const IMAGE_EXTENSION_PATTERN = /\.(png|jpe?g|gif|webp|bmp|tiff?|svg|ico)$/i
+
+const BLOB_MIME_EXTENSION: Record<string, string> = {
+  'image/bmp': '.bmp',
+  'image/gif': '.gif',
+  'image/jpeg': '.jpg',
+  'image/png': '.png',
+  'image/svg+xml': '.svg',
+  'image/tiff': '.tiff',
+  'image/webp': '.webp',
+  'image/x-icon': '.ico'
+}
+
+function blobExtension(blob: Blob): string {
+  const mime = blob.type.split(';')[0]?.trim().toLowerCase()
+
+  return (mime && BLOB_MIME_EXTENSION[mime]) || '.png'
+}
+
+function isImagePath(filePath: string): boolean {
+  return IMAGE_EXTENSION_PATTERN.test(filePath)
+}
+
+export interface DroppedFile {
+  file: File
+  path: string
+}
+
+/**
+ * Eagerly resolve files from a drop event into [File, path] pairs.
+ *
+ * Must be called synchronously from inside the drop handler — `DataTransfer`
+ * items are detached as soon as the handler returns, and `webUtils.getPathForFile`
+ * also requires the original (non-cloned) File reference.
+ */
+export function extractDroppedFiles(transfer: DataTransfer): DroppedFile[] {
+  const result: DroppedFile[] = []
+  const seen = new Set<File>()
+  const getPath = window.hermesDesktop?.getPathForFile
+
+  const fileList = transfer.files
+  if (fileList) {
+    for (let i = 0; i < fileList.length; i += 1) {
+      const file = fileList.item(i)
+      if (!file || seen.has(file)) continue
+      seen.add(file)
+      let path = ''
+      if (getPath) {
+        try {
+          path = getPath(file) || ''
+        } catch {
+          path = ''
+        }
+      }
+      result.push({ file, path })
+    }
+  }
+
+  const items = transfer.items
+  if (items) {
+    for (let i = 0; i < items.length; i += 1) {
+      const item = items[i]
+      if (!item || item.kind !== 'file') continue
+      const file = item.getAsFile()
+      if (!file || seen.has(file)) continue
+      seen.add(file)
+      let path = ''
+      if (getPath) {
+        try {
+          path = getPath(file) || ''
+        } catch {
+          path = ''
+        }
+      }
+      result.push({ file, path })
+    }
+  }
+
+  return result
+}

 interface ComposerActionsOptions {
  activeSessionId: string | null
@@ -13,7 +94,11 @@ interface ComposerActionsOptions {
  requestGateway: <T>(method: string, params?: Record<string, unknown>) => Promise<T>
 }

-export function useComposerActions({ activeSessionId, currentCwd, requestGateway }: ComposerActionsOptions) {
+export function useComposerActions({
+  activeSessionId,
+  currentCwd,
+  requestGateway
+}: ComposerActionsOptions) {
  const addContextRefAttachment = useCallback((refText: string, label?: string, detail?: string) => {
    let kind: ComposerAttachment['kind'] = 'file'

@@ -62,11 +147,93 @@ export function useComposerActions({ activeSessionId, currentCwd, requestGateway
    [currentCwd]
  )

-  const pickImages = useCallback(async () => {
-    if (!activeSessionId) {
-      return
-    }
+  const attachContextFilePath = useCallback(
+    (filePath: string) => {
+      if (!filePath) {
+        return false
+      }

+      const rel = contextPath(filePath, currentCwd)
+
+      addComposerAttachment({
+        id: attachmentId('file', rel),
+        kind: 'file',
+        label: pathLabel(filePath),
+        detail: rel,
+        refText: `@file:${formatRefValue(rel)}`,
+        path: filePath
+      })
+
+      return true
+    },
+    [currentCwd]
+  )
+
+  const attachImagePath = useCallback(
+    async (filePath: string) => {
+      if (!filePath) {
+        return false
+      }
+
+      const baseAttachment: ComposerAttachment = {
+        id: attachmentId('image', filePath),
+        kind: 'image',
+        label: pathLabel(filePath),
+        detail: filePath,
+        path: filePath
+      }
+
+      addComposerAttachment(baseAttachment)
+
+      try {
+        const previewUrl = await window.hermesDesktop?.readFileDataUrl(filePath)
+
+        if (previewUrl) {
+          addComposerAttachment({ ...baseAttachment, previewUrl })
+        }
+
+        return true
+      } catch (err) {
+        notifyError(err, 'Image preview failed')
+
+        return true
+      }
+    },
+    []
+  )
+
+  const attachImageBlob = useCallback(
+    async (blob: Blob) => {
+      if (blob.size === 0) {
+        return false
+      }
+
+      if (blob.type && !blob.type.startsWith('image/')) {
+        return false
+      }
+
+      try {
+        const buffer = await blob.arrayBuffer()
+        const data = new Uint8Array(buffer)
+        const savedPath = await window.hermesDesktop?.saveImageBuffer(data, blobExtension(blob))
+
+        if (!savedPath) {
+          notify({ kind: 'error', title: 'Image attach', message: 'Failed to write image to disk.' })
+
+          return false
+        }
+
+        return attachImagePath(savedPath)
+      } catch (err) {
+        notifyError(err, 'Image attach failed')
+
+        return false
+      }
+    },
+    [attachImagePath]
+  )
+
+  const pickImages = useCallback(async () => {
    const paths = await window.hermesDesktop?.selectPaths({
      title: 'Attach images',
      defaultPath: currentCwd || undefined,
@@ -83,73 +250,82 @@ export function useComposerActions({ activeSessionId, currentCwd, requestGateway
    }

    for (const path of paths) {
-      try {
-        const result = await requestGateway<ImageAttachResponse>('image.attach', {
-          session_id: activeSessionId,
-          path
-        })
-
-        const attachedPath = result.path || path
-
-        if (result.attached) {
-          const previewUrl = await window.hermesDesktop?.readFileDataUrl(attachedPath)
-
-          addComposerAttachment({
-            id: attachmentId('image', attachedPath),
-            kind: 'image',
-            label: pathLabel(attachedPath),
-            detail: attachedPath,
-            previewUrl,
-            path: attachedPath
-          })
-        }
-      } catch (err) {
-        notifyError(err, 'Image attach failed')
-      }
+      await attachImagePath(path)
    }
-  }, [activeSessionId, currentCwd, requestGateway])
+  }, [attachImagePath, currentCwd])

  const pasteClipboardImage = useCallback(async () => {
-    if (!activeSessionId) {
-      return
-    }
-
    try {
-      const result = await requestGateway<ImageAttachResponse>('clipboard.paste', {
-        session_id: activeSessionId
-      })
+      const path = await window.hermesDesktop?.saveClipboardImage()

-      if (!result.attached) {
+      if (!path) {
        notify({
          kind: 'warning',
          title: 'Clipboard',
-          message: result.message || 'No image found in clipboard'
+          message: 'No image found in clipboard'
        })

        return
      }

-      const attachedPath = result.path || 'clipboard'
-      const previewUrl = result.path && (await window.hermesDesktop?.readFileDataUrl(result.path))
-
-      addComposerAttachment({
-        id: attachmentId('image', attachedPath),
-        kind: 'image',
-        label: pathLabel(attachedPath),
-        detail: attachedPath,
-        previewUrl: previewUrl || undefined,
-        path: result.path
-      })
+      await attachImagePath(path)
    } catch (err) {
      notifyError(err, 'Clipboard paste failed')
    }
-  }, [activeSessionId, requestGateway])
+  }, [attachImagePath])
+
+  const attachDroppedItems = useCallback(
+    async (candidates: DroppedFile[]) => {
+      if (candidates.length === 0) {
+        return false
+      }
+
+      let attached = false
+      let lastFailure: string | null = null
+
+      for (const { file, path: knownPath } of candidates) {
+        const fallbackPath = !knownPath && window.hermesDesktop?.getPathForFile ? window.hermesDesktop.getPathForFile(file) : ''
+        const filePath = knownPath || fallbackPath || ''
+        const isImage = file.type.startsWith('image/') || isImagePath(file.name) || (filePath && isImagePath(filePath))
+
+        if (isImage) {
+          if ((filePath && (await attachImagePath(filePath))) || (await attachImageBlob(file))) {
+            attached = true
+            continue
+          }
+
+          lastFailure = `Could not attach ${file.name || 'image'}`
+          continue
+        }
+
+        if (filePath && attachContextFilePath(filePath)) {
+          attached = true
+          continue
+        }
+
+        lastFailure = `Could not attach ${file.name || 'file'}`
+      }
+
+      if (!attached && lastFailure) {
+        notify({ kind: 'warning', title: 'Drop files', message: lastFailure })
+      }
+
+      return attached
+    },
+    [attachContextFilePath, attachImageBlob, attachImagePath]
+  )

  const removeAttachment = useCallback(
    async (id: string) => {
      const removed = removeComposerAttachment(id)

-      if (removed?.kind === 'image' && removed.path && activeSessionId) {
+      if (
+        removed?.kind === 'image' &&
+        removed.path &&
+        activeSessionId &&
+        removed.attachedSessionId &&
+        removed.attachedSessionId === activeSessionId
+      ) {
        await requestGateway<ImageDetachResponse>('image.detach', {
          session_id: activeSessionId,
          path: removed.path
@@ -161,6 +337,9 @@ export function useComposerActions({ activeSessionId, currentCwd, requestGateway

  return {
    addContextRefAttachment,
+    attachDroppedItems,
+    attachImageBlob,
+    attachImagePath,
    pasteClipboardImage,
    pickContextPaths,
    pickImages,
@@ -1,4 +1,5 @@
 import {
+  type AppendMessage,
  AssistantRuntimeProvider,
  ExportedMessageRepository,
  type ThreadMessage,
@@ -42,6 +43,7 @@ import { titlebarHeaderBaseClass, titlebarHeaderShadowClass } from '../shell/tit

 import { ChatBar, ChatBarFallback } from './composer'
 import type { ChatBarState } from './composer/types'
+import type { DroppedFile } from './hooks/use-composer-actions'
 import { ChatRightRail } from './right-rail'
 import { SessionActionsMenu } from './sidebar/session-actions-menu'

@@ -54,6 +56,8 @@ interface ChatViewProps extends Omit<React.ComponentProps<'div'>, 'onSubmit'> {
  onAddUrl: (url: string) => void
  onBranchInNewChat: (messageId: string) => void
  maxVoiceRecordingSeconds?: number
+  onAttachImageBlob: (blob: Blob) => Promise<boolean | void> | boolean | void
+  onAttachDroppedItems: (candidates: DroppedFile[]) => Promise<boolean | void> | boolean | void
  onPasteClipboardImage: () => void
  onPickFiles: () => void
  onPickFolders: () => void
@@ -65,20 +69,33 @@ interface ChatViewProps extends Omit<React.ComponentProps<'div'>, 'onSubmit'> {
  onOpenModelPicker: () => void
  onSelectPersonality: (name: string) => void
  onThreadMessagesChange: (messages: readonly ThreadMessage[]) => void
+  onEdit: (message: AppendMessage) => Promise<void>
  onReload: (parentId: string | null) => Promise<void>
  onTranscribeAudio?: (audio: Blob) => Promise<string>
 }

-function threadLoadingState(loadingSession: boolean, busy: boolean, awaitingResponse: boolean) {
+function threadLoadingState(
+  loadingSession: boolean,
+  busy: boolean,
+  awaitingResponse: boolean,
+  lastMessageIsUser: boolean
+) {
  if (loadingSession) {
    return 'session'
  }

-  if (!busy) {
-    return undefined
+  // Only show the response spinner when we're actually waiting for an
+  // assistant reply to a user message. Previously any `busy && awaiting`
+  // window showed the spinner — including the brief gateway-hydration blip
+  // right after a session resume, which produced a visible flicker chain:
+  //   session spinner → response spinner → content.
+  // Gating on `lastMessageIsUser` means the spinner only appears when the
+  // user actually just sent something and there's no assistant reply yet.
+  if (busy && awaitingResponse && lastMessageIsUser) {
+    return 'response'
  }

-  return awaitingResponse ? 'response' : 'working'
+  return undefined
 }

 export function ChatView({
@@ -88,6 +105,8 @@ export function ChatView({
  onCancel,
  onAddContextRef,
  onAddUrl,
+  onAttachImageBlob,
+  onAttachDroppedItems,
  onBranchInNewChat,
  maxVoiceRecordingSeconds,
  onPasteClipboardImage,
@@ -101,6 +120,7 @@ export function ChatView({
  onOpenModelPicker,
  onSelectPersonality,
  onThreadMessagesChange,
+  onEdit,
  onReload,
  onTranscribeAudio
 }: ChatViewProps) {
@@ -129,8 +149,14 @@ export function ChatView({
  const showIntro =
    freshDraftReady && !isRoutedSessionView && !selectedSessionId && !activeSessionId && messages.length === 0

-  const loadingSession = isRoutedSessionView && messages.length === 0
-  const threadLoading = threadLoadingState(loadingSession, busy, awaitingResponse)
+  // Session is still loading if the route references a session we haven't
+  // resumed yet. Once `activeSessionId` is set (runtime has resumed), the
+  // session exists — even if it has zero messages (a brand-new routed
+  // session). The flicker where `busy` flips true briefly during hydrate
+  // is handled by `threadLoadingState`'s `lastMessageIsUser` gate.
+  const loadingSession = isRoutedSessionView && messages.length === 0 && !activeSessionId
+  const lastMessageIsUser = messages.at(-1)?.role === 'user'
+  const threadLoading = threadLoadingState(loadingSession, busy, awaitingResponse, lastMessageIsUser)
  const showChatBar = !loadingSession
  const threadKey = selectedSessionId || activeSessionId || (isRoutedSessionView ? location.pathname : 'new')
  const title = activeStoredSession ? sessionTitle(activeStoredSession) : ''
@@ -221,6 +247,7 @@ export function ChatView({
      // Submission is handled explicitly by ChatBar.
      // Keeping this no-op avoids duplicate prompt.submit calls.
    },
+    onEdit,
    onCancel: async () => onCancel(),
    onReload
  })
@@ -236,6 +263,7 @@ export function ChatView({
                onDelete={selectedSessionId ? onDeleteSelectedSession : undefined}
                onPin={selectedSessionId ? onToggleSelectedPin : undefined}
                pinned={selectedIsPinned}
+                sessionId={selectedSessionId || activeSessionId || ''}
                sideOffset={8}
                title={title}
              >
@@ -273,6 +301,8 @@ export function ChatView({
                  maxRecordingSeconds={maxVoiceRecordingSeconds}
                  onAddContextRef={onAddContextRef}
                  onAddUrl={onAddUrl}
+                  onAttachDroppedItems={onAttachDroppedItems}
+                  onAttachImageBlob={onAttachImageBlob}
                  onCancel={onCancel}
                  onPasteClipboardImage={onPasteClipboardImage}
                  onPickFiles={onPickFiles}
@@ -300,4 +330,4 @@ export function ChatView({
  )
 }

-export { SESSION_INSPECTOR_WIDTH } from './right-rail'
+export { PREVIEW_RAIL_WIDTH, SESSION_INSPECTOR_WIDTH } from './right-rail'
@@ -3,6 +3,7 @@ import type * as React from 'react'

 import { SESSION_INSPECTOR_WIDTH, SessionInspector } from '@/components/session-inspector'
 import { $inspectorOpen } from '@/store/layout'
+import { $previewTarget } from '@/store/preview'
 import {
  $availablePersonalities,
  $busy,
@@ -14,6 +15,8 @@ import {
  $gatewayState
 } from '@/store/session'

+import { PreviewPane } from './preview-pane'
+
 interface ChatRightRailProps extends Pick<
  React.ComponentProps<typeof SessionInspector>,
  'onBrowseCwd' | 'onChangeCwd'
@@ -29,6 +32,7 @@ export function ChatRightRail({
  onSelectPersonality
 }: ChatRightRailProps) {
  const inspectorOpen = useStore($inspectorOpen)
+  const previewTarget = useStore($previewTarget)
  const gatewayOpen = useStore($gatewayState) === 'open'
  const busy = useStore($busy)
  const cwd = useStore($currentCwd)
@@ -38,6 +42,10 @@ export function ChatRightRail({
  const personality = useStore($currentPersonality)
  const personalities = useStore($availablePersonalities)

+  if (previewTarget) {
+    return <PreviewPane target={previewTarget} />
+  }
+
  return (
    <SessionInspector
      branch={branch}
@@ -58,3 +66,4 @@ export function ChatRightRail({
 }

 export { SESSION_INSPECTOR_WIDTH }
+export const PREVIEW_RAIL_WIDTH = 'clamp(18rem, 36vw, 38rem)'
@@ -0,0 +1,522 @@
+import { Bug, Check, Copy, ExternalLink, PanelBottom, RefreshCw, Send, Trash2, X } from 'lucide-react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { $composerDraft, setComposerDraft } from '@/store/composer'
+import { notify, notifyError } from '@/store/notifications'
+import { type PreviewTarget, setPreviewTarget } from '@/store/preview'
+
+type PreviewWebview = HTMLElement & {
+  closeDevTools?: () => void
+  isDevToolsOpened?: () => boolean
+  openDevTools?: () => void
+  reload?: () => void
+  reloadIgnoringCache?: () => void
+}
+
+interface ConsoleEntry {
+  id: number
+  level: number
+  line?: number
+  message: string
+  source?: string
+}
+
+const consoleLevelLabel: Record<number, string> = {
+  0: 'log',
+  1: 'info',
+  2: 'warn',
+  3: 'error'
+}
+
+const consoleLevelClass: Record<number, string> = {
+  0: 'text-foreground',
+  1: 'text-sky-700 dark:text-sky-300',
+  2: 'text-amber-700 dark:text-amber-300',
+  3: 'text-destructive'
+}
+
+function compactUrl(value: string): string {
+  try {
+    const url = new URL(value)
+
+    if (url.protocol === 'file:') {
+      return decodeURIComponent(url.pathname)
+    }
+
+    return `${url.host}${url.pathname}${url.search}`
+  } catch {
+    return value
+  }
+}
+
+function formatLogLine(log: ConsoleEntry): string {
+  const head = `[${consoleLevelLabel[log.level] || 'log'}]`
+  const tail = log.source ? ` (${compactUrl(log.source)}${log.line ? `:${log.line}` : ''})` : ''
+
+  return `${head} ${log.message}${tail}`.trim()
+}
+
+interface ConsoleRowProps {
+  log: ConsoleEntry
+  onCopy: () => void | Promise<void>
+  onSend: () => void
+  onToggleSelect: () => void
+  selected: boolean
+}
+
+function ConsoleRow({ log, onCopy, onSend, onToggleSelect, selected }: ConsoleRowProps) {
+  return (
+    <div
+      className={cn(
+        'group/row grid grid-cols-[3.25rem_minmax(0,1fr)_auto] items-start gap-2 rounded-md border border-transparent px-1 py-1 transition-colors hover:bg-accent/40',
+        selected && 'border-border/60 bg-accent/40'
+      )}
+    >
+      <button
+        className={cn(
+          'mt-0.5 cursor-pointer text-left uppercase opacity-70 transition-colors hover:opacity-100',
+          consoleLevelClass[log.level] ?? consoleLevelClass[0]
+        )}
+        onClick={onToggleSelect}
+        title={selected ? 'Deselect entry' : 'Select entry'}
+        type="button"
+      >
+        {consoleLevelLabel[log.level] || 'log'}
+      </button>
+      <div className="min-w-0" data-selectable-text="true">
+        <span className={cn('block wrap-break-word', consoleLevelClass[log.level] ?? consoleLevelClass[0])}>
+          {log.message}
+        </span>
+        {log.source && (
+          <span className="block truncate text-muted-foreground/60">
+            {compactUrl(log.source)}
+            {log.line ? `:${log.line}` : ''}
+          </span>
+        )}
+      </div>
+      <span className="opacity-0 transition-opacity group-hover/row:opacity-100">
+        <button
+          className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+          onClick={() => void onCopy()}
+          title="Copy this entry"
+          type="button"
+        >
+          <Copy className="size-3" />
+        </button>
+        <button
+          className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+          onClick={onSend}
+          title="Send this entry to chat"
+          type="button"
+        >
+          <Send className="size-3" />
+        </button>
+      </span>
+    </div>
+  )
+}
+
+async function writeClipboardText(text: string) {
+  if (!text) {
+    return
+  }
+
+  if (window.hermesDesktop?.writeClipboard) {
+    await window.hermesDesktop.writeClipboard(text)
+
+    return
+  }
+
+  if (navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text)
+  }
+}
+
+export function PreviewPane({ target }: { target: PreviewTarget }) {
+  const consoleBodyRef = useRef<HTMLDivElement | null>(null)
+  const hostRef = useRef<HTMLDivElement | null>(null)
+  const logIdRef = useRef(0)
+  const webviewRef = useRef<PreviewWebview | null>(null)
+  const [consoleOpen, setConsoleOpen] = useState(true)
+  const [currentUrl, setCurrentUrl] = useState(target.url)
+  const [devtoolsOpen, setDevtoolsOpen] = useState(false)
+  const [logs, setLogs] = useState<ConsoleEntry[]>([])
+  const [selectedLogIds, setSelectedLogIds] = useState<Set<number>>(() => new Set())
+  const [copiedAll, setCopiedAll] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const visibleSelection = useMemo(() => logs.filter(log => selectedLogIds.has(log.id)), [logs, selectedLogIds])
+  const sendableLogs = visibleSelection.length > 0 ? visibleSelection : logs
+
+  function toggleLogSelection(id: number) {
+    setSelectedLogIds(prev => {
+      const next = new Set(prev)
+
+      if (!next.delete(id)) {
+        next.add(id)
+      }
+
+      return next
+    })
+  }
+
+  async function copyConsoleText(entries: ConsoleEntry[], successMessage: string) {
+    if (!entries.length) {
+      return
+    }
+
+    try {
+      await writeClipboardText(entries.map(formatLogLine).join('\n'))
+      notify({ kind: 'success', title: 'Console copied', message: successMessage })
+    } catch (error) {
+      notifyError(error, 'Could not copy console output')
+    }
+  }
+
+  function sendLogsToComposer(entries: ConsoleEntry[]) {
+    if (!entries.length) {
+      return
+    }
+
+    const block = ['Preview console:', '```', ...entries.map(formatLogLine), '```'].join('\n')
+    const draft = $composerDraft.get()
+    const next = draft && !draft.endsWith('\n') ? `${draft}\n\n${block}` : `${draft}${block}`
+
+    setComposerDraft(next)
+    setSelectedLogIds(new Set())
+    notify({
+      kind: 'success',
+      title: 'Sent to chat',
+      message: `${entries.length} log entr${entries.length === 1 ? 'y' : 'ies'} added to composer`
+    })
+  }
+
+  function toggleDevTools() {
+    const webview = webviewRef.current
+
+    if (!webview?.openDevTools) {
+      return
+    }
+
+    if (webview.isDevToolsOpened?.()) {
+      webview.closeDevTools?.()
+      setDevtoolsOpen(false)
+
+      return
+    }
+
+    webview.openDevTools()
+    setDevtoolsOpen(true)
+  }
+
+  useEffect(() => {
+    if (consoleOpen) {
+      consoleBodyRef.current?.scrollTo({ top: consoleBodyRef.current.scrollHeight })
+    }
+  }, [consoleOpen, logs])
+
+  useEffect(() => {
+    if (target.kind !== 'file' || !window.hermesDesktop?.watchPreviewFile || !window.hermesDesktop?.onPreviewFileChanged) {
+      return
+    }
+
+    let active = true
+    let watchId = ''
+
+    const unsubscribe = window.hermesDesktop.onPreviewFileChanged(payload => {
+      if (!active || payload.id !== watchId) {
+        return
+      }
+
+      setLogs(prev => [
+        ...prev.slice(-199),
+        {
+          id: ++logIdRef.current,
+          level: 1,
+          message: `File changed, reloading preview: ${compactUrl(payload.url)}`
+        }
+      ])
+
+      if (webviewRef.current?.reloadIgnoringCache) {
+        webviewRef.current.reloadIgnoringCache()
+      } else {
+        webviewRef.current?.reload?.()
+      }
+    })
+
+    void window.hermesDesktop
+      .watchPreviewFile(target.url)
+      .then(watch => {
+        if (!active) {
+          void window.hermesDesktop?.stopPreviewFileWatch?.(watch.id)
+
+          return
+        }
+
+        watchId = watch.id
+      })
+      .catch(error => {
+        setLogs(prev => [
+          ...prev.slice(-199),
+          {
+            id: ++logIdRef.current,
+            level: 2,
+            message: `Could not watch preview file: ${error instanceof Error ? error.message : String(error)}`
+          }
+        ])
+      })
+
+    return () => {
+      active = false
+      unsubscribe()
+
+      if (watchId) {
+        void window.hermesDesktop?.stopPreviewFileWatch?.(watchId)
+      }
+    }
+  }, [target.kind, target.url])
+
+  useEffect(() => {
+    const host = hostRef.current
+
+    if (!host) {
+      return
+    }
+
+    host.replaceChildren()
+    webviewRef.current = null
+    setCurrentUrl(target.url)
+    setDevtoolsOpen(false)
+    setLogs([])
+    setLoading(true)
+
+    const webview = document.createElement('webview') as PreviewWebview
+    webview.className = 'hermes-preview-webview h-full w-full flex-1 bg-background'
+    webview.setAttribute('partition', 'persist:hermes-preview')
+    webview.setAttribute('src', target.url)
+    webview.setAttribute('webpreferences', 'contextIsolation=yes,nodeIntegration=no,sandbox=yes')
+
+    const appendLog = (entry: Omit<ConsoleEntry, 'id'>) => {
+      setLogs(prev => [...prev.slice(-199), { ...entry, id: ++logIdRef.current }])
+    }
+
+    const onConsole = (event: Event) => {
+      const detail = event as Event & {
+        level?: number
+        line?: number
+        message?: string
+        sourceId?: string
+      }
+
+      appendLog({
+        level: detail.level ?? 0,
+        line: detail.line,
+        message: detail.message || '',
+        source: detail.sourceId
+      })
+    }
+
+    const onNavigate = (event: Event) => {
+      const detail = event as Event & { url?: string }
+
+      if (detail.url) {
+        setCurrentUrl(detail.url)
+      }
+    }
+
+    const onFail = (event: Event) => {
+      const detail = event as Event & {
+        errorCode?: number
+        errorDescription?: string
+        validatedURL?: string
+      }
+
+      appendLog({
+        level: 3,
+        message: `Load failed${detail.errorCode ? ` (${detail.errorCode})` : ''}: ${
+          detail.errorDescription || detail.validatedURL || 'unknown error'
+        }`
+      })
+      setLoading(false)
+    }
+
+    const onStart = () => setLoading(true)
+    const onStop = () => setLoading(false)
+
+    webview.addEventListener('console-message', onConsole)
+    webview.addEventListener('did-fail-load', onFail)
+    webview.addEventListener('did-navigate', onNavigate)
+    webview.addEventListener('did-navigate-in-page', onNavigate)
+    webview.addEventListener('did-start-loading', onStart)
+    webview.addEventListener('did-stop-loading', onStop)
+    host.appendChild(webview)
+    webviewRef.current = webview
+
+    return () => {
+      webview.removeEventListener('console-message', onConsole)
+      webview.removeEventListener('did-fail-load', onFail)
+      webview.removeEventListener('did-navigate', onNavigate)
+      webview.removeEventListener('did-navigate-in-page', onNavigate)
+      webview.removeEventListener('did-start-loading', onStart)
+      webview.removeEventListener('did-stop-loading', onStop)
+      webview.remove()
+    }
+  }, [target.url])
+
+  return (
+    <aside className="relative flex h-screen min-w-0 flex-col overflow-hidden bg-transparent pb-2 pl-2 pr-3 pt-[calc(var(--titlebar-height)+0.25rem)] text-muted-foreground">
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl border border-border/60 bg-card/70 shadow-sm">
+        <div className="flex items-center gap-1.5 border-b border-border/60 px-2 py-2">
+          <div className="min-w-0 flex-1">
+            <div className="truncate text-xs font-medium text-foreground">{target.label || 'Preview'}</div>
+            <div className="truncate font-mono text-[0.625rem] text-muted-foreground">{compactUrl(currentUrl)}</div>
+          </div>
+          <Button
+            aria-label={consoleOpen ? 'Hide preview console' : 'Show preview console'}
+            className="h-7 shrink-0 rounded-lg px-2 text-[0.6875rem]"
+            onClick={() => setConsoleOpen(open => !open)}
+            size="xs"
+            title={consoleOpen ? 'Hide Console' : 'Show Console'}
+            type="button"
+            variant="ghost"
+          >
+            <PanelBottom className="size-3.5" />
+            Console
+            {logs.length > 0 && (
+              <span className="ml-0.5 rounded-full bg-muted px-1.5 py-px text-[0.5625rem] text-muted-foreground">
+                {logs.length}
+              </span>
+            )}
+          </Button>
+          <Button
+            aria-label={devtoolsOpen ? 'Hide preview DevTools' : 'Open preview DevTools'}
+            className="h-7 shrink-0 rounded-lg px-2 text-[0.6875rem]"
+            onClick={toggleDevTools}
+            size="xs"
+            title={devtoolsOpen ? 'Hide DevTools' : 'Open DevTools'}
+            type="button"
+            variant="ghost"
+          >
+            <Bug className="size-3.5" />
+            {devtoolsOpen ? 'Hide DevTools' : 'DevTools'}
+          </Button>
+          <Button
+            aria-label="Reload preview"
+            className="size-7 shrink-0 rounded-lg"
+            onClick={() => webviewRef.current?.reload?.()}
+            size="icon"
+            type="button"
+            variant="ghost"
+          >
+            <RefreshCw className={cn('size-3.5', loading && 'animate-spin')} />
+          </Button>
+          <Button
+            aria-label="Open preview externally"
+            className="size-7 shrink-0 rounded-lg"
+            onClick={() => void window.hermesDesktop?.openExternal(currentUrl)}
+            size="icon"
+            type="button"
+            variant="ghost"
+          >
+            <ExternalLink className="size-3.5" />
+          </Button>
+          <Button
+            aria-label="Close preview"
+            className="size-7 shrink-0 rounded-lg"
+            onClick={() => setPreviewTarget(null)}
+            size="icon"
+            type="button"
+            variant="ghost"
+          >
+            <X className="size-3.5" />
+          </Button>
+        </div>
+
+        <div className="min-h-0 flex-1 bg-background" ref={hostRef} />
+
+        {consoleOpen && (
+          <div className="min-h-44 border-t border-border/60 bg-background/95">
+            <div className="flex h-8 items-center justify-between border-b border-border/50 px-2">
+              <div className="flex items-center gap-2 text-[0.6875rem] font-medium text-muted-foreground">
+                <PanelBottom className="size-3.5" />
+                Preview Console
+                {selectedLogIds.size > 0 && (
+                  <span className="rounded-full bg-muted px-1.5 py-px text-[0.5625rem] text-muted-foreground">
+                    {selectedLogIds.size} selected
+                  </span>
+                )}
+              </div>
+              <div className="flex items-center gap-1">
+                <button
+                  className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[0.625rem] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-40"
+                  disabled={sendableLogs.length === 0}
+                  onClick={() => sendLogsToComposer(sendableLogs)}
+                  title={
+                    visibleSelection.length > 0
+                      ? `Send ${visibleSelection.length} selected to chat`
+                      : 'Send all log entries to chat'
+                  }
+                  type="button"
+                >
+                  <Send className="size-3" />
+                  Send to chat
+                </button>
+                <button
+                  className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[0.625rem] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-40"
+                  disabled={sendableLogs.length === 0}
+                  onClick={async () => {
+                    await copyConsoleText(
+                      sendableLogs,
+                      visibleSelection.length > 0 ? `${visibleSelection.length} selected entries` : 'All console entries'
+                    )
+                    setCopiedAll(true)
+                    setTimeout(() => setCopiedAll(false), 1500)
+                  }}
+                  title={visibleSelection.length > 0 ? 'Copy selected to clipboard' : 'Copy all to clipboard'}
+                  type="button"
+                >
+                  {copiedAll ? <Check className="size-3" /> : <Copy className="size-3" />}
+                  Copy
+                </button>
+                <button
+                  className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[0.625rem] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-40"
+                  disabled={logs.length === 0}
+                  onClick={() => {
+                    setLogs([])
+                    setSelectedLogIds(new Set())
+                  }}
+                  title="Clear console"
+                  type="button"
+                >
+                  <Trash2 className="size-3" />
+                  Clear
+                </button>
+              </div>
+            </div>
+            <div className="h-40 overflow-y-auto px-2 py-1.5 font-mono text-[0.6875rem] leading-relaxed" ref={consoleBodyRef}>
+              {logs.length > 0 ? (
+                logs.map(log => {
+                  const selected = selectedLogIds.has(log.id)
+
+                  return (
+                    <ConsoleRow
+                      key={log.id}
+                      log={log}
+                      onCopy={() => copyConsoleText([log], 'Log entry copied')}
+                      onSend={() => sendLogsToComposer([log])}
+                      onToggleSelect={() => toggleLogSelection(log.id)}
+                      selected={selected}
+                    />
+                  )
+                })
+              ) : (
+                <div className="py-2 text-muted-foreground/70">No console messages yet.</div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </aside>
+  )
+}
@@ -18,7 +18,6 @@ import { Skeleton } from '@/components/ui/skeleton'
 import type { SessionInfo } from '@/hermes'
 import { cn } from '@/lib/utils'
 import {
-  $isSidebarResizing,
  $pinnedSessionIds,
  $sidebarOpen,
  $sidebarPinsOpen,
@@ -66,10 +65,10 @@ export function ChatSidebar({
 }: ChatSidebarProps) {
  const sidebarOpen = useStore($sidebarOpen)
  const pinnedSessionIds = useStore($pinnedSessionIds)
-  const isSidebarResizing = useStore($isSidebarResizing)
  const pinsOpen = useStore($sidebarPinsOpen)
  const recentsOpen = useStore($sidebarRecentsOpen)
  const selectedSessionId = useStore($selectedStoredSessionId)
+  const activeSidebarSessionId = currentView === 'chat' ? selectedSessionId : null
  const sessions = useStore($sessions)
  const sessionsLoading = useStore($sessionsLoading)
  const workingSessionIds = useStore($workingSessionIds)
@@ -101,13 +100,10 @@ export function ChatSidebar({
  return (
    <Sidebar
      className={cn(
-        'relative h-screen min-w-0 overflow-hidden border-r border-t-0 border-b-0 border-l-0 text-foreground [backdrop-filter:blur(1.5rem)_saturate(1.08)]',
-        isSidebarResizing
-          ? 'transition-none'
-          : 'transition-[opacity,transform,border-color,background-color] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]',
+        'relative h-screen min-w-0 overflow-hidden border-r border-t-0 border-b-0 border-l-0 text-foreground transition-none [backdrop-filter:blur(1.5rem)_saturate(1.08)]',
        sidebarOpen
-          ? 'translate-x-0 border-(--sidebar-edge-border) bg-[color-mix(in_srgb,var(--dt-sidebar-bg)_97%,transparent)] opacity-100'
-          : 'pointer-events-none -translate-x-2 border-transparent bg-transparent opacity-0'
+          ? 'border-(--sidebar-edge-border) bg-[color-mix(in_srgb,var(--dt-sidebar-bg)_97%,transparent)] opacity-100'
+          : 'pointer-events-none border-transparent bg-transparent opacity-0'
      )}
      collapsible="none"
    >
@@ -159,7 +155,7 @@ export function ChatSidebar({
                {pinnedSessions.map(session => (
                  <SidebarSessionRow
                    isPinned
-                    isSelected={session.id === selectedSessionId}
+                    isSelected={session.id === activeSidebarSessionId}
                    isWorking={workingSessionIdSet.has(session.id)}
                    key={session.id}
                    onDelete={() => onDeleteSession(session.id)}
@@ -207,7 +203,7 @@ export function ChatSidebar({
                {recentSessions.map(session => (
                  <SidebarSessionRow
                    isPinned={false}
-                    isSelected={session.id === selectedSessionId}
+                    isSelected={session.id === activeSidebarSessionId}
                    isWorking={workingSessionIdSet.has(session.id)}
                    key={session.id}
                    onDelete={() => onDeleteSession(session.id)}
@@ -1,4 +1,4 @@
-import { Archive, Pencil, Pin, Trash2 } from 'lucide-react'
+import { Archive, Copy, Pencil, Pin, Trash2 } from 'lucide-react'
 import type * as React from 'react'
 import type { ReactNode } from 'react'

@@ -11,6 +11,7 @@ import {
 } from '@/components/ui/dropdown-menu'
 import { triggerHaptic } from '@/lib/haptics'
 import { cn } from '@/lib/utils'
+import { notify, notifyError } from '@/store/notifications'

 interface SessionActionsMenuProps extends Pick<
  React.ComponentProps<typeof DropdownMenuContent>,
@@ -18,6 +19,7 @@ interface SessionActionsMenuProps extends Pick<
 > {
  children: ReactNode
  title: string
+  sessionId: string
  pinned?: boolean
  onPin?: () => void
  onDelete?: () => void
@@ -26,6 +28,7 @@ interface SessionActionsMenuProps extends Pick<
 export function SessionActionsMenu({
  children,
  title,
+  sessionId,
  pinned = false,
  onPin,
  onDelete,
@@ -34,6 +37,17 @@ export function SessionActionsMenu({
 }: SessionActionsMenuProps) {
  const itemClass = 'gap-2.5 text-foreground focus:bg-accent [&_svg]:size-4'

+  const copyId = async () => {
+    triggerHaptic('selection')
+
+    try {
+      await navigator.clipboard.writeText(sessionId)
+      notify({ kind: 'success', message: 'Session ID copied', durationMs: 2_000 })
+    } catch (err) {
+      notifyError(err, 'Could not copy session ID')
+    }
+  }
+
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
@@ -49,6 +63,10 @@ export function SessionActionsMenu({
          <Pin />
          <span>{pinned ? 'Unpin' : 'Pin'}</span>
        </DropdownMenuItem>
+        <DropdownMenuItem className={itemClass} onSelect={() => void copyId()}>
+          <Copy />
+          <span>Copy ID</span>
+        </DropdownMenuItem>
        <DropdownMenuItem className={itemClass}>
          <Pencil />
          <span>Rename</span>
@@ -72,7 +72,7 @@ export function SidebarSessionRow({
        <span className="truncate text-sm font-medium text-foreground/90">{title}</span>
      </button>
      <div className="relative z-2 grid w-6 place-items-center">
-        <SessionActionsMenu onDelete={onDelete} onPin={onPin} pinned={isPinned} title={title}>
+        <SessionActionsMenu onDelete={onDelete} onPin={onPin} pinned={isPinned} sessionId={session.id} title={title}>
          <Button
            aria-label={`Actions for ${title}`}
            className="size-6 rounded-md bg-transparent text-transparent transition-colors duration-150 hover:bg-accent hover:text-foreground data-[state=open]:bg-accent data-[state=open]:text-foreground group-hover:text-muted-foreground"