npm - march-cli - Versions diffs - 0.1.34 → 0.1.35 - Mend

march-cli 0.1.34 → 0.1.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

package/package.json +12 -1
package/src/agent/lifecycle/runner-lifecycle.mjs +16 -0
package/src/agent/lifecycle/runtime-restart-tool.mjs +22 -0
package/src/agent/runner.mjs +9 -14
package/src/agent/runtime/remote-runner-client.mjs +7 -15
package/src/agent/runtime/runner-ipc-target.mjs +3 -22
package/src/agent/runtime/runner-process-client.mjs +101 -24
package/src/agent/runtime/runner-runtime-host.mjs +2 -0
package/src/agent/runtime/state/runner-state.mjs +80 -0
package/src/agent/session/session-options.mjs +2 -1
package/src/agent/tools.mjs +3 -1
package/src/cli/args.mjs +14 -3
package/src/cli/commands/catalog/visible-commands.mjs +5 -0
package/src/cli/commands/help-command.mjs +1 -7
package/src/cli/commands/registry/slash-command-registry.mjs +293 -0
package/src/cli/input/autocomplete.mjs +2 -25
package/src/cli/repl-loop.mjs +24 -41
package/src/cli/slash-commands.mjs +19 -185
package/src/cli/startup/app-runtime.mjs +201 -0
package/src/cli/startup/configured-command.mjs +9 -0
package/src/cli/startup/early-command.mjs +29 -0
package/src/cli/turn/turn-input-preparer.mjs +41 -0
package/src/main.mjs +47 -242
package/src/web-ui/command.mjs +112 -0
package/src/web-ui/dist/assets/index-BUmhnID4.css +1 -0
package/src/web-ui/dist/assets/index-CtuqTjcB.js +1845 -0
package/src/web-ui/dist/index.html +13 -0
package/src/web-ui/index.html +12 -0
package/src/web-ui/runtime-host.mjs +185 -0
package/src/web-ui/server.mjs +139 -0
package/src/web-ui/session-manager.mjs +109 -0
package/src/web-ui/src/App.tsx +7 -0
package/src/web-ui/src/components/AppShell.tsx +47 -0
package/src/web-ui/src/components/Composer.tsx +47 -0
package/src/web-ui/src/components/FileExplorer.tsx +46 -0
package/src/web-ui/src/components/RightSidebar.tsx +70 -0
package/src/web-ui/src/components/SessionTimeline.tsx +31 -0
package/src/web-ui/src/components/timeline/TimelineBlocks.tsx +109 -0
package/src/web-ui/src/components/timeline/TimelineList.tsx +14 -0
package/src/web-ui/src/fileTreeAdapter.ts +51 -0
package/src/web-ui/src/main.tsx +11 -0
package/src/web-ui/src/mockData.ts +87 -0
package/src/web-ui/src/model.ts +62 -0
package/src/web-ui/src/runtime/client.ts +74 -0
package/src/web-ui/src/runtime/runtimeTimeline.ts +88 -0
package/src/web-ui/src/runtime/useWebRuntime.ts +132 -0
package/src/web-ui/src/styles/shell.css +156 -0
package/src/web-ui/src/styles/tokens.css +116 -0
package/src/web-ui/src/timelineAdapter.ts +43 -0
package/src/web-ui/src/vite-env.d.ts +1 -0
package/src/web-ui/tsconfig.json +20 -0
package/src/web-ui/vite.config.mjs +11 -0

package/src/web-ui/dist/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>March Web</title>
+    <script type="module" crossorigin src="/assets/index-CtuqTjcB.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BUmhnID4.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/src/web-ui/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>March Web</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/src/web-ui/runtime-host.mjs ADDED Viewed

