march-cli 0.1.34 → 0.1.36

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

@@ -0,0 +1,48 @@
+import { useState } from "react";
+import type { WebRuntimeState } from "../runtime/useWebRuntime";
+import { Composer } from "./Composer";
+import { FileExplorer } from "./FileExplorer";
+import { RightSidebar } from "./RightSidebar";
+import { SessionTimeline } from "./SessionTimeline";
+
+export type AppShellProps = {
+  runtime: WebRuntimeState;
+};
+
+export function AppShell({ runtime }: AppShellProps) {
+  const [leftOpen, setLeftOpen] = useState(false);
+  const [rightOpen, setRightOpen] = useState(false);
+  const { model } = runtime;
+  const closePanels = () => {
+    setLeftOpen(false);
+    setRightOpen(false);
+  };
+
+  return (
+    <div className="app-shell" data-left-open={leftOpen} data-right-open={rightOpen}>
+      <div className="overlay" onClick={closePanels} />
+      <FileExplorer root={model.workspace} />
+      <SessionTimeline timeline={model.timeline} connected={runtime.connected} error={runtime.error} />
+      <RightSidebar
+        sessions={model.sessions}
+        activity={model.activity}
+        fsEntries={runtime.fsEntries}
+        fsPath={runtime.fsPath}
+        providerQuota={model.providerQuota}
+        running={runtime.running}
+        onOpenSession={runtime.openSession}
+        onCreateSession={runtime.createSession}
+        onBrowseRoots={runtime.browseRoots}
+        onBrowsePath={runtime.browsePath}
+      />
+      <Composer
+        composer={model.composer}
+        running={runtime.running}
+        disabled={!model.activeSessionId}
+        onSubmit={runtime.submitPrompt}
+        onOpenLeft={() => setLeftOpen(true)}
+        onOpenRight={() => setRightOpen(true)}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,47 @@
+import { useState } from "react";
+import type { FormEvent } from "react";
+import type { ComposerState } from "../model";
+
+export type ComposerProps = {
+  composer: ComposerState;
+  running: boolean;
+  disabled?: boolean;
+  onSubmit: (prompt: string) => Promise<void>;
+  onOpenLeft: () => void;
+  onOpenRight: () => void;
+};
+
+export function Composer({ composer, running, disabled = false, onSubmit, onOpenLeft, onOpenRight }: ComposerProps) {
+  const [prompt, setPrompt] = useState("");
+  const canSubmit = prompt.trim().length > 0 && !running && !disabled;
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!canSubmit) return;
+    const nextPrompt = prompt.trim();
+    setPrompt("");
+    await onSubmit(nextPrompt);
+  }
+
+  return (
+    <form className="composer" aria-label="Message composer" onSubmit={handleSubmit}>
+      <button type="button" className="mobile-toggle" onClick={onOpenLeft} aria-label="Open files">▦</button>
+      <div className="composer-box">
+        <textarea
+          rows={1}
+          value={prompt}
+          onChange={(event) => setPrompt(event.target.value)}
+          placeholder={composer.placeholder}
+          disabled={disabled}
+        />
+        <div className="composer-actions">
+          <button type="button" className="session-ring" aria-label="Session" />
+          <button type="button" className="chip-button">{running ? "Running" : composer.mode}</button>
+          <button type="button" className="icon-action" aria-label="Attach">+</button>
+          <button type="submit" className="send-icon" aria-label="Send" disabled={!canSubmit}>↑</button>
+        </div>
+      </div>
+      <button type="button" className="mobile-toggle" onClick={onOpenRight} aria-label="Open sessions">☰</button>
+    </form>
+  );
+}

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

