march-cli 0.1.34 → 0.1.36

package/src/web-ui/src/runtime/client.ts

@@ -0,0 +1,81 @@
+import type { ProviderQuotaSnapshot, SessionSummary, WebUiModel } from "../model";
+
+export type RuntimeUiEvent =
+  | { type: "web_user_message"; text: string }
+  | { type: "turn_start" }
+  | { type: "turn_end" }
+  | { type: "assistant_reply_end" }
+  | { type: "text_delta"; delta: string }
+  | { type: "thinking_start" }
+  | { type: "thinking_delta"; delta: string }
+  | { type: "thinking_end"; tokens?: number }
+  | { type: "tool_start"; name: string; args?: unknown }
+  | { type: "tool_end"; name: string; isError?: boolean; result?: unknown }
+  | { type: "edit_diff"; path: string; diffLines?: Array<{ type?: string; text?: string }> }
+  | { type: "permission_request"; toolName: string; category?: string; params?: unknown }
+  | { type: "provider_quota_snapshot"; snapshot: ProviderQuotaSnapshot | null }
+  | { type: "status"; text: string }
+  | { type: "retry_start"; errorMessage?: string }
+  | { type: "retry_end"; success?: boolean; finalError?: string };
+
+export type FsEntry = { name: string; path: string; kind: "root" | "directory" };
+
+export async function fetchRuntimeSnapshot(sessionId?: string | null): Promise<WebUiModel> {
+  const response = await fetch(apiPath("/api/snapshot", { sessionId }));
+  if (!response.ok) throw new Error(await response.text());
+  return response.json();
+}
+
+export async function createRuntimeSession(workspacePath: string): Promise<{ session: SessionSummary; snapshot: WebUiModel }> {
+  const response = await fetch("/api/sessions", {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify({ workspacePath }),
+  });
+  if (!response.ok) throw new Error(await response.text());
+  return response.json();
+}
+
+export async function fetchFsRoots(): Promise<FsEntry[]> {
+  const response = await fetch("/api/fs/roots");
+  if (!response.ok) throw new Error(await response.text());
+  return (await response.json()).roots;
+}
+
+export async function fetchFsList(path: string): Promise<FsEntry[]> {
+  const response = await fetch(apiPath("/api/fs/list", { path }));
+  if (!response.ok) throw new Error(await response.text());
+  return (await response.json()).entries;
+}
+
+export async function fetchProviderQuota(sessionId: string): Promise<ProviderQuotaSnapshot | null> {
+  const response = await fetch(apiPath("/api/provider-quota", { sessionId }));
+  if (!response.ok) throw new Error(await response.text());
+  return (await response.json()).snapshot ?? null;
+}
+
+export async function submitRuntimeTurn(sessionId: string, prompt: string) {
+  const response = await fetch("/api/turn", {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify({ sessionId, prompt }),
+  });
+  if (!response.ok) throw new Error(await response.text());
+  return response.json();
+}
+
+export function connectRuntimeEvents(sessionId: string, onEvent: (event: RuntimeUiEvent) => void, onError: () => void) {
+  const source = new EventSource(apiPath("/api/events", { sessionId }));
+  source.addEventListener("runtime", (message) => {
+    onEvent(JSON.parse((message as MessageEvent).data) as RuntimeUiEvent);
+  });
+  source.onerror = onError;
+  return () => source.close();
+}
+
+function apiPath(path: string, params: Record<string, string | null | undefined>) {
+  const query = new URLSearchParams();
+  for (const [key, value] of Object.entries(params)) if (value) query.set(key, value);
+  const suffix = query.toString();
+  return suffix ? `${path}?${suffix}` : path;
+}

package/src/web-ui/src/runtime/runtimeTimeline.ts

