Polish TUI layouts to match reference style

Author: Evan1108-Coder

README.md

@@ -470,6 +470,14 @@ The TUI runs in the terminal alternate screen, so exiting returns to the origina
 
 Setupr TUIs share the same terminal-native style: blue uppercase panel titles, thin blue borders, yellow focused borders/actions, green success states, yellow warnings/current work, and red failures. Interactive inputs stay anchored at the bottom of their panel, wrap within the box, and scroll once long input reaches the panel's line cap. `setupr clean` opens a safety review first; type `CLEAN` to delete reviewed targets, or use `--force` only when you intentionally want Setupr to skip the review prompt.
 
+The visual grammar is shared, but each command uses a command-specific board:
+
+- `setupr` and `setupr status --tui` use summary metric cards plus project state, history, processes, env, security, and next-action panels.
+- `setupr setup` uses setup progress, project/dependency/env/service cards, a terminal diary, a bottom input, and a right rail for port map, key dependencies, and notices.
+- `setupr chat` uses a large conversation panel with a bottom input plus a right rail for the active plan and session context.
+- `setupr start` uses managed processes, live logs, current process state, restart policy, and crash info.
+- `setupr doctor`, `setupr update`, `setupr clean`, `setupr env`, and `setupr auth` keep their primary action input at the bottom and use side panels for diagnostics, risks, explanations, warnings, provider status, or secure storage state.
+
 ## Requirements
 
 - Node.js >= 18.0.0

src/tui/components/Panel.tsx

