nastechai-desktop 18.1.0

package/src/app/updates-overlay.tsx

@@ -0,0 +1,369 @@
+import { useStore } from '@nanostores/react'
+import { useEffect, useState } from 'react'
+
+import { BrandMark } from '@/components/brand-mark'
+import { Button } from '@/components/ui/button'
+import { writeClipboardText } from '@/components/ui/copy-button'
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/components/ui/dialog'
+import { ErrorIcon, ErrorState } from '@/components/ui/error-state'
+import { Loader } from '@/components/ui/loader'
+import type { DesktopUpdateCommit, DesktopUpdateStage, DesktopUpdateStatus } from '@/global'
+import { useI18n } from '@/i18n'
+import { buildCommitChangelog, type CommitGroup } from '@/lib/commit-changelog'
+import { AlertCircle, Check, CheckCircle2, Copy, Terminal } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+import {
+  $updateApply,
+  $updateChecking,
+  $updateOverlayOpen,
+  $updateStatus,
+  applyUpdates,
+  checkUpdates,
+  resetUpdateApplyState,
+  setUpdateOverlayOpen,
+  type UpdateApplyState
+} from '@/store/updates'
+
+function totalItems(groups: readonly CommitGroup[]) {
+  return groups.reduce((sum, g) => sum + g.items.length, 0)
+}
+
+export function UpdatesOverlay() {
+  const open = useStore($updateOverlayOpen)
+  const status = useStore($updateStatus)
+  const checking = useStore($updateChecking)
+  const apply = useStore($updateApply)
+
+  useEffect(() => {
+    if (open && !status && !checking) {
+      void checkUpdates()
+    }
+  }, [checking, open, status])
+
+  const behind = status?.behind ?? 0
+
+  const phase: 'idle' | 'applying' | 'manual' | 'error' =
+    apply.stage === 'manual'
+      ? 'manual'
+      : apply.applying || apply.stage === 'restart'
+        ? 'applying'
+        : apply.stage === 'error'
+          ? 'error'
+          : 'idle'
+
+  const handleClose = (next: boolean) => {
+    if (phase === 'applying') {
+      return
+    }
+
+    setUpdateOverlayOpen(next)
+
+    if (!next && (apply.stage === 'error' || apply.stage === 'restart' || apply.stage === 'manual')) {
+      resetUpdateApplyState()
+    }
+  }
+
+  const handleInstall = () => {
+    void applyUpdates()
+  }
+
+  return (
+    <Dialog onOpenChange={handleClose} open={open}>
+      <DialogContent
+        className="max-w-sm overflow-hidden border-border/70 p-0 gap-0"
+        showCloseButton={phase !== 'applying'}
+      >
+        {phase === 'applying' && <ApplyingView apply={apply} />}
+
+        {phase === 'manual' && (
+          <ManualView command={apply.command ?? 'NASTECH update'} onDone={() => handleClose(false)} />
+        )}
+
+        {phase === 'error' && (
+          <ErrorView message={apply.message} onDismiss={() => handleClose(false)} onRetry={handleInstall} />
+        )}
+
+        {phase === 'idle' && (
+          <IdleView
+            behind={behind}
+            checking={checking}
+            commits={status?.commits ?? []}
+            onInstall={handleInstall}
+            onLater={() => handleClose(false)}
+            onRetryCheck={() => void checkUpdates()}
+            status={status}
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function IdleView({
+  behind,
+  checking,
+  commits,
+  onInstall,
+  onLater,
+  onRetryCheck,
+  status
+}: {
+  behind: number
+  checking: boolean
+  commits: readonly DesktopUpdateCommit[]
+  onInstall: () => void
+  onLater: () => void
+  onRetryCheck: () => void
+  status: DesktopUpdateStatus | null
+}) {
+  const { t } = useI18n()
+  const u = t.updates
+
+  if (!status && checking) {
+    return (
+      <CenteredStatus icon={<Loader className="size-12" label={u.checking} type="lemniscate-bloom" />} title={u.checking} />
+    )
+  }
+
+  if (!status) {
+    return (
+      <CenteredStatus
+        action={
+          <Button onClick={onRetryCheck} size="sm">
+            {u.tryAgain}
+          </Button>
+        }
+        icon={<ErrorIcon />}
+        title={u.checkFailedTitle}
+      />
+    )
+  }
+
+  if (!status.supported) {
+    return (
+      <CenteredStatus
+        body={status.message ?? u.unsupportedMessage}
+        icon={<AlertCircle className="size-6 text-muted-foreground" />}
+        title={u.notAvailableTitle}
+      />
+    )
+  }
+
+  if (status.error) {
+    return (
+      <CenteredStatus
+        action={
+          <Button disabled={checking} onClick={onRetryCheck} size="sm">
+            {u.tryAgain}
+          </Button>
+        }
+        body={u.connectionRetry}
+        icon={<ErrorIcon />}
+        title={u.checkFailedTitle}
+      />
+    )
+  }
+
+  if (behind === 0) {
+    return (
+      <CenteredStatus
+        body={u.latestBody}
+        icon={<CheckCircle2 className="size-7 text-emerald-600 dark:text-emerald-400" />}
+        title={u.allSetTitle}
+      />
+    )
+  }
+
+  const groups = buildCommitChangelog(commits)
+  const shownItems = totalItems(groups)
+  const remaining = Math.max(0, behind - shownItems)
+
+  return (
+    <div className="grid gap-5 px-6 pb-6 pt-7 pr-8">
+      <div className="flex flex-col items-center gap-3 text-center">
+        <BrandMark className="size-16" />
+
+        <DialogTitle className="text-center text-xl">{u.availableTitle}</DialogTitle>
+        <DialogDescription className="text-center text-sm">
+          {u.availableBody}
+        </DialogDescription>
+      </div>
+
+      <div className="grid gap-3 rounded-xl border border-border/70 bg-muted/20 px-4 py-3">
+        {groups.map(group => (
+          <div key={group.id}>
+            <p className="text-[0.625rem] font-semibold uppercase tracking-wide text-muted-foreground">{group.label}</p>
+            <ul className="mt-1.5 grid gap-1.5 text-xs text-foreground">
+              {group.items.map(item => (
+                <li className="flex items-start gap-2" key={item}>
+                  <span aria-hidden className="mt-1.5 inline-block size-1 shrink-0 rounded-full bg-primary" />
+                  <span className="leading-snug">{item}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+
+      <div className="grid gap-2">
+        <Button className="font-semibold" onClick={onInstall} size="lg">
+          {u.updateNow}
+        </Button>
+        <Button className="font-medium" onClick={onLater} type="button" variant="text">
+          {u.maybeLater}
+        </Button>
+      </div>
+
+      {remaining > 0 && (
+        <p className="text-center text-xs text-muted-foreground">
+          {u.moreChanges(remaining)}
+        </p>
+      )}
+    </div>
+  )
+}
+
+function ManualView({ command, onDone }: { command: string; onDone: () => void }) {
+  const { t } = useI18n()
+  const u = t.updates
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = () => {
+    void writeClipboardText(command).then(() => {
+      setCopied(true)
+      window.setTimeout(() => setCopied(false), 1800)
+    })
+  }
+
+  return (
+    <div className="grid gap-5 px-6 pb-6 pt-7 pr-8">
+      <div className="flex flex-col items-center gap-3 text-center">
+        <Terminal className="size-8 text-primary" />
+
+        <DialogTitle className="text-center text-xl">{u.manualTitle}</DialogTitle>
+        <DialogDescription className="text-center text-sm">
+          {u.manualBody}
+        </DialogDescription>
+      </div>
+
+      <button
+        className="group flex w-full items-center justify-between gap-3 rounded-xl border border-border/70 bg-muted/30 px-4 py-3 text-left transition-colors hover:border-border hover:bg-muted/50"
+        onClick={handleCopy}
+        type="button"
+      >
+        <code className="select-all font-mono text-sm text-foreground">
+          <span className="text-muted-foreground">$ </span>
+          {command}
+        </code>
+        <span className="flex shrink-0 items-center gap-1 text-xs font-medium text-muted-foreground transition-colors group-hover:text-foreground">
+          {copied ? (
+            <>
+              <Check className="size-3.5 text-emerald-600 dark:text-emerald-400" />
+              {u.copied}
+            </>
+          ) : (
+            <>
+              <Copy className="size-3.5" />
+              {u.copy}
+            </>
+          )}
+        </span>
+      </button>
+
+      <p className="text-center text-xs text-muted-foreground">
+        {u.manualPickedUp}
+      </p>
+
+      <Button className="font-semibold" onClick={onDone} size="lg" variant="secondary">
+        {u.done}
+      </Button>
+    </div>
+  )
+}
+
+function ApplyingView({ apply }: { apply: UpdateApplyState }) {
+  const { t } = useI18n()
+  const u = t.updates
+  const label = u.stages[apply.stage as DesktopUpdateStage] ?? u.stages.idle
+
+  const percent =
+    typeof apply.percent === 'number' && Number.isFinite(apply.percent)
+      ? Math.max(2, Math.min(100, Math.round(apply.percent)))
+      : null
+
+  return (
+    <div className="grid gap-5 px-6 pb-6 pt-7">
+      <div className="flex flex-col items-center gap-3 text-center">
+        <Loader className="size-16" label={label} type="lemniscate-bloom" />
+
+        <DialogTitle className="text-center text-xl">{label}</DialogTitle>
+        <DialogDescription className="text-center text-sm">
+          {u.applyingBody}
+        </DialogDescription>
+      </div>
+
+      <div className="h-2 overflow-hidden rounded-full bg-muted">
+        <div
+          className={cn(
+            'h-full rounded-full bg-primary transition-[width] duration-300 ease-out',
+            percent === null && 'w-1/3 animate-pulse'
+          )}
+          style={percent !== null ? { width: `${percent}%` } : undefined}
+        />
+      </div>
+
+      <p className="text-center text-xs text-muted-foreground">{u.applyingClose}</p>
+    </div>
+  )
+}
+
+function ErrorView({ message, onDismiss, onRetry }: { message: string; onDismiss: () => void; onRetry: () => void }) {
+  const { t } = useI18n()
+  const u = t.updates
+
+  return (
+    <ErrorState
+      className="px-6 pb-6 pt-7 pr-8"
+      description={
+        <DialogDescription className="max-w-prose text-center text-sm leading-5 text-muted-foreground">
+          {message || u.errorBody}
+        </DialogDescription>
+      }
+      title={
+        <DialogTitle className="text-center text-xl font-semibold tracking-tight">{u.errorTitle}</DialogTitle>
+      }
+    >
+      <Button className="font-semibold" onClick={onRetry} size="lg">
+        {u.tryAgain}
+      </Button>
+      <Button onClick={onDismiss} variant="text">
+        {u.notNow}
+      </Button>
+    </ErrorState>
+  )
+}
+
+function CenteredStatus({
+  action,
+  body,
+  icon,
+  title
+}: {
+  action?: React.ReactNode
+  body?: string
+  icon: React.ReactNode
+  title: string
+}) {
+  return (
+    <div className="grid gap-4 px-6 pb-6 pt-8 pr-8">
+      <div className="flex flex-col items-center gap-3 text-center">
+        {icon}
+
+        <DialogTitle className="text-center text-lg">{title}</DialogTitle>
+        {body && <DialogDescription className="text-center text-sm">{body}</DialogDescription>}
+      </div>
+
+      {action && <div className="flex justify-center">{action}</div>}
+    </div>
+  )
+}

package/src/components/Backdrop.tsx

@@ -0,0 +1,114 @@
+import { Leva, useControls } from 'leva'
+import { type CSSProperties, useEffect, useState } from 'react'
+
+const BLEND_MODES = [
+  'normal',
+  'multiply',
+  'screen',
+  'overlay',
+  'darken',
+  'lighten',
+  'color-dodge',
+  'color-burn',
+  'hard-light',
+  'soft-light',
+  'difference',
+  'exclusion',
+  'hue',
+  'saturation',
+  'color',
+  'luminosity'
+] as const
+
+type BlendMode = (typeof BLEND_MODES)[number]
+const assetPath = (path: string) => `${import.meta.env.BASE_URL}${path.replace(/^\/+/, '')}`
+
+export function Backdrop() {
+  const [controlsOpen, setControlsOpen] = useState(false)
+
+  useEffect(() => {
+    if (!import.meta.env.DEV) {
+      return
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      const target = event.target as HTMLElement | null
+
+      const editing =
+        target?.isContentEditable ||
+        target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        target instanceof HTMLSelectElement
+
+      if (editing || event.repeat || event.altKey || event.ctrlKey || event.metaKey) {
+        return
+      }
+
+      if (event.shiftKey && event.code === 'KeyY') {
+        setControlsOpen(open => !open)
+      }
+    }
+
+    window.addEventListener('keydown', onKeyDown)
+
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [])
+
+  const shape = useControls(
+    'UI / Shape',
+    { radiusScalar: { value: 0.2, min: 0, max: 2, step: 0.1, label: 'radius scalar' } },
+    { collapsed: true }
+  )
+
+  useEffect(() => {
+    document.documentElement.style.setProperty('--radius-scalar', String(shape.radiusScalar))
+  }, [shape.radiusScalar])
+
+  const statue = useControls(
+    'Backdrop / Statue',
+    {
+      enabled: { value: true, label: 'on' },
+      opacity: { value: 0.025, min: 0, max: 1, step: 0.005 },
+      blendMode: { value: 'difference' as BlendMode, options: BLEND_MODES, label: 'blend' },
+      invert: { value: true, label: 'invert color' },
+      saturate: { value: 1, min: 0, max: 3, step: 0.05, label: 'saturate' },
+      brightness: { value: 1, min: 0, max: 2, step: 0.05, label: 'brightness' },
+      objectPosition: {
+        value: 'top left',
+        options: ['top left', 'top right', 'bottom left', 'bottom right', 'center', 'top', 'bottom', 'left', 'right'],
+        label: 'position'
+      },
+      scale: { value: 160, min: 100, max: 300, step: 5, label: 'height (dvh)' }
+    },
+    { collapsed: true }
+  )
+
+  return (
+    <>
+      <Leva collapsed hidden={!import.meta.env.DEV || !controlsOpen} titleBar={{ title: 'backdrop', drag: true }} />
+
+      {statue.enabled && (
+        <div
+          aria-hidden
+          className="pointer-events-none absolute inset-0 z-2"
+          style={{
+            mixBlendMode: statue.blendMode as CSSProperties['mixBlendMode'],
+            opacity: statue.opacity
+          }}
+        >
+          <img
+            alt=""
+            className="w-auto min-w-dvw object-cover"
+            fetchPriority="low"
+            src={assetPath('ds-assets/filler-bg0.jpg')}
+            style={{
+              height: `${statue.scale}dvh`,
+              objectPosition: statue.objectPosition,
+              filter: `invert(calc(${statue.invert ? 1 : 0} * var(--backdrop-invert-mul, 1))) saturate(${statue.saturate}) brightness(${statue.brightness})`
+            }}
+          />
+        </div>
+      )}
+    </>
+  )
+}

package/src/components/assistant-ui/ansi-text.tsx

@@ -0,0 +1,34 @@
+import type { FC } from 'react'
+import { useMemo } from 'react'
+
+import { ansiColorClass, hasAnsiCodes, parseAnsi } from '@/lib/ansi'
+import { cn } from '@/lib/utils'
+
+interface AnsiTextProps {
+  text: string
+  className?: string
+}
+
+/** Renders text with embedded ANSI SGR codes as colored / bold spans. Falls
+ *  back to a plain string node when no codes are present so the parser cost
+ *  is paid only when there's something to colorize. */
+export const AnsiText: FC<AnsiTextProps> = ({ className, text }) => {
+  const segments = useMemo(() => (hasAnsiCodes(text) ? parseAnsi(text) : null), [text])
+
+  if (!segments) {
+    return <span className={className}>{text}</span>
+  }
+
+  return (
+    <span className={className}>
+      {segments.map((segment, index) => (
+        <span
+          className={cn(segment.bold && 'font-semibold', segment.fg && ansiColorClass(segment.fg))}
+          key={`ansi-${index}`}
+        >
+          {segment.text}
+        </span>
+      ))}
+    </span>
+  )
+}