@@ -0,0 +1,88 @@
+import type { MarchTimelineEvent } from "../model";
+import type { RuntimeUiEvent } from "./client";
+
+export function applyRuntimeEvent(events: MarchTimelineEvent[], event: RuntimeUiEvent): MarchTimelineEvent[] {
+  const next = [...events];
+  const id = `${event.type}:${next.length}:${Date.now()}`;
+  switch (event.type) {
+    case "web_user_message":
+      next.push({ id, type: "user_message", text: event.text, time: nowTime() });
+      return next;
+    case "text_delta":
+      return appendAssistantDelta(next, event.delta, id);
+    case "thinking_start":
+      next.push({ id, type: "assistant_thought", title: "Thinking", text: "", status: "open" });
+      return next;
+    case "thinking_delta":
+      return appendThoughtDelta(next, event.delta, id);
+    case "thinking_end":
+      return closeThought(next);
+    case "tool_start":
+      next.push({ id, type: "tool_call", tool: event.name, target: formatArgs(event.args), status: "running" });
+      return next;
+    case "tool_end":
+      next.push({ id, type: "tool_result", tool: event.name, summary: formatResult(event.result), status: event.isError ? "failed" : "done" });
+      return next;
+    case "edit_diff":
+      next.push({ id, type: "file_diff", path: event.path, lines: toDiffLines(event.diffLines) });
+      return next;
+    case "permission_request":
+      next.push({ id, type: "permission_request", title: event.toolName, detail: event.category ?? "permission", status: "pending" });
+      return next;
+    case "status":
+      next.push({ id, type: "terminal_output", command: "status", output: event.text, status: "done" });
+      return next;
+    case "retry_start":
+      next.push({ id, type: "error", message: "Retrying", detail: event.errorMessage });
+      return next;
+    case "retry_end":
+      if (!event.success && event.finalError) next.push({ id, type: "error", message: "Retry failed", detail: event.finalError });
+      return next;
+    default:
+      return next;
+  }
+}
+
+function appendAssistantDelta(events: MarchTimelineEvent[], delta: string, id: string) {
+  const last = events.at(-1);
+  if (last?.type === "assistant_message") last.text += delta;
+  else events.push({ id, type: "assistant_message", text: delta, time: nowTime() });
+  return events;
+}
+
+function appendThoughtDelta(events: MarchTimelineEvent[], delta: string, id: string) {
+  const last = events.at(-1);
+  if (last?.type === "assistant_thought" && last.status === "open") last.text += delta;
+  else events.push({ id, type: "assistant_thought", title: "Thinking", text: delta, status: "open" });
+  return events;
+}
+
+function closeThought(events: MarchTimelineEvent[]) {
+  const last = events.at(-1);
+  if (last?.type === "assistant_thought") last.status = "closed";
+  return events;
+}
+
+function toDiffLines(lines: Array<{ type?: string; text?: string }> = []) {
+  return lines.map((line) => ({ kind: toDiffKind(line.type), text: line.text ?? "" }));
+}
+
+function toDiffKind(type?: string): "add" | "remove" | "keep" {
+  if (type === "add") return "add";
+  if (type === "del") return "remove";
+  return "keep";
+}
+
+function formatArgs(args: unknown) {
+  if (args === undefined || args === null) return "running";
+  return JSON.stringify(args).slice(0, 160);
+}
+
+function formatResult(result: unknown) {
+  if (result === undefined || result === null) return "done";
+  return typeof result === "string" ? result.slice(0, 240) : JSON.stringify(result).slice(0, 240);
+}
+
+function nowTime() {
+  return new Intl.DateTimeFormat(undefined, { hour: "2-digit", minute: "2-digit" }).format(new Date());
+}

package/src/web-ui/src/runtime/useWebRuntime.ts

