march-cli 0.1.33 → 0.1.35

package/src/web-ui/src/components/RightSidebar.tsx

@@ -0,0 +1,70 @@
+import { useState } from "react";
+import type { ActivityEvent, SessionSummary } from "../model";
+import type { FsEntry } from "../runtime/client";
+
+type RightSidebarProps = {
+  sessions: SessionSummary[];
+  activity: ActivityEvent[];
+  fsEntries: FsEntry[];
+  fsPath: string | null;
+  running: boolean;
+  onOpenSession: (sessionId: string) => Promise<void>;
+  onCreateSession: (workspacePath: string) => Promise<void>;
+  onBrowseRoots: () => Promise<void>;
+  onBrowsePath: (path: string) => Promise<void>;
+};
+
+export function RightSidebar({ sessions, activity, fsEntries, fsPath, running, onOpenSession, onCreateSession, onBrowseRoots, onBrowsePath }: RightSidebarProps) {
+  const [workspacePath, setWorkspacePath] = useState("");
+  const canCreate = workspacePath.trim().length > 0 && !running;
+
+  async function createFromPath(path = workspacePath) {
+    const nextPath = path.trim();
+    if (!nextPath || running) return;
+    await onCreateSession(nextPath);
+    setWorkspacePath("");
+  }
+
+  return (
+    <aside className="panel right-panel" aria-label="Sessions">
+      <div className="right-header">会话</div>
+      <div className="right-body">
+        <div className="workspace-picker" aria-label="Workspace picker">
+          <label htmlFor="workspace-path">Workspace</label>
+          <div className="workspace-input-row">
+            <input
+              id="workspace-path"
+              value={workspacePath}
+              onChange={(event) => setWorkspacePath(event.target.value)}
+              placeholder="Paste or browse a folder path"
+            />
+            <button type="button" disabled={!canCreate} onClick={() => createFromPath()}>Open</button>
+          </div>
+          <div className="workspace-path">{fsPath ?? "Roots"}</div>
+          <button type="button" className="fs-row" onClick={onBrowseRoots}>↖ Roots</button>
+          {fsEntries.map((entry) => (
+            <div key={entry.path} className="fs-entry-row">
+              <button type="button" onClick={() => onBrowsePath(entry.path)}>{entry.name}</button>
+              <button type="button" onClick={() => createFromPath(entry.path)}>Open</button>
+            </div>
+          ))}
+        </div>
+
+        <div className="right-divider">Sessions</div>
+        {sessions.map((session) => (
+          <button key={session.id} className={session.active ? "session-row active" : "session-row"} type="button" onClick={() => onOpenSession(session.id)}>
+            <span>{session.title}</span>
+            <time>{session.workspacePath ?? session.time}</time>
+          </button>
+        ))}
+        <div className="right-divider">Activity</div>
+        {activity.map((event) => (
+          <button key={event.id} className="activity-row" type="button">
+            <span>{event.action}</span>
+            <time>{event.time}</time>
+          </button>
+        ))}
+      </div>
+    </aside>
+  );
+}

package/src/web-ui/src/components/SessionTimeline.tsx

@@ -0,0 +1,31 @@
+import { normalizeTimelineEvents } from "../timelineAdapter";
+import type { WebUiModel } from "../model";
+import { TimelineList } from "./timeline/TimelineList";
+
+export type SessionTimelineProps = {
+  timeline: WebUiModel["timeline"];
+  connected: boolean;
+  error: string | null;
+};
+
+export function SessionTimeline({ timeline, connected, error }: SessionTimelineProps) {
+  const items = normalizeTimelineEvents(timeline.events);
+
+  return (
+    <main className="timeline" aria-label="Agent timeline">
+      <div className="main-header">
+        <span>Session</span>
+        <span className={connected ? "runtime-pill connected" : "runtime-pill"}>
+          {connected ? "runner" : "mock"}
+        </span>
+      </div>
+      <div className="timeline-scroll">
+        <div className="session-title">
+          <h1>{timeline.title}</h1>
+          <span>{error ?? timeline.meta}</span>
+        </div>
+        <TimelineList items={items} />
+      </div>
+    </main>
+  );
+}

