Enhance backend terminal session management and frontend command comparison features. Added new API endpoints for terminal session creation, input handling, resizing, and stopping. Updated frontend to support real-time command broadcasting and display runtime comparisons between jobs. Improved styling and layout for terminal panes and comparison statistics.

backend/main.py

@@ -8,10 +8,12 @@ ROOT = Path(__file__).resolve().parents[1]
 if str(ROOT) not in sys.path:
     sys.path.insert(0, str(ROOT))
 
-from fastapi import FastAPI, HTTPException
+from fastapi import FastAPI, HTTPException, WebSocket, WebSocketDisconnect
 from fastapi.middleware.cors import CORSMiddleware
 from pydantic import BaseModel
 
+from backend.terminal_manager import ALLOWED_JOBS, TerminalManager
+
 app = FastAPI(
     title="RL Autotuning Backend",
     description="Backend API for the multi-family GPU autotuning benchmark",
@@ -20,13 +22,19 @@ app = FastAPI(
 
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["*"],
-    allow_credentials=True,
+    allow_origins=[
+        "http://localhost:5173",
+        "http://127.0.0.1:5173",
+        "http://localhost:4173",
+        "http://127.0.0.1:4173",
+    ],
+    allow_credentials=False,
     allow_methods=["*"],
     allow_headers=["*"],
 )
 
 env = None
+terminal_manager = TerminalManager()
 
 
 def _get_env():
@@ -53,6 +61,21 @@ class StepRequest(BaseModel):
     x: Optional[List[float]] = None
 
 
+class SessionRequest(BaseModel):
+    job_id: str
+    restart: bool = False
+
+
+class SessionInputRequest(BaseModel):
+    data: str
+    append_newline: bool = True
+
+
+class SessionResizeRequest(BaseModel):
+    cols: int
+    rows: int
+
+
 @app.get("/health")
 def health() -> Dict[str, str]:
     return {"status": "ok"}
@@ -78,6 +101,76 @@ def state() -> Dict[str, Any]:
     return _get_env().state()
 
 
+@app.get("/terminal/jobs")
+def terminal_jobs() -> Dict[str, Any]:
+    return {"jobs": terminal_manager.list_jobs()}
+
+
+@app.post("/terminal/sessions")
+async def create_terminal_session(payload: SessionRequest) -> Dict[str, Any]:
+    if payload.job_id not in ALLOWED_JOBS:
+        raise HTTPException(status_code=404, detail=f"Unknown job_id: {payload.job_id}")
+    session = await terminal_manager.ensure_session(payload.job_id, restart=payload.restart)
+    return session.snapshot()
+
+
+@app.get("/terminal/sessions/{session_id}")
+def terminal_session_snapshot(session_id: str) -> Dict[str, Any]:
+    session = terminal_manager.get_session(session_id)
+    if session is None:
+        raise HTTPException(status_code=404, detail="Session not found")
+    return session.snapshot()
+
+
+@app.post("/terminal/sessions/{session_id}/input")
+def terminal_session_input(session_id: str, payload: SessionInputRequest) -> Dict[str, Any]:
+    session = terminal_manager.get_session(session_id)
+    if session is None:
+        raise HTTPException(status_code=404, detail="Session not found")
+    if not session.is_active:
+        raise HTTPException(status_code=409, detail="Session is not running")
+    session.write(payload.data, append_newline=payload.append_newline)
+    return {"ok": True}
+
+
+@app.post("/terminal/sessions/{session_id}/resize")
+def terminal_session_resize(session_id: str, payload: SessionResizeRequest) -> Dict[str, Any]:
+    session = terminal_manager.get_session(session_id)
+    if session is None:
+        raise HTTPException(status_code=404, detail="Session not found")
+    session.resize(payload.cols, payload.rows)
+    return {"ok": True}
+
+
+@app.post("/terminal/sessions/{session_id}/stop")
+def terminal_session_stop(session_id: str) -> Dict[str, Any]:
+    session = terminal_manager.get_session(session_id)
+    if session is None:
+        raise HTTPException(status_code=404, detail="Session not found")
+    session.interrupt()
+    return {"ok": True}
+
+
+@app.websocket("/terminal/sessions/{session_id}/stream")
+async def terminal_session_stream(websocket: WebSocket, session_id: str) -> None:
+    session = terminal_manager.get_session(session_id)
+    if session is None:
+        await websocket.close(code=4404)
+        return
+
+    await websocket.accept()
+    queue = await session.subscribe()
+    try:
+        await websocket.send_json(session.snapshot())
+        while True:
+            event = await queue.get()
+            await websocket.send_json(event)
+    except WebSocketDisconnect:
+        pass
+    finally:
+        session.unsubscribe(queue)
+
+
 if __name__ == "__main__":
     import uvicorn
 

backend/terminal_manager.py

@@ -0,0 +1,342 @@
+from __future__ import annotations
+
+import asyncio
+import importlib.util
+import json
+import os
+import pty
+import signal
+import struct
+import subprocess
+import termios
+import threading
+import time
+import uuid
+from dataclasses import dataclass
+from pathlib import Path
+from typing import Any
+
+
+REPO_ROOT = Path(__file__).resolve().parents[1]
+BUFFER_LIMIT = 160_000
+DEFAULT_COLS = 120
+DEFAULT_ROWS = 36
+PYTHON_CANDIDATES = (
+    "/usr/local/bin/python3",
+    "/opt/homebrew/bin/python3",
+    "/Users/amannindra/miniconda3/bin/python3",
+)
+
+
+@dataclass(frozen=True)
+class AllowedJob:
+    job_id: str
+    label: str
+    description: str
+    command: tuple[str, ...]
+    cwd: Path
+
+    def as_dict(self) -> dict[str, Any]:
+        return {
+            "job_id": self.job_id,
+            "label": self.label,
+            "description": self.description,
+            "command": list(self.command),
+            "cwd": str(self.cwd),
+        }
+
+
+ALLOWED_JOBS: dict[str, AllowedJob] = {
+    "qwen": AllowedJob(
+        job_id="qwen",
+        label="Qwen Baseline",
+        description="Runs the exact-kernel Qwen2.5-0.5B benchmark pipeline.",
+        command=("bash", "scripts/run_qwen_05b_pipeline.sh"),
+        cwd=REPO_ROOT,
+    ),
+    "rl-agent": AllowedJob(
+        job_id="rl-agent",
+        label="RL Agent",
+        description="Runs the multi-family surrogate and runtime benchmark pipeline.",
+        command=("bash", "scripts/run_full_pipeline.sh"),
+        cwd=REPO_ROOT,
+    ),
+}
+
+
+def _probe_python(path: str) -> dict[str, Any] | None:
+    if not Path(path).exists():
+        return None
+
+    script = (
+        "import importlib.util, json, sys; "
+        "print(json.dumps({"
+        "'executable': sys.executable, "
+        "'torch': bool(importlib.util.find_spec('torch')), "
+        "'triton': bool(importlib.util.find_spec('triton'))"
+        "}))"
+    )
+    try:
+        result = subprocess.run(
+            [path, "-c", script],
+            check=True,
+            capture_output=True,
+            text=True,
+        )
+    except (OSError, subprocess.CalledProcessError):
+        return None
+
+    try:
+        payload = json.loads(result.stdout.strip())
+    except json.JSONDecodeError:
+        return None
+    payload["path"] = path
+    return payload
+
+
+def _best_python_runtime() -> dict[str, Any] | None:
+    explicit = os.environ.get("TERMINAL_PYTHON_BIN")
+    if explicit:
+        probe = _probe_python(explicit)
+        if probe is not None:
+            probe["score"] = int(probe["torch"]) + int(probe["triton"])
+            probe["explicit"] = True
+            return probe
+
+    best: dict[str, Any] | None = None
+    for candidate in PYTHON_CANDIDATES:
+        probe = _probe_python(candidate)
+        if probe is None:
+            continue
+        score = int(probe["torch"]) + int(probe["triton"])
+        probe["score"] = score
+        if best is None or score > best["score"]:
+            best = probe
+    return best
+
+
+class TerminalSession:
+    def __init__(self, job: AllowedJob, loop: asyncio.AbstractEventLoop) -> None:
+        self.id = uuid.uuid4().hex
+        self.job = job
+        self.loop = loop
+        self.created_at = time.time()
+        self.started_at: float | None = None
+        self.finished_at: float | None = None
+        self.exit_code: int | None = None
+        self.status = "starting"
+        self.cols = DEFAULT_COLS
+        self.rows = DEFAULT_ROWS
+        self.python_runtime = _best_python_runtime()
+
+        self._buffer = ""
+        self._buffer_lock = threading.Lock()
+        self._subscribers: set[asyncio.Queue[dict[str, Any]]] = set()
+        self._subscriber_lock = threading.Lock()
+
+        self._master_fd, slave_fd = pty.openpty()
+        self._resize_fd(self.cols, self.rows)
+
+        env = os.environ.copy()
+        env.setdefault("TERM", "xterm-256color")
+        env.setdefault("PYTHONUNBUFFERED", "1")
+        env.setdefault("FORCE_COLOR", "1")
+        if self.python_runtime is not None:
+            python_dir = str(Path(self.python_runtime["path"]).parent)
+            env["PATH"] = f"{python_dir}:{env.get('PATH', '')}"
+            env["PYTHON_BIN"] = self.python_runtime["path"]
+
+        self._append_buffer(self._launcher_banner())
+
+        self.process = subprocess.Popen(
+            self.job.command,
+            cwd=str(self.job.cwd),
+            stdin=slave_fd,
+            stdout=slave_fd,
+            stderr=slave_fd,
+            env=env,
+            preexec_fn=os.setsid,
+            close_fds=True,
+        )
+        os.close(slave_fd)
+
+        self.started_at = time.time()
+        self.status = "running"
+
+        self._reader_thread = threading.Thread(target=self._reader_loop, daemon=True)
+        self._waiter_thread = threading.Thread(target=self._wait_loop, daemon=True)
+        self._reader_thread.start()
+        self._waiter_thread.start()
+
+    @property
+    def command_display(self) -> str:
+        return " ".join(self.job.command)
+
+    @property
+    def is_active(self) -> bool:
+        return self.process.poll() is None
+
+    def snapshot(self) -> dict[str, Any]:
+        with self._buffer_lock:
+            buffer = self._buffer
+        return {
+            "type": "snapshot",
+            "session": {
+                "id": self.id,
+                "job_id": self.job.job_id,
+                "label": self.job.label,
+                "description": self.job.description,
+                "cwd": str(self.job.cwd),
+                "command": self.command_display,
+                "status": self.status,
+                "created_at": self.created_at,
+                "started_at": self.started_at,
+                "finished_at": self.finished_at,
+                "exit_code": self.exit_code,
+                "cols": self.cols,
+                "rows": self.rows,
+            },
+            "buffer": buffer,
+        }
+
+    async def subscribe(self) -> asyncio.Queue[dict[str, Any]]:
+        queue: asyncio.Queue[dict[str, Any]] = asyncio.Queue()
+        with self._subscriber_lock:
+            self._subscribers.add(queue)
+        return queue
+
+    def unsubscribe(self, queue: asyncio.Queue[dict[str, Any]]) -> None:
+        with self._subscriber_lock:
+            self._subscribers.discard(queue)
+
+    def write(self, data: str, append_newline: bool = True) -> None:
+        if not data:
+            return
+        payload = data + ("\n" if append_newline else "")
+        os.write(self._master_fd, payload.encode("utf-8", errors="replace"))
+
+    def resize(self, cols: int, rows: int) -> None:
+        self.cols = max(20, cols)
+        self.rows = max(8, rows)
+        self._resize_fd(self.cols, self.rows)
+
+    def interrupt(self) -> None:
+        if self.process.poll() is None:
+            os.killpg(os.getpgid(self.process.pid), signal.SIGINT)
+
+    def terminate(self) -> None:
+        if self.process.poll() is None:
+            os.killpg(os.getpgid(self.process.pid), signal.SIGTERM)
+
+    def _resize_fd(self, cols: int, rows: int) -> None:
+        winsize = struct.pack("HHHH", rows, cols, 0, 0)
+        try:
+            termios.tcsetwinsize(self._master_fd, (rows, cols))
+        except AttributeError:
+            pass
+        try:
+            import fcntl
+
+            fcntl.ioctl(self._master_fd, termios.TIOCSWINSZ, winsize)
+        except OSError:
+            pass
+
+    def _append_buffer(self, chunk: str) -> None:
+        with self._buffer_lock:
+            self._buffer = (self._buffer + chunk)[-BUFFER_LIMIT:]
+
+    def _launcher_banner(self) -> str:
+        lines = [
+            f"[launcher] job: {self.job.label}",
+            f"[launcher] cwd: {self.job.cwd}",
+            f"[launcher] command: {self.command_display}",
+        ]
+        if self.python_runtime is not None:
+            modules = []
+            modules.append(f"torch={'yes' if self.python_runtime['torch'] else 'no'}")
+            modules.append(f"triton={'yes' if self.python_runtime['triton'] else 'no'}")
+            lines.append(f"[launcher] python3: {self.python_runtime['path']} ({', '.join(modules)})")
+            if self.python_runtime.get("explicit"):
+                lines.append("[launcher] python3 source: TERMINAL_PYTHON_BIN")
+            if not self.python_runtime["triton"]:
+                lines.append("[launcher] warning: Triton is not installed in the selected Python runtime.")
+        else:
+            lines.append("[launcher] warning: no preferred Python runtime detected; falling back to PATH lookup.")
+        return "\n".join(lines) + "\n\n"
+
+    def _publish(self, event: dict[str, Any]) -> None:
+        with self._subscriber_lock:
+            subscribers = tuple(self._subscribers)
+        for queue in subscribers:
+            self.loop.call_soon_threadsafe(self._safe_put, queue, event)
+
+    @staticmethod
+    def _safe_put(queue: asyncio.Queue[dict[str, Any]], event: dict[str, Any]) -> None:
+        try:
+            queue.put_nowait(event)
+        except asyncio.QueueFull:
+            pass
+
+    def _reader_loop(self) -> None:
+        while True:
+            try:
+                data = os.read(self._master_fd, 4096)
+            except OSError:
+                break
+            if not data:
+                break
+            text = data.decode("utf-8", errors="replace")
+            self._append_buffer(text)
+            self._publish({"type": "output", "data": text})
+
+    def _wait_loop(self) -> None:
+        exit_code = self.process.wait()
+        self.exit_code = exit_code
+        self.finished_at = time.time()
+        self.status = "exited" if exit_code == 0 else "failed"
+        self._publish(
+            {
+                "type": "exit",
+                "exit_code": exit_code,
+                "status": self.status,
+                "finished_at": self.finished_at,
+            }
+        )
+        try:
+            os.close(self._master_fd)
+        except OSError:
+            pass
+
+
+class TerminalManager:
+    def __init__(self) -> None:
+        self._sessions: dict[str, TerminalSession] = {}
+        self._latest_by_job: dict[str, str] = {}
+        self._lock = threading.Lock()
+
+    def list_jobs(self) -> list[dict[str, Any]]:
+        return [job.as_dict() for job in ALLOWED_JOBS.values()]
+
+    def get_session(self, session_id: str) -> TerminalSession | None:
+        with self._lock:
+            return self._sessions.get(session_id)
+
+    async def ensure_session(self, job_id: str, restart: bool = False) -> TerminalSession:
+        if job_id not in ALLOWED_JOBS:
+            raise KeyError(job_id)
+
+        with self._lock:
+            existing_id = self._latest_by_job.get(job_id)
+            existing = self._sessions.get(existing_id) if existing_id else None
+
+        if existing and existing.is_active and not restart:
+            return existing
+
+        if existing and restart:
+            existing.interrupt()
+
+        session = TerminalSession(ALLOWED_JOBS[job_id], asyncio.get_running_loop())
+        with self._lock:
+            self._sessions[session.id] = session
+            self._latest_by_job[job_id] = session.id
+        return session

frontend/src/App.jsx

@@ -1,48 +1,53 @@
 import { useEffect, useRef, useState } from 'react'
+import TerminalPane from './components/TerminalPane'
 
 const panes = [
-  {
-    id: 'left',
-    shell: 'zsh',
-    mode: 'INSERT',
-    buffer: [
-      { kind: 'prompt', cwd: '~/Projects/Rl_fianl/frontend', command: 'npm run dev' },
-      { kind: 'stdout', text: '' },
-      { kind: 'stdout', text: '> frontend@0.0.0 dev' },
-      { kind: 'stdout', text: '> vite' },
-      { kind: 'stdout', text: '' },
-      { kind: 'success', text: '  VITE v7.3.1 ready in 182 ms' },
-      { kind: 'muted', text: '  ➜  Local:   http://localhost:5173/' },
-      { kind: 'muted', text: '  ➜  press h + enter to show help' },
-      { kind: 'stdout', text: '' },
-      { kind: 'prompt', cwd: '~/Projects/Rl_fianl/frontend/src', command: 'npm run build' },
-      { kind: 'success', text: '✓ built in 336ms' },
-    ],
-  },
-  {
-    id: 'right',
-    shell: 'zsh',
-    mode: 'NORMAL',
-    buffer: [
-      { kind: 'prompt', cwd: '~/Projects/Rl_fianl/backend', command: 'uvicorn app.main:app --reload' },
-      { kind: 'stdout', text: 'INFO:     Will watch for changes in these directories:' },
-      { kind: 'stdout', text: 'INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)' },
-      { kind: 'muted', text: 'INFO:     Started reloader process [48211] using WatchFiles' },
-      { kind: 'stdout', text: '' },
-      { kind: 'prompt', cwd: '~/Projects/Rl_fianl/backend', command: 'pytest -q' },
-      { kind: 'stdout', text: 'tests/test_api.py ....' },
-      { kind: 'success', text: '4 passed in 0.84s' },
-      { kind: 'stdout', text: '' },
-      { kind: 'prompt', cwd: '~/Projects/Rl_fianl/backend', command: 'curl -s http://127.0.0.1:8000/health' },
-      { kind: 'json', text: '{ "status": "ok", "env": "local", "latency_ms": 11 }' },
-    ],
-  },
+  { jobId: 'qwen', title: 'Qwen Baseline', tone: 'cyan' },
+  { jobId: 'rl-agent', title: 'RL Agent', tone: 'green' },
 ]
 
+function formatMs(value) {
+  if (value == null) {
+    return '--'
+  }
+  if (value < 1000) {
+    return `${Math.round(value)} ms`
+  }
+  return `${(value / 1000).toFixed(2)} s`
+}
+
+function buildRunStats(telemetry, issuedAt) {
+  if (!telemetry || !issuedAt) {
+    return {
+      responseMs: null,
+      completionMs: null,
+      waiting: true,
+    }
+  }
+
+  const responseMs = telemetry.lastOutputAt && telemetry.lastOutputAt >= issuedAt ? telemetry.lastOutputAt - issuedAt : null
+  const finishedAt = telemetry.session?.finished_at ? telemetry.session.finished_at * 1000 : null
+  const completionMs = finishedAt && finishedAt >= issuedAt ? finishedAt - issuedAt : null
+
+  return {
+    responseMs,
+    completionMs,
+    waiting: responseMs == null && completionMs == null,
+  }
+}
+
 function App() {
-  const [split, setSplit] = useState(52)
+  const [split, setSplit] = useState(50)
   const [dragging, setDragging] = useState(false)
+  const [command, setCommand] = useState('')
+  const [comparisonRun, setComparisonRun] = useState(null)
+  const [telemetry, setTelemetry] = useState({
+    qwen: null,
+    'rl-agent': null,
+  })
   const workspaceRef = useRef(null)
+  const leftPaneRef = useRef(null)
+  const rightPaneRef = useRef(null)
 
   useEffect(() => {
     if (!dragging) {
@@ -73,60 +78,81 @@ function App() {
     }
   }, [dragging])
 
+  const handleBroadcast = async (event) => {
+    event.preventDefault()
+    const value = command.trim()
+    if (!value) {
+      return
+    }
+
+    const issuedAt = Date.now()
+    setComparisonRun({
+      command: value,
+      issuedAt,
+    })
+
+    await Promise.allSettled([
+      leftPaneRef.current?.submit(value),
+      rightPaneRef.current?.submit(value),
+    ])
+    setCommand('')
+  }
+
+  const handleTelemetryChange = (payload) => {
+    setTelemetry((previous) => ({
+      ...previous,
+      [payload.jobId]: payload,
+    }))
+  }
+
+  const qwenStats = buildRunStats(telemetry.qwen, comparisonRun?.issuedAt)
+  const agentStats = buildRunStats(telemetry['rl-agent'], comparisonRun?.issuedAt)
+
+  let comparisonHeadline = 'Send a shared command to compare runtime.'
+  if (comparisonRun) {
+    if (qwenStats.completionMs != null && agentStats.completionMs != null) {
+      const fasterJob = qwenStats.completionMs <= agentStats.completionMs ? panes[0].title : panes[1].title
+      const delta = Math.abs(qwenStats.completionMs - agentStats.completionMs)
+      comparisonHeadline = `${fasterJob} finished ${formatMs(delta)} faster.`
+    } else if (qwenStats.responseMs != null && agentStats.responseMs != null) {
+      const fasterJob = qwenStats.responseMs <= agentStats.responseMs ? panes[0].title : panes[1].title
+      const delta = Math.abs(qwenStats.responseMs - agentStats.responseMs)
+      comparisonHeadline = `${fasterJob} responded ${formatMs(delta)} faster.`
+    } else {
+      comparisonHeadline = `Running shared command: ${comparisonRun.command}`
+    }
+  }
+
   return (
     <main className="desktop">
       <div className="desktop__glow" />
 
+      <section className="comparison-bar">
+        <div className="comparison-bar__copy">
+          <span className="comparison-bar__eyebrow">Runtime compare</span>
+          <strong>{comparisonHeadline}</strong>
+          <small>{comparisonRun ? `Command: ${comparisonRun.command}` : 'Broadcast one command to both panes.'}</small>
+        </div>
+
+        <div className="comparison-bar__stats">
+          <article className="comparison-card comparison-card--cyan">
+            <span>{panes[0].title}</span>
+            <strong>{formatMs(qwenStats.completionMs ?? qwenStats.responseMs)}</strong>
+            <small>{qwenStats.completionMs != null ? 'completion time' : 'first output latency'}</small>
+          </article>
+
+          <article className="comparison-card comparison-card--green">
+            <span>{panes[1].title}</span>
+            <strong>{formatMs(agentStats.completionMs ?? agentStats.responseMs)}</strong>
+            <small>{agentStats.completionMs != null ? 'completion time' : 'first output latency'}</small>
+          </article>
+        </div>
+      </section>
+
       <section ref={workspaceRef} className="workspace">
-        <article className="pane" style={{ width: `${split}%` }}>
-          <div className="pane__viewport">
-            <div className="pane__gutter" aria-hidden="true">
-              {Array.from({ length: panes[0].buffer.length + 2 }, (_, index) => (
-                <span key={index}>{index + 1}</span>
-              ))}
-            </div>
-
-            <div className="pane__buffer" role="log" aria-live="polite">
-              {panes[0].buffer.map((line, index) => (
-                <div key={`${panes[0].id}-${line.kind}-${index}`} className={`line line--${line.kind}`}>
-                  {line.kind === 'prompt' ? (
-                    <>
-                      <span className="prompt__host">amannindra</span>
-                      <span className="prompt__separator">@</span>
-                      <span className="prompt__cwd">{line.cwd}</span>
-                      <span className="prompt__symbol">$</span>
-                      <span className="prompt__command">{line.command}</span>
-                    </>
-                  ) : (
-                    <span>{line.text}</span>
-                  )}
-                </div>
-              ))}
-
-              <div className="line line--prompt line--active">
-                <span className="prompt__host">amannindra</span>
-                <span className="prompt__separator">@</span>
-                <span className="prompt__cwd">~/Projects/Rl_fianl/frontend</span>
-                <span className="prompt__symbol">$</span>
-                <span className="prompt__command" />
-              </div>
-            </div>
-          </div>
-
-          <footer className="pane__statusbar">
-            <div className="statusbar__left">
-              <span className="status-pill">ghostty</span>
-              <span>{panes[0].shell}</span>
-              <span>{panes[0].mode}</span>
-            </div>
-
-            <div className="statusbar__right">
-              <span>{Math.round(split)}%</span>
-              <span>UTF-8</span>
-              <span>Ligatures on</span>
-            </div>
-          </footer>
-        </article>
+        <div className="workspace__pane" style={{ width: `${split}%` }}>
+          <TerminalPane ref={leftPaneRef} {...panes[0]} onTelemetryChange={handleTelemetryChange} />
+        </div>
 
         <button
           type="button"
@@ -141,56 +167,27 @@ function App() {
           <span />
         </button>
 
-        <article className="pane" style={{ width: `${100 - split}%` }}>
-          <div className="pane__viewport">
-            <div className="pane__gutter" aria-hidden="true">
-              {Array.from({ length: panes[1].buffer.length + 2 }, (_, index) => (
-                <span key={index}>{index + 1}</span>
-              ))}
-            </div>
-
-            <div className="pane__buffer" role="log" aria-live="polite">
-              {panes[1].buffer.map((line, index) => (
-                <div key={`${panes[1].id}-${line.kind}-${index}`} className={`line line--${line.kind}`}>
-                  {line.kind === 'prompt' ? (
-                    <>
-                      <span className="prompt__host">amannindra</span>
-                      <span className="prompt__separator">@</span>
-                      <span className="prompt__cwd">{line.cwd}</span>
-                      <span className="prompt__symbol">$</span>
-                      <span className="prompt__command">{line.command}</span>
-                    </>
-                  ) : (
-                    <span>{line.text}</span>
-                  )}
-                </div>
-              ))}
-
-              <div className="line line--prompt line--active">
-                <span className="prompt__host">amannindra</span>
-                <span className="prompt__separator">@</span>
-                <span className="prompt__cwd">~/Projects/Rl_fianl/backend</span>
-                <span className="prompt__symbol">$</span>
-                <span className="prompt__command" />
-              </div>
-            </div>
-          </div>
-
-          <footer className="pane__statusbar">
-            <div className="statusbar__left">
-              <span className="status-pill">ghostty</span>
-              <span>{panes[1].shell}</span>
-              <span>{panes[1].mode}</span>
-            </div>
-
-            <div className="statusbar__right">
-              <span>{Math.round(100 - split)}%</span>
-              <span>UTF-8</span>
-              <span>Ligatures on</span>
-            </div>
-          </footer>
-        </article>
+        <div className="workspace__pane" style={{ width: `${100 - split}%` }}>
+          <TerminalPane ref={rightPaneRef} {...panes[1]} onTelemetryChange={handleTelemetryChange} />
+        </div>
       </section>
+
+      <form className="broadcast-bar" onSubmit={handleBroadcast}>
+        <label className="broadcast-bar__label" htmlFor="broadcast-input">
+          Shared input
+        </label>
+        <div className="broadcast-bar__field">
+          <span className="broadcast-bar__prompt">$</span>
+          <input
+            id="broadcast-input"
+            value={command}
+            onChange={(event) => setCommand(event.target.value)}
+            placeholder="Send the same command to both terminals"
+            spellCheck="false"
+          />
+          <button type="submit">Send to both</button>
+        </div>
+      </form>
     </main>
   )
 }

frontend/src/api/terminal.js

@@ -0,0 +1,57 @@
+const RAW_API_BASE = import.meta.env.VITE_API_BASE_URL || 'http://127.0.0.1:8000'
+const API_BASE = RAW_API_BASE.replace(/\/+$/, '')
+const WS_BASE = API_BASE.replace(/^http/, 'ws')
+
+async function request(path, options = {}) {
+  const response = await fetch(`${API_BASE}${path}`, {
+    headers: {
+      'Content-Type': 'application/json',
+      ...(options.headers || {}),
+    },
+    ...options,
+  })
+
+  if (!response.ok) {
+    let message = `Request failed with status ${response.status}`
+    try {
+      const payload = await response.json()
+      message = payload.detail || message
+    } catch {
+      // Keep default error message when the payload is not JSON.
+    }
+    throw new Error(message)
+  }
+
+  return response.json()
+}
+
+export function createOrAttachSession(jobId, { restart = false } = {}) {
+  return request('/terminal/sessions', {
+    method: 'POST',
+    body: JSON.stringify({ job_id: jobId, restart }),
+  })
+}
+
+export function stopTerminalSession(sessionId) {
+  return request(`/terminal/sessions/${sessionId}/stop`, {
+    method: 'POST',
+  })
+}
+
+export function sendTerminalInput(sessionId, data, appendNewline = true) {
+  return request(`/terminal/sessions/${sessionId}/input`, {
+    method: 'POST',
+    body: JSON.stringify({ data, append_newline: appendNewline }),
+  })
+}
+
+export function resizeTerminalSession(sessionId, cols, rows) {
+  return request(`/terminal/sessions/${sessionId}/resize`, {
+    method: 'POST',
+    body: JSON.stringify({ cols, rows }),
+  })
+}
+
+export function openTerminalSocket(sessionId) {
+  return new WebSocket(`${WS_BASE}/terminal/sessions/${sessionId}/stream`)
+}

frontend/src/components/TerminalPane.jsx

@@ -0,0 +1,147 @@
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react'
+import { useTerminalSession } from '../hooks/useTerminalSession'
+
+function formatTime(timestamp) {
+  if (!timestamp) {
+    return 'Idle'
+  }
+  return new Date(timestamp * 1000).toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  })
+}
+
+function statusLabel(status) {
+  if (status === 'running') {
+    return 'Running'
+  }
+  if (status === 'failed') {
+    return 'Failed'
+  }
+  if (status === 'exited') {
+    return 'Completed'
+  }
+  return 'Starting'
+}
+
+const TerminalPane = forwardRef(function TerminalPane({ jobId, title, tone, onTelemetryChange }, ref) {
+  const { session, buffer, connectionState, error, lastOutputAt, restart, resize, sendInput, start, stop } =
+    useTerminalSession(jobId)
+  const viewportRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      submit: async (value) => {
+        await sendInput(value, true)
+      },
+    }),
+    [sendInput],
+  )
+
+  useEffect(() => {
+    onTelemetryChange?.({
+      jobId,
+      session,
+      connectionState,
+      error,
+      lastOutputAt,
+    })
+  }, [connectionState, error, jobId, lastOutputAt, onTelemetryChange, session])
+
+  useEffect(() => {
+    const container = scrollRef.current
+    if (container) {
+      container.scrollTop = container.scrollHeight
+    }
+  }, [buffer])
+
+  useEffect(() => {
+    const element = viewportRef.current
+    if (!element) {
+      return undefined
+    }
+
+    let frameId = 0
+    const measure = () => {
+      cancelAnimationFrame(frameId)
+      frameId = requestAnimationFrame(() => {
+        const style = getComputedStyle(element)
+        const fontSize = parseFloat(style.fontSize) || 15
+        const lineHeight = parseFloat(style.lineHeight) || 24
+        const cols = Math.max(48, Math.floor(element.clientWidth / (fontSize * 0.61)))
+        const rows = Math.max(14, Math.floor(element.clientHeight / lineHeight))
+        resize(cols, rows)
+      })
+    }
+
+    measure()
+    const observer = new ResizeObserver(measure)
+    observer.observe(element)
+
+    return () => {
+      cancelAnimationFrame(frameId)
+      observer.disconnect()
+    }
+  }, [resize])
+
+  const footerMeta = useMemo(
+    () => [
+      session?.status ? statusLabel(session.status) : 'Connecting',
+      session?.started_at ? `Started ${formatTime(session.started_at)}` : null,
+      session?.exit_code != null ? `Exit ${session.exit_code}` : null,
+      connectionState === 'connected' ? 'WS live' : connectionState,
+    ].filter(Boolean),
+    [connectionState, session],
+  )
+
+  return (
+    <article className={`terminal-pane terminal-pane--${tone}`}>
+      <header className="terminal-pane__header">
+        <div className="terminal-pane__heading">
+          <div className="terminal-pane__title-row">
+            <span className="terminal-pane__dot" />
+            <h2>{title}</h2>
+            <span className={`status-chip status-chip--${session?.status || 'starting'}`}>
+              {statusLabel(session?.status)}
+            </span>
+          </div>
+          <p>{session?.command || 'Waiting for backend session...'}</p>
+          <small>{session?.cwd || 'No working directory available yet.'}</small>
+        </div>
+
+        <div className="terminal-pane__actions">
+          <button type="button" onClick={start}>
+            Attach
+          </button>
+          <button type="button" onClick={restart}>
+            Restart
+          </button>
+          <button type="button" onClick={stop}>
+            Stop
+          </button>
+        </div>
+      </header>
+
+      <div ref={viewportRef} className="terminal-pane__viewport">
+        <div ref={scrollRef} className="terminal-pane__scroll">
+          <pre className="terminal-pane__buffer">{buffer || 'Starting session...\n'}</pre>
+          {session?.status === 'running' ? <span className="terminal-pane__cursor" aria-hidden="true" /> : null}
+        </div>
+      </div>
+
+      <footer className="terminal-pane__footer">
+        <div className="terminal-pane__meta">
+          {footerMeta.map((item) => (
+            <span key={item}>{item}</span>
+          ))}
+          {error ? <span className="terminal-pane__error">{error}</span> : null}
+        </div>
+      </footer>
+    </article>
+  )
+})
+
+export default TerminalPane

