nastechai-desktop 18.1.0

package/src/components/assistant-ui/user-message-text.tsx

@@ -0,0 +1,150 @@
+import type { FC } from 'react'
+import { Fragment, useMemo } from 'react'
+
+import { DirectiveContent } from '@/components/assistant-ui/directive-text'
+import { cn } from '@/lib/utils'
+
+// User messages should render the bare-minimum of markdown: backtick `code`
+// spans and ``` fenced blocks. We deliberately don't pull in the full
+// assistant Markdown pipeline (Streamdown + KaTeX + syntax highlighter)
+// because user input rarely contains structured docs and the heavy pipeline
+// adds a lot of runtime cost per bubble.
+//
+// Directive chips (`@file:`, `@image:`, ...) still resolve via DirectiveContent
+// inside the plain-text segments.
+
+interface FenceSegment {
+  kind: 'fence'
+  code: string
+  lang: string | null
+}
+
+interface InlineSegment {
+  kind: 'inline'
+  text: string
+}
+
+interface InlineCodeSegment {
+  kind: 'inline-code'
+  code: string
+}
+
+interface InlineTextSegment {
+  kind: 'inline-text'
+  text: string
+}
+
+type TopSegment = FenceSegment | InlineSegment
+type InlineNode = InlineCodeSegment | InlineTextSegment
+
+const FENCE_RE = /```([^\n`]*)\n([\s\S]*?)```/g
+
+// Greedy backtick run length so ``code with `backticks` inside`` works.
+const INLINE_CODE_RE = /(`+)([^`\n][\s\S]*?)\1/g
+
+function splitFences(text: string): TopSegment[] {
+  const segments: TopSegment[] = []
+  let cursor = 0
+
+  for (const match of text.matchAll(FENCE_RE)) {
+    const start = match.index ?? 0
+
+    if (start > cursor) {
+      segments.push({ kind: 'inline', text: text.slice(cursor, start) })
+    }
+
+    segments.push({
+      kind: 'fence',
+      lang: (match[1] || '').trim() || null,
+      code: match[2] ?? ''
+    })
+    cursor = start + match[0].length
+  }
+
+  if (cursor < text.length) {
+    segments.push({ kind: 'inline', text: text.slice(cursor) })
+  }
+
+  return segments
+}
+
+function splitInlineCode(text: string): InlineNode[] {
+  const nodes: InlineNode[] = []
+  let cursor = 0
+
+  for (const match of text.matchAll(INLINE_CODE_RE)) {
+    const start = match.index ?? 0
+
+    if (start > cursor) {
+      nodes.push({ kind: 'inline-text', text: text.slice(cursor, start) })
+    }
+
+    nodes.push({ kind: 'inline-code', code: match[2] })
+    cursor = start + match[0].length
+  }
+
+  if (cursor < text.length) {
+    nodes.push({ kind: 'inline-text', text: text.slice(cursor) })
+  }
+
+  return nodes
+}
+
+interface UserMessageTextProps {
+  text: string
+  className?: string
+}
+
+export const UserMessageText: FC<UserMessageTextProps> = ({ className, text }) => {
+  const top = useMemo(() => splitFences(text), [text])
+
+  return (
+    <span className={cn('block', className)} data-slot="aui_user-message-text">
+      {top.map((segment, segmentIndex) => {
+        if (segment.kind === 'fence') {
+          return (
+            <pre
+              className="my-1.5 max-w-full overflow-x-auto rounded-md border border-border/45 bg-[color-mix(in_srgb,currentColor_5%,transparent)] px-2.5 py-2 font-mono text-[0.86em] leading-snug"
+              data-slot="aui_user-fence"
+              key={`fence-${segmentIndex}`}
+            >
+              <code className="block whitespace-pre">{segment.code}</code>
+            </pre>
+          )
+        }
+
+        return (
+          <Fragment key={`inline-${segmentIndex}`}>
+            <InlineSegmentView text={segment.text} />
+          </Fragment>
+        )
+      })}
+    </span>
+  )
+}
+
+const InlineSegmentView: FC<{ text: string }> = ({ text }) => {
+  const nodes = useMemo(() => splitInlineCode(text), [text])
+
+  return (
+    <span className="wrap-anywhere block whitespace-pre-line">
+      {nodes.map((node, nodeIndex) =>
+        node.kind === 'inline-code' ? (
+          <code
+            className="mx-px rounded bg-[color-mix(in_srgb,currentColor_8%,transparent)] px-1 py-px font-mono text-[0.92em]"
+            data-slot="aui_user-inline-code"
+            key={`code-${nodeIndex}`}
+          >
+            {node.code}
+          </code>
+        ) : (
+          // Pass plain-text bits through DirectiveContent so @file:/@url: chips
+          // still render. DirectiveContent already preserves whitespace.
+          <Fragment key={`text-${nodeIndex}`}>
+            <DirectiveContent text={node.text} />
+          </Fragment>
+        )
+      )}
+    </span>
+  )
+}

package/src/components/boot-failure-overlay.tsx

@@ -0,0 +1,246 @@
+import { useStore } from '@nanostores/react'
+import { useEffect, useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { ErrorIcon } from '@/components/ui/error-state'
+import { LogView } from '@/components/ui/log-view'
+import type { DesktopConnectionConfig } from '@/global'
+import { useI18n } from '@/i18n'
+import { FileText, Loader2, LogIn, RefreshCw, Wrench } from '@/lib/icons'
+import { $desktopBoot } from '@/store/boot'
+import { notify, notifyError } from '@/store/notifications'
+import { $desktopOnboarding } from '@/store/onboarding'
+
+import type { RemoteReauth } from './boot-failure-reauth'
+import { deriveProviderShape, isRemoteReauthFailure, signInLabel } from './boot-failure-reauth'
+
+type BusyAction = 'local' | 'repair' | 'retry' | 'signin' | null
+
+// A remote gateway whose access cookie has lapsed (e.g. the dashboard
+// restarted on the remote box) boots into this overlay with a reauth-shaped
+// error. The local-recovery buttons (Retry resets the local bootstrap latch;
+// Repair re-runs the installer) are no-ops for that case — the only fix is to
+// re-establish the remote session. The detection + copy helpers live in
+// ./boot-failure-reauth so they're unit-testable without a React render.
+
+// Recovery surface for a hard boot failure (gateway never came up, backend
+// exited during startup, bootstrap latched, …). Without this the app shell
+// renders dead — "gateway offline", no composer, only a toast — with no way
+// to retry, repair the install, switch the gateway, or find the logs.
+export function BootFailureOverlay() {
+  const boot = useStore($desktopBoot)
+  const onboarding = useStore($desktopOnboarding)
+  const { t } = useI18n()
+  const [busy, setBusy] = useState<BusyAction>(null)
+  const [logs, setLogs] = useState<string[]>([])
+  const [showLogs, setShowLogs] = useState(false)
+  const [remoteReauth, setRemoteReauth] = useState<RemoteReauth | null>(null)
+
+  const visible = Boolean(boot.error) && !boot.running
+  // While first-run onboarding owns the picker/flow we let it surface its own
+  // progress; the recovery overlay is for hard failures, which it covers via a
+  // higher z-index regardless of onboarding state.
+  const suppressed = onboarding.flow.status !== 'idle' && onboarding.flow.status !== 'error'
+
+  useEffect(() => {
+    if (!visible) {
+      return
+    }
+
+    void window.NASTECHDesktop
+      ?.getRecentLogs()
+      .then(res => setLogs(res.lines ?? []))
+      .catch(() => undefined)
+  }, [visible])
+
+  // Resolve whether this boot failure is a remote-gateway reauth so we can
+  // offer the actionable "Sign in" path instead of the local-only recovery
+  // buttons. Runs whenever the overlay becomes visible.
+  useEffect(() => {
+    if (!visible) {
+      setRemoteReauth(null)
+
+      return
+    }
+
+    let cancelled = false
+
+    void (async () => {
+      const desktop = window.NASTECHDesktop
+
+      if (!desktop?.getConnectionConfig) {
+        return
+      }
+
+      let config: DesktopConnectionConfig
+
+      try {
+        config = await desktop.getConnectionConfig()
+      } catch {
+        return
+      }
+
+      if (cancelled || !isRemoteReauthFailure(config)) {
+        return
+      }
+
+      // Best-effort probe for the provider shape so the button copy matches
+      // what the user will see in the login window (password form vs OAuth
+      // redirect). Probe failure just keeps the generic copy.
+      let shape = deriveProviderShape(null)
+
+      try {
+        const probe = await desktop.probeConnectionConfig(config.remoteUrl)
+        shape = deriveProviderShape(probe?.providers)
+      } catch {
+        // Generic copy is fine.
+      }
+
+      if (!cancelled) {
+        setRemoteReauth({ url: config.remoteUrl, ...shape })
+      }
+    })()
+
+    return () => {
+      cancelled = true
+    }
+  }, [visible])
+
+  if (!visible || suppressed) {
+    return null
+  }
+
+  const retry = async () => {
+    setBusy('retry')
+    await window.NASTECHDesktop?.resetBootstrap().catch(() => undefined)
+    window.location.reload()
+  }
+
+  const repair = async () => {
+    setBusy('repair')
+    await window.NASTECHDesktop?.repairBootstrap().catch(() => undefined)
+    window.location.reload()
+  }
+
+  const switchToLocalGateway = async () => {
+    setBusy('local')
+    // applyConnectionConfig reloads the window from the main process.
+    await window.NASTECHDesktop?.applyConnectionConfig({ mode: 'local' }).catch(() => undefined)
+    setBusy(null)
+  }
+
+  // Open the gateway's login window (renders the username/password form for a
+  // basic gateway, or the OAuth redirect otherwise — the desktop drives both
+  // through the same window). On a successful sign-in the session cookie is
+  // re-established in the persistent partition; reload so boot re-runs and the
+  // reconnect now mints a ticket against a live session.
+  const signInRemote = async () => {
+    if (!remoteReauth) {
+      return
+    }
+
+    setBusy('signin')
+
+    try {
+      const result = await window.NASTECHDesktop?.oauthLoginConnectionConfig(remoteReauth.url)
+
+      if (result?.connected) {
+        notify({ kind: 'success', title: t.boot.failure.signedInTitle, message: t.boot.failure.signedInMessage })
+        window.location.reload()
+
+        return
+      }
+
+      notify({
+        kind: 'warning',
+        title: t.boot.failure.signInIncompleteTitle,
+        message: t.boot.failure.signInIncompleteMessage
+      })
+    } catch (err) {
+      notifyError(err, t.boot.failure.signInFailed)
+    } finally {
+      setBusy(null)
+    }
+  }
+
+  const openLogs = () => void window.NASTECHDesktop?.revealLogs().catch(() => undefined)
+  const copy = t.boot.failure
+
+  const label = signInLabel(remoteReauth, {
+    identityProvider: copy.identityProvider,
+    remoteGateway: copy.signInToRemoteGateway,
+    withProvider: copy.signInWithProvider
+  })
+
+  return (
+    <div className="fixed inset-0 z-[1400] flex items-center justify-center bg-(--ui-chat-surface-background) p-6">
+      <div className="w-full max-w-[40rem] overflow-hidden rounded-xl border border-(--stroke-nastech) bg-(--ui-chat-bubble-background) shadow-nastech">
+        <div className="flex items-start gap-3 px-5 py-4">
+          <ErrorIcon className="mt-0.5" size="1.25rem" />
+          <div>
+            <h2 className="text-[0.9375rem] font-semibold tracking-tight">
+              {remoteReauth ? copy.remoteTitle : copy.title}
+            </h2>
+            <p className="mt-1 text-[0.8125rem] leading-5 text-(--ui-text-tertiary)">
+              {remoteReauth ? copy.remoteDescription : copy.description}
+            </p>
+          </div>
+        </div>
+
+        <div className="grid gap-4 p-5">
+          <div className="rounded-2xl border border-destructive/30 bg-destructive/10 px-4 py-3 text-xs text-destructive">
+            {boot.error}
+          </div>
+
+          <div className="grid gap-2">
+            <div className="flex flex-wrap gap-2">
+              {remoteReauth ? (
+                <Button disabled={Boolean(busy)} onClick={() => void signInRemote()}>
+                  {busy === 'signin' ? <Loader2 className="animate-spin" /> : <LogIn />}
+                  {label}
+                </Button>
+              ) : (
+                <Button disabled={Boolean(busy)} onClick={() => void retry()}>
+                  {busy === 'retry' ? <Loader2 className="animate-spin" /> : <RefreshCw />}
+                  {copy.retry}
+                </Button>
+              )}
+              {!remoteReauth ? (
+                <Button disabled={Boolean(busy)} onClick={() => void repair()} variant="secondary">
+                  {busy === 'repair' ? <Loader2 className="animate-spin" /> : <Wrench />}
+                  {copy.repairInstall}
+                </Button>
+              ) : null}
+              <Button disabled={Boolean(busy)} onClick={() => void switchToLocalGateway()} variant="secondary">
+                {busy === 'local' ? <Loader2 className="animate-spin" /> : null}
+                {copy.useLocalGateway}
+              </Button>
+              <Button onClick={openLogs} variant="ghost">
+                <FileText />
+                {copy.openLogs}
+              </Button>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {remoteReauth ? copy.remoteSignInHint : copy.repairHint}
+            </p>
+          </div>
+
+          {logs.length > 0 ? (
+            <div className="grid gap-2">
+              <Button
+                className="-ml-2 self-start font-medium"
+                onClick={() => setShowLogs(v => !v)}
+                size="xs"
+                type="button"
+                variant="text"
+              >
+                {showLogs ? copy.hideRecentLogs : copy.showRecentLogs}
+              </Button>
+              {showLogs ? <LogView className="max-h-48">{logs.slice(-40).join('')}</LogView> : null}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/boot-failure-reauth.test.ts

@@ -0,0 +1,100 @@
+import { describe, expect, it } from 'vitest'
+
+import type { DesktopConnectionConfig } from '@/global'
+
+import { deriveProviderShape, isRemoteReauthFailure, signInLabel } from './boot-failure-reauth'
+
+function config(overrides: Partial<DesktopConnectionConfig> = {}): DesktopConnectionConfig {
+  return {
+    envOverride: false,
+    mode: 'remote',
+    profile: null,
+    remoteAuthMode: 'oauth',
+    remoteOauthConnected: false,
+    remoteTokenPreview: null,
+    remoteTokenSet: false,
+    remoteUrl: 'https://box:9119',
+    ...overrides
+  }
+}
+
+describe('isRemoteReauthFailure', () => {
+  it('true for a remote, gated, disconnected gateway with a URL', () => {
+    expect(isRemoteReauthFailure(config())).toBe(true)
+  })
+
+  it('false when the oauth session is still connected', () => {
+    expect(isRemoteReauthFailure(config({ remoteOauthConnected: true }))).toBe(false)
+  })
+
+  it('false for a local gateway', () => {
+    expect(isRemoteReauthFailure(config({ mode: 'local' }))).toBe(false)
+  })
+
+  it('false for a token (non-gated) remote gateway', () => {
+    expect(isRemoteReauthFailure(config({ remoteAuthMode: 'token' }))).toBe(false)
+  })
+
+  it('false when there is no remote URL to sign in against', () => {
+    expect(isRemoteReauthFailure(config({ remoteUrl: '' }))).toBe(false)
+  })
+
+  it('false for null/undefined config', () => {
+    expect(isRemoteReauthFailure(null)).toBe(false)
+    expect(isRemoteReauthFailure(undefined)).toBe(false)
+  })
+})
+
+describe('deriveProviderShape', () => {
+  it('generic copy when there are no providers', () => {
+    expect(deriveProviderShape([])).toEqual({ isPassword: false, providerLabel: 'your identity provider' })
+    expect(deriveProviderShape(null)).toEqual({ isPassword: false, providerLabel: 'your identity provider' })
+  })
+
+  it('password shape when the sole provider supports password', () => {
+    expect(
+      deriveProviderShape([{ name: 'basic', displayName: 'Username & Password', supportsPassword: true }])
+    ).toEqual({ isPassword: true, providerLabel: 'Username & Password' })
+  })
+
+  it('OAuth shape when the provider is a redirect IDP', () => {
+    expect(deriveProviderShape([{ name: 'nastech', displayName: 'NasTech', supportsPassword: false }])).toEqual({
+      isPassword: false,
+      providerLabel: 'NasTech'
+    })
+  })
+
+  it('mixed deployment keeps generic OAuth copy (not every provider is password)', () => {
+    const shape = deriveProviderShape([
+      { name: 'basic', displayName: 'Username & Password', supportsPassword: true },
+      { name: 'nastech', displayName: 'NasTech', supportsPassword: false }
+    ])
+
+    expect(shape.isPassword).toBe(false)
+    expect(shape.providerLabel).toBe('Username & Password / NasTech')
+  })
+
+  it('falls back to name when displayName is empty', () => {
+    expect(deriveProviderShape([{ name: 'basic', displayName: '', supportsPassword: true }]).providerLabel).toBe(
+      'basic'
+    )
+  })
+})
+
+describe('signInLabel', () => {
+  it('password gateway gets the plain "Sign in to remote gateway" copy', () => {
+    expect(signInLabel({ url: 'x', isPassword: true, providerLabel: 'Username & Password' })).toBe(
+      'Sign in to remote gateway'
+    )
+  })
+
+  it('OAuth gateway names the provider', () => {
+    expect(signInLabel({ url: 'x', isPassword: false, providerLabel: 'NasTech' })).toBe(
+      'Sign in with NasTech'
+    )
+  })
+
+  it('null reauth falls back to the generic provider phrase', () => {
+    expect(signInLabel(null)).toBe('Sign in with your identity provider')
+  })
+})

package/src/components/boot-failure-reauth.ts

@@ -0,0 +1,81 @@
+import type { DesktopAuthProvider, DesktopConnectionConfig } from '@/global'
+
+// Pure helpers for the boot-failure overlay's remote-reauth branch. Kept out
+// of the .tsx so they can be unit-tested without a React/jsdom render (the
+// jsx-dev-runtime resolution in this repo's vitest setup is flaky for
+// component renders, but these are plain functions).
+
+export interface RemoteReauth {
+  url: string
+  // True when every advertised provider is username/password — drives the
+  // button copy ("Sign in to remote gateway" vs "Sign in with <provider>"),
+  // mirroring the gateway-settings page. Probe is best-effort.
+  isPassword: boolean
+  providerLabel: string
+}
+
+interface SignInCopy {
+  identityProvider: string
+  remoteGateway: string
+  withProvider: (provider: string) => string
+}
+
+const DEFAULT_SIGN_IN_COPY: SignInCopy = {
+  identityProvider: 'your identity provider',
+  remoteGateway: 'Sign in to remote gateway',
+  withProvider: provider => `Sign in with ${provider}`
+}
+
+// A remote, gated (oauth-bucket), not-currently-connected gateway is a
+// remote-reauth boot failure: the access cookie lapsed (e.g. the remote
+// dashboard restarted) and the local-recovery buttons (Retry/Repair) can't
+// fix it — only re-establishing the remote session can. A connected oauth
+// session, or a token/local gateway, boots for some other reason the
+// local-recovery buttons address, so those return false here.
+export function isRemoteReauthFailure(config: DesktopConnectionConfig | null | undefined): boolean {
+  if (!config) {
+    return false
+  }
+
+  return (
+    config.mode === 'remote' &&
+    config.remoteAuthMode === 'oauth' &&
+    !config.remoteOauthConnected &&
+    Boolean(config.remoteUrl)
+  )
+}
+
+// Derive the password flag + display label from the probed providers. A
+// gateway is treated as password-style only when EVERY advertised provider
+// supports password (a mixed deployment keeps the generic OAuth copy), so the
+// button copy matches the login window the user is about to see.
+export function deriveProviderShape(providers: DesktopAuthProvider[] | null | undefined): {
+  isPassword: boolean
+  providerLabel: string
+} {
+  const list = providers ?? []
+
+  if (list.length === 0) {
+    return { isPassword: false, providerLabel: 'your identity provider' }
+  }
+
+  const isPassword = list.every(p => Boolean(p.supportsPassword))
+
+  const providerLabel =
+    list.length === 1
+      ? list[0].displayName || list[0].name
+      : list.map(p => p.displayName || p.name).join(' / ')
+
+  return { isPassword, providerLabel }
+}
+
+// Button copy for the remote sign-in action.
+export function signInLabel(reauth: RemoteReauth | null, copy: SignInCopy = DEFAULT_SIGN_IN_COPY): string {
+  if (reauth?.isPassword) {
+    return copy.remoteGateway
+  }
+
+  const provider = reauth?.providerLabel === DEFAULT_SIGN_IN_COPY.identityProvider ? copy.identityProvider : reauth?.providerLabel
+
+  return copy.withProvider(provider ?? copy.identityProvider)
+}

package/src/components/brand-mark.tsx

@@ -0,0 +1,19 @@
+import { cn } from '@/lib/utils'
+
+const assetPath = (path: string) => `${import.meta.env.BASE_URL}${path.replace(/^\/+/, '')}`
+
+// Brand badge: NasTech logo mark on a white tile, identical in light/dark.
+// Fills the tile (softly rounded); size via className (default size-14).
+export function BrandMark({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn(
+        'inline-flex size-14 shrink-0 items-center justify-center overflow-hidden rounded-md bg-white',
+        className
+      )}
+      {...props}
+    >
+      <img alt="" className="size-full object-contain" src={assetPath('nastech-logo.png')} />
+    </span>
+  )
+}

package/src/components/chat/activity-timer-text.tsx

@@ -0,0 +1,24 @@
+import { cn } from '@/lib/utils'
+
+import { formatElapsed } from './activity-timer'
+
+interface ActivityTimerTextProps {
+  seconds: number
+  className?: string
+}
+
+export function ActivityTimerText({ seconds, className }: ActivityTimerTextProps) {
+  return (
+    <span
+      className={cn(
+        // Tinted with --dt-midground (very low alpha) so the timer reads
+        // as part of the same "live signal" cluster as the dither block /
+        // arc-border / working-session dot, instead of being neutral chrome.
+        'shrink-0 font-mono text-[0.56rem] leading-none tracking-[0.02em] text-midground/55 tabular-nums',
+        className
+      )}
+    >
+      {formatElapsed(seconds)}
+    </span>
+  )
+}

package/src/components/chat/activity-timer.test.tsx

@@ -0,0 +1,43 @@
+import { act, render, screen } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { __resetElapsedTimerRegistryForTests, useElapsedSeconds } from './activity-timer'
+
+function Probe({ active, timerKey }: { active: boolean; timerKey?: string }) {
+  const elapsed = useElapsedSeconds(active, timerKey)
+
+  return <span data-testid="elapsed">{elapsed}</span>
+}
+
+describe('useElapsedSeconds', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-01-01T00:00:00.000Z'))
+    __resetElapsedTimerRegistryForTests()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    __resetElapsedTimerRegistryForTests()
+  })
+
+  it('keeps elapsed time stable across remounts for the same key', () => {
+    const first = render(<Probe active timerKey="tool:abc" />)
+
+    act(() => {
+      vi.advanceTimersByTime(5_000)
+    })
+
+    expect(screen.getByTestId('elapsed').textContent).toBe('5')
+
+    first.unmount()
+
+    act(() => {
+      vi.advanceTimersByTime(3_000)
+    })
+
+    render(<Probe active timerKey="tool:abc" />)
+
+    expect(screen.getByTestId('elapsed').textContent).toBe('8')
+  })
+})