nastechai-desktop 18.1.0

package/src/app/chat/composer/slash-nav-dom-repro.test.tsx

@@ -0,0 +1,186 @@
+import type { Unstable_TriggerAdapter, Unstable_TriggerItem } from '@assistant-ui/core'
+import { act, fireEvent, render } from '@testing-library/react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { useLiveCompletionAdapter } from './hooks/use-live-completion-adapter'
+import { detectTrigger, type TriggerState } from './text-utils'
+
+// Faithful mirror of index.tsx's trigger wiring, driven through REAL DOM
+// keydown+keyup events on a contentEditable. Exercises the parts a direct
+// reducer-call repro misses: the keyup -> refreshTrigger path, the
+// keydown-set "consumed" ref that guards it, and per-press keydown+keyup
+// ordering (critical for Escape, whose keydown nulls `trigger` before keyup).
+function Harness({
+  onState
+}: {
+  onState: (s: { active: number; items: readonly Unstable_TriggerItem[]; open: boolean }) => void
+}) {
+  const editorRef = useRef<HTMLDivElement>(null)
+  const triggerKeyConsumedRef = useRef(false)
+  const [trigger, setTrigger] = useState<TriggerState | null>(null)
+  const [triggerActive, setTriggerActive] = useState(0)
+  const [triggerItems, setTriggerItems] = useState<readonly Unstable_TriggerItem[]>([])
+
+  const { adapter } = useLiveCompletionAdapter({
+    enabled: true,
+    debounceMs: 0,
+    fetcher: async (query: string) => ({
+      query,
+      items: Array.from({ length: 5 }, (_, i) => ({ text: `/cmd${i}`, display: `/cmd${i}`, meta: '' }))
+    }),
+    toItem: (entry, index) => ({ id: `${entry.text}|${index}`, type: 'slash', label: entry.text.slice(1) })
+  })
+
+  const triggerAdapter: Unstable_TriggerAdapter | null = trigger?.kind === '/' ? adapter : null
+
+  const refreshTrigger = useCallback(() => {
+    const editor = editorRef.current
+
+    if (!editor) {
+      return
+    }
+
+    const raw = editor.textContent ?? ''
+
+    if (!raw.includes('@') && !raw.includes('/')) {
+      if (trigger) {
+        setTrigger(null)
+        setTriggerActive(0)
+      }
+
+      return
+    }
+
+    const detected = detectTrigger(raw)
+    setTrigger(detected)
+
+    if (detected?.kind !== trigger?.kind || detected?.query !== trigger?.query) {
+      setTriggerActive(0)
+    }
+  }, [trigger])
+
+  useEffect(() => {
+    if (!trigger || !triggerAdapter?.search) {
+      setTriggerItems([])
+
+      return
+    }
+
+    setTriggerItems(triggerAdapter.search(trigger.query))
+  }, [trigger, triggerAdapter])
+
+  useEffect(() => {
+    setTriggerActive(idx => Math.min(idx, Math.max(0, triggerItems.length - 1)))
+  }, [triggerItems.length])
+
+  onState({ active: triggerActive, items: triggerItems, open: trigger !== null })
+
+  const closeTrigger = () => {
+    setTrigger(null)
+    setTriggerItems([])
+    setTriggerActive(0)
+  }
+
+  // Exact copies of index.tsx handlers, including the keydown-set "consumed"
+  // ref that the keyup consults.
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (trigger && triggerItems.length > 0) {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        triggerKeyConsumedRef.current = true
+        setTriggerActive(idx => (idx + 1) % triggerItems.length)
+
+        return
+      }
+
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        triggerKeyConsumedRef.current = true
+        setTriggerActive(idx => (idx - 1 + triggerItems.length) % triggerItems.length)
+
+        return
+      }
+
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        triggerKeyConsumedRef.current = true
+        closeTrigger()
+
+        return
+      }
+    }
+  }
+
+  const handleKeyUp = () => {
+    if (triggerKeyConsumedRef.current) {
+      triggerKeyConsumedRef.current = false
+
+      return
+    }
+
+    // index.tsx defers via setTimeout(refreshTrigger, 0); call synchronously
+    // here so the test deterministically observes the keyup-driven refresh.
+    refreshTrigger()
+  }
+
+  return (
+    <div
+      contentEditable
+      data-testid="editor"
+      onInput={() => refreshTrigger()}
+      onKeyDown={handleKeyDown}
+      onKeyUp={handleKeyUp}
+      ref={editorRef}
+      suppressContentEditableWarning
+    />
+  )
+}
+
+async function flush() {
+  await act(async () => {
+    await new Promise(r => setTimeout(r, 20))
+  })
+}
+
+describe('slash menu navigation — real DOM keydown+keyup', () => {
+  it('cycles through ALL items and Esc closes (and stays closed)', async () => {
+    vi.useRealTimers()
+    let latest = { active: 0, items: [] as readonly Unstable_TriggerItem[], open: false }
+    const { getByTestId } = render(<Harness onState={s => (latest = s)} />)
+    const editor = getByTestId('editor')
+
+    // Simulate typing '/'.
+    await act(async () => {
+      editor.textContent = '/'
+      fireEvent.input(editor)
+    })
+    await flush()
+
+    expect(latest.open).toBe(true)
+    expect(latest.items.length).toBe(5)
+
+    // ArrowDown 6x with REAL keydown+keyup pairs. Bug = stuck [0,1,0,1,...].
+    const seen: number[] = [latest.active]
+
+    for (let i = 0; i < 6; i++) {
+      await act(async () => {
+        fireEvent.keyDown(editor, { key: 'ArrowDown' })
+        fireEvent.keyUp(editor, { key: 'ArrowDown' })
+        await Promise.resolve()
+      })
+      seen.push(latest.active)
+    }
+
+    expect(seen).toEqual([0, 1, 2, 3, 4, 0, 1])
+
+    // Escape: keydown closes; keyup must NOT reopen (the '/' is still in text).
+    await act(async () => {
+      fireEvent.keyDown(editor, { key: 'Escape' })
+      fireEvent.keyUp(editor, { key: 'Escape' })
+      await Promise.resolve()
+    })
+    await flush()
+    expect(latest.open).toBe(false)
+  })
+})

