@w6w/ui 0.2.0 → 0.2.54

package/dist/types.d.ts

@@ -1,8 +1,4 @@
-/**
- * Wire types the components consume. These mirror the shapes the w6w server
- * returns over HTTP. They are intentionally a local copy so consumers who
- * don't use `@w6w/types` (partners, non-TypeScript backends) don't need it.
- */
+import { ParamWhen } from '@w6w/expr';
 /** Summary of a registered app as returned by GET /apps. */
 export interface AppSummary {
     id: string;
@@ -22,12 +18,19 @@ export interface AppSummary {
     maturity?: string;
     visibility?: string;
     successor?: string;
+    /** Model-provider designation; absent when the app does not declare one. */
+    modelProvider?: {
+        modelTypes: string[];
+        modelFamilies?: string[];
+    };
     /**
      * True when the calling tenant has zero-credential access flagged for this
      * app — usable with no connection step at all (server-computed per caller;
      * `packages/server/packages/api/wire-summary.ts`'s `zeroCredential`).
      */
     zeroCredential?: boolean;
+    /** Number of triggers the app declares (wire already carries it). */
+    triggerCount?: number;
 }
 /** One trigger an app declares, as returned by GET /apps/:id/triggers. */
 export interface TriggerSummary {
@@ -38,9 +41,15 @@ export interface TriggerSummary {
     description?: string;
     requiresAuth?: boolean;
     /** `"poll"` triggers are fetched on an interval; absent or `"webhook"` receive pushes. */
-    type?: "webhook" | "poll";
+    type?: "webhook" | "poll" | "protocol";
     /** Host floor for a poll trigger's interval, in milliseconds. */
     minIntervalMs?: number;
+    /** The trigger's declared parameters (the route returns the full declaration). */
+    params?: readonly unknown[];
+    /** The event's declared fields (an `OutputField[]`) — keys for `trigger.event.<key>`. */
+    output?: unknown;
+    /** A representative event payload the app declares (never fabricated). */
+    sample?: unknown;
 }
 /** A Subscription (rfcs/trigger.md) as returned by the console subscription routes. */
 export interface SubscriptionSummary {
@@ -51,15 +60,43 @@ export interface SubscriptionSummary {
     connectionId: string | null;
     /** Present only for `appId === "@w6w/webhook"` — the server's own computed receive URL. */
     webhookUrl?: string;
-    type?: "webhook" | "poll";
-    status?: string;
+    type?: "webhook" | "poll" | "protocol";
+    status?: SubscriptionStatus;
     /** Poll interval in milliseconds; null for webhook subscriptions. */
     intervalMs?: number | null;
     lastError?: {
         code: string;
         message: string;
     } | null;
+    /** The workflow trigger node this subscription is bound to; null for a workflow-level one. */
+    nodeId?: string | null;
+    /** When registration with the app succeeded; null until it has. */
+    registeredAt?: string | null;
+    /** When the subscription last fired; null/absent when it never has. */
+    lastFireAt?: string | null;
+}
+/**
+ * A "Listen for test event" session on a `@w6w/webhook` subscription
+ * (`POST /subscriptions/:id/listen`). `request` is the captured, credential-masked call —
+ * exactly what a real run's webhook trigger emits as its output.
+ */
+export interface WebhookListenSession {
+    id: string;
+    subscriptionId: string;
+    nodeId: string | null;
+    expiresAt: string;
+    status: "waiting" | "captured" | "expired";
+    request?: {
+        method: string;
+        path: string;
+        query: Record<string, string>;
+        headers: Record<string, string>;
+        body: unknown;
+    };
+    receivedAt?: string;
 }
+/** Registration state of a Subscription (rfcs/trigger-protocol.md §Lifecycle). */
+export type SubscriptionStatus = "pending" | "registered" | "failed" | "paused" | "destroying";
 /** One field on an Auth method's connection form. Drives the input widgets. */
 export interface AuthField {
     key: string;
@@ -68,6 +105,8 @@ export interface AuthField {
     required?: boolean;
     default?: unknown;
     hint?: string;
+    /** Masks the input like a `secret` field whatever its `type` (e.g. a `json` key file). */
+    secret?: boolean;
 }
 /**
  * One declared parameter of an action, as returned by GET /apps/:id (the
@@ -87,6 +126,8 @@ export interface ActionParam {
     required?: boolean;
     default?: unknown;
     hint?: string;
+    /** Render hint; multiselect supports "checkboxes" or the default chip picker. */
+    ui?: string;
     /** Placeholder text for the input (e.g. the trailing prompt on a multiselect). */
     placeholder?: string;
     /**
@@ -95,6 +136,18 @@ export interface ActionParam {
      * params (they always show).
      */
     advanced?: boolean;
+    /**
+     * The field holds ONE value or expression, never a composed container: in the JSON-binding
+     * editor, picking a reference into an empty draft (or a bare `[]` / `{}`) stores the bare
+     * whole-value ref `"{{ ref }}"`, not `[ref]`. A literal still can be typed.
+     */
+    whole?: boolean;
+    /**
+     * The param is declared on the action but never rendered by any param form, and never gates
+     * the required check. Its stored value is preserved untouched (e.g. a canvas-owned `body`).
+     * Not the entry-level `InternalNodeDef.hidden` (a palette hide).
+     */
+    hidden?: boolean;
     /**
      * Lay this param out on a shared row with adjacent params carrying the same
      * `row` id — e.g. a username/password pair side by side.
@@ -115,11 +168,17 @@ export interface ActionParam {
      * (e.g. Basic-auth fields shown only when `auth` is `"basic"`).
      */
     showIf?: ParamCondition;
+    /**
+     * Conditional overlay: the first entry whose `if` holds overlays
+     * label/hint/required/ui/options onto this param (see `effectiveParam` in
+     * `@w6w/expr`). Mirrors `@w6w/types`' `Param.when`.
+     */
+    when?: ParamWhen<ParamOption[] | DynamicOptions>[];
     /**
      * Constrained choices. Renders as a single-select dropdown for `select` (or any
      * param with options), and as a multi-select pill picker for `multiselect`.
      */
-    options?: ParamOption[];
+    options?: ParamOption[] | DynamicOptions;
     /** Type-specific render/behavior options. */
     config?: ParamConfig;
     /**
@@ -141,11 +200,47 @@ export interface ActionParam {
     layout?: "row" | "stack";
     /** `section: "collapsible"` only — start collapsed (default `true`). */
     collapsed?: boolean;
+    /** `section: "collapsible"` only — start open when any child already holds a value. */
+    openWhenSet?: boolean;
+    /**
+     * `type: "code"` only — a Run script's code, which reads run data from its `state` / `vars` /
+     * `consts` globals: its insert actions write code reads, never `{{ }}` (the host does not
+     * substitute in code).
+     */
+    scriptReads?: boolean;
 }
 /** A single choice for a param rendered as a dropdown. */
 export interface ParamOption {
     value: string | number;
     label: string;
+    description?: string;
+}
+/** Host-resolved options (mirrors @w6w/types `DynamicOptions`). */
+export interface DynamicOptions {
+    source: string;
+    searchable?: boolean;
+    cache?: "session" | "none";
+    refreshOn?: string[];
+}
+/** True for the form-resolved arm: a non-array object with `source === "resolveFields"`. */
+export declare function isFormResolvedOptions(o: unknown): o is DynamicOptions;
+/** Body of `W6WApi.resolveActionFields`. */
+export interface ResolveFieldsBody {
+    connectionId: string;
+    version?: string;
+    reason: "init" | "change";
+    form: Record<string, unknown>;
+    previous?: Record<string, unknown>;
+    changed?: string[];
+    fields: string[];
+    unresolved: string[];
+}
+/** Result of `W6WApi.resolveActionFields`. */
+export interface ResolveFieldsResult {
+    fields: Record<string, {
+        options?: ParamOption[];
+        error?: string;
+    }>;
 }
 /**
  * The element schema for a `type: "array"` param. Either a scalar list
@@ -184,6 +279,10 @@ export interface ParamCondition {
 export interface ParamConfig {
     /** Render as a multi-line textarea. Implied by `type: "text"`. */
     multiline?: boolean;
+    /** With options: accept a value not in the list (Combobox `forceSelection` off). */
+    allowCustom?: boolean;
+    /** Multiselect storage format. Defaults to an array; CSV preserves string-based API inputs. */
+    valueFormat?: "array" | "csv";
 }
 /** Summary of an action an app exposes, as returned by GET /apps/:id. */
 export interface ActionDef {
@@ -267,16 +366,83 @@ export interface WorkflowDetail {
     name: string;
     displayName?: string;
     description?: string;
-    steps: WorkflowStepSummary[];
+    /** The canonical (manifest v2) step list. */
+    nodes?: WorkflowStepSummary[];
+    /** The legacy (v1) step list; a definition carries one or the other. */
+    steps?: WorkflowStepSummary[];
+}
+/** A `serviceAccount` auth's declaration: the credential contract it accepts and its binding. */
+export interface ServiceAccountConfig {
+    /** Credential contract ids this auth accepts; the first one is used to list/create. */
+    accepts: string[];
+    /** Scopes the binding requests by default (shown read-only; the server applies them). */
+    scopes: string[];
+    /** Whether a connection must/may name an impersonated user (`delegatedUser`). */
+    impersonation: "none" | "optional" | "required";
+    /** Extra per-connection (binding) fields; each lands in `binding.settings`. */
+    bindingFields?: AuthField[];
+}
+export type CredentialStatus = "active" | "disabled" | "revoked";
+/** A stored credential as the API lists it. Never carries the secret payload. */
+export interface CredentialSummary {
+    id: string;
+    name: string;
+    contract: string;
+    status: CredentialStatus | string;
+    revision: number;
+    /** Non-secret display values (e.g. the service account's email). */
+    display: Record<string, string>;
+    private: boolean;
+    connectionCount: number;
+    createdAt: string;
+    updatedAt: string;
+}
+/** The connections that use a credential. */
+export interface CredentialDependents {
+    connections: Array<{
+        id: string;
+        appId: string;
+        authKey: string;
+        displayName?: string | null;
+    }>;
+}
+export interface CredentialTestResult {
+    ok: boolean;
+    code?: string;
+    message?: string;
+}
+/** Per-connection settings applied on top of a shared credential. */
+export interface ConnectionBinding {
+    scopes?: string[];
+    /** The user the credential impersonates (Google domain-wide delegation). */
+    delegatedUser?: string;
+    settings?: Record<string, string | number | boolean>;
 }
+/** Body of `createConnection`: an inline credential XOR a reference to a stored one. */
+export type CreateConnectionBody = {
+    authKey: string;
+    credential: Record<string, unknown>;
+    credentialId?: never;
+    displayName?: string;
+    profile?: Record<string, unknown>;
+} | {
+    authKey: string;
+    credentialId: string;
+    credential?: never;
+    binding?: ConnectionBinding;
+    displayName?: string;
+    profile?: never;
+};
 /** Auth method declaration as exposed by an app's manifest. */
 export interface AuthDef {
     key: string;
-    type: "oauth2" | "apiKey" | "basic" | "bearer" | "custom" | "tenantAuth" | "jit" | string;
+    type: "oauth2" | "apiKey" | "basic" | "bearer" | "custom" | "tenantAuth" | "jit" | "serviceAccount" | string;
     displayName?: string;
     description?: string;
     connectionLabel?: string;
     fields?: AuthField[];
+    /** Present when `type === "serviceAccount"`: what credential it accepts and how it binds. */
+    serviceAccount?: ServiceAccountConfig;
     /** OAuth2 endpoints (only present when type === "oauth2"). */
     oauth2?: Record<string, unknown>;
     /**
@@ -314,6 +480,8 @@ export interface ConnectionSummary {
     id: string;
     appId: string;
     authKey: string;
+    /** The stored credential this connection uses, when it has one. */
+    credentialId?: string | null;
     /** The owning tenant. The server sends `tenant`/`subject`, never `owner`. */
     tenant?: string;
     /** The owning subject (the partner's user id). */

package/dist/use-app-action-defs.d.ts

@@ -1,7 +1,15 @@
 import { PortsLookup } from './flow-types.ts';
 import { StepNode } from './flow-utils.ts';
 import { W6WApi } from './provider.tsx';
-import { ActionDef } from './types.ts';
+import { ActionDef, TriggerSummary } from './types.ts';
 export declare function useAppActionDefs(api: W6WApi, nodes: StepNode[]): Record<string, ActionDef[]>;
+/**
+ * The trigger definitions of every app a workflow's APP-TRIGGER nodes (`uses.trigger === true`)
+ * use, so the editor can offer `trigger.event.<field>` from a trigger's declared `output` /
+ * `sample` without a run. Same shape as {@link useAppActionDefs}: fetched once per app id
+ * (`getAppTriggers`, optional on the api — absent means no claim), keyed on the sorted set of
+ * app ids, best-effort, a failed fetch retried by a later change.
+ */
+export declare function useAppTriggerDefs(api: W6WApi, nodes: StepNode[]): Record<string, TriggerSummary[]>;
 /** Build a `PortsLookup` over the fetched catalog defs (`useAppActionDefs`' result). */
 export declare function portsLookupFromDefs(defs: Record<string, ActionDef[]>): PortsLookup;

package/dist/use-dynamic-fields.d.ts

@@ -0,0 +1,23 @@
+import { DynamicContext } from './dynamic-fields.ts';
+import { ActionParam, ParamOption } from './types.ts';
+/** Per-field state the form renders from. */
+export interface DynamicFieldState {
+    options?: ParamOption[];
+    loading: boolean;
+    error?: string;
+    /** Why the field is free text (no connection / unresolved refreshOn). */
+    hint?: string;
+    /** Flag for a kept value not in the returned list. */
+    notInList?: string;
+}
+export interface UseDynamicFields {
+    fields: Record<string, DynamicFieldState>;
+    /** A pick committed `value` for `key` (select/Combobox/checkbox): one change call if any field refreshes on it. */
+    commit(key: string, value: unknown): void;
+    /** Focus entered `key`: remember the pre-edit form (the `previous` of a later blur commit). */
+    focus(key: string): void;
+    /** Focus left `key`: commit a text edit made since focus (never per keystroke). */
+    blur(key: string): void;
+    retry(key: string): void;
+}
+export declare function useDynamicFields(params: ActionParam[], values: Record<string, unknown>, dynamic: DynamicContext | undefined, onChange: (next: Record<string, unknown>) => void): UseDynamicFields;

package/dist/use-test-input.d.ts

@@ -0,0 +1,18 @@
+import { ActionParam } from './types.ts';
+export interface RememberedTestInput {
+    /** `true` once the read settled (or there was nothing to read). */
+    loaded: boolean;
+    /** `false` when the host has no `loadTestInputs` — fall back to the older source. */
+    supported: boolean;
+    /** `undefined` = no row; `{}` = cleared; else the values last used. */
+    input: Record<string, unknown> | undefined;
+    /** Remember `values` (secret literals dropped). Best-effort: never throws. */
+    save: (values: Record<string, unknown>, params?: readonly ActionParam[]) => void;
+    /** Forget the values (stored as `{}`, so no older source refills the form). */
+    clear: () => void;
+}
+export declare function useRememberedTestInput(workflowId: string | undefined, nodeId: string | undefined): RememberedTestInput;
+/** The small muted note under a prefilled form: "last used values · Clear". */
+export declare function LastUsedNote({ onClear }: {
+    onClear: () => void;
+}): import("react").JSX.Element;

package/dist/workflow-connections.d.ts

@@ -0,0 +1,30 @@
+import { FlowStep, FlowWorkflow } from './flow-types.ts';
+import { AuthDef, ConnectionSummary } from './types.ts';
+export type FlowConnections = Record<string, {
+    app: string;
+    connection: string | null;
+}>;
+/** Missing/foreign bindings stay unresolved in the editor; the server rejects invalid references. */
+export declare function connectionIdFor(step: FlowStep, connections?: FlowConnections): string | undefined;
+/** Lift old inline IDs on the next editor save. Independent bindings remain independent. */
+export declare function centralizeConnections<T extends Pick<FlowWorkflow, "connections" | "nodes">>(workflow: T): T;
+/** Drop only unreferenced aliases when serializing the complete workflow. */
+export declare function pruneUnusedConnections<T extends Pick<FlowWorkflow, "connections" | "nodes">>(workflow: T): T;
+export declare function withConnectionRef(step: FlowStep, connectionRef: string): FlowStep;
+/** An ordinary account selection affects this node only, detaching it from a shared entry. */
+export declare function selectNodeConnection(step: FlowStep, connection: string | undefined, nodes: FlowStep[], connections: FlowConnections): {
+    step: FlowStep;
+    connections: FlowConnections;
+};
+export declare function connectionSourceNodes(step: FlowStep, nodes: FlowStep[], connections: FlowConnections): FlowStep[];
+/** Accounts used anywhere in the workflow, including independently stored bindings. */
+export declare function connectionUsers(app: string, connection: string | undefined, nodes: FlowStep[], connections: FlowConnections): FlowStep[];
+/** An explicit initial selection wins; otherwise inherit the last added configured node. */
+export declare function defaultConnectionFor(step: FlowStep, choices: ConnectionSummary[], nodes: FlowStep[], connections: FlowConnections, initialConnection?: string): {
+    connection?: string;
+    connectionRef?: string;
+};
+/** The server's zero-credential sentinel is a real picker choice, without creating a row. */
+export declare function withDefaultConnection(appId: string, auths: AuthDef[], choices: ConnectionSummary[]): ConnectionSummary[];
+/** Change every binding used by the displayed account's consumers, retaining reference keys. */
+export declare function replaceWorkflowConnection(app: string, before: string, after: string, nodes: FlowStep[], connections: FlowConnections): FlowConnections;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@w6w/ui",
-  "version": "0.2.0",
+  "version": "0.2.54",
   "description": "React components for w6w — central API management. Build plugins, apps and integrations on them.",
   "license": "MIT",
   "homepage": "https://w6w.io",
   "author": "W6W (https://w6w.io)",
-  "bugs": "https://github.com/w6w-io/w6w-ui/issues",
+  "bugs": "https://github.com/w6w-io/w6w-studio/issues",
   "keywords": [
     "w6w",
     "react",
@@ -14,7 +14,8 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/w6w-io/w6w-ui.git"
+    "url": "https://github.com/w6w-io/w6w-studio.git",
+    "directory": "packages/ui"
   },
   "type": "module",
   "main": "./dist/index.cjs",
@@ -71,9 +72,12 @@
     "@codemirror/state": "^6.5.0",
     "@codemirror/view": "^6.35.0",
     "@uiw/react-codemirror": "^4.23.7",
-    "@w6w/expr": "^0.1.0",
+    "@w6w/expr": "^0.1.2",
     "@xyflow/react": "^12.3.6",
-    "prism-react-renderer": "^2.4.1"
+    "prism-react-renderer": "^2.4.1",
+    "react-markdown": "^10.1.0",
+    "typescript": "^5.7.2",
+    "@codemirror/autocomplete": "^6.18.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
@@ -89,7 +93,6 @@
     "react-dom": "^18.3.1",
     "sass": "^1.102.0",
     "storybook": "^10.5.8",
-    "typescript": "^5.7.2",
     "vite": "^6.0.5",
     "vite-plugin-dts": "^4.3.0"
   },
@@ -100,16 +103,24 @@
     "typecheck": "tsc -b --noEmit",
     "test": "node --max-old-space-size=2048 --conditions=w6w-source --import ./src/test-jsx-loader.mjs --test --test-concurrency=4 --test-timeout=120000 src/__tests__/*.test.ts src/components/__tests__/*.test.ts",
     "test:picker-layout": "bash test/picker-layout/run.sh",
+    "test:canvas-layer": "bash test/canvas-layer/run.sh",
+    "test:foreach-loop": "bash test/foreach-loop/run.sh",
     "test:expr-template": "bash test/expr-template/run.sh",
+    "test:friendly-expressions": "node test/friendly-expressions/run.mjs",
     "test:action-test-form": "bash test/action-test-form/run.sh",
     "test:host-isolation": "bash test/host-isolation/run.sh",
     "test:copyable": "bash test/copyable/run.sh",
+    "test:code-editor-fill": "bash test/code-editor-fill/run.sh",
     "test:pack-smoke": "bash test/pack-smoke/run.sh",
     "storybook": "storybook dev -p 6006 --no-open",
     "build-storybook": "storybook build",
     "lint": "biome check .",
     "lint:tokens": "node scripts/lint-tokens.mjs",
     "coverage:stories": "node scripts/coverage-stories.mjs",
-    "format": "biome format --write ."
+    "format": "biome format --write .",
+    "test:workflow-connections": "node test/workflow-connections/run.mjs",
+    "test:workflow-undo": "node test/workflow-connections/undo.mjs",
+    "test:workflow-context-menu": "node test/workflow-connections/context-menu.mjs",
+    "test:script-completion": "node test/script-completion/run.mjs"
   }
 }

package/src/code.css

@@ -32,7 +32,9 @@
  * host rule — even a plain `:root { ... }` — wins without !important. Tokens are
  * defined on :root so every `.w6w-*` component inherits them out of the box.
  */
-/* Light — the base defaults. */
+/* Light — the base defaults.
+   `--w6w-loop-N` is the For each palette (flow-loop-colors.ts, LOOP_TONES): no red,
+   black or green, so a loop never reads as an error port or a success edge. */
 :where(:root) {
   --w6w-bg: #f7f8fa;
   --w6w-panel: #ffffff;
@@ -48,6 +50,12 @@
   --w6w-health-down: var(--w6w-danger);
   --w6w-health-unknown: #5f6875;
   --w6w-icon-swatch: #f0f2f6;
+  --w6w-loop-1: #2f6fdf;
+  --w6w-loop-2: #7c4ddb;
+  --w6w-loop-3: #b7791f;
+  --w6w-loop-4: #0e8fa8;
+  --w6w-loop-5: #b0399f;
+  --w6w-loop-6: #4f4fc7;
   --w6w-code-comment: #6b7280;
   --w6w-code-keyword: #8250df;
   --w6w-code-string: #0a7b34;
@@ -77,6 +85,12 @@
     --w6w-health-down: var(--w6w-danger);
     --w6w-health-unknown: #9aa3b2;
     --w6w-icon-swatch: #1f232c;
+    --w6w-loop-1: #5b9bff;
+    --w6w-loop-2: #a98bff;
+    --w6w-loop-3: #f0b13a;
+    --w6w-loop-4: #3cc6e0;
+    --w6w-loop-5: #e47ad6;
+    --w6w-loop-6: #8a8aff;
     --w6w-scheme: dark;
     --w6w-code-comment: #7d8797;
     --w6w-code-keyword: #d2a8ff;
@@ -105,6 +119,12 @@
   --w6w-health-down: var(--w6w-danger);
   --w6w-health-unknown: #5f6875;
   --w6w-icon-swatch: #f0f2f6;
+  --w6w-loop-1: #2f6fdf;
+  --w6w-loop-2: #7c4ddb;
+  --w6w-loop-3: #b7791f;
+  --w6w-loop-4: #0e8fa8;
+  --w6w-loop-5: #b0399f;
+  --w6w-loop-6: #4f4fc7;
   --w6w-code-comment: #6b7280;
   --w6w-code-keyword: #8250df;
   --w6w-code-string: #0a7b34;
@@ -130,6 +150,12 @@
   --w6w-health-down: var(--w6w-danger);
   --w6w-health-unknown: #9aa3b2;
   --w6w-icon-swatch: #1f232c;
+  --w6w-loop-1: #5b9bff;
+  --w6w-loop-2: #a98bff;
+  --w6w-loop-3: #f0b13a;
+  --w6w-loop-4: #3cc6e0;
+  --w6w-loop-5: #e47ad6;
+  --w6w-loop-6: #8a8aff;
   --w6w-code-comment: #7d8797;
   --w6w-code-keyword: #d2a8ff;
   --w6w-code-string: #7ee787;
@@ -405,6 +431,32 @@
   min-width: 0;
 }
 
+/* ── Hover modifier: ResultViewer — the button overlays the top-right corner of
+   ANY child and is revealed on hover/focus; always shown where there is no hover. */
+.w6w-copyable--hover {
+  position: relative;
+  align-items: flex-start;
+}
+
+.w6w-copyable--hover > .w6w-copyable-btn {
+  position: absolute;
+  top: var(--w6w-sp-1);
+  right: var(--w6w-sp-1);
+  background: var(--w6w-panel);
+  border-color: var(--w6w-border);
+  opacity: 0;
+}
+
+.w6w-copyable--hover:hover > .w6w-copyable-btn,
+.w6w-copyable--hover:focus-within > .w6w-copyable-btn {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .w6w-copyable--hover > .w6w-copyable-btn {
+    opacity: 1;
+  }
+}
 .w6w-code-block {
   background: var(--w6w-panel-2);
   border: 1px solid var(--w6w-border);
@@ -528,15 +580,17 @@
 /* The expanded form of a clipped value (`resolved-clip.ts`). A block with its
    own scroll, so "Show all" can never restore the unbounded inline paste that
    buried the other params and the run's result. */
+.w6w-resolved-copy {
+  margin: var(--w6w-sp-1) 0;
+}
+
 .w6w-resolved-text-full {
   display: block;
-  margin: var(--w6w-sp-1) 0;
+  margin: 0;
   max-height: 14em;
   overflow: auto;
-  padding: var(--w6w-sp-2);
-  background: var(--w6w-panel-2);
-  border: 1px solid var(--w6w-border);
-  border-radius: var(--w6w-radius);
+  padding: 0;
+  padding-right: var(--w6w-sp-10);
   font-family: var(--w6w-font-mono);
   font-size: 0.85em; /* lint-tokens-allow: matches the sibling code-typography rules above in this same file */
   line-height: var(--w6w-lh-normal);

package/src/styles/_budget-meter.scss

@@ -0,0 +1,46 @@
+/* BudgetMeter — usage-vs-limit bar with a reserved segment.
+ *
+ * Token-only: every colour is a --w6w-* custom property, so a host restyles
+ * the meter (including the over-limit state) by overriding tokens, never by
+ * targeting a hex value here. */
+.w6w-budget-meter {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+}
+.w6w-budget-meter-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--w6w-sp-2);
+  color: var(--w6w-muted);
+}
+.w6w-budget-meter-label {
+  color: var(--w6w-text);
+}
+.w6w-budget-meter-value {
+  font-variant-numeric: tabular-nums;
+}
+.w6w-budget-meter-track {
+  display: flex;
+  width: 100%;
+  height: 8px;
+  overflow: hidden;
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+}
+.w6w-budget-meter-used {
+  height: 100%;
+  background: var(--w6w-accent);
+}
+.w6w-budget-meter-reserved {
+  height: 100%;
+  background: var(--w6w-health-degraded);
+}
+.w6w-budget-meter-over .w6w-budget-meter-used {
+  background: var(--w6w-danger);
+}
+.w6w-budget-meter-over .w6w-budget-meter-value {
+  color: var(--w6w-danger);
+}

package/src/styles/_callable-list.scss

@@ -36,15 +36,21 @@
 .w6w-callable-list-body {
   border: 1px solid var(--w6w-border);
   border-radius: 8px;
-  padding: var(--w6w-sp-2);
+  background: var(--w6w-panel);
+  overflow: hidden;
 }
-.w6w-callable-list-rows {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+.w6w-callable-list-main {
   display: flex;
   flex-direction: column;
-  gap: var(--w6w-sp-1);
+  gap: var(--w6w-sp-0-5);
+  min-width: 0;
+  text-align: left;
+}
+.w6w-callable-list-open {
+  all: unset;
+  cursor: pointer;
+  display: block;
+  width: 100%;
 }
 .w6w-callable-list-trail {
   display: inline-flex;
@@ -58,3 +64,6 @@
   color: var(--w6w-muted);
   font-size: var(--w6w-fs-xs);
 }
+.w6w-callable-list-row-desc {
+  display: block;
+}