🤖 feat: init hook auto-scroll and duration display (#1240)

## Summary

Two UX improvements for init hook output:

### Auto-scroll to bottom while running
- Uses `flex-col-reverse` with reversed array for CSS-based scroll
anchoring
- No refs or effects needed - scroll naturally stays at bottom as lines
are added

### Duration display on completion
- Tracks `startTime` (from init-start) and `endTime` (from init-end)
- Computes `durationMs` and adds it to the DisplayedMessage type
- Shows human-friendly duration formatting:
  - `<1s`: milliseconds (e.g., "832ms")
  - `1-10s`: decimal seconds (e.g., "3.2s")
  - `10-60s`: whole seconds (e.g., "45s")
  - `>60s`: minutes and seconds (e.g., "2m 15s")
- Duration shown for both success and error states

---
_Generated with `mux` • Model: `anthropic:claude-opus-4-5` • Thinking:
`high`_

Author: ammar-agent

src/browser/components/Messages/InitMessage.tsx

@@ -9,11 +9,23 @@ interface InitMessageProps {
   className?: string;
 }
 
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  if (ms < 10000) return `${(ms / 1000).toFixed(1)}s`;
+  if (ms < 60000) return `${Math.round(ms / 1000)}s`;
+  const mins = Math.floor(ms / 60000);
+  const secs = Math.round((ms % 60000) / 1000);
+  return `${mins}m ${secs}s`;
+}
+
 export const InitMessage = React.memo<InitMessageProps>(({ message, className }) => {
   const isError = message.status === "error";
   const isRunning = message.status === "running";
   const isSuccess = message.status === "success";
 
+  const durationText =
+    message.durationMs !== null ? ` in ${formatDuration(message.durationMs)}` : "";
+
   return (
     <div
       className={cn(
@@ -43,23 +55,30 @@ export const InitMessage = React.memo<InitMessageProps>(({ message, className })
           {isRunning ? (
             <Shimmer colorClass="var(--color-accent)">Running init hook...</Shimmer>
           ) : isSuccess ? (
-            "Init hook completed"
+            `Init hook completed${durationText}`
           ) : (
-            <span className="text-error">Init hook failed (exit code {message.exitCode})</span>
+            <span className="text-error">
+              Init hook failed (exit code {message.exitCode}){durationText}
+            </span>
           )}
         </span>
       </div>
       <div className="text-muted mt-1 truncate font-mono text-[11px]">{message.hookPath}</div>
       {message.lines.length > 0 && (
-        <pre
+        <div
           className={cn(
-            "m-0 mt-2.5 max-h-[120px] overflow-auto rounded-sm",
-            "bg-black/30 px-2 py-1.5 font-mono text-[11px] leading-relaxed whitespace-pre-wrap",
+            "m-0 mt-2.5 flex max-h-[120px] flex-col-reverse overflow-auto rounded-sm",
+            "bg-black/30 px-2 py-1.5 font-mono text-[11px] leading-relaxed",
             isError ? "text-danger-soft" : "text-light"
           )}
         >
-          {message.lines.join("\n")}
-        </pre>
+          {/* flex-col-reverse with reversed array auto-scrolls to bottom */}
+          {message.lines.toReversed().map((line, i) => (
+            <div key={i} className="whitespace-pre-wrap">
+              {line}
+            </div>
+          ))}
+        </div>
       )}
     </div>
   );

src/browser/utils/messages/StreamingMessageAggregator.ts

@@ -200,7 +200,8 @@ export class StreamingMessageAggregator {
     hookPath: string;
     lines: string[];
     exitCode: number | null;
-    timestamp: number;
+    startTime: number;
+    endTime: number | null;
   } | null = null;
 
   // Track when we're waiting for stream-start after user message
@@ -1288,7 +1289,8 @@ export class StreamingMessageAggregator {
         hookPath: data.hookPath,
         lines: [],
         exitCode: null,
-        timestamp: data.timestamp,
+        startTime: data.timestamp,
+        endTime: null,
       };
       this.invalidateCache();
       return;
@@ -1321,6 +1323,7 @@ export class StreamingMessageAggregator {
       }
       this.initState.exitCode = data.exitCode;
       this.initState.status = data.exitCode === 0 ? "success" : "error";
+      this.initState.endTime = data.timestamp;
       this.invalidateCache();
       return;
     }
@@ -1624,6 +1627,10 @@ export class StreamingMessageAggregator {
 
       // Add init state if present (ephemeral, appears at top)
       if (this.initState) {
+        const durationMs =
+          this.initState.endTime !== null
+            ? this.initState.endTime - this.initState.startTime
+            : null;
         const initMessage: DisplayedMessage = {
           type: "workspace-init",
           id: "workspace-init",
@@ -1632,7 +1639,8 @@ export class StreamingMessageAggregator {
           hookPath: this.initState.hookPath,
           lines: [...this.initState.lines], // Shallow copy for React.memo change detection
           exitCode: this.initState.exitCode,
-          timestamp: this.initState.timestamp,
+          timestamp: this.initState.startTime,
+          durationMs,
         };
         displayedMessages.unshift(initMessage);
       }

src/common/types/message.ts

@@ -261,6 +261,7 @@ export type DisplayedMessage =
       lines: string[]; // Accumulated output lines (stderr prefixed with "ERROR:")
       exitCode: number | null; // Final exit code (null while running)
       timestamp: number;
+      durationMs: number | null; // Duration in milliseconds (null while running)
     }
   | {
       type: "plan-display"; // Ephemeral plan display from /plan command