anymd 0.0.4 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anymd",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Convert any document (PDF, DOC, DOCX) to clean Markdown for RAG",
   "keywords": [
     "markdown",

package/src/bootstrap.ts

@@ -9,8 +9,8 @@ interface BootstrapCallbacks {
   onStep: (message: string) => void
 }
 
-const REQUIRED_PACKAGES = ['marker', 'markitdown', 'mlx_vlm', 'pypdfium2']
-const PIP_PACKAGES = ['marker-pdf', 'markitdown', 'mlx-vlm', 'pypdfium2']
+const REQUIRED_PACKAGES = ['marker', 'markitdown', 'mammoth', 'mlx_vlm', 'pypdfium2', 'torchvision']
+const PIP_PACKAGES = ['marker-pdf', 'markitdown[docx]', 'mlx-vlm', 'pypdfium2', 'torchvision']
 const CHANDRA_MODEL_ID = 'mlx-community/chandra-8bit'
 
 const checkImportable = async (py: string, pkg: string): Promise<boolean> => {

package/src/tui-data.ts

@@ -223,7 +223,7 @@ const runClassify = async (onProgress: (p: ClassifyProgress) => void): Promise<C
     total: results.length
   }
 
-  mkdirSync(getPaths().dataDir, { recursive: true })
+  mkdirSync(getPaths().outputDir, { recursive: true })
   await writeFile(getPaths().classification, `${JSON.stringify(classification, null, 2)}\n`)
   return classification
 }

package/tui.tsx

@@ -26,6 +26,7 @@ import {
 } from '~/tui-data'
 
 const DIM = '#888888'
