@uniqbit/mate-core 0.17.0-canary.9 → 0.17.1

package/src/cli/commands/studio/views/selection-fields.tsx

@@ -0,0 +1,14 @@
+/** @jsxImportSource hono/jsx */
+
+import { type StudioSelection, toFields } from "../selection";
+
+/** The hidden fields of a control's GET form: the whole selection it leads to. */
+export function SelectionFields({ selection }: { selection: StudioSelection }) {
+  return (
+    <>
+      {toFields(selection).map(({ name, value }) => (
+        <input key={name} type="hidden" name={name} value={value} />
+      ))}
+    </>
+  );
+}

package/src/cli/commands/studio/views/styles.ts

@@ -112,7 +112,6 @@ body {
   flex-direction: column;
   gap: 24px;
 }
-.pairings li { padding: 6px 0; font-size: .84rem; }
 select, button {
   font: inherit;
   color: inherit;
@@ -234,9 +233,6 @@ ul.plain li:last-child { border-bottom: 0; }
 .sidebar-label { color: var(--muted); font-size: .62rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
 .sidebar-scope { display: grid; gap: 7px; }
 .sidebar-scope select { padding: 8px 9px; font-family: var(--mono); font-size: .72rem; }
-.sidebar-pairings { color: var(--muted); font-family: var(--mono); font-size: .67rem; line-height: 1.45; }
-.sidebar-pairings .plain li { padding: 4px 0; }
-.sidebar-pairings .muted { font-size: .67rem; }
 .sidebar-nav { display: grid; gap: 3px; }
 .sidebar-nav-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
 .sidebar-nav button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 10px; border-color: transparent; border-radius: 7px; background: transparent; font-size: .8rem; }
@@ -360,22 +356,55 @@ ul.plain li:last-child { border-bottom: 0; }
 .workflow-option small { color: var(--muted); font-size: .65rem; line-height: 1.35; }
 .workflow-option .runway-step-copy { justify-self: start; }
 
-.vault-layout { display: grid; grid-template-columns: minmax(190px, .34fr) minmax(0, 1fr); gap: 16px; align-items: start; }
-.vault-tree-panel, .vault-editor-panel { min-width: 0; }
-.vault-tree-panel nav { display: grid; gap: 2px; }
-.vault-directory { color: var(--muted); font-family: var(--mono); font-size: .75rem; }
-.vault-directory summary { cursor: pointer; padding: 5px 4px; }
-.vault-children { display: grid; gap: 2px; padding-left: 12px; }
+.vault-layout { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
+:root[data-vault-tree="hidden"] .vault-layout { grid-template-columns: minmax(0, 1fr); }
+:root[data-vault-tree="hidden"] .vault-tree-panel { display: none; }
+.vault-tree-panel, .vault-main, .vault-editor-panel { min-width: 0; }
+.vault-tree-panel { position: sticky; top: 16px; display: grid; gap: 10px; max-height: calc(100vh - 32px); overflow: auto; padding: 12px; }
+.vault-tree-head { display: flex; align-items: center; justify-content: space-between; font-size: .86rem; }
+.vault-filter { width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-soft); color: var(--text); font-size: .8rem; }
+.vault-filter:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
+.vault-tree { display: grid; gap: 1px; }
+.vault-icon { position: relative; flex: none; box-sizing: border-box; }
+.vault-icon-folder { width: 15px; height: 11px; margin-top: 2px; border-radius: 1px 2px 2px 2px; background: var(--accent); }
+.vault-icon-folder::before { content: ""; position: absolute; top: -2px; left: 0; width: 6px; height: 3px; border-radius: 1px 1px 0 0; background: var(--accent); }
+.vault-icon-file { width: 11px; height: 14px; margin: 0 2px; border: 1.5px solid var(--muted); border-radius: 1px 4px 1px 1px; }
+.vault-chevron { flex: none; box-sizing: border-box; width: 7px; height: 7px; margin: 0 3px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .12s ease; }
+.vault-directory[open] > summary .vault-chevron { transform: rotate(45deg); }
+.vault-directory > summary { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; list-style: none; color: var(--text); cursor: pointer; font-size: .8rem; }
+.vault-directory > summary::-webkit-details-marker { display: none; }
+.vault-directory > summary:hover, .vault-directory > summary[aria-current="page"] { background: var(--accent-soft); }
+.vault-children { display: grid; gap: 1px; margin-left: 11px; padding-left: 8px; border-left: 1px solid var(--border-soft); }
 .vault-file { display: contents; }
-.vault-file button { width: 100%; overflow: hidden; padding: 6px 8px; border-color: transparent; background: transparent; color: var(--text); font-family: var(--mono); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
-.vault-file button:hover, .vault-file button[aria-current="page"] { border-color: var(--border); background: var(--accent-soft); color: var(--accent); }
+.vault-file[hidden], .vault-directory[hidden] { display: none; }
+.vault-file button { display: flex; align-items: center; gap: 6px; width: 100%; overflow: hidden; padding: 4px 6px 4px 24px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font-size: .8rem; text-align: left; white-space: nowrap; }
+.vault-file button span, .vault-directory > summary span { overflow: hidden; text-overflow: ellipsis; }
+.vault-file button:hover { background: var(--accent-soft); }
+.vault-file button[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
+.vault-bar { display: flex; align-items: center; gap: 12px; min-height: 36px; margin-bottom: 12px; }
+.vault-tree-toggle { flex: none; padding: 5px 10px; font-size: .78rem; }
+.vault-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-size: .95rem; }
+.vault-breadcrumb li { display: flex; align-items: center; }
+.vault-breadcrumb li + li::before { content: "/"; padding: 0 6px; color: var(--muted); }
+.vault-breadcrumb [aria-current="page"] { font-weight: 600; }
+.vault-crumb { display: contents; }
+.vault-crumb button { padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; cursor: pointer; }
+.vault-crumb button:hover { text-decoration: underline; }
+.vault-listing { padding: 0; overflow: hidden; }
+.vault-listing > p { margin: 0; padding: 12px 16px; }
+.vault-rows { margin: 0; padding: 0; list-style: none; }
+.vault-rows li + li { border-top: 1px solid var(--border-soft); }
+.vault-row { display: contents; }
+.vault-row button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 16px; border: 0; border-radius: 0; background: transparent; color: var(--text); font-size: .86rem; text-align: left; }
+.vault-row button:hover { background: var(--panel-soft); }
+.vault-row button:hover span { color: var(--accent); text-decoration: underline; }
 .vault-warning { color: var(--warn); }
 #vault-editor { display: block; width: 100%; min-height: 62vh; resize: vertical; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--prompt-bg); color: var(--prompt-text); font-family: var(--mono); font-size: .86rem; line-height: 1.6; }
 #vault-editor:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
 #vault-editor[readonly] { cursor: default; opacity: .85; }
 .vault-incoming { display: grid; gap: 8px; margin-top: 16px; padding: 12px; border: 1px solid var(--warn); border-radius: 8px; background: var(--warn-soft); }
 .vault-incoming pre { max-height: 220px; overflow: auto; margin: 0; white-space: pre-wrap; font-family: var(--mono); font-size: .78rem; }
-@media (max-width: 800px) { .vault-layout { grid-template-columns: 1fr; } }
+@media (max-width: 800px) { .vault-layout { grid-template-columns: 1fr; } .vault-tree-panel { position: static; max-height: 50vh; } }
 
 @media (max-width: 650px) {
   .workflow-console-header { grid-template-columns: 1fr auto; }
@@ -403,4 +432,68 @@ ul.plain li:last-child { border-bottom: 0; }
   .lookup-table tbody tr:hover td { background: transparent; }
   .lookup-table .bar { width: 100%; max-width: 180px; }
 }
+
+/** Agent terminal sidebar: every rule is scoped so a page without the terminal is unchanged. */
+.terminal-sidebar {
+  --terminal-strip: 44px;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  min-width: 0;
+  display: flex;
+  background: var(--bg-rail);
+  border-left: 1px solid var(--border);
+}
+.terminal-resize { position: absolute; top: 0; bottom: 0; left: -4px; width: 8px; cursor: col-resize; touch-action: none; z-index: 2; }
+.terminal-resize:hover { background: var(--accent-soft); }
+.terminal-strip { display: none; flex-direction: column; align-items: center; gap: 12px; width: 100%; padding: 14px 0; }
+.terminal-body { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; min-height: 0; padding: 16px 14px 14px; }
+.terminal-head { display: grid; gap: 8px; }
+.terminal-title { display: flex; align-items: center; gap: 8px; }
+.terminal-title h2 { flex: 1; margin: 0; font-size: 15px; }
+.terminal-icon-button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; font-size: 16px; line-height: 1; text-align: center; }
+#terminal-drawer-close { display: none; }
+.terminal-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
+.terminal-sidebar[data-terminal-state="connected"] .terminal-dot { background: var(--done); }
+.terminal-sidebar[data-terminal-state="reconnecting"] .terminal-dot { background: var(--warn); }
+.terminal-sidebar[data-terminal-state="detached"] .terminal-dot { background: var(--bad); }
+.terminal-target { margin: 0; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
+.terminal-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.terminal-actions .button { padding: 6px 9px; font-size: .78rem; }
+.terminal-status { margin: 0; color: var(--muted); font-size: 12px; }
+.terminal-view { flex: 1; min-height: 160px; background: #000; border-radius: 8px; padding: 6px; overflow: hidden; }
+.terminal-sessions-footer { flex: none; display: grid; gap: 6px; max-height: 28vh; overflow-y: auto; }
+.terminal-sessions-title { margin: 0; font-size: 12px; color: var(--muted); }
+.terminal-sessions { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
+.terminal-sessions li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .75rem; }
+.terminal-sessions .button { padding: 4px 8px; font-size: .72rem; }
+.terminal-drawer-open { display: none; }
+
+@media (min-width: 1201px) {
+  .shell[data-terminal] { grid-template-columns: 260px minmax(0, 1fr) clamp(360px, var(--terminal-width, min(560px, 40vw)), 70vw); }
+  :root[data-terminal-collapsed] .shell[data-terminal] { grid-template-columns: 260px minmax(0, 1fr) var(--terminal-strip, 44px); }
+  :root[data-terminal-collapsed] .shell[data-terminal] .terminal-body,
+  :root[data-terminal-collapsed] .shell[data-terminal] .terminal-resize { display: none; }
+  :root[data-terminal-collapsed] .shell[data-terminal] .terminal-strip { display: flex; }
+}
+
+/** Below the side-by-side breakpoint the sidebar is an off-canvas drawer; collapse does not apply. */
+@media (max-width: 1200px) {
+  .shell[data-terminal] .terminal-sidebar {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: min(92vw, clamp(360px, var(--terminal-width, min(560px, 40vw)), 70vw));
+    height: 100vh;
+    z-index: 30;
+    box-shadow: var(--shadow);
+    transform: translateX(100%);
+    visibility: hidden;
+    transition: transform .2s, visibility .2s;
+  }
+  .shell[data-terminal] .terminal-sidebar[data-drawer-open] { transform: none; visibility: visible; }
+  .shell[data-terminal] #terminal-collapse { display: none; }
+  .shell[data-terminal] #terminal-drawer-close { display: grid; }
+  .terminal-drawer-open { display: block; position: fixed; right: 18px; bottom: 18px; z-index: 25; box-shadow: var(--shadow); }
+}
 `;

package/src/cli/commands/studio/views/terminal.tsx

@@ -0,0 +1,426 @@
+/** @jsxImportSource hono/jsx */
+
+import type { TerminalAgent } from "../terminal";
+import type { StudioTerminalPage } from "./model";
+
+export const TERMINAL_TAB_KEY = "mate-studio-terminal-tab";
+export const TERMINAL_SESSION_KEY = "mate-studio-terminal-session";
+
+const AGENT_LABELS: Record<TerminalAgent, string> = {
+  claude: "Claude Code",
+  opencode: "OpenCode",
+};
+
+export const TERMINAL_WIDTH_KEY = "mate-studio-terminal-width";
+export const TERMINAL_COLLAPSED_KEY = "mate-studio-terminal-collapsed";
+const TERMINAL_MIN_WIDTH = 360;
+const TERMINAL_MAX_WIDTH_RATIO = 0.7;
+
+/** Shared by the prepaint and sidebar scripts so both clamp alike. */
+const CLAMP_WIDTH_SOURCE = `function clampWidth(px) {
+    return Math.round(Math.max(${TERMINAL_MIN_WIDTH}, Math.min(px, window.innerWidth * ${TERMINAL_MAX_WIDTH_RATIO})));
+  }`;
+
+/**
+ * A direct grid child of `.shell`: sticky positioning breaks under an ancestor
+ * that sets `overflow`, and `.main` is not guaranteed to stay free of one.
+ */
+export function TerminalSidebar({ terminal }: { terminal: StudioTerminalPage }) {
+  const target = terminal.target;
+  return (
+    <aside
+      className="terminal-sidebar"
+      id="studio-terminal-panel"
+      aria-label="Agent terminal"
+      data-terminal-companion={target?.digest}
+      data-terminal-state="reconnecting"
+    >
+      <div
+        className="terminal-resize"
+        id="terminal-resize"
+        role="separator"
+        aria-orientation="vertical"
+        aria-label="Resize the terminal"
+      />
+      <div className="terminal-strip">
+        <button
+          type="button"
+          className="terminal-icon-button"
+          id="terminal-expand"
+          aria-controls="terminal-body"
+          aria-expanded="false"
+          aria-label="Expand the terminal"
+        >
+          ‹
+        </button>
+        <span className="terminal-dot" aria-hidden="true" />
+      </div>
+      <div className="terminal-body" id="terminal-body">
+        <header className="terminal-head">
+          <div className="terminal-title">
+            <span className="terminal-dot" aria-hidden="true" />
+            <h2>Agent terminal</h2>
+            <button
+              type="button"
+              className="terminal-icon-button"
+              id="terminal-collapse"
+              aria-controls="terminal-body"
+              aria-expanded="true"
+              aria-label="Collapse the terminal"
+            >
+              ›
+            </button>
+            <button
+              type="button"
+              className="terminal-icon-button"
+              id="terminal-drawer-close"
+              aria-label="Close the terminal"
+            >
+              ×
+            </button>
+          </div>
+          <p className="terminal-target">
+            {target ? (
+              <>
+                Launches against <code>{target.path}</code>
+                {terminal.pinned ? " (fixed when Studio started)" : null}
+              </>
+            ) : (
+              "Select a registered companion to launch an agent."
+            )}
+          </p>
+          <div className="terminal-actions">
+            {target && terminal.agents.length > 0 ? (
+              terminal.agents.map((agent) => (
+                <button key={agent} type="button" className="button" data-terminal-start={agent}>
+                  Start {AGENT_LABELS[agent]}
+                </button>
+              ))
+            ) : target ? (
+              <span className="empty">No agent this companion allows is installed.</span>
+            ) : null}
+            <button type="button" className="button" id="terminal-reconnect" hidden>
+              Reconnect
+            </button>
+          </div>
+          <p className="terminal-status" id="terminal-status" role="status">
+            Connecting…
+          </p>
+        </header>
+        <div className="terminal-view" id="studio-terminal" />
+        <footer className="terminal-sessions-footer">
+          <h3 className="terminal-sessions-title">Sessions</h3>
+          <ul className="terminal-sessions" id="terminal-sessions" />
+        </footer>
+      </div>
+    </aside>
+  );
+}
+
+/** Outside `.shell`, so it never takes a grid cell; shown only below the side-by-side breakpoint. */
+export function TerminalDrawerButton() {
+  return (
+    <button
+      type="button"
+      className="terminal-drawer-open"
+      id="terminal-drawer-open"
+      aria-controls="studio-terminal-panel"
+      aria-expanded="false"
+    >
+      Terminal
+    </button>
+  );
+}
+
+/**
+ * Runs in `<head>` with the terminal only, so a navigation paints the
+ * remembered width and collapsed state instead of the defaults first.
+ */
+export const STUDIO_TERMINAL_PREPAINT_SCRIPT = `(function () {
+  ${CLAMP_WIDTH_SOURCE}
+  try {
+    var width = parseInt(localStorage.getItem(${JSON.stringify(TERMINAL_WIDTH_KEY)}) || "", 10);
+    if (width > 0) document.documentElement.style.setProperty("--terminal-width", clampWidth(width) + "px");
+    if (localStorage.getItem(${JSON.stringify(TERMINAL_COLLAPSED_KEY)}) === "true") {
+      document.documentElement.setAttribute("data-terminal-collapsed", "");
+    }
+  } catch (error) {
+    /* a blocked web store only costs the preference, never the page */
+  }
+})();`;
+
+/**
+ * The sidebar chrome: collapse, drag-to-resize, and the narrow-window drawer.
+ * It never touches xterm.js or the socket; the terminal script refits from
+ * its own observer whenever this changes the terminal's size.
+ */
+export const STUDIO_TERMINAL_SIDEBAR_SCRIPT = `(function () {
+  var root = document.documentElement;
+  var panel = document.getElementById("studio-terminal-panel");
+  if (!panel) return;
+  var collapseButton = document.getElementById("terminal-collapse");
+  var expandButton = document.getElementById("terminal-expand");
+  var handle = document.getElementById("terminal-resize");
+  var opener = document.getElementById("terminal-drawer-open");
+  var closer = document.getElementById("terminal-drawer-close");
+  ${CLAMP_WIDTH_SOURCE}
+  function save(key, value) {
+    try { localStorage.setItem(key, value); } catch (error) { /* only the preference is lost */ }
+  }
+
+  function updateCollapseControls(collapsed) {
+    if (collapseButton) collapseButton.setAttribute("aria-expanded", String(!collapsed));
+    if (expandButton) expandButton.setAttribute("aria-expanded", String(!collapsed));
+  }
+  function setCollapsed(collapsed) {
+    if (collapsed) root.setAttribute("data-terminal-collapsed", "");
+    else root.removeAttribute("data-terminal-collapsed");
+    updateCollapseControls(collapsed);
+    save(${JSON.stringify(TERMINAL_COLLAPSED_KEY)}, String(collapsed));
+  }
+  updateCollapseControls(root.hasAttribute("data-terminal-collapsed"));
+  if (collapseButton) collapseButton.addEventListener("click", function () { setCollapsed(true); });
+  if (expandButton) expandButton.addEventListener("click", function () { setCollapsed(false); });
+
+  if (handle) {
+    var dragging = false;
+    var width = 0;
+    handle.addEventListener("pointerdown", function (event) {
+      dragging = true;
+      handle.setPointerCapture(event.pointerId);
+      event.preventDefault();
+    });
+    handle.addEventListener("pointermove", function (event) {
+      if (!dragging) return;
+      width = clampWidth(window.innerWidth - event.clientX);
+      root.style.setProperty("--terminal-width", width + "px");
+    });
+    var stop = function (event) {
+      if (!dragging) return;
+      dragging = false;
+      if (handle.hasPointerCapture && handle.hasPointerCapture(event.pointerId)) handle.releasePointerCapture(event.pointerId);
+      if (width > 0) save(${JSON.stringify(TERMINAL_WIDTH_KEY)}, String(width));
+    };
+    handle.addEventListener("pointerup", stop);
+    handle.addEventListener("pointercancel", stop);
+  }
+
+  function setDrawer(open) {
+    if (open) panel.setAttribute("data-drawer-open", "");
+    else panel.removeAttribute("data-drawer-open");
+    if (opener) opener.setAttribute("aria-expanded", String(open));
+  }
+  if (opener) opener.addEventListener("click", function () {
+    setDrawer(true);
+    if (closer) closer.focus();
+  });
+  if (closer) closer.addEventListener("click", function () {
+    setDrawer(false);
+    if (opener) opener.focus();
+  });
+  document.addEventListener("keydown", function (event) {
+    if (event.key !== "Escape" || !panel.hasAttribute("data-drawer-open")) return;
+    setDrawer(false);
+    if (opener) opener.focus();
+  });
+})();`;
+
+/**
+ * Drives the xterm.js view over the terminal WebSocket. The tab id lives in
+ * `sessionStorage`, so a reload keeps it and a new tab gets its own; a
+ * taken-over tab never reconnects on its own.
+ */
+export const STUDIO_TERMINAL_SCRIPT = `(function () {
+  var panel = document.getElementById("studio-terminal-panel");
+  var mount = document.getElementById("studio-terminal");
+  if (!panel || !mount || typeof Terminal === "undefined") return;
+  var statusNode = document.getElementById("terminal-status");
+  var reconnectButton = document.getElementById("terminal-reconnect");
+  var list = document.getElementById("terminal-sessions");
+  var companion = panel.getAttribute("data-terminal-companion") || "";
+  var MAX_ATTEMPTS = 8;
+  var FIRST_DELAY = 2000;
+
+  function store(key, value) {
+    try {
+      if (value === null) sessionStorage.removeItem(key);
+      else sessionStorage.setItem(key, value);
+    } catch (error) { /* a blocked store only costs the reattach */ }
+  }
+  function load(key) {
+    try { return sessionStorage.getItem(key); } catch (error) { return null; }
+  }
+  var tabId = load(${JSON.stringify(TERMINAL_TAB_KEY)});
+  if (!tabId) {
+    tabId = (window.crypto && crypto.randomUUID) ? crypto.randomUUID() : String(Math.random()).slice(2);
+    store(${JSON.stringify(TERMINAL_TAB_KEY)}, tabId);
+  }
+
+  var term = new Terminal({ cursorBlink: true, allowProposedApi: true, fontFamily: getComputedStyle(document.documentElement).getPropertyValue("--mono") || "monospace", fontSize: 13 });
+  var fit = new FitAddon.FitAddon();
+  term.loadAddon(fit);
+  term.loadAddon(new Unicode11Addon.Unicode11Addon());
+  term.unicode.activeVersion = "11";
+  term.loadAddon(new WebLinksAddon.WebLinksAddon());
+  term.loadAddon(new ClipboardAddon.ClipboardAddon());
+  var opened = false;
+  var frame = 0;
+  /**
+   * xterm.js measures its cells on open, so a sidebar collapsed at load opens
+   * it only once the area is visible. A zero size never fits: it would send a
+   * resize the server rejects.
+   */
+  function fitNow() {
+    frame = 0;
+    if (!mount.clientWidth || !mount.clientHeight) return;
+    if (!opened) { term.open(mount); opened = true; }
+    fit.fit();
+  }
+  function scheduleFit() { if (!frame) frame = requestAnimationFrame(fitNow); }
+  new ResizeObserver(scheduleFit).observe(mount);
+  fitNow();
+
+  var ws = null;
+  var attempts = 0;
+  var takenOver = false;
+  var pending = null;
+
+  function status(text) { if (statusNode) statusNode.textContent = text; }
+  function state(name) { panel.setAttribute("data-terminal-state", name); }
+  function currentSession() { return load(${JSON.stringify(TERMINAL_SESSION_KEY)}); }
+  function size() { return { cols: term.cols, rows: term.rows }; }
+  function send(message) {
+    if (ws && ws.readyState === 1) { ws.send(JSON.stringify(message)); return true; }
+    return false;
+  }
+  function attach(sessionId) {
+    var message = { type: "attach", sessionId: sessionId, tabId: tabId, cols: term.cols, rows: term.rows };
+    if (!send(message)) { pending = message; connect(); }
+  }
+
+  function connect() {
+    if (ws && ws.readyState <= 1) return;
+    takenOver = false;
+    if (reconnectButton) reconnectButton.hidden = true;
+    ws = new WebSocket((location.protocol === "https:" ? "wss:" : "ws:") + "//" + location.host + "/api/terminal");
+    ws.binaryType = "arraybuffer";
+    ws.onopen = function () {
+      attempts = 0;
+      state("connected");
+      status("Connected.");
+      if (pending) { ws.send(JSON.stringify(pending)); pending = null; }
+      else if (currentSession()) attach(currentSession());
+    };
+    ws.onmessage = function (event) {
+      if (typeof event.data !== "string") { term.write(new Uint8Array(event.data)); return; }
+      var message;
+      try { message = JSON.parse(event.data); } catch (error) { return; }
+      if (message.type === "ready") {
+        store(${JSON.stringify(TERMINAL_SESSION_KEY)}, message.sessionId);
+        term.reset();
+        state("connected");
+        status("Connected to " + message.agent + " in " + message.companionPath + ".");
+        term.focus();
+      } else if (message.type === "exit") {
+        store(${JSON.stringify(TERMINAL_SESSION_KEY)}, null);
+        state("detached");
+        status("The agent exited with status " + message.status + ".");
+      } else if (message.type === "ended") {
+        store(${JSON.stringify(TERMINAL_SESSION_KEY)}, null);
+        state("detached");
+        status("The session ended" + (message.reason ? ": " + message.reason : "") + ".");
+      } else if (message.type === "detached") {
+        state("detached");
+        status("Detached (" + message.reason + "); the agent keeps running.");
+      } else if (message.type === "takenOver") {
+        takenOver = true;
+        state("detached");
+        status("Another tab took over this session.");
+        if (reconnectButton) reconnectButton.hidden = false;
+      } else if (message.type === "gone") {
+        store(${JSON.stringify(TERMINAL_SESSION_KEY)}, null);
+        state("detached");
+        status("That session no longer exists.");
+      } else if (message.type === "error") {
+        status(message.reason);
+      }
+      refreshSessions();
+    };
+    ws.onclose = function () {
+      ws = null;
+      if (takenOver) return;
+      if (attempts >= MAX_ATTEMPTS) {
+        state("detached");
+        status("Disconnected.");
+        if (reconnectButton) reconnectButton.hidden = false;
+        return;
+      }
+      var delay = FIRST_DELAY * Math.pow(2, attempts);
+      attempts += 1;
+      state("reconnecting");
+      status("Reconnecting (attempt " + attempts + " of " + MAX_ATTEMPTS + ")…");
+      setTimeout(connect, delay);
+    };
+  }
+
+  term.onData(function (data) { send({ type: "input", data: data }); });
+  var sent = { cols: term.cols, rows: term.rows };
+  term.onResize(function (next) {
+    if (next.cols === sent.cols && next.rows === sent.rows) return;
+    sent = { cols: next.cols, rows: next.rows };
+    send({ type: "resize", cols: next.cols, rows: next.rows });
+  });
+
+  Array.prototype.forEach.call(document.querySelectorAll("[data-terminal-start]"), function (button) {
+    button.addEventListener("click", function () {
+      var dims = size();
+      var message = { type: "start", agent: button.getAttribute("data-terminal-start"), companion: companion, tabId: tabId, cols: dims.cols, rows: dims.rows };
+      if (!send(message)) { pending = message; connect(); }
+    });
+  });
+  if (reconnectButton) reconnectButton.addEventListener("click", function () { attempts = 0; connect(); });
+
+  function age(seconds) {
+    if (seconds < 60) return seconds + " s";
+    if (seconds < 3600) return Math.floor(seconds / 60) + " min";
+    return Math.floor(seconds / 3600) + " h";
+  }
+  function button(label, onClick) {
+    var node = document.createElement("button");
+    node.type = "button";
+    node.className = "button";
+    node.textContent = label;
+    node.addEventListener("click", onClick);
+    return node;
+  }
+  function refreshSessions() {
+    if (!list) return;
+    fetch("/api/terminal/sessions", { credentials: "same-origin" }).then(function (response) {
+      return response.ok ? response.json() : { sessions: [] };
+    }).then(function (body) {
+      while (list.firstChild) list.removeChild(list.firstChild);
+      var mine = currentSession();
+      if (!body.sessions.length) {
+        var empty = document.createElement("li");
+        empty.className = "empty";
+        empty.textContent = "No sessions are running.";
+        list.appendChild(empty);
+      }
+      body.sessions.forEach(function (session) {
+        var item = document.createElement("li");
+        var label = document.createElement("span");
+        label.textContent = session.agent + " · " + session.companionPath + " · " + (session.id === mine ? "this tab" : session.attached ? "attached elsewhere" : "detached") + " · " + age(session.ageSeconds);
+        item.appendChild(label);
+        if (session.id !== mine) item.appendChild(button(session.attached ? "Take over" : "Attach", function () { attach(session.id); }));
+        item.appendChild(button("End", function () {
+          fetch("/api/terminal/sessions/end", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ id: session.id }) }).then(refreshSessions);
+        }));
+        list.appendChild(item);
+      });
+    }).catch(function () { /* the next refresh retries */ });
+  }
+
+  connect();
+  refreshSessions();
+  setInterval(refreshSessions, 5000);
+})();`;

package/src/cli/commands/studio/views/vault/state.ts

@@ -0,0 +1,42 @@
+import type { StudioVaultSelection } from "../../selection";
+import type { VaultManager, VaultTreeResult } from "../../vault";
+import type { StudioVaultPage } from "../model";
+
+export async function vaultState(
+  manager: VaultManager,
+  companionPath: string,
+  sel: StudioVaultSelection,
+  options: { tree: "prefetch" | "await" },
+): Promise<StudioVaultPage> {
+  let tree: VaultTreeResult | null = null;
+  let failure: string | null = null;
+  try {
+    tree =
+      options.tree === "prefetch"
+        ? await manager.prefetch(companionPath, sel.refresh)
+        : await manager.tree(companionPath, sel.refresh);
+  } catch (error) {
+    failure = error instanceof Error ? error.message : String(error);
+  }
+
+  let open: StudioVaultPage["open"] = null;
+  let refusal: string | null = null;
+  if (sel.openPath) {
+    try {
+      open = await manager.open(companionPath, sel.openPath);
+    } catch (error) {
+      refusal = error instanceof Error ? error.message : String(error);
+    }
+  }
+
+  return {
+    tree: tree?.tree ?? null,
+    open,
+    refusal,
+    incoming: null,
+    overwritten: null,
+    watching: tree?.watching ?? false,
+    warning: tree?.warning ?? null,
+    failure,
+  };
+}

package/src/cli/commands/studio/views/workflow/steps.ts

@@ -240,13 +240,20 @@ export function workflowPlan(
       profile: "mate-minimal",
       label: "mate-minimal",
       description:
-        "Short path that creates only specs and tasks for one-Area, low-risk changes; switch to mate-v1 when uncertain.",
+        "Short path that explores first, then creates only specs and tasks for one-Area, low-risk changes; switch to mate-v1 when uncertain.",
       steps: [
+        skillStep(
+          "explore",
+          "explore",
+          "Resolves repository evidence, unknowns, options, and direction without adding a planning artifact.",
+          "It gives the minimal proposal step an agreed direction while keeping the output to specs and tasks.",
+          "mate-minimal",
+        ),
         skillStep(
           "propose",
           "propose",
-          "Creates the concise, parser-compatible behavior change.",
-          "OpenSpec generates the minimal specs and tasks artifacts from the agreed direction.",
+          "Creates the concise, parser-compatible specs and tasks from the explored direction.",
+          "OpenSpec turns the agreed direction into only the minimal profile's specs and tasks; proposal and design artifacts are intentionally omitted.",
           "mate-minimal",
         ),
         reviewStep(