nastechai-desktop 18.1.0

package/src/components/ui/action-status.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react'
+
+import { Check, Loader2 } from '@/lib/icons'
+
+// idle → saving → done label+icon for action buttons (create / rename / delete…).
+export function ActionStatus({
+  state,
+  idle,
+  busy,
+  done,
+  idleIcon = null
+}: {
+  state: 'done' | 'idle' | 'saving'
+  idle: string
+  busy: string
+  done: string
+  idleIcon?: ReactNode
+}) {
+  return (
+    <>
+      {state === 'saving' ? <Loader2 className="animate-spin" /> : state === 'done' ? <Check /> : idleIcon}
+      {state === 'saving' ? busy : state === 'done' ? done : idle}
+    </>
+  )
+}

package/src/components/ui/alert.tsx

@@ -0,0 +1,53 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const alertVariants = cva(
+  'relative grid w-full grid-cols-[auto_minmax(0,1fr)] items-start gap-x-3 gap-y-1 rounded-lg border bg-card px-4 py-3 text-sm text-card-foreground shadow-xs [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'border-border',
+        destructive:
+          'border-destructive/35 bg-[color-mix(in_srgb,var(--dt-card)_96%,var(--dt-destructive)_4%)] [&>svg]:text-destructive',
+        warning:
+          'border-primary/30 bg-[color-mix(in_srgb,var(--dt-card)_96%,var(--dt-primary)_4%)] [&>svg]:text-primary',
+        success:
+          'border-primary/25 bg-[color-mix(in_srgb,var(--dt-card)_97%,var(--dt-primary)_3%)] [&>svg]:text-primary'
+      }
+    },
+    defaultVariants: {
+      variant: 'default'
+    }
+  }
+)
+
+function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+  return <div className={cn(alertVariants({ variant }), className)} data-slot="alert" role="alert" {...props} />
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight text-foreground', className)}
+      data-slot="alert-title"
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn(
+        'col-start-2 grid justify-items-start gap-1 text-muted-foreground [&_p]:leading-relaxed',
+        className
+      )}
+      data-slot="alert-description"
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertDescription, AlertTitle }

package/src/components/ui/badge.tsx

@@ -0,0 +1,35 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import { Slot } from 'radix-ui'
+import type * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+// Small status/metadata tag. App radius (not a full pill); tones map to the
+// shared accent/muted/destructive surfaces so badges read consistently.
+const badgeVariants = cva(
+  'inline-flex w-fit shrink-0 items-center gap-1 rounded-[3px] px-1.5 py-0.5 text-[0.65rem] font-medium leading-none whitespace-nowrap [&_svg]:size-3 [&_svg]:pointer-events-none',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary/10 text-primary',
+        muted: 'bg-muted text-muted-foreground',
+        warn: 'bg-amber-500/10 text-amber-600 dark:text-amber-300',
+        destructive: 'bg-destructive/10 text-destructive',
+        outline: 'border border-(--ui-stroke-secondary) text-muted-foreground'
+      }
+    },
+    defaultVariants: { variant: 'default' }
+  }
+)
+
+export interface BadgeProps extends React.ComponentProps<'span'>, VariantProps<typeof badgeVariants> {
+  asChild?: boolean
+}
+
+export function Badge({ asChild = false, className, variant, ...props }: BadgeProps) {
+  const Comp = asChild ? Slot.Root : 'span'
+
+  return <Comp className={cn(badgeVariants({ variant }), className)} data-slot="badge" {...props} />
+}
+
+export { badgeVariants }

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

