fix: Process init events immediately for real-time display

Init events were being buffered until 'caught-up', preventing real-time
display during workspace creation. Since init hooks run BEFORE any chat
history exists, they should be processed immediately, not buffered.

Changes:
- Init events now bypass the buffering logic in handleChatMessage()
- Updated comments to reflect that init events are not buffered
- All 764 unit tests pass
- All 4 init hook integration tests pass

Author: ammar-agent

src/components/AIView.tsx

@@ -30,203 +30,6 @@ import { TooltipWrapper, Tooltip } from "./Tooltip";
 import type { DisplayedMessage } from "@/types/message";
 import { useAIViewKeybinds } from "@/hooks/useAIViewKeybinds";
 
-const ViewContainer = styled.div`
-  flex: 1;
-  display: flex;
-  flex-direction: row;
-  background: #1e1e1e;
-  color: #d4d4d4;
-  font-family: var(--font-monospace);
-  font-size: 12px;
-  overflow-x: auto;
-  overflow-y: hidden;
-  container-type: inline-size;
-
-  /* Mobile: Stack vertically */
-  @media (max-width: 768px) {
-    flex-direction: column;
-  }
-`;
-
-const ChatArea = styled.div`
-  flex: 1;
-  min-width: 400px; /* Reduced from 750px to allow narrower layout when Review panel is wide */
-  display: flex;
-  flex-direction: column;
-
-  /* Mobile: Remove min-width and take full width */
-  @media (max-width: 768px) {
-    min-width: 0;
-    width: 100%;
-    max-height: 100%;
-  }
-`;
-
-const ViewHeader = styled.div`
-  padding: 4px 15px;
-  background: #252526;
-  border-bottom: 1px solid #3e3e42;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  /* Mobile: Add padding for hamburger button and adjust spacing */
-  @media (max-width: 768px) {
-    padding: 8px 15px 8px 60px; /* Extra left padding for hamburger button */
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-`;
-
-const WorkspaceTitle = styled.div`
-  font-weight: 600;
-  color: #cccccc;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0; /* Allow flex children to shrink */
-  overflow: hidden;
-`;
-
-const WorkspacePath = styled.span`
-  font-family: var(--font-monospace);
-  color: #888;
-  font-weight: 400;
-  font-size: 11px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 0;
-
-  /* Hide path on mobile to save space */
-  @media (max-width: 768px) {
-    display: none;
-  }
-`;
-
-const WorkspaceName = styled.span`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 0;
-`;
-
-const TerminalIconButton = styled.button`
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #888;
-  transition: color 0.2s;
-
-  &:hover {
-    color: #ccc;
-  }
-
-  svg {
-    width: 16px;
-    height: 16px;
-  }
-`;
-
-const OutputContainer = styled.div`
-  flex: 1;
-  position: relative;
-  overflow: hidden;
-`;
-
-const OutputContent = styled.div`
-  height: 100%;
-  overflow-y: auto;
-  padding: 15px;
-  white-space: pre-wrap;
-  word-break: break-word;
-  line-height: 1.5;
-`;
-
-const EmptyState = styled.div`
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: #6b6b6b;
-  text-align: center;
-
-  h3 {
-    margin: 0 0 10px 0;
-    font-size: 16px;
-    font-weight: 500;
-  }
-
-  p {
-    margin: 0;
-    font-size: 13px;
-  }
-
-  code {
-    font-family: var(--font-monospace);
-    background: #2d2d30;
-    padding: 2px 6px;
-    border-radius: 3px;
-    color: #d7ba7d;
-    font-size: 11px;
-  }
-`;
-
-const EditBarrier = styled.div`
-  margin: 20px 0;
-  padding: 12px 15px;
-  background: var(--color-editing-mode-alpha);
-  border-bottom: 3px solid;
-  border-image: repeating-linear-gradient(
-      45deg,
-      var(--color-editing-mode),
-      var(--color-editing-mode) 10px,
-      transparent 10px,
-      transparent 20px
-    )
-    1;
-  color: var(--color-editing-mode);
-  font-size: 12px;
-  font-weight: 500;
-  text-align: center;
-`;
-
-const JumpToBottomIndicator = styled.button`
-  position: absolute;
-  bottom: 8px;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 4px 8px;
-  background: hsl(from var(--color-assistant-border) h s l / 0.1);
-  color: white;
-  border: 1px solid hsl(from var(--color-assistant-border) h s l / 0.4);
-  border-radius: 20px;
-  font-size: 12px;
-  font-weight: 500;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  z-index: 100;
-  font-family: var(--font-primary);
-  backdrop-filter: blur(1px);
-
-  &:hover {
-    background: hsl(from var(--color-assistant-border) h s l / 0.4);
-    border-color: hsl(from var(--color-assistant-border) h s l / 0.6);
-    transform: translateX(-50%) scale(1.05);
-  }
-
-  &:active {
-    transform: translateX(-50%) scale(0.95);
-  }
-`;
-
 interface AIViewProps {
   workspaceId: string;
   projectName: string;
@@ -519,10 +322,19 @@ const AIViewInner: React.FC<AIViewProps> = ({
   }
 
   return (
-    <ViewContainer className={className}>
-      <ChatArea ref={chatAreaRef}>
-        <ViewHeader>
-          <WorkspaceTitle>
+    <div
+      className={cn(
+        "flex flex-1 flex-row bg-dark text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+        className
+      )}
+      style={{ containerType: "inline-size" }}
+    >
+      <div
+        ref={chatAreaRef}
+        className="flex min-w-96 flex-1 flex-col [@media(max-width:768px)]:max-h-full [@media(max-width:768px)]:w-full [@media(max-width:768px)]:min-w-0"
+      >
+        <div className="bg-separator border-border-light flex items-center justify-between border-b px-[15px] py-1 [@media(max-width:768px)]:flex-wrap [@media(max-width:768px)]:gap-2 [@media(max-width:768px)]:py-2 [@media(max-width:768px)]:pl-[60px]">
+          <div className="text-foreground flex min-w-0 items-center gap-2 overflow-hidden font-semibold">
             <StatusIndicator
               streaming={canInterrupt}
               title={
@@ -574,11 +386,15 @@ const AIViewInner: React.FC<AIViewProps> = ({
                 <h3>No Messages Yet</h3>
                 <p>Send a message below to begin</p>
                 <p style={{ marginTop: "20px", fontSize: "12px", color: "#888" }}>
-                  💡 Tip: Add a <code>.cmux/init</code> hook to your project to run setup commands
+                  💡 Tip: Add a{" "}
+                  <code className="rounded-[3px] bg-[#2d2d30] px-1.5 py-0.5 font-mono text-[11px] text-[#d7ba7d]">
+                    .cmux/init
+                  </code>{" "}
+                  hook to your project to run setup commands
                   <br />
                   (e.g., install dependencies, build) when creating new workspaces
                 </p>
-              </EmptyState>
+              </div>
             ) : (
               <>
                 {mergedMessages.map((msg) => {

src/stores/WorkspaceStore.ts

@@ -816,7 +816,6 @@ export class WorkspaceStore {
       this.replayingHistory.add(workspaceId);
 
       // Process buffered stream events now that history is loaded
-      // This includes init events that occurred during workspace creation
       const pendingEvents = this.pendingStreamEvents.get(workspaceId) ?? [];
       for (const event of pendingEvents) {
         this.processStreamEvent(workspaceId, aggregator, event);
@@ -842,17 +841,25 @@ export class WorkspaceStore {
       return;
     }
 
+    // Init events are processed immediately (not buffered)
+    // They arrive BEFORE caught-up during workspace creation and represent
+    // the initialization state of the workspace, not chat streaming state.
+    // Buffering them would prevent real-time display during workspace creation.
+    if (isInitStart(data) || isInitOutput(data) || isInitEnd(data)) {
+      this.processStreamEvent(workspaceId, aggregator, data);
+      return;
+    }
+
     // OPTIMIZATION: Buffer stream events until caught-up to reduce excess re-renders
     // When first subscribing to a workspace, we receive:
     // 1. Historical messages from chat.jsonl (potentially hundreds of messages)
     // 2. Partial stream state (if stream was interrupted)
     // 3. Active stream events (if currently streaming)
-    // 4. Init events (if .cmux/init hook ran during workspace creation)
     //
     // Without buffering, each event would trigger a separate re-render as messages
     // arrive one-by-one over IPC. By buffering until "caught-up", we:
     // - Load all historical messages in one batch (O(1) render instead of O(N))
-    // - Replay buffered stream/init events after history is loaded
+    // - Replay buffered stream events after history is loaded
     // - Provide correct context for stream continuation (history is complete)
     //
     // This is especially important for workspaces with long histories (100+ messages),
@@ -985,9 +992,8 @@ export class WorkspaceStore {
     }
 
     // Handle init events
-    // Note: Init events are buffered in handleChatMessage() until caught-up,
-    // then replayed here along with other buffered stream events.
-    // This ensures they render with full historical context.
+    // Note: Init events are processed immediately in handleChatMessage() (not buffered)
+    // because they arrive during workspace creation before any chat history exists.
     if (isInitStart(data) || isInitOutput(data) || isInitEnd(data)) {
       aggregator.handleMessage(data);
       this.states.bump(workspaceId);