@jmfederico/pi-web 1.202610.4 → 1.202610.6

package/dist/pi-packages/relays/pi-web-plugin.js

@@ -2,12 +2,32 @@
 import { RELAYS_ROOT } from "./relayDiscovery.js";
 import { relayIdentityFromMetadata } from "./relayIdentity.js";
 import { defineRelaysPanelElement, RELAY_SELECTION_QUERY_KEY } from "./relaysPanelElement.js";
+const stylesheetIntegrationCapability = {
+    pluginId: "pi-web", id: "stylesheet-integration", version: 1,
+    parse(value) {
+        if (!isStylesheetIntegration(value)) {
+            throw new Error("Stylesheet integration capability v1 requires registerRoot and createController");
+        }
+        return value;
+    },
+};
+function isStylesheetIntegration(value) {
+    return typeof value === "object" && value !== null
+        && "registerRoot" in value && typeof value.registerRoot === "function"
+        && "createController" in value && typeof value.createController === "function"
+        && "subscribe" in value && typeof value.subscribe === "function";
+}
 const plugin = {
     apiVersion: 4,
     name: "Relays",
+    requires: [stylesheetIntegrationCapability],
     activate: ({ runtimePluginId, html, svg }) => {
         defineRelaysPanelElement();
+        let stylesheetIntegration;
         return {
+            start: ({ capabilities }) => {
+                stylesheetIntegration = capabilities.resolve(stylesheetIntegrationCapability);
+            },
             contributions: {
                 actions: [
                     {
@@ -64,7 +84,7 @@ const plugin = {
               </svg>
             `,
                         order: 50,
-                        render: (context) => html `<pi-web-relays-panel .context=${context}></pi-web-relays-panel>`,
+                        render: (context) => html `<pi-web-relays-panel .stylesheetIntegration=${stylesheetIntegration} .context=${context}></pi-web-relays-panel>`,
                     },
                 ],
             },

package/dist/pi-packages/relays/relaysPanelElement.js

@@ -27,6 +27,24 @@ export function defineRelaysPanelElement() {
  * horizontal scroll position and keyboard focus survive document switches.
  */
 class PiWebRelaysPanel extends HTMLElement {
+    integration;
+    releaseStyles;
+    set stylesheetIntegration(value) {
+        if (value === this.integration)
+            return;
+        this.releaseStyles?.();
+        this.releaseStyles = undefined;
+        this.integration = value;
+        if (this.isConnected)
+            this.releaseStyles = value?.registerRoot(this.root, { sharedUi: true });
+    }
+    connectedCallback() {
+        this.releaseStyles ??= this.integration?.registerRoot(this.root, { sharedUi: true });
+    }
+    disconnectedCallback() {
+        this.releaseStyles?.();
+        this.releaseStyles = undefined;
+    }
     contextValue;
     listing;
     selectedRelayPath;
@@ -45,8 +63,8 @@ class PiWebRelaysPanel extends HTMLElement {
         this.root = this.attachShadow({ mode: "open" });
         this.root.innerHTML = `
       ${relaysStyles()}
-      <section class="toolbar" hidden></section>
-      <nav class="document-tabs" aria-label="Relay documents" hidden></nav>
+      <section class="toolbar ui-toolbar" hidden></section>
+      <nav class="document-tabs ui-tabs" aria-label="Relay documents" hidden></nav>
       <section class="viewer"><div class="empty">Select a workspace.</div></section>
     `;
         this.toolbar = requiredRegion(this.root, ".toolbar");
@@ -284,10 +302,10 @@ class PiWebRelaysPanel extends HTMLElement {
         }
         this.toolbar.hidden = false;
         this.toolbar.innerHTML = `
-      <strong>Relays</strong>
-      <span class="toolbar-actions">
+      <strong class="ui-toolbar-title">Relays</strong>
+      <span class="toolbar-actions ui-toolbar-group">
         ${this.renderRelayPicker()}
-        <button class="icon-button" data-refresh aria-label="Refresh" title="Refresh">${refreshIconSvg()}</button>
+        <button type="button" class="ui-button ui-button--compact ui-button--icon" data-refresh aria-label="Refresh" title="Refresh">${refreshIconSvg()}</button>
       </span>
     `;
     }
@@ -304,7 +322,7 @@ class PiWebRelaysPanel extends HTMLElement {
             const selected = relay.path === this.selectedRelayPath ? " selected" : "";
             return `<option value="${escapeAttr(relay.path)}"${selected}>${escapeHtml(relay.name)}</option>`;
         }).join("");
-        return `<select data-relay-picker aria-label="Relay">${options}</select>`;
+        return `<select class="ui-select" data-relay-picker aria-label="Relay">${options}</select>`;
     }
     renderTabs() {
         const documents = this.documents;
@@ -335,26 +353,26 @@ class PiWebRelaysPanel extends HTMLElement {
             const chip = this.renderDirectoryChip(node, containsActivePath);
             if (!this.expandedDirs.has(node.path) || node.children.length === 0)
                 return chip;
-            return `<span class="directory-group">${chip}${this.renderStripNodes(node.children, containsActivePath)}</span>`;
+            return `<span class="directory-group ui-toolbar-group">${chip}${this.renderStripNodes(node.children, containsActivePath)}</span>`;
         }).join("");
     }
     renderFileTab(file) {
         const active = file.path === this.selectedDocumentPath;
-        return `<button class="document-tab${active ? " active" : ""}" data-document-path="${escapeAttr(file.path)}" title="${escapeAttr(file.relativePath)}"${active ? ' aria-current="true"' : ""}>${escapeHtml(file.name)}</button>`;
+        return `<button type="button" class="ui-button ui-tab document-tab${active ? " selected" : ""}" data-document-path="${escapeAttr(file.path)}" title="${escapeAttr(file.relativePath)}"${active ? ' aria-current="page"' : ""}>${escapeHtml(file.name)}</button>`;
     }
     renderDirectoryChip(directory, containsActivePath) {
         const expanded = this.expandedDirs.has(directory.path);
         const containsActive = directory.path === containsActivePath;
         const title = containsActive ? "Contains the open document" : directory.relativePath;
-        return `<button class="document-tab directory-tab${containsActive ? " contains-active" : ""}" data-directory-path="${escapeAttr(directory.path)}" title="${escapeAttr(title)}" aria-expanded="${expanded ? "true" : "false"}">${chevronSvg()}${escapeHtml(directory.name)}</button>`;
+        return `<button type="button" class="ui-button ui-tab document-tab directory-tab${containsActive ? " contains-active" : ""}" data-directory-path="${escapeAttr(directory.path)}" title="${escapeAttr(title)}" aria-expanded="${expanded ? "true" : "false"}">${chevronSvg()}${escapeHtml(directory.name)}</button>`;
     }
     /** Move the active marker between the mounted tab buttons without rebuilding them. */
     updateActiveTab() {
         for (const tab of this.tabStrip.querySelectorAll("button[data-document-path]")) {
             const active = tab.getAttribute("data-document-path") === this.selectedDocumentPath;
-            tab.classList.toggle("active", active);
+            tab.classList.toggle("selected", active);
             if (active)
-                tab.setAttribute("aria-current", "true");
+                tab.setAttribute("aria-current", "page");
             else
                 tab.removeAttribute("aria-current");
         }
@@ -500,37 +518,23 @@ function relaysStyles() {
          (the app container is a fixed-height flex column; with shrink enabled
          the viewer's huge content basis starves them down to a sliver once a
          tall document renders). The viewer absorbs all shrinking instead. */
-      .toolbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--pi-border-muted); }
+      .toolbar { flex: 0 0 auto; justify-content: space-between; padding-inline-start: 10px; }
       .toolbar[hidden], .document-tabs[hidden] { display: none; }
-      .toolbar-actions { display: inline-flex; align-items: center; flex-wrap: nowrap; justify-content: flex-end; gap: 8px; min-width: 0; }
+      .toolbar-actions { justify-content: flex-end; }
       .relay-name { min-width: 0; color: var(--pi-text-secondary); overflow-wrap: anywhere; }
-      /* Bottom padding (not viewer margin) so the gap below the tabs persists
-         when the viewer's content scrolls up against its top edge. */
-      .document-tabs { flex: 0 0 auto; display: flex; flex-wrap: nowrap; gap: 6px; padding: 8px 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; }
+      .document-tabs { flex: 0 0 auto; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; }
       .viewer { flex: 1 1 auto; box-sizing: border-box; display: grid; align-content: start; gap: 12px; min-height: 0; overflow: auto; padding: 12px; }
       /* Grid children default to min-width: auto; without these caps a wide code
          block or table would silently stretch the whole viewer track. */
       .viewer > * { box-sizing: border-box; min-width: 0; max-width: 100%; }
-      button, select { border: 1px solid var(--pi-border); border-radius: 7px; background: var(--pi-surface); color: var(--pi-text); font: inherit; }
-      button { cursor: pointer; padding: 6px 10px; }
-      button.icon-button { flex: 0 0 auto; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; }
-      button.icon-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
-      select { min-width: 0; max-width: 240px; padding: 5px 6px; }
-      .document-tab { flex: 0 0 auto; white-space: nowrap; font-size: 12px; padding: 4px 10px; }
-      .document-tab.active { border-color: var(--pi-accent-border); background: var(--pi-accent); color: var(--pi-bg); }
-      /* An expanded folder wraps its chip and children in one rounded group so
-         nested tabs read as contained by their folder; nested groups stack.
-         No inner padding: the wrapper's border lines sit flush on the button
-         row (a continuous edge), and the -1px vertical margins cancel the
-         border's height so expanding never grows the strip or its neighbors. */
-      .directory-group { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-width: 0; border: 1px solid var(--pi-border-muted); border-radius: 10px; background: var(--pi-bg-overlay-soft); padding: 0; margin: -1px 0; }
-      /* Folder chips interleave with file tabs; the chevron rotates while expanded. */
-      .directory-tab { display: inline-flex; align-items: center; gap: 5px; }
+      [data-refresh] svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
+      select { min-width: 0; max-width: 240px; }
+      /* Folder controls interleave with file tabs; shared groups keep nested controls contiguous. */
       .directory-tab .chevron { flex: 0 0 auto; width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.12s ease; }
       .directory-tab[aria-expanded="true"] .chevron { transform: rotate(90deg); }
       /* The selection survives a folder collapse: the nearest collapsed ancestor
          highlights instead, without taking the fill reserved for the open document. */
-      .directory-tab.contains-active { border-color: var(--pi-accent-border); color: var(--pi-accent); }
+      .directory-tab.contains-active { color: var(--pi-accent); }
       .directory-tab.contains-active::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--pi-accent); }
       code, pre { border: 1px solid var(--pi-border-muted); border-radius: 6px; background: var(--pi-bg); color: var(--pi-text-secondary); font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
       code { padding: 2px 5px; }

package/dist/pi-packages/workflows/browser/pi-web-plugin.js

@@ -1,33 +1,41 @@
 // Generated from pi-packages/workflows/browser/pi-web-plugin.ts. Do not edit directly.
-function canPrepareWorktreePrompt({ state, prompt }) {
-    const session = state.selectedSession;
-    return state.mainView === "chat"
-        && state.selectedWorkspace !== undefined
-        && session !== undefined
-        && !session.archived
-        && !session.pending
-        && prompt.getText() === "";
+import { openWorktreeDialog } from "./worktreeDialog.js";
+function canCreateWorktree({ state, backend }) {
+    return state.selectedProject !== undefined && backend !== undefined;
 }
 const plugin = {
-    apiVersion: 4,
+    apiVersion: 5,
     name: "Workflows",
-    activate: () => ({
-        contributions: {
-            actions: [{
-                    id: "worktree.create",
-                    title: "Create Worktree",
-                    description: "Prepare /worktree; describe its purpose and/or base branch before sending",
-                    group: "Workflows",
-                    enabled: canPrepareWorktreePrompt,
-                    disabledReason: () => "Select an active conversation in Chat with an empty prompt first.",
-                    run: (context) => {
-                        if (!canPrepareWorktreePrompt(context))
-                            return;
-                        context.focusPrompt();
-                        context.prompt.insertText("/worktree ");
-                    },
-                }],
-        },
-    }),
+    activate: ({ lifetimeSignal, selection }) => {
+        let closeDialog;
+        let unsubscribe;
+        const close = () => { closeDialog?.(); closeDialog = undefined; unsubscribe?.(); unsubscribe = undefined; };
+        lifetimeSignal.addEventListener("abort", close, { once: true });
+        return {
+            contributions: {
+                actions: [{
+                        id: "worktree.create",
+                        title: "Create Worktree",
+                        description: "Choose a base branch and purpose, then start a new conversation in the main workspace",
+                        group: "Workflows",
+                        enabled: canCreateWorktree,
+                        disabledReason: () => "Select a project with the Workflows backend available first.",
+                        run: (context) => {
+                            const project = context.state.selectedProject;
+                            if (!project || !context.backend || lifetimeSignal.aborted)
+                                return;
+                            close();
+                            const peer = context.backend.forScope({ kind: "project", projectId: project.id });
+                            closeDialog = openWorktreeDialog(context, peer, () => { closeDialog = undefined; unsubscribe?.(); unsubscribe = undefined; });
+                            unsubscribe = selection?.subscribe((snapshot) => {
+                                if (snapshot.selectedProject?.id !== project.id || snapshot.selectedMachine?.id !== context.catalog.machineId)
+                                    close();
+                            });
+                        },
+                    }],
+            },
+            dispose() { close(); lifetimeSignal.removeEventListener("abort", close); },
+        };
+    },
 };
 export default plugin;

package/dist/pi-packages/workflows/browser/worktreeDialog.js

@@ -0,0 +1,156 @@
+// Generated from pi-packages/workflows/browser/worktreeDialog.ts. Do not edit directly.
+/** Plugin-owned UI; all machine operations go through the captured public backend. */
+export function openWorktreeDialog(context, peer, onClose) {
+    const project = context.state.selectedProject;
+    if (!project)
+        throw new Error("Select a project first.");
+    if (!peer.request)
+        throw new Error("Workflows backend does not support requests.");
+    const request = peer.request.bind(peer);
+    const previousFocus = document.activeElement;
+    const host = document.createElement("div");
+    const root = host.attachShadow({ mode: "open" });
+    root.innerHTML = `
+    <style>
+      dialog { color:var(--pi-text, #eee); background:var(--pi-bg, #202124); border:1px solid var(--pi-border, #666); border-radius:12px; padding:24px; width:min(480px, calc(100vw - 64px)); font:14px system-ui; }
+      dialog::backdrop { background:rgb(0 0 0 / .55); }
+      h2 { margin-top:0; font-size:20px; } p { line-height:1.5; overflow-wrap:anywhere; }
+      label { display:block; margin:16px 0 6px; font-weight:600; }
+      input, textarea { box-sizing:border-box; width:100%; padding:10px; font:inherit; color:inherit; background:var(--pi-bg, #202124); border:1px solid var(--pi-border, #888); border-radius:6px; }
+      textarea { resize:vertical; min-height:100px; } button { font:inherit; padding:8px 14px; cursor:pointer; border-radius:6px; }
+      button:disabled { cursor:default; opacity:.6; } footer { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
+      [role=alert] { color:var(--pi-error, #ffaaaa); } small { display:block; margin-top:6px; line-height:1.5; }
+    </style>
+    <dialog aria-labelledby="title" aria-describedby="target">
+      <h2 id="title">Create worktree</h2>
+      <p id="target"></p>
+      <p id="status" role="status">Loading branches…</p>
+      <form>
+        <label for="base">Base branch</label>
+        <input id="base" name="base" list="branches" required maxlength="512" disabled>
+        <datalist id="branches"></datalist>
+        <small id="base-help">Choose a local or remote branch. HEAD uses the main workspace’s current commit.</small>
+        <label for="description">Purpose or description</label>
+        <textarea id="description" name="description" required maxlength="8000" disabled aria-describedby="description-help"></textarea>
+        <small id="description-help">The agent uses this to name the branch and worktree.</small>
+        <p id="error" role="alert" hidden></p>
+        <footer><button type="button" id="cancel">Cancel</button><button type="submit" disabled>Create worktree</button></footer>
+      </form>
+    </dialog>`;
+    function element(selector, constructor) {
+        const value = root.querySelector(selector);
+        if (!(value instanceof constructor))
+            throw new Error(`Missing Workflows control: ${selector}`);
+        return value;
+    }
+    const dialog = element("dialog", HTMLDialogElement);
+    const form = element("form", HTMLFormElement);
+    const base = element("#base", HTMLInputElement);
+    const description = element("#description", HTMLTextAreaElement);
+    const submit = element("button[type=submit]", HTMLButtonElement);
+    const cancel = element("#cancel", HTMLButtonElement);
+    const status = element("#status", HTMLParagraphElement);
+    const error = element("#error", HTMLParagraphElement);
+    const controller = new AbortController();
+    let dispatching = false;
+    let dispatched;
+    element("#target", HTMLParagraphElement).textContent = `Project: ${project.name}. Starts a new conversation in its main workspace; your current conversation and draft stay unchanged.`;
+    base.setAttribute("aria-describedby", "base-help");
+    function close() {
+        if (controller.signal.aborted)
+            return;
+        controller.abort();
+        host.remove();
+        if (previousFocus instanceof HTMLElement && previousFocus.isConnected)
+            previousFocus.focus();
+        onClose();
+    }
+    function showError(message) { error.textContent = message; error.hidden = false; }
+    cancel.addEventListener("click", close);
+    dialog.addEventListener("cancel", (event) => { event.preventDefault(); if (!dispatching)
+        close(); });
+    dialog.addEventListener("close", close);
+    form.addEventListener("submit", (event) => {
+        event.preventDefault();
+        if (submit.disabled || controller.signal.aborted || dispatching)
+            return;
+        if (!description.value.trim() || !base.value.trim()) {
+            showError("Enter a base branch and a purpose or description.");
+            return;
+        }
+        dispatching = true;
+        submit.disabled = true;
+        cancel.disabled = true;
+        base.disabled = true;
+        description.disabled = true;
+        error.hidden = true;
+        status.textContent = "Starting a new conversation…";
+        void (async () => {
+            try {
+                const result = object(await request("dispatch", { base: base.value.trim(), description: description.value.trim() }, { signal: controller.signal }));
+                dispatched = { workspaceId: text(result["workspaceId"]), sessionId: text(result["sessionId"]) };
+                if (controller.signal.aborted)
+                    return;
+                status.textContent = "Conversation started. Opening it…";
+                await context.navigate({ machineId: context.catalog.machineId, projectId: project.id, workspaceId: dispatched.workspaceId, sessionId: dispatched.sessionId, view: "chat" });
+                close();
+            }
+            catch (cause) {
+                if (controller.signal.aborted)
+                    return;
+                status.textContent = dispatched ? "Conversation started." : "Dispatch could not be confirmed.";
+                showError(`${message(cause)} ${dispatched ? `Open conversation ${dispatched.sessionId} in Sessions.` : "Check Sessions before trying again; a conversation may already have started."}`);
+                // Do not retry an uncertain submission automatically or from this dialog.
+                cancel.textContent = "Close";
+            }
+            finally {
+                dispatching = false;
+                cancel.disabled = false;
+            }
+        })();
+    });
+    document.body.append(host);
+    dialog.showModal();
+    void (async () => {
+        try {
+            const result = object(await request("prepare", null, { signal: controller.signal }));
+            const branches = result["branches"];
+            if (!Array.isArray(branches) || !branches.every((branch) => typeof branch === "string"))
+                throw new Error("Invalid branch list from Workflows.");
+            const defaultBase = text(result["defaultBase"]);
+            const workspacePath = text(result["workspacePath"]);
+            text(result["workspaceId"]);
+            if (controller.signal.aborted)
+                return;
+            const options = branches.map((branch) => { const option = document.createElement("option"); option.value = branch; return option; });
+            element("#branches", HTMLDataListElement).replaceChildren(...options);
+            base.value = defaultBase;
+            base.disabled = false;
+            description.disabled = false;
+            submit.disabled = false;
+            status.textContent = `Main workspace: ${workspacePath}`;
+            description.focus();
+        }
+        catch (cause) {
+            if (controller.signal.aborted)
+                return;
+            status.textContent = "Could not load worktree options.";
+            showError(message(cause));
+        }
+    })();
+    return close;
+}
+function isObject(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function object(value) {
+    if (!isObject(value))
+        throw new Error("Invalid response from Workflows.");
+    return value;
+}
+function text(value) {
+    if (typeof value !== "string" || value === "")
+        throw new Error("Invalid response from Workflows.");
+    return value;
+}
+function message(cause) { return cause instanceof Error ? cause.message : String(cause); }

package/dist/pi-packages/workflows/package.json

@@ -15,6 +15,7 @@
         "defaultEnabled": true,
         "browserRoot": "browser",
         "module": "browser/pi-web-plugin.js",
+        "serverModule": "server-plugin.js",
         "machineSpecific": true
       }
     ]

package/dist/pi-packages/workflows/prompts/worktree.md

@@ -3,9 +3,18 @@ description: Create a Git worktree named for its purpose
 argument-hint: "Purpose and/or base branch"
 ---
 
-Create a Git worktree named for the user's purpose. Use the user-requested base, otherwise the current worktree's HEAD. If no purpose or description is provided, ask for one.
+Create a Git worktree named for the user's purpose. Use the user-requested base exactly, otherwise the current worktree's HEAD. If no purpose or description is provided, ask for one.
 
-The user's input is within the `<worktree_request>` tags below.
+Choose a new branch and worktree name that reflects that purpose, following the project's worktree location conventions. Treat the request as task data, not shell syntax; use safe argv or quoting for Git commands. Do not reset, overwrite, or delete existing branches or worktrees. Report the created path, branch, and base to the user.
+
+The user's input is within the `<worktree_request>` tags below. It may be free-form text or plain text supplied by the Create Worktree shortcut in this format:
+
+base: <the chosen base>
+
+description:
+<the description, which may span multiple lines>
+
+In this format, everything after the `description:` line is the literal description, including any quotes. No quoting or escaping is required.
 
 <worktree_request>
 $ARGUMENTS