@lazyingart/agintiflow 0.20.183 → 0.20.185

package/docs/auxiliary-image-generation.md

@@ -7,6 +7,10 @@ AgInTiFlow separates **skills** from **tools**:
 
 The optional image-generation skills are `image_generation` and `venice_image_generation`. Both use the deterministic `generate_image` tool.
 
+`generate_image` is a raster-image tool. It does not produce true SVG/vector output. If a caller requests `svg`, the tool records
+`requestedFormat: "svg"`, generates a PNG fallback with `actualFormat: "png"`, and returns a `formatNotice`. If the task truly requires
+editable vectors, use AgInTiFlow file tools to write deterministic SVG/LaTeX/HTML instead of calling `generate_image`.
+
 ## Setup
 
 Store a GRS AI or Venice key project-locally:
@@ -38,11 +42,39 @@ For image, cover, poster, illustration, photo, or logo-concept requests, the mod
   "model": "nano-banana-2",
   "outputDir": "artifacts/images/robot-cover",
   "outputStem": "robot-cover",
+  "format": "png",
   "aspectRatio": "1:1",
   "imageSize": "2K"
 }
 ```
 
+For trusted local apps that need image generation without routing through a language-model run, the web server exposes a deterministic endpoint:
+
+```bash
+curl -sS http://127.0.0.1:3210/api/auxiliary/generate-image \
+  -H 'Content-Type: application/json' \
+  -d '{
+    "prompt": "A polished cyan robot painting a circuit-board river",
+    "provider": "venice",
+    "format": "svg",
+    "outputDir": "artifacts/images/robot-cover",
+    "outputStem": "robot-cover"
+  }'
+```
+
+This endpoint is intended for trusted local/server-side callers. Browser apps on another origin should use an explicit adapter/proxy
+rather than relying on permissive CORS, because generation can consume API keys and write workspace artifacts.
+
+That SVG request returns a PNG fallback contract rather than pretending SVG was generated:
+
+```json
+{
+  "requestedFormat": "svg",
+  "actualFormat": "png",
+  "formatNotice": "SVG/vector output is not supported by generate_image. A raster PNG is generated instead."
+}
+```
+
 With GRS AI, the tool uses the Nano Banana API:
 
 - `POST https://grsaiapi.com/v1/draw/nano-banana`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazyingart/agintiflow",
-  "version": "0.20.183",
+  "version": "0.20.185",
   "type": "module",
   "description": "AgInTiFlow is a project-aware agent workspace for hybrid wet-dry R&D, hardware-aware intelligence, software automation, and industrial workflows.",
   "license": "Apache-2.0",

package/public/app.js