@@ -0,0 +1,61 @@
+import { useEffect, useState } from 'react'
+import spinners, { type BrailleSpinnerName } from 'unicode-animations'
+
+import { cn } from '@/lib/utils'
+
+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<BrailleSpinnerName, NormalisedSpinner> = (() => {
+  const out = {} as Record<BrailleSpinnerName, NormalisedSpinner>
+
+  for (const name of Object.keys(spinners) as BrailleSpinnerName[]) {
+    const raw = spinners[name]
+
+    out[name] = {
+      frames: raw.frames.map(frame => [...frame][0] ?? '⠀'),
+      interval: raw.interval
+    }
+  }
+
+  return out
+})()
+
+interface BrailleSpinnerProps {
+  ariaLabel?: string
+  className?: string
+  spinner?: BrailleSpinnerName
+}
+
+/**
+ * One-char braille spinner driven by `unicode-animations`. 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 (e.g. the 1.1rem disclosure row).
+ */
+export function BrailleSpinner({ ariaLabel = 'Loading', className, spinner = 'breathe' }: BrailleSpinnerProps) {
+  const spin = FRAMES_BY_NAME[spinner] ?? FRAMES_BY_NAME.breathe!
+  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/button.tsx

@@ -0,0 +1,81 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import { Slot } from 'radix-ui'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+// Text buttons are square (no radius) and sized by padding + line-height — no
+// fixed heights — so they stay snug and scale with content. Only icon buttons
+// (inherently square) carry the shared 4px radius.
+const buttonVariants = cva(
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-[2.5px] text-xs leading-4 font-medium whitespace-nowrap shadow-none transition-all duration-100 outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40',
+        // Quiet action — transparent fill with a 1.5px inset ring (no layout-shifting border).
+        outline:
+          'bg-transparent text-(--ui-text-primary) shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--ui-stroke-secondary)_50%,transparent)] hover:bg-(--chrome-action-hover) hover:text-(--ui-text-primary)',
+        // Soft-fill action (the default "non-primary button" look).
+        secondary:
+          'bg-(--ui-bg-quaternary) text-(--ui-text-primary) hover:bg-(--chrome-action-hover) hover:text-(--ui-text-primary)',
+        ghost: 'text-(--ui-text-secondary) hover:bg-(--chrome-action-hover) hover:text-(--ui-text-primary)',
+        link: 'text-primary underline-offset-4 decoration-current/20 hover:underline',
+        // Boxless inline-text action (no bg/border). Quiet by default — reads as
+        // muted label text, underlines on hover (e.g. "Cancel", "Clear").
+        text: 'text-muted-foreground underline-offset-4 hover:text-foreground hover:underline',
+        // Emphasized inline-text action: bold + always-underlined link. Use for
+        // the actionable affordance in a row ("Change", "Set", "Open logs", …).
+        textStrong: 'font-semibold text-muted-foreground underline underline-offset-4 hover:text-foreground'
+      },
+      size: {
+        default: 'px-3 py-1.5 has-[>svg]:px-2.5',
+        xs: "gap-1 px-2 py-0.5 text-[0.6875rem] leading-4 has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: 'px-2.5 py-1 has-[>svg]:px-2',
+        lg: 'px-5 py-2 text-sm leading-5 has-[>svg]:px-4',
+        // Flush inline text action — no box padding/height. Pair with text/link
+        // variants when the button must sit inline in a heading or sentence
+        // (replaces ad-hoc `h-auto px-0 py-0` overrides).
+        inline: 'h-auto gap-1 p-0 has-[>svg]:px-0',
+        icon: 'size-9 rounded-[4px]',
+        micro: "gap-0.5 px-1.5 py-0 text-[0.625rem] leading-4 has-[>svg]:px-1 [&_svg:not([class*='size-'])]:size-2.5",
+        'icon-xs': "size-6 rounded-[4px] [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm': 'size-8 rounded-[4px]',
+        'icon-lg': 'size-10 rounded-[4px]',
+        'icon-titlebar':
+          'h-(--titlebar-control-height) w-(--titlebar-control-size) rounded-[4px] [&_.codicon]:text-[0.875rem]'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  }
+)
+
+function Button({
+  className,
+  variant = 'default',
+  size = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : 'button'
+
+  return (
+    <Comp
+      className={cn(buttonVariants({ variant, size }), className)}
+      data-size={size}
+      data-slot="button"
+      data-variant={variant}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,27 @@
+import { Checkbox as CheckboxPrimitive } from 'radix-ui'
+import * as React from 'react'
+
+import { Codicon } from '@/components/ui/codicon'
+import { cn } from '@/lib/utils'
+
+function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      className={cn(
+        'peer size-4 shrink-0 rounded-sm border border-input shadow-xs outline-none transition-shadow focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
+        className
+      )}
+      data-slot="checkbox"
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        className="flex items-center justify-center text-current"
+        data-slot="checkbox-indicator"
+      >
+        <Codicon name="check" size="0.875rem" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

package/src/components/ui/codicon.tsx

@@ -0,0 +1,20 @@
+import type * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+export interface CodiconProps extends React.HTMLAttributes<HTMLElement> {
+  name: string
+  size?: number | string
+  spinning?: boolean
+}
+
+export function Codicon({ className, name, size, spinning, style, ...props }: CodiconProps) {
+  return (
+    <i
+      aria-hidden="true"
+      className={cn('codicon', `codicon-${name}`, spinning && 'codicon-modifier-spin', className)}
+      style={{ fontSize: size, ...style }}
+      {...props}
+    />
+  )
+}

package/src/components/ui/command.tsx

@@ -0,0 +1,111 @@
+import { Command as CommandPrimitive } from 'cmdk'
+import * as React from 'react'
+
+import { SearchIcon } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+
+function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      className={cn(
+        'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+        className
+      )}
+      data-slot="command"
+      {...props}
+    />
+  )
+}
+
+function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div className="flex h-11 items-center gap-2 border-b border-border px-3" data-slot="command-input-wrapper">
+      <SearchIcon className="size-4 shrink-0 text-muted-foreground" />
+      <CommandPrimitive.Input
+        className={cn(
+          'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        data-slot="command-input"
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      className={cn('max-h-100 overflow-y-auto overflow-x-hidden', className)}
+      data-slot="command-list"
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      className="py-6 text-center text-sm text-muted-foreground"
+      data-slot="command-empty"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      className={cn(
+        'overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:sticky **:[[cmdk-group-heading]]:top-0 **:[[cmdk-group-heading]]:z-10 **:[[cmdk-group-heading]]:bg-popover **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground',
+        className
+      )}
+      data-slot="command-group"
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      className={cn('-mx-1 h-px bg-border', className)}
+      data-slot="command-separator"
+      {...props}
+    />
+  )
+}
+
+function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      className={cn(
+        'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50',
+        className
+      )}
+      data-slot="command-item"
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
+      data-slot="command-shortcut"
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut
+}