+const SIDEBAR_WIDTH = 38
 
 const setTerminalTitle = (title: string): void => {
   process.stdout.write(`\u001B]0;${title}\u0007`)
@@ -195,10 +196,10 @@ const SpinnerDots = ({ fg }: { fg?: string }) => {
   return <text fg={fg ?? 'yellow'}>{SPINNER_FRAMES[frame]} </text>
 }
 
-const PROGRESS_FULL = '\u2588'
-const PROGRESS_EMPTY = '\u2591'
+const PROGRESS_FULL = '█'
+const PROGRESS_EMPTY = '░'
 
-const ProgressBarSimple = ({ value, width = 20 }: { value: number; width?: number }) => {
+const ProgressBarSimple = ({ value, width = 12 }: { value: number; width?: number }) => {
   const filled = Math.round((value / 100) * width)
   const empty = width - filled
   return (
@@ -227,20 +228,19 @@ const ElapsedTimer = ({ startedAt }: { startedAt: number }) => {
 }
 
 const RecentFiles = ({ files }: { files: { duration: number; name: string; pages: number; per_page: number }[] }) => {
-  const display = files.slice(-5)
+  const display = files.slice(-3)
   return (
     <box flexDirection='column'>
       <text fg={DIM}>
-        <b>─── recent ───</b>
+        <b>── recent ──</b>
       </text>
       {display.map((f, i) => (
         // eslint-disable-next-line react/no-array-index-key
         <text key={i}>
-          <span fg='green'>✓ </span>
-          <span fg='cyan'>{f.name.slice(0, 30).padEnd(30)}</span>
-          <span> {f.pages.toString().padStart(3)}p </span>
-          <span fg='yellow'>{formatDuration(f.duration).padStart(7)}</span>
-          <span fg={DIM}> ({formatDuration(f.per_page)}/p)</span>
+          <span fg='green'>✓</span>
+          <span fg='cyan'> {f.name.slice(0, 18)}</span>
+          <span> {f.pages.toString().padStart(2)}p</span>
+          <span fg='yellow'> {formatDuration(f.duration)}</span>
         </text>
       ))}
     </box>
@@ -265,41 +265,41 @@ const OcrLiveInfo = ({ progress }: { progress: OcrProgress }) => {
   }, [progress.current_file, progress.current_file_started])
 
   return (
-    <box flexDirection='column' paddingLeft={6}>
+    <box flexDirection='column' paddingLeft={2}>
       {progress.current_file === '-' ? null : (
         <text>
-          <span fg={DIM}>Current: </span>
-          <b fg='cyan'>{progress.current_file}</b>
-          {progress.current_pages_total ? <span fg={DIM}> ({progress.current_pages_total}p)</span> : null}
-          <span fg={DIM}> page </span>
-          <span>{progress.current_page}</span>
-          <span fg={DIM}>{'  '}elapsed: </span>
-          <span fg='yellow'>{formatDuration(elapsed)}</span>
+          <span fg={DIM}>Now: </span>
+          <b fg='cyan'>{progress.current_file.slice(0, 20)}</b>
         </text>
       )}
-      <box gap={2}>
-        <text>
-          <span fg={DIM}>ETA: </span>
-          <span fg='yellow'>{progress.eta}</span>
-        </text>
-        <text>
-          <span fg={DIM}>avg: </span>
-          <span>{progress.avg_per_file}/file</span>
-        </text>
+      {progress.current_file === '-' ? null : (
         <text>
-          <span fg={DIM}>errors: </span>
-          <span fg={progress.errors > 0 ? 'red' : 'green'}>{progress.errors}</span>
+          <span fg={DIM}>p</span>
+          <span>{progress.current_page}</span>
+          {progress.current_pages_total ? <span fg={DIM}>/{progress.current_pages_total}</span> : null}
+          <span fg={DIM}> </span>
+          <span fg='yellow'>{formatDuration(elapsed)}</span>
         </text>
-      </box>
+      )}
+      <text>
+        <span fg={DIM}>ETA </span>
+        <span fg='yellow'>{progress.eta}</span>
+        <span fg={DIM}> avg </span>
+        <span>{progress.avg_per_file}</span>
+      </text>
+      <text>
+        <span fg={DIM}>err </span>
+        <span fg={progress.errors > 0 ? 'red' : 'green'}>{progress.errors}</span>
+      </text>
       {progress.recent_files?.length ? <RecentFiles files={progress.recent_files} /> : null}
     </box>
   )
 }
 
 const getStepIcon = (isDone: boolean, isFailed: boolean): string => {
-  if (isFailed) return '\u2717'
-  if (isDone) return '\u2713'
-  return ' '
+  if (isFailed) return '✗'
+  if (isDone) return '✓'
+  return '·'
 }
 
 const getStepColor = (isRunning: boolean, isDone: boolean, isFailed: boolean): string => {
@@ -328,100 +328,7 @@ const StepIcon = ({
   )
 }
 
-const StepHeader = ({
-  color,
-  completedDuration,
-  done,
-  failedCount,
-  isActive,
-  isDone,
-  isRunning,
-  pct,
-  step,
-  stepStartedAt,
-  total
-}: {
-  color: string
-  completedDuration?: number
-  done: number
-  failedCount?: number
-  isActive: boolean
-  isDone: boolean
-  isRunning: boolean
-  pct: number
-  step: StepConfig
-  stepStartedAt: number
-  total: number
-}) => {
-  const fgColor = isActive ? (color === 'gray' ? undefined : color) : DIM
-  return (
-    <box gap={1}>
-      <box width={3}>
-        <StepIcon color={color} isDone={isDone} isFailed={false} isRunning={isRunning} />
-      </box>
-      <text fg={color}>
-        <b>[{step.stepNum}]</b>
-      </text>
-      <text fg={fgColor}>{isActive ? <b>{step.name}</b> : step.name}</text>
-      {isRunning ? <ElapsedTimer startedAt={stepStartedAt} /> : null}
-      {isDone && !isRunning && completedDuration !== undefined ? (
-        <text fg={DIM}>{formatDuration(completedDuration)}</text>
-      ) : null}
-      <box width={20}>
-        <ProgressBarSimple value={pct} />
-      </box>
-      <text>
-        <span fg='green'>{done}</span>
-        <span fg={DIM}>
-          /{total > 0 ? total : '?'} {step.unit}
-        </span>
-        {failedCount && failedCount > 0 ? <span fg='red'> ({failedCount} failed)</span> : null}
-      </text>
-    </box>
-  )
-}
-
-const StepDetails = ({
-  isRunning,
-  ocrProgress,
-  requires,
-  runningStatus,
-  showOcr,
-  texts
-}: {
-  isRunning: boolean
-  ocrProgress?: null | OcrProgress
-  requires?: string
-  runningStatus: string
-  showOcr: boolean
-  texts: string[]
-}) => (
-  <>
-    {texts.length > 0 ? (
-      <box paddingLeft={6}>
-        {texts.map((d, i) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <text fg={DIM} key={i}>
-            {d}
-          </text>
-        ))}
-      </box>
-    ) : null}
-    {isRunning && runningStatus !== '' ? (
-      <box paddingLeft={6}>
-        <text fg='cyan'>{runningStatus}</text>
-      </box>
-    ) : null}
-    {requires ? (
-      <box paddingLeft={6}>
-        <text fg='yellow'>{`\u26A0 Requires: ${requires}`}</text>
-      </box>
-    ) : null}
-    {showOcr && ocrProgress ? <OcrLiveInfo progress={ocrProgress} /> : null}
-  </>
-)
-
-const StepCard = ({
+const SidebarStep = ({
   completedDuration,
   failedCount,
   isFailed,
@@ -441,6 +348,7 @@ const StepCard = ({
   step: StepConfig
   stepData: StepData | undefined
   stepStartedAt: number
+  // eslint-disable-next-line complexity, max-statements
 }) => {
   const done = stepData?.done ?? 0
   const total = stepData?.total ?? 0
@@ -452,67 +360,52 @@ const StepCard = ({
   const showOcr = isRunning && step.command === 'ocr'
 
   return (
-    <box flexDirection='column' paddingLeft={1}>
-      <StepHeader
-        color={color}
-        completedDuration={completedDuration}
-        done={done}
-        failedCount={failedCount}
-        isActive={isActive}
-        isDone={isDone}
-        isRunning={isRunning}
-        pct={pct}
-        step={step}
-        stepStartedAt={stepStartedAt}
-        total={total}
-      />
-      <StepDetails
-        isRunning={isRunning}
-        ocrProgress={ocrProgress}
-        requires={showRequires ? stepData?.requires : undefined}
-        runningStatus={runningStatus}
-        showOcr={showOcr}
-        texts={stepData?.details ?? []}
-      />
+    <box flexDirection='column'>
+      <box>
+        <box width={2}>
+          <StepIcon color={color} isDone={isDone} isFailed={false} isRunning={isRunning} />
+        </box>
+        <text fg={isActive ? color : DIM}>{step.name}</text>
+        {isRunning ? <ElapsedTimer startedAt={stepStartedAt} /> : null}
+        {isDone && !isRunning && completedDuration !== undefined ? (
+          <text fg={DIM}> {formatDuration(completedDuration)}</text>
+        ) : null}
+      </box>
+      <box paddingLeft={2}>
+        <ProgressBarSimple value={pct} />
+        <text>
+          <span fg='green'> {done}</span>
+          <span fg={DIM}>/{total > 0 ? total : '?'}</span>
+          {failedCount && failedCount > 0 ? <span fg='red'> {failedCount}✗</span> : null}
+        </text>
+      </box>
+      {stepData?.details?.length ? (
+        <box flexDirection='column' paddingLeft={2}>
+          {stepData.details.map((d, i) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <text fg={DIM} key={i}>
+              {d}
+            </text>
+          ))}
+        </box>
+      ) : null}
+      {isRunning && runningStatus !== '' ? (
+        <box paddingLeft={2}>
+          <text fg='cyan'>{runningStatus}</text>
+        </box>
+      ) : null}
+      {showRequires ? (
+        <box paddingLeft={2}>
+          <text fg='yellow'>⚠ {stepData?.requires}</text>
+        </box>
+      ) : null}
+      {showOcr && ocrProgress ? <OcrLiveInfo progress={ocrProgress} /> : null}
     </box>
   )
 }
 
 const ERROR_PATTERN = /\b(?:ERROR|Error:|Failed:|failed|FAILED|\u2716|exception|traceback)/iu
 
-const OutputBox = ({ lines, status }: { lines: string[]; status: string }) => {
-  if (lines.length === 0 && status === '') return null
-  return (
-    <box
-      border
-      borderColor='gray'
-      borderStyle='rounded'
-      flexDirection='column'
-      marginTop={1}
-      paddingLeft={1}
-      paddingRight={1}>
-      <text fg={DIM}>
-        <b>Output</b>
-      </text>
-      <box flexDirection='column'>
-        {lines.length > 0 ? (
-          lines.map((line, i) => {
-            const isError = ERROR_PATTERN.test(line)
-            return (
-              // eslint-disable-next-line react/no-array-index-key
-              <text fg={isError ? 'red' : DIM} key={i}>
-                {line}
-              </text>
-            )
-          })
-        ) : (
-          <text fg='cyan'>{status}</text>
-        )}
-      </box>
-    </box>
-  )
-}
-
 const PreflightBanner = ({ errors, warnings }: { errors: string[]; warnings: string[] }) => {
   if (errors.length === 0 && warnings.length === 0) return null
   return (
@@ -555,98 +448,20 @@ const PreflightBanner = ({ errors, warnings }: { errors: string[]; warnings: str
   )
 }
 
-const LogOverlay = ({ lines }: { lines: string[] }) => {
-  const { height } = useTerminalDimensions()
-  const logHeight = Math.max(5, height - 18)
-
-  return (
-    <box
-      border
-      borderColor='magenta'
-      borderStyle='rounded'
-      flexDirection='column'
-      marginTop={1}
-      paddingLeft={1}
-      paddingRight={1}>
-      <box justifyContent='space-between'>
-        <text fg='magenta'>
-          <b>Log</b>
-        </text>
-        <text fg={DIM}>L/ESC close · ↑↓ scroll</text>
-      </box>
-      <scrollbox focused height={logHeight} marginTop={1} stickyScroll>
-        {lines.length > 0 ? (
-          lines.map((line, i) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <text fg={DIM} key={i}>
-              {line}
-            </text>
-          ))
-        ) : (
-          <text fg={DIM}>No log entries yet</text>
-        )}
-      </scrollbox>
-    </box>
-  )
-}
-
-const TitleBar = ({ allDone, failed }: { allDone: boolean; failed: boolean }) => (
-  <box justifyContent='space-between' paddingLeft={1} paddingRight={1}>
-    <text fg='cyan'>
-      <b>Document Pipeline</b>
-    </text>
-    <box gap={2}>
-      {failed ? (
-        <>
-          <text>
-            <b fg='yellow'>[R]</b>
-            <span fg={DIM}> Retry</span>
-          </text>
-          <text>
-            <b fg='yellow'>[S]</b>
-            <span fg={DIM}> Skip</span>
-          </text>
-        </>
-      ) : null}
-      {allDone ? (
-        <text fg='green'>
-          <b>✓ Pipeline complete</b>
-        </text>
-      ) : null}
-      <text>
-        <b fg='magenta'>[L]</b>
-        <span fg={DIM}> Log</span>
-      </text>
-      <text>
-        <b fg='red'>[Q]</b>
-        <span fg={DIM}> Quit</span>
-      </text>
-    </box>
-  </box>
-)
-
-const formatChars = (chars: number): string => {
-  if (chars >= 1_000_000) return `${(chars / 1_000_000).toFixed(1)}M`
-  if (chars >= 1000) return `${(chars / 1000).toFixed(1)}K`
-  return String(chars)
-}
-
 // eslint-disable-next-line max-statements
-const PipelineSummary = ({
+const TitleBarTop = ({
   allDone,
   backgroundOcr,
-  datasetResult,
+  failed,
   pipelineStartedAt,
   runningCommand,
-  stepDurations,
   stepsData
 }: {
   allDone: boolean
   backgroundOcr: boolean
-  datasetResult: DatasetResult | null
+  failed: boolean
   pipelineStartedAt: number
   runningCommand: CommandKey | null
-  stepDurations: Partial<Record<CommandKey, number>>
   stepsData: AllStepsData | null
 }) => {
   const [elapsed, setElapsed] = useState(0)
@@ -661,83 +476,148 @@ const PipelineSummary = ({
     return () => clearInterval(timer)
   }, [pipelineStartedAt])
 
-  if (!stepsData) return null
-  const elapsedStr = formatDuration(elapsed)
+  let statusText = ''
+  if (allDone) statusText = '✓ Complete'
+  else if (failed) statusText = '✗ Failed'
+  else if (runningCommand && stepsData) {
+    let currentIdx = 0
+    let currentName = ''
+    for (const s of STEPS)
+      if (s.command === runningCommand) {
+        currentIdx = s.stepNum
+        currentName = s.name
+        break
+      }
+    if (currentIdx > 0) {
+      const parallelLabel = backgroundOcr && runningCommand === 'pipeline' ? '2+3/5 Convert+OCR' : null
+      statusText = parallelLabel ?? `${currentIdx}/5 ${currentName}`
+    }
+  }
+
+  const statusColor = allDone ? 'green' : failed ? 'red' : 'cyan'
 
-  if (allDone)
-    return (
-      <box flexDirection='column' paddingLeft={1} paddingRight={1}>
-        <box justifyContent='space-between'>
-          <text fg='green'>
-            <b>✓ All 5 steps complete</b>
+  return (
+    <box justifyContent='space-between' paddingLeft={1} paddingRight={1}>
+      <text fg='#e0a040'>
+        <b>anymd</b>
+      </text>
+      <box gap={2}>
+        {statusText === '' ? null : (
+          <text fg={statusColor}>
+            <b>{statusText}</b>
           </text>
-          <text fg={DIM}>total: {elapsedStr}</text>
-        </box>
-        {datasetResult ? (
-          <box gap={3} paddingLeft={2}>
+        )}
+        {pipelineStartedAt > 0 ? <text fg={DIM}>{formatDuration(elapsed)}</text> : null}
+      </box>
+    </box>
+  )
+}
+
+const formatChars = (chars: number): string => {
+  if (chars >= 1_000_000) return `${(chars / 1_000_000).toFixed(1)}M`
+  if (chars >= 1000) return `${(chars / 1000).toFixed(1)}K`
+  return String(chars)
+}
+
+const SidebarSummary = ({
+  allDone,
+  datasetResult,
+  stepDurations
+}: {
+  allDone: boolean
+  datasetResult: DatasetResult | null
+  stepDurations: Partial<Record<CommandKey, number>>
+}) => {
+  if (!allDone) return null
+  return (
+    <box flexDirection='column' paddingLeft={1} paddingTop={1}>
+      <text fg='green'>
+        <b>✓ All 5 steps complete</b>
+      </text>
+      {datasetResult ? (
+        <box flexDirection='column' paddingLeft={1}>
+          <text>
+            <span fg={DIM}>entries </span>
+            <b fg='green'>{datasetResult.entries.toLocaleString()}</b>
+          </text>
+          <text>
+            <span fg={DIM}>chars </span>
+            <b>{formatChars(datasetResult.totalChars)}</b>
+          </text>
+          {datasetResult.skipped > 0 ? (
             <text>
-              <span fg={DIM}>entries: </span>
-              <b fg='green'>{datasetResult.entries.toLocaleString()}</b>
+              <span fg={DIM}>skipped </span>
+              <span fg='yellow'>{datasetResult.skipped}</span>
             </text>
+          ) : null}
+          {datasetResult.duplicates > 0 ? (
             <text>
-              <span fg={DIM}>chars: </span>
-              <b>{formatChars(datasetResult.totalChars)}</b>
+              <span fg={DIM}>deduped </span>
+              <span fg='yellow'>{datasetResult.duplicates}</span>
             </text>
-            {datasetResult.skipped > 0 ? (
-              <text>
-                <span fg={DIM}>skipped: </span>
-                <span fg='yellow'>{datasetResult.skipped}</span>
-              </text>
-            ) : null}
-            {datasetResult.duplicates > 0 ? (
-              <text>
-                <span fg={DIM}>deduped: </span>
-                <span fg='yellow'>{datasetResult.duplicates}</span>
-              </text>
-            ) : null}
-          </box>
-        ) : null}
-        <box gap={2} paddingLeft={2}>
-          {STEPS.map(step => {
-            const dur = stepDurations[step.command]
-            if (dur === undefined) return null
-            return (
-              <text key={step.command}>
-                <span fg={DIM}>{step.name}: </span>
-                <span fg='cyan'>{formatDuration(dur)}</span>
-              </text>
-            )
-          })}
+          ) : null}
         </box>
+      ) : null}
+      <box flexDirection='column' paddingLeft={1}>
+        {STEPS.map(step => {
+          const dur = stepDurations[step.command]
+          if (dur === undefined) return null
+          return (
+            <text key={step.command}>
+              <span fg={DIM}>{step.name.slice(0, 14).padEnd(14)} </span>
+              <span fg='cyan'>{formatDuration(dur)}</span>
+            </text>
+          )
+        })}
       </box>
-    )
-
-  let currentIdx = 0
-  let currentName = ''
-  for (const s of STEPS)
-    if (s.command === runningCommand) {
-      currentIdx = s.stepNum
-      currentName = s.name
-      break
-    }
-
-  if (currentIdx === 0) return null
+    </box>
+  )
+}
 
-  const parallelLabel = backgroundOcr && runningCommand === 'pipeline' ? 'Steps 2+3/5 \u2014 Convert + OCR' : null
+const HelpDialog = ({ height, width }: { height: number; width: number }) => {
+  const boxW = 40
+  const boxH = 12
+  const left = Math.max(0, Math.floor((width - boxW) / 2))
+  const top = Math.max(0, Math.floor((height - boxH) / 2))
 
   return (
-    <box justifyContent='space-between' paddingLeft={1} paddingRight={1}>
+    <box
+      border
+      borderColor='#e0a040'
+      borderStyle='rounded'
+      flexDirection='column'
+      height={boxH}
+      marginLeft={left}
+      marginTop={top}
+      paddingLeft={2}
+      paddingRight={2}
+      width={boxW}>
+      <text fg='#e0a040'>
+        <b>Keybinds</b>
+      </text>
+      <text> </text>
       <text>
-        {parallelLabel ? (
-          <b fg='cyan'>{parallelLabel}</b>
-        ) : (
-          <>
-            <b fg='cyan'>Step {currentIdx}/5</b>
-            <span fg={DIM}> — {currentName}</span>
-          </>
-        )}
+        <b fg='cyan'>Q</b>
+        <span fg={DIM}>{'  '}Quit</span>
+      </text>
+      <text>
+        <b fg='cyan'>L</b>
+        <span fg={DIM}>{'  '}Toggle log / output view</span>
+      </text>
+      <text>
+        <b fg='cyan'>R</b>
+        <span fg={DIM}>{'  '}Retry failed step</span>
+      </text>
+      <text>
+        <b fg='cyan'>S</b>
+        <span fg={DIM}>{'  '}Skip failed step</span>
+      </text>
+      <text>
+        <b fg='cyan'>?</b>
+        <span fg={DIM}>{'  '}Toggle this help</span>
       </text>
-      <text fg={DIM}>elapsed: {elapsedStr}</text>
+      <text> </text>
+      <text fg={DIM}>Press ? or Esc to close</text>
     </box>
   )
 }
@@ -757,13 +637,6 @@ const computeTerminalTitle = (s: AppState): string => {
   return `Doc Pipeline \u2014 ${label}`
 }
 
-const RunningFooter = () => (
-  <box justifyContent='space-between' marginTop={1} paddingLeft={1} paddingRight={1}>
-    <text fg={DIM}>Ctrl+C safe — progress saved, re-run to resume</text>
-    <text fg={DIM}>↻ auto-refresh 2s</text>
-  </box>
-)
-
 // eslint-disable-next-line max-statements
 const readStream = async (stream: ReadableStream<Uint8Array>, onLine: (line: string) => void): Promise<void> => {
   const reader = stream.getReader()
@@ -792,6 +665,8 @@ const App = () => {
   const ocrProcRef = useRef<null | ReturnType<typeof Bun.spawn>>(null)
   const busyRef = useRef(false)
   const errorLogClearedRef = useRef(false)
+  const [showHelp, setShowHelp] = useState(false)
+  const { height, width } = useTerminalDimensions()
 
   useEffect(() => {
     setTerminalTitle(computeTerminalTitle(state))
@@ -1093,9 +968,13 @@ const App = () => {
 
   // eslint-disable-next-line complexity, max-statements
   useKeyboard(key => {
-    if (state.showLog) {
-      if (key.name === 'l' || key.name === 'escape') dispatch({ type: 'TOGGLE_LOG' })
+    if (showHelp) {
+      if (key.name === '?' || key.name === 'escape') setShowHelp(false)
+      return
+    }
 
+    if (key.name === '?') {
+      setShowHelp(true)
       return
     }
 
@@ -1129,55 +1008,76 @@ const App = () => {
     }
   })
 
+  const logHeight = Math.max(5, height - 3)
+  const displayLines = state.showLog ? state.logLines : state.runningLines
+
   return (
-    <box flexDirection='column'>
-      <TitleBar allDone={state.allDone} failed={state.failed} />
-      <PipelineSummary
+    <box flexDirection='column' height={height}>
+      <TitleBarTop
         allDone={state.allDone}
         backgroundOcr={state.backgroundOcr}
-        datasetResult={state.datasetResult}
+        failed={state.failed}
         pipelineStartedAt={state.pipelineStartedAt}
         runningCommand={state.runningCommand}
-        stepDurations={state.stepDurations}
         stepsData={state.stepsData}
       />
-
-      {state.stepsData ? (
-        <box flexDirection='column'>
-          {STEPS.map(step => {
-            const isFg = state.runningCommand === step.command
-            const isBgOcr = step.command === 'ocr' && state.backgroundOcr
-            const isActive = isFg || isBgOcr
-            const sd = state.stepsData ? state.stepsData[step.command] : undefined
-            const failures = sd?.failed ?? state.stepFailures[step.command]
-            return (
-              <StepCard
-                completedDuration={state.stepDurations[step.command]}
-                failedCount={failures}
-                isFailed={state.failed ? isFg : false}
-                isRunning={!state.failed && isActive}
-                key={step.command}
-                ocrProgress={step.command === 'ocr' ? state.stepsData?.ocr.progress : undefined}
-                runningStatus={isFg ? state.runningStatus : ''}
-                step={step}
-                stepData={sd}
-                stepStartedAt={isActive ? state.stepStartedAt : 0}
-              />
-            )
-          })}
+      <box flexGrow={1}>
+        <box flexDirection='column' paddingLeft={1} width={SIDEBAR_WIDTH}>
+          {state.stepsData ? (
+            <box flexDirection='column'>
+              {STEPS.map(step => {
+                const isFg = state.runningCommand === step.command
+                const isBgOcr = step.command === 'ocr' && state.backgroundOcr
+                const isActive = isFg || isBgOcr
+                const sd = state.stepsData ? state.stepsData[step.command] : undefined
+                const failures = sd?.failed ?? state.stepFailures[step.command]
+                return (
+                  <SidebarStep
+                    completedDuration={state.stepDurations[step.command]}
+                    failedCount={failures}
+                    isFailed={state.failed ? isFg : false}
+                    isRunning={!state.failed && isActive}
+                    key={step.command}
+                    ocrProgress={step.command === 'ocr' ? state.stepsData?.ocr.progress : undefined}
+                    runningStatus={isFg ? state.runningStatus : ''}
+                    step={step}
+                    stepData={sd}
+                    stepStartedAt={isActive ? state.stepStartedAt : 0}
+                  />
+                )
+              })}
+            </box>
+          ) : (
+            <text fg={DIM}>Loading...</text>
+          )}
+          <SidebarSummary
+            allDone={state.allDone}
+            datasetResult={state.datasetResult}
+            stepDurations={state.stepDurations}
+          />
         </box>
-      ) : (
-        <text fg={DIM}>Loading...</text>
-      )}
-
-      <PreflightBanner errors={state.preflightErrors} warnings={state.preflightWarnings} />
-
-      {state.runningCommand || state.runningLines.length > 0 ? (
-        <OutputBox lines={state.runningLines} status={state.runningStatus} />
-      ) : null}
-      {state.runningCommand && !state.failed ? <RunningFooter /> : null}
-
-      {state.showLog ? <LogOverlay lines={state.logLines} /> : null}
+        <box flexDirection='column' flexGrow={1} paddingLeft={2}>
+          {state.preflightErrors.length > 0 || state.preflightWarnings.length > 0 ? (
+            <PreflightBanner errors={state.preflightErrors} warnings={state.preflightWarnings} />
+          ) : null}
+          <scrollbox focused height={logHeight} paddingLeft={1} stickyScroll>
+            {displayLines.length > 0 ? (
+              displayLines.map((line, i) => {
+                const isError = ERROR_PATTERN.test(line)
+                return (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <text fg={isError ? 'red' : DIM} key={i}>
+                    {line}
+                  </text>
+                )
+              })
+            ) : (
+              <text fg={DIM}>Waiting for output...</text>
+            )}
+          </scrollbox>
+        </box>
+      </box>
+      {showHelp ? <HelpDialog height={height} width={width} /> : null}
     </box>
   )
 }