package/src/web-ui/src/components/timeline/TimelineBlocks.tsx

@@ -0,0 +1,109 @@
+import type { TimelineItem } from "../../model";
+
+type TimelineBlocksProps = {
+  item: TimelineItem;
+};
+
+export function TimelineBlocks({ item }: TimelineBlocksProps) {
+  if (item.kind === "message") return <MessageBlock item={item} />;
+
+  return (
+    <article className="message-row assistant-turn">
+      <div className="agent-dot march">M</div>
+      <div className="message-body"><AuxBlock item={item} /></div>
+    </article>
+  );
+}
+
+function MessageBlock({ item }: { item: Extract<TimelineItem, { kind: "message" }> }) {
+  return (
+    <article className={`message-row ${item.actor === "user" ? "user-turn" : "assistant-turn"}`}>
+      <div className={item.actor === "user" ? "agent-dot" : "agent-dot march"}>
+        {item.actor === "user" ? "U" : "M"}
+      </div>
+      <div className="message-body">
+        <p>{item.text}</p>
+        {item.time ? <time>{item.time}</time> : null}
+      </div>
+    </article>
+  );
+}
+
+function AuxBlock({ item }: { item: Exclude<TimelineItem, { kind: "message" }> }) {
+  switch (item.kind) {
+    case "thought":
+      return <ThoughtBlock item={item} />;
+    case "tool":
+      return <ToolBlock item={item} />;
+    case "diff":
+      return <DiffBlock item={item} />;
+    case "terminal":
+      return <TerminalBlock item={item} />;
+    case "permission":
+      return <PermissionBlock item={item} />;
+    case "error":
+      return <ErrorBlock item={item} />;
+  }
+}
+
+function ThoughtBlock({ item }: { item: Extract<TimelineItem, { kind: "thought" }> }) {
+  return (
+    <details className="timeline-aux thought-block" open={item.status === "open"}>
+      <summary><span>thinking</span><strong>{item.title}</strong></summary>
+      <p>{item.text}</p>
+    </details>
+  );
+}
+
+function ToolBlock({ item }: { item: Extract<TimelineItem, { kind: "tool" }> }) {
+  return (
+    <details className="timeline-aux tool-block" open={item.status !== "done"}>
+      <summary>
+        <span>{item.tool}</span>
+        <strong>{item.target}</strong>
+        <em>{item.status}</em>
+      </summary>
+      {item.summary ? <p>{item.summary}</p> : null}
+    </details>
+  );
+}
+
+function DiffBlock({ item }: { item: Extract<TimelineItem, { kind: "diff" }> }) {
+  return (
+    <div className="timeline-aux diff-block">
+      <div className="aux-title"><span>diff</span><strong>{item.path}</strong></div>
+      <div className="diff-inline">
+        {item.lines.map((line) => (
+          <div key={`${line.kind}:${line.text}`} className={`diff-line ${line.kind}`}>{line.text}</div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function TerminalBlock({ item }: { item: Extract<TimelineItem, { kind: "terminal" }> }) {
+  return (
+    <details className="timeline-aux terminal-block" open={item.status !== "done"}>
+      <summary><span>terminal</span><strong>{item.command}</strong><em>{item.status}</em></summary>
+      <pre>{item.output}</pre>
+    </details>
+  );
+}
+
+function PermissionBlock({ item }: { item: Extract<TimelineItem, { kind: "permission" }> }) {
+  return (
+    <div className={`timeline-aux permission-block ${item.status}`}>
+      <div className="aux-title"><span>permission</span><strong>{item.title}</strong><em>{item.status}</em></div>
+      <p>{item.detail}</p>
+    </div>
+  );
+}
+
+function ErrorBlock({ item }: { item: Extract<TimelineItem, { kind: "error" }> }) {
+  return (
+    <div className="timeline-aux error-block">
+      <div className="aux-title"><span>error</span><strong>{item.message}</strong></div>
+      {item.detail ? <p>{item.detail}</p> : null}
+    </div>
+  );
+}

package/src/web-ui/src/components/timeline/TimelineList.tsx

@@ -0,0 +1,14 @@
+import type { TimelineItem } from "../../model";
+import { TimelineBlocks } from "./TimelineBlocks";
+
+export type TimelineListProps = {
+  items: TimelineItem[];
+};
+
+export function TimelineList({ items }: TimelineListProps) {
+  return (
+    <div className="timeline-list" aria-label="Session events">
+      {items.map((item) => <TimelineBlocks key={item.id} item={item} />)}
+    </div>
+  );
+}

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

@@ -0,0 +1,51 @@
+import type { GitStatusEntry } from "@pierre/trees";
+import type { FileNode } from "./model";
+
+export type ProjectFileTreeInput = {
+  boundPaths: Set<string>;
+  expandedPaths: string[];
+  gitStatus: GitStatusEntry[];
+  paths: string[];
+  selectedPaths: string[];
+};
+
+export function createProjectFileTreeInput(root: FileNode): ProjectFileTreeInput {
+  const input: ProjectFileTreeInput = {
+    boundPaths: new Set<string>(),
+    expandedPaths: [],
+    gitStatus: [],
+    paths: [],
+    selectedPaths: [],
+  };
+
+  visitNode(root, "", input);
+
+  return input;
+}
+
+function visitNode(node: FileNode, parentPath: string, input: ProjectFileTreeInput) {
+  const path = joinPath(parentPath, node.name);
+
+  input.paths.push(node.kind === "folder" ? `${path}/` : path);
+
+  if (node.kind === "folder" && node.children?.length) {
+    input.expandedPaths.push(path);
+  }
+  if (node.selected || node.active) {
+    input.selectedPaths.push(path);
+  }
+  if (node.bound) {
+    input.boundPaths.add(path);
+  }
+  if (node.gitStatus) {
+    input.gitStatus.push({ path, status: node.gitStatus });
+  }
+
+  for (const child of node.children ?? []) {
+    visitNode(child, path, input);
+  }
+}
+
+function joinPath(parentPath: string, name: string) {
+  return parentPath ? `${parentPath}/${name}` : name;
+}

package/src/web-ui/src/main.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./styles/tokens.css";
+import "./styles/shell.css";
+
+createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

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

@@ -0,0 +1,87 @@
+import type { WebUiModel } from "./model";
+
+export const mockWebUiModel: WebUiModel = {
+  activeSessionId: "web-shell",
+  workspace: {
+    id: "root",
+    name: "march-cli-standalone",
+    kind: "folder",
+    selected: true,
+    bound: true,
+    children: [
+      {
+        id: "src",
+        name: "src",
+        kind: "folder",
+        children: [
+          {
+            id: "web-ui",
+            name: "web-ui",
+            kind: "folder",
+            children: [
+              { id: "app", name: "App.tsx", kind: "file", active: true, bound: true, gitStatus: "modified" },
+              { id: "model", name: "model.ts", kind: "file" },
+              { id: "styles", name: "styles.css", kind: "file" },
+            ],
+          },
+        ],
+      },
+      { id: "test", name: "test", kind: "folder" },
+      { id: "agents", name: "AGENTS.md", kind: "file" },
+      { id: "package", name: "package.json", kind: "file", gitStatus: "modified" },
+    ],
+  },
+  timeline: {
+    title: "Web shell",
+    meta: "mock adapter · fast",
+    events: [
+      { id: "u1", type: "user_message", text: "参考 MindFS，做正式 Web UI。", time: "09:41" },
+      { id: "m1", type: "assistant_message", text: "先组件化，runtime 保持不变。", time: "09:41" },
+      {
+        id: "th1",
+        type: "assistant_thought",
+        title: "Planning",
+        text: "把 runtime 事件先整理成 timeline item，再交给 UI 渲染。",
+        status: "closed",
+      },
+      { id: "t1", type: "tool_call", tool: "read", target: "workspace", status: "running" },
+      { id: "tr1", type: "tool_result", tool: "read", summary: "4 files inspected", status: "done" },
+      {
+        id: "d1",
+        type: "file_diff",
+        path: "src/web-ui/src/model.ts",
+        lines: [
+          { kind: "add", text: "+ Timeline adapter model" },
+          { kind: "keep", text: "  runtime adapter pending" },
+        ],
+      },
+      {
+        id: "term1",
+        type: "terminal_output",
+        command: "npm run test:fast",
+        output: "PASS web-ui.smoke.mjs",
+        status: "done",
+      },
+      {
+        id: "perm1",
+        type: "permission_request",
+        title: "Write files",
+        detail: "Edit local workspace source files",
+        status: "approved",
+      },
+    ],
+  },
+  sessions: [
+    { id: "web-shell", title: "Web shell", time: "now", active: true },
+    { id: "memory", title: "Memory", time: "1d" },
+  ],
+  activity: [
+    { id: "read", action: "read", time: "now" },
+    { id: "edit", action: "edit", time: "2m" },
+    { id: "test", action: "test", time: "5m" },
+  ],
+  composer: {
+    mode: "Chat",
+    placeholder: "Message March…",
+  },
+};

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

@@ -0,0 +1,62 @@
+export type FileNode = {
+  id: string;
+  name: string;
+  kind: "file" | "folder";
+  selected?: boolean;
+  active?: boolean;
+  bound?: boolean;
+  gitStatus?: "added" | "deleted" | "ignored" | "modified" | "renamed" | "untracked";
+  children?: FileNode[];
+};
+
+export type MarchTimelineEvent =
+  | { id: string; type: "user_message"; text: string; time?: string }
+  | { id: string; type: "assistant_message"; text: string; time?: string }
+  | { id: string; type: "assistant_thought"; title: string; text: string; status: "open" | "closed" }
+  | { id: string; type: "tool_call"; tool: string; target: string; status: "running" | "done" | "failed" }
+  | { id: string; type: "tool_result"; tool: string; summary: string; status: "done" | "failed" }
+  | { id: string; type: "file_diff"; path: string; lines: Array<{ kind: "add" | "remove" | "keep"; text: string }> }
+  | { id: string; type: "terminal_output"; command: string; output: string; status: "running" | "done" | "failed" }
+  | { id: string; type: "permission_request"; title: string; detail: string; status: "pending" | "approved" | "denied" }
+  | { id: string; type: "error"; message: string; detail?: string };
+
+export type TimelineItem =
+  | { id: string; kind: "message"; actor: "user" | "march"; text: string; time?: string }
+  | { id: string; kind: "thought"; title: string; text: string; status: "open" | "closed" }
+  | { id: string; kind: "tool"; tool: string; target: string; status: "running" | "done" | "failed"; summary?: string }
+  | { id: string; kind: "diff"; path: string; lines: Array<{ kind: "add" | "remove" | "keep"; text: string }> }
+  | { id: string; kind: "terminal"; command: string; output: string; status: "running" | "done" | "failed" }
+  | { id: string; kind: "permission"; title: string; detail: string; status: "pending" | "approved" | "denied" }
+  | { id: string; kind: "error"; message: string; detail?: string };
+
+export type SessionSummary = {
+  id: string;
+  title: string;
+  workspacePath?: string;
+  time: string;
+  active?: boolean;
+};
+
+export type ActivityEvent = {
+  id: string;
+  action: string;
+  time: string;
+};
+
+export type ComposerState = {
+  mode: string;
+  placeholder: string;
+};
+
+export type WebUiModel = {
+  activeSessionId?: string | null;
+  workspace: FileNode;
+  timeline: {
+    title: string;
+    meta: string;
+    events: MarchTimelineEvent[];
+  };
+  sessions: SessionSummary[];
+  activity: ActivityEvent[];
+  composer: ComposerState;
+};

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

@@ -0,0 +1,74 @@
+import type { 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: "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 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());
+}