@@ -0,0 +1,185 @@
+import { homedir } from "node:os";
+import { basename, join, resolve } from "node:path";
+import { existsSync, mkdirSync, readdirSync, statSync } from "node:fs";
+import { createMarchAuthStorage } from "../auth/storage.mjs";
+import { createRuntimeRunner } from "../cli/startup/create-runtime-runner.mjs";
+import { createPermissionController, MODE } from "../cli/permissions.mjs";
+import { createCliShellRuntime } from "../shell/cli-runtime.mjs";
+import { MarkdownMemoryStore } from "../memory/markdown-store.mjs";
+import { createMarkdownMemoryTools } from "../memory/markdown-tools.mjs";
+import { resolveMemoryRoot } from "../memory/root.mjs";
+import { defaultProfilePaths, ensureProfileFiles } from "../context/profiles.mjs";
+import { loadOrCreateProjectId } from "../cli/startup/startup-session.mjs";
+import { createWebToolsFromConfig } from "../web/tools.mjs";
+import { createLogger, installProcessLogHandlers } from "../debug/logger.mjs";
+import { createModelContextDumper } from "../debug/model-context-dumper.mjs";
+import { createDesktopTurnNotifier } from "../notification/desktop-notifier.mjs";
+import { discoverProjectExtensionPaths } from "../extensions/discovery.mjs";
+import { loadProjectLifecycleHookManifests } from "../extensions/lifecycle-manifest.mjs";
+import { normalizeRemoteMemorySources } from "../memory/remote/config.mjs";
+import { prepareTurnInput } from "../cli/turn/turn-input-preparer.mjs";
+const MAX_WORKSPACE_DEPTH = 3;
+const MAX_WORKSPACE_ENTRIES = 200;
+export async function createWebRuntimeHost({ args, config, cwd, stateRoot, useRuntimeProcess = true } = {}) {
+  stateRoot ??= join(homedir(), ".march");
+  if (!existsSync(stateRoot)) mkdirSync(stateRoot, { recursive: true });
+  const logger = createLogger({ logDir: join(stateRoot, "logs") });
+  installProcessLogHandlers(logger);
+  const provider = args.provider ?? config.provider ?? null;
+  const model = args.model ?? config.model ?? null;
+  const authConfig = createMarchAuthStorage({ provider: provider ?? "deepseek", providers: config.providers, cwd });
+  if (!authConfig.hasAuth) throw new Error("No providers configured. Run: march provider --config");
+  const projectMarchDir = resolve(cwd, ".march");
+  if (!existsSync(projectMarchDir)) mkdirSync(projectMarchDir, { recursive: true });
+  const memoryRoot = resolveMemoryRoot(config.memoryRoot, stateRoot);
+  const profilePaths = defaultProfilePaths();
+  ensureProfileFiles(profilePaths);
+  const memoryStore = new MarkdownMemoryStore({ root: memoryRoot });
+  const remoteMemorySources = normalizeRemoteMemorySources(config);
+  const memoryTools = createMarkdownMemoryTools(memoryStore, { remoteSources: remoteMemorySources });
+  const shellRuntime = args.shellRuntime ? createCliShellRuntime({ cwd }) : null;
+  const extensionPaths = discoverProjectExtensionPaths(cwd);
+  const lifecycleManifests = loadProjectLifecycleHookManifests(cwd);
+  const contextDumpRoot = resolve(projectMarchDir, "context-dumps", Date.now().toString(36));
+  const modelContextDumper = createModelContextDumper({ enabled: args.dumpContext, rootDir: contextDumpRoot });
+  const permissionController = createPermissionController({ mode: args.permissionMode ?? MODE.BYPASS });
+  const turnNotifier = createDesktopTurnNotifier({ enabled: Boolean(config.notifications?.turnEnd), config: config.notifications });
+  const ui = createHeadlessWebUi();
+  const currentProject = basename(cwd);
+  const namespace = loadOrCreateProjectId(projectMarchDir);
+  const runnerOptions = {
+    cwd,
+    modelId: model,
+    provider,
+    serviceTier: config.serviceTier ?? null,
+    providers: config.providers,
+    config,
+    stateRoot,
+    memoryRoot,
+    profilePaths,
+    namespace,
+    projectMarchDir,
+    extensionPaths,
+    permissionMode: args.permissionMode,
+    shellRuntime: Boolean(shellRuntime),
+    lifecycleHooks: lifecycleManifests.hooks,
+    lifecycleDiagnostics: lifecycleManifests.diagnostics,
+    modelContextDumper: { enabled: args.dumpContext, rootDir: contextDumpRoot },
+    remoteMemorySources,
+  };
+  const runner = await createRuntimeRunner({
+    useRuntimeProcess,
+    runnerOptions,
+    ui,
+    memoryStore,
+    memoryTools,
+    shellRuntime,
+    webTools: createWebToolsFromConfig(config),
+    usePiSessions: true,
+    usePiRuntimeHost: true,
+    authStorage: authConfig.authStorage,
+    permissionController,
+    modelContextDumper,
+    turnNotifier,
+    logger,
+  });
+  let turnRunning = false;
+  return {
+    runner,
+    memoryStore,
+    logger,
+    currentProject,
+    snapshot: () => createWebSnapshot({ cwd, runner, currentProject }),
+    subscribe: (listener) => runner.runtimeUiEvents.on(listener),
+    async runTurn(prompt) {
+      if (turnRunning) throw new Error("A turn is already running");
+      turnRunning = true;
+      const input = prepareTurnInput({ prompt, runner, memoryStore, currentProject });
+      runner.runtimeUiEvents.emit({ type: "web_user_message", text: input.userMessage });
+      try {
+        return await runner.runTurn(input.fullPrompt, input.userMessage, input.runOptions);
+      } finally {
+        turnRunning = false;
+        memoryStore.endTurn();
+      }
+    },
+    abort: () => runner.abort(),
+    async dispose() {
+      await runner.dispose?.();
+      memoryStore.close?.();
+    },
+  };
+}
+export function createHeadlessWebUi() {
+  return {
+    readline: () => Promise.resolve(null), write: () => {}, writeln: () => {},
+    thinkingStart: () => {}, thinkingDelta: () => {}, thinkingEnd: () => {},
+    thinkingBlock: () => {}, toggleLastThinking: () => false,
+    toolStart: () => {}, toolEnd: () => {}, textDelta: () => {},
+    assistantReplyEnd: () => {}, status: () => {}, recall: () => {},
+    clearOutput: () => {}, restoreTranscript: () => {}, setStatusBar: () => {},
+    turnStart: () => {}, turnEnd: () => {}, retryStart: () => {}, retryEnd: () => {},
+    editDiff: () => {}, requestPermission: async () => true,
+    setEscapeHandler: () => {}, setCtrlCHandler: () => {}, setShiftTabHandler: () => {},
+    setCtrlTHandler: () => {}, setCtrlLHandler: () => {}, setPasteImageHandler: () => {},
+    getInputText: () => "", insertTextAtCursor: () => {}, openExternalEditor: () => {},
+    toggleToolOutput: () => false, requestExit: () => {}, close: () => {},
+  };
+}
+export function createWebSnapshot({ cwd, runner, currentProject = basename(cwd) }) {
+  const model = runner.getCurrentModel?.();
+  return {
+    workspace: readWorkspaceTree(cwd),
+    timeline: { title: currentProject, meta: runtimeMeta(model), events: [] },
+    sessions: [{ id: "current", title: runner.engine?.sessionName ?? currentProject, time: "now", active: true }],
+    activity: [{ id: "runtime", action: "runner connected", time: "now" }],
+    composer: { mode: "Chat", placeholder: "Message March…" },
+  };
+}
+function runtimeMeta(model) {
+  return [model?.provider, model?.id].filter(Boolean).join(" · ") || "runner connected";
+}
+function readWorkspaceTree(rootPath) {
+  let count = 0;
+  const rootName = basename(rootPath) || rootPath;
+  return readNode(rootPath, rootName, 0, true);
+  function readNode(path, name, depth, selected = false) {
+    const stat = safeStat(path);
+    const kind = stat?.isDirectory() ? "folder" : "file";
+    const node = { id: path, name, kind, selected };
+    if (kind !== "folder" || depth >= MAX_WORKSPACE_DEPTH || count >= MAX_WORKSPACE_ENTRIES) return node;
+    const children = safeReadDir(path)
+      .filter((entry) => !entry.name.startsWith(".git") && entry.name !== "node_modules")
+      .sort(compareEntries)
+      .slice(0, 80)
+      .map((entry) => {
+        count += 1;
+        return readNode(join(path, entry.name), entry.name, depth + 1);
+      });
+    if (children.length > 0) node.children = children;
+    return node;
+  }
+}
+function safeStat(path) {
+  try { return statSync(path); } catch { return null; }
+}
+function safeReadDir(path) {
+  try { return readdirSync(path, { withFileTypes: true }); } catch { return []; }
+}
+function compareEntries(a, b) {
+  if (a.isDirectory() !== b.isDirectory()) return a.isDirectory() ? -1 : 1;
+  return a.name.localeCompare(b.name);
+}