package/src/app/chat/composer/status-stack/index.tsx

@@ -0,0 +1,202 @@
+import { useStore } from '@nanostores/react'
+import { type ReactNode, useEffect, useLayoutEffect, useMemo, useRef } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { blurComposerInput } from '@/app/chat/composer/focus'
+import { AGENTS_ROUTE } from '@/app/routes'
+import { composerDockCard } from '@/components/chat/composer-dock'
+import { StatusSection } from '@/components/chat/status-section'
+import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
+import { type Translations, useI18n } from '@/i18n'
+import { cn } from '@/lib/utils'
+import {
+  $statusItemsBySession,
+  type ComposerStatusItem,
+  dismissBackgroundProcess,
+  groupStatusItems,
+  refreshBackgroundProcesses,
+  type StatusGroup,
+  stopBackgroundProcess
+} from '@/store/composer-status'
+import { $threadScrolledUp } from '@/store/thread-scroll'
+import { openSessionInNewWindow } from '@/store/windows'
+
+import { StatusItemRow } from './status-row'
+
+// Slow safety-net poll for silent exits (processes without notify_on_complete
+// emit no event when they die). Only armed while a running row is on screen.
+const BACKGROUND_POLL_MS = 5_000
+
+const groupLabel = (group: StatusGroup, s: Translations['statusStack']) => {
+  if (group.type === 'todo') {
+    return s.todos(group.items.filter(i => i.todoStatus === 'completed').length, group.items.length)
+  }
+
+  return group.type === 'subagent' ? s.subagents(group.items.length) : s.background(group.items.length)
+}
+
+interface ComposerStatusStackProps {
+  /** The queue, built by the composer (it owns the queue's callbacks). Rendered
+   *  as the last group so it stays fused to the composer like before. */
+  queue: ReactNode
+  sessionId: null | string
+}
+
+/**
+ * The status "sink" above the composer: one card (the queue's chrome) holding
+ * every session-scoped status — subagents, background tasks, queue — grouped by
+ * type and separated by light dividers. Collapses to nothing when empty.
+ */
+export function ComposerStatusStack({ queue, sessionId }: ComposerStatusStackProps) {
+  const { t } = useI18n()
+  const navigate = useNavigate()
+  const itemsBySession = useStore($statusItemsBySession)
+  const scrolledUp = useStore($threadScrolledUp)
+
+  const groups = useMemo(
+    () => groupStatusItems(sessionId ? (itemsBySession[sessionId] ?? []) : []),
+    [itemsBySession, sessionId]
+  )
+
+  // Seed from the registry on session open; event-driven refreshes (terminal /
+  // process tool completions) live in use-message-stream.
+  useEffect(() => {
+    if (sessionId) {
+      void refreshBackgroundProcesses(sessionId)
+    }
+  }, [sessionId])
+
+  const hasRunningBackground = groups.some(g => g.type === 'background' && g.items.some(i => i.state === 'running'))
+
+  useEffect(() => {
+    if (!sessionId || !hasRunningBackground) {
+      return
+    }
+
+    const timer = setInterval(() => void refreshBackgroundProcesses(sessionId), BACKGROUND_POLL_MS)
+
+    return () => clearInterval(timer)
+  }, [hasRunningBackground, sessionId])
+
+  const openAgents = () => navigate(AGENTS_ROUTE)
+
+  const openSubagent = (item: ComposerStatusItem) =>
+    item.sessionId ? void openSessionInNewWindow(item.sessionId, { watch: true }) : openAgents()
+
+  const sections: { key: string; node: ReactNode }[] = groups.map(group => ({
+    key: group.type,
+    node: (
+      <StatusSection
+        accessory={
+          group.type === 'subagent' ? (
+            <Button
+              className="text-muted-foreground/75 hover:text-foreground/90"
+              onClick={openAgents}
+              size="micro"
+              type="button"
+              variant="text"
+            >
+              {t.statusStack.agents}
+            </Button>
+          ) : undefined
+        }
+        defaultCollapsed={group.type !== 'todo'}
+        icon={
+          group.type === 'todo' ? (
+            <Codicon className="text-muted-foreground/70" name="checklist" size="0.8rem" />
+          ) : undefined
+        }
+        label={groupLabel(group, t.statusStack)}
+      >
+        {group.items.map(item => (
+          <StatusItemRow
+            item={item}
+            key={item.id}
+            onDismiss={sessionId ? id => dismissBackgroundProcess(sessionId, id) : undefined}
+            onOpen={() => openSubagent(item)}
+            onStop={sessionId ? id => stopBackgroundProcess(sessionId, id) : undefined}
+          />
+        ))}
+      </StatusSection>
+    )
+  }))
+
+  if (queue) {
+    sections.push({ key: 'queue', node: queue })
+  }
+
+  const visible = sections.length > 0
+  const stackRef = useRef<HTMLDivElement | null>(null)
+
+  // The stack is out of flow (overlays the thread), so the composer's measured
+  // height never sees it. Publish our own measured height — bucketed like the
+  // composer's, to avoid style invalidation churn — so the thread's
+  // last-message clearance can add it and the stack never hides messages.
+  useLayoutEffect(() => {
+    const root = document.documentElement
+    const el = stackRef.current
+
+    if (!visible || !el) {
+      root.style.removeProperty('--status-stack-measured-height')
+
+      return
+    }
+
+    let last = -1
+
+    const sync = () => {
+      const bucket = Math.round(el.getBoundingClientRect().height / 8) * 8
+
+      if (bucket !== last) {
+        last = bucket
+        root.style.setProperty('--status-stack-measured-height', `${bucket}px`)
+      }
+    }
+
+    const observer = new ResizeObserver(sync)
+    observer.observe(el)
+    sync()
+
+    return () => {
+      observer.disconnect()
+      root.style.removeProperty('--status-stack-measured-height')
+    }
+  }, [visible])
+
+  if (!visible) {
+    return null
+  }
+
+  return (
+    <div
+      // Sits above the composer (bottom-full), nudged down by the shell's 0.5rem
+      // top pad (pt-2 on composer-root) plus 1px so its bottom edge overlaps the
+      // composer surface's top border. z BELOW the surface (z-4) so the surface's
+      // top border paints over our transparent bottom border — one seam, no
+      // double line.
+      className="absolute inset-x-0 bottom-full z-3 max-h-[40vh] translate-y-[calc(0.5rem+1px)] overflow-y-auto"
+      onPointerDownCapture={() => blurComposerInput()}
+      ref={stackRef}
+    >
+      {/* The card paints the shared --composer-fill (rest / scrolled / focused
+          all match the composer surface by construction); on scroll we only
+          ghost the CONTENT — element opacity on the card would kill the blur.
+          Rounded top, square bottom; the bottom border is TRANSPARENT — the
+          composer surface's visible top border (which sits at a higher z) is the
+          single shared seam, so the two read as one fused capsule. */}
+      <div className={cn(composerDockCard('top'), 'mx-2 rounded-b-none border-b border-b-transparent pt-0.5 pb-1')}>
+        <div
+          className={cn(
+            'transition-opacity duration-200 ease-out',
+            scrolledUp ? 'opacity-30 group-hover/composer:opacity-100' : 'opacity-100'
+          )}
+        >
+          {sections.map(section => (
+            <div key={section.key}>{section.node}</div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/app/chat/composer/status-stack/status-row.tsx

@@ -0,0 +1,155 @@
+import { Fragment, memo, type ReactNode, useState } from 'react'
+
+import { StatusRow } from '@/components/chat/status-row'
+import { TerminalOutput } from '@/components/chat/terminal-output'
+import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
+import { DisclosureCaret } from '@/components/ui/disclosure-caret'
+import { GlyphSpinner } from '@/components/ui/glyph-spinner'
+import { Tip } from '@/components/ui/tooltip'
+import { type Translations, useI18n } from '@/i18n'
+import { ArrowUpRight, X } from '@/lib/icons'
+import type { TodoStatus } from '@/lib/todos'
+import { cn } from '@/lib/utils'
+import type { ComposerStatusItem } from '@/store/composer-status'
+
+const toolLabel = (name: string) =>
+  name
+    .split('_')
+    .filter(Boolean)
+    .map(part => part[0]!.toUpperCase() + part.slice(1))
+    .join(' ') || name
+
+// Todo rows speak checkbox, not spinner-and-dot: a dashed ring while the item
+// is still open (pending), codicons once it resolves, a live spinner only on
+// the in-progress item.
+const TODO_GLYPHS: Record<Exclude<TodoStatus, 'in_progress' | 'pending'>, { icon: string; tone: string }> = {
+  cancelled: { icon: 'circle-slash', tone: 'text-muted-foreground/45' },
+  completed: { icon: 'pass-filled', tone: 'text-emerald-500/80' }
+}
+
+// Left slot: braille spinner while running, otherwise a small status dot
+// (green = done, red = failed) so the slot is always filled and rows align.
+function leadingGlyph(item: ComposerStatusItem, s: Translations['statusStack']): ReactNode {
+  if (item.todoStatus === 'pending') {
+    return (
+      <span
+        aria-hidden
+        className="box-border size-[0.7rem] rounded-full border border-dashed border-muted-foreground/60"
+      />
+    )
+  }
+
+  if (item.todoStatus && item.todoStatus !== 'in_progress') {
+    const glyph = TODO_GLYPHS[item.todoStatus]
+
+    return <Codicon className={glyph.tone} name={glyph.icon} size="0.8rem" />
+  }
+
+  if (item.state === 'running') {
+    return (
+      <GlyphSpinner
+        ariaLabel={s.running}
+        className="text-[0.9rem] leading-none text-muted-foreground/80"
+        spinner="braille"
+      />
+    )
+  }
+
+  return (
+    <span
+      aria-hidden
+      className={cn('size-1.5 rounded-full', item.state === 'failed' ? 'bg-destructive/80' : 'bg-emerald-500/70')}
+    />
+  )
+}
+
+interface StatusItemRowProps {
+  item: ComposerStatusItem
+  /** Clear a finished background task from the stack. */
+  onDismiss?: (id: string) => void
+  /** Open the subagent's own session window, livestreamed by the gateway's
+   *  child-session mirror (Agents view fallback for older gateways). */
+  onOpen?: () => void
+  /** Cancel a running background task. */
+  onStop?: (id: string) => void
+}
+
+/**
+ * Renders one {@link ComposerStatusItem} into the shared {@link StatusRow}.
+ * Memoised + keyed by id so parent re-renders never remount it (the spinner
+ * keeps ticking instead of resetting).
+ */
+export const StatusItemRow = memo(function StatusItemRow({ item, onDismiss, onOpen, onStop }: StatusItemRowProps) {
+  const { t } = useI18n()
+  const s = t.statusStack
+  const [outputOpen, setOutputOpen] = useState(false)
+  const failed = item.state === 'failed'
+  const running = item.state === 'running'
+
+  const action =
+    item.type === 'background'
+      ? running
+        ? onStop && { label: s.stop, onClick: () => onStop(item.id) }
+        : onDismiss && { label: s.dismiss, onClick: () => onDismiss(item.id) }
+      : null
+
+  const canOpen = item.type === 'subagent' && !!onOpen
+  const hasOutput = item.type === 'background' && !!item.output
+  const onActivate = canOpen ? onOpen : hasOutput ? () => setOutputOpen(open => !open) : undefined
+
+  return (
+    <Fragment>
+      <StatusRow
+        leading={leadingGlyph(item, s)}
+        onActivate={onActivate}
+        trailing={
+          action ? (
+            <Tip label={action.label}>
+              <Button
+                aria-label={action.label}
+                className="-my-1 size-4 rounded-md text-muted-foreground/60 hover:text-foreground/90"
+                onClick={event => {
+                  event.stopPropagation()
+                  action.onClick()
+                }}
+                size="icon-xs"
+                type="button"
+                variant="ghost"
+              >
+                <X size={12} />
+              </Button>
+            </Tip>
+          ) : canOpen ? (
+            <ArrowUpRight aria-hidden className="size-3.5 text-muted-foreground/55" />
+          ) : undefined
+        }
+      >
+        <span
+          className={cn(
+            'min-w-0 max-w-[18rem] truncate text-[0.73rem] leading-4',
+            failed
+              ? 'text-destructive/90'
+              : item.todoStatus && item.todoStatus !== 'in_progress'
+                ? 'text-muted-foreground/75'
+                : 'text-foreground/92'
+          )}
+        >
+          {item.title}
+        </span>
+        {item.type === 'subagent' && item.currentTool && (
+          <span className="shrink-0 truncate text-[0.62rem] leading-4 text-muted-foreground/70">
+            {toolLabel(item.currentTool)}
+          </span>
+        )}
+        {failed && typeof item.exitCode === 'number' && item.exitCode !== 0 && (
+          <span className="shrink-0 rounded bg-destructive/15 px-1 text-[0.58rem] font-semibold text-destructive tabular-nums">
+            {s.exit(item.exitCode)}
+          </span>
+        )}
+        {hasOutput && <DisclosureCaret className="shrink-0 text-muted-foreground/45" open={outputOpen} size="0.8em" />}
+      </StatusRow>
+      {hasOutput && outputOpen && <TerminalOutput className="mx-auto mb-1 max-w-[90%]" text={item.output!} />}
+    </Fragment>
+  )
+})

package/src/app/chat/composer/text-utils.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, it } from 'vitest'
+
+import { blobDedupeKey, detectTrigger, extractClipboardImageBlobs } from './text-utils'
+
+describe('detectTrigger', () => {
+  it('detects a bare slash trigger with an empty query', () => {
+    expect(detectTrigger('/')).toEqual({ kind: '/', query: '', tokenLength: 1 })
+  })
+
+  it('detects a slash command query', () => {
+    expect(detectTrigger('/skill')).toEqual({ kind: '/', query: 'skill', tokenLength: 6 })
+  })
+
+  it('detects a bare at-mention trigger with an empty query', () => {
+    expect(detectTrigger('@')).toEqual({ kind: '@', query: '', tokenLength: 1 })
+  })
+
+  it('detects an at-mention query', () => {
+    expect(detectTrigger('@file')).toEqual({ kind: '@', query: 'file', tokenLength: 5 })
+  })
+
+  it('returns null for plain text', () => {
+    expect(detectTrigger('hello there')).toBeNull()
+  })
+})
+
+describe('extractClipboardImageBlobs', () => {
+  it('dedupes the same image exposed on both items and files', () => {
+    const image = new File([new Uint8Array([1, 2, 3])], 'paste.png', {
+      type: 'image/png',
+      lastModified: 1_700_000_000_000
+    })
+
+    const clipboard = {
+      files: {
+        length: 1,
+        item: (index: number) => (index === 0 ? image : null)
+      },
+      getData: () => '',
+      items: [
+        {
+          kind: 'file',
+          type: 'image/png',
+          getAsFile: () => image
+        }
+      ]
+    } as unknown as DataTransfer
+
+    expect(extractClipboardImageBlobs(clipboard)).toEqual([image])
+  })
+
+  it('falls back to files when items has no image', () => {
+    const image = new File([new Uint8Array([4, 5])], 'shot.jpg', {
+      type: 'image/jpeg',
+      lastModified: 1_700_000_000_001
+    })
+
+    const clipboard = {
+      files: {
+        length: 1,
+        item: (index: number) => (index === 0 ? image : null)
+      },
+      getData: () => '',
+      items: []
+    } as unknown as DataTransfer
+
+    expect(extractClipboardImageBlobs(clipboard)).toEqual([image])
+  })
+})
+
+describe('blobDedupeKey', () => {
+  it('uses file metadata for File blobs', () => {
+    const file = new File([], 'a.png', { type: 'image/png', lastModified: 42 })
+
+    expect(blobDedupeKey(file)).toBe('file:a.png:0:image/png:42')
+  })
+})