nastechai-desktop 18.1.0

package/src/components/pane-shell/pane-shell.tsx

@@ -0,0 +1,330 @@
+import { useStore } from '@nanostores/react'
+import {
+  Children,
+  type CSSProperties,
+  isValidElement,
+  type ReactElement,
+  type ReactNode,
+  type PointerEvent as ReactPointerEvent,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef
+} from 'react'
+
+import { cn } from '@/lib/utils'
+import { $paneStates, ensurePaneRegistered, setPaneWidthOverride } from '@/store/panes'
+
+import { PaneShellContext, type PaneShellContextValue, type PaneSlot } from './context'
+
+type PaneSide = 'left' | 'right'
+type WidthValue = string | number
+
+interface PaneRoleMarker {
+  __paneShellRole?: 'pane' | 'main'
+}
+
+export interface PaneProps {
+  children?: ReactNode
+  className?: string
+  defaultOpen?: boolean
+  /** Forces the pane closed (track→0, aria-hidden) without writing to the store — for transient route gates. */
+  disabled?: boolean
+  id: string
+  maxWidth?: WidthValue
+  minWidth?: WidthValue
+  resizable?: boolean
+  side: PaneSide
+  width?: WidthValue
+}
+
+export interface PaneMainProps {
+  children?: ReactNode
+  className?: string
+}
+
+export interface PaneShellProps {
+  children?: ReactNode
+  className?: string
+  style?: CSSProperties
+}
+
+interface CollectedPane {
+  defaultOpen: boolean
+  disabled: boolean
+  id: string
+  resizable: boolean
+  side: PaneSide
+  width: string
+}
+
+const DEFAULT_WIDTH = '16rem'
+const DEFAULT_RESIZE_MIN_WIDTH = 160
+
+const widthToCss = (value: WidthValue | undefined, fallback: string) =>
+  value === undefined ? fallback : typeof value === 'number' ? `${value}px` : value
+
+const remPx = () =>
+  typeof window === 'undefined'
+    ? 16
+    : Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize) || 16
+
+// Resolves PaneProps.minWidth/maxWidth (number | "Npx" | "Nrem") to pixels for drag clamping.
+function widthToPx(value: WidthValue | undefined) {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : undefined
+  }
+
+  const match = value?.trim().match(/^(-?\d*\.?\d+)(px|rem)?$/)
+
+  if (!match) {
+    return undefined
+  }
+
+  return Number.parseFloat(match[1]) * (match[2] === 'rem' ? remPx() : 1)
+}
+
+function isRole(child: unknown, role: 'pane' | 'main'): child is ReactElement {
+  return isValidElement(child) && (child.type as PaneRoleMarker)?.__paneShellRole === role
+}
+
+function collectPanes(children: ReactNode) {
+  const left: CollectedPane[] = []
+  const right: CollectedPane[] = []
+  let mainCount = 0
+
+  Children.forEach(children, child => {
+    if (isRole(child, 'main')) {
+      mainCount++
+
+      return
+    }
+
+    if (!isRole(child, 'pane')) {
+      return
+    }
+
+    const props = child.props as PaneProps
+
+    const entry: CollectedPane = {
+      defaultOpen: props.defaultOpen ?? true,
+      disabled: props.disabled ?? false,
+      id: props.id,
+      resizable: props.resizable ?? false,
+      side: props.side,
+      width: widthToCss(props.width, DEFAULT_WIDTH)
+    }
+
+    ;(props.side === 'left' ? left : right).push(entry)
+  })
+
+  return { left, mainCount, right }
+}
+
+function trackForPane(pane: CollectedPane, states: Record<string, { open: boolean; widthOverride?: number }>) {
+  const stateOpen = states[pane.id]?.open ?? pane.defaultOpen
+  const open = !pane.disabled && stateOpen
+
+  if (!open) {
+    return { open: false, track: '0px' }
+  }
+
+  const override = pane.resizable ? states[pane.id]?.widthOverride : undefined
+
+  return { open: true, track: override !== undefined ? `${override}px` : pane.width }
+}
+
+export function PaneShell({ children, className, style }: PaneShellProps) {
+  const paneStates = useStore($paneStates)
+  const { left, mainCount, right } = useMemo(() => collectPanes(children), [children])
+
+  if (import.meta.env.DEV && mainCount > 1) {
+    console.warn('[PaneShell] expected at most one <PaneMain>, got', mainCount)
+  }
+
+  const ctxValue = useMemo(() => {
+    const paneById = new Map<string, PaneSlot>()
+    const tracks: string[] = []
+    const cssVars: Record<string, string> = {}
+    let column = 1
+
+    for (const pane of left) {
+      const { open, track } = trackForPane(pane, paneStates)
+      tracks.push(track)
+      paneById.set(pane.id, { column, open, side: 'left' })
+      cssVars[`--pane-${pane.id}-width`] = track
+      column++
+    }
+
+    tracks.push('minmax(0,1fr)')
+    const mainColumn = column++
+
+    for (const pane of right) {
+      const { open, track } = trackForPane(pane, paneStates)
+      tracks.push(track)
+      paneById.set(pane.id, { column, open, side: 'right' })
+      cssVars[`--pane-${pane.id}-width`] = track
+      column++
+    }
+
+    return { cssVars, gridTemplate: tracks.join(' '), mainColumn, paneById } satisfies PaneShellContextValue & {
+      cssVars: Record<string, string>
+      gridTemplate: string
+    }
+  }, [left, paneStates, right])
+
+  const composedStyle = useMemo<CSSProperties>(
+    () => ({ ...ctxValue.cssVars, ...style, gridTemplateColumns: ctxValue.gridTemplate }),
+    [ctxValue.cssVars, ctxValue.gridTemplate, style]
+  )
+
+  return (
+    <PaneShellContext.Provider value={{ mainColumn: ctxValue.mainColumn, paneById: ctxValue.paneById }}>
+      <div className={cn('relative grid h-full min-h-0', className)} style={composedStyle}>
+        {children}
+      </div>
+    </PaneShellContext.Provider>
+  )
+}
+
+export function Pane({
+  children,
+  className,
+  defaultOpen = true,
+  disabled = false,
+  id,
+  maxWidth,
+  minWidth,
+  resizable = false
+}: PaneProps) {
+  const ctx = useContext(PaneShellContext)
+  const registered = useRef(false)
+  const paneRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (registered.current) {
+      return
+    }
+
+    registered.current = true
+    ensurePaneRegistered(id, { open: defaultOpen })
+  }, [defaultOpen, id])
+
+  const slot = ctx?.paneById.get(id)
+  const open = Boolean(slot?.open && !disabled)
+  const canResize = open && resizable
+  const lo = widthToPx(minWidth) ?? DEFAULT_RESIZE_MIN_WIDTH
+  const hi = widthToPx(maxWidth) ?? Number.POSITIVE_INFINITY
+  const side = slot?.side ?? 'left'
+
+  const startResize = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      const paneWidth = paneRef.current?.getBoundingClientRect().width ?? 0
+
+      if (!canResize || paneWidth <= 0) {
+        return
+      }
+
+      event.preventDefault()
+
+      const handle = event.currentTarget
+      const { pointerId, clientX: startX } = event
+      const dir = side === 'left' ? 1 : -1
+      const restoreCursor = document.body.style.cursor
+      const restoreSelect = document.body.style.userSelect
+
+      handle.setPointerCapture?.(pointerId)
+      document.body.style.cursor = 'col-resize'
+      document.body.style.userSelect = 'none'
+
+      const onMove = (e: PointerEvent) => {
+        const next = paneWidth + (e.clientX - startX) * dir
+        setPaneWidthOverride(id, Math.round(Math.min(hi, Math.max(lo, next))))
+      }
+
+      const cleanup = () => {
+        document.body.style.cursor = restoreCursor
+        document.body.style.userSelect = restoreSelect
+        handle.releasePointerCapture?.(pointerId)
+        window.removeEventListener('pointermove', onMove, true)
+        window.removeEventListener('pointerup', cleanup, true)
+        window.removeEventListener('pointercancel', cleanup, true)
+        window.removeEventListener('blur', cleanup)
+      }
+
+      window.addEventListener('pointermove', onMove, true)
+      window.addEventListener('pointerup', cleanup, true)
+      window.addEventListener('pointercancel', cleanup, true)
+      window.addEventListener('blur', cleanup)
+    },
+    [canResize, hi, id, lo, side]
+  )
+
+  if (!ctx) {
+    if (import.meta.env.DEV) {
+      console.warn(`[Pane:${id}] must be rendered inside <PaneShell>`)
+    }
+
+    return null
+  }
+
+  if (!slot) {
+    return null
+  }
+
+  return (
+    <div
+      aria-hidden={!open}
+      className={cn('relative row-start-1 min-w-0 overflow-hidden', !open && 'pointer-events-none', className)}
+      data-pane-id={id}
+      data-pane-open={open ? 'true' : 'false'}
+      data-pane-side={slot.side}
+      ref={paneRef}
+      style={{ gridColumn: `${slot.column} / ${slot.column + 1}` }}
+    >
+      {canResize && (
+        <div
+          aria-label={`Resize ${id}`}
+          aria-orientation="vertical"
+          className={cn(
+            'group absolute bottom-0 top-0 z-20 w-1 cursor-col-resize [-webkit-app-region:no-drag]',
+            slot.side === 'left' ? 'right-0 translate-x-1/2' : 'left-0 -translate-x-1/2'
+          )}
+          onPointerDown={startResize}
+          role="separator"
+          tabIndex={0}
+        >
+          <span className="absolute inset-y-0 left-1/2 w-(--vscode-sash-hover-size,0.25rem) -translate-x-1/2 bg-(--ui-sash-hover-border) opacity-0 transition-opacity duration-100 group-hover:opacity-100 group-focus-visible:opacity-100" />
+        </div>
+      )}
+      {children}
+    </div>
+  )
+}
+
+;(Pane as unknown as PaneRoleMarker).__paneShellRole = 'pane'
+
+export function PaneMain({ children, className }: PaneMainProps) {
+  const ctx = useContext(PaneShellContext)
+
+  if (!ctx) {
+    if (import.meta.env.DEV) {
+      console.warn('[PaneMain] must be rendered inside <PaneShell>')
+    }
+
+    return null
+  }
+
+  return (
+    <div
+      className={cn('row-start-1 flex min-h-0 min-w-0 flex-col overflow-hidden', className)}
+      data-pane-main="true"
+      style={{ gridColumn: `${ctx.mainColumn} / ${ctx.mainColumn + 1}` }}
+    >
+      {children}
+    </div>
+  )
+}
+
+;(PaneMain as unknown as PaneRoleMarker).__paneShellRole = 'main'

