@tai42/studio-sdk 10.0.0 → 11.1.0

package/dist/schema-form/union-field.js

@@ -2,21 +2,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Field } from '../components/field';
 import { Select } from '../components/select';
 import { classifySchema } from './classify';
-import { defaultValueForSchema } from './default-value';
+import { skeletonValueForSchema } from './default-value';
 import { FieldGroup } from './field-group';
 import { FieldNode } from './field-node';
 import { ObjectFields } from './object-fields';
 import { resolveRef } from './resolve';
 import { groupClass } from './styles';
 import { activeVariantIndex } from './union';
+function isPlainObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
 /**
- * A concrete seed for a chosen union variant. Object variants get their
- * required-field skeleton; a scalar/enum variant that has no explicit default
+ * A concrete seed for a chosen union variant. Object variants get their full
+ * skeleton (every required field minted, so the seed validates against the
+ * variant's own schema); a scalar/enum variant that has no explicit default
  * still needs a non-`undefined` value so the selection sticks (otherwise
  * `activeVariantIndex` reads it back as "no variant" and the picker snaps empty).
  */
 function seedVariantValue(schema, root) {
-    const seeded = defaultValueForSchema(schema, root);
+    const seeded = skeletonValueForSchema(schema, root);
     if (seeded !== undefined)
         return seeded;
     const resolved = resolveRef(schema, root);
@@ -24,16 +28,65 @@ function seedVariantValue(schema, root) {
         return resolved.const;
     if (resolved.enum !== undefined && resolved.enum.length > 0)
         return resolved.enum[0];
-    switch (classifySchema(schema, root).model.kind) {
-        case 'string':
-            return '';
-        case 'number':
-            return 0;
-        case 'boolean':
-            return false;
-        default:
-            return undefined;
+    return undefined;
+}
+/**
+ * The value committed when the user switches to `target`. Typed values SURVIVE
+ * the switch: the target's skeleton is minted first, then every top-level field
+ * of the current value whose NAME exists in the target variant's properties is
+ * carried over wholesale — the merge happens at the top level only, each carried
+ * field keeping its nested contents as-is — so fields both variants share are
+ * never silently discarded. Only fields absent from the current value keep
+ * their freshly minted seed. The discriminator tag is never carried: it always
+ * comes from the target's seed (the old tag would re-select the old variant).
+ * A non-object side (scalar variant, or a non-object current value) has no
+ * fields to carry, so it reseeds wholesale.
+ */
+function switchVariantValue(current, target, discriminator, root) {
+    const seeded = seedVariantValue(target.schema, root);
+    if (!isPlainObject(current) || !isPlainObject(seeded))
+        return seeded;
+    const { model } = classifySchema(target.schema, root);
+    if (model.kind !== 'object')
+        return seeded;
+    const targetNames = new Set(model.properties.map(([name]) => name));
+    const merged = { ...seeded };
+    for (const [name, held] of Object.entries(current)) {
+        if (name === discriminator)
+            continue;
+        if (targetNames.has(name))
+            merged[name] = held;
+    }
+    return merged;
+}
+/** Title-case a property name: `kind` → "Kind", `content_type` → "Content Type". */
+function titleCaseName(name) {
+    return name
+        .split(/[_\-\s]+/)
+        .filter((part) => part.length > 0)
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join(' ');
+}
+/**
+ * The variant picker's label. A discriminated union names the picker after the
+ * discriminator property it sets — the property's schema `title` when a variant
+ * declares one, else the property name title-cased — so the picker reads as the
+ * field it is ("Kind", "Format"). Only a union without a discriminator falls
+ * back to the generic "Variant".
+ */
+function pickerLabel(discriminator, variants, root) {
+    if (discriminator === undefined)
+        return 'Variant';
+    for (const variant of variants) {
+        const property = resolveRef(variant.schema, root).properties?.[discriminator];
+        if (property === undefined)
+            continue;
+        const title = property.title ?? resolveRef(property, root).title;
+        if (typeof title === 'string' && title.length > 0)
+            return title;
     }
+    const cased = titleCaseName(discriminator);
+    return cased.length > 0 ? cased : 'Variant';
 }
 export function UnionField({ heading, description, error, model, root, value, onChange, path, errors, idPrefix, }) {
     const index = activeVariantIndex(value, model.variants, model.discriminator, root);
@@ -46,10 +99,10 @@ export function UnionField({ heading, description, error, model, root, value, on
         const variant = model.variants[position];
         if (variant === undefined)
             return;
-        onChange(seedVariantValue(variant.schema, root));
+        onChange(switchVariantValue(value, variant, model.discriminator, root));
     };
     const active = index === -1 ? undefined : model.variants[index];
     const activeClassified = active === undefined ? undefined : classifySchema(active.schema, root);
-    return (_jsxs(FieldGroup, { heading: heading, description: description, error: error, atRoot: false, children: [_jsx(Field, { label: "Variant", children: _jsx(Select, { options: options, value: index === -1 ? '' : String(index), placeholder: "Select a variant\u2026", onValueChange: selectVariant }) }), activeClassified?.model.kind === 'object' ? (_jsx("div", { className: groupClass, children: _jsx(ObjectFields, { properties: activeClassified.model.properties, requiredKeys: activeClassified.model.required, root: root, value: value, onChange: onChange, path: path, errors: errors, idPrefix: idPrefix, skip: model.discriminator }) })) : active !== undefined ? (_jsx(FieldNode, { schema: active.schema, root: root, value: value, onChange: onChange, path: path, label: active.label, required: true, errors: errors, idPrefix: idPrefix })) : null] }));
+    return (_jsxs(FieldGroup, { heading: heading, description: description, error: error, atRoot: path === '', children: [_jsx(Field, { label: pickerLabel(model.discriminator, model.variants, root), children: _jsx(Select, { options: options, value: index === -1 ? '' : String(index), placeholder: "Select a variant\u2026", onValueChange: selectVariant }) }), activeClassified?.model.kind === 'object' ? (_jsx("div", { className: groupClass, children: _jsx(ObjectFields, { properties: activeClassified.model.properties, requiredKeys: activeClassified.model.required, root: root, value: value, onChange: onChange, path: path, errors: errors, idPrefix: idPrefix, skip: model.discriminator, markRequired: true }) })) : active !== undefined ? (_jsx(FieldNode, { schema: active.schema, root: root, value: value, onChange: onChange, path: path, label: active.label, required: true, errors: errors, idPrefix: idPrefix })) : null] }));
 }
 //# sourceMappingURL=union-field.js.map

package/dist/schema-form/union-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"union-field.js","sourceRoot":"","sources":["../../src/schema-form/union-field.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"union-field.js","sourceRoot":"","sources":["../../src/schema-form/union-field.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tai42/studio-sdk",
-  "version": "10.0.0",
+  "version": "11.1.0",
   "description": "The Studio plugin contract, shared UI components, and hooks that every feature builds on.",
   "license": "Apache-2.0",
   "author": "tai42 <oss@tai42.ai>",
@@ -95,7 +95,7 @@
     "@radix-ui/react-select": "^2.3.2",
     "@radix-ui/react-tabs": "^1.1.16",
     "@radix-ui/react-tooltip": "^1.2.11",
-    "@tai42/api-client": "10.0.0"
+    "@tai42/api-client": "11.1.0"
   },
   "scripts": {
     "build": "tsc -b tsconfig.build.json && node scripts/copy-assets.mjs",

package/src/components/components.css

@@ -984,6 +984,24 @@
     background-image: linear-gradient(var(--tai-color-accent-tint), var(--tai-color-accent-tint));
   }
 
+  /* The HOST-APPLIED provenance mark on plugin-contributed nav (the shell renders
+     it; a plugin cannot suppress or restyle it). A small muted glyph that links to
+     the plugin's marketplace row and brightens on hover/focus. It sits beside a nav
+     row — per-entry, whether the row sits in a core section or the shared Plugins section. */
+  .tai-plugin-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    color: var(--tai-color-text-muted);
+    border-radius: var(--tai-radius-sm);
+  }
+
+  .tai-plugin-badge:hover,
+  .tai-plugin-badge:focus-visible {
+    color: var(--tai-color-text);
+  }
+
   /* Skip-to-content: off-screen until focused, so a keyboard or screen-reader
      user can bypass the sidebar nav and jump straight to the page content
      (WCAG 2.4.1). It is the first focusable element in the shell. */
@@ -2072,6 +2090,29 @@
     flex-wrap: wrap;
   }
 
+  /* A search field whose magnifier sits INSIDE the input on its leading edge,
+     rather than as a detached glyph beside it. The wrapper is not a flex row —
+     the input is its only in-flow child — so it stays out of the horizontal-strip
+     contract; the icon is taken out of flow and centred over the input's reserved
+     leading padding, and made click-through so a press still lands in the field. */
+  .tai-search-field {
+    position: relative;
+    display: inline-block;
+  }
+
+  .tai-search-field > .tai-icon {
+    position: absolute;
+    inset-inline-start: var(--tai-space-3);
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--tai-color-text-muted);
+    pointer-events: none;
+  }
+
+  .tai-search-field > .tai-input {
+    padding-inline-start: calc(var(--tai-space-3) + 1.5rem);
+  }
+
   /* A first-class folder entry (row cell or card): the folder affordance beside
      its optional actions, the actions pushed to the trailing edge. */
   .tai-explorer-folder {

package/src/components/dialog.tsx

@@ -11,7 +11,7 @@
  * (see the props) reshape the panel without giving up any Radix behaviour.
  */
 import * as RadixDialog from '@radix-ui/react-dialog';
-import type { ReactElement, ReactNode } from 'react';
+import { useRef, type ReactElement, type ReactNode } from 'react';
 
 import { assertSlotElement } from '../element-slot';
 import { useModalFocusReturn } from './modal-focus';
@@ -51,6 +51,18 @@ export interface DialogProps {
    * accessible name never depends on the visible chrome.
    */
   readonly chromeless?: boolean;
+  /**
+   * When `false`, the light-dismiss gestures are disabled: Escape and a pointer
+   * press outside the panel no longer close it, so the only way out is an explicit
+   * action the `children` render (a Done/Cancel button calling `onOpenChange`).
+   * The focus trap, the scrim and every other Radix behaviour are unchanged. This
+   * is a generic mechanism — it knows nothing of what the dialog holds — for the
+   * one-time-reveal case where an accidental dismiss would lose content the server
+   * cannot reproduce. Defaults to `true`, the ordinary dismissable modal. This
+   * design-system panel renders no built-in close (X) affordance, so there is none
+   * to hide here; explicit close stays entirely with the caller's own buttons.
+   */
+  readonly dismissable?: boolean;
 }
 
 export function Dialog({
@@ -64,6 +76,7 @@ export function Dialog({
   fullscreen = false,
   contentClassName,
   chromeless = false,
+  dismissable = true,
 }: DialogProps) {
   const focusReturn = useModalFocusReturn(trigger !== undefined);
   if (trigger !== undefined) assertSlotElement(trigger, 'Dialog `trigger`');
@@ -72,6 +85,27 @@ export function Dialog({
   if (fullscreen) contentClasses.push('tai-dialog-fullscreen');
   if (contentClassName !== undefined) contentClasses.push(contentClassName);
 
+  // Blocking a dismiss is `preventDefault` on the two gestures Radix fires for
+  // one — Escape and a pointer press outside the panel — so the trap and scrim
+  // stay in place and only an explicit action can call `onOpenChange`.
+  //
+  // The handlers are STABLE (created once) and read `dismissable` through a live
+  // ref, deliberately: Radix's dismissable layer latches the handler it was given
+  // and keeps calling that first closure, so a dialog that mounts dismissable and
+  // later turns undismissable (the shown-once reveal) would go on honouring the
+  // stale `dismissable` if the value were read from the render closure. The ref,
+  // rewritten every render, is what a fresh gesture always sees.
+  const dismissableRef = useRef(dismissable);
+  dismissableRef.current = dismissable;
+  const dismissGuards = useRef({
+    onEscapeKeyDown: (event: KeyboardEvent) => {
+      if (!dismissableRef.current) event.preventDefault();
+    },
+    onPointerDownOutside: (event: Event) => {
+      if (!dismissableRef.current) event.preventDefault();
+    },
+  }).current;
+
   return (
     <RadixDialog.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
       {trigger !== undefined ? <RadixDialog.Trigger asChild>{trigger}</RadixDialog.Trigger> : null}
@@ -84,6 +118,7 @@ export function Dialog({
         <RadixDialog.Content
           className={contentClasses.join(' ')}
           {...focusReturn}
+          {...dismissGuards}
           {...(description === undefined ? { 'aria-describedby': undefined } : {})}
         >
           {/* The title always names the dialog; `chromeless` only hides it, moving

package/src/components/dirty-guard.tsx

@@ -1,10 +1,11 @@
 /**
- * Unsaved-changes guard for tabbed editors. `Tabs` unmount inactive panels, so a
- * tab switch tears an editor down and drops its edits. One registry closes the gap:
- * editors report dirtiness via {@link useRegisterDirty}; {@link GuardedTabs} holds a
- * switch away from a dirty editor behind a confirm; the same registry arms
- * {@link useNavigationGuard}, so a route navigation confirms through the SAME dialog
- * and a full-page unload raises the native prompt. The dialog is one shared
+ * Unsaved-changes guard for editors that get torn down or navigated away from. One
+ * registry closes the gap: editors report dirtiness via {@link useRegisterDirty}; the
+ * enclosing {@link DirtyGuardBoundary} arms {@link useNavigationGuard} from that
+ * registry, so a route navigation confirms through a shared dialog and a full-page
+ * unload raises the native prompt. {@link GuardedTabs} adds a tab-switch confirm on
+ * top of the same boundary — `Tabs` unmount inactive panels, so a switch away from a
+ * dirty editor is held behind the confirm too. The dialog is one shared
  * {@link ConfirmDialog} driven by a pending-promise resolver, so the guard's
  * `Promise<boolean>` handler and the tab switch both settle against it.
  */
@@ -36,7 +37,16 @@ interface DirtyGuardValue {
 
 const DirtyGuardContext = createContext<DirtyGuardValue | null>(null);
 
-function DirtyGuardProvider({ children }: { readonly children: ReactNode }): ReactNode {
+/**
+ * Boundary that guards navigation away from a region holding a dirty editor. Editors
+ * inside it arm the guard through {@link useRegisterDirty}; while any is dirty a route
+ * navigation (a route-token/plugin navigate, an {@link AppLink}, or a browser
+ * back/forward) confirms through the shared discard dialog, and a full-page unload
+ * raises the native prompt. Use this directly to guard a dirty editor that is a plain
+ * page section (no tabs); {@link GuardedTabs} wraps this same boundary to additionally
+ * guard tab switches.
+ */
+export function DirtyGuardBoundary({ children }: { readonly children: ReactNode }): ReactNode {
   const dirtyIds = useRef<Set<string>>(new Set());
   // Mirror the registry's non-empty state into React so the navigation guard's
   // `when` re-arms as editors go dirty/clean.
@@ -96,9 +106,9 @@ function DirtyGuardProvider({ children }: { readonly children: ReactNode }): Rea
 }
 
 /**
- * Report an editor's dirty state to the enclosing {@link GuardedTabs}. A no-op
- * outside a provider (an editor rendered standalone, e.g. in isolation tests) so
- * the hook is always safe to call.
+ * Report an editor's dirty state to the enclosing {@link DirtyGuardBoundary} (which
+ * {@link GuardedTabs} also provides). A no-op outside a boundary (an editor rendered
+ * standalone, e.g. in isolation tests) so the hook is always safe to call.
  */
 export function useRegisterDirty(dirty: boolean): void {
   const ctx = useContext(DirtyGuardContext);
@@ -135,7 +145,7 @@ function GuardedTabsInner({
 
 /**
  * A drop-in replacement for {@link Tabs} that guards a switch away from a dirty
- * editor. Wraps the tabs in a {@link DirtyGuardProvider}, so an editor rendered in
+ * editor. Wraps the tabs in a {@link DirtyGuardBoundary}, so an editor rendered in
  * any panel can arm the guard through {@link useRegisterDirty}.
  */
 export function GuardedTabs({
@@ -146,8 +156,8 @@ export function GuardedTabs({
   readonly defaultValue?: string;
 }): ReactNode {
   return (
-    <DirtyGuardProvider>
+    <DirtyGuardBoundary>
       <GuardedTabsInner items={items} defaultValue={defaultValue} />
-    </DirtyGuardProvider>
+    </DirtyGuardBoundary>
   );
 }

package/src/components/explorer-view.tsx

@@ -409,7 +409,11 @@ export function ExplorerView<T>({
   const footer =
     entries.length > 0 ? (
       <nav className="tai-explorer-pagination" aria-label={`${label} pagination`}>
-        <span className="tai-muted">{`${String(pageStart + 1)}–${String(Math.min(pageStart + pageSize, entries.length))} of ${String(entries.length)}`}</span>
+        {/* The pager counts ENTRIES — subfolders plus filtered items in the
+            current directory — which is a different unit from the header's total
+            item count across every folder. Naming the unit keeps the two honest:
+            "1–4 of 4 entries" here versus "7 templates" above. */}
+        <span className="tai-muted">{`${String(pageStart + 1)}–${String(Math.min(pageStart + pageSize, entries.length))} of ${String(entries.length)} entries`}</span>
         <div className="tai-row">
           <Select
             aria-label="Items per page"
@@ -542,7 +546,10 @@ export function ExplorerView<T>({
       <div className="tai-explorer-controls">
         <div className="tai-row">
           {search !== undefined ? (
-            <span className="tai-row">
+            // The magnifier is a leading icon INSIDE the input, not a detached
+            // glyph beside it: the wrapper positions the icon over the input's
+            // reserved leading padding.
+            <span className="tai-search-field">
               <SearchIcon />
               <TextInput
                 value={search.value}

package/src/components/field.tsx

@@ -155,6 +155,16 @@ export function Field({
             {label}
           </label>
         )}
+        {/* The description sits BETWEEN the label and the control, so it stays
+            adjacent to the label it glosses. After the control it drifts: a
+            group Field can wrap an arbitrarily tall surface (a whole schema
+            form), and a description below that surface reads as a footnote to
+            nothing. */}
+        {description !== undefined ? (
+          <p id={descriptionId} className="tai-field-hint" style={{ margin: 0 }}>
+            {description}
+          </p>
+        ) : null}
         {group ? (
           <div
             role="group"
@@ -167,11 +177,6 @@ export function Field({
         ) : (
           children
         )}
-        {description !== undefined ? (
-          <p id={descriptionId} className="tai-field-hint" style={{ margin: 0 }}>
-            {description}
-          </p>
-        ) : null}
         {/* The icon carries the invalid state alongside the color, never the color
             alone — and it is the ERROR mark: a rejected value is a definite
             negative, not the warning the triangle states. */}

package/src/components/fleet-report.tsx

@@ -9,7 +9,10 @@
  * used by every config-mutation surface) reports a saved change that did not fully
  * propagate and points the operator at the System page to reload; `'reload'` (the
  * System page's own fleet-reload action) drops the "Change saved" framing — nothing
- * was saved, a reload was dispatched — and the self-referential System-page pointer.
+ * was saved, a reload was dispatched — and the self-referential System-page pointer;
+ * `'deregister'` and `'remove'` (detach fan-outs) likewise drop the "Change saved"
+ * framing and points the operator back at re-running the deregister, because a
+ * reload would re-attach the very server being detached — the wrong remediation.
  *
  * A `converged` summary (every worker applied, or a lone-worker local-only change)
  * renders NOTHING — the calling surface shows its own success. A `degraded` summary
@@ -73,26 +76,44 @@ const OUTCOME_STATUS: Record<FleetFailureOutcome, StatusTone> = {
  */
 export interface FleetReportProps {
   readonly summary: FleetReportSummary | null;
-  /** Whose framing the copy takes: a saved config change, or a dispatched reload. */
-  readonly action?: 'save' | 'reload';
+  /**
+   * Whose framing the copy takes: a saved config change (`'save'`), a dispatched
+   * reload (`'reload'`), a connector detach fan-out (`'deregister'`), or a live-registry
+   * tool removal (`'remove'`). All but `'save'` drop the "Change saved" framing;
+   * `'deregister'` and `'remove'` also point remediation back at re-running that
+   * same detach, since a reload would re-attach the detached server or tool.
+   */
+  readonly action?: 'save' | 'reload' | 'deregister' | 'remove';
 }
 
 export function FleetReport({ summary, action = 'save' }: FleetReportProps): ReactNode {
   if (summary === null || summary.status === 'converged') return null;
 
+  // Only a saved config change carries the "Change saved" framing; a reload or a
+  // deregister saved nothing.
+  const savedFraming = action === 'save';
+
   if (summary.status === 'unreachable') {
+    // Where to send the operator once the bus is back: re-run the same op, except a
+    // saved change reloads from the System page.
+    const unreachableRemediation =
+      action === 'deregister'
+        ? 'Re-run the deregister once the bus is back.'
+        : action === 'remove'
+          ? 'Re-run the remove once the bus is back.'
+          : action === 'reload'
+            ? 'Re-run the reload once the bus is back.'
+            : 'Re-run the reload from the System page once the bus is back.';
     return (
       <div role="alert" className="tai-error-state tai-stack tai-stack-2">
         <strong className="tai-status tai-status-err">
           <XCircleIcon />
-          {action === 'reload'
-            ? 'The worker fleet was not reached'
-            : 'Change saved, but the worker fleet was not reached'}
+          {savedFraming
+            ? 'Change saved, but the worker fleet was not reached'
+            : 'The worker fleet was not reached'}
         </strong>
         <p>
-          {action === 'reload'
-            ? 'The worker bus was unreachable, so other workers may still be running the old config. Re-run the reload once the bus is back.'
-            : 'The worker bus was unreachable, so other workers may still be running the old config. Re-run the reload from the System page once the bus is back.'}
+          {`The worker bus was unreachable, so other workers may still be running the old config. ${unreachableRemediation}`}
         </p>
         {/* The bus error is a message, not a listing: it wraps rather than scrolls. */}
         {summary.error !== null ? (
@@ -111,17 +132,27 @@ export function FleetReport({ summary, action = 'save' }: FleetReportProps): Rea
   // worker is the commonest degraded fleet there is.
   const count = summary.failures.length;
   const workers = `${String(count)} worker${count === 1 ? '' : 's'}`;
+  // How the operator converges the stranded workers: re-run the same op, except a
+  // saved change reloads the fleet from the System page.
+  const remediation =
+    action === 'deregister'
+      ? 're-run the deregister'
+      : action === 'remove'
+        ? 're-run the remove'
+        : action === 'reload'
+          ? 're-run the reload'
+          : 'reload the fleet from the System page';
   return (
     <div role="alert" className="tai-warn-state tai-stack tai-stack-2">
       <strong className="tai-status tai-status-warn">
         <AlertTriangleIcon />
-        {action === 'reload'
-          ? `${workers} did not converge`
-          : `Change saved, but ${workers} did not converge`}
+        {savedFraming
+          ? `Change saved, but ${workers} did not converge`
+          : `${workers} did not converge`}
       </strong>
       <p>
         {`${count === 1 ? 'This worker' : 'These workers'} may still be running the old config — ` +
-          (action === 'reload' ? 're-run the reload' : 'reload the fleet from the System page') +
+          remediation +
           ` to converge ${count === 1 ? 'it' : 'them'}.`}
       </p>
       <ul className="tai-stack tai-stack-2">

package/src/components/icons.tsx

@@ -504,6 +504,24 @@ export const GridIcon: IconComponent = (props) => (
   </Icon>
 );
 
+/** Served endpoints: a broadcast node radiating to the tools it serves. */
+export const ServedEndpointsIcon: IconComponent = (props) => (
+  <Icon {...props}>
+    <circle cx="12" cy="12" r="2.5" />
+    <path d="M7.8 7.8a6 6 0 0 0 0 8.4" />
+    <path d="M16.2 7.8a6 6 0 0 1 0 8.4" />
+    <path d="M5 5a9 9 0 0 0 0 14" />
+    <path d="M19 5a9 9 0 0 1 0 14" />
+  </Icon>
+);
+
+/** Plugin: a puzzle piece — the host's provenance mark for plugin-contributed nav. */
+export const PluginIcon: IconComponent = (props) => (
+  <Icon {...props}>
+    <path d="M10 4a2 2 0 0 1 4 0c0 .8.7 1.4 1.5 1.4H18a1 1 0 0 1 1 1v2.6c0 .8.6 1.5 1.4 1.5a2 2 0 0 1 0 4c-.8 0-1.4.7-1.4 1.5V19a1 1 0 0 1-1 1h-2.6c-.8 0-1.4-.6-1.4-1.4a2 2 0 0 0-4 0c0 .8-.6 1.4-1.4 1.4H6a1 1 0 0 1-1-1v-2.5C5 15.7 4.4 15 3.6 15a2 2 0 0 1 0-4c.8 0 1.4-.7 1.4-1.5V6a1 1 0 0 1 1-1h2.5C9.3 5 10 4.4 10 3.6z" />
+  </Icon>
+);
+
 // -- Route mapping -----------------------------------------------------------
 
 /**
@@ -519,6 +537,7 @@ export const NAV_ICONS: Readonly<Record<Exclude<RouteToken, 'login'>, IconCompon
   extensions: ExtensionsIcon,
   templates: TemplatesIcon,
   connectors: ConnectorsIcon,
+  servedEndpoints: ServedEndpointsIcon,
   hooks: HooksIcon,
   storage: StorageIcon,
   scheduling: SchedulingIcon,

package/src/components/tokens.css

@@ -197,16 +197,26 @@
     --tai-color-syntax-bool: var(--tai-color-warn-text);
 
     /* -- Legacy token slots -------------------------------------------------
-       The names a plugin already styles against, re-pointed at the members of
-       the contract above that keep them legible. `danger-text` is the label on
-       the danger FILL, so it is white in light and ink in dark. */
+       The names a plugin already styles against. `primary`/`success`/`warning`
+       re-point at the members of the contract above that keep them legible.
+
+       `danger` is the one destructive EMPHASIS, and it runs deeper than the
+       accent on purpose: a destructive fill sharing the crimson brand ramp reads
+       as the primary action, so this is its own deep red — clearly darker and
+       less pink than the accent in BOTH themes, unlike the light-fill dark-ink
+       convention the accent follows. Its label is white in both themes and its
+       hover a shade deeper still, so a destructive button is instantly told apart
+       from a primary one. `danger-text` is that white label on the danger FILL;
+       `danger-surface` is the faint error-tint ground the label sits over
+       elsewhere. */
     --tai-color-primary: var(--tai-color-accent);
     --tai-color-primary-text: var(--tai-color-on-accent);
-    --tai-color-danger: var(--tai-color-err-text);
+    --tai-color-danger: #991b1b;
+    --tai-dark-color-danger: #dc2626;
     --tai-color-danger-text: #ffffff;
-    --tai-dark-color-danger-text: #0c0e12;
+    --tai-dark-color-danger-text: #ffffff;
     --tai-color-danger-hover: #7f1d1d;
-    --tai-dark-color-danger-hover: #fca5a5;
+    --tai-dark-color-danger-hover: #b91c1c;
     --tai-color-danger-surface: var(--tai-color-err-tint);
     --tai-color-success: var(--tai-color-ok-text);
     --tai-color-warning: var(--tai-color-warn-text);
@@ -325,6 +335,7 @@
       --tai-color-scrim: var(--tai-dark-color-scrim);
       --tai-color-prose-link: var(--tai-dark-color-prose-link);
       --tai-color-prose-link-hover: var(--tai-dark-color-prose-link-hover);
+      --tai-color-danger: var(--tai-dark-color-danger);
       --tai-color-danger-text: var(--tai-dark-color-danger-text);
       --tai-color-danger-hover: var(--tai-dark-color-danger-hover);
       --tai-shadow-lift-color: var(--tai-dark-shadow-lift-color);
@@ -371,6 +382,7 @@
     --tai-color-scrim: var(--tai-dark-color-scrim);
     --tai-color-prose-link: var(--tai-dark-color-prose-link);
     --tai-color-prose-link-hover: var(--tai-dark-color-prose-link-hover);
+    --tai-color-danger: var(--tai-dark-color-danger);
     --tai-color-danger-text: var(--tai-dark-color-danger-text);
     --tai-color-danger-hover: var(--tai-dark-color-danger-hover);
     --tai-shadow-lift-color: var(--tai-dark-shadow-lift-color);

package/src/host.ts

@@ -12,4 +12,8 @@ export {
   subscribePluginHost,
   usePluginContributions,
 } from './plugin/host-state';
-export type { PluginLoaderState, PluginContributionsSnapshot } from './plugin/host-state';
+export type {
+  PluginLoaderState,
+  LoadedPlugin,
+  PluginContributionsSnapshot,
+} from './plugin/host-state';

package/src/index.ts

@@ -191,7 +191,7 @@ export { Dialog } from './components/dialog';
 export type { DialogProps } from './components/dialog';
 export { ConfirmDialog } from './components/confirm-dialog';
 export type { ConfirmDialogProps } from './components/confirm-dialog';
-export { GuardedTabs, useRegisterDirty } from './components/dirty-guard';
+export { GuardedTabs, DirtyGuardBoundary, useRegisterDirty } from './components/dirty-guard';
 export { FormDialog } from './components/form-dialog';
 export type { FormDialogProps } from './components/form-dialog';
 export { Drawer } from './components/drawer';
@@ -318,6 +318,8 @@ export {
   ExtensionsIcon,
   TemplatesIcon,
   ConnectorsIcon,
+  ServedEndpointsIcon,
+  PluginIcon,
   HooksIcon,
   StorageIcon,
   SchedulingIcon,