feat(controller): add distinct visual styling for controller output

add header, footer and line formatting for controller agent output
use blue color and background for better visual distinction

Author: moazbuilds

src/cli/tui/routes/workflow/components/shared/log-line.tsx

@@ -148,6 +148,9 @@ export function LogLine(props: LogLineProps) {
   // Check if this is a user input line (magenta) - show with background
   const isUserInput = () => parsed().color === "magenta"
 
+  // Check if this is controller output (blue) - show with distinct background
+  const isControllerOutput = () => parsed().color === "blue"
+
   // Compute text attributes bitmask (add bold for star prefix)
   const textAttrs = createMemo(() => {
     let attrs = getTextAttributes(parsed())
@@ -189,7 +192,7 @@ export function LogLine(props: LogLineProps) {
             </Show>
             <text
               fg={lineColor()}
-              bg={isUserInput() ? themeCtx.theme.backgroundElement : undefined}
+              bg={isUserInput() ? themeCtx.theme.backgroundElement : isControllerOutput() ? '#1a365d' : undefined}
               attributes={textAttrs()}
             >
               {line}

src/shared/formatters/outputMarkers.ts

@@ -419,6 +419,28 @@ export function formatUserInput(text: string): string {
   return addMarker('MAGENTA', `${SYMBOL_USER} ${text}`, 'BOLD')
 }
 
+/**
+ * Format controller agent output header (distinct visual style)
+ */
+export function formatControllerHeader(agentName?: string): string {
+  const name = agentName ?? 'Controller'
+  return addMarker('BLUE', `┌── ${name} ${'─'.repeat(30)}`, 'BOLD')
+}
+
+/**
+ * Format controller agent output footer
+ */
+export function formatControllerFooter(): string {
+  return addMarker('BLUE', `└${'─'.repeat(40)}`, 'BOLD')
+}
+
+/**
+ * Format controller agent output line (uses BLUE for distinct styling)
+ */
+export function formatControllerOutput(text: string): string {
+  return addMarker('BLUE', text)
+}
+
 /**
  * Format AI response header
  */

src/workflows/input/controller.ts

@@ -12,6 +12,10 @@ import {
   parseControllerAction,
   extractInputText,
 } from '../../shared/workflows/controller.js';
+import {
+  formatControllerHeader,
+  formatControllerFooter,
+} from '../../shared/formatters/outputMarkers.js';
 import type { ControllerConfig } from '../../shared/workflows/template.js';
 import type {
   InputProvider,
@@ -87,14 +91,19 @@ export class ControllerInputProvider implements InputProvider {
       // Build prompt for controller
       const prompt = context.stepOutput.output || 'Continue from where you left off.';
 
+      // Write controller header
+      if (context.stepOutput.monitoringId !== undefined) {
+        loggerService.write(context.stepOutput.monitoringId, '\n' + formatControllerHeader('PO Agent') + '\n');
+      }
+
       // Execute controller agent (resume existing session)
       const result = await executeAgent(config.agentId, prompt, {
         workingDir: this.cwd,
         resumeSessionId: config.sessionId,
         resumePrompt: prompt,
         abortSignal: this.abortController.signal,
         logger: (chunk) => {
-          // Log controller output to step's log
+          // Log controller output to step's log (preserve original formatting)
           if (context.stepOutput.monitoringId !== undefined) {
             loggerService.write(context.stepOutput.monitoringId, chunk);
           }
@@ -106,6 +115,11 @@ export class ControllerInputProvider implements InputProvider {
         },
       });
 
+      // Write controller footer
+      if (context.stepOutput.monitoringId !== undefined) {
+        loggerService.write(context.stepOutput.monitoringId, '\n' + formatControllerFooter() + '\n');
+      }
+
       if (this.aborted) {
         debug('[Controller] Aborted during execution');
         return { type: 'stop' };