@jxsuite/studio 5.0.0 → 5.1.0

package/src/panels/problems-panel.ts

@@ -58,6 +58,7 @@
 import { nothing } from "lit-html";
 import { effect, effectScope } from "../reactivity";
 import { activeRegistry } from "../commands/active-registry";
+import { runReported } from "../commands/run-reported";
 import { clearProblems, dismiss, problemCount, problems } from "../services/notify";
 import { mountProblemsSurface } from "../surfaces/panel-problems";
 import { registerPanel } from "./panel-registry";
@@ -184,14 +185,17 @@ const ACTIONS: ProblemsActions = {
     openProblemPath(path);
   },
   /* By id, because a document can only hand back a value: the record and the registry are both
-     looked up at the moment of the click, which is also the moment the gate was last checked. */
+     looked up at the moment of the click, which is also the moment the gate was last checked.
+     The action's `actionArgs` were written by whoever filed the problem, against a schema that
+     may have moved since, so the run goes through `commands/run-reported.ts`: a refusal is a new
+     row in this same list, keyed by the command, rather than an exception out of the button. */
   runAction: (id) => {
     const record = problems.find((candidate) => candidate.id === id);
     const registry = activeRegistry();
     if (record?.action === undefined || !registry) {
       return;
     }
-    void registry.run(record.action, record.actionArgs);
+    void runReported(registry, record.action, record.actionArgs, "Problems");
   },
 };
 

package/src/panels/quick-search.ts

@@ -41,6 +41,7 @@ import { reactive } from "../reactivity";
 import paletteDoc from "../surfaces/palette.json";
 import { activeTab } from "../workspace/workspace";
 import { activeRegistry } from "../commands/active-registry";
+import { runActiveReported, runReported } from "../commands/run-reported";
 import type { PaletteMode } from "../commands/defaults";
 import type { AnyCommand, CommandRegistry } from "../commands/registry";
 import type { JxDocument, JxMutableNode } from "@jxsuite/schema/types";
@@ -671,17 +672,11 @@ function runCommand(command: AnyCommand, args?: Record<string, unknown>) {
   }
   trackRecentCommand(command.id);
   closeQuickSearch();
-  const report = (error: unknown) => {
-    console.error(`palette: command "${command.id}" failed`, error);
-  };
-  // Both shapes, deliberately: `run` may throw synchronously (a coercion refusal from
+  // Both shapes, through the one helper: `run` may throw synchronously (a coercion refusal from
   // `command-args.ts` does) or reject later. A palette that let either escape would take the
