@brimveyn/aimux 1.12.6 → 1.13.0

package/src/ui/components/modals/sessions/create-session-modal.tsx

@@ -62,7 +62,11 @@ export function CreateSessionModal({
         label="Search projects"
         placeholder="Type a project name..."
         value={directoryQuery}
-        displayValue={pendingProjectPath ? abbreviatePath(pendingProjectPath) : directoryQuery}
+        displayValue={
+          pendingProjectPath != null && pendingProjectPath !== ''
+            ? abbreviatePath(pendingProjectPath)
+            : directoryQuery
+        }
         items={items}
         selectedIndex={selectedIndex}
         maxVisibleRows={VISIBLE_ROWS}

package/src/ui/components/modals/sessions/session-picker-modal.tsx

@@ -47,7 +47,7 @@ export function SessionPickerModal({
   const ordered = orderSessionsForDisplay(sessions)
   const baselineOrder = ordered.map((s) => s.id)
   const filtered = filterSessions(ordered, filter)
-  const hasFilter = !!filter
+  const hasFilter = !!(filter != null && filter !== '')
 
   const sessionItems: PickerItem[] = filtered.map((session, index) => {
     const active = index === selectedIndex
@@ -56,9 +56,10 @@ export function SessionPickerModal({
       key: session.id,
       onClick: () => runSideEffectGlobal({ type: 'confirm-selected-session' }),
       onDelete: () => runSideEffectGlobal({ type: 'delete-selected-session' }),
-      subtitle: session.projectPath ? (
-        <text fg={t.textMuted}>{abbreviatePath(session.projectPath)}</text>
-      ) : undefined,
+      subtitle:
+        session.projectPath != null && session.projectPath !== '' ? (
+          <text fg={t.textMuted}>{abbreviatePath(session.projectPath)}</text>
+        ) : undefined,
       title: (
         <text fg={active ? t.text : t.textMuted}>
           {formatSessionLine(session, currentSessionId, currentTabCount, displayIndex)}

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-picker-modal.tsx

@@ -52,7 +52,9 @@ export function SnippetPickerModal({
           <text fg={active ? t.text : t.textMuted}>
             <strong>{snippet.name}</strong>
           </text>
-          {snippet.trigger ? <text fg={t.textMuted}>{` :${snippet.trigger}`}</text> : null}
+          {snippet.trigger != null && snippet.trigger !== '' ? (
+            <text fg={t.textMuted}>{` :${snippet.trigger}`}</text>
+          ) : null}
           {fromConfig ? <text fg={t.textMuted}>{' [config]'}</text> : null}
         </box>
       ),
@@ -71,10 +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 ? <text fg={t.error}>{actionMessage}</text> : undefined}
+      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>
+  )
+}

package/src/ui/components/overlays/toast/toast-position.ts

@@ -0,0 +1,45 @@
+import type { ToastPosition } from '../../../../state/toast-store'
+
+export interface ToastAnchor {
+  vertical: 'top' | 'bottom'
+  horizontal: 'left' | 'center' | 'right'
+}
+
+export function parseToastPosition(position: ToastPosition): ToastAnchor {
+  const [vertical, horizontal] = position.split('-') as [
+    ToastAnchor['vertical'],
+    ToastAnchor['horizontal'],
+  ]
+  return { horizontal, vertical }
+}
+
+// Absolute box props that pin a stack to its corner. Center spans the width and
+// centers its children; left/right hug their edge. Margin keeps it off the edge.
+export function stackContainerProps(anchor: ToastAnchor, margin: number) {
+  const vertical = anchor.vertical === 'top' ? { top: margin } : { bottom: margin }
+  if (anchor.horizontal === 'left') {
+    return { ...vertical, alignItems: 'flex-start' as const, left: margin }
+  }
+  if (anchor.horizontal === 'right') {
+    return { ...vertical, alignItems: 'flex-end' as const, right: margin }
+  }
+  return { ...vertical, alignItems: 'center' as const, left: margin, right: margin }
+}
+
+interface SlideMargins {
+  marginLeft?: number
+  marginRight?: number
+  marginTop?: number
+  marginBottom?: number
+}
+
+// A negative margin on the entering edge pushes the toast that many cells off the
+// nearest screen edge (the overflow is clipped by the screen buffer); animating it
+// back to 0 slides the toast in. `offset` is cells off-screen (0 = resting). Used
+// instead of opacity/transform, which terminals don't have.
+export function slideOffsetStyle(anchor: ToastAnchor, offset: number): SlideMargins {
+  const off = -offset
+  if (anchor.horizontal === 'right') return { marginRight: off }
+  if (anchor.horizontal === 'left') return { marginLeft: off }
+  return anchor.vertical === 'top' ? { marginTop: off } : { marginBottom: off }
+}