frontend/src/hooks/useTerminalSession.js

@@ -0,0 +1,166 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  createOrAttachSession,
+  openTerminalSocket,
+  resizeTerminalSession,
+  sendTerminalInput,
+  stopTerminalSession,
+} from '../api/terminal'
+
+const BUFFER_LIMIT = 160000
+
+function trimBuffer(text) {
+  return text.length > BUFFER_LIMIT ? text.slice(-BUFFER_LIMIT) : text
+}
+
+export function useTerminalSession(jobId) {
+  const [session, setSession] = useState(null)
+  const [buffer, setBuffer] = useState('')
+  const [connectionState, setConnectionState] = useState('connecting')
+  const [error, setError] = useState('')
+  const [lastOutputAt, setLastOutputAt] = useState(null)
+
+  const socketRef = useRef(null)
+  const resizeRef = useRef({ cols: null, rows: null })
+
+  const attachSocket = useCallback((sessionId) => {
+    if (socketRef.current) {
+      socketRef.current.close()
+    }
+
+    const socket = openTerminalSocket(sessionId)
+    socketRef.current = socket
+    setConnectionState('connecting')
+
+    socket.addEventListener('open', () => {
+      setConnectionState('connected')
+    })
+
+    socket.addEventListener('message', (event) => {
+      const payload = JSON.parse(event.data)
+
+      if (payload.type === 'snapshot') {
+        setSession(payload.session)
+        setBuffer(payload.buffer || '')
+        return
+      }
+
+      if (payload.type === 'output') {
+        setLastOutputAt(Date.now())
+        setBuffer((previous) => trimBuffer(previous + payload.data))
+        return
+      }
+
+      if (payload.type === 'exit') {
+        setSession((previous) =>
+          previous
+            ? {
+                ...previous,
+                status: payload.status,
+                exit_code: payload.exit_code,
+                finished_at: payload.finished_at,
+              }
+            : previous,
+        )
+      }
+    })
+
+    socket.addEventListener('close', () => {
+      setConnectionState('disconnected')
+    })
+
+    socket.addEventListener('error', () => {
+      setConnectionState('error')
+    })
+  }, [])
+
+  const bootSession = useCallback(
+    async (restart = false) => {
+      try {
+        setError('')
+        const payload = await createOrAttachSession(jobId, { restart })
+        setSession(payload.session)
+        setBuffer(payload.buffer || '')
+        attachSocket(payload.session.id)
+      } catch (caughtError) {
+        setError(caughtError.message)
+        setConnectionState('error')
+      }
+    },
+    [attachSocket, jobId],
+  )
+
+  useEffect(() => {
+    const timeoutId = window.setTimeout(() => {
+      void bootSession(false)
+    }, 0)
+
+    return () => {
+      window.clearTimeout(timeoutId)
+      if (socketRef.current) {
+        socketRef.current.close()
+      }
+    }
+  }, [bootSession])
+
+  const restart = useCallback(() => bootSession(true), [bootSession])
+
+  const stop = useCallback(async () => {
+    if (!session?.id) {
+      return
+    }
+    try {
+      await stopTerminalSession(session.id)
+    } catch (caughtError) {
+      setError(caughtError.message)
+    }
+  }, [session])
+
+  const sendInput = useCallback(
+    async (value, appendNewline = true) => {
+      if (!session?.id || !value.trim()) {
+        return
+      }
+      try {
+        await sendTerminalInput(session.id, value, appendNewline)
+      } catch (caughtError) {
+        setError(caughtError.message)
+      }
+    },
+    [session],
+  )
+
+  const resize = useCallback(
+    async (cols, rows) => {
+      if (!session?.id) {
+        return
+      }
+
+      const previous = resizeRef.current
+      if (previous.cols === cols && previous.rows === rows) {
+        return
+      }
+      resizeRef.current = { cols, rows }
+
+      try {
+        await resizeTerminalSession(session.id, cols, rows)
+      } catch {
+        // Ignore resize errors so rendering stays responsive.
+      }
+    },
+    [session],
+  )
+
+  return {
+    buffer,
+    connectionState,
+    error,
+    lastOutputAt,
+    restart,
+    resize,
+    sendInput,
+    session,
+    start: () => bootSession(false),
+    stop,
+  }
+}