@@ -0,0 +1,144 @@
+import { useEffect, useRef, useState } from "react";
+import { mockWebUiModel } from "../mockData";
+import type { MarchTimelineEvent, WebUiModel } from "../model";
+import { applyRuntimeEvent } from "./runtimeTimeline";
+import { connectRuntimeEvents, createRuntimeSession, fetchFsList, fetchFsRoots, fetchProviderQuota, fetchRuntimeSnapshot, submitRuntimeTurn } from "./client";
+import type { FsEntry } from "./client";
+
+export type WebRuntimeState = {
+  model: WebUiModel;
+  connected: boolean;
+  running: boolean;
+  error: string | null;
+  fsEntries: FsEntry[];
+  fsPath: string | null;
+  openSession: (sessionId: string) => Promise<void>;
+  createSession: (workspacePath: string) => Promise<void>;
+  browseRoots: () => Promise<void>;
+  browsePath: (path: string) => Promise<void>;
+  submitPrompt: (prompt: string) => Promise<void>;
+};
+
+export function useWebRuntime(): WebRuntimeState {
+  const [model, setModel] = useState<WebUiModel>(mockWebUiModel);
+  const [connected, setConnected] = useState(false);
+  const [running, setRunning] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [fsEntries, setFsEntries] = useState<FsEntry[]>([]);
+  const [fsPath, setFsPath] = useState<string | null>(null);
+  const activeSessionId = model.activeSessionId ?? null;
+  const timelineCache = useRef(new Map<string, MarchTimelineEvent[]>());
+
+  useEffect(() => {
+    let mounted = true;
+    fetchRuntimeSnapshot()
+      .then((snapshot) => {
+        if (!mounted) return;
+        setModel(snapshot);
+        setConnected(true);
+      })
+      .catch(() => setConnected(false));
+    fetchFsRoots().then((roots) => mounted && setFsEntries(roots)).catch(() => {});
+    return () => { mounted = false; };
+  }, []);
+
+  useEffect(() => {
+    if (!activeSessionId) return undefined;
+    const disconnect = connectRuntimeEvents(
+      activeSessionId,
+      (event) => {
+        setConnected(true);
+        if (event.type === "provider_quota_snapshot") {
+          setModel((current) => current.activeSessionId === activeSessionId
+            ? { ...current, providerQuota: event.snapshot }
+            : current);
+          return;
+        }
+        setModel((current) => {
+          const next = updateTimelineEvents(current, (events) => applyRuntimeEvent(events, event));
+          rememberTimeline(next, timelineCache.current);
+          return next;
+        });
+      },
+      () => setConnected(false),
+    );
+    refreshProviderQuota(activeSessionId).catch(() => undefined);
+    return disconnect;
+  }, [activeSessionId]);
+
+  async function openSession(sessionId: string) {
+    setError(null);
+    const snapshot = await fetchRuntimeSnapshot(sessionId);
+    setModel(restoreCachedTimeline(snapshot, timelineCache.current));
+  }
+
+  async function createSession(workspacePath: string) {
+    setRunning(true);
+    setError(null);
+    try {
+      const result = await createRuntimeSession(workspacePath);
+      setModel(result.snapshot);
+      rememberTimeline(result.snapshot, timelineCache.current);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setRunning(false);
+    }
+  }
+
+  async function refreshProviderQuota(sessionId: string) {
+    const providerQuota = await fetchProviderQuota(sessionId);
+    setModel((current) => current.activeSessionId === sessionId ? { ...current, providerQuota } : current);
+  }
+
+  async function browseRoots() {
+    setFsPath(null);
+    setFsEntries(await fetchFsRoots());
+  }
+
+  async function browsePath(path: string) {
+    setFsPath(path);
+    setFsEntries(await fetchFsList(path));
+  }
+
+  async function submitPrompt(prompt: string) {
+    if (!activeSessionId) {
+      setError("Choose a workspace before sending a message");
+      return;
+    }
+    setRunning(true);
+    setError(null);
+    try {
+      await submitRuntimeTurn(activeSessionId, prompt);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      setError(message);
+      setModel((current) => {
+        const next = updateTimelineEvents(current, (events) => [
+          ...events,
+          { id: `client-error:${Date.now()}`, type: "error", message },
+        ]);
+        rememberTimeline(next, timelineCache.current);
+        return next;
+      });
+    } finally {
+      setRunning(false);
+    }
+  }
+
+  return { model, connected, running, error, fsEntries, fsPath, openSession, createSession, browseRoots, browsePath, submitPrompt };
+}
+
+function restoreCachedTimeline(model: WebUiModel, cache: Map<string, MarchTimelineEvent[]>): WebUiModel {
+  const activeSessionId = model.activeSessionId;
+  const cached = activeSessionId ? cache.get(activeSessionId) : null;
+  return cached ? { ...model, timeline: { ...model.timeline, events: cached } } : model;
+}
+
+function rememberTimeline(model: WebUiModel, cache: Map<string, MarchTimelineEvent[]>) {
+  if (model.activeSessionId) cache.set(model.activeSessionId, model.timeline.events);
+}
+
+function updateTimelineEvents(model: WebUiModel, update: (events: MarchTimelineEvent[]) => MarchTimelineEvent[]): WebUiModel {
+  return { ...model, timeline: { ...model.timeline, events: update(model.timeline.events) } };
+}

package/src/web-ui/src/styles/shell.css

