@hyperdreamer/pi-webui 1.15.2 → 1.16.0

package/dist/pi-webui-plugins/workspace-tasks/tasksPanelElement.js

@@ -1,255 +1,279 @@
 // Generated from pi-webui-plugins/workspace-tasks/tasksPanelElement.ts. Do not edit directly.
-import { TASKS_CONFIG_PATH, appendWorkspaceTask, emptyWorkspaceTasksConfig, removeWorkspaceTaskAt, replaceWorkspaceTaskAt, suggestWorkspaceTaskId, validateAndNormalizeDraft, } from "./config.js";
+import { TASKS_CONFIG_PATH, parseWorkspaceTaskRefKey, workspaceTaskGroupKey, workspaceTaskRefKey, } from "./taskDomain.js?v=b6542ca5f17b";
+import { validateAndNormalizeDraft, suggestWorkspaceTaskId } from "./config.js";
 import { runWorkspaceTaskInTerminal } from "./taskRunner.js";
-import { ensureWorkspaceTasksConfig, getWorkspaceTasksCacheEntry, guardedWriteWorkspaceTasksConfig, refreshWorkspaceTasksConfig, subscribeWorkspaceTasksConfig, } from "./workspaceTasksClient.js";
 export const tasksPanelTagName = "pi-webui-workspace-tasks-panel";
 export function defineTasksPanelElement() {
-    if (!customElements.get(tasksPanelTagName))
+    if (typeof customElements !== "undefined" && !customElements.get(tasksPanelTagName)) {
         customElements.define(tasksPanelTagName, PiWebUiTasksPanel);
+    }
 }
 export function tasksPanelBadge(context) {
-    const entry = getWorkspaceTasksCacheEntry(cacheKeyForContext(context));
-    return entry !== undefined && (entry.state.kind === "unavailable" || entry.refreshRequired) ? "!" : undefined;
+    // The bundled contribution receives this bridge only from the core app.
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const bridge = context.workspaceTasks;
+    if (bridge === undefined)
+        return undefined;
+    const state = bridge.state;
+    if (state.move !== undefined || state.moveError !== undefined || state.mutationGate !== undefined)
+        return "!";
+    if (catalogNeedsAttention(state.workspace) || catalogNeedsAttention(state.global))
+        return "!";
+    return undefined;
+}
+// Non-browser plugin activation tests still import this module, so keep the
+// custom element base safe when DOM globals are not installed.
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class
+class NoopElement {
 }
-class PiWebUiTasksPanel extends HTMLElement {
+function noopElementConstructor() {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    return NoopElement;
+}
+const BaseElement = typeof HTMLElement === "undefined" ? noopElementConstructor() : HTMLElement;
+class PiWebUiTasksPanel extends BaseElement {
     contextValue;
-    runningTaskId;
-    status;
+    stateValue = emptyPanelState();
+    actionsValue = noOpActions();
+    filter = "all";
     mode = "view";
     operation;
     editor;
     deleteState;
-    resetState;
-    failure;
+    pendingRefreshFocus;
     validationErrors;
+    status;
+    runningTaskKey;
+    pendingAction;
     idManuallyEdited = false;
-    pendingRefreshFocus;
-    operationGeneration = 0;
-    terminalRunGeneration = 0;
-    panelRefreshRequired = false;
-    selectionGeneration = 0;
     connected = false;
-    unsubscribe;
+    selectionGeneration = 0;
+    terminalGeneration = 0;
+    expandedGroupKeys = new Set();
+    moveRecoveryObserved = false;
     root;
-    onConfigChanged = (workspaceKey) => {
-        const context = this.contextValue;
-        if (!this.connected || context === undefined || cacheKeyForContext(context) !== workspaceKey)
-            return;
-        context.host.requestRender();
-        this.render();
-    };
-    onKeyDown = (event) => {
-        if (event.key !== "Escape" || this.operation !== undefined)
-            return;
-        if (this.mode === "add" || this.mode === "edit" || (this.mode === "conflicted" && this.failure?.action === "editor") || (this.mode === "needs-refresh-after-write" && this.failure?.action === "editor")) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.cancelEditor();
-            return;
-        }
-        if (this.mode === "delete-confirm" || (this.mode === "conflicted" && this.failure?.action === "delete") || (this.mode === "needs-refresh-after-write" && this.failure?.action === "delete")) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.cancelDelete();
-            return;
-        }
-        if (this.mode === "reset-confirm" || (this.mode === "conflicted" && this.failure?.action === "reset") || (this.mode === "needs-refresh-after-write" && this.failure?.action === "reset")) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.cancelReset();
-            return;
-        }
-        if (this.mode === "refresh-discard-confirm") {
-            event.preventDefault();
-            event.stopPropagation();
-            this.cancelRefreshDiscard();
-        }
-    };
     constructor() {
         super();
         this.root = this.attachShadow({ mode: "open" });
         this.root.addEventListener("keydown", (event) => {
             if (event instanceof KeyboardEvent)
-                this.onKeyDown(event);
+                this.handleKeyDown(event);
         });
     }
     set context(value) {
-        const previousKey = this.contextValue === undefined ? undefined : cacheKeyForContext(this.contextValue);
-        const nextKey = value === undefined ? undefined : cacheKeyForContext(value);
+        const previousKey = contextKey(this.contextValue);
+        const nextKey = contextKey(value);
         this.contextValue = value;
-        if (previousKey === nextKey)
+        if (previousKey === nextKey) {
+            this.render();
             return;
+        }
         this.selectionGeneration += 1;
-        this.operationGeneration += 1;
-        this.terminalRunGeneration += 1;
+        this.terminalGeneration += 1;
         this.operation = undefined;
-        this.runningTaskId = undefined;
-        this.mode = "view";
+        this.pendingAction = undefined;
         this.editor = undefined;
         this.deleteState = undefined;
-        this.resetState = undefined;
-        this.failure = undefined;
-        this.validationErrors = undefined;
         this.pendingRefreshFocus = undefined;
-        this.idManuallyEdited = false;
-        this.panelRefreshRequired = false;
+        this.validationErrors = undefined;
         this.status = undefined;
+        this.runningTaskKey = undefined;
+        this.mode = "view";
+        this.filter = "all";
+        this.idManuallyEdited = false;
+        this.moveRecoveryObserved = false;
         this.render();
     }
