nastechai-desktop 18.1.0

package/src/components/chat/shiki-highlighter.tsx

@@ -0,0 +1,107 @@
+'use client'
+
+import type { SyntaxHighlighterProps } from '@assistant-ui/react-streamdown'
+import type { FC } from 'react'
+import ShikiHighlighter from 'react-shiki'
+
+import {
+  CodeCard,
+  CodeCardBody,
+  CodeCardHeader,
+  CodeCardIcon,
+  CodeCardSubtitle,
+  CodeCardTitle
+} from '@/components/chat/code-card'
+import { CopyButton } from '@/components/ui/copy-button'
+import { useI18n } from '@/i18n'
+import { codiconForLanguage, isLikelyProseCodeBlock, sanitizeLanguageTag } from '@/lib/markdown-code'
+
+/**
+ * Streamdown's code adapter renders header + body as inline siblings, so we
+ * own the wrapping `<CodeCard>` here and neutralize the upstream
+ * `data-streamdown="code-block"` chrome from styles.css. Anything that wants
+ * a card-shaped code surface should compose `CodeCard*` directly.
+ *
+ * `react-shiki` full bundle so all `bundledLanguages` work; theme switches
+ * follow the document `color-scheme` via `defaultColor="light-dark()"`.
+ */
+interface NasTechSyntaxHighlighterProps extends SyntaxHighlighterProps {
+  defer?: boolean
+}
+
+const SHIKI_THEME = { dark: 'github-dark-default', light: 'github-light-default' } as const
+
+/**
+ * `github-light-default` colors comments `#6e7781` (~4.2:1 against the code
+ * card background) — borderline unreadable at our 11px code size, and worst of
+ * all for shell snippets where a single `#` turns the rest of the line into one
+ * long comment span. Remap light-mode comments to GitHub's darker muted gray
+ * (`#57606a`, ~6.4:1). Dark mode (`#8b949e`, ~6.1:1) already reads fine, so we
+ * leave it untouched. Keyed per theme name so the bump only applies in light.
+ */
+const SHIKI_COLOR_REPLACEMENTS: Record<string, Record<string, string>> = {
+  'github-light-default': { '#6e7781': '#57606a' }
+}
+
+export const SyntaxHighlighter: FC<NasTechSyntaxHighlighterProps> = ({
+  components: { Pre },
+  language,
+  code,
+  defer = false
+}) => {
+  const { t } = useI18n()
+  const trimmed = (code ?? '').replace(/^\n+/, '').trimEnd()
+
+  // Streaming may hand us empty/incomplete fences — render nothing rather
+  // than a transient empty card.
+  if (!trimmed.trim()) {
+    return null
+  }
+
+  if (isLikelyProseCodeBlock(language, trimmed)) {
+    return <div className="aui-prose-fence whitespace-pre-wrap wrap-anywhere text-foreground">{trimmed}</div>
+  }
+
+  const cleanLanguage = sanitizeLanguageTag(language || '')
+  const label = cleanLanguage && cleanLanguage !== 'unknown' ? cleanLanguage : ''
+
+  return (
+    <CodeCard data-streaming={defer ? 'true' : undefined}>
+      <CodeCardHeader>
+        <CodeCardTitle>
+          <CodeCardIcon name={codiconForLanguage(label)} />
+          {t.assistant.tool.code}
+          {label && <CodeCardSubtitle> · {label}</CodeCardSubtitle>}
+        </CodeCardTitle>
+        <CopyButton
+          appearance="inline"
+          className="-my-1 -mr-1 h-5 px-1 opacity-55 hover:opacity-100"
+          iconClassName="size-2.5"
+          label={t.assistant.tool.copyCode}
+          showLabel={false}
+          text={trimmed}
+        />
+      </CodeCardHeader>
+      <CodeCardBody>
+        <Pre className="aui-shiki m-0 overflow-hidden bg-transparent p-0">
+          {defer ? (
+            <code className="block whitespace-pre">{trimmed}</code>
+          ) : (
+            <ShikiHighlighter
+              addDefaultStyles={false}
+              as="div"
+              colorReplacements={SHIKI_COLOR_REPLACEMENTS}
+              defaultColor="light-dark()"
+              delay={120}
+              language={language || 'text'}
+              showLanguage={false}
+              theme={SHIKI_THEME}
+            >
+              {trimmed}
+            </ShikiHighlighter>
+          )}
+        </Pre>
+      </CodeCardBody>
+    </CodeCard>
+  )
+}

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

