nastechai-desktop 18.1.0

package/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,291 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui'
+import * as React from 'react'
+
+import { Codicon } from '@/components/ui/codicon'
+import { cn } from '@/lib/utils'
+
+// Shared class tokens for edge-to-edge menus (use with `p-0` content): rows go
+// full-width, square, and compact so the highlight spans the whole surface.
+// Reuse these instead of re-deriving per menu so every searchable/compact menu
+// reads identically.
+export const dropdownMenuRow = 'gap-2 rounded-none px-2.5 py-1 text-xs'
+export const dropdownMenuSectionLabel = 'px-2.5 pt-1 pb-0.5 text-[0.625rem] font-medium uppercase tracking-wide'
+
+// Keys that must reach Radix's menu handler (navigation/close). Everything else
+// is a filter keystroke and is stopped so the menu's typeahead doesn't hijack it.
+const DROPDOWN_NAV_KEYS = new Set(['ArrowDown', 'ArrowUp', 'Enter', 'Escape', 'Tab'])
+
+function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+}
+
+function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
+}
+
+/**
+ * Borderless filter input for a searchable dropdown. Autofocuses, keeps the
+ * menu's typeahead from eating keystrokes, and still lets arrow/enter/escape
+ * drive the list. Drop it in as the first child of a `DropdownMenuContent`.
+ */
+function DropdownMenuSearch({
+  className,
+  onChange,
+  onKeyDown,
+  onValueChange,
+  ...props
+}: Omit<React.ComponentProps<'input'>, 'type'> & {
+  onValueChange?: (value: string) => void
+}) {
+  return (
+    <div className="px-2.5 py-1.5" data-slot="dropdown-menu-search">
+      <input
+        autoFocus
+        className={cn(
+          'h-4 w-full bg-transparent text-xs leading-none text-foreground placeholder:text-(--ui-text-tertiary) focus:outline-none',
+          className
+        )}
+        onChange={event => {
+          onChange?.(event)
+          onValueChange?.(event.target.value)
+        }}
+        onKeyDown={event => {
+          if (!DROPDOWN_NAV_KEYS.has(event.key)) {
+            event.stopPropagation()
+          }
+
+          onKeyDown?.(event)
+        }}
+        type="text"
+        {...props}
+      />
+    </div>
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  collisionPadding = 8,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        // `dt-portal-scrollbar` reproduces the thin themed scrollbar from
+        // `.scrollbar-dt` for portaled overlays (Radix renders this under
+        // document.body, outside #root's scope). See styles.css.
+        className={cn(
+          'dt-portal-scrollbar z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-36 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-(--ui-stroke-secondary) bg-[color-mix(in_srgb,var(--ui-bg-elevated)_96%,transparent)] p-1 text-[length:var(--conversation-text-font-size)] text-popover-foreground shadow-md backdrop-blur-md data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 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]:zoom-in-95',
+          className
+        )}
+        // Keep the menu inside the viewport: Radix flips/shifts away from edges
+        // (avoidCollisions defaults on); the padding stops it kissing the edge.
+        collisionPadding={collisionPadding}
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      className={cn(
+        "relative flex items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none focus:bg-(--ui-control-active-background) focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='text-'])]:text-(--ui-text-tertiary) data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      )}
+      data-inset={inset}
+      data-slot="dropdown-menu-item"
+      data-variant={variant}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      checked={checked}
+      className={cn(
+        "relative flex items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none focus:bg-(--ui-control-active-background) focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        className
+      )}
+      data-slot="dropdown-menu-checkbox-item"
+      {...props}
+    >
+      {children}
+      <DropdownMenuPrimitive.ItemIndicator className="ml-auto flex items-center pl-2 text-foreground">
+        <Codicon name="check" size="0.75rem" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      className={cn(
+        "relative flex items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none focus:bg-(--ui-control-active-background) focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        className
+      )}
+      data-slot="dropdown-menu-radio-item"
+      {...props}
+    >
+      {children}
+      <DropdownMenuPrimitive.ItemIndicator className="ml-auto flex items-center pl-2 text-foreground">
+        <Codicon name="check" size="0.75rem" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      className={cn('px-2 py-1 text-xs font-medium text-(--ui-text-tertiary) data-[inset]:pl-7', className)}
+      data-inset={inset}
+      data-slot="dropdown-menu-label"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      className={cn('-mx-1 my-1 h-px bg-(--ui-stroke-tertiary)', className)}
+      data-slot="dropdown-menu-separator"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
+      data-slot="dropdown-menu-shortcut"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  hideChevron = false,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+  /** Suppress the trailing caret — for triggers that own their right-side affordance. */
+  hideChevron?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      className={cn(
+        "flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none focus:bg-(--ui-control-active-background) focus:text-foreground data-[inset]:pl-7 data-[state=open]:bg-(--ui-control-active-background) data-[state=open]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='text-'])]:text-(--ui-text-tertiary)",
+        className
+      )}
+      data-inset={inset}
+      data-slot="dropdown-menu-sub-trigger"
+      {...props}
+    >
+      {children}
+      {!hideChevron && <Codicon className="ml-auto text-(--ui-text-tertiary)" name="chevron-right" size="1rem" />}
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  collisionPadding = 8,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    // Portal the submenu out of the parent Content so it escapes that Content's
+    // `overflow` clip. Without this, a submenu opening from a scrollable menu
+    // gets visually cut off at the parent's edges. Radix Popper still anchors
+    // it to the SubTrigger and handles collision/flip, so portaling is safe.
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.SubContent
+        // `dt-portal-scrollbar` reproduces the themed scrollbar for portaled
+        // overlays (rendered under document.body). Use a fixed `max-h-80`
+        // rather than the Radix available-height variable: that variable is
+        // only published on Content, NOT SubContent — using it here collapses
+        // the submenu to 0px height.
+        className={cn(
+          'dt-portal-scrollbar z-50 max-h-80 min-w-36 origin-(--radix-dropdown-menu-content-transform-origin) overflow-y-auto rounded-lg border border-(--ui-stroke-secondary) bg-[color-mix(in_srgb,var(--ui-bg-elevated)_96%,transparent)] p-1 text-[length:var(--conversation-text-font-size)] text-popover-foreground shadow-md backdrop-blur-md data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 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]:zoom-in-95',
+          className
+        )}
+        // Flip to the other side / shift vertically when near a viewport edge
+        // (e.g. the status bar menu opening from the bottom-right corner) so
+        // the submenu never gets clipped.
+        collisionPadding={collisionPadding}
+        data-slot="dropdown-menu-sub-content"
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSearch,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger
+}

package/src/components/ui/error-state.tsx

@@ -0,0 +1,50 @@
+import type { ReactNode } from 'react'
+
+import { Codicon } from '@/components/ui/codicon'
+import { cn } from '@/lib/utils'
+
+// The single canonical error glyph (codicon's filled error mark). Use this
+// everywhere an error is surfaced (boundaries, dialogs, banners) so failures
+// read identically — one icon, one color, no background chip.
+export function ErrorIcon({ className, size = '1.75rem' }: { className?: string; size?: string }) {
+  return <Codicon className={cn('text-destructive', className)} name="error" size={size} />
+}
+
+export interface ErrorStateProps {
+  /** Optional actions row/stack rendered below the copy. */
+  children?: ReactNode
+  className?: string
+  description?: ReactNode
+  /** Defaults to a destructive AlertCircle. */
+  icon?: ReactNode
+  title: ReactNode
+}
+
+// Shared, presentation-only error layout: the canonical ErrorIcon (no bg chip)
+// over a centered title + body, with an optional actions stack. Used by the
+// React error boundary, the in-dialog update error, and the boot-failure banner
+// so every failure reads the same. Title/description accept nodes so Radix
+// Dialog callers can pass DialogTitle/DialogDescription for accessibility.
+export function ErrorState({ children, className, description, icon, title }: ErrorStateProps) {
+  return (
+    <div className={cn('grid gap-5', className)}>
+      <div className="flex flex-col items-center gap-3 text-center">
+        {icon ?? <ErrorIcon />}
+
+        {typeof title === 'string' ? (
+          <h2 className="text-center text-xl font-semibold tracking-tight">{title}</h2>
+        ) : (
+          title
+        )}
+
+        {typeof description === 'string' ? (
+          <p className="max-w-prose text-center text-sm leading-5 text-muted-foreground">{description}</p>
+        ) : (
+          description
+        )}
+      </div>
+
+      {children && <div className="grid gap-2">{children}</div>}
+    </div>
+  )
+}

package/src/components/ui/fade-text.tsx

@@ -0,0 +1,110 @@
+import type { ComponentProps, CSSProperties } from 'react'
+import { memo, useCallback, useRef, useState } from 'react'
+
+import { useResizeObserver } from '@/hooks/use-resize-observer'
+import { cn } from '@/lib/utils'
+
+interface FadeTextProps extends Omit<ComponentProps<'span'>, 'children'> {
+  children: React.ReactNode
+  /**
+   * Width of the fade region on the trailing edge. Accepts any CSS length.
+   * Defaults to 3rem so long strings clearly trail off — short enough to
+   * preserve readable content, long enough to feel like a deliberate fade
+   * rather than a clipped ellipsis.
+   */
+  fadeWidth?: string
+}
+
+/**
+ * Single-line text that fades out instead of truncating with an ellipsis.
+ *
+ * Uses an inline mask-image so the fade resolves against whatever the parent
+ * background is — no need to know the surface color, no after-pseudo overlap.
+ * The mask is only applied when the text is actually overflowing, so short
+ * strings render as plain text without an unnecessary gradient on their tail.
+ *
+ * Layout reads (`el.scrollWidth`) are forced reflows. To avoid measuring
+ * once per parent re-render — which during streaming happens on every token —
+ * we only re-measure when the ResizeObserver fires (real size changes), not
+ * on every `children` reference change. Wrapped in `memo` with a custom
+ * comparator so scalar-string children skip re-render entirely when the text
+ * is unchanged but the parent re-rendered.
+ */
+function FadeTextImpl({ children, className, fadeWidth = '3rem', style, ...rest }: FadeTextProps) {
+  const ref = useRef<HTMLSpanElement>(null)
+  const [overflowing, setOverflowing] = useState(false)
+
+  const measureOverflow = useCallback(() => {
+    const el = ref.current
+
+    if (!el) {
+      return
+    }
+
+    setOverflowing(el.scrollWidth - el.clientWidth > 1)
+  }, [])
+
+  useResizeObserver(measureOverflow, ref)
+
+  const maskStyle: CSSProperties = overflowing
+    ? {
+        maskImage: `linear-gradient(to right, black calc(100% - ${fadeWidth}), transparent)`,
+        WebkitMaskImage: `linear-gradient(to right, black calc(100% - ${fadeWidth}), transparent)`,
+        ...style
+      }
+    : (style ?? {})
+
+  return (
+    <span
+      {...rest}
+      className={cn('block min-w-0 max-w-full overflow-hidden whitespace-nowrap', className)}
+      ref={ref}
+      style={maskStyle}
+    >
+      {children}
+    </span>
+  )
+}
+
+function styleEqual(a: CSSProperties | undefined, b: CSSProperties | undefined) {
+  if (a === b) {
+    return true
+  }
+
+  if (!a || !b) {
+    return false
+  }
+
+  const aKeys = Object.keys(a)
+
+  if (aKeys.length !== Object.keys(b).length) {
+    return false
+  }
+
+  for (const k of aKeys) {
+    if ((a as Record<string, unknown>)[k] !== (b as Record<string, unknown>)[k]) {
+      return false
+    }
+  }
+
+  return true
+}
+
+export const FadeText = memo(FadeTextImpl, (prev, next) => {
+  if (prev.className !== next.className) {
+    return false
+  }
+
+  if (prev.fadeWidth !== next.fadeWidth) {
+    return false
+  }
+
+  if (!styleEqual(prev.style, next.style)) {
+    return false
+  }
+
+  // Cheap path: the common case is a scalar string/number child. Identity
+  // comparison is correct for any other element type (a new JSX node should
+  // force a re-render).
+  return prev.children === next.children
+})

package/src/components/ui/glyph-spinner.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react'
+import spinners, { type BrailleSpinnerName as SpinnerName } from 'unicode-animations'
+
+import { cn } from '@/lib/utils'
+
+export type { SpinnerName }
+
+interface NormalisedSpinner {
+  frames: readonly string[]
+  interval: number
+}
+
+// Some spinners ship multi-character frames. Pull the first cell so each
+// frame fits in one monospace box — matches how the TUI uses them.
+const FRAMES_BY_NAME: Record<SpinnerName, NormalisedSpinner> = (() => {
+  const out = {} as Record<SpinnerName, NormalisedSpinner>
+
+  for (const name of Object.keys(spinners) as SpinnerName[]) {
+    const raw = spinners[name]
+
+    out[name] = {
+      frames: raw.frames.map(frame => [...frame][0] ?? '⠀'),
+      interval: raw.interval
+    }
+  }
+
+  return out
+})()
+
+interface GlyphSpinnerProps {
+  ariaLabel?: string
+  className?: string
+  spinner?: SpinnerName
+}
+
+/**
+ * One-char glyph spinner driven by `unicode-animations` (braille, orbit, scan,
+ * etc. — pick any `spinner` name). Mirrors the spinner used by the Ink TUI so
+ * the desktop and terminal experiences read the same visually. Renders inside
+ * an `inline-flex` cell with `leading-none` and `items-center` so it sits
+ * vertically centred inside its parent's line-box.
+ */
+export function GlyphSpinner({ ariaLabel = 'Loading', className, spinner = 'braille' }: GlyphSpinnerProps) {
+  const spin = FRAMES_BY_NAME[spinner] ?? FRAMES_BY_NAME.braille!
+  const [frame, setFrame] = useState(0)
+
+  useEffect(() => {
+    setFrame(0)
+    const id = window.setInterval(() => setFrame(f => (f + 1) % spin.frames.length), spin.interval)
+
+    return () => window.clearInterval(id)
+  }, [spin])
+
+  return (
+    <span
+      aria-label={ariaLabel}
+      className={cn('inline-flex items-center justify-center font-mono leading-none tabular-nums', className)}
+      role="status"
+    >
+      {spin.frames[frame]}
+    </span>
+  )
+}

package/src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+import { type ControlVariantProps, controlVariants } from './control'
+
+function Input({ className, type, size, ...props }: Omit<React.ComponentProps<'input'>, 'size'> & ControlVariantProps) {
+  return (
+    <input
+      className={cn(
+        controlVariants({ size }),
+        'selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-xs file:font-medium file:text-foreground',
+        className
+      )}
+      data-slot="input"
+      type={type}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/src/components/ui/kbd.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
+  return (
+    <kbd
+      className={cn(
+        'inline-grid h-4 min-w-4 place-items-center rounded-sm border border-border/70 bg-muted/45 px-1 font-mono text-[0.5625rem] font-medium leading-none text-muted-foreground shadow-xs',
+        className
+      )}
+      data-slot="kbd"
+      {...props}
+    />
+  )
+}
+
+interface KbdGroupProps extends Omit<React.ComponentProps<'span'>, 'children'> {
+  keys: string[]
+}
+
+function KbdGroup({ className, keys, ...props }: KbdGroupProps) {
+  return (
+    <span
+      aria-label={keys.join(' ')}
+      className={cn('inline-flex shrink-0 items-center gap-0.5 opacity-55', className)}
+      data-slot="kbd-group"
+      {...props}
+    >
+      {keys.map(key => (
+        <Kbd key={key}>{key}</Kbd>
+      ))}
+    </span>
+  )
+}
+
+export { Kbd, KbdGroup }