@@ -145,6 +145,14 @@ const translations = {
     wrappersOffLabel: "wrapper tools off",
     wrapperCapabilityTitle: "Agent wrappers",
     workspaceCapabilityTitle: "Workspace files",
+    workspaceExplorerTitle: "Workspace explorer",
+    workspaceExplorerHelp: "Browse, classify, drag into chat, and open project files.",
+    workspaceRefreshButton: "Refresh",
+    workspaceAutomapButton: "Auto map",
+    workspaceWorkbenchTitle: "Workspace workbench",
+    workspaceNoFileSelected: "Select a file from the explorer.",
+    workspaceSaveButton: "Save file",
+    workspaceRevertButton: "Revert",
     mcpCapabilityTitle: "MCP servers",
     mcpEmpty: "No MCP servers configured.",
     workspaceToolsLabel: "File tools",
@@ -746,6 +754,19 @@ const wrapperGridEl = document.querySelector("#wrapper-grid");
 const workspaceStatusEl = document.querySelector("#workspace-status");
 const workspaceToolsEl = document.querySelector("#workspace-tools");
 const workspaceChangesEl = document.querySelector("#workspace-changes");
+const workspaceExplorerEl = document.querySelector("#workspace-explorer");
+const workspaceBrowserStatusEl = document.querySelector("#workspace-browser-status");
+const workspaceLanesEl = document.querySelector("#workspace-lanes");
+const workspaceTreeEl = document.querySelector("#workspace-tree");
+const workspaceRefreshButton = document.querySelector("#workspace-refresh");
+const workspaceAutomapButton = document.querySelector("#workspace-automap");
+const workspaceActiveTitleEl = document.querySelector("#workspace-active-title");
+const workspaceActiveMetaEl = document.querySelector("#workspace-active-meta");
+const workspacePreviewEl = document.querySelector("#workspace-preview");
+const workspaceEditorEl = document.querySelector("#workspace-editor");
+const workspaceSaveButton = document.querySelector("#workspace-save");
+const workspaceRevertButton = document.querySelector("#workspace-revert");
+const workspaceEditorStatusEl = document.querySelector("#workspace-editor-status");
 const mcpStatusEl = document.querySelector("#mcp-status");
 const mcpGridEl = document.querySelector("#mcp-grid");
 const mcpWarningsEl = document.querySelector("#mcp-warnings");
@@ -835,6 +856,31 @@ let currentArtifactTab = "canvas";
 let artifactUnreadCount = 0;
 let lastAnnouncedRunKey = "";
 let quickVeniceModeActive = false;
+const WORKSPACE_LANES = [
+  { id: "all", label: "All" },
+  { id: "source", label: "Source" },
+  { id: "scripts", label: "Scripts" },
+  { id: "docs", label: "Docs" },
+  { id: "data", label: "Data" },
+  { id: "media", label: "Media" },
+  { id: "references", label: "Refs" },
+  { id: "artifacts", label: "Artifacts" },
+  { id: "logs", label: "Logs" },
+  { id: "other", label: "Other" },
+];
+let workspaceBrowser = {
+  root: "",
+  files: [],
+  warnings: [],
+  activeLane: "all",
+  activePath: "",
+  activeContent: "",
+  savedContent: "",
+  overrides: {},
+  loading: false,
+  error: "",
+  initialized: false,
+};
 
 function normalizeLanguage(language) {
   const lower = String(language || "").toLowerCase();
@@ -1156,6 +1202,278 @@ function renderWorkspacePanel(workspace = lastWorkspace, activity = lastWorkspac
     .join("");
 }
 
+function workspaceRoot() {
+  return commandCwdField?.value.trim() || projectInfo?.commandCwd || projectInfo?.root || "";
+}
+
+function workspaceExt(filePath = "") {
+  const name = String(filePath || "").toLowerCase();
+  const index = name.lastIndexOf(".");
+  return index >= 0 ? name.slice(index) : "";
+}
+
+function workspaceDir(filePath = "") {
+  const normalized = String(filePath || "").replace(/\\/g, "/");
+  const index = normalized.lastIndexOf("/");
+  return index >= 0 ? normalized.slice(0, index) : "";
+}
+
+function workspaceBaseName(filePath = "") {
+  return String(filePath || "").replace(/\\/g, "/").split("/").filter(Boolean).pop() || filePath;
+}
+
+function inferWorkspaceLane(file = {}) {
+  const filePath = String(file.path || "").toLowerCase();
+  const first = filePath.split("/")[0] || "";
+  const ext = workspaceExt(filePath);
+  if (workspaceBrowser.overrides[file.path]) return workspaceBrowser.overrides[file.path];
+  if (["artifacts", "runs", "outputs", "reports"].includes(first)) return "artifacts";
+  if (["logs", "log", "events"].includes(first) || ext === ".log") return "logs";
+  if (["data", "datasets", "tables"].includes(first) || [".csv", ".tsv", ".jsonl", ".xlsx", ".parquet"].includes(ext)) return "data";
+  if (["docs", "doc", "references", "reference"].includes(first) || [".md", ".txt", ".tex", ".rst"].includes(ext)) return "docs";
+  if (["refs", "bibliography"].includes(first) || [".bib", ".ris", ".enw"].includes(ext)) return "references";
+  if (["scripts", "bin"].includes(first) || [".py", ".r", ".sh", ".m", ".pl"].includes(ext)) return "scripts";
+  if ([".png", ".jpg", ".jpeg", ".gif", ".webp", ".svg", ".pdf", ".mp4", ".mov", ".wav", ".mp3"].includes(ext)) return "media";
+  if ([".js", ".mjs", ".ts", ".tsx", ".jsx", ".css", ".html", ".go", ".rs", ".c", ".cpp", ".h", ".hpp", ".java", ".rb", ".php", ".lua"].includes(ext)) {
+    return "source";
+  }
+  return "other";
+}
+
+function workspaceFilesByLane() {
+  const groups = Object.fromEntries(WORKSPACE_LANES.map((lane) => [lane.id, []]));
+  for (const file of workspaceBrowser.files) {
+    groups.all.push(file);
+    const lane = inferWorkspaceLane(file);
+    if (!groups[lane]) groups.other.push(file);
+    else groups[lane].push(file);
+  }
+  return groups;
+}
+
+function workspaceActiveFile() {
+  return workspaceBrowser.files.find((file) => file.path === workspaceBrowser.activePath) || null;
+}
+
+function formatBytes(size = 0) {
+  const value = Number(size || 0);
+  if (value < 1024) return `${value} B`;
+  if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)} KB`;
+  return `${(value / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function workspaceRawUrl(filePath = "") {
+  const params = new URLSearchParams({ commandCwd: workspaceBrowser.root || workspaceRoot(), path: filePath });
+  return `/api/workspace/raw?${params.toString()}`;
+}
+
+function setWorkspaceEditorStatus(message = "", kind = "info") {
+  if (!workspaceEditorStatusEl) return;
+  workspaceEditorStatusEl.textContent = message;
+  workspaceEditorStatusEl.dataset.kind = kind;
+}
+
+function renderWorkspaceExplorer() {
+  if (!workspaceExplorerEl || !workspaceLanesEl || !workspaceTreeEl || !workspaceBrowserStatusEl) return;
+  const groups = workspaceFilesByLane();
+  const activeLane = workspaceBrowser.activeLane || "all";
+  const warnings = workspaceBrowser.warnings?.length ? ` · ${workspaceBrowser.warnings.length} warning(s)` : "";
+  const truncated = workspaceBrowser.truncated ? " · truncated" : "";
+  const status = workspaceBrowser.loading
+    ? "Loading workspace..."
+    : workspaceBrowser.error
+      ? `Workspace unavailable: ${workspaceBrowser.error}`
+      : `${workspaceBrowser.files.length} files · ${workspaceBrowser.root || workspaceRoot()}${warnings}${truncated}`;
+  workspaceBrowserStatusEl.textContent = status;
+
+  workspaceLanesEl.innerHTML = WORKSPACE_LANES.map((lane) => {
+    const count = groups[lane.id]?.length || 0;
+    return `
+      <button
+        type="button"
+        class="workspace-lane"
+        data-workspace-lane="${escapeHtml(lane.id)}"
+        data-selected="${lane.id === activeLane}"
+        title="Drop a file here to classify it as ${escapeHtml(lane.label)}"
+      >
+        <span>${escapeHtml(lane.label)}</span>
+        <strong>${count}</strong>
+      </button>
+    `;
+  }).join("");
+
+  const visibleFiles = (groups[activeLane] || []).slice().sort((left, right) => left.path.localeCompare(right.path));
+  if (!visibleFiles.length) {
+    workspaceTreeEl.innerHTML = `<p class="subtle workspace-empty">No files in this category.</p>`;
+    return;
+  }
+
+  workspaceTreeEl.innerHTML = visibleFiles
+    .map((file) => {
+      const lane = inferWorkspaceLane(file);
+      const active = file.path === workspaceBrowser.activePath;
+      const meta = [lane, formatBytes(file.size), file.binary ? "binary" : "text"].join(" · ");
+      return `
+        <button
+          type="button"
+          class="workspace-file-row"
+          data-workspace-file="${escapeHtml(file.path)}"
+          data-selected="${active}"
+          draggable="true"
+        >
+          <span class="workspace-file-main">
+            <strong>${escapeHtml(workspaceBaseName(file.path))}</strong>
+            <small>${escapeHtml(workspaceDir(file.path) || ".")}</small>
+          </span>
+          <span class="workspace-file-meta">${escapeHtml(meta)}</span>
+        </button>
+      `;
+    })
+    .join("");
+}
+
+function renderWorkspaceWorkbench() {
+  if (!workspaceActiveTitleEl || !workspaceActiveMetaEl || !workspacePreviewEl || !workspaceEditorEl) return;
+  const file = workspaceActiveFile();
+  const dirty = workspaceBrowser.activeContent !== workspaceBrowser.savedContent;
+
+  if (!file) {
+    workspaceActiveTitleEl.textContent = t("workspaceNoFileSelected");
+    workspaceActiveMetaEl.textContent = t("workspaceNoFileSelected");
+    workspacePreviewEl.innerHTML = `<p class="subtle">${t("workspaceNoFileSelected")}</p>`;
+    workspaceEditorEl.hidden = true;
+    if (workspaceSaveButton) workspaceSaveButton.disabled = true;
+    if (workspaceRevertButton) workspaceRevertButton.disabled = true;
+    setWorkspaceEditorStatus("");
+    return;
+  }
+
+  workspaceActiveTitleEl.textContent = file.path;
+  workspaceActiveMetaEl.textContent = `${inferWorkspaceLane(file)} · ${formatBytes(file.size)} · ${
+    file.binary ? "preview-only" : dirty ? "edited" : "saved"
+  }`;
+
+  const ext = workspaceExt(file.path);
+  const rawUrl = workspaceRawUrl(file.path);
+  if (file.binary) {
+    workspaceEditorEl.hidden = true;
+    if ([".png", ".jpg", ".jpeg", ".gif", ".webp", ".svg"].includes(ext)) {
+      workspacePreviewEl.innerHTML = `<img class="workspace-media-preview" src="${escapeHtml(rawUrl)}" alt="${escapeHtml(file.path)}" />`;
+    } else if (ext === ".pdf") {
+      workspacePreviewEl.innerHTML = `<iframe class="workspace-pdf-preview" src="${escapeHtml(rawUrl)}" title="${escapeHtml(file.path)}"></iframe>`;
+    } else {
+      workspacePreviewEl.innerHTML = `<p class="subtle">Binary file preview is unavailable. Use the raw file path or artifact canvas for specialized previews.</p>`;
+    }
+    if (workspaceSaveButton) workspaceSaveButton.disabled = true;
+    if (workspaceRevertButton) workspaceRevertButton.disabled = true;
+    setWorkspaceEditorStatus("Preview-only binary file.");
+    return;
+  }
+
+  workspacePreviewEl.innerHTML = `<pre class="workspace-code-preview">${escapeHtml(workspaceBrowser.activeContent).slice(
+    0,
+    12000
+  )}</pre>`;
+  workspaceEditorEl.hidden = false;
+  if (document.activeElement !== workspaceEditorEl && workspaceEditorEl.value !== workspaceBrowser.activeContent) {
+    workspaceEditorEl.value = workspaceBrowser.activeContent;
+  }
+  if (workspaceSaveButton) workspaceSaveButton.disabled = !dirty;
+  if (workspaceRevertButton) workspaceRevertButton.disabled = !dirty;
+  setWorkspaceEditorStatus(dirty ? "Unsaved editor changes." : "File loaded.");
+}
+
+function renderWorkspaceBrowser() {
+  renderWorkspaceExplorer();
+  renderWorkspaceWorkbench();
+}
+
+async function refreshWorkspaceSnapshot({ preserveActive = true } = {}) {
+  if (!workspaceExplorerEl) return;
+  workspaceBrowser.loading = true;
+  workspaceBrowser.error = "";
+  renderWorkspaceExplorer();
+  try {
+    const response = await fetch("/api/workspace/snapshot", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ commandCwd: workspaceRoot() }),
+    });
+    const data = await response.json().catch(() => ({}));
+    if (!response.ok) throw new Error(data.error || "Workspace snapshot failed.");
+    workspaceBrowser = {
+      ...workspaceBrowser,
+      root: data.root || workspaceRoot(),
+      files: data.files || [],
+      warnings: data.warnings || [],
+      truncated: Boolean(data.truncated),
+      loading: false,
+      error: "",
+      initialized: true,
+    };
+    if (!preserveActive || !workspaceBrowser.files.some((file) => file.path === workspaceBrowser.activePath)) {
+      workspaceBrowser.activePath = workspaceBrowser.files.find((file) => !file.binary)?.path || workspaceBrowser.files[0]?.path || "";
+      const active = workspaceActiveFile();
+      workspaceBrowser.activeContent = active?.content || "";
+      workspaceBrowser.savedContent = active?.content || "";
+    } else {
+      const active = workspaceActiveFile();
+      if (!active?.binary && workspaceBrowser.activeContent === workspaceBrowser.savedContent) {
+        workspaceBrowser.activeContent = active?.content || "";
+        workspaceBrowser.savedContent = active?.content || "";
+      }
+    }
+  } catch (error) {
+    workspaceBrowser.loading = false;
+    workspaceBrowser.error = error instanceof Error ? error.message : String(error);
+  }
+  renderWorkspaceBrowser();
+}
+
+function selectWorkspaceFile(filePath = "") {
+  const file = workspaceBrowser.files.find((item) => item.path === filePath);
+  if (!file) return;
+  workspaceBrowser.activePath = file.path;
+  workspaceBrowser.activeContent = file.content || "";
+  workspaceBrowser.savedContent = file.content || "";
+  renderWorkspaceBrowser();
+}
+
+async function saveWorkspaceEditor() {
+  const file = workspaceActiveFile();
+  if (!file || file.binary || !workspaceEditorEl) return;
+  const content = workspaceEditorEl.value;
+  setWorkspaceEditorStatus("Saving...");
+  const response = await fetch("/api/workspace/write", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ commandCwd: workspaceBrowser.root || workspaceRoot(), path: file.path, content }),
+  });
+  const data = await response.json().catch(() => ({}));
+  if (!response.ok) {
+    setWorkspaceEditorStatus(data.error || "Save failed.", "error");
+    return;
+  }
+  workspaceBrowser.activeContent = content;
+  workspaceBrowser.savedContent = content;
+  showToast(`Saved ${file.path}.`);
+  await refreshWorkspaceSnapshot({ preserveActive: true });
+}
+
+function revertWorkspaceEditor() {
+  workspaceBrowser.activeContent = workspaceBrowser.savedContent;
+  if (workspaceEditorEl) workspaceEditorEl.value = workspaceBrowser.savedContent;
+  renderWorkspaceWorkbench();
+}
+
+function insertWorkspaceReference(filePath = "") {
+  if (!chatInputEl || !filePath) return;
+  const reference = `@file ${filePath}`;
+  const current = chatInputEl.value.trimEnd();
+  chatInputEl.value = current ? `${current}\n${reference}` : reference;
+  chatInputEl.focus();
+}
+
 function renderMcpPanel(mcp = lastMcp) {
   lastMcp = mcp || null;
   if (!mcpStatusEl || !mcpGridEl || !mcpWarningsEl) return;
@@ -1663,6 +1981,7 @@ function applyLanguage(language, { persist = true } = {}) {
   renderProjectStatus();
   renderWrapperStatus();
   renderWorkspacePanel();
+  renderWorkspaceBrowser();
   renderSandboxStatus();
   updateRoutingHint();
   updatePermissionHint();
@@ -3085,6 +3404,7 @@ async function refreshRun() {
     await refreshChat();
     await refreshSessions();
     await refreshWorkspaceChanges();
+    await refreshWorkspaceSnapshot({ preserveActive: true });
     await refreshArtifacts({ loadSelected: artifactTunnelDialog?.open });
     if (run.status === "finished") await flushAfterFinishQueue();
   }
@@ -3335,6 +3655,7 @@ async function startRunFromGoal(goal, { clearComposer = false } = {}) {
   sessionSelectEl.value = currentSessionId;
   await refreshChat();
   await refreshWorkspaceChanges();
+  await refreshWorkspaceSnapshot({ preserveActive: true });
   await refreshArtifacts({ loadSelected: artifactTunnelDialog?.open });
 
   if (pollTimer) clearInterval(pollTimer);
@@ -3589,6 +3910,77 @@ commandCwdField?.addEventListener("input", () => {
 commandCwdField?.addEventListener("change", () => {
   schedulePreferenceSave();
   refreshCommandCwdSuggestions(commandCwdField.value).catch(() => {});
+  refreshWorkspaceSnapshot({ preserveActive: false }).catch(() => {});
+});
+
+workspaceRefreshButton?.addEventListener("click", () => {
+  refreshWorkspaceSnapshot({ preserveActive: true }).catch((error) => {
+    setWorkspaceEditorStatus(String(error), "error");
+  });
+});
+
+workspaceAutomapButton?.addEventListener("click", () => {
+  workspaceBrowser.overrides = {};
+  renderWorkspaceBrowser();
+  showToast("Workspace files auto-mapped by general category.");
+});
+
+workspaceLanesEl?.addEventListener("click", (event) => {
+  const button = event.target.closest("[data-workspace-lane]");
+  if (!button) return;
+  workspaceBrowser.activeLane = button.dataset.workspaceLane || "all";
+  renderWorkspaceBrowser();
+});
+
+workspaceLanesEl?.addEventListener("dragover", (event) => {
+  if (event.target.closest("[data-workspace-lane]")) event.preventDefault();
+});
+
+workspaceLanesEl?.addEventListener("drop", (event) => {
+  const button = event.target.closest("[data-workspace-lane]");
+  const filePath = event.dataTransfer?.getData("text/agintiflow-workspace-file") || event.dataTransfer?.getData("text/plain");
+  const lane = button?.dataset.workspaceLane;
+  if (!button || !filePath || !lane || lane === "all") return;
+  event.preventDefault();
+  workspaceBrowser.overrides[filePath] = lane;
+  workspaceBrowser.activeLane = lane;
+  renderWorkspaceBrowser();
+});
+
+workspaceTreeEl?.addEventListener("click", (event) => {
+  const row = event.target.closest("[data-workspace-file]");
+  if (!row) return;
+  selectWorkspaceFile(row.dataset.workspaceFile || "");
+});
+
+workspaceTreeEl?.addEventListener("dragstart", (event) => {
+  const row = event.target.closest("[data-workspace-file]");
+  if (!row || !event.dataTransfer) return;
+  event.dataTransfer.setData("text/agintiflow-workspace-file", row.dataset.workspaceFile || "");
+  event.dataTransfer.setData("text/plain", row.dataset.workspaceFile || "");
+  event.dataTransfer.effectAllowed = "copyMove";
+});
+
+workspaceEditorEl?.addEventListener("input", () => {
+  workspaceBrowser.activeContent = workspaceEditorEl.value;
+  renderWorkspaceWorkbench();
+});
+
+workspaceSaveButton?.addEventListener("click", () => {
+  saveWorkspaceEditor().catch((error) => setWorkspaceEditorStatus(String(error), "error"));
+});
+
+workspaceRevertButton?.addEventListener("click", revertWorkspaceEditor);
+
+chatInputEl?.addEventListener("dragover", (event) => {
+  if (event.dataTransfer?.types?.includes("text/agintiflow-workspace-file")) event.preventDefault();
+});
+
+chatInputEl?.addEventListener("drop", (event) => {
+  const filePath = event.dataTransfer?.getData("text/agintiflow-workspace-file");
+  if (!filePath) return;
+  event.preventDefault();
+  insertWorkspaceReference(filePath);
 });
 
 chatInputEl.addEventListener("keydown", (event) => {
@@ -3724,6 +4116,7 @@ chatFormEl.addEventListener("submit", async (event) => {
   await refreshSessions();
   await refreshChat();
   await refreshWorkspaceChanges();
+  await refreshWorkspaceSnapshot({ preserveActive: true });
   await refreshArtifacts({ loadSelected: artifactTunnelDialog?.open });
 
   if (pollTimer) clearInterval(pollTimer);
@@ -3835,6 +4228,7 @@ async function loadConfig() {
   renderWorkspacePanel(data.workspace, []);
   renderMcpPanel(data.mcp || null);
   await refreshWorkspaceChanges();
+  await refreshWorkspaceSnapshot({ preserveActive: false });
   renderSandboxLogs(data.sandbox?.logs || []);
   if (quickVeniceModeActive) applyVeniceMode(true);
   updateRoutingHint();

package/public/index.html

@@ -223,6 +223,22 @@
           <button id="open-settings" type="button" class="secondary settings-button">Advanced settings</button>
           </form>
         </details>
+
+        <section id="workspace-explorer" class="workspace-explorer-card" aria-labelledby="workspace-explorer-title">
+          <div class="workspace-explorer-head">
+            <div>
+              <h2 id="workspace-explorer-title" data-i18n="workspaceExplorerTitle">Workspace explorer</h2>
+              <p class="subtle" data-i18n="workspaceExplorerHelp">Browse, classify, drag into chat, and open project files.</p>
+            </div>
+            <div class="workspace-explorer-actions">
+              <button id="workspace-refresh" type="button" class="secondary" data-i18n="workspaceRefreshButton">Refresh</button>
+              <button id="workspace-automap" type="button" class="secondary" data-i18n="workspaceAutomapButton">Auto map</button>
+            </div>
+          </div>
+          <div id="workspace-browser-status" class="subtle workspace-browser-status" aria-live="polite">Loading workspace...</div>
+          <div id="workspace-lanes" class="workspace-lanes" aria-label="Workspace file categories"></div>
+          <div id="workspace-tree" class="workspace-tree" aria-live="polite"></div>
+        </section>
       </section>
 
       <section class="stack">
@@ -306,6 +322,23 @@
           <div id="chat-pending" class="chat-pending" hidden></div>
         </section>
 
+        <section id="workspace-workbench" class="panel workspace-workbench">
+          <div class="header-row">
+            <div>
+              <h2 data-i18n="workspaceWorkbenchTitle">Workspace workbench</h2>
+              <p id="workspace-active-meta" class="subtle" data-i18n="workspaceNoFileSelected">Select a file from the explorer.</p>
+            </div>
+            <div class="workspace-editor-actions">
+              <button id="workspace-revert" type="button" class="secondary" disabled data-i18n="workspaceRevertButton">Revert</button>
+              <button id="workspace-save" type="button" disabled data-i18n="workspaceSaveButton">Save file</button>
+            </div>
+          </div>
+          <div id="workspace-active-title" class="workspace-active-title" data-i18n="workspaceNoFileSelected">Select a file from the explorer.</div>
+          <div id="workspace-preview" class="workspace-preview"></div>
+          <textarea id="workspace-editor" class="workspace-editor" spellcheck="false" hidden></textarea>
+          <div id="workspace-editor-status" class="subtle workspace-editor-status"></div>
+        </section>
+
         <section class="panel output-panel">
           <div class="header-row">
             <h2 data-i18n="runOutputTitle">Run output</h2>