@brimveyn/aimux 1.12.2 → 1.13.0

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 }
+}

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

@@ -0,0 +1,30 @@
+import { type Toast, TOAST_CONFIG, type ToastPosition } from '../../../../state/toast-store'
+import { ToastItem } from './toast-item'
+import { parseToastPosition, stackContainerProps } from './toast-position'
+
+const EDGE_MARGIN = 1
+
+interface ToastStackProps {
+  position: ToastPosition
+  toasts: Toast[]
+}
+
+// One corner's column of toasts. Newest sits nearest the anchored edge; the stack
+// is capped at maxVisible (older toasts drop off, though they usually auto-dismiss).
+export function ToastStack({ position, toasts }: ToastStackProps) {
+  const anchor = parseToastPosition(position)
+  const recent = toasts.slice(-TOAST_CONFIG.maxVisible)
+  const ordered = anchor.vertical === 'top' ? [...recent].reverse() : recent
+  return (
+    <box
+      position="absolute"
+      flexDirection="column"
+      gap={TOAST_CONFIG.gap}
+      {...stackContainerProps(anchor, EDGE_MARGIN)}
+    >
+      {ordered.map((toast) => (
+        <ToastItem key={toast.id} toast={toast} anchor={anchor} />
+      ))}
+    </box>
+  )
+}

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

@@ -0,0 +1,24 @@
+import { type Toast, type ToastPosition, useToastStore } from '../../../../state/toast-store'
+import { ToastStack } from './toast-stack'
+
+// Mounted once at the root. Groups active toasts by position and renders one
+// absolutely-positioned stack per occupied corner, on top of everything else.
+export function ToastViewport() {
+  const toasts = useToastStore((state) => state.toasts)
+  if (toasts.length === 0) return null
+
+  const byPosition = new Map<ToastPosition, Toast[]>()
+  for (const entry of toasts) {
+    const group = byPosition.get(entry.position) ?? []
+    group.push(entry)
+    byPosition.set(entry.position, group)
+  }
+
+  return (
+    <>
+      {[...byPosition].map(([position, group]) => (
+        <ToastStack key={position} position={position} toasts={group} />
+      ))}
+    </>
+  )
+}

package/src/ui/components/overlays/toast/use-toast-animation.ts

@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+const STEP_MS = 28
+// Normalized distance off-screen: 1 = fully hidden, 0 = resting. Eased so the
+// toast decelerates in and accelerates out.
+const ENTER_FRAMES = [1, 0.55, 0.3, 0.15, 0.05, 0]
+const EXIT_FRAMES = [0.2, 0.45, 0.72, 1]
+
+interface ToastAnimationOptions {
+  reduceMotion: boolean
+  onExited: () => void
+}
+
+/**
+ * Drives a toast's slide via a frame loop (terminals have no opacity/transform,
+ * so motion is a stepped integer offset). Returns `away` in [0,1] — multiply by a
+ * pixel distance to get the cell offset — and `requestExit` to slide back out.
+ */
+export function useToastAnimation({ onExited, reduceMotion }: ToastAnimationOptions): {
+  away: number
+  requestExit: () => void
+} {
+  const [away, setAway] = useState(reduceMotion ? 0 : 1)
+  const exitingRef = useRef(false)
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
+  const onExitedRef = useRef(onExited)
+  onExitedRef.current = onExited
+
+  const runFrames = useCallback((frames: number[], done?: () => void) => {
+    if (timerRef.current != null) clearInterval(timerRef.current)
+    let index = 0
+    setAway(frames[0] ?? 0)
+    timerRef.current = setInterval(() => {
+      index += 1
+      if (index >= frames.length) {
+        if (timerRef.current != null) clearInterval(timerRef.current)
+        timerRef.current = null
+        done?.()
+        return
+      }
+      setAway(frames[index] ?? 0)
+    }, STEP_MS)
+  }, [])
+
+  useEffect(() => {
+    if (reduceMotion) return
+    runFrames(ENTER_FRAMES)
+    return () => {
+      if (timerRef.current != null) clearInterval(timerRef.current)
+    }
+  }, [reduceMotion, runFrames])
+
+  const requestExit = useCallback(() => {
+    if (exitingRef.current) return
+    exitingRef.current = true
+    if (reduceMotion) {
+      onExitedRef.current()
+      return
+    }
+    runFrames(EXIT_FRAMES, () => onExitedRef.current())
+  }, [reduceMotion, runFrames])
+
+  return { away, requestExit }
+}