@@ -0,0 +1,70 @@
+import { type ReactNode } from 'react'
+
+import { cn } from '@/lib/utils'
+
+interface StatusRowProps {
+  children: ReactNode
+  className?: string
+  /** Leading glyph slot (spinner / status dot / selection circle). */
+  leading?: ReactNode
+  /** Makes the whole row activatable (adds `cursor-pointer` + keyboard a11y).
+   *  Trailing-slot buttons should `stopPropagation` so they don't also fire it. */
+  onActivate?: () => void
+  /** Right-aligned actions. Revealed on row hover/focus unless `trailingVisible`. */
+  trailing?: ReactNode
+  trailingVisible?: boolean
+}
+
+/**
+ * Shared row chrome for everything in the composer status stack — status items
+ * (subagents, background) AND queued prompts. Fixed height, a leading glyph
+ * slot, flexible content, and a trailing actions slot that reveals on hover.
+ * Hover background matches the session sidebar. Consumers fill the three slots;
+ * they never re-implement the row container.
+ */
+export function StatusRow({
+  children,
+  className,
+  leading,
+  onActivate,
+  trailing,
+  trailingVisible = false
+}: StatusRowProps) {
+  return (
+    <div
+      className={cn(
+        'group/status-row flex min-h-6 items-center gap-2 rounded-md px-1.5 py-1 hover:bg-(--ui-row-hover-background)',
+        onActivate && 'cursor-pointer',
+        className
+      )}
+      onClick={onActivate}
+      onKeyDown={
+        onActivate
+          ? event => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault()
+                onActivate()
+              }
+            }
+          : undefined
+      }
+      role={onActivate ? 'button' : undefined}
+      tabIndex={onActivate ? 0 : undefined}
+    >
+      {leading !== undefined && (
+        <span className="flex size-3.5 shrink-0 items-center justify-center">{leading}</span>
+      )}
+      <div className="flex min-w-0 flex-1 items-center gap-2">{children}</div>
+      {trailing && (
+        <div
+          className={cn(
+            'flex shrink-0 items-center gap-0.5',
+            !trailingVisible && 'opacity-0 group-hover/status-row:opacity-100 group-focus-within/status-row:opacity-100'
+          )}
+        >
+          {trailing}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/chat/status-section.tsx

@@ -0,0 +1,42 @@
+import { type ReactNode, useState } from 'react'
+
+import { DisclosureCaret } from '@/components/ui/disclosure-caret'
+
+interface StatusSectionProps {
+  /** Optional right-aligned actions (text links / micro buttons). Pass
+   *  `Button` with `size="micro"` + `variant="text"` or `"link"`. */
+  accessory?: ReactNode
+  children: ReactNode
+  defaultCollapsed?: boolean
+  /** Optional glyph between the caret and the label (e.g. a `Codicon`). */
+  icon?: ReactNode
+  label: ReactNode
+}
+
+/**
+ * One collapsible group inside the composer status stack. Pure chrome — header
+ * (caret + label) + body — styled to match the queue exactly so every status
+ * (queue, subagents, background) reads as one piece. The stack supplies the
+ * outer card and the dividers between groups; this owns only its own collapse.
+ */
+export function StatusSection({ accessory, children, defaultCollapsed = true, icon, label }: StatusSectionProps) {
+  const [collapsed, setCollapsed] = useState(defaultCollapsed)
+
+  return (
+    <div>
+      <div className="flex items-center gap-1 pr-1">
+        <button
+          className="flex min-w-0 flex-1 items-center gap-1.5 px-2 py-1 text-left text-xs font-normal text-muted-foreground/92 transition-colors hover:text-foreground/90"
+          onClick={() => setCollapsed(open => !open)}
+          type="button"
+        >
+          <DisclosureCaret className="shrink-0" open={!collapsed} size="1em" />
+          {icon && <span className="flex shrink-0 items-center">{icon}</span>}
+          <span className="truncate">{label}</span>
+        </button>
+        {accessory && <div className="flex shrink-0 items-center gap-1">{accessory}</div>}
+      </div>
+      {!collapsed && <div className="px-1 pb-0.5">{children}</div>}
+    </div>
+  )
+}

package/src/components/chat/terminal-output.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useLayoutEffect, useRef } from 'react'
+
+import { cn } from '@/lib/utils'
+
+interface TerminalOutputProps {
+  className?: string
+  text: string
+}
+
+const NEAR_BOTTOM_PX = 24
+
+/**
+ * Tiny read-only terminal viewer: monospace, non-wrapping (long lines scroll
+ * horizontally), vertical scroll past `max-h`. Jumps to the bottom on mount,
+ * then tails — sticking to the bottom as `text` grows, but only when the user
+ * is already near the bottom so scrolling up to read earlier output isn't
+ * interrupted.
+ *
+ * Self-contained so any surface (status rows, tool calls, inspectors) can drop
+ * in a stdout/stderr box without re-implementing the scroll logic.
+ */
+export function TerminalOutput({ className, text }: TerminalOutputProps) {
+  const ref = useRef<HTMLDivElement>(null)
+
+  // On open: jump straight to the latest output (no animation, before paint).
+  useLayoutEffect(() => {
+    const el = ref.current
+
+    if (el) {
+      el.scrollTop = el.scrollHeight
+    }
+  }, [])
+
+  // On growth: tail only when already pinned near the bottom.
+  useEffect(() => {
+    const el = ref.current
+
+    if (el && el.scrollHeight - el.scrollTop - el.clientHeight < NEAR_BOTTOM_PX) {
+      el.scrollTop = el.scrollHeight
+    }
+  }, [text])
+
+  return (
+    <div className={cn('max-h-16 overflow-auto overscroll-contain', className)} ref={ref}>
+      <pre className="w-max min-w-full font-mono text-[0.5625rem] leading-[0.85rem] whitespace-pre text-muted-foreground/70">
+        {text}
+      </pre>
+    </div>
+  )
+}

package/src/components/chat/zoomable-image.tsx

@@ -0,0 +1,177 @@
+'use client'
+
+import { type ComponentProps, useState } from 'react'
+
+import { Dialog, DialogContent } from '@/components/ui/dialog'
+import { useI18n } from '@/i18n'
+import { Download } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+import { notify, notifyError } from '@/store/notifications'
+
+function imageFilename(src?: string): string {
+  if (!src) {
+    return 'image'
+  }
+
+  try {
+    const { pathname } = new URL(src, window.location.href)
+
+    return pathname.split('/').filter(Boolean).pop() || 'image'
+  } catch {
+    return src.split(/[\\/]/).filter(Boolean).pop() || 'image'
+  }
+}
+
+function isMissingIpcHandler(error: unknown): boolean {
+  const message = error instanceof Error ? error.message : typeof error === 'string' ? error : ''
+
+  return message.includes("No handler registered for 'NASTECH:saveImageFromUrl'")
+}
+
+async function startBrowserDownload(src: string) {
+  const response = await fetch(src)
+
+  if (!response.ok) {
+    throw new Error(`Could not fetch image: ${response.status}`)
+  }
+
+  const blobUrl = URL.createObjectURL(await response.blob())
+  const link = document.createElement('a')
+  link.href = blobUrl
+  link.download = imageFilename(src)
+  link.rel = 'noopener noreferrer'
+  document.body.appendChild(link)
+  link.click()
+  link.remove()
+  window.setTimeout(() => URL.revokeObjectURL(blobUrl), 30_000)
+}
+
+export interface ZoomableImageProps extends ComponentProps<'img'> {
+  containerClassName?: string
+  slot?: string
+}
+
+interface ImageActionCopy {
+  downloadImage: string
+  savingImage: string
+}
+
+export function ZoomableImage({ className, containerClassName, src, alt, slot, ...props }: ZoomableImageProps) {
+  const { t } = useI18n()
+  const copy = t.desktop
+  const [saving, setSaving] = useState(false)
+  const [lightboxOpen, setLightboxOpen] = useState(false)
+  const canOpen = Boolean(src)
+
+  async function handleDownload() {
+    if (!src || saving) {
+      return
+    }
+
+    setSaving(true)
+
+    try {
+      if (window.NASTECHDesktop?.saveImageFromUrl) {
+        const saved = await window.NASTECHDesktop.saveImageFromUrl(src)
+
+        if (saved) {
+          notify({ kind: 'success', title: copy.imageSaved, message: imageFilename(src) })
+        }
+
+        return
+      }
+
+      await startBrowserDownload(src)
+    } catch (error) {
+      if (isMissingIpcHandler(error)) {
+        try {
+          await startBrowserDownload(src)
+          notify({
+            kind: 'info',
+            title: copy.downloadStarted,
+            message: copy.restartToUseSaveImage
+          })
+        } catch (fallbackError) {
+          notifyError(fallbackError, copy.restartToSaveImages)
+        }
+
+        return
+      }
+
+      notifyError(error, copy.imageDownloadFailed)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const lightbox = src ? (
+    <Dialog onOpenChange={setLightboxOpen} open={lightboxOpen}>
+      <DialogContent
+        className="block w-auto max-h-[calc(100vh-12rem)] max-w-[calc(100vw-12rem)] overflow-visible border-0 bg-transparent p-0 shadow-none"
+        showCloseButton={false}
+      >
+        <div className="group/lightbox relative inline-block">
+          <img
+            alt={alt ?? ''}
+            className="block max-h-[calc(100vh-12rem)] max-w-[calc(100vw-12rem)] cursor-zoom-out select-auto rounded-lg object-contain shadow-2xl"
+            onClick={() => setLightboxOpen(false)}
+            src={src}
+          />
+          <ImageActionButton copy={copy} onClick={handleDownload} saving={saving} variant="lightbox" />
+        </div>
+      </DialogContent>
+    </Dialog>
+  ) : null
+
+  return (
+    <>
+      <span
+        className={cn('group/image relative inline-block max-w-full align-top', containerClassName)}
+        data-slot={slot ?? 'aui_zoomable-image'}
+      >
+        <button
+          className="contents"
+          disabled={!canOpen}
+          onClick={() => canOpen && setLightboxOpen(true)}
+          title={canOpen ? copy.openImage : undefined}
+          type="button"
+        >
+          <img alt={alt ?? ''} className={className} src={src} {...props} />
+        </button>
+        {src && <ImageActionButton copy={copy} onClick={handleDownload} saving={saving} variant="inline" />}
+      </span>
+      {lightbox}
+    </>
+  )
+}
+
+function ImageActionButton({
+  copy,
+  onClick,
+  saving,
+  variant
+}: {
+  copy: ImageActionCopy
+  onClick: () => void
+  saving: boolean
+  variant: 'inline' | 'lightbox'
+}) {
+  return (
+    <button
+      aria-label={saving ? copy.savingImage : copy.downloadImage}
+      className={cn(
+        'absolute right-2 top-2 grid size-8 place-items-center rounded-full border border-border/70 bg-background/80 text-muted-foreground opacity-0 shadow-sm backdrop-blur transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100 disabled:opacity-50',
+        variant === 'inline' ? 'group-hover/image:opacity-100' : 'group-hover/lightbox:opacity-100'
+      )}
+      disabled={saving}
+      onClick={event => {
+        event.stopPropagation()
+        void onClick()
+      }}
+      title={saving ? copy.savingImage : copy.downloadImage}
+      type="button"
+    >
+      <Download className={cn('size-4', saving && 'animate-pulse')} />
+    </button>
+  )
+}