package/src/web-ui/server.mjs ADDED Viewed

@@ -0,0 +1,139 @@
+import { createReadStream, existsSync, statSync } from "node:fs";
+import { createServer } from "node:http";
+import { extname, join, normalize, sep } from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+const STATIC_ROOT = fileURLToPath(new URL("./dist/", import.meta.url));
+const DEFAULT_PORT = 4174;
+const rootPrefix = (root) => `${normalize(root).replace(/[\\/]$/, "")}${sep}`;
+const mimeTypes = new Map([
+  [".html", "text/html; charset=utf-8"],
+  [".css", "text/css; charset=utf-8"],
+  [".js", "text/javascript; charset=utf-8"],
+  [".svg", "image/svg+xml"],
+]);
+export function createWebUiServer({ root = STATIC_ROOT, runtime = null } = {}) {
+  return createServer(async (req, res) => {
+    if (runtime && req.url?.startsWith("/api/")) {
+      await handleApiRequest(req, res, runtime);
+      return;
+    }
+    serveStaticRequest(req, res, root);
+  });
+}
+export async function handleApiRequest(req, res, runtime) {
+  const { pathname } = new URL(req.url ?? "/", "http://localhost");
+  try {
+    if (req.method === "GET" && pathname === "/api/snapshot") return sendJson(res, runtime.snapshot(getSessionId(req)));
+    if (req.method === "GET" && pathname === "/api/events") return streamRuntimeEvents(req, res, runtime);
+    if (req.method === "GET" && pathname === "/api/sessions") return sendJson(res, { sessions: runtime.listSessions() });
+    if (req.method === "POST" && pathname === "/api/sessions") return sendJson(res, await createRuntimeSession(req, runtime));
+    if (req.method === "GET" && pathname === "/api/fs/roots") return sendJson(res, { roots: runtime.fsRoots() });
+    if (req.method === "GET" && pathname === "/api/fs/list") return sendJson(res, { entries: runtime.fsList(getPathParam(req)) });
+    if (req.method === "POST" && pathname === "/api/turn") return sendJson(res, await runRuntimeTurn(req, runtime));
+    if (req.method === "POST" && pathname === "/api/abort") return sendJson(res, { ok: true, result: runtime.abort(getSessionId(req)) });
+    sendJson(res, { error: "Not found" }, 404);
+  } catch (err) {
+    sendJson(res, { error: err?.message ?? String(err) }, 500);
+  }
+}
+export function resolveStaticPath(root, requestUrl) {
+  const url = new URL(requestUrl, "http://localhost");
+  const pathname = url.pathname === "/" ? "/index.html" : url.pathname;
+  const decoded = decodeURIComponent(pathname);
+  const candidate = normalize(join(root, decoded));
+  return candidate.startsWith(rootPrefix(root)) ? candidate : null;
+}
+function serveStaticRequest(req, res, root) {
+  const filePath = resolveStaticPath(root, req.url ?? "/");
+  if (!filePath) {
+    res.writeHead(403);
+    res.end("Forbidden");
+    return;
+  }
+  if (!existsSync(filePath) || !statSync(filePath).isFile()) {
+    res.writeHead(404);
+    res.end("Not found");
+    return;
+  }
+  const type = mimeTypes.get(extname(filePath)) ?? "application/octet-stream";
+  res.writeHead(200, { "content-type": type });
+  createReadStream(filePath).pipe(res);
+}
+async function createRuntimeSession(req, runtime) {
+  const body = await readJsonBody(req);
+  const session = await runtime.createSession(body.workspacePath);
+  return { ok: true, session, snapshot: runtime.snapshot(session.id) };
+}
+async function runRuntimeTurn(req, runtime) {
+  const body = await readJsonBody(req);
+  const prompt = typeof body.prompt === "string" ? body.prompt.trim() : "";
+  if (!prompt) throw new Error("Missing prompt");
+  const result = await runtime.runTurn(body.sessionId, prompt);
+  return { ok: true, draft: result?.draft ?? "" };
+}
+function streamRuntimeEvents(req, res, runtime) {
+  res.writeHead(200, {
+    "content-type": "text/event-stream; charset=utf-8",
+    "cache-control": "no-cache, no-transform",
+    connection: "keep-alive",
+  });
+  writeSse(res, "ready", { ok: true });
+  const unsubscribe = runtime.subscribe(getSessionId(req), (event) => writeSse(res, "runtime", event));
+  res.on("close", unsubscribe);
+}
+function getSessionId(req) {
+  const url = new URL(req.url ?? "/", "http://localhost");
+  return url.searchParams.get("sessionId");
+}
+function getPathParam(req) {
+  const url = new URL(req.url ?? "/", "http://localhost");
+  const path = url.searchParams.get("path");
+  if (!path) throw new Error("Missing path");
+  return path;
+}
+function writeSse(res, event, data) {
+  res.write(`event: ${event}\n`);
+  res.write(`data: ${JSON.stringify(data)}\n\n`);
+}
+function sendJson(res, data, status = 200) {
+  res.writeHead(status, { "content-type": "application/json; charset=utf-8" });
+  res.end(JSON.stringify(data));
+}
+function readJsonBody(req) {
+  return new Promise((resolve, reject) => {
+    let raw = "";
+    req.setEncoding("utf8");
+    req.on("data", (chunk) => {
+      raw += chunk;
+      if (raw.length > 1_000_000) reject(new Error("Request body too large"));
+    });
+    req.on("end", () => {
+      try { resolve(raw ? JSON.parse(raw) : {}); } catch { reject(new Error("Invalid JSON body")); }
+    });
+    req.on("error", reject);
+  });
+}
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
+  const port = Number.parseInt(process.env.MARCH_WEB_PORT ?? "", 10) || DEFAULT_PORT;
+  createWebUiServer().listen(port, "127.0.0.1", () => {
+    console.log(`March Web preview running at http://127.0.0.1:${port}`);
+  });
+}