package/src/components/prompt-overlays.tsx

@@ -0,0 +1,234 @@
+'use client'
+
+import { useStore } from '@nanostores/react'
+import { type FormEvent, useCallback, useEffect, useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { useI18n } from '@/i18n'
+import { triggerHaptic } from '@/lib/haptics'
+import { KeyRound, Loader2, Lock } from '@/lib/icons'
+import { $gateway } from '@/store/gateway'
+import { notifyError } from '@/store/notifications'
+import { $secretRequest, $sudoRequest, clearSecretRequest, clearSudoRequest } from '@/store/prompts'
+
+// Renders the modal mid-turn prompts the gateway raises and waits on: sudo
+// password and skill secret capture. (Dangerous-command / execute_code approval
+// is rendered INLINE on the pending tool row instead — see
+// components/assistant-ui/tool-approval.tsx — so it reads like an inline "Run"
+// affordance rather than a blocking modal.) Each Python-side caller blocks the
+// agent thread until the matching `*.respond` RPC lands; without a renderer the
+// agent stalls until its timeout and the tool is BLOCKED (the bug this fixes —
+// desktop handled clarify.request but not these). Any close path (Esc, backdrop
+// click) funnels through Radix's single `onOpenChange(false)` and maps to a
+// refusal, so silence is never mistaken for consent, matching the TUI. We
+// deliberately do NOT add onEscapeKeyDown / onInteractOutside handlers — they'd
+// fire a second `*.respond` alongside onOpenChange (double-send) or block the
+// backdrop-dismiss path.
+
+function SudoDialog() {
+  const { t } = useI18n()
+  const copy = t.prompts
+  const request = useStore($sudoRequest)
+  const gateway = useStore($gateway)
+  const [password, setPassword] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+
+  useEffect(() => {
+    setPassword('')
+    setSubmitting(false)
+  }, [request?.requestId])
+
+  const send = useCallback(
+    async (value: string) => {
+      if (!request) {
+        return
+      }
+
+      if (!gateway) {
+        notifyError(new Error(copy.gatewayDisconnected), copy.sudoSendFailed)
+
+        return
+      }
+
+      setSubmitting(true)
+
+      try {
+        await gateway.request<{ status?: string }>('sudo.respond', {
+          password: value,
+          request_id: request.requestId
+        })
+        triggerHaptic('submit')
+        clearSudoRequest(request.sessionId, request.requestId)
+      } catch (error) {
+        notifyError(error, copy.sudoSendFailed)
+        setSubmitting(false)
+      }
+    },
+    [copy.gatewayDisconnected, copy.sudoSendFailed, gateway, request]
+  )
+
+  // Cancel → empty password. The backend treats an empty sudo response as a
+  // failed sudo (no command runs), so closing the dialog is a safe refusal.
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open && !submitting && request) {
+        void send('')
+      }
+    },
+    [request, send, submitting]
+  )
+
+  const onSubmit = useCallback(
+    (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault()
+      void send(password)
+    },
+    [password, send]
+  )
+
+  if (!request) {
+    return null
+  }
+
+  return (
+    <Dialog onOpenChange={onOpenChange} open>
+      <DialogContent showCloseButton={false}>
+        <DialogHeader>
+          <DialogTitle icon={Lock}>{copy.sudoTitle}</DialogTitle>
+          <DialogDescription>{copy.sudoDesc}</DialogDescription>
+        </DialogHeader>
+
+        <form className="grid gap-3" onSubmit={onSubmit}>
+          <Input
+            autoFocus
+            disabled={submitting}
+            onChange={event => setPassword(event.target.value)}
+            placeholder={copy.sudoPlaceholder}
+            type="password"
+            value={password}
+          />
+          <DialogFooter>
+            <Button disabled={submitting} onClick={() => void send('')} type="button" variant="ghost">
+              {t.common.cancel}
+            </Button>
+            <Button disabled={submitting} type="submit">
+              {submitting ? <Loader2 className="size-3.5 animate-spin" /> : t.common.send}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function SecretDialog() {
+  const { t } = useI18n()
+  const copy = t.prompts
+  const request = useStore($secretRequest)
+  const gateway = useStore($gateway)
+  const [value, setValue] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+
+  useEffect(() => {
+    setValue('')
+    setSubmitting(false)
+  }, [request?.requestId])
+
+  const send = useCallback(
+    async (secret: string) => {
+      if (!request) {
+        return
+      }
+
+      if (!gateway) {
+        notifyError(new Error(copy.gatewayDisconnected), copy.secretSendFailed)
+
+        return
+      }
+
+      setSubmitting(true)
+
+      try {
+        await gateway.request<{ status?: string }>('secret.respond', {
+          request_id: request.requestId,
+          value: secret
+        })
+        triggerHaptic('submit')
+        clearSecretRequest(request.sessionId, request.requestId)
+      } catch (error) {
+        notifyError(error, copy.secretSendFailed)
+        setSubmitting(false)
+      }
+    },
+    [copy.gatewayDisconnected, copy.secretSendFailed, gateway, request]
+  )
+
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open && !submitting && request) {
+        void send('')
+      }
+    },
+    [request, send, submitting]
+  )
+
+  const onSubmit = useCallback(
+    (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault()
+      void send(value)
+    },
+    [send, value]
+  )
+
+  if (!request) {
+    return null
+  }
+
+  return (
+    <Dialog onOpenChange={onOpenChange} open>
+      <DialogContent showCloseButton={false}>
+        <DialogHeader>
+          <DialogTitle icon={KeyRound}>{request.envVar || copy.secretTitle}</DialogTitle>
+          <DialogDescription>{request.prompt || copy.secretDesc}</DialogDescription>
+        </DialogHeader>
+
+        <form className="grid gap-3" onSubmit={onSubmit}>
+          <Input
+            autoFocus
+            disabled={submitting}
+            onChange={event => setValue(event.target.value)}
+            placeholder={request.envVar || copy.secretPlaceholder}
+            type="password"
+            value={value}
+          />
+          <DialogFooter>
+            <Button disabled={submitting} onClick={() => void send('')} type="button" variant="ghost">
+              {t.common.cancel}
+            </Button>
+            <Button disabled={submitting || !value} type="submit">
+              {submitting ? <Loader2 className="size-3.5 animate-spin" /> : t.common.send}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export function PromptOverlays() {
+  return (
+    <>
+      <SudoDialog />
+      <SecretDialog />
+    </>
+  )
+}

package/src/components/session-picker.tsx

@@ -0,0 +1,108 @@
+import { useQuery } from '@tanstack/react-query'
+import { Dialog as DialogPrimitive } from 'radix-ui'
+import { useEffect, useMemo, useState } from 'react'
+
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
+import { listAllProfileSessions } from '@/nastech'
+import { useI18n } from '@/i18n'
+import { sessionTitle } from '@/lib/chat-runtime'
+import { Check, MessageCircle } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+
+interface SessionPickerDialogProps {
+  /** Stored id of the session currently open, so it can be flagged in the list. */
+  activeStoredSessionId?: string | null
+  onOpenChange: (open: boolean) => void
+  onResume: (storedSessionId: string) => void
+  open: boolean
+}
+
+/**
+ * Desktop equivalent of the TUI's sessions overlay (`/resume`, `/sessions`,
+ * `/switch`): a focused, type-to-filter list of recent sessions that resumes
+ * the picked one. Mirrors the command palette's cmdk surface but scoped to
+ * sessions only, so `/resume` feels first-class instead of falling through to
+ * the headless slash worker (which can't render the picker).
+ */
+export function SessionPickerDialog({
+  activeStoredSessionId,
+  onOpenChange,
+  onResume,
+  open
+}: SessionPickerDialogProps) {
+  const { t } = useI18n()
+  const [search, setSearch] = useState('')
+
+  const sessionsQuery = useQuery({
+    enabled: open,
+    queryFn: () => listAllProfileSessions(200, 1, 'exclude'),
+    queryKey: ['session-picker', 'sessions']
+  })
+
+  useEffect(() => {
+    if (!open) {
+      setSearch('')
+    }
+  }, [open])
+
+  const sessions = useMemo(() => sessionsQuery.data?.sessions ?? [], [sessionsQuery.data])
+
+  return (
+    <DialogPrimitive.Root onOpenChange={onOpenChange} open={open}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fixed inset-0 z-[200] bg-black/15 backdrop-blur-[1px] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0" />
+        <DialogPrimitive.Content
+          aria-describedby={undefined}
+          className="fixed left-1/2 top-[14vh] z-[210] w-[min(40rem,calc(100vw-2rem))] -translate-x-1/2 overflow-hidden rounded-xl border border-(--ui-stroke-secondary) bg-(--ui-chat-bubble-background) shadow-lg duration-150 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-top-2 data-[state=open]:zoom-in-95"
+        >
+          <DialogPrimitive.Title className="sr-only">{t.commandCenter.sections.sessions}</DialogPrimitive.Title>
+          <Command className="bg-transparent" loop>
+            <CommandInput
+              onValueChange={setSearch}
+              placeholder={t.commandCenter.searchPlaceholder}
+              value={search}
+            />
+            <CommandList className="max-h-[min(24rem,60vh)]">
+              <CommandEmpty>{t.commandCenter.noResults}</CommandEmpty>
+              <CommandGroup
+                className="**:[[cmdk-group-heading]]:uppercase **:[[cmdk-group-heading]]:tracking-wider **:[[cmdk-group-heading]]:text-[0.6875rem] **:[[cmdk-group-heading]]:text-muted-foreground/70"
+                heading={t.commandCenter.sections.sessions}
+              >
+                {sessions.map(session => {
+                  const title = sessionTitle(session)
+                  const preview = session.preview?.trim()
+
+                  return (
+                    <CommandItem
+                      className="gap-2.5"
+                      key={session.id}
+                      onSelect={() => {
+                        onResume(session.id)
+                        onOpenChange(false)
+                      }}
+                      value={`${title} ${preview ?? ''} ${session.id}`}
+                    >
+                      <MessageCircle className="size-4 shrink-0 text-muted-foreground" />
+                      <span className="flex min-w-0 flex-col leading-snug">
+                        <span className="truncate">{title}</span>
+                        {preview ? (
+                          <span className="truncate text-xs text-muted-foreground/70">{preview}</span>
+                        ) : null}
+                      </span>
+                      <Check
+                        className={cn(
+                          'ml-auto size-4 shrink-0 text-foreground',
+                          session.id !== activeStoredSessionId && 'invisible'
+                        )}
+                      />
+                    </CommandItem>
+                  )
+                })}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  )
+}

package/src/components/status-dot.tsx

@@ -0,0 +1,26 @@
+import type { ComponentProps } from 'react'
+
+import { cn } from '@/lib/utils'
+
+export type StatusTone = 'good' | 'muted' | 'warn' | 'bad'
+
+const TONE_BG: Record<StatusTone, string> = {
+  good: 'bg-primary',
+  muted: 'bg-muted-foreground/40',
+  warn: 'bg-amber-500',
+  bad: 'bg-destructive'
+}
+
+interface StatusDotProps extends ComponentProps<'span'> {
+  tone: StatusTone
+}
+
+export function StatusDot({ className, tone, ...props }: StatusDotProps) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn('inline-block size-1.5 rounded-full', TONE_BG[tone], className)}
+      {...props}
+    />
+  )
+}