refactor(ui): improve responsive layout and agent naming consistency

moazbuilds · moazbuilds · commit 61865e36495c · 2025-12-11T19:44:14.000+02:00
- Update agent names in config files for better clarity and consistency
- Add responsive layout support for timeline and output components
- Implement width-based truncation and conditional rendering in UI components
diff --git a/config/main.agents.js b/config/main.agents.js
@@ -12,7 +12,7 @@ module.exports = [
   },
   {
     id: 'principal-analyst',
-    name: 'Principal Analyst - Checkpoint',
+    name: 'Analyst Checkpoint',
     description: 'Reviews project specifications and identifies critical ambiguities requiring clarification',
     promptPath: path.join(promptsDir, 'codemachine', 'main-agents', '01-principal-analyst.md'),
   },
@@ -48,13 +48,13 @@ module.exports = [
   },
   {
     id: 'task-sanity-check',
-    name: 'Task Verification Agent',
+    name: 'Task Reviewer',
     description: 'Verifies generated code against task requirements and acceptance criteria',
     promptPath: path.join(promptsDir, 'codemachine', 'main-agents', '07-task-validation-agent.md'),
   },
   {
     id: 'runtime-prep',
-    name: 'Runtime Preparation Agent',
+    name: 'Runtime Prep',
     description: 'Generates robust shell scripts for project automation (install, run, lint, test)',
     promptPath: path.join(promptsDir, 'codemachine', 'main-agents', '08-runtime-preparation-agent.md'),
   },