package/src/components/ui/confirm-dialog.tsx

@@ -0,0 +1,109 @@
+import type { ReactNode } from 'react'
+import { useEffect, useState } from 'react'
+
+import { ActionStatus } from '@/components/ui/action-status'
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { useI18n } from '@/i18n'
+import { AlertTriangle } from '@/lib/icons'
+
+interface ConfirmDialogProps {
+  open: boolean
+  onClose: () => void
+  // Does the work. Throw to surface an inline error and keep the dialog open.
+  onConfirm: () => Promise<void> | void
+  title: ReactNode
+  description?: ReactNode
+  confirmLabel?: string
+  busyLabel?: string
+  doneLabel?: string
+  cancelLabel?: string
+  destructive?: boolean
+}
+
+// Shared confirmation dialog: Enter confirms (from anywhere in the dialog),
+// Esc/Cancel/backdrop dismiss. Owns the pending → done → close beat and inline
+// error, so callers pass only an async onConfirm that does the work.
+export function ConfirmDialog({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  confirmLabel,
+  busyLabel,
+  doneLabel,
+  cancelLabel,
+  destructive = false
+}: ConfirmDialogProps) {
+  const { t } = useI18n()
+  const [status, setStatus] = useState<'done' | 'idle' | 'saving'>('idle')
+  const [error, setError] = useState<null | string>(null)
+  const busy = status === 'saving' || status === 'done'
+  const resolvedConfirmLabel = confirmLabel ?? t.common.confirm
+  const resolvedBusyLabel = busyLabel ?? t.common.loading
+  const resolvedDoneLabel = doneLabel ?? t.common.done
+  const resolvedCancelLabel = cancelLabel ?? t.common.cancel
+
+  useEffect(() => {
+    if (open) {
+      setStatus('idle')
+      setError(null)
+    }
+  }, [open])
+
+  async function run() {
+    if (busy) {
+      return
+    }
+
+    setStatus('saving')
+    setError(null)
+
+    try {
+      await onConfirm()
+      setStatus('done')
+      window.setTimeout(onClose, 600)
+    } catch (err) {
+      setStatus('idle')
+      setError(err instanceof Error ? err.message : t.errors.genericFailure)
+    }
+  }
+
+  return (
+    <Dialog onOpenChange={value => !value && !busy && onClose()} open={open}>
+      <DialogContent
+        className="max-w-md"
+        onKeyDown={event => {
+          // Enter/Space confirm regardless of which button holds focus
+          // (preventDefault stops a focused Cancel from swallowing it).
+          if ((event.key === 'Enter' || event.key === ' ') && !busy) {
+            event.preventDefault()
+            void run()
+          }
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description ? <DialogDescription>{description}</DialogDescription> : null}
+        </DialogHeader>
+
+        {error && (
+          <div className="flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
+            <AlertTriangle className="mt-0.5 size-3.5 shrink-0" />
+            <span>{error}</span>
+          </div>
+        )}
+
+        <DialogFooter>
+          <Button disabled={busy} onClick={onClose} type="button" variant="ghost">
+            {resolvedCancelLabel}
+          </Button>
+          <Button disabled={busy} onClick={() => void run()} variant={destructive ? 'destructive' : 'default'}>
+            <ActionStatus busy={resolvedBusyLabel} done={resolvedDoneLabel} idle={resolvedConfirmLabel} state={status} />
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,141 @@
+import { ContextMenu as ContextMenuPrimitive } from 'radix-ui'
+import * as React from 'react'
+
+import { Codicon } from '@/components/ui/codicon'
+import { cn } from '@/lib/utils'
+
+function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+}
+
+function ContextMenuTrigger({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+}
+
+function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+}
+
+function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        className={cn(
+          'z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-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
+        )}
+        data-slot="context-menu-content"
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      className={cn(
+        "relative flex cursor-default 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="context-menu-item"
+      data-variant={variant}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.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="context-menu-label"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      className={cn('-mx-1 my-1 h-px bg-(--ui-stroke-tertiary)', className)}
+      data-slot="context-menu-separator"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      className={cn(
+        "flex cursor-default 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="context-menu-sub-trigger"
+      {...props}
+    >
+      {children}
+      <Codicon className="ml-auto text-(--ui-text-tertiary)" name="chevron-right" size="1rem" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      className={cn(
+        'z-50 min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-hidden 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
+      )}
+      data-slot="context-menu-sub-content"
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger
+}