nastechai-desktop 18.1.0

package/src/components/chat/activity-timer.ts

@@ -0,0 +1,64 @@
+import { useEffect, useRef, useState } from 'react'
+
+// Module-level registry so timers survive component unmount/remount (e.g.
+// when a tool row scrolls out and back). Keyed by caller-supplied timerKey;
+// anonymous timers (no key) start fresh each mount.
+const startedAtByKey = new Map<string, number>()
+
+function startedAt(key?: string): number {
+  if (!key) {
+    return Date.now()
+  }
+
+  const existing = startedAtByKey.get(key)
+
+  if (existing !== undefined) {
+    return existing
+  }
+
+  const now = Date.now()
+  startedAtByKey.set(key, now)
+
+  return now
+}
+
+export function formatElapsed(seconds: number): string {
+  if (seconds < 60) {
+    return `${seconds}s`
+  }
+
+  return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`
+}
+
+export function useElapsedSeconds(active = true, timerKey?: string): number {
+  const start = useRef(startedAt(timerKey))
+  const lastKey = useRef(timerKey)
+  const [elapsed, setElapsed] = useState(() => Math.max(0, Math.floor((Date.now() - start.current) / 1000)))
+
+  if (lastKey.current !== timerKey) {
+    start.current = startedAt(timerKey)
+    lastKey.current = timerKey
+  }
+
+  useEffect(() => {
+    if (!active) {
+      return
+    }
+
+    if (timerKey) {
+      start.current = startedAt(timerKey)
+    }
+
+    const tick = () => setElapsed(Math.max(0, Math.floor((Date.now() - start.current) / 1000)))
+    tick()
+    const id = window.setInterval(tick, 1000)
+
+    return () => window.clearInterval(id)
+  }, [active, timerKey])
+
+  return elapsed
+}
+
+export function __resetElapsedTimerRegistryForTests() {
+  startedAtByKey.clear()
+}

package/src/components/chat/code-card.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react'
+
+import { Codicon, type CodiconProps } from '@/components/ui/codicon'
+import { cn } from '@/lib/utils'
+
+/**
+ * Rounded-card shell for fenced code (and any equivalent: diffs, raw payloads,
+ * etc.) sized for the conversation column. Mirrors the expanded tool-row
+ * pattern so code blocks read as the same family of artifact.
+ */
+function CodeCard({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn(
+        'min-w-0 max-w-full overflow-hidden rounded-[0.625rem] border border-border text-[length:var(--conversation-tool-font-size)] text-muted-foreground',
+        className
+      )}
+      data-slot="code-card"
+      {...props}
+    />
+  )
+}
+
+function CodeCardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('flex items-center justify-between gap-2 border-b border-border px-2 py-1.5', className)}
+      data-slot="code-card-header"
+      {...props}
+    />
+  )
+}
+
+function CodeCardTitle({ className, children, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn(
+        'flex min-w-0 items-center gap-1.5 truncate text-[length:var(--conversation-tool-font-size)] font-medium leading-(--conversation-line-height) text-foreground/80',
+        className
+      )}
+      data-slot="code-card-title"
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}
+
+function CodeCardIcon({ className, ...props }: CodiconProps) {
+  return (
+    <Codicon
+      className={cn('shrink-0 text-[0.875rem] leading-none text-muted-foreground', className)}
+      data-slot="code-card-icon"
+      {...props}
+    />
+  )
+}
+
+function CodeCardSubtitle({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span className={cn('font-normal text-muted-foreground', className)} data-slot="code-card-subtitle" {...props} />
+  )
+}
+
+function CodeCardBody({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn(
+        'p-1.5 font-mono text-[0.7rem] leading-relaxed text-foreground/90 [&_pre]:m-0 [&_pre]:overflow-x-auto [&_pre]:bg-transparent! [&_pre]:px-2 [&_pre]:py-1.5 [&_pre]:font-mono [&_pre]:leading-relaxed',
+        className
+      )}
+      data-slot="code-card-body"
+      {...props}
+    />
+  )
+}
+
+export { CodeCard, CodeCardBody, CodeCardHeader, CodeCardIcon, CodeCardSubtitle, CodeCardTitle }

package/src/components/chat/compact-markdown.tsx

@@ -0,0 +1,113 @@
+import type { ComponentProps, ElementType, FC } from 'react'
+import { Streamdown } from 'streamdown'
+
+import { ExternalLink, ExternalLinkIcon } from '@/lib/external-link'
+import { cn } from '@/lib/utils'
+
+// Compact markdown renderer for tool detail bodies. Same Streamdown pipeline
+// as the file preview pane, with tighter typography and external-link routing
+// so tools that emit markdown (tables, headings, links) render properly
+// instead of being dumped as raw text.
+
+const TAG_CLASSES = {
+  blockquote: 'mt-2 mb-2 border-l-2 border-border/70 pl-2.5 italic text-muted-foreground/85',
+  h1: 'mt-3 mb-1.5 text-sm font-semibold tracking-tight text-foreground first:mt-0',
+  h2: 'mt-3 mb-1.5 text-[0.82rem] font-semibold tracking-tight text-foreground first:mt-0',
+  h3: 'mt-2.5 mb-1 text-[0.78rem] font-semibold text-foreground first:mt-0',
+  h4: 'mt-2 mb-1 text-[0.74rem] font-semibold text-foreground first:mt-0',
+  hr: 'my-2 border-border/50',
+  li: 'marker:text-muted-foreground/60',
+  ol: 'mb-2 list-decimal pl-5 last:mb-0',
+  p: 'mb-1.5 leading-relaxed last:mb-0',
+  pre: 'mb-2 overflow-x-auto rounded-md border border-border/60 bg-background/70 p-2 font-mono text-[0.7rem] leading-[1.55] last:mb-0',
+  td: 'px-2 py-1 align-top leading-snug',
+  th: 'px-2 py-1 text-left text-[0.62rem] font-semibold uppercase tracking-[0.08em] text-muted-foreground/80',
+  thead: 'bg-muted/40',
+  ul: 'mb-2 list-disc pl-5 last:mb-0'
+} as const
+
+function tagged<T extends keyof typeof TAG_CLASSES>(Tag: T) {
+  const Component = (({ className, ...rest }: ComponentProps<T>) => {
+    const Element = Tag as ElementType
+
+    return <Element className={cn(TAG_CLASSES[Tag], className)} {...rest} />
+  }) as FC<ComponentProps<T>>
+
+  Component.displayName = `Md.${Tag}`
+
+  return Component
+}
+
+function MarkdownAnchor({ children, className, href, ...rest }: ComponentProps<'a'>) {
+  if (!href || !/^https?:\/\//i.test(href)) {
+    return (
+      <a
+        className={cn('font-medium underline underline-offset-4 decoration-current/20', className)}
+        href={href}
+        {...rest}
+      >
+        {children}
+      </a>
+    )
+  }
+
+  return (
+    <ExternalLink className={cn('decoration-current/20', className)} href={href} showExternalIcon={false}>
+      {children}
+      <ExternalLinkIcon />
+    </ExternalLink>
+  )
+}
+
+function MarkdownCode({ className, ...rest }: ComponentProps<'code'>) {
+  return (
+    <code
+      className={cn('rounded bg-muted/80 px-1 py-px font-mono text-[0.86em] text-muted-foreground', className)}
+      {...rest}
+    />
+  )
+}
+
+function MarkdownTable({ className, ...rest }: ComponentProps<'table'>) {
+  return (
+    <div className="mb-2 max-w-full overflow-x-auto rounded-md border border-border/60 last:mb-0">
+      <table
+        className={cn(
+          'w-full border-collapse text-[0.72rem] [&_tr]:border-b [&_tr]:border-border/50 last:[&_tr]:border-0',
+          className
+        )}
+        {...rest}
+      />
+    </div>
+  )
+}
+
+const COMPONENTS = {
+  a: MarkdownAnchor,
+  blockquote: tagged('blockquote'),
+  code: MarkdownCode,
+  h1: tagged('h1'),
+  h2: tagged('h2'),
+  h3: tagged('h3'),
+  h4: tagged('h4'),
+  hr: tagged('hr'),
+  li: tagged('li'),
+  ol: tagged('ol'),
+  p: tagged('p'),
+  pre: tagged('pre'),
+  table: MarkdownTable,
+  td: tagged('td'),
+  th: tagged('th'),
+  thead: tagged('thead'),
+  ul: tagged('ul')
+}
+
+export function CompactMarkdown({ className, text }: { className?: string; text: string }) {
+  return (
+    <div className={cn('max-w-full text-xs leading-relaxed text-muted-foreground/90 wrap-anywhere', className)}>
+      <Streamdown components={COMPONENTS} controls={false} mode="static" parseIncompleteMarkdown={false}>
+        {text}
+      </Streamdown>
+    </div>
+  )
+}

package/src/components/chat/composer-dock.ts

@@ -0,0 +1,31 @@
+import { cn } from '@/lib/utils'
+
+/**
+ * The composer surface and everything docked to it (slash·@ popover, `?` help)
+ * paint ONE shared `--composer-fill` var. The state ladder (rest / scrolled /
+ * focused / drawer-open) lives in styles.css on `[data-slot='composer-root']`,
+ * so the two layers can never disagree — drawer-open forces an opaque fill via
+ * `:has()`, because translucent glass sampling different backdrops (thread vs
+ * fade gradient) renders as different colors even with identical tints.
+ */
+export const composerFill = 'bg-(--composer-fill)'
+
+/** Backdrop treatment for the composer input surface. Harmless when the fill
+ *  goes opaque (drawer open) — nothing shows through to blur. */
+export const composerSurfaceGlass = cn(
+  'backdrop-blur-[0.75rem] backdrop-saturate-[1.12] [-webkit-backdrop-filter:blur(0.75rem)_saturate(1.12)]',
+  'transition-[background-color] duration-150 ease-out'
+)
+
+const composerDockEdge = (edge: 'bottom' | 'top') =>
+  cn('border border-border/65', edge === 'top' ? 'rounded-t-2xl border-b-0' : 'rounded-b-2xl border-t-0')
+
+/** Glassy docked card — the status stack / queue. Paints the SAME
+ *  `--composer-fill` as the surface, so rest / scrolled / focused / drawer-open
+ *  all match the composer by construction. */
+export const composerDockCard = (edge: 'bottom' | 'top' = 'top') =>
+  cn(composerDockEdge(edge), composerFill, composerSurfaceGlass)
+
+/** Fused docked card — completion drawers. Shares `--composer-fill` with the
+ *  composer surface, which goes opaque while a drawer is open. */
+export const composerFusedDockCard = (edge: 'bottom' | 'top' = 'top') => cn(composerDockEdge(edge), composerFill)

package/src/components/chat/diff-lines.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+/**
+ * Per-line classed renderer for unified diffs. Lives outside `CodeCard` so
+ * tool-result panels (already nested inside a tool card) don't double-shell;
+ * for markdown ` ```diff ` fences the standard `CodeCard` + Shiki path runs
+ * instead and gives equivalent coloring.
+ */
+interface DiffLineKind {
+  className?: string
+  match: (line: string) => boolean
+}
+
+const DIFF_LINE_KINDS: DiffLineKind[] = [
+  {
+    className: 'text-emerald-700 dark:text-emerald-300',
+    match: line => line.startsWith('+') && !line.startsWith('+++')
+  },
+  { className: 'text-rose-700 dark:text-rose-300', match: line => line.startsWith('-') && !line.startsWith('---') },
+  { className: 'text-sky-700 dark:text-sky-300', match: line => line.startsWith('@@') },
+  {
+    className: 'text-muted-foreground/70',
+    match: line => line.startsWith('---') || line.startsWith('+++') || / → /.test(line.slice(0, 60))
+  }
+]
+
+function classifyLine(line: string): string | undefined {
+  return DIFF_LINE_KINDS.find(kind => kind.match(line))?.className
+}
+
+interface DiffLinesProps extends Omit<React.ComponentProps<'pre'>, 'children'> {
+  text: string
+}
+
+export function DiffLines({ className, text, ...props }: DiffLinesProps) {
+  return (
+    <pre
+      className={cn(
+        'mt-1 mb-1.5 max-h-96 max-w-full min-w-0 overflow-auto rounded-md border border-border/60 bg-muted/35 px-2.5 py-1.5 font-mono text-[0.7rem] leading-relaxed text-muted-foreground',
+        className
+      )}
+      data-slot="diff-lines"
+      {...props}
+    >
+      {text.split('\n').map((line, index) => (
+        <span className={cn('block min-w-max whitespace-pre', classifyLine(line))} key={`${index}-${line}`}>
+          {line || ' '}
+        </span>
+      ))}
+    </pre>
+  )
+}

package/src/components/chat/disclosure-row.tsx

@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react'
+
+import { DisclosureCaret } from '@/components/ui/disclosure-caret'
+import { cn } from '@/lib/utils'
+
+// Shared header row for any collapsible block (thinking, tool group, single
+// tool). Each parent supplies its own outer wrapper (with the data-slot CSS
+// uses to escape the message padding) and its own expanded body.
+//
+// Affordance:
+//   - No leading chevron; a caret appears to the RIGHT of the text on hover
+//     (and stays visible when the row is open).
+//   - The hover background is a tight content-shaped pill — sized to the
+//     title text, NOT the full row — and reaches just past the chevron with
+//     `-mx-1.5 px-1.5` so it reads as a soft hit-target rather than a slab
+//     stretching to the message edge.
+export function DisclosureRow({
+  children,
+  onToggle,
+  open,
+  trailing
+}: {
+  children: ReactNode
+  onToggle?: () => void
+  open: boolean
+  trailing?: ReactNode
+}) {
+  return (
+    <div className="group/disclosure-row relative flex w-full max-w-full min-w-0 text-(--ui-text-tertiary)">
+      <button
+        aria-expanded={onToggle ? open : undefined}
+        className={cn(
+          // max-w-fit so the click target hugs the title text width — no
+          // background fill, just the cursor + the affordance caret.
+          'flex min-w-0 max-w-fit items-start gap-1.5 text-left transition-colors',
+          onToggle ? 'hover:text-foreground focus-visible:text-foreground focus-visible:outline-none' : 'cursor-default'
+        )}
+        disabled={!onToggle}
+        onClick={onToggle}
+        type="button"
+      >
+        <span className="flex min-w-0 flex-col gap-0.5">{children}</span>
+        {onToggle && (
+          // Wrapper height matches the title row's actual line-height so the
+          // caret centres with the title, not the whole subtitle stack.
+          <span
+            className={cn(
+              'flex h-(--conversation-line-height) shrink-0 items-center justify-center transition-opacity duration-150',
+              open
+                ? 'opacity-80'
+                : 'opacity-0 group-hover/disclosure-row:opacity-80 group-focus-within/disclosure-row:opacity-80'
+            )}
+          >
+            <DisclosureCaret open={open} />
+          </span>
+        )}
+      </button>
+      {trailing && (
+        <span className="absolute right-1 top-0 flex h-(--conversation-line-height) items-center">{trailing}</span>
+      )}
+    </div>
+  )
+}

package/src/components/chat/generated-image-context.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { createContext, type ReactNode, useContext, useMemo, useState } from 'react'
+
+type Value = {
+  isPending: boolean
+  setPending: (pending: boolean) => void
+}
+
+const Ctx = createContext<Value | null>(null)
+
+export function GeneratedImageProvider({ children }: { children: ReactNode }) {
+  const [isPending, setPending] = useState(false)
+  const value = useMemo(() => ({ isPending, setPending }), [isPending])
+
+  return <Ctx.Provider value={value}>{children}</Ctx.Provider>
+}
+
+export const useGeneratedImageContext = () => useContext(Ctx)

package/src/components/chat/generated-image-result.tsx

@@ -0,0 +1,174 @@
+'use client'
+
+import { type FC, useEffect, useState } from 'react'
+
+import { DiffusionCanvas } from '@/components/chat/image-generation-placeholder'
+import { ImageActionButton, ImageLightbox } from '@/components/chat/zoomable-image'
+import { useImageDownload } from '@/hooks/use-image-download'
+import { useI18n } from '@/i18n'
+import { generatedImageFromResult } from '@/lib/generated-images'
+import { filePathFromMediaPath, gatewayMediaDataUrl, isRemoteGateway, mediaExternalUrl, mediaName } from '@/lib/media'
+import { cn } from '@/lib/utils'
+
+// Aspect hint from the tool args sizes the frame *before* the image loads, so
+// the placeholder and the resolved image occupy the same box — no layout shift.
+const ASPECT_HINTS: Record<string, number> = {
+  landscape: 16 / 9,
+  square: 1,
+  portrait: 9 / 16
+}
+
+function hintedRatio(aspectRatio?: string): number {
+  return ASPECT_HINTS[String(aspectRatio ?? '').toLowerCase().trim()] ?? ASPECT_HINTS.landscape
+}
+
+function isInlineSrc(path: string): boolean {
+  return /^(?:https?|data):/i.test(path)
+}
+
+async function resolveImageSrc(path: string): Promise<string> {
+  if (isInlineSrc(path)) {
+    return path
+  }
+
+  if (window.NASTECHDesktop && isRemoteGateway()) {
+    return gatewayMediaDataUrl(path)
+  }
+
+  if (!window.NASTECHDesktop?.readFileDataUrl) {
+    return mediaExternalUrl(path)
+  }
+
+  return window.NASTECHDesktop.readFileDataUrl(filePathFromMediaPath(path))
+}
+
+export const GeneratedImage: FC<{ aspectRatio?: string; result?: unknown }> = ({ aspectRatio, result }) => {
+  const { t } = useI18n()
+  const copy = t.desktop
+  const image = result === undefined ? null : generatedImageFromResult(result)
+  const pending = result === undefined
+
+  const [ratio, setRatio] = useState(() => hintedRatio(aspectRatio))
+  const [src, setSrc] = useState(() => (image && isInlineSrc(image) ? image : ''))
+  const [loaded, setLoaded] = useState(false)
+  const [canvasGone, setCanvasGone] = useState(false)
+  const [failed, setFailed] = useState(false)
+  const [lightboxOpen, setLightboxOpen] = useState(false)
+  const { download, saving } = useImageDownload(src)
+
+  useEffect(() => setRatio(hintedRatio(aspectRatio)), [aspectRatio])
+
+  // Resolve the deliverable path (local read / gateway proxy / remote URL). The
+  // <img> stays mounted under the placeholder and only fades in once it decodes,
+  // so the frame keeps its hinted size and never jumps.
+  useEffect(() => {
+    let cancelled = false
+    setFailed(false)
+    setLoaded(false)
+    setCanvasGone(false)
+    setSrc(image && isInlineSrc(image) ? image : '')
+
+    if (!image || isInlineSrc(image)) {
+      return
+    }
+
+    void resolveImageSrc(image)
+      .then(resolved => !cancelled && setSrc(resolved))
+      .catch(() => !cancelled && setFailed(true))
+
+    return () => {
+      cancelled = true
+    }
+  }, [image])
+
+  // Completed but no usable image (generation failed): the agent's prose carries
+  // the explanation, so render nothing here.
+  if (!pending && !image) {
+    return null
+  }
+
+  if (failed && image) {
+    return (
+      <a
+        className="mt-2 inline-block font-semibold text-foreground underline underline-offset-4 decoration-current/20 wrap-anywhere"
+        href="#"
+        onClick={event => {
+          event.preventDefault()
+          void window.NASTECHDesktop?.openExternal(mediaExternalUrl(image))
+        }}
+      >
+        {copy.openImage}: {mediaName(image)}
+      </a>
+    )
+  }
+
+  return (
+    <>
+      <span
+        aria-label={pending ? t.assistant.tool.renderingImage : undefined}
+        aria-live={pending ? 'polite' : undefined}
+        className="group/image relative block max-w-full overflow-hidden rounded-2xl transition-[width,height] duration-300 ease-out"
+        data-slot="aui_generated-image"
+        role={pending ? 'status' : undefined}
+        style={{
+          aspectRatio: ratio,
+          // Width is capped so the derived height (width / ratio) never exceeds
+          // --image-preview-height; the box then matches the image exactly with
+          // no letterboxing.
+          width: `min(calc(var(--image-preview-height) * ${ratio}), var(--image-preview-max-width), 100%)`
+        }}
+      >
+        {!canvasGone && (
+          <div
+            className={cn('absolute inset-0 transition-opacity duration-500 ease-out', loaded && 'opacity-0')}
+            onTransitionEnd={() => loaded && setCanvasGone(true)}
+          >
+            <DiffusionCanvas />
+          </div>
+        )}
+        {src && (
+          <button
+            className="absolute inset-0 block size-full cursor-zoom-in"
+            onClick={() => setLightboxOpen(true)}
+            title={copy.openImage}
+            type="button"
+          >
+            <img
+              alt="Generated image"
+              className={cn(
+                'absolute inset-0 size-full object-contain opacity-0 transition-opacity duration-500 ease-out',
+                loaded && 'opacity-100'
+              )}
+              draggable={false}
+              onError={() => setFailed(true)}
+              onLoad={event => {
+                const { naturalHeight, naturalWidth } = event.currentTarget
+
+                if (naturalWidth && naturalHeight) {
+                  setRatio(naturalWidth / naturalHeight)
+                }
+
+                setLoaded(true)
+              }}
+              src={src}
+            />
+          </button>
+        )}
+        {loaded && src && (
+          <ImageActionButton className="group-hover/image:opacity-100" copy={copy} onClick={download} saving={saving} />
+        )}
+      </span>
+      {src && (
+        <ImageLightbox
+          alt="Generated image"
+          copy={copy}
+          onClick={download}
+          onOpenChange={setLightboxOpen}
+          open={lightboxOpen}
+          saving={saving}
+          src={src}
+        />
+      )}
+    </>
+  )
+}