diff --git a/config/modules.js b/config/modules.js
@@ -5,7 +5,7 @@ const promptsDir = path.join(__dirname, '..', 'prompts');
 module.exports = [
   {
     id: 'check-task',
-    name: 'Task Completion Checker',
+    name: 'Task Loop Checker',
     description: 'Validates that all tasks are completed and signals whether to repeat workflow steps.',
     promptPath: path.join(promptsDir, 'templates', 'codemachine', 'workflows', 'task-verification-workflow.md'),
     behavior: {
diff --git a/config/sub.agents.js b/config/sub.agents.js
@@ -9,25 +9,25 @@ module.exports = [
   },
   {
     id: 'structural-data-architect',
-    name: 'Structural & Data Architect',
+    name: 'Structure Architect',
     description: 'Define the static structure of the system, components hierarchy, and data organization',
     mirrorPath: 'prompts/templates/codemachine/sub-agents/architecture/02-structural-data-architect.md',
   },
   {
     id: 'behavior-architect',
-    name: 'Behavior & Communication Architect',
+    name: 'Behavior Architect',
     description: 'Define dynamic interactions, data flows, and communication patterns between components',
     mirrorPath: 'prompts/templates/codemachine/sub-agents/architecture/03-behavior-architect.md',
   },
   {
     id: 'operational-architect',
-    name: 'Operational & Documentation Architect',
+    name: 'Ops Architect',
     description: 'Handle deployment, operations, security, and documentation architecture',
     mirrorPath: 'prompts/templates/codemachine/sub-agents/architecture/04-operational-architect.md',
   },
   {
     id: 'ui-ux-architect',
-    name: 'UI/UX & Interface Architect',
+    name: 'UI/UX Architect',
     description: 'Define user interface architecture, design systems, component hierarchies, and user experience patterns',
     mirrorPath: 'prompts/templates/codemachine/sub-agents/architecture/05-ui-ux-architect.md',
   },
diff --git a/src/cli/tui/routes/workflow/components/output/output-window.tsx b/src/cli/tui/routes/workflow/components/output/output-window.tsx
@@ -7,7 +7,7 @@
  * Shows last N lines with auto-scroll for running agents using OpenTUI scrollbox
  */
 
-import { Show, For } from "solid-js"
+import { Show, For, createMemo } from "solid-js"
 import { useTheme } from "@tui/shared/context/theme"
 import { ShimmerText } from "./shimmer-text"
 import { TypingText } from "./typing-text"
@@ -40,22 +40,30 @@ export interface OutputWindowProps {
   onPromptSubmit?: (prompt: string) => void
   onSkip?: () => void
   onPromptBoxFocusExit?: () => void
+  // Responsive layout
+  availableWidth?: number
 }
 
 /**
  * Output window showing current agent's output
  * Displays last N lines with syntax highlighting using scrollbox
  */
-const OUTPUT_HEADER_HEIGHT = 4  // Side curve header (╭─ + info + thinking + ╰─)
+const OUTPUT_HEADER_HEIGHT_WIDE = 4  // Side curve header when wide (╭─ + info + thinking + ╰─)
+const OUTPUT_HEADER_HEIGHT_NARROW = 5  // Side curve header when narrow (extra line for status)
+const MIN_WIDTH_FOR_INLINE_STATUS = 75  // Minimum width to show status inline with name
 
 export function OutputWindow(props: OutputWindowProps) {
   const themeCtx = useTheme()
 
+  // Check if we have enough width to show status inline (based on output section width)
+  const isWideLayout = createMemo(() => (props.availableWidth ?? 80) >= MIN_WIDTH_FOR_INLINE_STATUS)
+
   const effectiveMaxLines = () => props.maxLines ?? 20
 
   // Scrollbox height accounts for the output header + prompt line (3 lines)
   const PROMPT_LINE_HEIGHT = 3
-  const scrollboxHeight = () => Math.max(3, effectiveMaxLines() - OUTPUT_HEADER_HEIGHT - PROMPT_LINE_HEIGHT)
+  const outputHeaderHeight = () => isWideLayout() ? OUTPUT_HEADER_HEIGHT_WIDE : OUTPUT_HEADER_HEIGHT_NARROW
+  const scrollboxHeight = () => Math.max(3, effectiveMaxLines() - outputHeaderHeight() - PROMPT_LINE_HEIGHT)
 
   // Check if agent is running
   const isRunning = () => props.currentAgent?.status === "running"
@@ -127,24 +135,47 @@ export function OutputWindow(props: OutputWindowProps) {
           </box>
         }
       >
-        {/* Side Curve Header */}
-        <box flexDirection="column" paddingLeft={1} height={4} flexShrink={0}>
+        {/* Side Curve Header - Responsive layout */}
+        <box flexDirection="column" paddingLeft={1} height={outputHeaderHeight()} flexShrink={0}>
           <text fg={themeCtx.theme.border}>╭─</text>
-          <box flexDirection="row" justifyContent="space-between" paddingRight={2}>
+
+          {/* Wide layout: name and status on same line */}
+          <Show when={isWideLayout()}>
+            <box flexDirection="row" justifyContent="space-between" paddingRight={2}>
+              <box flexDirection="row">
+                <text fg={themeCtx.theme.border}>│  </text>
+                <text fg={themeCtx.theme.text}>{isRunning() && props.latestThinking ? "(╭ರ_•́)" : "(˶ᵔ ᵕ ᵔ˶)"}</text>
+                <text>  </text>
+                <text fg={themeCtx.theme.text} attributes={1}>{props.currentAgent!.name}</text>
+              </box>
+              <box flexDirection="row" gap={1}>
+                <text fg={themeCtx.theme.info}>{props.currentAgent!.engine}</text>
+                <Show when={props.currentAgent!.model}>
+                  <text fg={themeCtx.theme.textMuted}>{props.currentAgent!.model}</text>
+                </Show>
+                <text fg={statusColor()}>● {props.currentAgent!.status}</text>
+              </box>
+            </box>
+          </Show>
+
+          {/* Narrow layout: name on one line, status on next line */}
+          <Show when={!isWideLayout()}>
             <box flexDirection="row">
               <text fg={themeCtx.theme.border}>│  </text>
               <text fg={themeCtx.theme.text}>{isRunning() && props.latestThinking ? "(╭ರ_•́)" : "(˶ᵔ ᵕ ᵔ˶)"}</text>
               <text>  </text>
               <text fg={themeCtx.theme.text} attributes={1}>{props.currentAgent!.name}</text>
             </box>
-            <box flexDirection="row" gap={1}>
+            <box flexDirection="row">
+              <text fg={themeCtx.theme.border}>│  </text>
               <text fg={themeCtx.theme.info}>{props.currentAgent!.engine}</text>
               <Show when={props.currentAgent!.model}>
-                <text fg={themeCtx.theme.textMuted}>{props.currentAgent!.model}</text>
+                <text fg={themeCtx.theme.textMuted}> {props.currentAgent!.model}</text>
               </Show>
-              <text fg={statusColor()}>● {props.currentAgent!.status}</text>
+              <text fg={statusColor()}> ● {props.currentAgent!.status}</text>
             </box>
-          </box>
+          </Show>
+
           <box flexDirection="row">
             <text fg={themeCtx.theme.border}>│  </text>
             <Show when={isRunning() && props.latestThinking} fallback={<text fg={themeCtx.theme.textMuted}>↳ Waiting...</text>}>
diff --git a/src/cli/tui/routes/workflow/components/timeline/agent-timeline.tsx b/src/cli/tui/routes/workflow/components/timeline/agent-timeline.tsx
@@ -20,6 +20,7 @@ export interface AgentTimelineProps {
   state: WorkflowState
   onToggleExpand: (agentId: string) => void
   availableHeight?: number
+  availableWidth?: number
   isPaused?: boolean
   isPromptBoxFocused?: boolean
 }
@@ -89,7 +90,7 @@ export function AgentTimeline(props: AgentTimelineProps) {
 
               // Main agent
               if (item.type === "main") {
-                return <MainAgentNode agent={item.agent} isSelected={isMainSelected(item.id)} isPaused={props.isPaused} />
+                return <MainAgentNode agent={item.agent} isSelected={isMainSelected(item.id)} isPaused={props.isPaused} availableWidth={props.availableWidth} />
               }
 
               // Sub-agent summary (collapsed)
diff --git a/src/cli/tui/routes/workflow/components/timeline/main-agent-node.tsx b/src/cli/tui/routes/workflow/components/timeline/main-agent-node.tsx
@@ -11,19 +11,28 @@ import { useTheme } from "@tui/shared/context/theme"
 import { useTick } from "@tui/shared/hooks/tick"
 import { Spinner } from "@tui/shared/components/spinner"
 import type { AgentState } from "../../state/types"
-import { formatDuration } from "../../state/formatters"
+import { formatDuration, truncate } from "../../state/formatters"
 import { getStatusIcon, getStatusColor } from "./status-utils"
 
 export interface MainAgentNodeProps {
   agent: AgentState
   isSelected: boolean
   isPaused?: boolean
+  availableWidth?: number
 }
 
+// Maximum agent name length before truncation
+const MAX_NAME_LENGTH = 22
+// Minimum timeline section width to show engine name
+const MIN_WIDTH_FOR_ENGINE = 45
+
 export function MainAgentNode(props: MainAgentNodeProps) {
   const themeCtx = useTheme()
   const now = useTick()
 
+  // Only show engine if timeline section is wide enough
+  const showEngine = () => (props.availableWidth ?? 80) >= MIN_WIDTH_FOR_ENGINE
+
   const color = () => props.agent.error ? themeCtx.theme.error : getStatusColor(props.agent.status, themeCtx.theme)
 
   // Store pause state for timer freeze/resume
@@ -79,27 +88,31 @@ export function MainAgentNode(props: MainAgentNodeProps) {
   // Selection indicator
   const selectionPrefix = () => (props.isSelected ? "> " : "  ")
 
+  const displayName = () => truncate(props.agent.name, MAX_NAME_LENGTH)
+
   return (
     <box flexDirection="column" paddingLeft={1} paddingRight={1}>
-      {/* Main line */}
-      <box flexDirection="row">
-        <text fg={themeCtx.theme.text}>{selectionPrefix()}</text>
+      {/* Main line - use wrapMode="none" and overflow="hidden" to prevent text wrapping */}
+      <box flexDirection="row" overflow="hidden">
+        <text wrapMode="none" fg={themeCtx.theme.text}>{selectionPrefix()}</text>
         <Show when={props.agent.status === "running"} fallback={
-          <text fg={color()}>{getStatusIcon(props.agent.status)} </text>
+          <text wrapMode="none" fg={color()}>{getStatusIcon(props.agent.status)} </text>
         }>
           <Show when={props.isPaused} fallback={
             <>
               <Spinner color={color()} />
-              <text> </text>
+              <text wrapMode="none"> </text>
             </>
           }>
-            <text fg={themeCtx.theme.warning}>|| </text>
+            <text wrapMode="none" fg={themeCtx.theme.warning}>|| </text>
           </Show>
         </Show>
-        <text fg={themeCtx.theme.text} attributes={1}>{props.agent.name}</text>
-        <text fg={themeCtx.theme.textMuted}> ({props.agent.engine})</text>
+        <text wrapMode="none" fg={themeCtx.theme.text} attributes={1}>{displayName()}</text>
+        <Show when={showEngine()}>
+          <text wrapMode="none" fg={themeCtx.theme.textMuted}> ({props.agent.engine})</text>
+        </Show>
         <Show when={duration()}>
-          <text fg={themeCtx.theme.textMuted}> • {duration()}</text>
+          <text wrapMode="none" fg={themeCtx.theme.textMuted}> • {duration()}</text>
         </Show>
       </box>
 
diff --git a/src/cli/tui/routes/workflow/workflow-shell.tsx b/src/cli/tui/routes/workflow/workflow-shell.tsx
@@ -318,13 +318,14 @@ export function WorkflowShell(props: WorkflowShellProps) {
       <box flexDirection="row" flexGrow={1} gap={1}>
         <Show when={!isTimelineCollapsed()}>
           <box flexDirection="column" width={showOutputPanel() ? "35%" : "100%"}>
-            <AgentTimeline state={state()} onToggleExpand={(id) => ui.actions.toggleExpand(id)} availableHeight={state().visibleItemCount} isPaused={isWaitingForInput()} isPromptBoxFocused={isPromptBoxFocused()} />
+            <AgentTimeline state={state()} onToggleExpand={(id) => ui.actions.toggleExpand(id)} availableHeight={state().visibleItemCount} availableWidth={Math.floor((dimensions()?.width ?? 80) * (showOutputPanel() ? 0.35 : 1))} isPaused={isWaitingForInput()} isPromptBoxFocused={isPromptBoxFocused()} />
           </box>
         </Show>
         <Show when={showOutputPanel() || isTimelineCollapsed()}>
           <box flexDirection="column" width={isTimelineCollapsed() ? "100%" : "65%"}>
             <OutputWindow
               currentAgent={currentAgent()}
+              availableWidth={Math.floor((dimensions()?.width ?? 80) * (isTimelineCollapsed() ? 1 : 0.65))}
               lines={logStream.lines}
               isLoading={logStream.isLoading}
               isConnecting={logStream.isConnecting}

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ const promptsDir = path.join(__dirname, '..', 'prompts');`
`5`	`5`	`module.exports = [`
`6`	`6`	`{`
`7`	`7`	`id: 'check-task',`
`8`		`- name: 'Task Completion Checker',`
	`8`	`+ name: 'Task Loop Checker',`
`9`	`9`	`description: 'Validates that all tasks are completed and signals whether to repeat workflow steps.',`
`10`	`10`	`promptPath: path.join(promptsDir, 'templates', 'codemachine', 'workflows', 'task-verification-workflow.md'),`
`11`	`11`	`behavior: {`
Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,7 @@ export interface AgentTimelineProps {`
`20`	`20`	`state: WorkflowState`
`21`	`21`	`onToggleExpand: (agentId: string) => void`
`22`	`22`	`availableHeight?: number`
	`23`	`+ availableWidth?: number`
`23`	`24`	`isPaused?: boolean`
`24`	`25`	`isPromptBoxFocused?: boolean`
`25`	`26`	`}`
`@@ -89,7 +90,7 @@ export function AgentTimeline(props: AgentTimelineProps) {`
`89`	`90`
`90`	`91`	`// Main agent`
`91`	`92`	`if (item.type === "main") {`
`92`		`- return <MainAgentNode agent={item.agent} isSelected={isMainSelected(item.id)} isPaused={props.isPaused} />`
	`93`	`+ return <MainAgentNode agent={item.agent} isSelected={isMainSelected(item.id)} isPaused={props.isPaused} availableWidth={props.availableWidth} />`
`93`	`94`	`}`
`94`	`95`
`95`	`96`	`// Sub-agent summary (collapsed)`