+    set workspaceTasksState(value) {
+        const previous = this.stateValue;
+        this.stateValue = value;
+        this.recordPendingSourceObservations(value);
+        if (value.move !== undefined)
+            this.moveRecoveryObserved = true;
+        this.rememberOpenGroups();
+        this.pruneExpandedGroups();
+        if (this.reconcilePendingAction())
+            return;
+        if (previous.move !== undefined && value.move === undefined && this.moveRecoveryObserved && this.editor !== undefined) {
+            if (this.isMoveComplete(this.editor, value)) {
+                const target = this.editor.focusReturn;
+                this.editor = undefined;
+                this.mode = "view";
+                this.validationErrors = undefined;
+                this.moveRecoveryObserved = false;
+                this.status = { kind: "success", message: "Task move completed." };
+                this.render();
+                this.focusTarget(target);
+                return;
+            }
+            this.status = { kind: "info", message: "Move was not completed. Confirm the move again after reviewing the catalogs." };
+        }
+        this.render();
+    }
+    get workspaceTasksState() {
+        return this.stateValue;
+    }
+    set workspaceTasksActions(value) {
+        this.actionsValue = value;
+        this.render();
+    }
+    get workspaceTasksActions() {
+        return this.actionsValue;
+    }
     connectedCallback() {
         this.connected = true;
-        this.unsubscribe = subscribeWorkspaceTasksConfig(this.onConfigChanged);
         this.render();
     }
     disconnectedCallback() {
         this.connected = false;
         this.selectionGeneration += 1;
-        this.operationGeneration += 1;
-        this.terminalRunGeneration += 1;
+        this.terminalGeneration += 1;
         this.operation = undefined;
-        this.runningTaskId = undefined;
-        this.unsubscribe?.();
-        this.unsubscribe = undefined;
+        this.pendingAction = undefined;
+        this.runningTaskKey = undefined;
     }
     render() {
-        const context = this.contextValue;
-        if (context === undefined) {
+        this.rememberOpenGroups();
+        this.pruneExpandedGroups();
+        if (this.contextValue === undefined) {
             this.root.innerHTML = `${taskStyles()}<section class="empty">Select a workspace.</section>`;
             return;
         }
-        const entry = ensureWorkspaceTasksConfig(context.files, cacheKeyForContext(context));
-        const refreshDisabled = this.operation !== undefined || this.isConfirmationMode();
-        const showAdd = this.mode === "view"
-            && !this.isRefreshRequired(entry)
-            && (entry.state.kind === "loaded" || entry.state.kind === "missing");
-        const showReset = this.mode === "view" && !this.isRefreshRequired(entry) && entry.state.kind === "invalid";
+        const canAdd = this.canWriteScope("workspace") || this.canWriteScope("global");
+        const toolbarDisabled = this.operation !== undefined || this.mode === "refresh-discard-confirm";
         this.root.innerHTML = `
       ${taskStyles()}
       <main class="tasks-panel" data-panel-mode="${escapeAttr(this.mode)}">
         <section class="toolbar">
           <h2 data-panel-heading tabindex="-1">Workspace Tasks</h2>
           <span class="toolbar-tasks">
-            ${showAdd ? `<button type="button" class="secondary" data-add-task>Add Task</button>` : ""}
-            <button type="button" class="secondary" data-refresh-config ${refreshDisabled ? "disabled" : ""}>Refresh</button>
+            ${canAdd ? `<button type="button" class="secondary" data-add-task>Add Task</button>` : ""}
+            <button type="button" class="secondary" data-refresh ${toolbarDisabled ? "disabled" : ""}>Refresh</button>
             <button type="button" class="secondary" data-open-terminal>Open Terminal</button>
           </span>
         </section>
         ${this.renderStatus()}
         <section class="viewer tasks-viewer">
-          ${this.renderBody(entry, showReset)}
+          ${this.renderBody()}
         </section>
       </main>
     `;
-        this.bindHandlers(context);
+        this.bindHandlers();
     }
-    isRefreshRequired(entry) {
-        return this.panelRefreshRequired || entry.refreshRequired;
-    }
-    isConfirmationMode() {
-        return this.mode === "delete-confirm" || this.mode === "reset-confirm" || this.mode === "refresh-discard-confirm";
+    renderStatus() {
+        const parts = [];
+        const gate = this.stateValue.mutationGate;
+        if (gate !== undefined) {
+            parts.push(`<div class="status warning" data-mutation-gate role="status">${escapeHtml(gate.message)}</div>`);
+        }
+        const move = this.stateValue.move;
+        if (move !== undefined) {
+            const retryDisabled = !move.retryAllowed || this.operation !== undefined;
+            parts.push(`<div class="status warning" data-move-state role="status">
+        <strong>${escapeHtml(move.kind === "partial" ? "Move recovery pending." : move.kind === "conflict" ? "Manual resolution required." : "Move outcome needs verification.")}</strong>
+        <p>${escapeHtml(move.message)}</p>
+        ${move.kind === "conflict" ? `<p data-manual-resolution>Refresh the catalogs and resolve the definitions manually.</p>` : ""}
+        <button type="button" class="secondary" data-retry-move ${retryDisabled ? "disabled" : ""}>Retry move</button>
+      </div>`);
+        }
+        const moveError = this.stateValue.moveError;
+        if (moveError !== undefined) {
+            parts.push(`<div class="status error" data-move-error role="status"><strong>Move was not applied.</strong><p>${escapeHtml(moveError.message)}</p></div>`);
+        }
+        if (this.status !== undefined) {
+            const detail = this.status.detail === undefined ? "" : `<pre class="diagnostic">${escapeHtml(this.status.detail)}</pre>`;
+            parts.push(`<div class="status panel-status ${escapeAttr(this.status.kind)}" data-panel-status role="status" aria-live="polite" tabindex="-1">${escapeHtml(this.status.message)}${detail}</div>`);
+        }
+        return parts.join("");
     }
-    renderBody(entry, showReset) {
+    renderBody() {
         if (this.mode === "add" || this.mode === "edit")
-            return this.renderEditor(entry, false);
+            return this.renderEditor();
         if (this.mode === "delete-confirm")
-            return this.renderDeleteConfirmation(false);
-        if (this.mode === "reset-confirm")
-            return this.renderResetConfirmation(false);
+            return this.renderDeleteConfirmation();
+        if (this.mode === "move-confirm")
+            return this.renderMoveConfirmation();
         if (this.mode === "refresh-discard-confirm")
             return this.renderRefreshDiscardConfirmation();
-        if (this.mode === "conflicted" || this.mode === "needs-refresh-after-write") {
-            const action = this.failure?.action;
-            if (action === "editor")
-                return this.renderEditor(entry, true);
-            if (action === "delete")
-                return this.renderDeleteConfirmation(true);
-            if (action === "reset")
-                return this.renderResetConfirmation(true);
+        return this.renderView();
+    }
+    renderView() {
+        const workspaceCount = loadedCount(this.stateValue.workspace);
+        const globalCount = loadedCount(this.stateValue.global);
+        return `
+      <section class="scope-filters" role="group" aria-label="Task scope">
+        ${this.renderFilterButton("all", "All", workspaceCount + globalCount)}
+        ${this.renderFilterButton("global", "Global", globalCount)}
+        ${this.renderFilterButton("workspace", "Project", workspaceCount)}
+      </section>
+      <p class="muted helper">Tasks run as one script in one dedicated terminal rooted at the selected workspace. Use <code>set -e</code> or <code>&amp;&amp;</code> when the script should stop after a failure.</p>
+      <div class="catalog-list">
+        ${this.filter === "all" || this.filter === "global" ? this.renderCatalog("global", "Global tasks", this.stateValue.global) : ""}
+        ${this.filter === "all" || this.filter === "workspace" ? this.renderCatalog("workspace", "Project tasks", this.stateValue.workspace) : ""}
+      </div>
+    `;
+    }
+    renderFilterButton(filter, label, count) {
+        return `<button type="button" class="scope-filter ${this.filter === filter ? "selected" : ""}" data-filter="${filter}" aria-pressed="${this.filter === filter ? "true" : "false"}">${escapeHtml(label)} <span class="count">${String(count)}</span></button>`;
+    }
+    renderCatalog(scope, heading, catalog) {
+        const label = scopeLabel(scope);
+        const warning = catalog.kind === "loaded" || catalog.kind === "missing"
+            ? catalog.refreshError === undefined ? "" : `<p class="status warning" data-refresh-error>${escapeHtml(catalog.refreshError)}</p>`
+            : "";
+        let body;
+        if (catalog.kind === "loading") {
+            body = `<p class="muted" data-catalog-loading>Loading ${escapeHtml(label)} tasks...</p>`;
         }
-        return this.renderConfigState(entry, showReset);
-    }
-    renderConfigState(entry, showReset) {
-        const state = entry.state;
-        if (state.kind === "loading")
-            return `<p class="muted" data-loading>Loading ${escapeHtml(TASKS_CONFIG_PATH)}...</p>`;
-        if (state.kind === "missing") {
-            return `${this.renderRefreshRequired(entry)}<div class="empty-state"><strong>${escapeHtml(state.message)}</strong><p>${escapeHtml(state.hint)}</p></div>`;
+        else if (catalog.kind === "invalid" || catalog.kind === "unavailable" || catalog.kind === "error") {
+            const hint = catalog.kind === "error" ? "" : `<p>${escapeHtml(catalog.hint)}</p>`;
+            const detail = catalog.kind === "invalid" || catalog.kind === "unavailable" && catalog.detail !== undefined
+                ? `<pre class="diagnostic">${escapeHtml(catalog.detail)}</pre>`
+                : "";
+            body = `<div class="status error" data-catalog-error><strong>${escapeHtml(catalog.message)}</strong>${hint}${detail}</div>`;
         }
-        if (state.kind === "invalid") {
-            return `
-        ${this.renderRefreshRequired(entry)}
-        <div class="status error" data-invalid-state>
-          <strong>${escapeHtml(state.message)}</strong>
-          <p>${escapeHtml(state.hint)}</p>
-          <pre class="diagnostic">${escapeHtml(state.detail)}</pre>
-          ${showReset ? `<button type="button" class="danger-secondary" data-reset-tasks-file>Reset Tasks File</button>` : ""}
-        </div>
-      `;
+        else if (catalog.kind === "missing") {
+            body = `${warning}<p class="empty-state"><strong>No Project task catalog is configured.</strong><span>Create ${escapeHtml(TASKS_CONFIG_PATH)} in this workspace or add a task here.</span></p>`;
         }
-        if (state.kind === "unavailable") {
-            return `
-        <div class="status error" data-unavailable-state>
-          <strong>${escapeHtml(state.message)}</strong>
-          <p>${escapeHtml(state.hint)}</p>
-          ${state.detail === undefined ? "" : `<pre class="diagnostic">${escapeHtml(state.detail)}</pre>`}
-        </div>
-      `;
+        else if (catalog.config.tasks.length === 0) {
+            body = `${warning}<p class="empty-state">No ${escapeHtml(label.toLowerCase())} tasks are defined.</p>`;
         }
-        if (state.config.tasks.length === 0) {
-            return `${this.renderRefreshRequired(entry)}<p class="muted">No tasks are defined in ${escapeHtml(state.path)}. Add tasks to the file, then click Refresh.</p>`;
+        else {
+            body = `${warning}${renderTaskGroups(scope, catalog.config.tasks, this.runningTaskKey, this.isScopeDisabled(scope), this.expandedGroupKeys)}`;
         }
-        return `
-      ${this.renderRefreshRequired(entry)}
-      <p class="muted">Tasks run as one script in one dedicated workspace terminal. Use <code>set -e</code> or <code>&amp;&amp;</code> when the script should stop after a failure.</p>
-      ${renderTaskGroups(state.config.tasks, this.runningTaskId, this.isRefreshRequired(entry) || this.operation !== undefined)}
-    `;
-    }
-    renderRefreshRequired(entry) {
-        if (!this.isRefreshRequired(entry))
-            return "";
-        return `<div class="status warning" data-refresh-required role="status">Refresh the workspace tasks file before making another change.</div>`;
+        return `<section class="scope-catalog" data-catalog-scope="${scope}">
+      <h3>${escapeHtml(heading)} <span class="catalog-count">${String(loadedCount(catalog))}</span></h3>
+      ${body}
+    </section>`;
     }
-    renderStatus() {
-        if (this.status === undefined)
-            return "";
-        const detail = this.status.detail === undefined ? "" : `<pre class="diagnostic">${escapeHtml(this.status.detail)}</pre>`;
-        return `<div class="status panel-status ${escapeAttr(this.status.kind)}" data-panel-status role="status" aria-live="polite" tabindex="-1">${escapeHtml(this.status.message)}${detail}</div>`;
-    }
-    renderEditor(entry, locked) {
+    renderEditor() {
         const editor = this.editor;
         if (editor === undefined)
             return "";
-        const validation = this.validateEditor(entry);
+        const targetScope = editor.draft.global ? "global" : "workspace";
+        const validation = this.validateEditor();
         const errors = this.validationErrors ?? {};
-        const titleError = errors.title;
-        const commandError = errors.command;
-        const idError = errors.id;
-        const saveDisabled = locked
-            || this.operation !== undefined
-            || this.isRefreshRequired(entry)
-            || (entry.state.kind !== "loaded" && entry.state.kind !== "missing")
-            || !validation.ok;
-        const titleDescribedBy = titleError === undefined ? "" : ` aria-describedby="task-title-error"`;
-        const idDescribedBy = idError === undefined ? "" : ` aria-describedby="task-id-error"`;
-        const commandDescribedBy = commandError === undefined ? "task-command-help" : "task-command-help task-command-error";
-        const heading = editor.originalIndex === undefined ? "Add Task" : "Edit Task";
-        const failureRefresh = locked ? `<button type="button" class="secondary" data-refresh-after-failure>Refresh</button>` : "";
+        const locked = this.operation !== undefined || this.stateValue.move !== undefined || this.isScopeDisabled(targetScope);
+        const canWrite = this.canWriteScope(targetScope);
+        const saveDisabled = locked || !canWrite || !validation.ok;
+        const heading = editor.sourceRef === undefined ? "Add Task" : "Edit Task";
+        const sourceLabel = editor.sourceRef === undefined ? scopeLabel(targetScope) : scopeLabel(editor.sourceRef.scope);
         return `
       <section class="task-editor" data-task-editor>
-        <h3>${heading}</h3>
+        <div class="editor-heading"><h3>${heading}</h3><span class="scope-badge" data-scope-badge>${escapeHtml(`${sourceLabel} task`)}</span></div>
         <form class="task-form" data-task-form>
           <label for="task-title">Title <span class="required" aria-hidden="true">*</span></label>
-          <input id="task-title" name="title" type="text" value="${escapeAttr(editor.draft.title)}" placeholder="Build app" data-editor-title aria-required="true"${titleError === undefined ? "" : ` aria-invalid="true"`}${titleDescribedBy} ${locked ? "disabled" : ""}>
-          ${renderFieldError("title", titleError)}
+          <input id="task-title" name="title" type="text" value="${escapeAttr(editor.draft.title)}" placeholder="Build app" data-editor-title aria-required="true"${fieldAttrs("title", errors.title, locked)}>
+          ${renderFieldError("title", errors.title)}
 
           <label for="task-command">Command script <span class="required" aria-hidden="true">*</span></label>
-          <textarea id="task-command" name="command" data-editor-command aria-required="true" aria-describedby="${commandDescribedBy}"${commandError === undefined ? "" : ` aria-invalid="true"`}${locked ? " disabled" : ""}>${escapeHtml(editor.draft.command)}</textarea>
+          <textarea id="task-command" name="command" data-editor-command aria-required="true" aria-describedby="task-command-help${errors.command === undefined ? "" : " task-command-error"}"${errors.command === undefined ? "" : " aria-invalid=\"true\""}${locked ? " disabled" : ""}>${escapeHtml(editor.draft.command)}</textarea>
           <p id="task-command-help" class="field-help">Runs once in one terminal through the server shell. Use <code>set -e</code> or <code>&amp;&amp;</code> for fail-fast behavior.</p>
-          ${renderFieldError("command", commandError)}
+          ${renderFieldError("command", errors.command)}
 
           <label for="task-id">ID <span class="required" aria-hidden="true">*</span></label>
-          <input id="task-id" name="id" type="text" value="${escapeAttr(editor.draft.id)}" placeholder="Auto-generated from title" data-editor-id aria-required="true"${idError === undefined ? "" : ` aria-invalid="true"`}${idDescribedBy} ${locked ? "disabled" : ""}>
-          ${renderFieldError("id", idError)}
+          <input id="task-id" name="id" type="text" value="${escapeAttr(editor.draft.id)}" placeholder="Auto-generated from title" data-editor-id aria-required="true"${fieldAttrs("id", errors.id, locked)}>
+          ${renderFieldError("id", errors.id)}
 
           <label for="task-description">Description</label>
           <input id="task-description" name="description" type="text" value="${escapeAttr(editor.draft.description)}" placeholder="Optional description" data-editor-description ${locked ? "disabled" : ""}>
@@ -257,6 +281,12 @@ class PiWebUiTasksPanel extends HTMLElement {
           <label for="task-group">Group</label>
           <input id="task-group" name="group" type="text" value="${escapeAttr(editor.draft.group)}" placeholder="Optional group name" data-editor-group ${locked ? "disabled" : ""}>
 
+          <span class="checkbox-field">
+            <input id="task-global" name="global" type="checkbox" data-editor-global ${editor.draft.global ? "checked" : ""} ${locked ? "disabled" : ""}>
+            <label for="task-global">Available in all projects on this machine</label>
+          </span>
+          <p class="field-help" data-scope-help>Global definitions run in the currently selected workspace root. Project definitions are stored in ${escapeHtml(TASKS_CONFIG_PATH)} for this workspace.</p>
+
           <span class="checkbox-field">
             <input id="task-confirm" name="confirm" type="checkbox" ${editor.draft.confirm ? "checked" : ""} data-editor-confirm ${locked ? "disabled" : ""}>
             <label for="task-confirm">Require confirmation before running</label>
@@ -264,258 +294,219 @@ class PiWebUiTasksPanel extends HTMLElement {
 
           <div class="editor-actions">
             <button type="button" class="secondary" data-cancel-editor>Cancel</button>
-            ${failureRefresh}
             <button type="button" class="primary" data-save-task ${saveDisabled ? "disabled" : ""}>Save Task</button>
           </div>
         </form>
       </section>
     `;
     }
-    renderDeleteConfirmation(locked) {
-        const state = this.deleteState;
-        if (state === undefined)
+    renderDeleteConfirmation() {
+        const pending = this.deleteState;
+        if (pending === undefined)
             return "";
-        return `
-      <section class="confirmation" data-delete-confirmation>
-        <h3>Delete Task</h3>
-        <p>Are you sure you want to delete <strong>${escapeHtml(state.task.title)}</strong>?</p>
-        <pre class="task-script">${escapeHtml(state.task.command)}</pre>
-        <div class="editor-actions">
-          <button type="button" class="secondary" data-cancel-delete>Cancel</button>
-          ${locked ? `<button type="button" class="secondary" data-refresh-after-failure>Refresh</button>` : `<button type="button" class="danger" data-confirm-delete ${this.operation === undefined ? "" : "disabled"}>Delete Task</button>`}
-        </div>
-      </section>
-    `;
+        const label = scopeLabel(pending.ref.scope);
+        return `<section class="confirmation" data-delete-confirmation>
+      <div class="editor-heading"><h3>Delete Task</h3><span class="scope-badge">${escapeHtml(`${label} task`)}</span></div>
+      <p>Are you sure you want to delete <strong>${escapeHtml(pending.task.title)}</strong> (${escapeHtml(label)})?</p>
+      <pre class="task-script">${escapeHtml(pending.task.command)}</pre>
+      <div class="editor-actions">
+        <button type="button" class="secondary" data-cancel-delete>Cancel</button>
+        <button type="button" class="danger" data-confirm-delete aria-label="Delete ${escapeAttr(pending.task.title)} (${escapeAttr(label)})" ${this.operation === undefined && !this.isScopeDisabled(pending.ref.scope) ? "" : "disabled"}>Delete Task</button>
+      </div>
+    </section>`;
     }
-    renderResetConfirmation(locked) {
-        if (this.resetState === undefined)
+    renderMoveConfirmation() {
+        const editor = this.editor;
+        if (editor?.sourceRef === undefined)
             return "";
-        return `
-      <section class="confirmation" data-reset-confirmation>
-        <h3>Reset Tasks File</h3>
-        <p>This replaces the invalid contents of <code>${escapeHtml(TASKS_CONFIG_PATH)}</code> with an empty version 1 tasks file.</p>
-        <div class="editor-actions">
-          <button type="button" class="secondary" data-cancel-reset>Cancel</button>
-          ${locked ? `<button type="button" class="secondary" data-refresh-after-failure>Refresh</button>` : `<button type="button" class="danger" data-confirm-reset ${this.operation === undefined ? "" : "disabled"}>Reset Tasks File</button>`}
-        </div>
-      </section>
-    `;
+        const source = scopeLabel(editor.sourceRef.scope);
+        const destination = scopeLabel(editor.draft.global ? "global" : "workspace");
+        const validation = this.validateEditor();
+        return `<section class="confirmation" data-move-confirmation>
+      <div class="editor-heading"><h3>Change Task Scope</h3><span class="scope-badge">${escapeHtml(`${source} to ${destination}`)}</span></div>
+      <p>Move <strong>${escapeHtml(editor.draft.title)}</strong> from ${escapeHtml(source)} to ${escapeHtml(destination)}? The source definition will be removed.</p>
+      <pre class="task-script">${escapeHtml(validation.ok ? validation.task.command : editor.draft.command)}</pre>
+      <div class="editor-actions">
+        <button type="button" class="secondary" data-cancel-move>Cancel</button>
+        <button type="button" class="primary" data-confirm-move ${this.operation === undefined && validation.ok ? "" : "disabled"}>Confirm move</button>
+      </div>
+    </section>`;
     }
     renderRefreshDiscardConfirmation() {
-        return `
-      <section class="confirmation" data-refresh-discard-confirmation>
-        <h3>Discard draft and refresh?</h3>
-        <p>Your unsaved task draft will be discarded. Refresh loads the authoritative workspace file.</p>
-        <div class="editor-actions">
-          <button type="button" class="secondary" data-cancel-refresh-discard>Cancel</button>
-          <button type="button" class="primary" data-confirm-refresh-discard>Discard &amp; Refresh</button>
-        </div>
-      </section>
-    `;
+        return `<section class="confirmation" data-refresh-discard-confirmation>
+      <h3>Discard draft and refresh?</h3>
+      <p>Your unsaved task draft will be discarded. Refresh loads the authoritative catalogs.</p>
+      <div class="editor-actions">
+        <button type="button" class="secondary" data-cancel-refresh-discard>Cancel</button>
+        <button type="button" class="primary" data-confirm-refresh-discard>Discard &amp; Refresh</button>
+      </div>
+    </section>`;
     }
-    bindHandlers(context) {
-        this.root.querySelector("button[data-add-task]")?.addEventListener("click", () => {
-            this.openAddTaskEditor();
-        });
-        this.root.querySelector("button[data-refresh-config]")?.addEventListener("click", () => {
-            void this.requestRefresh(context);
-        });
-        this.root.querySelector("button[data-open-terminal]")?.addEventListener("click", () => {
-            this.openWorkspaceTerminal();
-        });
-        this.root.querySelector("button[data-reset-tasks-file]")?.addEventListener("click", () => {
-            this.openResetConfirmation(context);
-        });
-        this.root.querySelector("button[data-cancel-editor]")?.addEventListener("click", () => {
-            this.cancelEditor();
-        });
-        this.root.querySelector("button[data-save-task]")?.addEventListener("click", () => {
-            void this.saveTask(context);
-        });
-        this.root.querySelector("button[data-cancel-delete]")?.addEventListener("click", () => {
-            this.cancelDelete();
-        });
-        this.root.querySelector("button[data-confirm-delete]")?.addEventListener("click", () => {
-            void this.confirmDelete(context);
-        });
-        this.root.querySelector("button[data-cancel-reset]")?.addEventListener("click", () => {
-            this.cancelReset();
-        });
-        this.root.querySelector("button[data-confirm-reset]")?.addEventListener("click", () => {
-            void this.confirmReset(context);
-        });
-        this.root.querySelector("button[data-cancel-refresh-discard]")?.addEventListener("click", () => {
-            this.cancelRefreshDiscard();
-        });
-        this.root.querySelector("button[data-confirm-refresh-discard]")?.addEventListener("click", () => {
-            void this.confirmRefreshDiscard(context);
-        });
-        this.root.querySelector("button[data-refresh-after-failure]")?.addEventListener("click", () => {
-            void this.requestRefresh(context, true);
-        });
-        for (const button of this.root.querySelectorAll("button[data-task-id]")) {
+    bindHandlers() {
+        this.root.querySelector("[data-add-task]")?.addEventListener("click", () => { this.openAddTaskEditor(); });
+        this.root.querySelector("[data-refresh]")?.addEventListener("click", () => { void this.requestRefresh(); });
+        this.root.querySelector("[data-open-terminal]")?.addEventListener("click", () => { this.openWorkspaceTerminal(); });
+        this.root.querySelector("[data-retry-move]")?.addEventListener("click", () => { void this.retryMove(); });
+        this.root.querySelector("[data-cancel-editor]")?.addEventListener("click", () => { this.cancelEditor(); });
+        this.root.querySelector("[data-save-task]")?.addEventListener("click", () => { void this.saveTask(); });
+        this.root.querySelector("[data-cancel-delete]")?.addEventListener("click", () => { this.cancelDelete(); });
+        this.root.querySelector("[data-confirm-delete]")?.addEventListener("click", () => { void this.confirmDelete(); });
+        this.root.querySelector("[data-cancel-move]")?.addEventListener("click", () => { this.cancelMove(); });
+        this.root.querySelector("[data-confirm-move]")?.addEventListener("click", () => { void this.confirmMove(); });
+        this.root.querySelector("[data-cancel-refresh-discard]")?.addEventListener("click", () => { this.cancelRefreshDiscard(); });
+        this.root.querySelector("[data-confirm-refresh-discard]")?.addEventListener("click", () => { void this.confirmRefreshDiscard(); });
+        for (const button of this.root.querySelectorAll("button[data-filter]")) {
             button.addEventListener("click", () => {
-                void this.dispatchTaskById(context, button.getAttribute("data-task-id"));
+                const value = button.getAttribute("data-filter");
+                if (value === "all" || value === "global" || value === "workspace") {
+                    this.filter = value;
+                    this.render();
+                }
             });
         }
         for (const button of this.root.querySelectorAll("button[data-edit-task]")) {
-            button.addEventListener("click", () => {
-                this.openEditTaskEditor(context, button.getAttribute("data-edit-task"));
-            });
+            button.addEventListener("click", () => { this.openEditTaskEditor(button.getAttribute("data-edit-task")); });
         }
         for (const button of this.root.querySelectorAll("button[data-delete-task]")) {
-            button.addEventListener("click", () => {
-                this.openDeleteConfirmation(context, button.getAttribute("data-delete-task"));
+            button.addEventListener("click", () => { this.openDeleteConfirmation(button.getAttribute("data-delete-task")); });
+        }
+        for (const button of this.root.querySelectorAll("button[data-run-task]")) {
+            button.addEventListener("click", () => { void this.dispatchTask(button.getAttribute("data-run-task")); });
+        }
+        for (const details of this.root.querySelectorAll("details[data-group-key]")) {
+            details.addEventListener("toggle", () => {
+                const key = details.getAttribute("data-group-key");
+                if (key === null)
+                    return;
+                if (details.open)
+                    this.expandedGroupKeys.add(key);
+                else
+                    this.expandedGroupKeys.delete(key);
             });
         }
-        const title = this.root.querySelector("input[data-editor-title]");
+        this.bindEditorInputs();
+    }
+    bindEditorInputs() {
+        const title = this.root.querySelector("[data-editor-title]");
         title?.addEventListener("input", (event) => {
             if (!(event.target instanceof HTMLInputElement) || this.editor === undefined)
                 return;
             this.editor.draft.title = event.target.value;
             if (!this.idManuallyEdited) {
                 this.editor.draft.id = suggestWorkspaceTaskId(event.target.value);
-                const id = this.root.querySelector("input[data-editor-id]");
+                const id = this.root.querySelector("[data-editor-id]");
                 if (id !== null)
                     id.value = this.editor.draft.id;
             }
-            this.updateValidationInPlace(context);
+            this.updateValidationInPlace();
         });
-        const id = this.root.querySelector("input[data-editor-id]");
+        const id = this.root.querySelector("[data-editor-id]");
         id?.addEventListener("input", (event) => {
             if (!(event.target instanceof HTMLInputElement) || this.editor === undefined)
                 return;
             this.editor.draft.id = event.target.value;
             this.idManuallyEdited = true;
-            this.updateValidationInPlace(context);
+            this.updateValidationInPlace();
         });
-        const command = this.root.querySelector("textarea[data-editor-command]");
+        const command = this.root.querySelector("[data-editor-command]");
         command?.addEventListener("input", (event) => {
             if (!(event.target instanceof HTMLTextAreaElement) || this.editor === undefined)
                 return;
             this.editor.draft.command = event.target.value;
-            this.updateValidationInPlace(context);
+            this.updateValidationInPlace();
         });
-        const description = this.root.querySelector("input[data-editor-description]");
-        description?.addEventListener("input", (event) => {
-            if (!(event.target instanceof HTMLInputElement) || this.editor === undefined)
-                return;
-            this.editor.draft.description = event.target.value;
-            this.updateValidationInPlace(context);
-        });
-        const group = this.root.querySelector("input[data-editor-group]");
-        group?.addEventListener("input", (event) => {
+        for (const [selector, field] of [["[data-editor-description]", "description"], ["[data-editor-group]", "group"]]) {
+            this.root.querySelector(selector)?.addEventListener("input", (event) => {
+                if (!(event.target instanceof HTMLInputElement) || this.editor === undefined)
+                    return;
+                this.editor.draft[field] = event.target.value;
+                this.updateValidationInPlace();
+            });
+        }
+        this.root.querySelector("[data-editor-global]")?.addEventListener("change", (event) => {
             if (!(event.target instanceof HTMLInputElement) || this.editor === undefined)
                 return;
-            this.editor.draft.group = event.target.value;
-            this.updateValidationInPlace(context);
+            this.editor.draft.global = event.target.checked;
+            this.updateValidationInPlace();
+            const badge = this.root.querySelector("[data-scope-badge]");
+            if (badge !== null)
+                badge.textContent = `${scopeLabel(this.editor.draft.global ? "global" : "workspace")} task`;
         });
-        const confirm = this.root.querySelector("input[data-editor-confirm]");
-        confirm?.addEventListener("change", (event) => {
+        this.root.querySelector("[data-editor-confirm]")?.addEventListener("change", (event) => {
             if (!(event.target instanceof HTMLInputElement) || this.editor === undefined)
                 return;
             this.editor.draft.confirm = event.target.checked;
-            this.updateValidationInPlace(context);
+            this.updateValidationInPlace();
         });
-        this.root.querySelector("form[data-task-form]")?.addEventListener("submit", (event) => {
+        this.root.querySelector("[data-task-form]")?.addEventListener("submit", (event) => {
             event.preventDefault();
-            void this.saveTask(context);
+            void this.saveTask();
         });
     }
     openAddTaskEditor() {
-        const context = this.contextValue;
-        if (context === undefined || this.operation !== undefined)
-            return;
-        const entry = getWorkspaceTasksCacheEntry(cacheKeyForContext(context));
-        if (entry === undefined || this.isRefreshRequired(entry) || (entry.state.kind !== "loaded" && entry.state.kind !== "missing"))
+        if (this.contextValue === undefined || this.operation !== undefined || !this.canWriteScope("workspace") && !this.canWriteScope("global"))
             return;
         const draft = emptyDraft();
-        this.editor = {
-            draft,
-            initialDraft: cloneDraft(draft),
-            sourceSnapshot: entry.state.snapshot,
-            originalIndex: undefined,
-            focusReturn: { kind: "add" },
-        };
+        this.editor = { draft, initialDraft: cloneDraft(draft), sourceRef: undefined, originalIndex: undefined, focusReturn: { kind: "add" } };
         this.mode = "add";
-        this.failure = undefined;
+        this.status = undefined;
         this.validationErrors = undefined;
         this.idManuallyEdited = false;
-        this.status = undefined;
+        this.moveRecoveryObserved = false;
         this.render();
-        this.focusSelector("input[data-editor-title]");
+        this.focusSelector("[data-editor-title]");
     }
-    openEditTaskEditor(context, taskId) {
-        if (!this.isCurrentContext(context) || this.operation !== undefined || taskId === null)
+    openEditTaskEditor(key) {
+        if (this.operation !== undefined || key === null)
             return;
-        const entry = getWorkspaceTasksCacheEntry(cacheKeyForContext(context));
-        if (entry === undefined || this.isRefreshRequired(entry) || entry.state.kind !== "loaded")
+        const ref = parseRef(key);
+        if (ref === undefined)
             return;
-        const index = entry.state.config.tasks.findIndex((task) => task.id === taskId);
-        const task = index < 0 ? undefined : entry.state.config.tasks[index];
-        if (task === undefined) {
-            this.setError("That task is no longer available. Click Refresh, then try again.");
+        const found = this.findTask(ref);
+        if (found === undefined) {
+            this.setError("That task is no longer available. Refresh, then try again.");
             return;
         }
         const draft = {
-            id: task.id,
-            title: task.title,
-            command: task.command,
-            description: task.description ?? "",
-            group: task.group ?? "",
-            confirm: task.confirm,
+            id: found.task.id,
+            title: found.task.title,
+            command: found.task.command,
+            description: found.task.description ?? "",
+            group: found.task.group ?? "",
+            confirm: found.task.confirm,
+            global: ref.scope === "global",
         };
         this.editor = {
             draft,
             initialDraft: cloneDraft(draft),
-            sourceSnapshot: entry.state.snapshot,
-            originalIndex: index,
-            focusReturn: { kind: "edit", id: task.id },
+            sourceRef: ref,
+            originalIndex: found.index,
+            focusReturn: { kind: "edit", ref },
         };
         this.mode = "edit";
-        this.failure = undefined;
+        this.status = undefined;
         this.validationErrors = undefined;
         this.idManuallyEdited = true;
-        this.status = undefined;
+        this.moveRecoveryObserved = false;
         this.render();
-        this.focusSelector("input[data-editor-title]");
+        this.focusSelector("[data-editor-title]");
     }
-    openDeleteConfirmation(context, taskId) {
-        if (!this.isCurrentContext(context) || this.operation !== undefined || taskId === null)
+    openDeleteConfirmation(key) {
+        if (this.operation !== undefined || key === null)
             return;
-        const entry = getWorkspaceTasksCacheEntry(cacheKeyForContext(context));
-        if (entry === undefined || this.isRefreshRequired(entry) || entry.state.kind !== "loaded")
+        const ref = parseRef(key);
+        if (ref === undefined)
             return;
-        const index = entry.state.config.tasks.findIndex((task) => task.id === taskId);
-        const task = index < 0 ? undefined : entry.state.config.tasks[index];
-        if (task === undefined) {
-            this.setError("That task is no longer available. Click Refresh, then try again.");
+        const found = this.findTask(ref);
+        if (found === undefined) {
+            this.setError("That task is no longer available. Refresh, then try again.");
             return;
         }
-        this.deleteState = {
-            task,
-            index,
-            sourceSnapshot: entry.state.snapshot,
-            focusReturn: { kind: "delete", id: task.id },
-        };
+        this.deleteState = { ref, task: cloneTask(found.task), focusReturn: { kind: "delete", ref } };
         this.mode = "delete-confirm";
-        this.failure = undefined;
-        this.status = undefined;
-        this.render();
-        this.focusSelector("button[data-cancel-delete]");
-    }
-    openResetConfirmation(context) {
-        if (!this.isCurrentContext(context) || this.operation !== undefined)
-            return;
-        const entry = getWorkspaceTasksCacheEntry(cacheKeyForContext(context));
-        if (entry === undefined || this.isRefreshRequired(entry) || entry.state.kind !== "invalid")
-            return;
-        this.resetState = { sourceSnapshot: entry.state.snapshot, focusReturn: { kind: "reset" } };
-        this.mode = "reset-confirm";
-        this.failure = undefined;
         this.status = undefined;
         this.render();
-        this.focusSelector("button[data-cancel-reset]");
+        this.focusSelector("[data-cancel-delete]");
     }
     cancelEditor() {
         if (this.operation !== undefined)
@@ -524,7 +515,7 @@ class PiWebUiTasksPanel extends HTMLElement {
         this.editor = undefined;
         this.validationErrors = undefined;
         this.idManuallyEdited = false;
-        this.failure = undefined;
+        this.moveRecoveryObserved = false;
         this.mode = "view";
         this.status = undefined;
         this.render();
@@ -535,104 +526,94 @@ class PiWebUiTasksPanel extends HTMLElement {
             return;
         const target = this.deleteState?.focusReturn;
         this.deleteState = undefined;
-        this.failure = undefined;
         this.mode = "view";
         this.status = undefined;
         this.render();
         this.focusTarget(target);
     }
-    cancelReset() {
-        if (this.operation !== undefined)
+    cancelMove() {
+        if (this.operation !== undefined || this.editor === undefined)
             return;
-        const target = this.resetState?.focusReturn;
-        this.resetState = undefined;
-        this.failure = undefined;
-        this.mode = "view";
-        this.status = undefined;
+        this.mode = this.editor.sourceRef === undefined ? "add" : "edit";
         this.render();
-        this.focusTarget(target);
+        this.focusSelector("[data-editor-title]");
     }
     cancelRefreshDiscard() {
         if (this.operation !== undefined)
             return;
         const target = this.editor?.focusReturn;
-        this.mode = this.editor === undefined ? "view" : this.editor.originalIndex === undefined ? "add" : "edit";
+        this.mode = this.editor?.sourceRef === undefined ? "add" : "edit";
         this.pendingRefreshFocus = undefined;
         this.render();
         this.focusTarget(target);
     }
-    async confirmRefreshDiscard(context) {
+    async confirmRefreshDiscard() {
         if (this.mode !== "refresh-discard-confirm")
             return;
         const target = this.pendingRefreshFocus ?? { kind: "refresh" };
         this.editor = undefined;
         this.deleteState = undefined;
-        this.resetState = undefined;
-        this.failure = undefined;
         this.validationErrors = undefined;
         this.idManuallyEdited = false;
+        this.moveRecoveryObserved = false;
+        this.mode = "view";
         this.pendingRefreshFocus = target;
-        await this.requestRefresh(context, true);
+        await this.requestRefresh(true);
     }
-    async requestRefresh(context, force = false) {
-        if (!this.isCurrentContext(context) || this.operation !== undefined)
-            return;
-        if (!force && this.isConfirmationMode())
+    async requestRefresh(force = false) {
+        if (this.operation !== undefined)
             return;
-        if (!force && (this.mode === "add" || this.mode === "edit") && this.editor !== undefined && this.isEditorDirty()) {
-            this.pendingRefreshFocus = this.editor.focusReturn;
+        if (!force && this.isEditorDirty()) {
+            this.pendingRefreshFocus = this.editor?.focusReturn;
             this.mode = "refresh-discard-confirm";
             this.status = undefined;
             this.render();
-            this.focusSelector("button[data-cancel-refresh-discard]");
+            this.focusSelector("[data-cancel-refresh-discard]");
             return;
         }
         const target = this.pendingRefreshFocus ?? this.editor?.focusReturn ?? { kind: "refresh" };
         this.pendingRefreshFocus = undefined;
         this.editor = undefined;
         this.deleteState = undefined;
-        this.resetState = undefined;
-        this.failure = undefined;
         this.validationErrors = undefined;
         this.idManuallyEdited = false;
+        this.moveRecoveryObserved = false;
         this.mode = "view";
-        this.operation = "refresh";
-        const operationGeneration = ++this.operationGeneration;
-        const selectionGeneration = this.selectionGeneration;
-        this.status = { kind: "info", message: `Refreshing ${TASKS_CONFIG_PATH}...` };
+        this.operation = { kind: "refresh", scopes: [] };
+        const observation = this.captureActionState();
+        const generation = this.selectionGeneration;
+        const pending = {
+            kind: "refresh",
+            generation,
+            scopes: ["workspace", "global"],
+            observation,
+            focusReturn: target,
+            settled: false,
+        };
+        this.pendingAction = pending;
+        this.status = { kind: "info", message: "Refreshing workspace task catalogs..." };
         this.render();
         try {
-            const state = await refreshWorkspaceTasksConfig(context.files, cacheKeyForContext(context));
-            if (!this.ownsOperation(context, selectionGeneration, operationGeneration))
+            await this.actionsValue.refresh();
+            if (!this.ownsSelection(generation) || this.pendingAction !== pending)
                 return;
-            const entry = getWorkspaceTasksCacheEntry(cacheKeyForContext(context));
-            if (entry?.state !== state) {
-                this.operation = undefined;
-                this.status = undefined;
-                this.render();
-                return;
-            }
-            this.panelRefreshRequired = false;
-            this.operation = undefined;
-            this.status = refreshStatus(state);
-            this.render();
-            this.focusTarget(target);
+            pending.settled = true;
+            this.reconcilePendingAction();
         }
         catch (error) {
-            if (!this.ownsOperation(context, selectionGeneration, operationGeneration))
+            if (!this.ownsSelection(generation) || this.pendingAction !== pending)
                 return;
+            this.pendingAction = undefined;
             this.operation = undefined;
-            this.status = { kind: "error", message: `Could not refresh ${TASKS_CONFIG_PATH}.`, detail: formatError(error) };
+            this.status = { kind: "error", message: "Could not refresh workspace task catalogs.", detail: formatError(error) };
             this.render();
         }
     }
-    async saveTask(context) {
-        if (!this.isCurrentContext(context) || this.operation !== undefined || this.editor === undefined || (this.mode !== "add" && this.mode !== "edit"))
-            return;
-        const entry = getWorkspaceTasksCacheEntry(cacheKeyForContext(context));
-        if (entry === undefined)
+    async saveTask() {
+        const editor = this.editor;
+        if (editor === undefined || this.operation !== undefined || (this.mode !== "add" && this.mode !== "edit"))
             return;
-        const validation = this.validateEditor(entry);
+        const validation = this.validateEditor();
         if (!validation.ok) {
             this.validationErrors = validation.errors;
             this.status = { kind: "error", message: "Fix the highlighted fields before saving." };
@@ -640,231 +621,249 @@ class PiWebUiTasksPanel extends HTMLElement {
             this.focusFirstInvalid(validation.errors);
             return;
         }
-        if (entry.state.kind !== "loaded" && entry.state.kind !== "missing") {
-            this.enterFailure("preflight-unavailable", "The current tasks file could not be verified. Refresh before trying again.", "editor");
+        const destinationScope = editor.draft.global ? "global" : "workspace";
+        if (!this.canWriteScope(destinationScope))
+            return;
+        if (editor.sourceRef !== undefined && editor.sourceRef.scope !== destinationScope) {
+            this.mode = "move-confirm";
+            this.status = undefined;
+            this.render();
+            this.focusSelector("[data-cancel-move]");
+            return;
+        }
+        if (editor.sourceRef !== undefined && !this.isEditorDirty()) {
+            const target = editor.focusReturn;
+            this.editor = undefined;
+            this.mode = "view";
+            this.validationErrors = undefined;
+            this.idManuallyEdited = false;
+            this.status = { kind: "info", message: "No changes to save." };
+            this.render();
+            this.focusTarget(target);
             return;
         }
+        const generation = this.selectionGeneration;
+        const observation = this.captureActionState();
+        const pending = {
+            kind: "save",
+            generation,
+            scopes: [destinationScope],
+            observation,
+            focusReturn: editor.focusReturn,
+            scope: destinationScope,
+            task: cloneTask(validation.task),
+            settled: false,
+        };
+        this.pendingAction = pending;
+        this.operation = { kind: "mutation", scopes: [destinationScope] };
+        this.status = { kind: "info", message: editor.sourceRef === undefined ? "Creating workspace task..." : "Saving workspace task..." };
+        this.render();
+        try {
+            if (editor.sourceRef === undefined)
+                await this.actionsValue.create(destinationScope, validation.task);
+            else
+                await this.actionsValue.update(editor.sourceRef, validation.task);
+            if (!this.ownsSelection(generation) || this.pendingAction !== pending)
+                return;
+            pending.settled = true;
+            this.reconcilePendingAction();
+        }
+        catch (error) {
+            if (!this.ownsSelection(generation) || this.pendingAction !== pending)
+                return;
+            this.pendingAction = undefined;
+            this.operation = undefined;
+            this.status = { kind: "error", message: "Could not save workspace task.", detail: formatError(error) };
+            this.render();
+        }
+    }
+    async confirmMove() {
         const editor = this.editor;
-        const nextConfig = this.mode === "add"
-            ? appendWorkspaceTask(entry.state.kind === "loaded" ? entry.state.config : emptyWorkspaceTasksConfig, validation.task)
-            : this.buildEditedConfig(entry, validation.task);
-        if (nextConfig === undefined)
+        if (editor?.sourceRef === undefined || this.operation !== undefined || this.mode !== "move-confirm")
+            return;
+        const validation = this.validateEditor();
+        if (!validation.ok)
             return;
-        const operationGeneration = ++this.operationGeneration;
-        const selectionGeneration = this.selectionGeneration;
-        this.operation = "mutation";
-        this.status = { kind: "info", message: "Saving workspace task..." };
+        const generation = this.selectionGeneration;
+        this.operation = { kind: "mutation", scopes: ["workspace", "global"] };
+        this.status = { kind: "info", message: "Moving workspace task..." };
         this.render();
         try {
-            const result = await guardedWriteWorkspaceTasksConfig(context.files, cacheKeyForContext(context), editor.sourceSnapshot, nextConfig);
-            if (!this.ownsOperation(context, selectionGeneration, operationGeneration))
+            await this.actionsValue.move(editor.sourceRef, validation.task);
+            if (!this.ownsSelection(generation))
                 return;
             this.operation = undefined;
-            if (result.kind === "written") {
-                const title = validation.task.title;
-                this.mode = "view";
-                this.editor = undefined;
-                this.validationErrors = undefined;
-                this.idManuallyEdited = false;
-                this.failure = undefined;
-                this.status = { kind: "success", message: `Saved task "${title}".` };
+            if (this.stateValue.move !== undefined || this.stateValue.moveError !== undefined || this.mutationBlocked("workspace") || this.mutationBlocked("global")) {
+                if (this.stateValue.moveError === undefined) {
+                    this.status = this.stateValue.move === undefined ? { kind: "error", message: this.stateValue.mutationGate?.message ?? "Refresh before trying another task change." } : undefined;
+                }
                 this.render();
-                this.focusTarget(editor.focusReturn);
                 return;
             }
-            this.applyWriteFailure(result, "editor");
+            if (this.moveRecoveryObserved && !this.isMoveComplete(editor, this.stateValue)) {
+                this.status = { kind: "info", message: "Move was not completed. Confirm the move again after reviewing the catalogs." };
+                this.render();
+                return;
+            }
+            const target = editor.focusReturn;
+            this.editor = undefined;
+            this.mode = "view";
+            this.validationErrors = undefined;
+            this.moveRecoveryObserved = false;
+            this.status = { kind: "success", message: `Moved task "${validation.task.title}".` };
+            this.render();
+            this.focusTarget(target);
         }
         catch (error) {
-            if (!this.ownsOperation(context, selectionGeneration, operationGeneration))
+            if (!this.ownsSelection(generation))
                 return;
             this.operation = undefined;
-            this.applyWriteFailure({ kind: "write-failed", detail: `Unable to write ${TASKS_CONFIG_PATH}: ${formatError(error)}` }, "editor");
-        }
-    }
-    buildEditedConfig(entry, task) {
-        const editor = this.editor;
-        if (entry.state.kind !== "loaded" || editor?.originalIndex === undefined)
-            return undefined;
-        const original = entry.state.config.tasks[editor.originalIndex];
-        if (original?.id !== editor.initialDraft.id) {
-            this.enterFailure("conflict", "The task list changed outside this panel. Refresh before trying again.", "editor");
-            return undefined;
+            this.status = { kind: "error", message: "Could not move workspace task.", detail: formatError(error) };
+            this.render();
         }
-        return replaceWorkspaceTaskAt(entry.state.config, editor.originalIndex, task);
     }
-    async confirmDelete(context) {
-        if (!this.isCurrentContext(context) || this.operation !== undefined || this.deleteState === undefined || this.mode !== "delete-confirm")
-            return;
-        const entry = getWorkspaceTasksCacheEntry(cacheKeyForContext(context));
+    async confirmDelete() {
         const pending = this.deleteState;
-        if (entry?.state.kind !== "loaded" || this.isRefreshRequired(entry) || entry.state.config.tasks[pending.index]?.id !== pending.task.id) {
-            this.enterFailure("conflict", "The task list changed outside this panel. Refresh before trying again.", "delete");
+        if (pending === undefined || this.operation !== undefined || this.isScopeDisabled(pending.ref.scope))
             return;
-        }
-        let nextConfig;
+        const generation = this.selectionGeneration;
+        const observation = this.captureActionState();
+        const pendingAction = {
+            kind: "delete",
+            generation,
+            scopes: [pending.ref.scope],
+            observation,
+            focusReturn: pending.focusReturn,
+            ref: { ...pending.ref },
+            task: cloneTask(pending.task),
+            settled: false,
+        };
+        this.pendingAction = pendingAction;
+        this.operation = { kind: "mutation", scopes: [pending.ref.scope] };
+        this.status = { kind: "info", message: "Deleting workspace task..." };
+        this.render();
         try {
-            nextConfig = removeWorkspaceTaskAt(entry.state.config, pending.index);
+            await this.actionsValue.remove(pending.ref);
+            if (!this.ownsSelection(generation) || this.pendingAction !== pendingAction)
+                return;
+            pendingAction.settled = true;
+            this.reconcilePendingAction();
         }
         catch (error) {
-            this.enterFailure("conflict", formatError(error), "delete");
-            return;
+            if (!this.ownsSelection(generation) || this.pendingAction !== pendingAction)
+                return;
+            this.pendingAction = undefined;
+            this.operation = undefined;
+            this.status = { kind: "error", message: "Could not delete workspace task.", detail: formatError(error) };
+            this.render();
         }
-        await this.performMutation(context, pending.sourceSnapshot, nextConfig, "delete", pending.task.title, pending.focusReturn);
     }
-    async confirmReset(context) {
-        if (!this.isCurrentContext(context) || this.operation !== undefined || this.resetState === undefined || this.mode !== "reset-confirm")
+    async retryMove() {
+        if (this.operation !== undefined || this.stateValue.move?.retryAllowed !== true)
             return;
-        const pending = this.resetState;
-        await this.performMutation(context, pending.sourceSnapshot, emptyWorkspaceTasksConfig, "reset", undefined, pending.focusReturn);
-    }
-    async performMutation(context, sourceSnapshot, nextConfig, action, title, focusReturn) {
-        const operationGeneration = ++this.operationGeneration;
-        const selectionGeneration = this.selectionGeneration;
-        this.operation = "mutation";
-        this.status = { kind: "info", message: action === "delete" ? "Deleting workspace task..." : action === "reset" ? "Resetting workspace tasks file..." : "Saving workspace task..." };
+        const generation = this.selectionGeneration;
+        this.operation = { kind: "mutation", scopes: ["workspace", "global"] };
+        this.status = { kind: "info", message: "Retrying workspace task move..." };
         this.render();
         try {
-            const result = await guardedWriteWorkspaceTasksConfig(context.files, cacheKeyForContext(context), sourceSnapshot, nextConfig);
-            if (!this.ownsOperation(context, selectionGeneration, operationGeneration))
+            await this.actionsValue.retryMove();
+            if (!this.ownsSelection(generation))
                 return;
             this.operation = undefined;
-            if (result.kind === "written") {
-                this.mode = "view";
-                this.editor = undefined;
-                this.deleteState = undefined;
-                this.resetState = undefined;
-                this.failure = undefined;
-                this.validationErrors = undefined;
-                this.idManuallyEdited = false;
-                this.status = action === "delete" && title !== undefined
-                    ? { kind: "success", message: `Deleted task "${title}".` }
-                    : action === "reset"
-                        ? { kind: "success", message: "Reset workspace tasks file." }
-                        : { kind: "success", message: "Saved workspace task." };
-                this.render();
-                this.focusTarget(focusReturn);
-                return;
-            }
-            this.applyWriteFailure(result, action === "delete" ? "delete" : "reset");
+            this.status = undefined;
+            this.render();
         }
         catch (error) {
-            if (!this.ownsOperation(context, selectionGeneration, operationGeneration))
+            if (!this.ownsSelection(generation))
                 return;
             this.operation = undefined;
-            this.applyWriteFailure({ kind: "write-failed", detail: `Unable to write ${TASKS_CONFIG_PATH}: ${formatError(error)}` }, action === "delete" ? "delete" : "reset");
-        }
-    }
-    applyWriteFailure(result, action) {
-        this.panelRefreshRequired = true;
-        this.failure = { kind: result.kind, detail: result.detail, action };
-        this.mode = result.kind === "conflict" || result.kind === "preflight-unavailable" ? "conflicted" : "needs-refresh-after-write";
-        this.status = { kind: "error", message: failureMessage(result.kind), detail: result.detail };
-        this.render();
-    }
-    enterFailure(kind, detail, action) {
-        this.panelRefreshRequired = true;
-        this.failure = { kind, detail, action };
-        this.mode = kind === "conflict" || kind === "preflight-unavailable" ? "conflicted" : "needs-refresh-after-write";
-        this.status = { kind: "error", message: failureMessage(kind), detail };
-        this.render();
-    }
-    dispatchTaskById(context, taskId) {
-        if (!this.isCurrentContext(context) || taskId === null)
-            return Promise.resolve();
-        const entry = getWorkspaceTasksCacheEntry(cacheKeyForContext(context));
-        const task = entry?.state.kind === "loaded" ? entry.state.config.tasks.find((candidate) => candidate.id === taskId) : undefined;
-        if (task === undefined) {
-            this.setError("That task is no longer available. Click Refresh, then try again.");
-            return Promise.resolve();
+            this.status = { kind: "error", message: "Could not retry workspace task move.", detail: formatError(error) };
+            this.render();
         }
-        return this.dispatchTask(context, task);
     }
-    async dispatchTask(context, task) {
-        if (this.runningTaskId !== undefined || this.operation !== undefined)
+    async dispatchTask(key) {
+        if (this.contextValue === undefined || key === null || this.runningTaskKey !== undefined)
+            return;
+        const ref = parseRef(key);
+        if (ref === undefined)
+            return;
+        const found = this.findTask(ref);
+        if (found === undefined) {
+            this.setError("That task is no longer available. Refresh, then try again.");
             return;
-        if (task.confirm && !window.confirm(`Run ${task.title}?\n\n${task.command}`)) {
-            this.status = { kind: "info", message: `Cancelled ${task.title}.` };
+        }
+        if (found.task.confirm && !window.confirm(`Run ${found.task.title} (${scopeLabel(ref.scope)})?\n\n${found.task.command}`)) {
+            this.status = { kind: "info", message: `Cancelled ${found.task.title}.` };
             this.render();
             return;
         }
-        const selectionGeneration = this.selectionGeneration;
-        const terminalRunGeneration = ++this.terminalRunGeneration;
-        this.runningTaskId = task.id;
-        this.status = { kind: "info", message: `Starting ${task.title}...` };
+        const selection = this.selectionGeneration;
+        const terminal = ++this.terminalGeneration;
+        this.runningTaskKey = workspaceTaskRefKey(ref);
+        this.status = { kind: "info", message: `Starting ${found.task.title}...` };
         this.render();
         try {
-            const handle = await runWorkspaceTaskInTerminal(context.terminal, task);
-            if (!this.ownsTerminalRun(context, selectionGeneration, terminalRunGeneration))
+            const handle = await runWorkspaceTaskInTerminal(this.contextValue.terminal, ref, found.task);
+            if (!this.ownsTerminal(selection, terminal))
                 return;
-            this.runningTaskId = undefined;
-            this.renderTerminalStatus({ kind: "success", message: `Started terminal command "${handle.run.title}".`, detail: task.command });
+            this.runningTaskKey = undefined;
+            this.status = { kind: "success", message: `Started terminal command "${handle.run.title}".`, detail: found.task.command };
+            this.render();
         }
         catch (error) {
-            if (!this.ownsTerminalRun(context, selectionGeneration, terminalRunGeneration))
+            if (!this.ownsTerminal(selection, terminal))
                 return;
-            this.runningTaskId = undefined;
-            this.renderTerminalStatus({ kind: "error", message: formatError(error) });
-        }
-    }
-    renderTerminalStatus(status) {
-        if (this.operation !== undefined) {
+            this.runningTaskKey = undefined;
+            this.status = { kind: "error", message: formatError(error) };
             this.render();
-            return;
         }
-        this.status = status;
-        this.render();
     }
-    openWorkspaceTerminal(terminalId) {
-        const context = this.contextValue;
-        if (context === undefined) {
+    openWorkspaceTerminal() {
+        if (this.contextValue === undefined) {
             this.setError("Select a workspace before opening a terminal.");
             return;
         }
-        if (terminalId === undefined)
-            context.terminal.open();
-        else
-            context.terminal.open({ terminalId });
+        this.contextValue.terminal.open();
     }
-    validateEditor(entry) {
+    validateEditor() {
         const editor = this.editor;
         if (editor === undefined)
             return { ok: false, errors: { title: "Title is required." } };
-        const existingTasks = entry.state.kind === "loaded" ? entry.state.config.tasks : [];
-        return validateAndNormalizeDraft(editor.draft, existingTasks, editor.originalIndex);
+        const scope = editor.draft.global ? "global" : "workspace";
+        const catalog = this.catalog(scope);
+        const existing = catalog.kind === "loaded" ? catalog.config.tasks : [];
+        const originalIndex = editor.sourceRef?.scope === scope ? editor.originalIndex : undefined;
+        return validateAndNormalizeDraft(editor.draft, existing, originalIndex);
     }
-    updateValidationInPlace(context) {
-        const entry = getWorkspaceTasksCacheEntry(cacheKeyForContext(context));
-        if (entry === undefined || this.editor === undefined)
+    updateValidationInPlace() {
+        if (this.editor === undefined)
             return;
-        const result = this.validateEditor(entry);
-        this.validationErrors = result.ok ? undefined : result.errors;
+        const validation = this.validateEditor();
+        this.validationErrors = validation.ok ? undefined : validation.errors;
         const errors = this.validationErrors ?? {};
-        const controls = [["title", "task-title"], ["command", "task-command"], ["id", "task-id"]];
-        for (const [field, controlId] of controls) {
-            const control = this.root.querySelector(`#${controlId}`);
-            const error = errors[field];
+        for (const [field, id] of [["title", "task-title"], ["command", "task-command"], ["id", "task-id"]]) {
+            const control = this.root.querySelector(`#${id}`);
             const errorElement = this.root.querySelector(`[data-field-error="${field}"]`);
             if (control === null || errorElement === null)
                 continue;
+            const error = errors[field];
             if (error === undefined) {
                 control.removeAttribute("aria-invalid");
-                if (field === "command")
-                    control.setAttribute("aria-describedby", "task-command-help");
-                else
+                if (field !== "command")
                     control.removeAttribute("aria-describedby");
                 errorElement.textContent = "";
                 errorElement.hidden = true;
             }
             else {
                 control.setAttribute("aria-invalid", "true");
-                control.setAttribute("aria-describedby", field === "command" ? `task-command-help task-command-error` : `task-${field}-error`);
+                control.setAttribute("aria-describedby", field === "command" ? "task-command-help task-command-error" : `task-${field}-error`);
                 errorElement.textContent = error;
                 errorElement.hidden = false;
             }
         }
-        const save = this.root.querySelector("button[data-save-task]");
+        const save = this.root.querySelector("[data-save-task]");
         if (save !== null)
-            save.disabled = this.operation !== undefined || this.isRefreshRequired(entry) || !result.ok || this.failure !== undefined;
+            save.disabled = this.operation !== undefined || !this.canWriteScope(this.editor.draft.global ? "global" : "workspace") || !validation.ok || this.isScopeDisabled(this.editor.draft.global ? "global" : "workspace");
     }
     isEditorDirty() {
         const editor = this.editor;
@@ -875,11 +874,12 @@ class PiWebUiTasksPanel extends HTMLElement {
             || editor.draft.command !== editor.initialDraft.command
             || editor.draft.description !== editor.initialDraft.description
             || editor.draft.group !== editor.initialDraft.group
-            || editor.draft.confirm !== editor.initialDraft.confirm;
+            || editor.draft.confirm !== editor.initialDraft.confirm
+            || editor.draft.global !== editor.initialDraft.global;
     }
     focusFirstInvalid(errors) {
         const field = errors.title === undefined ? errors.command === undefined ? "id" : "command" : "title";
-        this.focusSelector(`input[data-editor-${field}], textarea[data-editor-${field}]`);
+        this.focusSelector(`[data-editor-${field}]`);
     }
     focusSelector(selector) {
         if (!this.connected)
@@ -889,117 +889,377 @@ class PiWebUiTasksPanel extends HTMLElement {
     focusTarget(target) {
         if (!this.connected)
             return;
-        let element;
+        let element = null;
         if (target?.kind === "add")
-            element = this.root.querySelector("button[data-add-task]") ?? undefined;
+            element = this.root.querySelector("[data-add-task]");
         if (target?.kind === "edit")
-            element = findButtonByValue(this.root, "data-edit-task", target.id);
+            element = findButtonByValue(this.root, "data-edit-task", workspaceTaskRefKey(target.ref));
         if (target?.kind === "delete")
-            element = findButtonByValue(this.root, "data-delete-task", target.id);
-        if (target?.kind === "reset")
-            element = this.root.querySelector("button[data-reset-tasks-file]") ?? undefined;
+            element = findButtonByValue(this.root, "data-delete-task", workspaceTaskRefKey(target.ref));
         if (target?.kind === "refresh")
-            element = this.root.querySelector("button[data-refresh-config]") ?? undefined;
-        if (target?.kind === "heading" || element === undefined)
-            element = this.root.querySelector("[data-panel-heading]") ?? undefined;
+            element = this.root.querySelector("[data-refresh]");
+        if (target?.kind === "heading" || element === null || element instanceof HTMLButtonElement && element.disabled)
+            element = this.root.querySelector("[data-panel-heading]");
         element?.focus();
     }
-    isCurrentContext(context) {
-        return this.connected && this.contextValue !== undefined && cacheKeyForContext(this.contextValue) === cacheKeyForContext(context);
+    handleKeyDown(event) {
+        if (event.key !== "Escape" || this.operation !== undefined)
+            return;
+        if (this.mode === "add" || this.mode === "edit") {
+            event.preventDefault();
+            event.stopPropagation();
+            this.cancelEditor();
+        }
+        else if (this.mode === "delete-confirm") {
+            event.preventDefault();
+            event.stopPropagation();
+            this.cancelDelete();
+        }
+        else if (this.mode === "move-confirm") {
+            event.preventDefault();
+            event.stopPropagation();
+            this.cancelMove();
+        }
+        else if (this.mode === "refresh-discard-confirm") {
+            event.preventDefault();
+            event.stopPropagation();
+            this.cancelRefreshDiscard();
+        }
+    }
+    findTask(ref) {
+        const catalog = this.catalog(ref.scope);
+        if (catalog.kind !== "loaded")
+            return undefined;
+        const index = catalog.config.tasks.findIndex((task) => task.id === ref.id);
+        const task = index < 0 ? undefined : catalog.config.tasks[index];
+        return task === undefined ? undefined : { task: cloneTask(task), index };
+    }
+    catalog(scope) {
+        return scope === "workspace" ? this.stateValue.workspace : this.stateValue.global;
+    }
+    captureActionState() {
+        return {
+            sources: {
+                workspace: {
+                    lastKey: catalogStateKey(this.stateValue.workspace),
+                    generation: sourceGeneration(this.stateValue, "workspace"),
+                    delivered: false,
+                },
+                global: {
+                    lastKey: catalogStateKey(this.stateValue.global),
+                    generation: sourceGeneration(this.stateValue, "global"),
+                    delivered: false,
+                },
+            },
+            mutationGateKey: mutationGateKey(this.stateValue.mutationGate),
+        };
+    }
+    recordPendingSourceObservations(next) {
+        const pending = this.pendingAction;
+        if (pending === undefined || !this.ownsSelection(pending.generation))
+            return;
+        for (const scope of ["workspace", "global"]) {
+            if (!pending.scopes.includes(scope))
+                continue;
+            const nextCatalog = scope === "workspace" ? next.workspace : next.global;
+            const source = pending.observation.sources[scope];
+            const nextKey = catalogStateKey(nextCatalog);
+            if (source.generation < sourceGeneration(next, scope)
+                || source.lastKey !== nextKey && hasAuthoritativeCatalogState(nextCatalog)) {
+                source.delivered = true;
+            }
+            source.lastKey = nextKey;
+        }
+    }
+    reconcilePendingAction() {
+        const pending = this.pendingAction;
+        if (pending === undefined || !pending.settled || !this.ownsSelection(pending.generation))
+            return false;
+        if (pending.kind === "refresh") {
+            if (!pending.scopes.every((scope) => this.sourceSnapshotDelivered(scope, pending.observation)))
+                return false;
+            if (pending.scopes.some((scope) => !hasAuthoritativeCatalogState(this.catalog(scope))))
+                return false;
+            for (const scope of pending.scopes) {
+                const failure = catalogFailure(this.catalog(scope));
+                if (failure !== undefined)
+                    return this.finishPendingFailure(pending, failure.message);
+            }
+            this.pendingAction = undefined;
+            this.operation = undefined;
+            this.status = { kind: "success", message: "Workspace task catalogs refreshed." };
+            this.render();
+            this.focusTarget(pending.focusReturn);
+            return true;
+        }
+        const scope = pending.kind === "save" ? pending.scope : pending.ref.scope;
+        const delivered = this.sourceSnapshotDelivered(scope, pending.observation);
+        const gateChanged = this.mutationGateChanged(scope, pending.observation);
+        if (!delivered && !gateChanged)
+            return false;
+        if (!hasAuthoritativeCatalogState(this.catalog(scope)) && !gateChanged)
+            return false;
+        const failure = catalogFailure(this.catalog(scope));
+        if (failure !== undefined)
+            return this.finishPendingFailure(pending, failure.message);
+        if (gateChanged || this.mutationBlocked(scope)) {
+            return this.finishPendingFailure(pending, this.stateValue.mutationGate?.message ?? "Refresh before trying another task change.");
+        }
+        const confirmed = pending.kind === "save"
+            ? this.catalogContainsTask(scope, pending.task)
+            : this.catalogDoesNotContainTask(pending.ref);
+        if (!confirmed)
+            return false;
+        this.pendingAction = undefined;
+        this.operation = undefined;
+        if (pending.kind === "save") {
+            this.editor = undefined;
+            this.mode = "view";
+            this.validationErrors = undefined;
+            this.idManuallyEdited = false;
+            this.status = { kind: "success", message: `Saved task "${pending.task.title}".` };
+        }
+        else {
+            this.deleteState = undefined;
+            this.mode = "view";
+            this.status = { kind: "success", message: `Deleted task "${pending.task.title}".` };
+        }
+        this.render();
+        this.focusTarget(pending.focusReturn);
+        return true;
+    }
+    sourceSnapshotDelivered(scope, observation) {
+        return observation.sources[scope].delivered;
+    }
+    mutationGateChanged(scope, observation) {
+        const gate = this.stateValue.mutationGate;
+        return mutationGateKey(gate) !== observation.mutationGateKey && gate?.scopes.includes(scope) === true;
+    }
+    finishPendingFailure(pending, detail) {
+        if (this.pendingAction !== pending)
+            return false;
+        this.pendingAction = undefined;
+        this.operation = undefined;
+        const message = pending.kind === "refresh"
+            ? "Could not refresh workspace task catalogs."
+            : pending.kind === "save"
+                ? "Could not save workspace task."
+                : "Could not delete workspace task.";
+        this.status = { kind: "error", message, detail };
+        this.render();
+        if (pending.kind === "refresh")
+            this.focusTarget(pending.focusReturn);
+        return true;
     }
-    ownsTerminalRun(context, selectionGeneration, terminalRunGeneration) {
-        return this.isCurrentContext(context)
-            && this.selectionGeneration === selectionGeneration
-            && this.terminalRunGeneration === terminalRunGeneration;
+    catalogContainsTask(scope, expected) {
+        const catalog = this.catalog(scope);
+        return catalog.kind === "loaded" && catalog.config.tasks.some((task) => sameTask(task, expected));
     }
-    ownsOperation(context, selectionGeneration, operationGeneration) {
-        return this.isCurrentContext(context)
-            && this.selectionGeneration === selectionGeneration
-            && this.operationGeneration === operationGeneration;
+    catalogDoesNotContainTask(ref) {
+        const catalog = this.catalog(ref.scope);
+        return catalog.kind === "loaded" && !catalog.config.tasks.some((task) => task.id === ref.id);
+    }
+    canWriteScope(scope) {
+        const catalog = this.catalog(scope);
+        return catalog.kind === "loaded" || scope === "workspace" && catalog.kind === "missing";
+    }
+    isScopeDisabled(scope) {
+        return this.operation?.scopes.includes(scope) === true
+            || this.stateValue.mutationGate?.scopes.includes(scope) === true
+            || this.stateValue.move !== undefined;
+    }
+    mutationBlocked(scope) {
+        return this.stateValue.mutationGate?.scopes.includes(scope) === true || this.stateValue.move !== undefined;
+    }
+    ownsSelection(generation) {
+        return this.connected && generation === this.selectionGeneration;
+    }
+    ownsTerminal(selection, terminal) {
+        return this.ownsSelection(selection) && terminal === this.terminalGeneration;
     }
     setError(message) {
         this.status = { kind: "error", message };
         this.render();
     }
+    rememberOpenGroups() {
+        for (const details of this.root.querySelectorAll("details[data-group-key]")) {
+            const key = details.getAttribute("data-group-key");
+            if (key === null)
+                continue;
+            if (details.open)
+                this.expandedGroupKeys.add(key);
+            else
+                this.expandedGroupKeys.delete(key);
+        }
+    }
+    pruneExpandedGroups() {
+        const valid = new Set();
+        for (const scope of ["global", "workspace"]) {
+            const catalog = this.catalog(scope);
+            if (catalog.kind !== "loaded")
+                continue;
+            for (const task of catalog.config.tasks) {
+                if (task.group !== undefined)
+                    valid.add(workspaceTaskGroupKey(scope, task.group));
+            }
+        }
+        for (const key of this.expandedGroupKeys)
+            if (!valid.has(key))
+                this.expandedGroupKeys.delete(key);
+    }
+    isMoveComplete(editor, state) {
+        const source = editor.sourceRef;
+        if (source === undefined)
+            return false;
+        const destination = { scope: editor.draft.global ? "global" : "workspace", id: editor.draft.id.trim() };
+        return !this.catalogHasRef(state, source) && this.catalogHasRef(state, destination);
+    }
+    catalogHasRef(state, ref) {
+        const catalog = ref.scope === "workspace" ? state.workspace : state.global;
+        return catalog.kind === "loaded" && catalog.config.tasks.some((task) => task.id === ref.id);
+    }
+}
+function renderTaskGroups(scope, tasks, runningTaskKey, scopeDisabled, expanded) {
+    const groups = new Map();
+    for (const sourceTask of tasks) {
+        const task = cloneTask(sourceTask);
+        const group = groups.get(task.group);
+        if (group === undefined)
+            groups.set(task.group, [task]);
+        else
+            group.push(task);
+    }
+    return `<div class="tasks">${[...groups.entries()].map(([group, groupedTasks]) => {
+        if (group === undefined)
+            return `<section class="task-group ungrouped">${groupedTasks.map((task) => renderTask(scope, task, runningTaskKey, scopeDisabled, true)).join("")}</section>`;
+        const key = workspaceTaskGroupKey(scope, group);
+        const open = expanded.has(key);
+        return `<details class="task-group" data-group-key="${escapeAttr(key)}" data-group-scope="${scope}"${open ? " open" : ""}>
+      <summary><span class="disclosure-chevron" aria-hidden="true">›</span><span class="group-title">${escapeHtml(group)}</span><span class="group-count">${String(groupedTasks.length)} ${groupedTasks.length === 1 ? "task" : "tasks"}</span></summary>
+      <div class="task-group-body">${groupedTasks.map((task) => renderTask(scope, task, runningTaskKey, scopeDisabled, true)).join("")}</div>
+    </details>`;
+    }).join("")}</div>`;
+}
+function renderTask(scope, task, runningTaskKey, scopeDisabled, showScopeBadge) {
+    const ref = { scope, id: task.id };
+    const key = workspaceTaskRefKey(ref);
+    const label = scopeLabel(scope);
+    const running = runningTaskKey === key;
+    const description = task.description === undefined ? "" : `<span class="task-description">${escapeHtml(task.description)}</span>`;
+    return `<article class="task-card" data-task-ref="${escapeAttr(key)}">
+    <div class="task-copy">
+      <div class="task-title-line"><strong>${escapeHtml(task.title)}</strong>${showScopeBadge ? `<span class="scope-badge">${escapeHtml(label)}</span>` : ""}</div>
+      ${description}
+      <pre class="task-script" data-task-script>${escapeHtml(task.command)}</pre>
+    </div>
+    <div class="task-actions">
+      <button type="button" class="secondary" data-edit-task="${escapeAttr(key)}" aria-label="Edit ${escapeAttr(task.title)} (${escapeAttr(label)})" ${scopeDisabled ? "disabled" : ""}>Edit</button>
+      <button type="button" class="secondary danger-secondary" data-delete-task="${escapeAttr(key)}" aria-label="Delete ${escapeAttr(task.title)} (${escapeAttr(label)})" ${scopeDisabled ? "disabled" : ""}>Delete</button>
+      <button type="button" data-run-task="${escapeAttr(key)}" aria-label="Run ${escapeAttr(task.title)} (${escapeAttr(label)})" ${runningTaskKey !== undefined ? "disabled" : ""}>${running ? "Dispatching..." : "Run"}</button>
+    </div>
+  </article>`;
+}
+function fieldAttrs(field, error, locked) {
+    return `${error === undefined ? "" : " aria-invalid=\"true\" aria-describedby=\"task-${field}-error\""}${locked ? " disabled" : ""}`;
 }
 function renderFieldError(field, error) {
     return `<p id="task-${field}-error" data-field-error="${field}" class="field-error"${error === undefined ? " hidden" : ""}>${error === undefined ? "" : escapeHtml(error)}</p>`;
 }
-function renderTaskGroups(tasks, runningTaskId, actionsDisabled) {
-    return `<div class="tasks">${groupTasks(tasks).map((group) => renderTaskGroup(group, runningTaskId, actionsDisabled)).join("")}</div>`;
+function loadedCount(catalog) {
+    return catalog.kind === "loaded" ? catalog.config.tasks.length : 0;
 }
-function groupTasks(tasks) {
-    const groups = [];
-    for (const task of tasks) {
-        let group = groups.find((candidate) => candidate.title === task.group);
-        if (group === undefined) {
-            group = { title: task.group, tasks: [] };
-            groups.push(group);
-        }
-        group.tasks.push(task);
+function catalogNeedsAttention(catalog) {
+    return catalog.kind === "invalid" || catalog.kind === "unavailable" || catalog.kind === "error" || catalog.kind === "loaded" && catalog.refreshError !== undefined || catalog.kind === "missing" && catalog.refreshError !== undefined;
+}
+function catalogFailure(catalog) {
+    if ((catalog.kind === "loaded" || catalog.kind === "missing") && catalog.refreshError !== undefined) {
+        return { message: catalog.refreshError };
     }
-    return groups;
+    if (catalog.kind === "invalid" || catalog.kind === "unavailable" || catalog.kind === "error") {
+        return { message: catalog.message };
+    }
+    return undefined;
 }
-function renderTaskGroup(group, runningTaskId, actionsDisabled) {
-    const title = group.title === undefined ? "" : `<h3>${escapeHtml(group.title)}</h3>`;
-    return `<section class="task-group">${title}${group.tasks.map((task) => renderTask(task, runningTaskId, actionsDisabled)).join("")}</section>`;
+function sourceGeneration(state, scope) {
+    const generation = state.sourceGenerations?.[scope];
+    return typeof generation === "number" && Number.isFinite(generation) ? generation : 0;
 }
-function renderTask(task, runningTaskId, actionsDisabled) {
-    const running = runningTaskId === task.id;
-    const runDisabled = runningTaskId !== undefined || actionsDisabled;
-    const mutationDisabled = runningTaskId !== undefined || actionsDisabled;
-    const description = task.description === undefined ? "" : `<span>${escapeHtml(task.description)}</span>`;
-    return `
-    <article class="task-card">
-      <div class="task-copy">
-        <strong>${escapeHtml(task.title)}</strong>
-        ${description}
-        <pre class="task-script" data-task-script>${escapeHtml(task.command)}</pre>
-      </div>
-      <div class="task-actions">
-        <button type="button" class="secondary" data-edit-task="${escapeAttr(task.id)}" ${mutationDisabled ? "disabled" : ""}>Edit</button>
-        <button type="button" class="secondary danger-secondary" data-delete-task="${escapeAttr(task.id)}" ${mutationDisabled ? "disabled" : ""}>Delete</button>
-        <button type="button" data-task-id="${escapeAttr(task.id)}" ${runDisabled ? "disabled" : ""}>${running ? "Dispatching..." : "Run"}</button>
-      </div>
-    </article>
-  `;
+function catalogStateKey(catalog) {
+    return JSON.stringify(catalog);
+}
+function mutationGateKey(gate) {
+    return gate === undefined ? undefined : JSON.stringify({ scopes: [...gate.scopes], message: gate.message });
+}
+function hasAuthoritativeCatalogState(catalog) {
+    if (catalog.kind === "loading")
+        return false;
+    if (catalog.kind === "loaded" || catalog.kind === "missing")
+        return !catalog.refreshing;
+    return true;
+}
+function sameTask(left, right) {
+    return left.id === right.id
+        && left.title === right.title
+        && left.command === right.command
+        && left.description === right.description
+        && left.group === right.group
+        && left.confirm === right.confirm;
+}
+function scopeLabel(scope) {
+    return scope === "global" ? "Global" : "Project";
+}
+function parseRef(value) {
+    try {
+        return parseWorkspaceTaskRefKey(value);
+    }
+    catch {
+        return undefined;
+    }
 }
 function findButtonByValue(root, attribute, value) {
     for (const button of root.querySelectorAll(`button[${attribute}]`)) {
         if (button.getAttribute(attribute) === value)
             return button;
     }
-    return undefined;
+    return null;
+}
+function contextKey(context) {
+    if (context === undefined)
+        return undefined;
+    return JSON.stringify([context.machine.id, context.workspace.projectId, context.workspace.id, context.workspace.path]);
 }
 function emptyDraft() {
-    return { id: "", title: "", command: "", description: "", group: "", confirm: false };
+    return { id: "", title: "", command: "", description: "", group: "", confirm: false, global: false };
 }
 function cloneDraft(draft) {
     return { ...draft };
 }
-function cacheKeyForContext(context) {
-    return `${context.machine.id}:${context.workspace.projectId}:${context.workspace.id}`;
+function cloneTask(task) {
+    return {
+        id: task.id,
+        title: task.title,
+        command: task.command,
+        ...(task.description === undefined ? {} : { description: task.description }),
+        ...(task.group === undefined ? {} : { group: task.group }),
+        confirm: task.confirm,
+    };
 }
-function refreshStatus(state) {
-    if (state.kind === "loaded")
-        return { kind: "success", message: `Loaded ${String(state.config.tasks.length)} task${state.config.tasks.length === 1 ? "" : "s"}.` };
-    if (state.kind === "missing")
-        return { kind: "info", message: "No workspace tasks file is configured." };
-    if (state.kind === "invalid")
-        return { kind: "error", message: "Workspace tasks configuration is invalid.", detail: state.detail };
-    const detail = state.detail;
-    return detail === undefined
-        ? { kind: "error", message: state.message }
-        : { kind: "error", message: state.message, detail };
+function emptyPanelState() {
+    return {
+        workspace: { kind: "loading" },
+        global: { kind: "loading" },
+        sourceGenerations: { workspace: 0, global: 0 },
+    };
 }
-function failureMessage(kind) {
-    if (kind === "conflict")
-        return "The tasks file changed outside this panel. Refresh before trying again.";
-    if (kind === "preflight-unavailable")
-        return "The current tasks file could not be verified. Refresh before trying again.";
-    if (kind === "write-failed")
-        return "The task write failed. Refresh before trying again; the result may be unknown.";
-    return "The task was written, but the new file could not be verified. Refresh before trying again.";
+function noOpActions() {
+    return {
+        create: () => Promise.resolve(),
+        update: () => Promise.resolve(),
+        remove: () => Promise.resolve(),
+        move: () => Promise.resolve(),
+        retryMove: () => Promise.resolve(),
+        refresh: () => Promise.resolve(),
+    };
 }
 function formatError(error) {
     return error instanceof Error ? error.message : String(error);
@@ -1011,62 +1271,76 @@ function escapeAttr(value) {
     return escapeHtml(value).replaceAll('"', "&quot;").replaceAll("'", "&#39;");
 }
 function taskStyles() {
-    return `
-    <style>
-      :host { display: block; min-width: 0; container-type: inline-size; }
-      .tasks-panel { min-width: 0; container-type: inline-size; color: var(--pi-text); }
-      .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--pi-border-muted); }
-      .toolbar h2 { margin: 0; font-size: 15px; }
-      .toolbar-tasks { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
-      .viewer { box-sizing: border-box; min-width: 0; min-height: 0; overflow: auto; padding: 12px; }
-      .tasks-viewer { display: grid; align-content: start; gap: 12px; }
-      .tasks { display: grid; gap: 14px; min-width: 0; }
-      .task-group { display: grid; gap: 10px; min-width: 0; }
-      .task-group h3 { margin: 4px 0 0; color: var(--pi-text-secondary); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
-      .task-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; min-width: 0; border: 1px solid var(--pi-border); border-radius: 8px; background: var(--pi-surface); padding: 12px; }
-      .task-copy { display: grid; min-width: 0; gap: 5px; }
-      .task-copy span, .muted, .field-help { color: var(--pi-muted); }
-      .task-script, .diagnostic { box-sizing: border-box; max-width: 100%; margin: 0; border: 1px solid var(--pi-border-muted); border-radius: 6px; background: var(--pi-bg); color: var(--pi-text-secondary); font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
-      .task-script { max-height: 12rem; overflow-y: auto; padding: 8px; }
-      .diagnostic { max-height: 12rem; overflow: auto; padding: 8px; }
-      code { font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
-      button { border: 1px solid var(--pi-accent-border); border-radius: 7px; background: var(--pi-accent); color: var(--pi-bg); cursor: pointer; padding: 6px 10px; font: inherit; }
-      button.secondary { border-color: var(--pi-border); background: var(--pi-surface); color: var(--pi-text); }
-      button.danger, button.danger-secondary { border-color: var(--pi-danger); }
-      button.danger { background: var(--pi-danger); color: var(--pi-bg); }
-      button.danger-secondary { background: var(--pi-surface); color: var(--pi-danger); }
-      button:disabled { cursor: wait; opacity: 0.65; }
-      button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex="-1"]:focus-visible { outline: 2px solid var(--pi-accent-border); outline-offset: 2px; }
-      .task-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
-      .task-editor, .confirmation { width: min(100%, 620px); box-sizing: border-box; padding: 16px; background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: 8px; }
-      .task-editor h3, .confirmation h3 { margin: 0 0 16px; font-size: 18px; }
-      .confirmation p { margin: 0 0 10px; line-height: 1.5; }
-      .confirmation .task-script { margin: 10px 0 16px; }
-      .task-form { display: grid; gap: 6px; }
-      .task-form > label, .checkbox-field > label { font-size: 14px; font-weight: 500; }
-      .task-form .required { color: var(--pi-danger); }
-      .task-form input[type="text"], .task-form textarea { box-sizing: border-box; width: 100%; padding: 8px 10px; background: var(--pi-bg); border: 1px solid var(--pi-border); border-radius: 6px; font-size: 14px; color: var(--pi-text); font-family: inherit; }
-      .task-form textarea { min-height: 9rem; max-height: 24rem; resize: vertical; line-height: 1.45; }
-      .task-form input[type="text"]::placeholder, .task-form textarea::placeholder { color: var(--pi-muted); }
-      .checkbox-field { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; margin-top: 8px; }
-      .checkbox-field input { width: 18px; height: 18px; }
-      .field-help { margin: 0 0 8px; font-size: 12px; line-height: 1.4; }
-      .field-error { margin: 0 0 8px; color: var(--pi-danger); font-size: 12px; }
-      .editor-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 10px; }
-      .empty-state { border: 1px dashed var(--pi-border-muted); border-radius: 8px; color: var(--pi-muted); padding: 12px; }
-      .empty-state p { margin: 6px 0 0; }
-      .panel-status { margin: 12px 12px 0; }
-      .status { border: 1px solid var(--pi-border); border-radius: 8px; padding: 10px; }
-      .status.info { border-color: var(--pi-accent-border); background: var(--pi-bg-overlay-soft); }
-      .status.success { border-color: var(--pi-success-border); background: var(--pi-success-surface); color: var(--pi-success); }
-      .status.error { border-color: var(--pi-danger); color: var(--pi-danger); }
-      .status.warning { border-color: var(--pi-warning-border); background: var(--pi-warning-surface); color: var(--pi-text); }
-      .status p { margin: 6px 0; }
-      .empty { padding: 16px; color: var(--pi-muted); }
-      @container (max-width: 600px) {
-        .task-card { grid-template-columns: minmax(0, 1fr); }
-        .task-actions { justify-content: flex-start; }
-      }
-    </style>
-  `;
+    return `<style>
+    :host { display: block; min-width: 0; container-type: inline-size; }
+    .tasks-panel { min-width: 0; container-type: inline-size; color: var(--pi-text); }
+    .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--pi-border-muted); }
+    .toolbar h2 { margin: 0; font-size: 15px; }
+    .toolbar-tasks { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
+    .viewer { box-sizing: border-box; min-width: 0; min-height: 0; overflow: auto; padding: 12px; }
+    .tasks-viewer { display: grid; align-content: start; gap: 12px; }
+    .scope-filters { display: inline-flex; flex-wrap: wrap; gap: 6px; }
+    .scope-filter { border-color: var(--pi-border); background: var(--pi-surface); color: var(--pi-text); }
+    .scope-filter.selected { border-color: var(--pi-accent-border); background: var(--pi-accent); color: var(--pi-bg); }
+    .count, .catalog-count, .group-count { color: var(--pi-muted); font-size: 12px; white-space: nowrap; }
+    .scope-filter.selected .count { color: inherit; }
+    .helper, .muted, .field-help { color: var(--pi-muted); }
+    .helper { margin: 0; line-height: 1.45; }
+    .catalog-list { display: grid; gap: 16px; min-width: 0; }
+    .scope-catalog { display: grid; gap: 10px; min-width: 0; }
+    .scope-catalog > h3 { margin: 0; color: var(--pi-text-secondary); font-size: 13px; }
+    .tasks { display: grid; gap: 10px; min-width: 0; }
+    .task-group { min-width: 0; border: 1px solid var(--pi-border); border-radius: 8px; background: var(--pi-surface); }
+    .task-group[open] { background: var(--pi-surface); }
+    .task-group summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; list-style: none; }
+    .task-group summary::-webkit-details-marker { display: none; }
+    .task-group summary::marker { content: ""; }
+    .disclosure-chevron { color: var(--pi-muted); font-size: 18px; line-height: 1; transition: transform .15s ease; }
+    .task-group[open] .disclosure-chevron { transform: rotate(90deg); }
+    .group-title { flex: 1 1 auto; min-width: 0; font-weight: 600; }
+    .task-group-body { display: grid; gap: 10px; padding: 0 10px 10px; }
+    .ungrouped { display: grid; gap: 10px; }
+    .task-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; min-width: 0; border: 1px solid var(--pi-border); border-radius: 8px; background: var(--pi-surface); padding: 12px; }
+    .task-copy { display: grid; min-width: 0; gap: 5px; }
+    .task-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
+    .task-description { color: var(--pi-muted); }
+    .scope-badge { display: inline-block; border: 1px solid var(--pi-border-muted); border-radius: 4px; padding: 2px 6px; color: var(--pi-text-secondary); font-size: 11px; white-space: nowrap; }
+    .task-script, .diagnostic { box-sizing: border-box; max-width: 100%; margin: 0; border: 1px solid var(--pi-border-muted); border-radius: 6px; background: var(--pi-bg); color: var(--pi-text-secondary); font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
+    .task-script { max-height: 12rem; overflow-y: auto; padding: 8px; }
+    .diagnostic { max-height: 12rem; overflow: auto; padding: 8px; }
+    .task-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
+    .task-editor, .confirmation { width: min(100%, 620px); box-sizing: border-box; padding: 16px; background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: 8px; }
+    .editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
+    .task-editor h3, .confirmation h3 { margin: 0 0 16px; font-size: 18px; }
+    .confirmation p { margin: 0 0 10px; line-height: 1.5; }
+    .confirmation .task-script { margin: 10px 0 16px; }
+    .task-form { display: grid; gap: 6px; }
+    .task-form > label, .checkbox-field > label { font-size: 14px; font-weight: 500; }
+    .task-form .required { color: var(--pi-danger); }
+    .task-form input[type="text"], .task-form textarea { box-sizing: border-box; width: 100%; padding: 8px 10px; background: var(--pi-bg); border: 1px solid var(--pi-border); border-radius: 6px; font-size: 14px; color: var(--pi-text); font-family: inherit; }
+    .task-form textarea { min-height: 9rem; max-height: 24rem; resize: vertical; line-height: 1.45; }
+    .task-form input[type="text"]::placeholder, .task-form textarea::placeholder { color: var(--pi-muted); }
+    .checkbox-field { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; margin-top: 8px; }
+    .checkbox-field input { width: 18px; height: 18px; }
+    .field-help { margin: 0 0 8px; font-size: 12px; line-height: 1.4; }
+    .field-error { margin: 0 0 8px; color: var(--pi-danger); font-size: 12px; }
+    .editor-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 10px; }
+    .empty-state { display: grid; gap: 6px; border: 1px dashed var(--pi-border-muted); border-radius: 8px; color: var(--pi-muted); padding: 12px; }
+    .panel-status { margin: 12px 12px 0; }
+    .status { border: 1px solid var(--pi-border); border-radius: 8px; padding: 10px; }
+    .status.info { border-color: var(--pi-accent-border); background: var(--pi-bg-overlay-soft); }
+    .status.success { border-color: var(--pi-success-border); background: var(--pi-success-surface); color: var(--pi-success); }
+    .status.error { border-color: var(--pi-danger); color: var(--pi-danger); }
+    .status.warning { border-color: var(--pi-warning-border); background: var(--pi-warning-surface); color: var(--pi-text); }
+    .status p { margin: 6px 0; }
+    .empty { padding: 16px; color: var(--pi-muted); }
+    button { border: 1px solid var(--pi-accent-border); border-radius: 7px; background: var(--pi-accent); color: var(--pi-bg); cursor: pointer; padding: 6px 10px; font: inherit; }
+    button.secondary { border-color: var(--pi-border); background: var(--pi-surface); color: var(--pi-text); }
+    button.danger, button.danger-secondary { border-color: var(--pi-danger); }
+    button.danger { background: var(--pi-danger); color: var(--pi-bg); }
+    button.danger-secondary { background: var(--pi-surface); color: var(--pi-danger); }
+    button:disabled { cursor: wait; opacity: .65; }
+    button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex="-1"]:focus-visible { outline: 2px solid var(--pi-accent-border); outline-offset: 2px; }
+    @container (max-width: 600px) { .task-card { grid-template-columns: minmax(0, 1fr); } .task-actions { justify-content: flex-start; } }
+  </style>`;
 }