package/src/ui/components/primitives/input-field.tsx

@@ -12,7 +12,7 @@ export function InputField({ active, cursorPos, placeholder, value }: InputField
   const t = useTheme()
   const fg = active ? t.text : t.textMuted
   if (!active) {
-    const showPlaceholder = !value && !!placeholder
+    const showPlaceholder = !value && !!(placeholder != null && placeholder !== '')
     return (
       <Surface tone="input" padding={1}>
         <text fg={showPlaceholder ? t.textMuted : fg}>{showPlaceholder ? placeholder : value}</text>

package/src/ui/components/primitives/list-item.tsx

@@ -40,11 +40,11 @@ export function ListItem({
           </>
         )}
         {leading}
-        {leading ? <text> </text> : null}
+        {leading != null ? <text> </text> : null}
         <box flexGrow={isRow ? 0 : 1}>{title}</box>
-        {trailing ? <box>{trailing}</box> : null}
+        {trailing != null ? <box>{trailing}</box> : null}
       </box>
-      {subtitle ? <box paddingLeft={2}>{subtitle}</box> : null}
+      {subtitle != null ? <box paddingLeft={2}>{subtitle}</box> : null}
     </box>
   )
   return (

package/src/ui/filter-themes.ts

@@ -8,7 +8,7 @@ export function themeDisplayName(id: ThemeId): string {
 }
 
 export function filterThemeIds(filter: string | null): ThemeId[] {
-  if (!filter) return THEME_IDS
+  if (!(filter != null && filter !== '')) return THEME_IDS
   const needle = filter.toLowerCase()
   return THEME_IDS.filter((id) => {
     return id.toLowerCase().includes(needle) || themeDisplayName(id).toLowerCase().includes(needle)

package/src/ui/root.tsx

@@ -28,9 +28,11 @@ import { SnippetEditorModal } from './components/modals/snippets/snippet-editor-
 import { SnippetPickerModal } from './components/modals/snippets/snippet-picker-modal'
 import { NewTabModal } from './components/modals/tabs/new-tab-modal'
 import { ThemePickerModal } from './components/modals/themes/theme-picker-modal'
+import { WorktreeMoveModal } from './components/modals/worktree/worktree-move-modal'
 import { ContextMenuBox } from './components/overlays/context-menu/context-menu-box'
 import { ContextMenuOverlay } from './components/overlays/context-menu/context-menu-overlay'
 import { PendingChordOverlay } from './components/overlays/pending-chord-overlay'
+import { ToastViewport } from './components/overlays/toast/toast-viewport'
 import { useTheme } from './theme'
 
 function getCreateSessionFields(modal: ModalState) {
@@ -53,19 +55,14 @@ function getCreateSessionFields(modal: ModalState) {
 
 function getSnippetEditorFields(modal: ModalState) {
   if (modal.type !== 'snippet-editor') {
-    return { snippetContent: '', snippetName: '' }
-  }
-
-  if (modal.activeField === 'name') {
-    return {
-      snippetContent: modal.contentBuffer,
-      snippetName: modal.editBuffer ?? '',
-    }
+    return { snippetContent: '', snippetName: '', snippetTrigger: '' }
   }
 
+  const editValue = modal.editBuffer ?? ''
   return {
-    snippetContent: modal.editBuffer ?? '',
-    snippetName: modal.contentBuffer,
+    snippetContent: modal.activeField === 'content' ? editValue : modal.contentBuffer,
+    snippetName: modal.activeField === 'name' ? editValue : modal.nameBuffer,
+    snippetTrigger: modal.activeField === 'trigger' ? editValue : modal.triggerBuffer,
   }
 }
 
@@ -79,10 +76,11 @@ function renderModal(
     snippets: SnippetRecord[]
     themeId: ThemeId
     createSessionFields: { directoryQuery: string; sessionName: string }
-    snippetEditorFields: { snippetName: string; snippetContent: string }
+    snippetEditorFields: { snippetName: string; snippetTrigger: string; snippetContent: string }
     focusMode: FocusMode
     activeAssistant?: string
     autoCommitModel?: string
+    worktreeDivergence: Record<string, { ahead: number; behind: number }>
   }
 ) {
   switch (modal.type) {
@@ -94,8 +92,24 @@ function renderModal(
           customCommands={options.customCommands}
           filter={modal.editBuffer}
           cursorPos={modal.cursorPos}
+          currentSessionId={options.currentSessionId}
           editingCommand={modal.type === 'new-tab' ? modal.editingCommand : null}
           editBuffer={modal.editBuffer ?? ''}
+          activeField={modal.type === 'new-tab' ? modal.activeField : 'assistant'}
+          branchError={modal.type === 'new-tab' ? modal.branchError : null}
+          branchName={modal.type === 'new-tab' ? modal.branchName : ''}
+          createWorktree={modal.type === 'new-tab' ? modal.createWorktree : false}
+          selectedAssistantId={modal.type === 'new-tab' ? modal.selectedAssistantId : null}
+          step={modal.type === 'new-tab' ? modal.step : 'assistant'}
+          worktreeDeleteConfirmId={modal.type === 'new-tab' ? modal.worktreeDeleteConfirmId : null}
+          worktreeDeleteMessage={modal.type === 'new-tab' ? modal.worktreeDeleteMessage : null}
+          worktrees={
+            options.currentSessionId != null && options.currentSessionId !== ''
+              ? (options.sessions.find((session) => session.id === options.currentSessionId)
+                  ?.worktrees ?? [])
+              : []
+          }
+          worktreeName={modal.type === 'new-tab' ? modal.worktreeName : ''}
         />
       )
     case 'session-picker':
@@ -112,7 +126,11 @@ function renderModal(
     case 'session-name':
       return (
         <SessionNameModal
-          title={modal.sessionTargetId ? 'Rename workspace' : 'Create workspace'}
+          title={
+            modal.sessionTargetId != null && modal.sessionTargetId !== ''
+              ? 'Rename workspace'
+              : 'Create workspace'
+          }
           value={modal.editBuffer ?? ''}
         />
       )
@@ -136,6 +154,7 @@ function renderModal(
           selectedIndex={modal.selectedIndex}
           filter={modal.editBuffer}
           cursorPos={modal.cursorPos}
+          actionMessage={modal.actionMessage}
         />
       )
     case 'snippet-editor':
@@ -143,6 +162,7 @@ function renderModal(
         <SnippetEditorModal
           activeField={modal.activeField}
           snippetName={options.snippetEditorFields.snippetName}
+          snippetTrigger={options.snippetEditorFields.snippetTrigger}
           snippetContent={options.snippetEditorFields.snippetContent}
           isEditing={modal.sessionTargetId !== null}
         />
@@ -164,6 +184,29 @@ function renderModal(
           latestVersion={modal.latestVersion}
         />
       )
+    case 'worktree-move': {
+      const session =
+        options.currentSessionId != null && options.currentSessionId !== ''
+          ? options.sessions.find((entry) => entry.id === options.currentSessionId)
+          : undefined
+      const worktrees = session?.worktrees ?? []
+      const sourceId = modal.sourceWorktreeId
+      const source = worktrees.find((w) => w.id === sourceId)
+      const targets = worktrees.filter((w) => w.id !== sourceId)
+      const sourceLabel =
+        source?.branch != null && source.branch !== ''
+          ? source.branch
+          : (source?.name ?? 'worktree')
+      return (
+        <WorktreeMoveModal
+          deleteSource={modal.type === 'worktree-move' ? modal.deleteSource : false}
+          divergence={options.worktreeDivergence}
+          selectedIndex={modal.selectedIndex}
+          sourceLabel={sourceLabel}
+          targets={targets}
+        />
+      )
+    }
     case 'help':
       return (
         <HelpModal
@@ -269,6 +312,7 @@ export function RootView({
   const customCommands = useAppStore((s) => s.customCommands)
   const sessions = useAppStore((s) => s.sessions)
   const currentSessionId = useAppStore((s) => s.currentSessionId)
+  const worktreeDivergence = useAppStore((s) => s.worktreeDivergence)
   const sessionBarPosition = useAppStore((s) => s.sessionBar.position)
   const gitPaneMode = useAppStore((s) => s.gitPane.mode)
   const gitPaneVisible = useAppStore((s) => s.gitPane.visible)
@@ -287,7 +331,10 @@ export function RootView({
       : undefined
 
   const activeTab = tabs.find((tab) => tab.id === activeTabId)
-  const activeTree = activeTabId ? getTreeForTab(layoutTrees, tabGroupMap, activeTabId) : null
+  const activeTree =
+    activeTabId != null && activeTabId !== ''
+      ? getTreeForTab(layoutTrees, tabGroupMap, activeTabId)
+      : null
   const createSessionFields = getCreateSessionFields(modal)
   const snippetEditorFields = getSnippetEditorFields(modal)
   const splitChrome = PANE_BORDER * 2
@@ -313,7 +360,9 @@ export function RootView({
           snippetEditorFields,
           snippets,
           themeId,
+          worktreeDivergence,
         })}
+        <ToastViewport />
       </box>
     )
   }
@@ -325,7 +374,7 @@ export function RootView({
       height="100%"
       backgroundColor={editorBg}
       onMouseDrag={(event) => {
-        if (onSeparatorDrag?.(event)) {
+        if (onSeparatorDrag?.(event) === true) {
           event.preventDefault()
           event.stopPropagation()
         }
@@ -427,7 +476,9 @@ export function RootView({
         snippetEditorFields,
         snippets,
         themeId,
+        worktreeDivergence,
       })}
+      <ToastViewport />
     </box>
   )
 }

package/src/ui/session-ordering.ts

@@ -5,7 +5,7 @@ import type { SessionRecord } from '../state/types'
  * with any missing `order` falling back to `createdAt` ascending.
  */
 export function orderSessionsForDisplay(sessions: SessionRecord[]): SessionRecord[] {
-  return sessions.slice().sort((a, b) => {
+  return [...sessions].sort((a, b) => {
     const ao = a.order ?? Number.MAX_SAFE_INTEGER
     const bo = b.order ?? Number.MAX_SAFE_INTEGER
     if (ao !== bo) return ao - bo
@@ -27,7 +27,7 @@ export function moveIdToIdPosition(
   const from = ids.indexOf(moveId)
   const to = ids.indexOf(intoPositionOfId)
   if (from < 0 || to < 0) return ids
-  const next = ids.slice()
+  const next = [...ids]
   next.splice(from, 1)
   next.splice(to, 0, moveId)
   return next

package/src/ui/status-bar-model.ts

@@ -3,6 +3,7 @@ import type { ModeId, ResolvedKeymapConfig } from '@brimveyn/aimux-config'
 import type { AppState, TabSession } from '../state/types'
 
 import { describeBindings } from '../input/keymap/describe-bindings'
+import { getSessionProjectPath } from '../state/session-worktrees'
 import { buildHintText } from './keymap-context'
 import { abbreviatePath } from './path-format'
 
@@ -58,13 +59,16 @@ export function getStatusBarModel(
   activeTab: TabSession | undefined,
   config: ResolvedKeymapConfig
 ): StatusBarModel {
-  const currentSession = state.currentSessionId
-    ? state.sessions.find((session) => session.id === state.currentSessionId)
-    : undefined
+  const currentSession =
+    state.currentSessionId != null && state.currentSessionId !== ''
+      ? state.sessions.find((session) => session.id === state.currentSessionId)
+      : undefined
   const sessionName = currentSession?.name ?? 'no workspace'
-  const sessionLabel = currentSession?.projectPath
-    ? `${sessionName} (${abbreviatePath(currentSession.projectPath)})`
-    : sessionName
+  const sessionPath = getSessionProjectPath(currentSession)
+  const sessionLabel =
+    sessionPath != null && sessionPath !== ''
+      ? `${sessionName} (${abbreviatePath(sessionPath)})`
+      : sessionName
 
   // \u{f0b1} = nf-fa-briefcase (session icon)
   const sessionIcon = '\u{f0b1}'
@@ -87,9 +91,10 @@ export function getStatusBarModel(
     case 'git': {
       const headOffset = state.gitMode.headOffset
       const offsetTag = headOffset > 0 ? `  HEAD~${headOffset}` : ''
+      const reviewTag = state.gitMode.reviewBase ? '  vs base' : ''
       return {
         help: helpHintForMode(config, 'git-mode'),
-        left: `${sessionIcon}  ${sessionLabel}${offsetTag}`,
+        left: `${sessionIcon}  ${sessionLabel}${offsetTag}${reviewTag}`,
         right: hintForGitMode(config, headOffset),
       }
     }
@@ -127,6 +132,8 @@ function deriveModalModeId(modalType: AppState['modal']['type']): ModeId | null
       return 'modal.theme-picker.filtering'
     case 'update-available':
       return 'modal.update-available'
+    case 'worktree-move':
+      return 'modal.worktree-move'
     default:
       return null
   }

package/src/ui/terminal-graphics/capabilities.ts

@@ -11,7 +11,7 @@ let cached: GraphicsProtocol | null = null
 export function detectGraphicsProtocol(renderer: CliRenderer): GraphicsProtocol {
   if (cached !== null) return cached
   const caps = (renderer as RendererWithCapabilities).capabilities
-  if (caps?.kitty_graphics) {
+  if (caps?.kitty_graphics === true) {
     cached = 'kitty'
     return cached
   }

package/src/ui/terminal-graphics/format-fallback.ts

@@ -24,10 +24,8 @@ async function tryConverter(
       stdout: 'pipe',
     })
     const writer = proc.stdin
-    if (writer) {
-      writer.write(bytes)
-      await writer.end()
-    }
+    void writer.write(bytes)
+    await writer.end()
     const timer = setTimeout(() => proc.kill(), timeoutMs)
     const [out, code] = await Promise.all([new Response(proc.stdout).bytes(), proc.exited])
     clearTimeout(timer)
@@ -85,11 +83,11 @@ export async function convertToPng(bytes: Uint8Array, mime: string): Promise<Con
     const png = await renderSvgToPng(bytes)
     result = png ? { kind: 'ok', png } : { kind: 'error', reason: 'failed to render SVG' }
   } else {
-    const attempts: Array<() => Promise<Uint8Array | null>> = [
-      () => tryConverter(['magick', '-', 'png:-'], bytes, 1500),
-      () => tryConverter(['convert', '-', 'png:-'], bytes, 1500),
-      () => trySips(bytes),
-      () =>
+    const attempts: (() => Promise<Uint8Array | null>)[] = [
+      async () => tryConverter(['magick', '-', 'png:-'], bytes, 1500),
+      async () => tryConverter(['convert', '-', 'png:-'], bytes, 1500),
+      async () => trySips(bytes),
+      async () =>
         tryConverter(
           [
             'ffmpeg',

package/src/ui/terminal-graphics/kitty.ts

@@ -53,13 +53,8 @@ export function uploadPngEscape(pngBytes: Uint8Array, id: number): string {
   for (let i = 0; i < chunks.length; i++) {
     const isLast = i === chunks.length - 1
     const m = isLast ? 0 : 1
-    let header: string
-    if (i === 0) {
-      // a=t (transmit), t=d (direct), f=100 (PNG), q=2 (quiet).
-      header = `q=2,a=t,t=d,f=100,i=${id},m=${m}`
-    } else {
-      header = `m=${m},q=2`
-    }
+    // a=t (transmit), t=d (direct), f=100 (PNG), q=2 (quiet).
+    const header = i === 0 ? `q=2,a=t,t=d,f=100,i=${id},m=${m}` : `m=${m},q=2`
     parts.push(`${ESC}_G${header};${chunks[i]}${ST}`)
   }
   return wrapForTmux(parts.join(''))

package/src/update/version-check.ts

@@ -9,7 +9,7 @@ export async function getCurrentPackageVersion(): Promise<string> {
 
 export async function fetchLatestNpmVersion(packageName: string): Promise<string | null> {
   const debugOverride = process.env.AIMUX_DEBUG_UPDATE_LATEST
-  if (debugOverride) {
+  if (debugOverride != null && debugOverride !== '') {
     return debugOverride
   }