@brimveyn/aimux 1.12.2 → 1.13.0

package/src/ui/components/modals/shared/form.tsx

@@ -1,6 +1,5 @@
 import type { ModeId } from '@brimveyn/aimux-config'
-
-import { type ReactNode } from 'react'
+import type { ReactNode } from 'react'
 
 import { useTheme } from '../../../theme'
 import { InputField } from '../../primitives/input-field'
@@ -84,8 +83,8 @@ export function FieldLabel({ active = false, children, description }: FieldLabel
   const t = useTheme()
   return (
     <box flexDirection="column">
-      {children ? <text fg={active ? t.text : t.textMuted}>{children}</text> : null}
-      {description ? <text fg={t.textMuted}>{description}</text> : null}
+      {children != null ? <text fg={active ? t.text : t.textMuted}>{children}</text> : null}
+      {description != null ? <text fg={t.textMuted}>{description}</text> : null}
     </box>
   )
 }
@@ -100,7 +99,7 @@ export function TextField({
 }: TextFieldProps) {
   return (
     <box flexDirection="column">
-      {label || description ? (
+      {label != null || description != null ? (
         <FieldLabel active={active} description={description}>
           {label}
         </FieldLabel>

package/src/ui/components/modals/shared/modal-shell.tsx

@@ -1,7 +1,7 @@
 import type { ModeId } from '@brimveyn/aimux-config'
+import type { ReactNode } from 'react'
 
 import { type BoxRenderable, type OptimizedBuffer, RGBA } from '@opentui/core'
-import { type ReactNode } from 'react'
 
 import { useTheme, useTransparent } from '../../../theme'
 import { ModalKeybindsOverlay } from './modal-keybinds-overlay'
@@ -81,10 +81,10 @@ export function ModalShell({
         <box width="100%" flexDirection="column" gap={listGap}>
           <box flexDirection="column">
             <text fg={t.text}>{title}</text>
-            {subtitle ? <text fg={t.textMuted}>{subtitle}</text> : null}
+            {subtitle != null && subtitle !== '' ? <text fg={t.textMuted}>{subtitle}</text> : null}
           </box>
           {children}
-          {footer ? <box>{footer}</box> : null}
+          {footer != null ? <box>{footer}</box> : null}
         </box>
       </box>
       {keybindsModeId ? <ModalKeybindsOverlay modeId={keybindsModeId} /> : null}

package/src/ui/components/modals/shared/picker.tsx

@@ -18,6 +18,7 @@ export interface PickerItem {
   onClick?: () => void
   onEdit?: () => void
   onDelete?: () => void
+  onWorktree?: () => void
 }
 
 interface PickerProps {
@@ -38,7 +39,15 @@ interface PickerProps {
 const VIEWPORT_HEIGHT_RATIO = 0.6
 const MODAL_CHROME_ROWS = 6
 
-function PickerItemCtas({ onDelete, onEdit }: { onEdit?: () => void; onDelete?: () => void }) {
+function PickerItemCtas({
+  onDelete,
+  onEdit,
+  onWorktree,
+}: {
+  onEdit?: () => void
+  onDelete?: () => void
+  onWorktree?: () => void
+}) {
   const t = useTheme()
   return (
     <box flexDirection="row" gap={1}>
@@ -52,6 +61,16 @@ function PickerItemCtas({ onDelete, onEdit }: { onEdit?: () => void; onDelete?:
           <text fg={t.primary}>[edit]</text>
         </box>
       ) : null}
+      {onWorktree ? (
+        <box
+          onMouseDown={(event) => {
+            event.stopPropagation()
+            onWorktree()
+          }}
+        >
+          <text fg={t.warning}>[WT]</text>
+        </box>
+      ) : null}
       {onDelete ? (
         <box
           onMouseDown={(event) => {
@@ -105,7 +124,7 @@ export function Picker({
       return
     }
     const target = items[selectedIndex]?.key
-    if (!target) return
+    if (!(target != null && target !== '')) return
     isScrollingRef.current = true
     scrollboxRef.current.scrollChildIntoView(target)
     resetScrollTimer()
@@ -137,7 +156,7 @@ export function Picker({
           for (let index = 0; index < items.length; index++) {
             const item = items[index]
             if (!item) continue
-            if (item.group && item.group !== prevGroup) {
+            if (item.group != null && item.group !== '' && item.group !== prevGroup) {
               nodes.push(
                 <box key={`group::${item.group}`} paddingLeft={1} paddingTop={index === 0 ? 0 : 1}>
                   <text fg={t.textMuted} wrapMode="none">
@@ -151,8 +170,12 @@ export function Picker({
             const capturedIndex = index
             const trailing =
               item.trailing ??
-              (active && (item.onEdit || item.onDelete) ? (
-                <PickerItemCtas onEdit={item.onEdit} onDelete={item.onDelete} />
+              (active && (item.onEdit || item.onDelete || item.onWorktree) ? (
+                <PickerItemCtas
+                  onEdit={item.onEdit}
+                  onDelete={item.onDelete}
+                  onWorktree={item.onWorktree}
+                />
               ) : null)
             nodes.push(
               <ListItem

package/src/ui/components/modals/snippets/snippet-editor-modal.tsx

@@ -2,8 +2,9 @@ import { uiTokens } from '../../../ui-tokens'
 import { Form, TextField } from '../shared/form'
 
 interface SnippetEditorModalProps {
-  activeField: 'name' | 'content'
+  activeField: 'name' | 'trigger' | 'content'
   snippetName: string
+  snippetTrigger: string
   snippetContent: string
   isEditing: boolean
 }
@@ -13,18 +14,21 @@ export function SnippetEditorModal({
   isEditing,
   snippetContent,
   snippetName,
+  snippetTrigger,
 }: SnippetEditorModalProps) {
-  const nameActive = activeField === 'name'
-  const contentActive = activeField === 'content'
-
   return (
     <Form
       title={isEditing ? 'Edit snippet' : 'Create snippet'}
       keybindsModeId="modal.snippet-editor"
       width={uiTokens.modalWidth.xl}
     >
-      <TextField active={nameActive} label="Name" value={snippetName} />
-      <TextField active={contentActive} label="Content" value={snippetContent} />
+      <TextField active={activeField === 'name'} label="Name" value={snippetName} />
+      <TextField
+        active={activeField === 'trigger'}
+        label="Trigger (optional)"
+        value={snippetTrigger}
+      />
+      <TextField active={activeField === 'content'} label="Content" value={snippetContent} />
     </Form>
   )
 }

package/src/ui/components/modals/snippets/snippet-picker-modal.tsx

@@ -2,6 +2,7 @@ import type { SnippetRecord } from '../../../../state/types'
 
 import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
 import { filterSnippets } from '../../../../state/selectors'
+import { isConfigSnippetId } from '../../../../state/snippet-catalog'
 import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { Picker, type PickerItem } from '../shared/picker'
@@ -11,6 +12,7 @@ interface SnippetPickerModalProps {
   selectedIndex: number
   filter: string | null
   cursorPos?: number
+  actionMessage?: string | null
 }
 
 const MAX_PREVIEW_LENGTH = 60
@@ -22,6 +24,7 @@ function truncateContent(content: string): string {
 }
 
 export function SnippetPickerModal({
+  actionMessage,
   cursorPos,
   filter,
   selectedIndex,
@@ -32,19 +35,28 @@ export function SnippetPickerModal({
 
   const items: PickerItem[] = filtered.map((snippet, index) => {
     const active = index === selectedIndex
+    const fromConfig = isConfigSnippetId(snippet.id)
     return {
       key: snippet.id,
       onClick: () => {
         dispatchGlobal({ type: 'close-modal' })
         runSideEffectGlobal({ type: 'paste-selected-snippet' })
       },
-      onDelete: () => runSideEffectGlobal({ type: 'delete-selected-snippet' }),
-      onEdit: () => runSideEffectGlobal({ type: 'edit-selected-snippet' }),
+      onDelete: fromConfig
+        ? undefined
+        : () => runSideEffectGlobal({ type: 'delete-selected-snippet' }),
+      onEdit: fromConfig ? undefined : () => runSideEffectGlobal({ type: 'edit-selected-snippet' }),
       subtitle: <text fg={t.textMuted}>{truncateContent(snippet.content)}</text>,
       title: (
-        <text fg={active ? t.text : t.textMuted}>
-          <strong>{snippet.name}</strong>
-        </text>
+        <box flexDirection="row">
+          <text fg={active ? t.text : t.textMuted}>
+            <strong>{snippet.name}</strong>
+          </text>
+          {snippet.trigger != null && snippet.trigger !== '' ? (
+            <text fg={t.textMuted}>{` :${snippet.trigger}`}</text>
+          ) : null}
+          {fromConfig ? <text fg={t.textMuted}>{' [config]'}</text> : null}
+        </box>
       ),
     }
   })
@@ -61,9 +73,16 @@ export function SnippetPickerModal({
       selectedIndex={selectedIndex}
       emptyState={
         <text fg={t.textMuted}>
-          {filter ? 'No matching snippets.' : 'No snippets yet. Press n to create one.'}
+          {filter != null && filter !== ''
+            ? 'No matching snippets.'
+            : 'No snippets yet. Press n to create one.'}
         </text>
       }
+      footer={
+        actionMessage != null && actionMessage !== '' ? (
+          <text fg={t.error}>{actionMessage}</text>
+        ) : undefined
+      }
       onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
     />
   )

package/src/ui/components/modals/tabs/new-tab-modal.tsx

@@ -1,4 +1,4 @@
-import type { AssistantId } from '../../../../state/types'
+import type { AssistantId, WorktreeRecord } from '../../../../state/types'
 
 import { getAllAssistantOptions, getAssistantOption } from '../../../../pty/command-registry'
 import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
@@ -13,17 +13,59 @@ interface NewTabModalProps {
   customCommands: Record<string, string>
   filter: string | null
   cursorPos?: number
+  currentSessionId: string | null
   editingCommand: AssistantId | null
   editBuffer: string
+  activeField: 'assistant' | 'branch-name' | 'target-worktree' | 'worktree-name'
+  branchError: string | null
+  branchName: string
+  createWorktree: boolean
+  selectedAssistantId: AssistantId | null
+  step: 'assistant' | 'worktree' | 'worktree-create'
+  worktreeDeleteConfirmId: string | null
+  worktreeDeleteMessage: string | null
+  worktrees: WorktreeRecord[]
+  worktreeName: string
+}
+
+function getDeleteBlockedReason({
+  currentSessionId,
+  worktree,
+  worktrees,
+}: {
+  currentSessionId: string | null
+  worktree: WorktreeRecord | undefined
+  worktrees: WorktreeRecord[]
+}): string | null {
+  if (!worktree) return null
+  if (!(currentSessionId != null && currentSessionId !== ''))
+    return 'Cannot delete: no active session.'
+  if (worktrees.length <= 1) return 'Cannot delete: at least one worktree must remain.'
+  if (worktree.source === 'primary') return 'Cannot delete: root worktree is required.'
+  if (worktree.source === 'aimux-temp' && !worktree.createdByAimux) {
+    return 'Cannot delete: this temp worktree was not created by Aimux.'
+  }
+  return null
 }
 
 export function NewTabModal({
+  activeField,
+  branchError,
+  branchName,
+  createWorktree,
+  currentSessionId,
   cursorPos,
   customCommands,
   editBuffer,
   editingCommand,
   filter,
+  selectedAssistantId,
   selectedIndex,
+  step,
+  worktreeDeleteConfirmId,
+  worktreeDeleteMessage,
+  worktreeName,
+  worktrees,
 }: NewTabModalProps) {
   const t = useTheme()
 
@@ -51,17 +93,137 @@ export function NewTabModal({
   const options = getAllAssistantOptions(customCommands)
   const filtered = filterAssistants(options, filter)
 
+  if (step === 'worktree-create') {
+    const selectedAssistant =
+      options.find((option) => option.id === selectedAssistantId) ?? options[0]
+    return (
+      <Form
+        title={`New worktree: ${selectedAssistant?.label ?? 'assistant'}`}
+        keybindsModeId="modal.new-tab.command-edit"
+        width={uiTokens.modalWidth.xl}
+      >
+        <box flexDirection="column" gap={1}>
+          <TextField
+            active={activeField === 'worktree-name'}
+            label="Worktree name"
+            value={worktreeName}
+            cursorPos={activeField === 'worktree-name' ? cursorPos : undefined}
+            placeholder="my-feature"
+          />
+          <box flexDirection="column">
+            <TextField
+              active={activeField === 'branch-name'}
+              label="Branch name"
+              value={branchName}
+              cursorPos={activeField === 'branch-name' ? cursorPos : undefined}
+              placeholder="aimux/my-feature"
+            />
+            {branchError != null && branchError !== '' ? (
+              <text fg={t.error}>{branchError}</text>
+            ) : null}
+          </box>
+          <text fg={t.textMuted}>Step 3/3: configure new worktree</text>
+        </box>
+      </Form>
+    )
+  }
+
+  if (step === 'worktree') {
+    const selectedAssistant =
+      options.find((option) => option.id === selectedAssistantId) ??
+      filtered[selectedIndex] ??
+      options[0]
+    const selectedWorktree = worktrees[selectedIndex]
+    const deleteBlockedReason = getDeleteBlockedReason({
+      currentSessionId,
+      worktree: selectedWorktree,
+      worktrees,
+    })
+    const worktreeItems: PickerItem[] = [
+      ...worktrees.map((worktree, index) => {
+        const active = index === selectedIndex
+        const label = worktree.branch ?? worktree.name
+        const blockedReason = getDeleteBlockedReason({ currentSessionId, worktree, worktrees })
+        const canDelete = blockedReason == null || blockedReason === ''
+        return {
+          key: worktree.id,
+          onClick: () => {
+            dispatchGlobal({ index, type: 'set-modal-selection-index' })
+            runSideEffectGlobal({ type: 'launch-selected-assistant' })
+          },
+          onDelete:
+            active && canDelete && currentSessionId != null && currentSessionId !== ''
+              ? () => {
+                  dispatchGlobal({ index, type: 'set-modal-selection-index' })
+                  dispatchGlobal({ message: null, type: 'set-new-tab-worktree-delete-state' })
+                  runSideEffectGlobal({
+                    force: worktreeDeleteConfirmId === worktree.id,
+                    sessionId: currentSessionId,
+                    type: 'delete-worktree',
+                    worktreeId: worktree.id,
+                  })
+                }
+              : undefined,
+          subtitle: (
+            <box flexDirection="column">
+              <text fg={t.textMuted}>{worktree.path}</text>
+              <text fg={t.textMuted}>{worktree.source}</text>
+            </box>
+          ),
+          title: <text fg={active ? t.text : t.textMuted}>{label}</text>,
+        }
+      }),
+      {
+        key: '__create-worktree__',
+        onClick: () => dispatchGlobal({ type: 'enter-new-tab-worktree-create' }),
+        subtitle: <text fg={t.textMuted}>Create an Aimux temp worktree</text>,
+        title: <text fg={createWorktree ? t.text : t.textMuted}>Create new worktree</text>,
+      },
+    ]
+    return (
+      <Picker
+        title={`New assistant: ${selectedAssistant?.label ?? 'assistant'}`}
+        keybindsModeId="modal.new-tab.command-edit"
+        width={uiTokens.modalWidth.md}
+        gap={1}
+        filter={null}
+        items={worktreeItems}
+        selectedIndex={selectedIndex}
+        emptyState={<text fg={t.textMuted}>No worktrees.</text>}
+        onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
+        footer={
+          <box flexDirection="column">
+            {(worktreeDeleteMessage != null && worktreeDeleteMessage !== '') ||
+            (deleteBlockedReason != null && deleteBlockedReason !== '') ? (
+              <text
+                fg={
+                  worktreeDeleteMessage != null && worktreeDeleteMessage !== ''
+                    ? t.error
+                    : t.textMuted
+                }
+              >
+                {worktreeDeleteMessage ?? deleteBlockedReason}
+              </text>
+            ) : null}
+            <text fg={t.textMuted}>Step 2/2: choose worktree</text>
+            <text fg={t.textMuted}>Enter launches, Ctrl+d deletes selected worktree</text>
+          </box>
+        }
+      />
+    )
+  }
+
   const items: PickerItem[] = filtered.map((option, index) => {
     const active = index === selectedIndex
     const customCmd = customCommands[option.id]
     return {
       key: option.id,
-      onClick: () => runSideEffectGlobal({ type: 'launch-selected-assistant' }),
+      onClick: () => dispatchGlobal({ assistantId: option.id, type: 'select-new-tab-assistant' }),
       onEdit: () => dispatchGlobal({ assistantId: option.id, type: 'open-edit-custom-command' }),
       subtitle: (
         <box flexDirection="column">
           <text fg={t.textMuted}>{option.description}</text>
-          {customCmd ? <text fg={t.primary}>{customCmd}</text> : null}
+          {customCmd != null && customCmd !== '' ? <text fg={t.primary}>{customCmd}</text> : null}
         </box>
       ),
       title: <text fg={active ? t.text : t.textMuted}>{option.label}</text>,
@@ -70,16 +232,22 @@ export function NewTabModal({
 
   return (
     <Picker
-      title="New assistant tab"
+      title="New assistant: choose assistant"
       keybindsModeId="modal.new-tab.command-edit"
       width={uiTokens.modalWidth.md}
       gap={1}
       filter={filter}
-      cursorPos={cursorPos}
+      cursorPos={activeField === 'assistant' ? cursorPos : undefined}
       items={items}
       selectedIndex={selectedIndex}
       emptyState={<text fg={t.textMuted}>No matching assistants.</text>}
       onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
+      footer={
+        <box flexDirection="column">
+          <text fg={t.textMuted}>Step 1/2: choose assistant</text>
+          <text fg={t.textMuted}>Enter continues to worktree selection</text>
+        </box>
+      }
     />
   )
 }

package/src/ui/components/modals/worktree/worktree-move-modal.tsx

@@ -0,0 +1,94 @@
+import type { WorktreeRecord } from '../../../../state/types'
+
+import { dispatchGlobal } from '../../../../state/dispatch-ref'
+import { useTheme } from '../../../theme'
+import { uiTokens } from '../../../ui-tokens'
+import { ListItem } from '../../primitives/list-item'
+import { ModalShell } from '../shared/modal-shell'
+
+interface WorktreeMoveModalProps {
+  deleteSource: boolean
+  divergence: Record<string, { ahead: number; behind: number }>
+  selectedIndex: number
+  sourceLabel: string
+  targets: WorktreeRecord[]
+}
+
+const MOVE_HINTS: [key: string, label: string][] = [
+  ['↵', 'move into selected target'],
+  ['d', 'toggle delete source'],
+  ['j/k', 'change target'],
+  ['esc', 'cancel'],
+]
+
+function formatDivergence(divergence: { ahead: number; behind: number } | undefined): string {
+  if (divergence == null) return ''
+  const parts: string[] = []
+  if (divergence.ahead > 0) parts.push(`↑${divergence.ahead}`)
+  if (divergence.behind > 0) parts.push(`↓${divergence.behind}`)
+  return parts.join(' ')
+}
+
+export function WorktreeMoveModal({
+  deleteSource,
+  divergence,
+  selectedIndex,
+  sourceLabel,
+  targets,
+}: WorktreeMoveModalProps) {
+  const t = useTheme()
+  return (
+    <ModalShell
+      title={`Move ${sourceLabel} →`}
+      keybindsModeId="modal.worktree-move"
+      width={uiTokens.modalWidth.md}
+      footer={
+        <box flexDirection="column" gap={1} marginTop={1}>
+          <box flexDirection="row" gap={1}>
+            <text fg={t.textMuted}>delete source after move</text>
+            <text fg={deleteSource ? t.warning : t.text}>{deleteSource ? 'on' : 'off'}</text>
+          </box>
+          <box flexDirection="column" gap={0}>
+            {MOVE_HINTS.map(([key, label]) => (
+              <box key={key} flexDirection="row" gap={2}>
+                <box width={4} flexShrink={0}>
+                  <text fg={t.primary}>{key}</text>
+                </box>
+                <text fg={t.textMuted}>{label}</text>
+              </box>
+            ))}
+          </box>
+        </box>
+      }
+    >
+      <box flexDirection="column" marginTop={1}>
+        {targets.length === 0 ? (
+          <text fg={t.textMuted}>No other worktree to move into.</text>
+        ) : (
+          targets.map((worktree, index) => {
+            const active = index === selectedIndex
+            const label =
+              worktree.branch != null && worktree.branch !== '' ? worktree.branch : worktree.name
+            const ahead = formatDivergence(divergence[worktree.id])
+            return (
+              <ListItem
+                key={worktree.id}
+                id={worktree.id}
+                active={active}
+                onHover={() => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
+                onClick={() => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
+                title={
+                  <text fg={active ? t.text : t.textMuted} wrapMode="none">
+                    {label}
+                    {worktree.source === 'primary' ? ' (primary)' : ''}
+                    {ahead !== '' ? ` ${ahead}` : ''}
+                  </text>
+                }
+              />
+            )
+          })
+        )}
+      </box>
+    </ModalShell>
+  )
+}

package/src/ui/components/overlays/ai-usage/ai-usage-indicator.tsx

@@ -34,7 +34,7 @@ function formatResetIn(snap: {
   resetAt: string | null
   timeRemaining: string | null
 }): string | null {
-  if (snap.resetAt) {
+  if (snap.resetAt != null && snap.resetAt !== '') {
     const diffMs = new Date(snap.resetAt).getTime() - Date.now()
     if (diffMs > 0) {
       const totalMin = Math.round(diffMs / 60_000)
@@ -85,7 +85,7 @@ export function AIUsageIndicator() {
         if (!snap) return null
         const icon = TOOL_ICON[tool]
 
-        if (snap.error && !snap.stale) {
+        if (snap.error != null && snap.error !== '' && !(snap.stale === true)) {
           return (
             <box
               key={tool}
@@ -134,7 +134,7 @@ export function AIUsageIndicator() {
               <text fg={t.text} selectable={false}>
                 {` ${pctText}`}
               </text>
-              {reset ? (
+              {reset != null && reset !== '' ? (
                 <text fg={t.textMuted} selectable={false}>
                   {` · ${reset}`}
                 </text>

package/src/ui/components/overlays/toast/toast-item.tsx

@@ -0,0 +1,88 @@
+import { useTerminalDimensions } from '@opentui/react'
+import { useEffect } from 'react'
+
+import {
+  type Toast,
+  TOAST_CONFIG,
+  toastStore,
+  type ToastVariant,
+} from '../../../../state/toast-store'
+import { type ResolvedTuiTheme, useTheme } from '../../../theme'
+import { slideOffsetStyle, type ToastAnchor } from './toast-position'
+import { useToastAnimation } from './use-toast-animation'
+
+// Cells the toast travels vertically for center anchors (compact, since the card
+// is only a few rows tall); horizontal anchors travel the full card width.
+const VERTICAL_SLIDE = 4
+
+function variantStyle(variant: ToastVariant, t: ResolvedTuiTheme): { color: string; icon: string } {
+  switch (variant) {
+    case 'success':
+      return { color: t.success, icon: '✓' }
+    case 'warning':
+      return { color: t.warning, icon: '⚠' }
+    case 'error':
+      return { color: t.error, icon: '✗' }
+    case 'info':
+      return { color: t.primary, icon: '●' }
+  }
+}
+
+interface ToastItemProps {
+  toast: Toast
+  anchor: ToastAnchor
+}
+
+export function ToastItem({ anchor, toast }: ToastItemProps) {
+  const t = useTheme()
+  const dimensions = useTerminalDimensions()
+  const { away, requestExit } = useToastAnimation({
+    onExited: () => toastStore.getState().dismiss(toast.id),
+    reduceMotion: TOAST_CONFIG.reduceMotion,
+  })
+
+  useEffect(() => {
+    if (toast.durationMs <= 0) return
+    const timer = setTimeout(() => requestExit(), toast.durationMs)
+    return () => clearTimeout(timer)
+  }, [toast.durationMs, requestExit])
+
+  const width = Math.max(16, Math.min(TOAST_CONFIG.width, dimensions.width - 4))
+  const distance = anchor.horizontal === 'center' ? VERTICAL_SLIDE : width + 4
+  const margins = slideOffsetStyle(anchor, Math.round(away * distance))
+  const { color, icon } = variantStyle(toast.variant, t)
+  const hasTitle = toast.title != null && toast.title !== ''
+  const hasMessage = toast.message != null && toast.message !== ''
+
+  return (
+    <box flexShrink={0} {...margins}>
+      <box
+        border
+        borderColor={color}
+        backgroundColor={t.backgroundElement}
+        padding={1}
+        width={width}
+      >
+        {toast.content ?? (
+          <box flexDirection="row" gap={1}>
+            <text fg={color} selectable={false}>
+              {icon}
+            </text>
+            <box flexDirection="column" flexGrow={1}>
+              {hasTitle ? (
+                <text fg={t.text} selectable={false} wrapMode="word">
+                  <strong>{toast.title}</strong>
+                </text>
+              ) : null}
+              {hasMessage ? (
+                <text fg={t.textMuted} selectable={false} wrapMode="word">
+                  {toast.message}
+                </text>
+              ) : null}
+            </box>
+          </box>
+        )}
+      </box>
+    </box>
+  )
+}