nastechai-desktop 18.1.0

package/src/components/model-picker.tsx

@@ -0,0 +1,340 @@
+import { useQuery } from '@tanstack/react-query'
+import { useState } from 'react'
+
+import { useI18n } from '@/i18n'
+import type { ModelOptionProvider, ModelOptionsResponse, ModelPricing } from '@/types/nastech'
+
+import type { NasTechGateway } from '../nastech'
+import { getGlobalModelOptions } from '../nastech'
+import { cn } from '../lib/utils'
+import { startManualOnboarding } from '../store/onboarding'
+
+import { InlineNotice } from './notifications'
+import { Button } from './ui/button'
+import { Checkbox } from './ui/checkbox'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from './ui/command'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from './ui/dialog'
+import { Skeleton } from './ui/skeleton'
+
+interface ModelPickerDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  gw?: NasTechGateway
+  sessionId?: string | null
+  currentModel: string
+  currentProvider: string
+  onSelect: (selection: { provider: string; model: string; persistGlobal: boolean }) => void
+  /**
+   * Optional class to apply to DialogContent. Use to override z-index when
+   * stacking the picker on top of another fixed overlay (e.g. the desktop
+   * onboarding overlay, which sits at z-1300; the default Dialog z-130 ends
+   * up rendering underneath and blocks pointer events).
+   */
+  contentClassName?: string
+}
+
+export function ModelPickerDialog({
+  open,
+  onOpenChange,
+  gw,
+  sessionId,
+  currentModel,
+  currentProvider,
+  onSelect,
+  contentClassName
+}: ModelPickerDialogProps) {
+  const { t } = useI18n()
+  const copy = t.modelPicker
+  const [persistGlobal, setPersistGlobal] = useState(!sessionId)
+  // Own the search term so we can filter manually. cmdk's built-in
+  // shouldFilter reorders items by its fuzzy-match score (≈alphabetical with
+  // an empty query), which destroys the backend's curated order. We disable
+  // it and do a plain substring filter that preserves array order — matching
+  // the `NASTECH model` CLI picker, which shows the curated list verbatim.
+  const [search, setSearch] = useState('')
+
+  const modelOptions = useQuery({
+    queryKey: ['model-options', sessionId || 'global'],
+    queryFn: () => {
+      if (gw && sessionId) {
+        return gw.request<ModelOptionsResponse>('model.options', {
+          session_id: sessionId
+        })
+      }
+
+      return getGlobalModelOptions()
+    },
+    enabled: open
+  })
+
+  const providers = modelOptions.data?.providers ?? []
+  const optionsModel = String(modelOptions.data?.model ?? currentModel ?? '')
+  const optionsProvider = String(modelOptions.data?.provider ?? currentProvider ?? '')
+  const loading = modelOptions.isPending && !modelOptions.data
+
+  const error = modelOptions.error
+    ? modelOptions.error instanceof Error
+      ? modelOptions.error.message
+      : String(modelOptions.error)
+    : null
+
+  const selectModel = (provider: ModelOptionProvider, model: string) => {
+    onSelect({
+      provider: provider.slug,
+      model,
+      persistGlobal: persistGlobal || !sessionId
+    })
+    onOpenChange(false)
+  }
+
+  // Open the full onboarding provider selector to add/switch a provider.
+  // Reuses the entire onboarding flow (OAuth rows, API-key form, device-code,
+  // model-confirm) instead of duplicating provider UI here. Closes the picker
+  // so the onboarding overlay (z-1300) isn't rendered underneath it.
+  const addProvider = () => {
+    startManualOnboarding()
+    onOpenChange(false)
+  }
+
+  return (
+    <Dialog onOpenChange={onOpenChange} open={open}>
+      <DialogContent className={cn('max-h-[85vh] max-w-2xl gap-0 overflow-hidden p-0', contentClassName)}>
+        <DialogHeader className="border-b border-border px-4 py-3">
+          <DialogTitle>{copy.title}</DialogTitle>
+          <DialogDescription className="font-mono text-xs leading-relaxed">
+            {copy.current} {optionsModel || currentModel || copy.unknown}
+            {optionsProvider || currentProvider ? ` · ${optionsProvider || currentProvider}` : ''}
+          </DialogDescription>
+        </DialogHeader>
+
+        <Command className="rounded-none bg-card" shouldFilter={false}>
+          <CommandInput
+            autoFocus
+            onValueChange={setSearch}
+            placeholder={copy.search}
+            value={search}
+          />
+          <CommandList className="max-h-96">
+            {!loading && !error && <CommandEmpty>{copy.noModels}</CommandEmpty>}
+            <ModelResults
+              currentModel={optionsModel || currentModel}
+              currentProvider={optionsProvider || currentProvider}
+              error={error}
+              loading={loading}
+              onSelectModel={selectModel}
+              providers={providers}
+              search={search}
+            />
+          </CommandList>
+        </Command>
+
+        <DialogFooter className="flex-row items-center justify-between gap-3 bg-card p-3 sm:justify-between">
+          <label className="flex cursor-pointer select-none items-center gap-2 text-xs text-muted-foreground">
+            <Checkbox
+              checked={persistGlobal || !sessionId}
+              disabled={!sessionId}
+              onCheckedChange={checked => setPersistGlobal(checked === true)}
+            />
+            {sessionId ? copy.persistGlobalSession : copy.persistGlobal}
+          </label>
+
+          <div className="flex items-center gap-2">
+            <Button onClick={addProvider} variant="ghost">
+              {copy.addProvider}
+            </Button>
+            <Button onClick={() => onOpenChange(false)} variant="outline">
+              {t.common.cancel}
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function ModelResults({
+  loading,
+  error,
+  providers,
+  currentModel,
+  currentProvider,
+  onSelectModel,
+  search
+}: {
+  loading: boolean
+  error: string | null
+  providers: ModelOptionProvider[]
+  currentModel: string
+  currentProvider: string
+  onSelectModel: (provider: ModelOptionProvider, model: string) => void
+  search: string
+}) {
+  const { t } = useI18n()
+  const copy = t.modelPicker
+
+  if (loading) {
+    return <LoadingResults />
+  }
+
+  if (error) {
+    return (
+      <div className="px-3 py-3">
+        <InlineNotice kind="error" title={copy.loadFailed}>
+          {error}
+        </InlineNotice>
+      </div>
+    )
+  }
+
+  if (providers.length === 0) {
+    return <div className="px-4 py-6 text-sm text-muted-foreground">{copy.noAuthenticatedProviders}</div>
+  }
+
+  const q = search.trim().toLowerCase()
+
+  const matches = (provider: ModelOptionProvider, model: string) =>
+    !q ||
+    model.toLowerCase().includes(q) ||
+    provider.name.toLowerCase().includes(q) ||
+    provider.slug.toLowerCase().includes(q)
+
+  // Only configured providers (those with curated models) are selectable
+  // here. Switching to a NOT-yet-configured provider goes through the
+  // "Add provider" footer button, which opens the full onboarding selector.
+  const configured = providers.filter(p => (p.models ?? []).length > 0)
+
+  return (
+    <>
+      {configured.map(provider => {
+        // Preserve the backend's curated order — filter in place, no re-sort.
+        const models = (provider.models ?? []).filter(m => matches(provider, m))
+
+        if (models.length === 0) {
+          return null
+        }
+
+        const unavailable = new Set(provider.unavailable_models ?? [])
+
+        return (
+          <CommandGroup heading={<ProviderHeading provider={provider} />} key={provider.slug}>
+            {provider.warning && (
+              <div className="px-2 pb-2">
+                <InlineNotice className="px-2.5 py-1.5 text-xs" kind="warning">
+                  {provider.warning}
+                </InlineNotice>
+              </div>
+            )}
+            {models.map(model => {
+              const isCurrent = model === currentModel && provider.slug === currentProvider
+              const price = provider.pricing?.[model]
+              const locked = unavailable.has(model)
+
+              return (
+                <CommandItem
+                  className={cn(
+                    'flex items-center gap-2 pl-6 font-mono',
+                    isCurrent &&
+                      'bg-primary text-primary-foreground data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground',
+                    locked && 'cursor-not-allowed opacity-45'
+                  )}
+                  disabled={locked}
+                  key={`${provider.slug}:${model}`}
+                  onSelect={() => {
+                    if (!locked) {
+                      onSelectModel(provider, model)
+                    }
+                  }}
+                  value={`${provider.slug}:${model}`}
+                >
+                  <span className="min-w-0 flex-1 truncate">{model}</span>
+                  {locked && <span className="shrink-0 text-[0.62rem] uppercase tracking-wide opacity-80">{copy.pro}</span>}
+                  <ModelPrice isCurrent={isCurrent} price={price} />
+                </CommandItem>
+              )
+            })}
+            {unavailable.size > 0 && (
+              <div className="px-6 pb-2 pt-1 text-[0.62rem] leading-relaxed text-muted-foreground">
+                {copy.proNeedsSubscription}
+              </div>
+            )}
+          </CommandGroup>
+        )
+      })}
+    </>
+  )
+}
+
+// Compact In/Out $/Mtok price tag, mirroring the CLI picker's price columns.
+// Renders nothing when pricing is unavailable for the model.
+function ModelPrice({ price, isCurrent }: { price?: ModelPricing; isCurrent: boolean }) {
+  const { t } = useI18n()
+  const copy = t.modelPicker
+
+  if (!price || (!price.input && !price.output)) {
+    return null
+  }
+
+  if (price.free) {
+    return (
+      <span
+        className={cn(
+          'shrink-0 rounded-sm px-1 py-0.5 text-[0.62rem] font-semibold uppercase tracking-wide',
+          isCurrent ? 'bg-primary-foreground/20' : 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400'
+        )}
+      >
+        {copy.free}
+      </span>
+    )
+  }
+
+  return (
+    <span
+      className={cn(
+        'shrink-0 text-[0.66rem] tabular-nums',
+        isCurrent ? 'text-primary-foreground/80' : 'text-muted-foreground'
+      )}
+      title={copy.priceTitle}
+    >
+      {price.input || '?'} / {price.output || '?'}
+    </span>
+  )
+}
+
+function LoadingResults() {
+  return (
+    <CommandGroup heading={<Skeleton className="h-3 w-32" />}>
+      {Array.from({ length: 4 }, (_, rowIndex) => (
+        <div className="rounded-sm py-1.5 pl-6 pr-2" key={rowIndex}>
+          <Skeleton className={cn('h-5', rowIndex % 3 === 0 ? 'w-3/5' : rowIndex % 3 === 1 ? 'w-4/5' : 'w-1/2')} />
+        </div>
+      ))}
+    </CommandGroup>
+  )
+}
+
+function ProviderHeading({ provider }: { provider: ModelOptionProvider }) {
+  const { t } = useI18n()
+  const copy = t.modelPicker
+
+  // free_tier is only set for NasTech Portal. true → "Free tier", false → "Pro".
+  const tierBadge =
+    provider.free_tier === true ? (
+      <span className="rounded-sm bg-emerald-500/15 px-1 py-0.5 text-[0.6rem] font-semibold uppercase tracking-wide text-emerald-600 dark:text-emerald-400">
+        {copy.freeTier}
+      </span>
+    ) : provider.free_tier === false ? (
+      <span className="rounded-sm bg-primary/15 px-1 py-0.5 text-[0.6rem] font-semibold uppercase tracking-wide text-primary">
+        {copy.pro}
+      </span>
+    ) : null
+
+  return (
+    <span className="flex min-w-0 items-center gap-2">
+      <span className="truncate">{provider.name}</span>
+      <span className="font-mono text-xs font-normal normal-case tracking-normal text-muted-foreground">
+        {provider.slug} · {provider.total_models ?? provider.models?.length ?? 0}
+      </span>
+      {tierBadge}
+    </span>
+  )
+}

package/src/components/model-visibility-dialog.tsx

@@ -0,0 +1,155 @@
+import { useStore } from '@nanostores/react'
+import { useQuery } from '@tanstack/react-query'
+import { useMemo, useState } from 'react'
+
+import { BrailleSpinner } from '@/components/ui/braille-spinner'
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Switch } from '@/components/ui/switch'
+import type { NasTechGateway } from '@/nastech'
+import { getGlobalModelOptions } from '@/nastech'
+import { useI18n } from '@/i18n'
+import { displayModelName, modelDisplayParts } from '@/lib/model-status-label'
+import {
+  $visibleModels,
+  collapseModelFamilies,
+  effectiveVisibleKeys,
+  modelVisibilityKey,
+  setVisibleModels
+} from '@/store/model-visibility'
+import type { ModelOptionProvider, ModelOptionsResponse } from '@/types/nastech'
+
+interface ModelVisibilityDialogProps {
+  gw?: NasTechGateway
+  onOpenChange: (open: boolean) => void
+  onOpenProviders: () => void
+  open: boolean
+  sessionId?: string | null
+}
+
+export function ModelVisibilityDialog({
+  gw,
+  onOpenChange,
+  onOpenProviders,
+  open,
+  sessionId
+}: ModelVisibilityDialogProps) {
+  const { t } = useI18n()
+  const copy = t.modelVisibility
+  const [search, setSearch] = useState('')
+  const stored = useStore($visibleModels)
+
+  const modelOptions = useQuery({
+    queryKey: ['model-options', sessionId || 'global'],
+    queryFn: (): Promise<ModelOptionsResponse> => {
+      if (gw && sessionId) {
+        return gw.request<ModelOptionsResponse>('model.options', { session_id: sessionId })
+      }
+
+      return getGlobalModelOptions()
+    },
+    enabled: open
+  })
+
+  const providers = useMemo(
+    () => (modelOptions.data?.providers ?? []).filter(provider => (provider.models ?? []).length > 0),
+    [modelOptions.data]
+  )
+
+  const visible = effectiveVisibleKeys(stored, providers)
+
+  const toggle = (provider: ModelOptionProvider, model: string) => {
+    const next = new Set(effectiveVisibleKeys($visibleModels.get(), providers))
+    const key = modelVisibilityKey(provider.slug, model)
+
+    if (next.has(key)) {
+      next.delete(key)
+    } else {
+      next.add(key)
+    }
+
+    setVisibleModels(next)
+  }
+
+  const q = search.trim().toLowerCase()
+
+  const matches = (provider: ModelOptionProvider, model: string) =>
+    !q || `${model} ${provider.name} ${provider.slug} ${displayModelName(model)}`.toLowerCase().includes(q)
+
+  return (
+    <Dialog onOpenChange={onOpenChange} open={open}>
+      <DialogContent className="max-w-xs gap-0 overflow-hidden p-0">
+        <DialogHeader className="px-3 pb-1 pt-3">
+          <DialogTitle className="text-[0.8125rem]">{copy.title}</DialogTitle>
+        </DialogHeader>
+
+        <div className="px-3 py-1.5">
+          <input
+            autoFocus
+            className="h-5 w-full bg-transparent text-xs text-foreground placeholder:text-(--ui-text-tertiary) focus:outline-none"
+            onChange={event => setSearch(event.target.value)}
+            placeholder={copy.search}
+            type="text"
+            value={search}
+          />
+        </div>
+
+        <div className="max-h-[55vh] overflow-y-auto pb-1">
+          {providers.length === 0 ? (
+            <div className="px-3 py-5 text-center text-xs text-muted-foreground">
+              {modelOptions.isPending ? <BrailleSpinner className="mx-auto text-sm" /> : copy.noAuthenticatedProviders}
+            </div>
+          ) : (
+            providers.map(provider => {
+              const models = collapseModelFamilies(provider.models ?? []).filter(family => matches(provider, family.id))
+
+              if (models.length === 0) {
+                return null
+              }
+
+              return (
+                <div className="py-0.5" key={provider.slug}>
+                  <div className="px-3 pb-0.5 pt-1 text-[0.625rem] font-medium uppercase tracking-wide text-(--ui-text-tertiary)">
+                    {provider.name}
+                  </div>
+                  {models.map(family => {
+                    const { name, tag } = modelDisplayParts(family.id)
+                    const key = modelVisibilityKey(provider.slug, family.id)
+
+                    return (
+                      <label
+                        className="flex cursor-pointer items-center gap-2 px-3 py-1 text-xs hover:bg-accent/50"
+                        key={key}
+                      >
+                        <span className="min-w-0 flex-1 truncate">
+                          {name}
+                          {tag ? <span className="text-(--ui-text-tertiary)"> {tag}</span> : null}
+                        </span>
+                        <Switch checked={visible.has(key)} onCheckedChange={() => toggle(provider, family.id)} />
+                      </label>
+                    )
+                  })}
+                </div>
+              )
+            })
+          )}
+        </div>
+
+        <div className="px-3 py-2">
+          <Button
+            className="-ml-2 text-(--ui-text-tertiary)"
+            onClick={() => {
+              onOpenChange(false)
+              onOpenProviders()
+            }}
+            size="xs"
+            type="button"
+            variant="text"
+          >
+            {copy.addProvider}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/notifications.tsx

@@ -0,0 +1,196 @@
+import { useStore } from '@nanostores/react'
+import { type ReactNode, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
+import { CopyButton } from '@/components/ui/copy-button'
+import { useI18n } from '@/i18n'
+import { triggerHaptic } from '@/lib/haptics'
+import { AlertCircle, AlertTriangle, CheckCircle2, type IconComponent, Info } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+import {
+  $notifications,
+  type AppNotification,
+  clearNotifications,
+  dismissNotification,
+  type NotificationKind
+} from '@/store/notifications'
+
+type ToneVariant = 'default' | 'destructive' | 'warning' | 'success'
+
+const tone: Record<NotificationKind, { icon: IconComponent; iconClass: string; variant: ToneVariant }> = {
+  error: { icon: AlertCircle, iconClass: 'text-destructive', variant: 'destructive' },
+  warning: { icon: AlertTriangle, iconClass: 'text-primary', variant: 'warning' },
+  info: { icon: Info, iconClass: 'text-muted-foreground', variant: 'default' },
+  success: { icon: CheckCircle2, iconClass: 'text-primary', variant: 'success' }
+}
+
+const STACK_SURFACE = 'pointer-events-auto border border-(--stroke-nastech) bg-popover/95 shadow-nastech backdrop-blur-md'
+
+export function NotificationStack() {
+  const notifications = useStore($notifications)
+  const { t } = useI18n()
+  const lastNotificationIdRef = useRef<string | null>(null)
+  const [expanded, setExpanded] = useState(false)
+  const copy = t.notifications
+
+  useEffect(() => {
+    if (notifications.length <= 1) {
+      setExpanded(false)
+    }
+  }, [notifications.length])
+
+  useEffect(() => {
+    const latest = notifications[0]
+
+    if (!latest || latest.id === lastNotificationIdRef.current) {
+      return
+    }
+
+    lastNotificationIdRef.current = latest.id
+
+    if (latest.kind === 'success') {
+      triggerHaptic('success')
+    } else if (latest.kind === 'error') {
+      triggerHaptic('error')
+    } else if (latest.kind === 'warning') {
+      triggerHaptic('warning')
+    }
+  }, [notifications])
+
+  if (notifications.length === 0) {
+    return null
+  }
+
+  const [latest, ...olderNotifications] = notifications
+  const overflowCount = olderNotifications.length
+
+  // Portaled to <body> with a z above the Radix dialog layer (overlay z-[120],
+  // content z-[130]). Without the portal the stack lives inside the React root
+  // subtree, which any body-level dialog/overlay portal paints over — so a
+  // success toast fired while a dialog is open (or over an OverlayView page)
+  // was invisible. The titlebar-height var only exists inside the app shell
+  // scope, so fall back to its constant (34px) when mounted on <body>.
+  return createPortal(
+    <div
+      aria-label={copy.region}
+      className="pointer-events-none fixed left-1/2 top-[calc(var(--titlebar-height,34px)+0.75rem)] z-[200] flex w-[min(32rem,calc(100%-2rem))] -translate-x-1/2 flex-col gap-2"
+      role="region"
+    >
+      <NotificationItem notification={latest} />
+      {expanded && olderNotifications.map(n => <NotificationItem key={n.id} notification={n} />)}
+      {overflowCount > 0 && (
+        <div className={cn(STACK_SURFACE, 'flex min-h-8 items-center justify-between rounded-lg px-3 text-xs')}>
+          <Button className="-ml-2 font-medium" onClick={() => setExpanded(v => !v)} size="xs" type="button" variant="text">
+            {expanded ? copy.hide : copy.show} {copy.more(overflowCount)}
+          </Button>
+          <Button className="-mr-2" onClick={clearNotifications} size="xs" type="button" variant="text">
+            {copy.clearAll}
+          </Button>
+        </div>
+      )}
+    </div>,
+    document.body
+  )
+}
+
+function NotificationItem({ notification }: { notification: AppNotification }) {
+  const styles = tone[notification.kind]
+  const Icon = styles.icon
+  const hasDetail = Boolean(notification.detail && notification.detail !== notification.message)
+  const { t } = useI18n()
+  const copy = t.notifications
+
+  return (
+    <Alert
+      aria-live={notification.kind === 'error' ? 'assertive' : 'polite'}
+      className={cn(STACK_SURFACE, 'grid-cols-[auto_minmax(0,1fr)_auto] pr-2.5')}
+      role={notification.kind === 'error' ? 'alert' : 'status'}
+      variant="default"
+    >
+      <Icon className={styles.iconClass} />
+      <div className="col-start-2 min-w-0">
+        {notification.title && <AlertTitle className="col-start-auto">{notification.title}</AlertTitle>}
+        <AlertDescription className="col-start-auto">
+          <p className="m-0">{notification.message}</p>
+          {hasDetail && <NotificationDetail detail={notification.detail || ''} />}
+          {notification.action && (
+            <Button
+              className="mt-1.5 bg-primary/15 font-medium text-primary hover:bg-primary/25 hover:text-primary"
+              onClick={() => {
+                notification.action?.onClick()
+                dismissNotification(notification.id)
+              }}
+              size="xs"
+              type="button"
+              variant="ghost"
+            >
+              {notification.action.label}
+            </Button>
+          )}
+        </AlertDescription>
+      </div>
+      <Button
+        aria-label={copy.dismiss}
+        className="col-start-3 -mr-1 text-muted-foreground"
+        onClick={() => dismissNotification(notification.id)}
+        size="icon-xs"
+        type="button"
+        variant="ghost"
+      >
+        <Codicon name="close" size="0.875rem" />
+      </Button>
+    </Alert>
+  )
+}
+
+function NotificationDetail({ detail }: { detail: string }) {
+  const { t } = useI18n()
+  const copy = t.notifications
+
+  return (
+    <details className="mt-2 text-xs text-muted-foreground">
+      <summary className="select-none font-medium text-muted-foreground hover:text-foreground">{copy.details}</summary>
+      <div className="mt-1 rounded-md bg-background/65 p-2">
+        <pre className="max-h-32 whitespace-pre-wrap wrap-break-word font-mono text-[0.6875rem] leading-relaxed">
+          {detail}
+        </pre>
+        <CopyButton
+          appearance="inline"
+          className="mt-1 inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[0.6875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
+          errorMessage={copy.copyDetailFailed}
+          iconClassName="size-3"
+          label={copy.copyDetail}
+          text={detail}
+        >
+          {copy.copyDetail}
+        </CopyButton>
+      </div>
+    </details>
+  )
+}
+
+export function InlineNotice({
+  kind = 'info',
+  title,
+  children,
+  className
+}: {
+  kind?: NotificationKind
+  title?: string
+  children: ReactNode
+  className?: string
+}) {
+  const styles = tone[kind]
+  const Icon = styles.icon
+
+  return (
+    <Alert className={cn('min-w-0', className)} role={kind === 'error' ? 'alert' : 'status'} variant={styles.variant}>
+      <Icon />
+      {title && <AlertTitle>{title}</AlertTitle>}
+      <AlertDescription className={cn(!title && 'row-start-1')}>{children}</AlertDescription>
+    </Alert>
+  )
+}