@@ -0,0 +1,166 @@
+@layer components {
+  .app-shell {
+    height: 100dvh;
+    display: grid;
+    grid-template-columns: var(--shell-left-width) minmax(0, 1fr) var(--shell-right-width);
+    grid-template-rows: minmax(0, 1fr) auto;
+    grid-template-areas: "sidebar main right" "sidebar footer right";
+    background: var(--color-bg-page);
+    color: var(--color-text-primary);
+    overflow: hidden;
+    isolation: isolate;
+  }
+
+  .panel { min-height: 0; overflow: hidden; background: var(--color-bg-sidebar); }
+  .left-panel { grid-area: sidebar; border-right: 1px solid var(--color-border-subtle); }
+  .right-panel { grid-area: right; border-left: 1px solid var(--color-border-subtle); display: flex; flex-direction: column; }
+
+  .projects-header, .right-header, .main-header {
+    height: var(--header-height);
+    padding: 0 16px;
+    border-bottom: 1px solid var(--color-border-subtle);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--color-bg-sidebar);
+    color: var(--color-text-muted);
+    font-size: 11px;
+    font-weight: var(--font-weight-ui-medium);
+    text-transform: uppercase;
+  }
+  .projects-header h3 { margin: 0; font: inherit; letter-spacing: 0.5px; }
+  .menu-button {
+    width: 28px;
+    height: 28px;
+    border: 0;
+    border-radius: var(--radius-control);
+    background: transparent;
+    color: var(--color-text-muted);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 3px;
+  }
+  .menu-button span { width: 3.6px; height: 3.6px; border-radius: 999px; background: currentColor; }
+  .menu-button:hover, .header-button:hover, .session-row:hover, .activity-row:hover { background: var(--color-hover); }
+  .projects-body { height: calc(100% - var(--header-height)); overflow: hidden; padding: var(--space-panel) 0; }
+  .project-tree-host {
+    height: 100%;
+    --trees-accent-override: var(--color-accent);
+    --trees-bg-override: var(--color-bg-sidebar);
+    --trees-bg-muted-override: var(--color-hover);
+    --trees-border-color-override: var(--color-border-subtle);
+    --trees-fg-override: var(--color-text-primary);
+    --trees-fg-muted-override: var(--color-text-muted);
+    --trees-selected-bg-override: var(--color-accent-soft);
+    --trees-selected-fg-override: var(--color-accent);
+    --trees-font-family-override: var(--font-sans);
+    --trees-font-size-override: 13px;
+    --trees-border-radius-override: var(--radius-row);
+    --trees-item-height: 30px;
+    --trees-item-padding-x-override: 8px;
+    --trees-item-margin-x-override: 8px;
+    --trees-item-row-gap-override: 4px;
+    --trees-level-gap-override: var(--tree-indent);
+    --trees-padding-inline-override: 0px;
+    --trees-scrollbar-gutter-override: 6px;
+  }
+
+  .timeline { grid-area: main; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--color-bg-surface); overflow: hidden; }
+  .main-header { background: var(--color-bg-surface); }
+  .runtime-pill { border-radius: 999px; padding: 2px 7px; color: var(--color-text-muted); background: var(--color-bg-subtle); font-size: 12px; }
+  .runtime-pill.connected { color: var(--color-accent); background: var(--color-accent-soft); }
+  .timeline-scroll { flex: 1; min-height: 0; overflow: auto; padding: 16px 18px 24px; }
+  .session-title { display: flex; align-items: baseline; gap: 8px; margin: 0 0 14px 40px; }
+  .session-title h1 { margin: 0; font-size: 17px; font-weight: var(--font-weight-ui-strong); letter-spacing: -0.01em; }
+  .session-title span { color: var(--color-text-muted); font-size: 12px; }
+  .timeline-list { max-width: 920px; margin: 0 auto; }
+  .message-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 10px 0; }
+  .message-row + .message-row { border-top: 1px solid var(--color-border-subtle); }
+  .agent-dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-control); background: var(--palette-slate-700); color: var(--color-text-inverse); font-size: 12px; font-weight: 800; }
+  .agent-dot.march { background: var(--color-accent); }
+  .message-body { min-width: 0; padding-top: 3px; color: var(--color-text-primary); font-size: 14px; font-weight: var(--font-weight-content-normal); line-height: 1.55; }
+  .message-body p { margin: 0; }
+  .message-body time { display: block; margin-top: 4px; color: var(--color-text-muted); font-size: 11px; }
+  .timeline-aux { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-control); padding: 7px 9px; background: var(--color-bg-subtle); }
+  .timeline-aux summary, .aux-title { display: flex; align-items: center; gap: 8px; min-height: 20px; }
+  .timeline-aux summary { cursor: pointer; }
+  .timeline-aux span, .timeline-aux em { color: var(--color-text-muted); font-size: 12px; font-style: normal; }
+  .timeline-aux strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: var(--font-weight-ui-medium); }
+  .timeline-aux p { margin: 7px 0 0; color: var(--color-text-muted); font-size: 13px; }
+  .tool-block span, .diff-inline, .terminal-block pre { font-family: var(--font-mono); }
+  .diff-inline { margin-top: 7px; border-left: 2px solid var(--color-border-strong); padding-left: 10px; font-size: 13px; }
+  .diff-line { padding: 2px 0; }
+  .diff-line.add { color: var(--color-success); }
+  .diff-line.remove, .error-block strong { color: var(--color-danger); }
+  .diff-line.keep { color: var(--color-text-muted); }
+  .terminal-block pre { margin: 7px 0 0; color: var(--color-text-muted); font-size: 12px; white-space: pre-wrap; }
+  .permission-block.pending strong { color: var(--color-warning); }
+  .permission-block.approved strong { color: var(--color-success); }
+
+  .right-body { flex: 1; min-height: 0; overflow: auto; padding: 12px; }
+  .workspace-picker { display: grid; gap: 7px; padding-bottom: 10px; }
+  .workspace-picker label { color: var(--color-text-muted); font-size: 11px; font-weight: var(--font-weight-ui-medium); text-transform: uppercase; }
+  .workspace-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; }
+  .workspace-input-row input { min-width: 0; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-control); padding: 7px 8px; background: var(--color-bg-surface); color: var(--color-text-primary); }
+  .workspace-input-row button, .fs-entry-row button, .fs-row { border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-text-muted); }
+  .workspace-input-row button { padding: 0 8px; background: var(--color-accent-soft); color: var(--color-accent); }
+  .workspace-input-row button:disabled { opacity: 0.45; }
+  .workspace-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-muted); font-size: 12px; }
+  .fs-entry-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; }
+  .fs-entry-row button, .fs-row { min-height: 28px; padding: 0 7px; text-align: left; }
+  .fs-entry-row button:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-primary); }
+  .provider-quota { margin-top: 12px; border-top: 1px solid var(--color-border-subtle); padding-top: 12px; display: grid; gap: 9px; }
+  .provider-quota-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
+  .provider-quota-header span { color: var(--color-text-primary); font-weight: var(--font-weight-ui-medium); }
+  .provider-quota-header time, .quota-row em { color: var(--color-text-muted); font-style: normal; }
+  .quota-row { display: grid; gap: 5px; font-size: 12px; }
+  .quota-row-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+  .quota-row-main span { color: var(--color-text-primary); }
+  .quota-row-main strong { color: var(--color-accent); font-size: 12px; }
+  .quota-bar { height: 6px; overflow: hidden; border-radius: 999px; background: var(--color-bg-surface); box-shadow: inset 0 0 0 1px var(--color-border-subtle); }
+  .quota-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 72%, white)); }
+  .session-row, .activity-row { width: 100%; min-height: 34px; border: 0; border-radius: var(--radius-control); padding: 7px 8px; background: transparent; color: var(--color-text-primary); display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; font-size: 13px; }
+  .session-row.active { background: var(--color-accent-soft); color: var(--color-accent); font-weight: var(--font-weight-ui-medium); }
+  .session-row time, .activity-row time { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-muted); font-size: 12px; }
+  .right-divider { margin: 12px 0 4px; padding-top: 12px; border-top: 1px solid var(--color-border-subtle); color: var(--color-text-muted); font-size: 11px; font-weight: var(--font-weight-ui-medium); text-transform: uppercase; }
+  .activity-row { color: var(--color-text-muted); }
+
+  .composer { grid-area: footer; min-width: 0; padding: 0 16px 12px; display: grid; grid-template-columns: 1fr; align-items: end; background: var(--color-bg-surface); }
+  .composer-box { width: 100%; min-height: var(--composer-min-height); border: 1px solid var(--color-border-strong); border-radius: var(--radius-composer); background: var(--color-bg-sidebar); display: flex; align-items: center; position: relative; overflow: visible; }
+  .composer-box:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent-soft); }
+  .composer textarea { width: 100%; max-height: 160px; resize: none; border: 0; outline: 0; background: transparent; color: var(--color-text-primary); font-weight: var(--font-weight-content-normal); padding: 12px 124px 12px 12px; }
+  .composer-actions { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 2px; }
+  .session-ring, .chip-button, .icon-action, .send-icon, .mobile-toggle { width: 28px; height: 28px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-text-muted); display: inline-flex; align-items: center; justify-content: center; }
+  .session-ring::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--color-accent); border-radius: 999px; }
+  .chip-button { width: auto; padding: 0 8px; font-size: 12px; }
+  .icon-action:hover, .chip-button:hover, .mobile-toggle:hover { background: var(--color-hover); }
+  .send-icon { background: var(--color-accent); color: var(--color-text-inverse); font-size: 16px; font-weight: 700; }
+  .send-icon:disabled { opacity: 0.45; }
+  .mobile-toggle, .overlay { display: none; }
+
+  @media (max-width: 920px) {
+    html, body { position: fixed; inset: 0; width: 100%; min-height: 0; }
+    .app-shell { display: flex; flex-direction: column; height: 100dvh; padding-top: env(safe-area-inset-top, 0); }
+    .timeline { flex: 1; min-height: 0; }
+    .composer { flex: 0 0 auto; grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 1px; padding: 0 1px max(2px, env(safe-area-inset-bottom)); }
+    .mobile-toggle { display: inline-flex; height: 44px; align-self: center; }
+    .composer-box { border-radius: 10px; min-height: 44px; }
+    .composer textarea { padding-right: 114px; }
+    .left-panel, .right-panel {
+      position: fixed;
+      top: env(safe-area-inset-top, 0);
+      bottom: 0;
+      z-index: 30;
+      width: var(--shell-mobile-panel-width);
+      transform: translateX(-100%);
+      transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+      background: var(--color-bg-sidebar);
+      box-shadow: 4px 0 24px var(--color-shadow-drawer);
+    }
+    .left-panel { left: 0; border-top-right-radius: 14px; border-bottom-right-radius: 14px; }
+    .right-panel { right: 0; transform: translateX(100%); border-top-left-radius: 14px; border-bottom-left-radius: 14px; box-shadow: -4px 0 24px var(--color-shadow-drawer); }
+    .app-shell[data-left-open="true"] .left-panel, .app-shell[data-right-open="true"] .right-panel { transform: translateX(0); }
+    .app-shell[data-left-open="true"] .overlay, .app-shell[data-right-open="true"] .overlay { display: block; position: fixed; inset: 0; z-index: 20; background: var(--color-scrim); }
+  }
+}

