nastechai-desktop 18.1.0

package/src/components/assistant-ui/todo-tool.tsx

@@ -0,0 +1,109 @@
+import { type FC } from 'react'
+
+import { Checkbox } from '@/components/ui/checkbox'
+import { Loader2Icon } from '@/lib/icons'
+import { parseTodos, type TodoItem, type TodoStatus } from '@/lib/todos'
+import { cn } from '@/lib/utils'
+
+export function todosFromMessageContent(content: unknown): TodoItem[] {
+  if (!Array.isArray(content)) {
+    return []
+  }
+
+  let latest: null | TodoItem[] = null
+
+  for (const part of content) {
+    if (!part || typeof part !== 'object') {
+      continue
+    }
+
+    const row = part as Record<string, unknown>
+
+    if (row.type !== 'tool-call' || row.toolName !== 'todo') {
+      continue
+    }
+
+    const parsed = parseTodos(row.result) ?? parseTodos(row.args)
+
+    if (parsed !== null) {
+      latest = parsed
+    }
+  }
+
+  return latest ?? []
+}
+
+const headerLabel = (todos: readonly TodoItem[]): string =>
+  todos.find(t => t.status === 'in_progress')?.content ??
+  todos.find(t => t.status === 'pending')?.content ??
+  todos.at(-1)?.content ??
+  'Tasks'
+
+const Checkmark: FC<{ status: TodoStatus; label: string }> = ({ status, label }) => {
+  if (status === 'in_progress') {
+    return (
+      <span
+        aria-label={`In progress: ${label}`}
+        className="grid size-[1.1rem] shrink-0 place-items-center rounded-full border border-ring/65 bg-[color-mix(in_srgb,var(--dt-ring)_14%,transparent)]"
+      >
+        <Loader2Icon className="size-3 animate-spin text-ring" />
+      </span>
+    )
+  }
+
+  const checked = status === 'completed'
+
+  return (
+    <Checkbox
+      aria-label={label}
+      checked={checked}
+      className={cn(
+        'size-[1.1rem] shrink-0 rounded-full border-border/80 pointer-events-none disabled:cursor-default disabled:opacity-100',
+        checked &&
+          'data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground [&_[data-slot=checkbox-indicator]_svg]:size-3',
+        status === 'cancelled' && 'border-muted-foreground/40'
+      )}
+      disabled
+    />
+  )
+}
+
+export const HoistedTodoPanel: FC<{ todos: TodoItem[] }> = ({ todos }) => {
+  if (!todos.length) {
+    return null
+  }
+
+  const label = headerLabel(todos)
+
+  return (
+    <section
+      className="mt-1 mb-3 inline-block w-fit max-w-full overflow-hidden rounded-2xl border border-border/70 bg-card align-top shadow-[0_1px_2px_0_hsl(var(--foreground)/0.04),0_1px_4px_-1px_hsl(var(--foreground)/0.06)]"
+      data-slot="aui_todo-hoisted"
+    >
+      <header className="px-3 pt-3 pb-2">
+        <span
+          className="block max-w-full truncate text-[0.85rem] font-semibold leading-tight tracking-tight text-foreground"
+          title={label}
+        >
+          {label}
+        </span>
+      </header>
+      <ul className="grid min-w-0 gap-0.5 px-3 pb-3">
+        {todos.map(todo => (
+          <li
+            // Active row at full presence; everything else fades. Opacity on
+            // the row so the checkbox glyph dims with the text.
+            className={cn(
+              'flex min-w-0 items-center gap-3 py-1.5 transition-opacity',
+              todo.status === 'in_progress' ? 'opacity-100' : 'opacity-45'
+            )}
+            key={todo.id}
+          >
+            <Checkmark label={todo.content} status={todo.status} />
+            <span className="min-w-0 wrap-anywhere text-[0.8rem] leading-[1.2rem] text-foreground">{todo.content}</span>
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}

package/src/components/assistant-ui/tool-approval-group.test.tsx

@@ -0,0 +1,158 @@
+import { AssistantRuntimeProvider, type ThreadMessage, useExternalStoreRuntime } from '@assistant-ui/react'
+import { cleanup, render, waitFor } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { clearAllPrompts, setApprovalRequest } from '@/store/prompts'
+import { $activeSessionId } from '@/store/session'
+import { $toolDisclosureStates } from '@/store/tool-view'
+
+import { Thread } from './thread'
+
+// Regression coverage for the "approval must never be buried" bug. Tools now
+// render as a flat list (no collapsible "N steps" group), so a pending tool's
+// inline ApprovalBar is always in the visual flow — never inside a `hidden`
+// body. These assert the bar shows only when an approval is live and is never
+// trapped under a `hidden` ancestor.
+
+const createdAt = new Date('2026-06-03T00:00:00.000Z')
+
+const resizeObservers = new Set<TestResizeObserver>()
+
+class TestResizeObserver {
+  private target: Element | null = null
+
+  constructor(private readonly callback: ResizeObserverCallback) {
+    resizeObservers.add(this)
+  }
+
+  observe(target: Element) {
+    this.target = target
+  }
+
+  unobserve() {}
+
+  disconnect() {
+    resizeObservers.delete(this)
+  }
+}
+
+vi.stubGlobal('ResizeObserver', TestResizeObserver)
+vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) =>
+  window.setTimeout(() => callback(performance.now()), 0)
+)
+vi.stubGlobal('cancelAnimationFrame', (id: number) => window.clearTimeout(id))
+
+Element.prototype.scrollTo = function scrollTo() {}
+
+Element.prototype.animate = function animate() {
+  return {
+    cancel: () => {},
+    finished: Promise.resolve()
+  } as unknown as Animation
+}
+
+function stubOffsetDimension(
+  prop: 'offsetHeight' | 'offsetWidth',
+  clientProp: 'clientHeight' | 'clientWidth',
+  fallback: number
+) {
+  const previous = Object.getOwnPropertyDescriptor(HTMLElement.prototype, prop)
+
+  Object.defineProperty(HTMLElement.prototype, prop, {
+    configurable: true,
+    get() {
+      return previous?.get?.call(this) || (this as HTMLElement)[clientProp] || fallback
+    }
+  })
+}
+
+stubOffsetDimension('offsetWidth', 'clientWidth', 800)
+stubOffsetDimension('offsetHeight', 'clientHeight', 600)
+
+// A running assistant message with two tools: a completed read_file plus a
+// pending terminal (no result), rendered as a flat two-row list.
+function groupedPendingMessage(): ThreadMessage {
+  return {
+    id: 'assistant-group-1',
+    role: 'assistant',
+    content: [
+      {
+        type: 'tool-call',
+        toolCallId: 'read-1',
+        toolName: 'read_file',
+        args: { path: '/etc/hosts' },
+        argsText: JSON.stringify({ path: '/etc/hosts' }),
+        result: { content: '127.0.0.1 localhost' }
+      },
+      {
+        type: 'tool-call',
+        toolCallId: 'term-1',
+        toolName: 'terminal',
+        args: { command: 'rm -rf /tmp/x' },
+        argsText: JSON.stringify({ command: 'rm -rf /tmp/x' })
+      }
+    ],
+    status: { type: 'running' },
+    createdAt,
+    metadata: {
+      unstable_state: null,
+      unstable_annotations: [],
+      unstable_data: [],
+      steps: [],
+      custom: {}
+    }
+  } as ThreadMessage
+}
+
+function GroupHarness({ message }: { message: ThreadMessage }) {
+  const runtime = useExternalStoreRuntime<ThreadMessage>({
+    messages: [message],
+    isRunning: message.status?.type === 'running',
+    onNew: async () => {}
+  })
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <Thread />
+    </AssistantRuntimeProvider>
+  )
+}
+
+beforeEach(() => {
+  clearAllPrompts()
+  $activeSessionId.set('sess-1')
+  $toolDisclosureStates.set({})
+})
+
+afterEach(() => {
+  cleanup()
+  clearAllPrompts()
+  $activeSessionId.set(null)
+})
+
+describe('flat tool list approval surfacing', () => {
+  it('renders no inline approval bar when there is no live approval', async () => {
+    const { container } = render(<GroupHarness message={groupedPendingMessage()} />)
+
+    // The pending terminal row mounts immediately, but its inline ApprovalBar
+    // returns null while $approvalRequest is empty.
+    await waitFor(() => {
+      expect(container.querySelectorAll('[data-slot="tool-block"]').length).toBeGreaterThan(0)
+    })
+    expect(container.querySelector('[data-slot="tool-approval-inline"]')).toBeNull()
+  })
+
+  it('surfaces the approval inline and never under a hidden ancestor', async () => {
+    setApprovalRequest({ command: 'rm -rf /tmp/x', description: 'dangerous command', sessionId: 'sess-1' })
+
+    const { container } = render(<GroupHarness message={groupedPendingMessage()} />)
+
+    await waitFor(() => {
+      const bar = container.querySelector('[data-slot="tool-approval-inline"]')
+      expect(bar).not.toBeNull()
+      // Flat rows live directly in the flow — nothing should ever wrap the bar
+      // in a `hidden` subtree.
+      expect(bar?.closest('[hidden]')).toBeNull()
+    })
+  })
+})

package/src/components/assistant-ui/tool-approval.test.tsx

@@ -0,0 +1,81 @@
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import type { NasTechGateway } from '@/nastech'
+import { $gateway } from '@/store/gateway'
+import { $approvalRequest, clearAllPrompts, setApprovalRequest } from '@/store/prompts'
+import { $activeSessionId } from '@/store/session'
+
+import { PendingToolApproval } from './tool-approval'
+import type { ToolPart } from './tool-fallback-model'
+
+function part(toolName: string): ToolPart {
+  return { toolName, type: `tool-${toolName}` } as unknown as ToolPart
+}
+
+function setRequest(command = 'rm -rf /tmp/x') {
+  $activeSessionId.set('sess-1')
+  setApprovalRequest({ command, description: 'dangerous command', sessionId: 'sess-1' })
+}
+
+function mockGateway() {
+  const request = vi.fn().mockResolvedValue({ resolved: true })
+  $gateway.set({ request } as unknown as NasTechGateway)
+
+  return request
+}
+
+afterEach(() => {
+  cleanup()
+  clearAllPrompts()
+  $activeSessionId.set(null)
+  $gateway.set(null)
+})
+
+describe('PendingToolApproval', () => {
+  it('renders nothing when there is no pending approval', () => {
+    const { container } = render(<PendingToolApproval part={part('terminal')} />)
+
+    expect(container.innerHTML).toBe('')
+  })
+
+  it('renders nothing for tools that never raise approval', () => {
+    setRequest()
+    const { container } = render(<PendingToolApproval part={part('read_file')} />)
+
+    expect(container.innerHTML).toBe('')
+  })
+
+  it('renders the inline run/reject controls on the pending terminal row', () => {
+    setRequest('chmod -R 777 /tmp/x')
+    render(<PendingToolApproval part={part('terminal')} />)
+
+    expect(screen.getByRole('button', { name: /Run/ })).toBeTruthy()
+    expect(screen.getByRole('button', { name: /Reject/ })).toBeTruthy()
+  })
+
+  it('sends approval.respond {choice: "once"} and clears the request on Run', async () => {
+    const request = mockGateway()
+    setRequest()
+    render(<PendingToolApproval part={part('terminal')} />)
+
+    fireEvent.click(screen.getByRole('button', { name: /Run/ }))
+
+    await waitFor(() => {
+      expect(request).toHaveBeenCalledWith('approval.respond', { choice: 'once', session_id: 'sess-1' })
+    })
+    expect($approvalRequest.get()).toBeNull()
+  })
+
+  it('sends choice "deny" on Reject', async () => {
+    const request = mockGateway()
+    setRequest()
+    render(<PendingToolApproval part={part('terminal')} />)
+
+    fireEvent.click(screen.getByRole('button', { name: /Reject/ }))
+
+    await waitFor(() => {
+      expect(request).toHaveBeenCalledWith('approval.respond', { choice: 'deny', session_id: 'sess-1' })
+    })
+  })
+})

package/src/components/assistant-ui/tool-approval.tsx

@@ -0,0 +1,209 @@
+'use client'
+
+import { useStore } from '@nanostores/react'
+import { type FC, useCallback, useEffect, useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { useI18n } from '@/i18n'
+import { triggerHaptic } from '@/lib/haptics'
+import { ChevronDown, Loader2 } from '@/lib/icons'
+import { $gateway } from '@/store/gateway'
+import { notifyError } from '@/store/notifications'
+import { $approvalRequest, type ApprovalRequest, clearApprovalRequest } from '@/store/prompts'
+
+import type { ToolPart } from './tool-fallback-model'
+
+// Inline approval control. Rendered as a compact button strip
+// under the pending tool row that raised the approval (the row already shows
+// the command, so the strip deliberately doesn't repeat it) instead of as a
+// modal overlay.
+//
+// Binding is POSITIONAL, not command-matched: the desktop `tool.start` payload
+// carries no structured args (only tool_id/name/context — see
+// tui_gateway/server.py::_on_tool_start), so we cannot join the approval to the
+// row by command string. But `approval.request` only ever fires from the
+// `terminal` / `execute_code` guards and the agent thread blocks on exactly one
+// approval at a time, so the single pending row of those tools IS the row that
+// raised it. The command/description text comes from `$approvalRequest` (the
+// event payload), which is the only place that data reliably exists.
+export const APPROVAL_TOOLS = new Set(['terminal', 'execute_code'])
+
+// Canonical gateway choices (ui-tui/src/components/prompts.tsx).
+type ApprovalChoice = 'once' | 'session' | 'always' | 'deny'
+
+export const PendingToolApproval: FC<{ part: ToolPart }> = ({ part }) => {
+  const request = useStore($approvalRequest)
+
+  if (!request || !APPROVAL_TOOLS.has(part.toolName)) {
+    return null
+  }
+
+  return <ApprovalBar request={request} />
+}
+
+const isMac = typeof navigator !== 'undefined' && /Mac|iP(hone|ad|od)/.test(navigator.platform)
+
+const ApprovalBar: FC<{ request: ApprovalRequest }> = ({ request }) => {
+  const { t } = useI18n()
+  const copy = t.assistant.approval
+  const gateway = useStore($gateway)
+  const [submitting, setSubmitting] = useState<ApprovalChoice | null>(null)
+  // "Always allow" persists the pattern to ~/.NASTECH/config.yaml permanently, so
+  // it goes through a confirm step rather than firing straight from the menu.
+  const [confirmAlways, setConfirmAlways] = useState(false)
+  const busy = submitting !== null
+
+  const respond = useCallback(
+    async (choice: ApprovalChoice) => {
+      // Another bar (or the keyboard path) may have already resolved this
+      // approval; the atom is the single source of truth, so bail if it's gone.
+      if (busy || !$approvalRequest.get()) {
+        return
+      }
+
+      if (!gateway) {
+        notifyError(new Error(copy.gatewayDisconnected), copy.sendFailed)
+
+        return
+      }
+
+      setSubmitting(choice)
+
+      try {
+        await gateway.request<{ resolved?: boolean }>('approval.respond', {
+          choice,
+          session_id: request.sessionId ?? undefined
+        })
+        triggerHaptic(choice === 'deny' ? 'cancel' : 'submit')
+        clearApprovalRequest(request.sessionId)
+      } catch (error) {
+        notifyError(error, copy.sendFailed)
+        setSubmitting(null)
+      }
+    },
+    [busy, gateway, request.sessionId]
+  )
+
+  // ⌘/Ctrl+Enter → Run, Esc → Reject.
+  // While the confirm dialog is open it owns the keyboard (Esc closes it), so
+  // the strip-level shortcuts stand down to avoid denying the whole approval.
+  useEffect(() => {
+    if (confirmAlways) {
+      return
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault()
+        void respond('once')
+      } else if (event.key === 'Escape') {
+        event.preventDefault()
+        void respond('deny')
+      }
+    }
+
+    window.addEventListener('keydown', onKeyDown, true)
+
+    return () => window.removeEventListener('keydown', onKeyDown, true)
+  }, [confirmAlways, respond])
+
+  return (
+    <div className="mt-1 flex items-center gap-2.5 ps-5" data-slot="tool-approval-inline">
+      <div className="inline-flex h-6 items-stretch overflow-hidden rounded-md border border-primary/25 bg-primary/10 text-primary">
+        <Button
+          className="h-full gap-1 rounded-none px-2 text-xs font-medium text-primary hover:bg-primary/15 hover:text-primary"
+          disabled={busy}
+          onClick={() => void respond('once')}
+          size="xs"
+          variant="ghost"
+        >
+          {submitting === 'once' ? <Loader2 className="size-3 animate-spin" /> : copy.run}
+          {submitting !== 'once' && <span className="text-[0.625rem] text-primary/60">{isMac ? '⌘⏎' : 'Ctrl⏎'}</span>}
+        </Button>
+        <span aria-hidden className="w-px self-stretch bg-primary/20" />
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              aria-label={copy.moreOptions}
+              className="h-full w-5 rounded-none px-0 text-primary hover:bg-primary/15 hover:text-primary"
+              disabled={busy}
+              size="xs"
+              variant="ghost"
+            >
+              <ChevronDown className="size-3" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="min-w-44">
+            <DropdownMenuItem onSelect={() => void respond('session')}>{copy.allowSession}</DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={() => {
+                // Defer one tick so the menu fully unmounts before the dialog
+                // mounts — otherwise Radix's focus-return races the dialog and
+                // dismisses it via onInteractOutside.
+                setTimeout(() => setConfirmAlways(true), 0)
+              }}
+            >
+              {copy.alwaysAllowMenu}
+            </DropdownMenuItem>
+            <DropdownMenuItem onSelect={() => void respond('deny')} variant="destructive">
+              {copy.reject}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <Button
+        className="h-6 gap-1.5 rounded-md px-1.5 text-xs font-normal text-(--ui-text-tertiary) hover:text-foreground"
+        disabled={busy}
+        onClick={() => void respond('deny')}
+        size="xs"
+        variant="ghost"
+      >
+        {submitting === 'deny' ? <Loader2 className="size-3 animate-spin" /> : copy.reject}
+        {submitting !== 'deny' && <span className="text-[0.625rem] opacity-55">Esc</span>}
+      </Button>
+
+      <Dialog onOpenChange={setConfirmAlways} open={confirmAlways}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{copy.alwaysTitle}</DialogTitle>
+            <DialogDescription>
+              {copy.alwaysDescription(request.description)}
+            </DialogDescription>
+          </DialogHeader>
+
+          {request.command.trim() && (
+            <pre className="max-h-32 overflow-auto whitespace-pre-wrap break-words rounded-md border border-(--ui-stroke-tertiary) bg-(--ui-chat-surface-background) px-2.5 py-1.5 font-mono text-xs leading-snug text-foreground">
+              {request.command.trim()}
+            </pre>
+          )}
+
+          <DialogFooter>
+            <Button onClick={() => setConfirmAlways(false)} size="sm" variant="ghost">
+              {t.common.cancel}
+            </Button>
+            <Button
+              onClick={() => {
+                setConfirmAlways(false)
+                void respond('always')
+              }}
+              size="sm"
+              variant="destructive"
+            >
+              {copy.alwaysAllow}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

package/src/components/assistant-ui/tool-fallback-model.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest'
+
+import { buildToolView, type ToolPart } from './tool-fallback-model'
+
+const part = (overrides: Partial<ToolPart>): ToolPart => ({
+  args: {},
+  isError: false,
+  result: {},
+  toolCallId: 'call_1',
+  toolName: 'vision_analyze',
+  type: 'tool-call',
+  ...overrides
+})
+
+describe('buildToolView image handling', () => {
+  // vision_analyze reports the input image as a local path; an <img> pointed at
+  // a bare path resolves against the renderer origin and 404s, so we render the
+  // tool codicon instead of a broken image.
+  it('drops bare filesystem paths', () => {
+    expect(buildToolView(part({ args: { path: '/Users/me/shot.png' } }), '').imageUrl).toBe('')
+    expect(buildToolView(part({ result: { image_path: '/tmp/out.jpg' } }), '').imageUrl).toBe('')
+  })
+
+  it('keeps fetchable data URLs', () => {
+    const dataUrl = 'data:image/png;base64,AAAA'
+
+    expect(buildToolView(part({ result: { image_url: dataUrl } }), '').imageUrl).toBe(dataUrl)
+  })
+
+  it('keeps remote http(s) image URLs', () => {
+    const url = 'https://example.com/pic.webp'
+
+    expect(buildToolView(part({ result: { url } }), '').imageUrl).toBe(url)
+  })
+})
+
+describe('buildToolView terminal exit-code status', () => {
+  const terminal = (result: Record<string, unknown>) =>
+    buildToolView(part({ result, toolName: 'terminal' }), '')
+
+  // A non-zero exit code with real output is not a failure (grep no-match,
+  // diff differences, piped commands surfacing the last stage's code, etc.) —
+  // it should render as success so the card isn't painted red.
+  it('treats non-zero exit with output as success', () => {
+    expect(terminal({ exit_code: 7, output: 'node ... 5174 (LISTEN)' }).status).toBe('success')
+    expect(terminal({ exit_code: 1, stdout: 'partial results' }).status).toBe('success')
+  })
+
+  // No output + non-zero exit is a genuine failure worth flagging.
+  it('treats non-zero exit with no output as error', () => {
+    expect(terminal({ exit_code: 127, output: '' }).status).toBe('error')
+    expect(terminal({ exit_code: 1 }).status).toBe('error')
+  })
+
+  it('treats zero exit as success', () => {
+    expect(terminal({ exit_code: 0, output: 'done' }).status).toBe('success')
+  })
+
+  // Explicit error signals still win regardless of output presence.
+  it('keeps explicit error signals red even with output', () => {
+    expect(terminal({ error: 'boom', exit_code: 0, output: 'partial' }).status).toBe('error')
+    expect(buildToolView(part({ isError: true, result: { output: 'x' }, toolName: 'terminal' }), '').status).toBe(
+      'error'
+    )
+  })
+})