@brimveyn/aimux 1.21.0 → 1.22.2

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

@@ -6,15 +6,19 @@ interface InputFieldProps {
   value: string
   cursorPos?: number
   placeholder?: string
+  /** Rows the box occupies even when empty, so a long answer looks expected. */
+  minLines?: number
 }
 
-export function InputField({ active, cursorPos, placeholder, value }: InputFieldProps) {
+export function InputField({ active, cursorPos, minLines, placeholder, value }: InputFieldProps) {
   const t = useTheme()
   const fg = active ? t.text : t.textMuted
+  // The surface pads one row top and bottom.
+  const minHeight = minLines != null ? minLines + 2 : undefined
   if (!active) {
     const showPlaceholder = !value && !!(placeholder != null && placeholder !== '')
     return (
-      <Surface tone="input" padding={1}>
+      <Surface tone="input" padding={1} minHeight={minHeight}>
         <text fg={showPlaceholder ? t.textMuted : fg}>{showPlaceholder ? placeholder : value}</text>
       </Surface>
     )
@@ -29,7 +33,7 @@ export function InputField({ active, cursorPos, placeholder, value }: InputField
   const trailing = cursorOnLineEnd ? value.slice(safePos) : value.slice(safePos + 1)
 
   return (
-    <Surface tone="inputActive" padding={1}>
+    <Surface tone="inputActive" padding={1} minHeight={minHeight}>
       <text fg={fg}>
         {before}
         <span bg={t.text} fg={t.background}>

package/src/ui/components/primitives/surface.tsx

@@ -26,6 +26,7 @@ interface SurfaceProps {
   children: ReactNode
   flexDirection?: 'row' | 'column'
   gap?: number
+  minHeight?: number
   padding?: number
   paddingLeft?: number
   paddingRight?: number
@@ -39,6 +40,7 @@ export function Surface({
   children,
   flexDirection = 'column',
   gap = 0,
+  minHeight,
   padding,
   paddingBottom,
   paddingLeft,
@@ -53,6 +55,7 @@ export function Surface({
       backgroundColor={t[toneToToken(tone)]}
       flexDirection={flexDirection}
       gap={gap}
+      minHeight={minHeight}
       padding={padding}
       paddingBottom={paddingBottom}
       paddingLeft={paddingLeft}

package/src/ui/components/settings/row-value.tsx

@@ -0,0 +1,74 @@
+import { memo } from 'react'
+
+import type { SettingRow, SettingValue } from '../../../settings/types'
+
+import { readRow, useSettingsStore } from '../../../settings/settings-store'
+import { useAppStore } from '../../../state/app-store'
+import { type ResolvedTuiTheme, useTheme } from '../../theme'
+
+/** Filled means on. Both are one cell wide in a Latin-width terminal. */
+const ON = '●'
+const OFF = '○'
+
+/** What a row shows on its right edge, per kind. */
+export function formatValue(row: SettingRow, value: SettingValue): string {
+  switch (row.kind) {
+    case 'toggle':
+      return value === true ? ON : OFF
+    case 'select': {
+      const option = row.options.find((entry) => entry.value === value)
+      return `${option?.label ?? String(value)} ›`
+    }
+    case 'number':
+      return String(value)
+    case 'text': {
+      const text = String(value)
+      return text === '' ? (row.placeholder ?? 'not set') : text
+    }
+    case 'info':
+    case 'action':
+      return String(value)
+    default:
+      row satisfies never
+      return ''
+  }
+}
+
+/**
+ * The same value in prose, for the line under the label. The column wants a glyph
+ * you can scan; a sentence wants a word — `default: ●` is not a sentence.
+ */
+export function describeValue(row: SettingRow, value: SettingValue): string {
+  switch (row.kind) {
+    case 'toggle':
+      return value === true ? 'on' : 'off'
+    case 'select':
+      return row.options.find((entry) => entry.value === value)?.label ?? String(value)
+    case 'text':
+      return String(value) === '' ? 'empty' : String(value)
+    default:
+      return String(value)
+  }
+}
+
+function valueColor(row: SettingRow, value: SettingValue, t: ResolvedTuiTheme): string {
+  // A toggle is read at a glance or not at all, so its state is the colour as much
+  // as the glyph: lit when on, as quiet as the rest of the row when off.
+  if (row.kind === 'toggle') return value === true ? t.success : t.textMuted
+  return row.kind === 'info' ? t.textMuted : t.primary
+}
+
+/**
+ * A row's current value, read by the row itself.
+ *
+ * Per row rather than per list on purpose: a value is a primitive, so a PTY frame
+ * that rewrites `tabs` re-runs this selector, gets the same value back, and
+ * renders nothing. A parent subscribing to the whole store for every row in the
+ * list would repaint it at the rate the terminals print.
+ */
+export const RowValue = memo(function RowValue({ row }: { row: SettingRow }) {
+  const t = useTheme()
+  const values = useSettingsStore((s) => s.values)
+  const value = useAppStore((s) => readRow(row, { state: s, values }))
+  return <text fg={valueColor(row, value, t)}>{formatValue(row, value)}</text>
+})

package/src/ui/components/settings/settings-row.tsx

@@ -0,0 +1,78 @@
+import { memo } from 'react'
+
+import type { SettingRow } from '../../../settings/types'
+
+import { storedRow, useSettingsStore } from '../../../settings/settings-store'
+import { useTheme } from '../../theme'
+import { ListItem } from '../primitives/list-item'
+import { describeValue, RowValue } from './row-value'
+
+/** Where the value comes from, on the left, out of the value column's way. */
+const CONFIG_FILE_MARK = '*'
+const TOUCHED_MARK = '~'
+
+interface SettingsRowProps {
+  row: SettingRow
+  active: boolean
+  index: number
+  onSelect: (index: number) => void
+}
+
+export const SettingsRow = memo(function SettingsRow({
+  active,
+  index,
+  onSelect,
+  row,
+}: SettingsRowProps) {
+  const t = useTheme()
+  const fromConfigFile = useSettingsStore((s) => s.fromConfigFile.has(row.id))
+  const touched = useSettingsStore((s) => s.touched.has(row.id))
+  const defaultValue = useSettingsStore((s) => s.defaults[row.id])
+  const editable = row.kind !== 'info'
+  // A blank when neither applies, never nothing: a marker that comes and goes
+  // would shift the label of every row it is missing from.
+  let mark = ' '
+  if (fromConfigFile) mark = CONFIG_FILE_MARK
+  else if (touched) mark = TOUCHED_MARK
+
+  // Always, never only on the focused row: a row that grows a line when you land
+  // on it shifts everything under it, so the list moves under the cursor the
+  // whole way down. A taller list that holds still reads better than a compact
+  // one that does not.
+  const notes: string[] = []
+  if (row.description != null && row.description !== '') notes.push(row.description)
+  if (fromConfigFile) notes.push('set in aimux.config.ts — comes back on restart')
+  else if (storedRow(row)?.restart === true) notes.push('applies on restart')
+  // Right-aligned on the same line rather than tacked onto the end of the
+  // description: it is about the row, not about what the setting does, and the
+  // value column above it is on that edge too. Only once the row has been
+  // changed — `r` is otherwise a key you press to find out what it does.
+  const resetHint =
+    touched && defaultValue !== undefined ? `r resets to ${describeValue(row, defaultValue)}` : null
+
+  return (
+    <ListItem
+      id={`setting-row-${row.id}`}
+      active={active}
+      index={index}
+      onClickIndex={onSelect}
+      leading={<text fg={fromConfigFile ? t.warning : t.secondary}>{mark}</text>}
+      title={<text fg={editable ? t.text : t.textMuted}>{row.label}</text>}
+      subtitle={
+        notes.length > 0 || resetHint != null ? (
+          <box flexDirection="row">
+            <box flexGrow={1} flexShrink={1}>
+              <text fg={t.textMuted}>{notes.join(' · ')}</text>
+            </box>
+            {resetHint != null ? (
+              <text fg={t.textMuted} wrapMode="none">
+                {resetHint}
+              </text>
+            ) : null}
+          </box>
+        ) : undefined
+      }
+      trailing={<RowValue row={row} />}
+    />
+  )
+})

package/src/ui/components/settings/settings-view.tsx

@@ -0,0 +1,169 @@
+import type { ScrollBoxRenderable } from '@opentui/core'
+
+import { useTerminalDimensions } from '@opentui/react'
+import { memo, useCallback, useMemo, useRef } from 'react'
+
+import { getSectionRows, SETTING_SECTIONS } from '../../../settings/sections'
+import { useSettingsStore } from '../../../settings/settings-store'
+import { useAppStore } from '../../../state/app-store'
+import { clampBarWidth } from '../../../state/bars'
+import { dispatchGlobal, runSideEffectGlobal } from '../../../state/dispatch-ref'
+import { useScrollActiveIntoView } from '../../hooks/use-scroll-active-into-view'
+import { useTheme } from '../../theme'
+import { ListItem } from '../primitives/list-item'
+import { SettingsRow } from './settings-row'
+
+const COLUMN_CONTENT_OPTIONS = { flexDirection: 'column' as const, gap: 0 }
+/**
+ * Share of the window the settings themselves are allowed. Without a cap the
+ * value sits on the far edge of a wide terminal, a hundred columns from the label
+ * it belongs to, and the pair stops reading as a pair.
+ *
+ * A share of the window rather than a fixed column count, so it holds whatever
+ * the window is; the floor is there for the narrow ones, where the pane is
+ * smaller than the cap anyway and this stops binding.
+ */
+const CONTENT_WIDTH_RATIO = 0.45
+const CONTENT_MIN_WIDTH = 56
+
+export const SettingsView = memo(function SettingsView() {
+  const t = useTheme()
+  // The cursor is all this component needs from the app state. Rows read their
+  // own values, so nothing here re-renders at the rate the terminals print.
+  const settings = useAppStore((s) => s.settings)
+  // The section list stands exactly where the left bar stands, so opening the
+  // screen does not shift the column under the cursor. Its configured width, not
+  // `getBarWidth`: a hidden bar still says how wide the sidebar is.
+  const navWidth = useAppStore((s) => clampBarWidth(s.bars.left.width))
+  // Which rows exist can depend on the projects — Setup has one per project — and
+  // building a Setup row reads its script off disk. So the list is rebuilt when
+  // the section changes, when the projects change, and after any write; not on
+  // every render, which at the rate this store changes would mean reading files
+  // at the rate the terminals print.
+  const projects = useAppStore((s) => s.projects)
+  const revision = useSettingsStore((s) => s.revision)
+  const rows = useMemo(
+    () => getSectionRows(settings.sectionId, projects),
+    // `revision` is an invalidation key, not an input: it says a value the builder
+    // read from disk may have changed under it.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [settings.sectionId, projects, revision]
+  )
+  const dimensions = useTerminalDimensions()
+  const contentMaxWidth = Math.max(
+    CONTENT_MIN_WIDTH,
+    Math.round(dimensions.width * CONTENT_WIDTH_RATIO)
+  )
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null)
+
+  useScrollActiveIntoView({
+    activeId: settings.pane === 'rows' ? (rows[settings.rowIndex]?.id ?? null) : null,
+    idPrefix: 'setting-row-',
+    scrollRef,
+    visible: true,
+  })
+
+  const handleSectionClick = useCallback((index: number) => {
+    const sectionId = SETTING_SECTIONS[index]?.id
+    if (sectionId == null) return
+    dispatchGlobal({ sectionId, type: 'settings-select-section' })
+  }, [])
+
+  // One click selects the row and changes it — a checkbox you have to select
+  // first and then click again is not a checkbox.
+  const handleRowClick = useCallback((rowIndex: number) => {
+    dispatchGlobal({ rowIndex, type: 'settings-select-row' })
+    runSideEffectGlobal({ type: 'activate-settings-row' })
+  }, [])
+
+  const handleClose = useCallback(() => {
+    dispatchGlobal({ type: 'exit-settings' })
+  }, [])
+
+  const section = SETTING_SECTIONS.find((s) => s.id === settings.sectionId)
+  const sectionLabel = section?.label ?? 'Settings'
+  const sectionNote = section?.description
+  // Same 1-cell seam the bar draws between itself and the terminal, so the two
+  // views line up to the column.
+  const navContentWidth = Math.max(1, navWidth - 1)
+
+  return (
+    <box flexDirection="row" flexGrow={1} overflow="hidden">
+      <box width={navWidth} flexDirection="row" overflow="hidden" backgroundColor={t.background}>
+        <box width={navContentWidth} flexDirection="column" overflow="hidden">
+          <box paddingLeft={1} paddingRight={1}>
+            <text fg={t.textMuted}>Settings</text>
+          </box>
+          <box flexGrow={1} flexShrink={1} flexDirection="column" overflow="hidden">
+            {SETTING_SECTIONS.map((section, index) => (
+              <ListItem
+                key={section.id}
+                active={section.id === settings.sectionId}
+                index={index}
+                onClickIndex={handleSectionClick}
+                title={
+                  <text fg={section.id === settings.sectionId ? t.text : t.textMuted}>
+                    {section.label}
+                  </text>
+                }
+                trailing={
+                  section.id === settings.sectionId && settings.pane === 'nav' ? (
+                    <text fg={t.primary}>›</text>
+                  ) : undefined
+                }
+              />
+            ))}
+          </box>
+          <box flexDirection="row" flexShrink={0} paddingLeft={1} paddingRight={1}>
+            <text fg={t.textMuted} onMouseDown={handleClose}>
+              ‹ Close
+            </text>
+          </box>
+        </box>
+        <box width={1} flexShrink={0} backgroundColor={t.border} />
+      </box>
+      {/* The pane the terminal would be in, with the same border — the content
+          keeps the inset it had, instead of jumping to the edge of the screen. */}
+      <box
+        border
+        borderColor={settings.pane === 'rows' ? t.borderActive : t.border}
+        title={sectionLabel}
+        padding={0}
+        flexDirection="column"
+        flexGrow={1}
+        backgroundColor={t.background}
+      >
+        <box flexDirection="column" flexGrow={1} flexShrink={1} maxWidth={contentMaxWidth}>
+          {sectionNote != null && sectionNote !== '' ? (
+            <box flexShrink={0} paddingLeft={1} paddingRight={1}>
+              <text fg={t.textMuted}>{sectionNote}</text>
+            </box>
+          ) : null}
+          <scrollbox
+            ref={scrollRef}
+            scrollY
+            flexGrow={1}
+            flexShrink={1}
+            contentOptions={COLUMN_CONTENT_OPTIONS}
+          >
+            {rows.length === 0 ? (
+              <box paddingLeft={1}>
+                <text fg={t.textMuted}>Nothing to configure here yet.</text>
+              </box>
+            ) : (
+              rows.map((row, index) => (
+                <SettingsRow
+                  key={row.id}
+                  row={row}
+                  index={index}
+                  active={settings.pane === 'rows' && index === settings.rowIndex}
+                  onSelect={handleRowClick}
+                />
+              ))
+            )}
+          </scrollbox>
+        </box>
+      </box>
+    </box>
+  )
+})

package/src/ui/components/setup/setup-widget.tsx

@@ -0,0 +1,152 @@
+import { memo, useCallback, useEffect, useState } from 'react'
+
+import type { SideEffect } from '../../../input/modes/types'
+
+import { measureGlobal } from '../../../app-runtime/measure-ref'
+import { findSetupTab } from '../../../app-runtime/setup-actions'
+import { usePaneSizeReport } from '../../../app-runtime/use-pane-size-report'
+import { useAppStore } from '../../../state/app-store'
+import { runSideEffectGlobal } from '../../../state/dispatch-ref'
+import { hasSetupScript } from '../../../state/project-data'
+import { getActiveWorkspace, getCurrentProject } from '../../../state/project-workspaces'
+import { useTheme, useTransparent } from '../../theme'
+import { TerminalViewport } from '../layout/terminal-pane'
+
+/**
+ * How often the widget re-checks whether a setup script exists. Needed because
+ * the file can appear with no state change behind it — an agent writing it, or
+ * the user saving in their editor. Cheap `existsSync`; checking on every render
+ * would fire a syscall per PTY frame.
+ */
+const SCRIPT_POLL_MS = 2_000
+
+// Hoisted so they are stable prop identities across renders.
+const RUN: SideEffect = { type: 'run-setup' }
+const STOP: SideEffect = { type: 'stop-setup' }
+const CONFIGURE: SideEffect = { type: 'configure-setup-script' }
+const ASK_AGENT: SideEffect = { type: 'ask-agent-for-setup-script' }
+const PROMOTE: SideEffect = { type: 'promote-setup-tab' }
+
+function Button({ effect, label }: { effect: SideEffect; label: string }) {
+  const t = useTheme()
+  const transparent = useTransparent()
+  const onMouseDown = useCallback(() => runSideEffectGlobal(effect), [effect])
+
+  return (
+    <box
+      paddingLeft={1}
+      paddingRight={1}
+      flexShrink={0}
+      backgroundColor={transparent ? undefined : t.backgroundElement}
+      onMouseDown={onMouseDown}
+    >
+      <text selectable={false} fg={t.text} wrapMode="none">
+        {label}
+      </text>
+    </box>
+  )
+}
+
+export const SetupWidget = memo(function SetupWidget() {
+  const t = useTheme()
+  const currentProjectId = useAppStore((s) => s.currentProjectId)
+  const projects = useAppStore((s) => s.projects)
+
+  const project = getCurrentProject({ currentProjectId, projects })
+  const workspace = getActiveWorkspace(project)
+
+  // Selecting the tab rather than the whole `tabs` array: that array gets a new
+  // identity on every viewport frame of every terminal, so subscribing to it
+  // re-renders this widget at the rate the other PTYs print. The found tab keeps
+  // its identity until it changes, which is exactly when a redraw is due.
+  const setupTab = useAppStore((s) => findSetupTab(s.tabs, workspace?.id))
+
+  const [scriptExists, setScriptExists] = useState(false)
+  useEffect(() => {
+    if (project === undefined) {
+      setScriptExists(false)
+      return
+    }
+    const projectId = project.id
+    const check = () => setScriptExists(hasSetupScript(projectId))
+    check()
+    const timer = setInterval(check, SCRIPT_POLL_MS)
+    return () => clearInterval(timer)
+  }, [project])
+
+  // The PTY is sized from this box, not from the main terminal area — the resize
+  // cascade skips hidden tabs precisely so this is the only authority.
+  const setContentBox = usePaneSizeReport(setupTab?.id, setupTab !== undefined, measureGlobal)
+
+  if (!project || !workspace) {
+    return (
+      <box flexDirection="column" flexGrow={1} flexShrink={1} flexBasis={0} overflow="hidden">
+        <text selectable={false} fg={t.textMuted} wrapMode="none">
+          No workspace
+        </text>
+      </box>
+    )
+  }
+
+  const ranAt = workspace.setupRanAt
+  const exitCode = workspace.setupExitCode
+  const finished = ranAt != null && ranAt !== ''
+  const running = setupTab !== undefined && !finished
+
+  let statusText = 'not run here'
+  let statusFg = t.textMuted
+  if (!scriptExists) {
+    statusText = 'no setup script'
+  } else if (running) {
+    statusText = 'running…'
+    statusFg = t.primary
+  } else if (finished) {
+    statusText = exitCode === 0 ? '✓ setup ok' : `✗ exit ${exitCode ?? '?'}`
+    statusFg = exitCode === 0 ? t.success : t.error
+  }
+
+  let runLabel = 'Run'
+  if (running) runLabel = 'Stop'
+  else if (finished) runLabel = 'Re-run'
+
+  return (
+    <box flexDirection="column" flexGrow={1} flexShrink={1} flexBasis={0} overflow="hidden">
+      <box flexDirection="row" flexShrink={0} justifyContent="space-between" gap={1}>
+        <text selectable={false} fg={statusFg} wrapMode="none">
+          {statusText}
+        </text>
+        <text selectable={false} fg={t.textMuted} wrapMode="none">
+          {workspace.name}
+        </text>
+      </box>
+
+      {/* Only Run depends on a script existing. Edit and Agent must not vanish
+          the moment one does, or writing a stub and closing the editor leaves no
+          way to ask an agent to fill it in — and no way out. */}
+      <box flexDirection="row" flexShrink={0} gap={1} paddingTop={1} paddingBottom={1}>
+        {scriptExists ? <Button effect={running ? STOP : RUN} label={runLabel} /> : null}
+        <Button effect={CONFIGURE} label={scriptExists ? 'Edit' : 'Create'} />
+        <Button effect={ASK_AGENT} label="Agent" />
+        {/* A failing setup means reading a stack trace, which a bar this narrow
+            cannot do. This is the way out. */}
+        {setupTab ? <Button effect={PROMOTE} label="↗" /> : null}
+      </box>
+
+      {setupTab ? (
+        <box ref={setContentBox} flexDirection="column" flexGrow={1} width="100%" overflow="hidden">
+          <TerminalViewport
+            buffer={setupTab.buffer}
+            softCursor={false}
+            viewport={setupTab.viewport}
+          />
+        </box>
+      ) : (
+        <text selectable={false} fg={t.textMuted} wrapMode="word">
+          {scriptExists
+            ? 'Runs automatically in each new workspace.'
+            : 'A setup script installs what a fresh worktree lacks: dependencies, .env, caches.'}
+        </text>
+      )}
+    </box>
+  )
+})

package/src/ui/flash/build-labels.ts

@@ -1,7 +1,7 @@
 import type { AppState, FlashJumpTarget, FlashLabel } from '../../state/types'
 
-import { filterTabsForActiveWorktree } from '../../state/session-worktrees'
-import { orderSessionsForDisplay } from '../session-ordering'
+import { filterTabsForActiveWorkspace, getPrimaryWorkspace } from '../../state/project-workspaces'
+import { orderProjectsForDisplay } from '../project-ordering'
 import { assignFlashLabels, type FlashTarget } from './assign-labels'
 
 interface PendingTarget {
@@ -12,50 +12,50 @@ interface PendingTarget {
 
 /**
  * Collect every visible flash-jump target in the same order the UI renders:
- * workspace rows first (each followed by its non-primary worktrees), then the
- * tabs of the active worktree. Stable ordering keeps the assigned labels
+ * project rows first (each followed by its non-primary workspaces), then the
+ * tabs of the active workspace. Stable ordering keeps the assigned labels
  * predictable across re-opens when nothing changed.
  */
 function collectTargets(state: AppState): PendingTarget[] {
   const out: PendingTarget[] = []
-  const ordered = orderSessionsForDisplay(state.sessions)
-  for (const [index, session] of ordered.entries()) {
-    const sessionIndex = index + 1
-    const worktrees = session.worktrees ?? []
-    const primary = worktrees.find((w) => w.source === 'primary') ?? worktrees[0]
+  const ordered = orderProjectsForDisplay(state.projects)
+  for (const [index, project] of ordered.entries()) {
+    const projectIndex = index + 1
+    const workspaces = project.workspaces ?? []
+    const primary = getPrimaryWorkspace(workspaces)
     out.push({
-      key: `ws:${session.id}`,
-      name: session.name,
+      key: `ws:${project.id}`,
+      name: project.name,
       target: {
-        kind: 'workspace',
-        sessionId: session.id,
-        sessionIndex,
-        worktreeId: primary?.id,
+        kind: 'project',
+        projectId: project.id,
+        projectIndex,
+        workspaceId: primary?.id,
       },
     })
-    for (const worktree of worktrees) {
-      if (worktree.id === primary?.id) continue
+    for (const workspace of workspaces) {
+      if (workspace.id === primary?.id) continue
       out.push({
-        key: `wt:${worktree.id}`,
-        name: worktree.name,
+        key: `wt:${workspace.id}`,
+        name: workspace.name,
         target: {
-          kind: 'worktree',
-          sessionId: session.id,
-          sessionIndex,
-          worktreeId: worktree.id,
+          kind: 'workspace',
+          projectId: project.id,
+          projectIndex,
+          workspaceId: workspace.id,
         },
       })
     }
   }
 
-  const currentSession = state.sessions.find((s) => s.id === state.currentSessionId)
-  if (currentSession) {
-    const tabs = filterTabsForActiveWorktree(state.tabs, currentSession)
+  const currentProject = state.projects.find((s) => s.id === state.currentProjectId)
+  if (currentProject) {
+    const tabs = filterTabsForActiveWorkspace(state.tabs, currentProject)
     for (const tab of tabs) {
       out.push({
         key: `tab:${tab.id}`,
         name: tab.title,
-        target: { kind: 'tab', sessionId: currentSession.id, sessionIndex: 0, tabId: tab.id },
+        target: { kind: 'tab', projectId: currentProject.id, projectIndex: 0, tabId: tab.id },
       })
     }
   }