@@ -48,7 +48,6 @@ export function Panel({
     >
       <Box width="100%" flexShrink={0} justifyContent="space-between">
         <Text color={titleColor} bold>
-          {focused ? "▸ " : ancestor ? "◆ " : "  "}
           {title.toUpperCase()}
         </Text>
         {subtitle && <Text color={colors.textDim} wrap="truncate">{subtitle}</Text>}

src/tui/components/TuiFrame.tsx

@@ -15,9 +15,10 @@ interface TuiHeaderProps {
 
 export function TuiHeader({ command, title, cwd, stack, status, statusColor, right, width }: TuiHeaderProps) {
   const compact = width < 118;
+  const pathText = cwd ? shortPath(cwd, compact ? 18 : 28) : "";
   const leftText = compact
     ? `${icons.diamond} ${command}${title ? ` · ${title}` : ""}`
-    : `${icons.diamond} ${command}${title ? `  ${title}` : ""}${stack ? `  Stack: ${stack}` : ""}${cwd ? `  ${shortPath(cwd, Math.max(12, width - 82))}` : ""}`;
+    : `${icons.diamond} ${command}${title ? `  ${title}` : ""}${stack ? `  Stack: ${stack}` : ""}${pathText ? `  ${pathText}` : ""}`;
   const rightText = right || status || "";
   const rightWidth = rightText ? Math.min(width - 8, Math.max(8, rightText.length + 2)) : 0;
   const leftWidth = Math.max(8, width - rightWidth);
@@ -51,7 +52,7 @@ export function TuiFooter({ width, left, right }: TuiFooterProps) {
   return (
     <Box width="100%" height={1} justifyContent="space-between">
       <Box minWidth={0} flexShrink={1}>
-        <Text color={colors.textDim} wrap="truncate">{highlightShortcuts(leftText)}</Text>
+        <Text color={colors.textDim} wrap="truncate">{leftText}</Text>
       </Box>
       {right && (
         <Box flexShrink={0} marginLeft={1}>
@@ -116,16 +117,3 @@ export function formatAge(timestamp: number): string {
   if (hours < 24) return `${hours}h`;
   return `${Math.floor(hours / 24)}d`;
 }
-
-function highlightShortcuts(text: string) {
-  const shortcutPattern = /^(Ctrl\+[A-Za-z]|Tab|Esc|Enter|q|←\/↑\/↓\/→|↑\/↓|Click)$/;
-  const parts = text.split(/(Ctrl\+[A-Za-z]|Tab|Esc|Enter|\bq\b|←\/↑\/↓\/→|↑\/↓|Click)/g);
-  return (
-    <>
-      {parts.map((part, index) => {
-        const isKey = shortcutPattern.test(part);
-        return <Text key={`${part}-${index}`} color={isKey ? colors.accent : colors.textDim} bold={isKey}>{part}</Text>;
-      })}
-    </>
-  );
-}

src/tui/layouts/AuthLayout.tsx

@@ -157,30 +157,23 @@ function StoragePanel() {
 
 function ProviderRow({ row, compact = false }: { row: { provider: AIProvider; label: string; key?: string; source: string | null; configured: boolean }; compact?: boolean }) {
   const config = PROVIDERS[row.provider];
-  const source = row.source ? ` ${row.source}` : "";
+  const envLabel = config.envKey.replace("_API_KEY", "");
+  const keyLabel = row.key ? maskApiKey(row.key) : "missing";
   if (compact) {
     return (
       <Text color={row.configured ? colors.success : colors.textDim} wrap="truncate">
-        {row.configured ? "✓" : "○"} {row.label} · {row.key ? maskApiKey(row.key) : "missing"}{source}
+        {row.configured ? "✓" : "○"} {row.label} · {keyLabel}{row.source ? ` · ${row.source}` : ""}
       </Text>
     );
   }
 
   return (
-    <Box justifyContent="space-between" width="100%" minWidth={0}>
-      <Box flexShrink={1} minWidth={0} marginRight={1}>
-        <Text color={row.configured ? colors.success : colors.textDim} wrap="truncate">
-          {row.configured ? "✓" : "○"} {row.label}
-        </Text>
-        <Text color={colors.textDim} wrap="truncate"> {config.envKey.replace("_API_KEY", "")}</Text>
-      </Box>
-      <Box flexShrink={0}>
-        <Text color={row.configured ? colors.value : colors.textDim}>
-          {row.key ? maskApiKey(row.key) : "missing"}
-        </Text>
-        <Text color={colors.textDim}> {row.source || ""}</Text>
-      </Box>
-    </Box>
+    <Text wrap="truncate">
+      <Text color={row.configured ? colors.success : colors.textDim}>{fitCell(`${row.configured ? "✓" : "○"} ${row.label}`, 16)}</Text>
+      <Text color={colors.textDim}>{fitCell(envLabel, 16)}</Text>
+      <Text color={row.configured ? colors.value : colors.textDim}>{fitCell(keyLabel, 14)}</Text>
+      <Text color={colors.textDim}>{row.source || ""}</Text>
+    </Text>
   );
 }
 
@@ -234,7 +227,7 @@ function buildAuthLayout(width: number, height: number): AuthLayoutGeometry {
     };
   }
 
-  const [providersWidth, modelWidth, actionsWidth] = distributeWidths(width, [0.45, 0.32, 0.23], [34, 30, 24]);
+  const [providersWidth, modelWidth, actionsWidth] = distributeWidths(width, [0.28, 0.48, 0.24], [30, 40, 28]);
   return {
     width,
     height,
@@ -292,3 +285,9 @@ function fitWidths(total: number, count: number): number[] {
 function clamp(value: number, min: number, max: number): number {
   return Math.max(min, Math.min(max, value));
 }
+
+function fitCell(value: string, width: number): string {
+  if (value.length === width) return value;
+  if (value.length > width) return `${value.slice(0, Math.max(0, width - 1))}…`;
+  return value.padEnd(width, " ");
+}

src/tui/layouts/CleanLayout.tsx

@@ -152,25 +152,30 @@ export function CleanLayout({ cwd, mode, force = false }: CleanLayoutProps) {
 }
 
 function WideClean(props: CleanViewProps) {
+  const panelHeight = Math.max(6, props.layout.bodyHeight - props.layout.inputHeight);
   return (
-    <Box flexDirection="row" width={props.layout.width} height={props.layout.bodyHeight}>
-      <Panel title="Targets" focusState={props.focus("targets")} width={props.layout.targetsWidth} height="100%">
-        <TargetsPanel {...props} />
-      </Panel>
-      <Panel title="Safety Review" focusState={props.focus("review")} width={props.layout.reviewWidth} height="100%">
-        <SafetyPanel {...props} />
-      </Panel>
-      <Panel title="Risk Summary" focusState={props.focus("risk")} width={props.layout.riskWidth} height="100%">
-        <RiskPanel {...props} />
-      </Panel>
+    <Box flexDirection="column" width={props.layout.width} height={props.layout.bodyHeight}>
+      <Box flexDirection="row" width="100%" height={panelHeight}>
+        <Panel title="Targets" focusState={props.focus("targets")} width={props.layout.targetsWidth} height="100%">
+          <TargetsPanel {...props} limit={panelHeight - 3} />
+        </Panel>
+        <Panel title="Safety Review" focusState={props.focus("review")} width={props.layout.reviewWidth} height="100%">
+          <SafetyPanel {...props} />
+        </Panel>
+        <Panel title="Risk Summary" focusState={props.focus("risk")} width={props.layout.riskWidth} height="100%">
+          <RiskPanel {...props} />
+        </Panel>
+      </Box>
+      <CleanCommandStrip {...props} width={props.layout.width} />
     </Box>
   );
 }
 
 function StackedClean(props: CleanViewProps) {
-  const targetsHeight = Math.max(8, Math.floor(props.layout.bodyHeight * 0.45));
-  const reviewHeight = Math.max(7, Math.floor(props.layout.bodyHeight * 0.32));
-  const riskHeight = Math.max(5, props.layout.bodyHeight - targetsHeight - reviewHeight);
+  const panelHeight = Math.max(8, props.layout.bodyHeight - props.layout.inputHeight);
+  const targetsHeight = Math.max(8, Math.floor(panelHeight * 0.45));
+  const reviewHeight = Math.max(7, Math.floor(panelHeight * 0.32));
+  const riskHeight = Math.max(5, panelHeight - targetsHeight - reviewHeight);
   return (
     <Box flexDirection="column" width={props.layout.width} height={props.layout.bodyHeight}>
       <Panel title="Targets" focusState={props.focus("targets")} width="100%" height={targetsHeight}>
@@ -182,6 +187,7 @@ function StackedClean(props: CleanViewProps) {
       <Panel title="Risk Summary" focusState={props.focus("risk")} width="100%" height={riskHeight}>
         <RiskPanel {...props} compact />
       </Panel>
+      <CleanCommandStrip {...props} width={props.layout.width} />
     </Box>
   );
 }
@@ -207,7 +213,7 @@ function TargetsPanel({ targets, phase, limit = 12 }: CleanViewProps & { limit?:
   );
 }
 
-function SafetyPanel({ layout, mode, phase, message, targets, inputActive, inputBounds, focus, onConfirm }: CleanViewProps) {
+function SafetyPanel({ mode, phase, message, targets }: CleanViewProps) {
   const willDelete = targets.filter((target) => target.status === "pending" || target.status === "removing").length;
   return (
     <Box flexDirection="column" flexGrow={1} minHeight={0}>
@@ -219,17 +225,30 @@ function SafetyPanel({ layout, mode, phase, message, targets, inputActive, input
         <Text color={phase === "blocked" ? colors.warning : phase === "done" ? colors.success : colors.text} wrap="truncate">{message}</Text>
         <KVRow label="Pending targets" value={willDelete} color={willDelete > 0 ? colors.warning : colors.success} />
       </Box>
-      {(phase === "review" || phase === "blocked") && (
-        <ChatInput
-          active={inputActive}
-          focusState={focus("input")}
-          onSubmit={onConfirm}
-          placeholder='Type CLEAN to confirm deletion...'
-          width={Math.max(12, layout.reviewWidth - 4)}
-          maxLines={layout.inputMaxLines}
-          scrollBounds={inputBounds}
-        />
-      )}
+    </Box>
+  );
+}
+
+function CleanCommandStrip({ layout, phase, inputActive, inputBounds, focus, onConfirm, width }: CleanViewProps & { width: number }) {
+  const disabled = phase !== "review" && phase !== "blocked";
+  const placeholder = phase === "blocked"
+    ? 'Type CLEAN to confirm, or q to quit...'
+    : phase === "done"
+      ? "Clean finished. Ask or press q to quit..."
+      : "Type CLEAN to confirm deletion...";
+  return (
+    <Box width="100%" height={layout.inputHeight} justifyContent="center" alignItems="center">
+      <ChatInput
+        active={inputActive}
+        focusState={focus("input")}
+        onSubmit={onConfirm}
+        placeholder={placeholder}
+        width={Math.max(12, width - 2)}
+        maxLines={layout.inputMaxLines}
+        scrollBounds={inputBounds}
+        disabled={disabled}
+        disabledText={placeholder}
+      />
     </Box>
   );
 }
@@ -257,15 +276,21 @@ export function buildCleanLayout(width: number, height: number): CleanLayoutGeom
   const reviewWidth = stacked ? width : width - targetsWidth - riskWidth;
   const inputMaxLines = Math.max(1, Math.min(4, Math.floor(bodyHeight / 6)));
   const inputHeight = inputMaxLines + 2;
-  const inputBounds = { x: stacked ? 3 : targetsWidth + 3, y: Math.max(4, height - inputHeight - 1), width: Math.max(8, reviewWidth - 6), height: inputHeight };
+  const inputBounds = {
+    x: stacked ? 3 : 3,
+    y: Math.max(4, height - inputHeight - 1),
+    width: Math.max(8, stacked ? width - 6 : width - 6),
+    height: inputHeight,
+  };
   return { width, height, stacked, bodyHeight, targetsWidth, reviewWidth, riskWidth, inputMaxLines, inputHeight, inputBounds };
 }
 
 export function buildCleanFocusItems(layout: CleanLayoutGeometry): FocusItem[] {
   if (layout.stacked) {
-    const targetsHeight = Math.max(8, Math.floor(layout.bodyHeight * 0.45));
-    const reviewHeight = Math.max(7, Math.floor(layout.bodyHeight * 0.32));
-    const riskHeight = Math.max(5, layout.bodyHeight - targetsHeight - reviewHeight);
+    const panelHeight = Math.max(8, layout.bodyHeight - layout.inputHeight);
+    const targetsHeight = Math.max(8, Math.floor(panelHeight * 0.45));
+    const reviewHeight = Math.max(7, Math.floor(panelHeight * 0.32));
+    const riskHeight = Math.max(5, panelHeight - targetsHeight - reviewHeight);
     return [
       { id: "targets", row: 0, column: 0, bounds: { x: 1, y: 2, width: layout.width, height: targetsHeight } },
       { id: "review", row: 1, column: 0, redirectTo: "input", bounds: { x: 1, y: 2 + targetsHeight, width: layout.width, height: reviewHeight } },
@@ -274,10 +299,10 @@ export function buildCleanFocusItems(layout: CleanLayoutGeometry): FocusItem[] {
     ];
   }
   return [
-    { id: "targets", row: 0, column: 0, bounds: { x: 1, y: 2, width: layout.targetsWidth, height: layout.bodyHeight } },
-    { id: "review", row: 0, column: 1, redirectTo: "input", bounds: { x: layout.targetsWidth + 1, y: 2, width: layout.reviewWidth, height: layout.bodyHeight } },
+    { id: "targets", row: 0, column: 0, bounds: { x: 1, y: 2, width: layout.targetsWidth, height: layout.bodyHeight - layout.inputHeight } },
+    { id: "review", row: 0, column: 1, redirectTo: "input", bounds: { x: layout.targetsWidth + 1, y: 2, width: layout.reviewWidth, height: layout.bodyHeight - layout.inputHeight } },
     { id: "input", row: 1, column: 1, parentIds: ["review"], bounds: layout.inputBounds },
-    { id: "risk", row: 0, column: 2, bounds: { x: layout.targetsWidth + layout.reviewWidth + 1, y: 2, width: layout.riskWidth, height: layout.bodyHeight } },
+    { id: "risk", row: 0, column: 2, bounds: { x: layout.targetsWidth + layout.reviewWidth + 1, y: 2, width: layout.riskWidth, height: layout.bodyHeight - layout.inputHeight } },
   ];
 }
 

src/tui/layouts/DashboardLayout.tsx

@@ -427,33 +427,29 @@ function ActionsHistoryPanel({ status, limit }: { status: DashboardStatus; limit
     ...status.history.slice(-Math.max(0, Math.floor(limit / 2))).map((event) => ({
       left: formatTime(event.timestamp),
       middle: event.type,
-      right: event.message || "complete",
+      status: event.type.includes("error") ? "error" : event.type.includes("warning") ? "warn" : "complete",
+      detail: event.message || "finished",
       color: event.type.includes("error") ? colors.error : event.type.includes("warning") ? colors.warning : colors.success,
     })),
     ...preferredCommands(status).slice(0, Math.max(2, limit - Math.floor(limit / 2))).map((command) => ({
-      left: "ACTION",
+      left: "shortcut",
       middle: command.name,
-      right: command.summary,
+      status: "ready",
+      detail: command.summary,
       color: colors.primary,
     })),
   ].slice(0, Math.max(1, limit));
 
   return (
     <Box flexDirection="column">
-      <Box justifyContent="space-between">
-        <Text color={colors.heading}>TIME / ACTION</Text>
-        <Text color={colors.heading}>STATUS</Text>
-      </Box>
+      <Text color={colors.heading}>TIME     ACTION                 STATUS    DETAIL</Text>
       {rows.length === 0 ? <Text color={colors.textDim}>No local history yet.</Text> : rows.map((row, index) => (
-        <Box key={`${row.left}-${row.middle}-${index}`} justifyContent="space-between" minWidth={0}>
-          <Box flexShrink={1} minWidth={0}>
-            <Text color={colors.textDim}>{row.left}  </Text>
-            <Text color={colors.text} wrap="truncate">{row.middle}</Text>
-          </Box>
-          <Box flexShrink={1} minWidth={0}>
-            <Text color={row.color} wrap="truncate">{row.right}</Text>
-          </Box>
-        </Box>
+        <Text key={`${row.left}-${row.middle}-${index}`} wrap="truncate">
+          <Text color={colors.textDim}>{fitCell(row.left, 8)} </Text>
+          <Text color={row.color}>{fitCell(row.middle, 20)} </Text>
+          <Text color={row.color}>{fitCell(row.status, 9)} </Text>
+          <Text color={colors.textDim}>{row.detail}</Text>
+        </Text>
       ))}
     </Box>
   );
@@ -478,13 +474,11 @@ function ProjectStatePanel({ status, limit }: { status: DashboardStatus; limit:
   return (
     <Box flexDirection="column">
       {rows.slice(-Math.max(1, limit)).map((event, index) => (
-        <Box key={`${event.timestamp}-${event.type}-${index}`} justifyContent="space-between" minWidth={0}>
-          <Box minWidth={0} flexShrink={1}>
-            <Text color={colors.textDim}>{formatTime(event.timestamp)}  </Text>
-            <Text color={colors.text} wrap="truncate">{event.message || event.type}</Text>
-          </Box>
+        <Text key={`${event.timestamp}-${event.type}-${index}`} wrap="truncate">
+          <Text color={colors.textDim}>{fitCell(formatTime(event.timestamp), 8)} </Text>
+          <Text color={colors.text}>{fitCell(event.message || event.type, 42)} </Text>
           <Text color={event.type.includes("error") ? colors.error : colors.success}>complete</Text>
-        </Box>
+        </Text>
       ))}
     </Box>
   );
@@ -635,6 +629,12 @@ function formatTime(timestamp: number): string {
   return new Date(timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
 }
 
+function fitCell(value: string, width: number): string {
+  if (value.length === width) return value;
+  if (value.length > width) return `${value.slice(0, Math.max(0, width - 1))}…`;
+  return value.padEnd(width, " ");
+}
+
 function distributeWidths(total: number, weights: number[], mins: number[]): number[] {
   const minTotal = mins.reduce((sum, item) => sum + item, 0);
   if (total <= minTotal) return fitWidths(total, mins.length);