-  // Keydown listener down with it, and the overlay is already closed by then.
-  try {
-    void Promise.resolve(registry.run(command.id, args)).catch(report);
-  } catch (error) {
-    report(error);
-  }
+  // Keydown listener down with it, and the overlay is already closed by then — and a refusal that
+  // Went to the console, as this one did, was read by nobody. Problems is where it is read.
+  void runReported(registry, command.id, args, "Palette");
 }
 
 function selectRow(row: PaletteRow) {
@@ -702,9 +697,8 @@ function selectRow(row: PaletteRow) {
       return;
     }
     case "node": {
-      const registry = activeRegistry();
       closeQuickSearch();
-      void registry?.run("selection.set", { path: row.path });
+      void runActiveReported("selection.set", { path: row.path }, "Palette");
       return;
     }
     case "arg": {

package/src/panels/settings-menu.ts

@@ -36,10 +36,9 @@
  * @docs studio/projects/settings
  */
 
-import { errorMessage } from "@jxsuite/schema/parse";
 import { activeRegistry } from "../commands/active-registry";
+import { runReported } from "../commands/run-reported";
 import { LEVELS } from "../commands/levels";
-import { notify } from "../services/notify";
 import { onSettingsDocumentChanged, sortedSettingsSections } from "../settings/section-registry";
 import { PREFERENCES_SECTIONS } from "../settings/preferences-sections";
 import { openMenu } from "../surfaces/menu";
@@ -92,25 +91,16 @@ function menuSectionsFor(id: string): readonly MenuSection[] {
  * Run a row's command, surfacing a refusal instead of stranding it.
  *
  * `settings.open`'s `run` is async and throws a `RangeError` AFTER awaiting the contributed-section
- * sync, and `registry.run` does not catch. `editor/context-menu.ts`'s bare `void result` is safe
- * only because every element verb is synchronous; here an unknown section would reject into
- * nothing.
+ * sync, and `registry.run` does not catch; a gate that turned false between the render and the
+ * click throws BEFORE `run`, synchronously. `commands/run-reported.ts` catches both and files the
+ * sentence in Problems, under this menu's name.
  */
 function runRow(id: string, args?: Record<string, unknown>): void {
   const registry = activeRegistry();
   if (!registry) {
     return;
   }
-  let result: unknown;
-  try {
-    result = registry.run(id, args as never);
-  } catch (error) {
-    notify.error(errorMessage(error), { source: id });
-    return;
-  }
-  void Promise.resolve(result).catch((error: unknown) => {
-    notify.error(errorMessage(error), { source: id });
-  });
+  void runReported(registry, id, args, "Settings");
 }
 
 // ─── Rows ─────────────────────────────────────────────────────────────────────

package/src/panels/tab-strip.ts

@@ -60,6 +60,7 @@ import { DRAFT_FIELD, isDraftEntry } from "../content/draft-state";
 import { entryFields } from "../content/entry-fields";
 import { collectionOfPath } from "../content/entry-model";
 import { activeRegistry } from "../commands/active-registry";
+import { runActiveReported, runReported } from "../commands/run-reported";
 import { PRESET_LABELS } from "../workspace/pane-derive";
 import { localeLabel } from "@jxsuite/schema/locale";
 import { tabOfPane } from "../canvas/canvas-surface";
@@ -575,8 +576,7 @@ function openTrailing(host: HTMLElement, anchor: HTMLElement | null) {
     return;
   }
   if (_drawing.get(host)?.mode === "derivation") {
-    const registry = activeRegistry();
-    void registry?.run("pane.unsplit");
+    void runActiveReported("pane.unsplit", undefined, "Tabs");
     return;
   }
   openOverflowMenu(pane, tabLabels(pane), anchor);
@@ -807,7 +807,7 @@ function placedTabItems(tab: Tab): MenuRowProjection[] {
         ? {
             disabled: false,
             run: () => {
-              void registry.run(command.id, args);
+              void runReported(registry, command.id, args, "Tabs");
             },
           }
         : { disabled: true, requires: reason }),

package/src/services/ai-command-tools.ts

@@ -32,6 +32,25 @@
  * the model is told "changed nothing" rather than congratulated. This is what closes the
  * phantom-success finding for every bridged document write, not just the one tool it was found on.
  *
+ * **The project witness** is the same comparison over `project.json`. Every configuration write is
+ * a transaction on the configuration document (`tabs/project-config.ts`), whose bind effect keeps
+ * `projectState.projectConfig` equal to `toRaw(document.doc.document)` — so a record with `undo:
+ * "project"` that left that reference alone wrote nothing, whatever its report says. The ledger
+ * then files nothing (`wrote: []`, mechanically, for every project record), and a report that
+ * named no `wrote` of its own — one with no latch to know it was a no-op — has its sentence
+ * replaced by "changed nothing", because "Wrote project.json" over an untouched file is the
+ * phantom the ledger exists to keep out. A record whose report answered `wrote: []` itself is one
+ * that KNEW, and its sentence ("already enabled") is the one the witness cannot write. That is why
+ * `add_project_locale` keeps its latch: the sentence, not the ledger, is what the latch is for.
+ *
+ * **A tool with nothing it could be called with is withheld.** A `derivedEnumProperty` on a
+ * REQUIRED argument serialises `enum: []` when the list behind it is empty — `enable_extension`
+ * with no catalogue — and `@jxsuite/ai`'s validator tolerates that only because every projected
+ * tool is `strict: false`. The record's gate cannot see its own argument list, so the bridge reads
+ * it: an enabled record whose required enum is empty is not advertised this round, and comes back
+ * the round the list does. `getDefinition` still answers, so a call the model makes anyway meets
+ * the coercion's own refusal (`is not declared — declared: none`) rather than `Unknown tool`.
+ *
  * **`validate()` is a no-op, on purpose.** `@jxsuite/ai`'s validator never checks `enum` and treats
  * a required `null` as missing (`packages/ai/src/tools.ts`), which would refuse `select_node
  * { path: null }`. The registry's coercion is the single validator, so every projected tool is
@@ -46,6 +65,7 @@ import { activeRegistry } from "../commands/active-registry";
 import { argsSchema } from "../commands/command-args";
 import { inCanvas } from "../commands/context";
 import { toRaw } from "../reactivity";
+import { projectState } from "../state";
 import { recordWrite } from "./ai-writes";
 import { reportDocumentWrite, snapshotBeforeWrite } from "./ai-write-report";
 import type { WriteReportDeps, WriteSnapshot } from "./ai-write-report";
@@ -76,10 +96,25 @@ const EMPTY_ARGS = argsSchema({});
 
 /** The loosely-typed view of a record's `args` this module reads. */
 interface ArgsShape {
-  properties?: Record<string, object>;
+  properties?: Record<string, { enum?: unknown }>;
   required?: readonly string[];
 }
 
+/**
+ * Whether a required argument's choice list is empty right now.
+ *
+ * Reading `enum` is what serialises a `derivedEnumProperty` — the getter runs here exactly as it
+ * runs on the wire — so this is the same answer the model would have been shown. Only a REQUIRED
+ * property counts: an optional enum that is empty is an argument the model can leave out.
+ */
+function hasEmptyRequiredEnum(args: object | undefined): boolean {
+  const shape = (args ?? EMPTY_ARGS) as ArgsShape;
+  return (shape.required ?? []).some((key) => {
+    const declared = shape.properties?.[key]?.enum;
+    return Array.isArray(declared) && declared.length === 0;
+  });
+}
+
 /**
  * The selector's own `paths` property object, taken BY REFERENCE from the live record so the
  * description the model reads is the selector's. `undefined` when the selector is not registered,
@@ -141,12 +176,14 @@ function selectionAdvertised(registry: CommandRegistry): boolean {
 /**
  * Whether one record's tool is advertised this round. For a project- or document-level record it is
  * the record's own gate, evaluated as the palette evaluates it — a module-state `enablement`
- * closure included. Selection-level records are the one derived case, above.
+ * closure included. Selection-level records are the one derived case, above. And a record the gate
+ * admits is still withheld while a required argument has an empty choice list: there is nothing it
+ * could be called with, and a tool advertised with `enum: []` costs a round to discover that.
  */
 function advertised(registry: CommandRegistry, command: AnyCommand): boolean {
-  return command.level === "selection"
-    ? selectionAdvertised(registry)
-    : registry.isEnabled(command.id);
+  const open =
+    command.level === "selection" ? selectionAdvertised(registry) : registry.isEnabled(command.id);
+  return open && !hasEmptyRequiredEnum(command.args);
 }
 
 /** Every record carrying a projection, enabled or not. */
@@ -251,6 +288,19 @@ function normaliseReport(report: string | AiToolReport): AiToolReport {
   return typeof report === "string" ? { summary: report } : report;
 }
 
+/**
+ * The configuration object the app is live on, unwrapped, or `null` before a project has one.
+ *
+ * The same read `tabs/project-config.ts`'s `liveConfig()` makes: `projectState.projectConfig` is
+ * held to `toRaw(document.doc.document)` by the bind effect, so a `transactDoc` on the
+ * configuration document is a new reference here — and an unchanged reference is a run that never
+ * transacted, however the record's report reads.
+ */
+function projectConfigRef(): object | null {
+  const config = projectState?.projectConfig;
+  return config ? toRaw(config as unknown as object) : null;
+}
+
 /**
  * The ledger paths a record's write defaults to when `report` names none, by undo scope. `"none"`
  * has no default on purpose — see {@link AiToolReport.wrote}.
@@ -322,6 +372,10 @@ export function createCommandToolRegistry(deps: CommandToolDeps): ToolRegistry {
        what `transactDoc` replaces, and the snapshot is what the verdict compares against. */
     const tab = command.undo === "document" ? deps.getTab() : null;
     const rootBefore = tab ? toRaw(tab.doc.document) : null;
+    /* The project witness's half: the configuration object the chokepoint holds, which every
+       applied `project.json` transaction replaces. Read for `undo: "project"` records only — the
+       comparison is meaningless for a record that does not claim the file. */
+    const configBefore = command.undo === "project" ? projectConfigRef() : null;
     let snapshot: WriteSnapshot | null = null;
     let before: CommandContext;
     try {
@@ -357,6 +411,12 @@ export function createCommandToolRegistry(deps: CommandToolDeps): ToolRegistry {
       };
     }
 
+    /* The project witness's verdict, decided before the report so a report that throws is filed
+       against it too. Unlike the document witness this is not a refusal: an idempotent project verb
+       asked for a state it already had is an ordinary answer, and the record's own sentence may
+       say why. What the witness owns is the LEDGER — nothing landed, so nothing is filed. */
+    const projectUnchanged = command.undo === "project" && projectConfigRef() === configBefore;
+
     const after = registry.context();
     let report: AiToolReport;
     try {
@@ -366,13 +426,23 @@ export function createCommandToolRegistry(deps: CommandToolDeps): ToolRegistry {
          Left to the loop, the throw would be labelled "Failed to parse arguments" and the ledger
          would never be filed. So the ledger is filed from `undo`'s defaults — the report that would
          have named the paths is the thing that failed — and the model is told both halves. */
-      fileLedger(command, tab);
+      fileLedger(command, tab, projectUnchanged ? [] : undefined);
       const message = error instanceof Error ? error.message : String(error);
       return { error: `${command.title} ran, but its report failed: ${message}`, success: false };
     }
-    fileLedger(command, tab, report.wrote);
 
-    let { summary } = report;
+    let { summary, wrote } = report;
+    if (projectUnchanged) {
+      /* The ledger files nothing whatever the report named. A report that did not itself know it
+         was a no-op has its sentence replaced — a claim of a write over an untouched file is
+         exactly the phantom this exists to catch. A report that answered `wrote: []` knew, and its
+         sentence is kept: it says WHY nothing changed, which the witness cannot. */
+      wrote = [];
+      if (report.wrote === undefined || report.wrote.length > 0) {
+        summary = `${command.title} changed nothing: project.json is exactly as it was.`;
+      }
+    }
+    fileLedger(command, tab, wrote);
     if (tab && snapshot) {
       const verdict = await reportDocumentWrite(tab, snapshot, summary, deps);
       if (!verdict.success) {

package/src/services/ai-project-tools.ts

@@ -115,8 +115,14 @@ export interface ProjectToolsCtx {
    * tab happened to be re-read from disk afterwards ({@link ProjectToolsCtx.reloadTab}); that
    * re-read is gone, because a second parse of `project.json` is the very rival object the
    * configuration document exists to prevent.
+   *
+   * `text` is the bytes that reached the file, of which `config` is the parse. The document keeps a
+   * layout record for the file it holds (§9.4), and the assistant's write replaces the file — so
+   * the record has to travel with the write, or the next settings commit re-lays the file the model
+   * just formatted with the record of the file it had read before (issue 331). Handing the text
+   * over is what lets the document derive that record without reading the file back.
    */
-  onProjectConfigWritten?: (config: ProjectConfig) => void | Promise<void>;
+  onProjectConfigWritten?: (config: ProjectConfig, text: string) => void | Promise<void>;
 }
 
 /**
@@ -399,7 +405,7 @@ export function registerProjectTools(
            that tab, which is the split the adoption just closed. Every other path is a plain file
            and its tab has to be told from disk. */
         if (projectConfig) {
-          await onProjectConfigWritten?.(projectConfig);
+          await onProjectConfigWritten?.(projectConfig, content);
         } else if (openTab) {
           await reloadTab(relPath);
         }

package/src/services/ai-system-prompt.ts

@@ -117,8 +117,8 @@ export interface AiToolInfo {
  *
  * The other kind of tool is not here and must not be added here: a command record that declares
  * `aiTool` is projected by `services/ai-command-tools.ts`, gated by the record's own `when` /
- * `enablement`, and described by the record. `enable_extension`, `disable_extension` and
- * `delete_node` (né `remove_node`) left this table for that one.
+ * `enablement`, and described by the record. `enable_extension`, `disable_extension`, `delete_node`
+ * (né `remove_node`) and `open_document` left this table for that one.
  */
 export const AI_TOOL_TIERS: AiToolInfo[] = [
   // Always — a question is not gated on what happens to be open
@@ -185,12 +185,8 @@ export const AI_TOOL_TIERS: AiToolInfo[] = [
     tier: "project",
     blurb: "create_page(path, content) — create a new .json page file on disk.",
   },
-  {
-    name: "open_document",
-    tier: "project",
-    blurb:
-      "open_document(path) — open a file on the canvas as the active document; the document tools then operate on it. Use when the user should SEE the page, or for iterative visual refinement.",
-  },
+  /* `open_document` is not a row: it is the projection of the `document.open` record
+     (`workspace/workspace.ts`), advertised by the record's own gate and described by the record. */
   // Document (an active document on the canvas)
   {
     name: "read_document",

package/src/services/ai-tools.ts

@@ -14,9 +14,6 @@ import type { JxMutableNode, JxPath, JxStateDefinition } from "@jxsuite/schema/t
 import { getNodeAtPath } from "../state";
 import type { Tab } from "../tabs/tab";
 import {
-  beginBatch,
-  endBatch,
-  isBatching,
   mutateInsertNode,
   mutateMoveNode,
   mutateUpdateProperty,
@@ -110,7 +107,6 @@ async function applyAndValidate(
  *   validate?: (doc: unknown) => Promise<string[]>;
  *   saveFile?: (relPath: string, content: string) => Promise<void>;
  *   renderCheck?: (doc: unknown) => Promise<{ ok: true } | { ok: false; error: string }>;
- *   openDocument?: (path: string) => Promise<void>;
  *   projectStyle?: Record<string, string>;
  *   getProjectStyle?: () => Record<string, string> | undefined;
  *   findOpenTab?: (path: string) => import("../tabs/tab").Tab | null;
@@ -124,7 +120,6 @@ export function registerAiTools(
     validate = validateDoc,
     saveFile,
     renderCheck,
-    openDocument,
     projectStyle,
     getProjectStyle,
     findOpenTab,
@@ -134,7 +129,6 @@ export function registerAiTools(
     validate?: (doc: unknown) => Promise<string[]>;
     saveFile?: (relPath: string, content: string) => Promise<void>;
     renderCheck?: (doc: unknown) => Promise<{ ok: true } | { ok: false; error: string }>;
-    openDocument?: (path: string) => Promise<void>;
     projectStyle?: Record<string, string> | undefined;
     /**
      * Live variant of `projectStyle` — takes precedence; re-read per tool call so a project
@@ -776,67 +770,12 @@ export function registerAiTools(
     }),
   );
 
-  // ── open_document ─────────────────────────────────────────────────────
-
-  registry.register(
-    createToolDefinition({
-      name: "open_document",
-      description:
-        "Switch the active document to another file in the project. After opening, all " +
-        "tools (read_document, set_property, add_child, etc.) operate on the newly-active " +
-        "document. Use this to iteratively refine pages or components after creating them " +
-        "with create_page or create_component.",
-      parameters: {
-        type: "object",
-        properties: {
-          path: {
-            type: "string",
-            description:
-              'File path relative to the project root, e.g. "pages/about.json" or ' +
-              '"components/nav-bar.json". Must be an existing file.',
-          },
-        },
-        required: ["path"],
-      },
-      async execute(args) {
-        if (!openDocument) {
-          return {
-            success: false,
-            error: "File navigation is not available in this environment.",
-          };
-        }
-        const { path: relPath } = args as { path: string };
-        try {
-          await openDocument(relPath);
-          const tab = getTab();
-          if (!tab) {
-            return {
-              success: false,
-              error: `File "${relPath}" could not be opened — no active tab after navigation.`,
-            };
-          }
-          /*
-           * The agent loop opens a single undo batch on the tab that was active at loop start
-           * (tool-executor.js → beginBatch). Switching the active document mid-loop would strand
-           * the new tab's edits with no history snapshot — undo would have nothing to roll back.
-           * Flush the previous tab's batch and re-open one on the newly-active tab so edits in
-           * each document remain individually undoable.
-           */
-          if (isBatching()) {
-            endBatch();
-            beginBatch(tab);
-          }
-          return {
-            success: true,
-            summary: `Switched to "${relPath}". All tools now operate on this document.`,
-          };
-        } catch (error) {
-          return {
-            success: false,
-            error: `Failed to open "${relPath}": ${error instanceof Error ? error.message : String(error)}`,
-          };
-        }
-      },
-    }),
-  );
+  /*
+   * `open_document` is NOT here any more. It is the projection of the `document.open` record
+   * (`workspace/workspace.ts`'s `tabCommands`), so the person's palette row and the model's tool
+   * are one `run` and one gate (§12.4). The hand tool read `getTab()` after the open and called
+   * whatever it found a success — a missing file left the previous document active and reported
+   * "Switched to" — and it re-anchored the undo batch itself, which `tool-executor.ts` has done
+   * after EVERY tool since project adoption started replacing tabs mid-loop.
+   */
 }

package/src/services/document-assistant.ts

@@ -40,7 +40,7 @@ import { preferredModel } from "./ai-models";
 import { pruneOrphanToolMessages, trimContext } from "./context-manager";
 import { renderCheck } from "./render-critic";
 import { validateDoc } from "./jx-validate";
-import { openFileInTab, reloadFileInTab } from "../files/files";
+import { reloadFileInTab } from "../files/files";
 import { getExtensionCatalog, refreshExtensionUi } from "../format/format-host";
 import * as sessionStore from "./ai-session-store";
 
@@ -98,7 +98,6 @@ export function createDocumentAssistant() {
     renderCheck: renderCheck as (
       doc: unknown,
     ) => Promise<{ ok: true } | { ok: false; error: string }>,
-    openDocument: openFileInTab,
     getProjectStyle,
     findOpenTab,
     reloadTab: reloadFileInTab,
@@ -130,12 +129,15 @@ export function createDocumentAssistant() {
         sessionStore.moveSession("", root, sessionId);
       }
     },
-    onProjectConfigWritten: async (config: ProjectConfig) => {
+    onProjectConfigWritten: async (config: ProjectConfig, text: string) => {
       /* Into the configuration document, not beside it. This used to assign a fresh object to
          `projectState.projectConfig`, leaving the document holding the previous configuration —
          and the next settings commit wrote that stale document back over the assistant's file.
-         `adoptProjectConfig` is the one door for a config that reached disk another way. */
-      await adoptProjectConfig(config);
+         `adoptProjectConfig` is the one door for a config that reached disk another way. The text
+         goes with it: the document derives the file's layout record from the bytes the tool wrote,
+         so the next settings commit is a one-line diff on the file as the model laid it out, not a
+         re-layout of it with the record of the file it read before (issue 331). */
+      await adoptProjectConfig(config, text);
       /* An `extensions` edit changes what the generated entry documents compose, and the backends
          regenerate them from project.json on demand — so without this the editor and the assistant
          both keep judging by the PREVIOUS project's schemas until the window reopens. */
@@ -157,7 +159,8 @@ export function createDocumentAssistant() {
     document: "an open document (use open_document first)",
     "document-tree":
       "an open document whose element tree the canvas is editing — Project Settings and the " +
-      "grid editors are documents, but not trees to restructure",
+      "grid editors are documents, but not trees to restructure, and a page left in Code view " +
+      "returns to the canvas with set_canvas_mode",
   } as const;
 
   /**

package/src/studio.ts

@@ -160,7 +160,7 @@ import {
   mountSignalsPanel,
   registerSignalsCommands,
 } from "./panels/signals-panel";
-import { loadComponentRegistry } from "./files/components";
+import { loadComponentRegistry, noteComponentSaved } from "./files/components";
 import { ensureDependenciesInstalled } from "./packages/ensure-deps";
 import { maybePromptJxsuiteUpdate } from "./packages/jxsuite-update";
 import { autoSyncProjectOnOpen } from "./packages/pull-package-sync";
@@ -234,7 +234,11 @@ import {
   platformUsesRepoPicker,
 } from "./new-project/add-repo-modal";
 import { openNewProjectModal, registerNewProjectCommands } from "./new-project/new-project-modal";
-import { invalidatePageRouteCache, registerInspectorCommands } from "./panels/properties-panel";
+import {
+  invalidatePageRouteCache,
+  registerInspectorCommands,
+  renderPropertiesPanel,
+} from "./panels/properties-panel";
 import { liveElementCommands, setContextMenuNavigate } from "./editor/context-menu";
 import { registerSeoCommands, renderSeoModal } from "./panels/seo-modal";
 import { ensurePopoverRevealWatch, setOpenPopover } from "./canvas/popover-state";
@@ -1497,9 +1501,17 @@ const liveChrome = createLiveSurfaceSaver({
   redefineOnCanvases: redefineElementOnCanvases,
   workspace,
 });
+/* The third is the component registry: a saved definition rewrites its own entry, so an instance's
+   Component Settings and the Library read the props the file has now rather than the ones the scan
+   saw when the project opened. The Content tab and the Library are told, because neither reads the
+   registry reactively. */
 setDocumentSavedListener((path, doc) => {
   void noteFileSaved(path);
   void liveChrome(path, doc as unknown as JxDocument);
+  if (noteComponentSaved(path, doc)) {
+    renderPropertiesPanel();
+    renderLeftPanel();
+  }
 });
 /* Walking a comparison. No deps: the stepper reads the pane-keyed diff store directly and the
    toolbar redraws itself, so there is nothing for the bootstrap to inject. */

package/src/surfaces/commandbar.json

@@ -78,7 +78,7 @@
       "gap": "2px",
       "flexShrink": "0"
     },
-    "& [part=\"layout\"], & [part=\"layout-add\"]": {
+    "& [part=\"layout\"]": {
       "padding": "2px var(--jx-space-3)",
       "border": "none",
       "borderRadius": "var(--jx-radius-sm)",
@@ -101,9 +101,6 @@
       "color": "var(--jx-fg)",
       "background": "var(--jx-hover-bg)"
     },
-    "& [part=\"layout-add\"]": {
-      "padding": "2px var(--jx-space-2)"
-    },
     "& [part=\"center\"]": {
       "display": "flex",
       "alignItems": "center",
@@ -479,14 +476,16 @@
               }
             },
             {
-              "tagName": "button",
+              "tagName": "jx-action-button",
+              "$props": {
+                "label": "Save layout",
+                "hint": "Save the current arrangement as a layout",
+                "icon": "plus",
+                "size": "sm"
+              },
               "attributes": {
-                "part": "layout-add",
-                "type": "button",
-                "title": "Save the current arrangement as a layout",
-                "aria-label": "Save layout"
+                "part": "layout-add"
               },
-              "textContent": "+",
               "onclick": {
                 "$prototype": "Function",
                 "body": [
@@ -657,6 +656,9 @@
               "label": {
                 "$ref": "$map/item/title"
               },
+              "hint": {
+                "$ref": "$map/item/tooltip"
+              },
               "disabled": {
                 "$ref": "$map/item/disabled"
               },
@@ -664,8 +666,7 @@
               "quiet": true
             },
             "attributes": {
-              "data-command-id": "${$map.item.id}",
-              "title": "${$map.item.tooltip}"
+              "data-command-id": "${$map.item.id}"
             },
             "onclick": {
               "$prototype": "Function",

package/src/surfaces/commandbar.ts

@@ -43,6 +43,7 @@ import { armPreviewOverlay, flushPreviewOverlay } from "../preview/preview-overl
 import { documentUrlPattern, dynamicRouteParams } from "../page-params";
 import { getNodeAtPath, nodeLabel, projectState } from "../store";
 import { activeRegistry } from "../commands/active-registry";
+import { runActiveReported, runReported } from "../commands/run-reported";
 import { notify } from "../services/notify";
 import { mountSurface, registerSurface } from "../ui/surface";
 import { rectOf } from "../utils/geometry";
@@ -521,7 +522,7 @@ export async function saveLayoutPrompt(registry: CommandRegistry): Promise<void>
     placeholder: "Layout name",
   });
   if (name) {
-    await registry.run("view.saveLayout", { name });
+    await runReported(registry, "view.saveLayout", { name }, "Command Bar");
   }
 }
 
@@ -533,7 +534,7 @@ export async function renameLayoutPrompt(
 ): Promise<void> {
   const name = await showPromptDialog("Rename layout", { confirmLabel: "Rename", value: current });
   if (name) {
-    await registry.run("view.renameLayout", { layout, name });
+    await runReported(registry, "view.renameLayout", { layout, name }, "Command Bar");
   }
 }
 
@@ -707,7 +708,7 @@ function openStudioMenu(opener: HTMLElement): void {
     rows: overflowRows(registry),
     run: (id) => {
       if (registry.isEnabled(id)) {
-        void registry.run(id);
+        void runReported(registry, id, undefined, "Command Bar");
       }
     },
   });
@@ -751,7 +752,7 @@ function state(): CommandBarScope {
     run: (id) => {
       const registry = activeRegistry();
       if (registry?.isEnabled(id)) {
-        void registry.run(id);
+        void runReported(registry, id, undefined, "Command Bar");
       }
     },
     saveLayout: () => {
@@ -762,7 +763,7 @@ function state(): CommandBarScope {
     },
     segments: [],
     setLayout: (id) => {
-      void activeRegistry()?.run("view.setLayout", { layout: id });
+      void runActiveReported("view.setLayout", { layout: id }, "Command Bar");
     },
     windowControl: (action) => {
       windowControls()?.[action]();