package/src/web-ui/src/styles/tokens.css

@@ -0,0 +1,116 @@
+@layer theme.palette, theme.semantic, theme.component, base;
+
+@layer theme.palette {
+  :root {
+    color-scheme: light dark;
+    --font-sans:
+      "Segoe UI Variable Text",
+      "Segoe UI Variable",
+      "Segoe UI",
+      -apple-system,
+      BlinkMacSystemFont,
+      Roboto,
+      "Helvetica Neue",
+      Arial,
+      DengXian,
+      "等线",
+      "Microsoft YaHei UI",
+      sans-serif;
+    --font-mono:
+      ui-monospace,
+      "SFMono-Regular",
+      "Cascadia Code",
+      "JetBrains Mono",
+      "Fira Code",
+      Consolas,
+      "Liberation Mono",
+      Menlo,
+      monospace;
+    --font-weight-ui-normal: 500;
+    --font-weight-content-normal: 600;
+    --font-weight-ui-medium: 600;
+    --font-weight-ui-strong: 700;
+    --palette-white: #ffffff;
+    --palette-slate-50: #f8fafc;
+    --palette-slate-100: #f1f5f9;
+    --palette-slate-200: #e2e8f0;
+    --palette-slate-400: #94a3b8;
+    --palette-slate-500: #64748b;
+    --palette-slate-700: #334155;
+    --palette-slate-900: #0f172a;
+    --palette-slate-950: #020617;
+    --palette-blue-400: #60a5fa;
+    --palette-blue-600: #2563eb;
+    --palette-green-700: #15803d;
+    --palette-amber-600: #d97706;
+    --palette-red-600: #dc2626;
+  }
+}
+
+@layer theme.semantic {
+  :root {
+    --color-bg-page: #f3f4f6;
+    --color-bg-surface: var(--palette-white);
+    --color-bg-sidebar: rgba(255, 255, 255, 0.74);
+    --color-bg-subtle: var(--palette-slate-50);
+    --color-text-primary: var(--palette-slate-900);
+    --color-text-muted: var(--palette-slate-500);
+    --color-text-inverse: var(--palette-white);
+    --color-border-subtle: rgba(15, 23, 42, 0.08);
+    --color-border-strong: rgba(15, 23, 42, 0.14);
+    --color-accent: var(--palette-blue-600);
+    --color-accent-soft: rgba(37, 99, 235, 0.08);
+    --color-success: var(--palette-green-700);
+    --color-warning: var(--palette-amber-600);
+    --color-danger: var(--palette-red-600);
+    --color-hover: rgba(0, 0, 0, 0.05);
+    --color-shadow-drawer: rgba(0, 0, 0, 0.15);
+    --color-scrim: rgba(0, 0, 0, 0.3);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --color-bg-page: var(--palette-slate-900);
+      --color-bg-surface: var(--palette-slate-950);
+      --color-bg-sidebar: var(--palette-slate-900);
+      --color-bg-subtle: var(--palette-slate-900);
+      --color-text-primary: var(--palette-slate-50);
+      --color-text-muted: var(--palette-slate-400);
+      --color-border-subtle: rgba(148, 163, 184, 0.12);
+      --color-border-strong: rgba(148, 163, 184, 0.2);
+      --color-accent: var(--palette-blue-400);
+      --color-accent-soft: rgba(96, 165, 250, 0.14);
+      --color-hover: rgba(148, 163, 184, 0.08);
+    }
+  }
+}
+
+@layer theme.component {
+  :root {
+    --shell-left-width: 260px;
+    --shell-right-width: 280px;
+    --shell-mobile-panel-width: 75vw;
+    --header-height: 36px;
+    --composer-min-height: 46px;
+    --radius-row: 6px;
+    --radius-control: 8px;
+    --radius-composer: 12px;
+    --space-panel: 8px;
+    --tree-indent: 16px;
+  }
+}
+
+@layer base {
+  * { box-sizing: border-box; }
+  html, body, #root { height: 100%; margin: 0; overflow: hidden; }
+  body {
+    background: var(--color-bg-page);
+    color: var(--color-text-primary);
+    font-family: var(--font-sans);
+    font-weight: var(--font-weight-ui-normal);
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+  button, textarea { font: inherit; }
+  button { cursor: pointer; }
+}

package/src/web-ui/src/timelineAdapter.ts

@@ -0,0 +1,43 @@
+import type { MarchTimelineEvent, TimelineItem } from "./model";
+
+export function normalizeTimelineEvents(events: MarchTimelineEvent[]): TimelineItem[] {
+  const items: TimelineItem[] = [];
+
+  for (const event of events) {
+    if (event.type === "tool_result") {
+      const previous = items.at(-1);
+      if (previous?.kind === "tool" && previous.tool === event.tool) {
+        previous.summary = event.summary;
+        previous.status = event.status;
+        continue;
+      }
+    }
+
+    items.push(toTimelineItem(event));
+  }
+
+  return items;
+}
+
+function toTimelineItem(event: MarchTimelineEvent): TimelineItem {
+  switch (event.type) {
+    case "user_message":
+      return { id: event.id, kind: "message", actor: "user", text: event.text, time: event.time };
+    case "assistant_message":
+      return { id: event.id, kind: "message", actor: "march", text: event.text, time: event.time };
+    case "assistant_thought":
+      return { id: event.id, kind: "thought", title: event.title, text: event.text, status: event.status };
+    case "tool_call":
+      return { id: event.id, kind: "tool", tool: event.tool, target: event.target, status: event.status };
+    case "tool_result":
+      return { id: event.id, kind: "tool", tool: event.tool, target: "result", status: event.status, summary: event.summary };
+    case "file_diff":
+      return { id: event.id, kind: "diff", path: event.path, lines: event.lines };
+    case "terminal_output":
+      return { id: event.id, kind: "terminal", command: event.command, output: event.output, status: event.status };
+    case "permission_request":
+      return { id: event.id, kind: "permission", title: event.title, detail: event.detail, status: event.status };
+    case "error":
+      return { id: event.id, kind: "error", message: event.message, detail: event.detail };
+  }
+}

package/src/web-ui/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/src/web-ui/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}

package/src/web-ui/vite.config.mjs

@@ -0,0 +1,11 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  root: "src/web-ui",
+  plugins: [react()],
+  server: {
+    host: "127.0.0.1",
+    port: 4174,
+  },
+});