package/src/web-ui/session-manager.mjs ADDED Viewed

@@ -0,0 +1,109 @@
+import { readdirSync, statSync } from "node:fs";
+import { homedir } from "node:os";
+import { basename, resolve } from "node:path";
+import { createWebRuntimeHost } from "./runtime-host.mjs";
+export function createWebSessionManager({ args, config, launchCwd, stateRoot, useRuntimeProcess = true } = {}) {
+  const sessions = new Map();
+  const activities = [];
+  let activeSessionId = null;
+  let nextSessionNumber = 1;
+  async function createSession(workspacePath) {
+    const workspace = resolveWorkspace(workspacePath, launchCwd);
+    const id = `session-${Date.now().toString(36)}-${nextSessionNumber++}`;
+    const runtime = await createWebRuntimeHost({ args, config, cwd: workspace, stateRoot, useRuntimeProcess });
+    const session = { id, workspace, title: basename(workspace) || workspace, runtime, createdAt: Date.now() };
+    sessions.set(id, session);
+    activeSessionId = id;
+    activities.unshift({ id: `activity:${id}`, action: `opened ${session.title}`, time: "now" });
+    return toSessionSummary(session, true);
+  }
+  const listSessions = () => Array.from(sessions.values()).map((session) => toSessionSummary(session, session.id === activeSessionId));
+  return {
+    async createSession(workspacePath) { return createSession(workspacePath); },
+    listSessions,
+    snapshot(sessionId = activeSessionId) {
+      const session = getOptionalSession(sessions, sessionId);
+      if (!session) return createEmptySnapshot({ sessions, activeSessionId, activities });
+      const model = session.runtime.snapshot();
+      return { ...model, sessions: listSessions(), activity: activities, activeSessionId: session.id };
+    },
+    subscribe(sessionId, listener) { return getSession(sessions, sessionId).runtime.subscribe(listener); },
+    runTurn(sessionId, prompt) { return getSession(sessions, sessionId).runtime.runTurn(prompt); },
+    abort(sessionId) { return getSession(sessions, sessionId).runtime.abort?.(); },
+    fsRoots() { return listFsRoots(launchCwd); },
+    fsList(path) { return listFsDirectory(path); },
+    async dispose() {
+      await Promise.all(Array.from(sessions.values()).map((session) => session.runtime.dispose?.()));
+      sessions.clear();
+    },
+  };
+}
+export function resolveWorkspace(requested, launchCwd = process.cwd()) {
+  if (!requested || typeof requested !== "string") throw new Error("Missing workspace path");
+  const workspace = resolve(launchCwd, requested);
+  if (!isDirectory(workspace)) throw new Error(`Workspace does not exist or is not a directory: ${workspace}`);
+  return workspace;
+}
+function getSession(sessions, id) {
+  const session = getOptionalSession(sessions, id);
+  if (!session) throw new Error("Session not found");
+  return session;
+}
+function getOptionalSession(sessions, id) {
+  if (!id) return null;
+  return sessions.get(id) ?? null;
+}
+function toSessionSummary(session, active) {
+  return { id: session.id, title: session.title, workspacePath: session.workspace, time: "now", active };
+}
+function createEmptySnapshot({ sessions, activeSessionId, activities }) {
+  return {
+    workspace: { id: "no-workspace", name: "Choose workspace", kind: "folder", selected: true },
+    timeline: { title: "No session selected", meta: "Create a session and bind a workspace", events: [] },
+    sessions: Array.from(sessions.values()).map((session) => toSessionSummary(session, session.id === activeSessionId)),
+    activity: activities,
+    activeSessionId: null,
+    composer: { mode: "No session", placeholder: "Choose a workspace to start…" },
+  };
+}
+function listFsRoots(launchCwd) {
+  const roots = uniquePaths([launchCwd, homedir(), ...windowsDriveRoots()]);
+  return roots.filter(isDirectory).map((path) => ({ name: path, path, kind: "root" }));
+}
+function windowsDriveRoots() {
+  if (process.platform !== "win32") return ["/"];
+  return Array.from({ length: 26 }, (_, index) => `${String.fromCharCode(65 + index)}:\\`);
+}
+function listFsDirectory(path) {
+  const root = resolve(path);
+  if (!isDirectory(root)) throw new Error(`Directory does not exist: ${root}`);
+  return safeReadDir(root)
+    .filter((entry) => entry.isDirectory())
+    .sort((a, b) => a.name.localeCompare(b.name))
+    .slice(0, 500)
+    .map((entry) => ({ name: entry.name, path: resolve(root, entry.name), kind: "directory" }));
+}
+function uniquePaths(paths) {
+  return Array.from(new Set(paths.filter(Boolean).map((path) => resolve(path))));
+}
+function isDirectory(path) {
+  try { return statSync(path).isDirectory(); } catch { return false; }
+}
+function safeReadDir(path) {
+  try { return readdirSync(path, { withFileTypes: true }); } catch { return []; }
+}

package/src/web-ui/src/App.tsx ADDED Viewed

@@ -0,0 +1,7 @@
+import { AppShell } from "./components/AppShell";
+import { useWebRuntime } from "./runtime/useWebRuntime";
+export function App() {
+  const runtime = useWebRuntime();
+  return <AppShell runtime={runtime} />;
+}

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

@@ -0,0 +1,47 @@
+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}
+        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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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>
+  );
+}