frontend/src/index.css

@@ -1,22 +1,22 @@
 :root {
-  color: #e9edf2;
+  color: #ebeff5;
   background:
-    radial-gradient(circle at top, rgba(88, 98, 115, 0.12), transparent 24%),
-    linear-gradient(180deg, #0e1013 0%, #0a0c0f 100%);
+    radial-gradient(circle at top, rgba(88, 108, 146, 0.16), transparent 24%),
+    linear-gradient(180deg, #0d1015 0%, #090b0f 100%);
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  --page: #0a0c0f;
-  --pane: rgba(14, 16, 20, 0.98);
-  --pane-edge: rgba(255, 255, 255, 0.06);
-  --gutter: rgba(255, 255, 255, 0.03);
-  --text: #e9edf2;
-  --muted: #8e96a3;
-  --green: #93e19d;
+  --page: #090b0f;
+  --pane: rgba(14, 17, 22, 0.98);
+  --pane-border: rgba(255, 255, 255, 0.07);
+  --pane-soft: rgba(255, 255, 255, 0.03);
+  --text: #ebeff5;
+  --muted: #8f97a6;
   --cyan: #8fd1ff;
-  --yellow: #e7c377;
-  --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
+  --green: #93e09f;
+  --red: #ff7f8c;
+  --amber: #e6c171;
 }
 
 * {
@@ -34,12 +34,18 @@ body {
   min-width: 320px;
   background: var(--page);
   color: var(--text);
+  font-family: "IBM Plex Sans", "SF Pro Display", "Segoe UI", sans-serif;
 }
 
-button {
+button,
+input {
   font: inherit;
 }
 
+button {
+  cursor: pointer;
+}
+
 .desktop {
   position: relative;
   min-height: 100vh;
@@ -50,8 +56,8 @@ button {
   position: absolute;
   inset: 0;
   background:
-    radial-gradient(circle at 50% 0%, rgba(105, 115, 132, 0.14), transparent 20%),
-    radial-gradient(circle at 100% 0%, rgba(55, 78, 114, 0.1), transparent 18%);
+    radial-gradient(circle at 30% 0%, rgba(109, 132, 180, 0.14), transparent 20%),
+    radial-gradient(circle at 100% 0%, rgba(70, 110, 168, 0.12), transparent 16%);
   pointer-events: none;
 }
 
@@ -60,180 +66,356 @@ button {
   z-index: 1;
   display: flex;
   width: 100vw;
-  height: 100vh;
-  background: rgba(8, 10, 13, 0.96);
+  height: calc(100vh - 194px);
+  background: rgba(7, 10, 13, 0.98);
+}
+
+.comparison-bar {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--pane-border);
+  background:
+    linear-gradient(180deg, rgba(16, 19, 25, 0.98), rgba(11, 13, 18, 0.98));
+}
+
+.comparison-bar__copy {
+  display: grid;
+  gap: 5px;
+  min-width: 0;
+}
+
+.comparison-bar__copy strong,
+.comparison-bar__copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.comparison-bar__eyebrow {
+  color: var(--muted);
+  font:
+    500 0.74rem/1 "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+}
+
+.comparison-bar__copy strong {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.comparison-bar__copy small {
+  color: var(--muted);
 }
 
-.pane {
+.comparison-bar__stats {
+  display: flex;
+  gap: 12px;
+}
+
+.comparison-card {
   display: grid;
-  grid-template-rows: minmax(0, 1fr) auto;
+  gap: 4px;
+  min-width: 170px;
+  padding: 12px 14px;
+  border: 1px solid var(--pane-border);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.comparison-card span,
+.comparison-card small {
+  color: var(--muted);
+}
+
+.comparison-card strong {
+  font:
+    600 1.2rem/1.1 "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+}
+
+.comparison-card--cyan strong {
+  color: var(--cyan);
+}
+
+.comparison-card--green strong {
+  color: var(--green);
+}
+
+.workspace__pane {
   min-width: 0;
   height: 100%;
+}
+
+.workspace__divider {
+  position: relative;
+  flex: 0 0 12px;
+  border: 0;
+  padding: 0;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
+  cursor: col-resize;
+}
+
+.workspace__divider span {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 3px;
+  height: 72px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.22);
+  transform: translate(-50%, -50%);
+}
+
+.workspace__divider:hover span,
+.workspace__divider.is-dragging span {
+  background: rgba(143, 209, 255, 0.8);
+}
+
+.workspace__divider:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 1px rgba(143, 209, 255, 0.5);
+}
+
+.terminal-pane {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  width: 100%;
+  height: 100%;
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 10%),
     var(--pane);
-  box-shadow: var(--shadow);
 }
 
-.pane + .pane {
-  border-left: 1px solid var(--pane-edge);
+.terminal-pane + .terminal-pane {
+  border-left: 1px solid var(--pane-border);
 }
 
-.pane__viewport {
-  display: grid;
-  grid-template-columns: 54px minmax(0, 1fr);
-  min-height: 0;
+.terminal-pane__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 18px 18px 14px;
+  border-bottom: 1px solid var(--pane-border);
+  background: rgba(255, 255, 255, 0.02);
 }
 
-.pane__gutter {
-  display: grid;
-  align-content: start;
-  gap: 4px;
-  padding: 16px 10px 16px 14px;
-  border-right: 1px solid var(--pane-edge);
-  background: var(--gutter);
-  color: rgba(142, 150, 163, 0.42);
-  font:
-    500 0.78rem/1.65 "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
-  user-select: none;
+.terminal-pane__heading {
+  min-width: 0;
 }
 
-.pane__buffer {
-  overflow: auto;
-  padding: 16px 18px 20px;
-  font:
-    500 0.95rem/1.72 "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+.terminal-pane__title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 6px;
+}
+
+.terminal-pane__title-row h2 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.terminal-pane__heading p,
+.terminal-pane__heading small {
+  display: block;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.terminal-pane__heading p {
   color: var(--text);
+  font:
+    500 0.84rem/1.4 "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
 }
 
-.line {
-  min-height: 1.72em;
-  white-space: pre-wrap;
-  word-break: break-word;
+.terminal-pane__heading small {
+  margin-top: 4px;
+  color: var(--muted);
 }
 
-.line--prompt {
+.terminal-pane__dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 999px;
+  background: var(--cyan);
+  box-shadow: 0 0 24px rgba(143, 209, 255, 0.35);
+}
+
+.terminal-pane--green .terminal-pane__dot {
+  background: var(--green);
+  box-shadow: 0 0 24px rgba(147, 224, 159, 0.35);
+}
+
+.terminal-pane__actions {
   display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 0.5ch;
+  gap: 8px;
 }
 
-.line--stdout {
-  color: #d4d9e1;
+.terminal-pane__actions button {
+  padding: 8px 10px;
+  border: 1px solid var(--pane-border);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--text);
 }
 
-.line--muted {
-  color: var(--muted);
+.terminal-pane__actions button:hover {
+  background: rgba(255, 255, 255, 0.06);
 }
 
-.line--success {
+.status-chip {
+  padding: 4px 8px;
+  border-radius: 999px;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  border: 1px solid transparent;
+}
+
+.status-chip--running {
   color: var(--green);
+  border-color: rgba(147, 224, 159, 0.24);
+  background: rgba(147, 224, 159, 0.08);
+}
+
+.status-chip--failed {
+  color: var(--red);
+  border-color: rgba(255, 127, 140, 0.25);
+  background: rgba(255, 127, 140, 0.08);
 }
 
-.line--warning {
-  color: var(--yellow);
+.status-chip--exited {
+  color: var(--amber);
+  border-color: rgba(230, 193, 113, 0.24);
+  background: rgba(230, 193, 113, 0.08);
 }
 
-.line--json {
+.status-chip--starting {
   color: var(--cyan);
+  border-color: rgba(143, 209, 255, 0.24);
+  background: rgba(143, 209, 255, 0.08);
 }
 
-.line--active .prompt__command {
-  position: relative;
+.terminal-pane__viewport {
+  min-height: 0;
+  overflow: hidden;
+  font:
+    500 0.95rem/1.72 "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+}
+
+.terminal-pane__scroll {
+  height: 100%;
+  overflow: auto;
+  padding: 18px 18px 20px;
 }
 
-.line--active .prompt__command::after {
-  content: "";
+.terminal-pane__buffer {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: #edf2fa;
+}
+
+.terminal-pane__cursor {
   display: inline-block;
   width: 0.62em;
-  height: 1.08em;
-  vertical-align: -0.18em;
-  background: rgba(233, 237, 242, 0.92);
+  height: 1.05em;
+  margin-top: 4px;
+  background: rgba(237, 242, 250, 0.9);
   animation: blink 1s steps(1) infinite;
 }
 
-.prompt__host {
-  color: var(--cyan);
+.terminal-pane__footer {
+  display: grid;
+  padding: 14px 18px 16px;
+  border-top: 1px solid var(--pane-border);
+  background: rgba(255, 255, 255, 0.02);
 }
 
-.prompt__separator,
-.prompt__symbol {
-  color: #9ea6b3;
+.terminal-pane__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 14px;
+  color: var(--muted);
+  font:
+    500 0.76rem/1.3 "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
 }
 
-.prompt__cwd {
-  color: #ccd2dc;
+.terminal-pane__error {
+  color: var(--red);
 }
 
-.prompt__command {
-  color: #f3f6fb;
+.broadcast-bar {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  gap: 8px;
+  padding: 14px 18px 18px;
+  border-top: 1px solid var(--pane-border);
+  background:
+    linear-gradient(180deg, rgba(18, 21, 27, 0.98), rgba(10, 12, 16, 0.98));
 }
 
-.pane__statusbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 10px 14px;
-  border-top: 1px solid var(--pane-edge);
-  background: rgba(15, 17, 21, 0.98);
+.broadcast-bar__label {
   color: var(--muted);
   font:
     500 0.78rem/1 "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
 }
 
-.statusbar__left,
-.statusbar__right {
+.broadcast-bar__field {
   display: flex;
   align-items: center;
-  gap: 14px;
-  min-width: 0;
+  gap: 12px;
+  padding: 14px 16px;
+  border: 1px solid var(--pane-border);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.03);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
 }
 
-.status-pill {
-  padding: 4px 7px;
-  border: 1px solid rgba(255, 255, 255, 0.09);
-  border-radius: 6px;
-  background: rgba(255, 255, 255, 0.04);
-  color: var(--text);
+.broadcast-bar__prompt {
+  color: var(--cyan);
+  font:
+    600 0.92rem/1 "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
 }
 
-.workspace__divider {
-  position: relative;
-  flex: 0 0 11px;
+.broadcast-bar__field input {
+  flex: 1;
+  min-width: 0;
   border: 0;
-  padding: 0;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
-  cursor: col-resize;
-}
-
-.workspace__divider::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: rgba(255, 255, 255, 0.03);
+  background: transparent;
+  color: var(--text);
+  outline: none;
+  font:
+    500 0.95rem/1.2 "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
 }
 
-.workspace__divider span {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 3px;
-  height: 52px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.22);
-  transform: translate(-50%, -50%);
+.broadcast-bar__field input::placeholder {
+  color: var(--muted);
 }
 
-.workspace__divider:hover span,
-.workspace__divider.is-dragging span {
-  background: rgba(143, 209, 255, 0.72);
+.broadcast-bar__field button {
+  padding: 10px 14px;
+  border: 1px solid rgba(143, 209, 255, 0.18);
+  border-radius: 10px;
+  background: rgba(143, 209, 255, 0.08);
+  color: var(--text);
 }
 
-.workspace__divider:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 1px rgba(143, 209, 255, 0.5);
+.broadcast-bar__field button:hover {
+  background: rgba(143, 209, 255, 0.14);
 }
 
 @keyframes blink {
@@ -242,27 +424,63 @@ button {
   }
 }
 
-@media (max-width: 900px) {
-  .pane__viewport {
-    grid-template-columns: 1fr;
+@media (max-width: 980px) {
+  .comparison-bar {
+    flex-direction: column;
   }
 
-  .pane__gutter {
-    display: none;
+  .comparison-bar__stats {
+    width: 100%;
   }
 
-  .pane__buffer {
-    padding: 14px 16px 18px;
-    font-size: 0.9rem;
+  .comparison-card {
+    flex: 1;
+    min-width: 0;
   }
 
-  .pane__statusbar {
-    align-items: flex-start;
+  .terminal-pane__header {
     flex-direction: column;
   }
 
-  .statusbar__left,
-  .statusbar__right {
-    flex-wrap: wrap;
+  .terminal-pane__actions {
+    width: 100%;
+  }
+
+  .terminal-pane__actions button {
+    flex: 1;
+  }
+}
+
+@media (max-width: 780px) {
+  .workspace {
+    height: calc(100vh - 244px);
+  }
+
+  .workspace__divider {
+    flex-basis: 10px;
+  }
+
+  .terminal-pane__scroll {
+    padding: 16px;
+  }
+
+  .terminal-pane__viewport {
+    font-size: 0.88rem;
+  }
+
+  .terminal-pane__footer {
+    padding: 12px 14px 14px;
+  }
+
+  .broadcast-bar {
+    padding: 12px 14px 14px;
+  }
+
+  .broadcast-bar__field {
+    padding: 12px 14px;
+  }
+
+  .comparison-bar {
+    padding: 12px 14px;
   }
 }