@@ -0,0 +1,46 @@
+import { FileTree as PierreFileTree, useFileTree } from "@pierre/trees/react";
+import type { FileTreeRowDecorationContext } from "@pierre/trees";
+import { useMemo } from "react";
+import { createProjectFileTreeInput } from "../fileTreeAdapter";
+import type { FileNode } from "../model";
+
+type FileExplorerProps = {
+  root: FileNode;
+};
+
+export function FileExplorer({ root }: FileExplorerProps) {
+  const treeInput = useMemo(() => createProjectFileTreeInput(root), [root]);
+  const { model } = useFileTree({
+    density: "compact",
+    flattenEmptyDirectories: false,
+    gitStatus: treeInput.gitStatus,
+    icons: { set: "minimal", colored: false },
+    id: "march-project-tree",
+    initialExpandedPaths: treeInput.expandedPaths,
+    initialSelectedPaths: treeInput.selectedPaths,
+    paths: treeInput.paths,
+    renderRowDecoration: (context: FileTreeRowDecorationContext) => {
+      if (!treeInput.boundPaths.has(context.item.path)) {
+        return null;
+      }
+      return { text: "◆", title: "Bound to session" };
+    },
+    search: true,
+  });
+
+  return (
+    <aside className="panel left-panel" aria-label="Projects">
+      <div className="projects-header">
+        <h3>Projects</h3>
+        <button className="menu-button" type="button" aria-label="Open project menu">
+          <span />
+          <span />
+          <span />
+        </button>
+      </div>
+      <div className="projects-body">
+        <PierreFileTree className="project-tree-host" model={model} aria-label="Project files" />
+      </div>
+    </aside>
+  );
+}

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

@@ -0,0 +1,115 @@
+import { useState } from "react";
+import type { ActivityEvent, ProviderQuotaSnapshot, SessionSummary } from "../model";
+import type { FsEntry } from "../runtime/client";
+
+type RightSidebarProps = {
+  sessions: SessionSummary[];
+  activity: ActivityEvent[];
+  fsEntries: FsEntry[];
+  fsPath: string | null;
+  providerQuota?: ProviderQuotaSnapshot | null;
+  running: boolean;
+  onOpenSession: (sessionId: string) => Promise<void>;
+  onCreateSession: (workspacePath: string) => Promise<void>;
+  onBrowseRoots: () => Promise<void>;
+  onBrowsePath: (path: string) => Promise<void>;
+};
+
+export function RightSidebar(props: RightSidebarProps) {
+  const { sessions, activity, fsEntries, fsPath, providerQuota, running } = props;
+  const { onOpenSession, onCreateSession, onBrowseRoots, onBrowsePath } = props;
+  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>
+
+        {providerQuota ? <ProviderQuotaCard quota={providerQuota} /> : null}
+
+        <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>
+  );
+}
+
+function ProviderQuotaCard({ quota }: { quota: ProviderQuotaSnapshot }) {
+  return (
+    <div className="provider-quota" aria-label="Provider quota">
+      <div className="provider-quota-header">
+        <span>{quota.label}</span>
+        <time>{quota.providerId}</time>
+      </div>
+      {quota.limits.flatMap((limit) => limit.windows.map((window) => {
+        const left = Math.round(window.remainingPercent);
+        return (
+          <div key={`${limit.id}:${window.id}`} className="quota-row">
+            <div className="quota-row-main">
+              <span>{formatQuotaLabel(window.label)}</span>
+              <strong>{left}% left</strong>
+            </div>
+            <div className="quota-bar" aria-label={`${left}% quota left`}>
+              <span style={{ width: `${Math.max(0, Math.min(100, left))}%` }} />
+            </div>
+            <em>{formatReset(window.resetsAt)}</em>
+          </div>
+        );
+      }))}
+    </div>
+  );
+}
+
+function formatQuotaLabel(label: string) {
+  return label === "weekly" ? "Weekly limit:" : `${label} limit:`;
+}
+
+function formatReset(resetsAt?: string | null) {
+  if (!resetsAt) return "reset unknown";
+  const date = new Date(resetsAt);
+  if (Number.isNaN(date.getTime())) return "reset unknown";
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const month = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][date.getMonth()];
+  return `resets ${hours}:${minutes} on ${date.getDate()} ${month}`;
+}

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,82 @@
+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 ProviderQuotaSnapshot = {
+  providerId: string;
+  modelId?: string | null;
+  label: string;
+  planType?: string | null;
+  capturedAt: string;
+  limits: Array<{
+    id: string;
+    name: string;
+    windows: Array<{
+      id: string;
+      label: string;
+      usedPercent: number;
+      remainingPercent: number;
+      resetsAt?: string | null;
+    }>;
+  }>;
+};
+
+export type ComposerState = {
+  mode: string;
+  placeholder: string;
+};
+
+export type WebUiModel = {
+  activeSessionId?: string | null;
+  workspace: FileNode;
+  timeline: {
+    title: string;
+    meta: string;
+    events: MarchTimelineEvent[];
+  };
+  sessions: SessionSummary[];
+  providerQuota?: ProviderQuotaSnapshot | null;
+  activity: ActivityEvent[];
+  composer: ComposerState;
+};