@w6w/ui 0.2.0 → 0.2.11

package/dist/note-markdown.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The note editor's Markdown round-trip. A note is edited in place as a `contentEditable` block
+ * (no textarea); these two functions convert between its stored Markdown and that editable DOM.
+ *
+ * The editable model is line-based and covers exactly what the note toolbar writes: a heading
+ * level per line (`#`…`######`) and `**bold**` runs. Everything else (links, lists, `code`, …) is
+ * kept as literal text while editing and rendered by `Markdown` when not, so a line the toolbar
+ * never touched round-trips byte-for-byte.
+ *
+ * The DOM is built with `createElement` + text nodes only — note content is imported,
+ * attacker-controllable text and must never reach `innerHTML`.
+ */
+/** Build the editable DOM for `content` into `root` (its children are replaced). */
+export declare function renderEditable(root: HTMLElement, content: string): void;
+/** Serialize the editable DOM under `root` back to Markdown. */
+export declare function editableToMarkdown(root: HTMLElement): string;
+/**
+ * The content handed to `Markdown` for display. A note is typed line by line, so a single
+ * newline must show as a line break — Markdown would fold it into a space. A soft break between
+ * two non-empty lines becomes a hard break (two trailing spaces); the stored content is untouched.
+ */
+export declare function noteDisplayMarkdown(content: string): string;

package/dist/provider.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ActionDef, ApiCallRecord, AppSummary, AuthDef, ConnectionSummary, FunctionDetail, FunctionSummary, SavedTest, SubscriptionSummary, ThemeMode, TriggerSummary, WorkflowDetail, WorkflowSummary } from './types.ts';
+import { ActionDef, ApiCallRecord, AppSummary, AuthDef, ConnectionBinding, ConnectionSummary, CreateConnectionBody, CredentialDependents, CredentialSummary, CredentialTestResult, FunctionDetail, FunctionSummary, ResolveFieldsBody, ResolveFieldsResult, SavedTest, SubscriptionSummary, ThemeMode, TriggerSummary, WorkflowDetail, WorkflowSummary } from './types.ts';
 /**
  * A single tester-run summary from the unified `run_log` ledger, keyed to a
  * connection. Thin by design — the full result payload stays server-side in
@@ -111,6 +111,8 @@ export interface ListAppsPageOptions {
     q?: string;
     /** Server-side category filter (e.g. `"ai"`). */
     category?: string;
+    /** Server-side id allow-list (`GET /apps?ids=a,b`); `total` is then the filtered total. */
+    ids?: string[];
     /** Opaque pagination cursor from a prior {@link AppsPageResult.nextCursor}. */
     cursor?: string;
     /** Page size; a host may clamp this to its own bounds. */
@@ -174,15 +176,31 @@ export interface W6WApi {
     listAppsByIds?(ids: readonly string[], options?: {
         signal?: AbortSignal;
     }): Promise<AppSummary[]>;
+    /**
+     * OPTIONAL: the tenant's model routes, for the `model-route` step-param
+     * picker (`@w6w/model` `complete`). Absent, the param renders as a plain text
+     * input and this is never called. A `broken` route is still selectable.
+     * `project` is the editor's own project (`WorkflowProjectProvider`) when it
+     * has one — a host should list THAT project's routes, not guess one from its
+     * URL; `undefined` leaves the choice to the host.
+     */
+    listModelRoutes?(project?: string): Promise<{
+        name: string;
+        model: string;
+        status: "active" | "broken";
+    }[]>;
+    /**
+     * OPTIONAL: resolve the choices of `options: { source: "resolveFields" }`
+     * params from the current form (`POST` to the host). Absent, those params
+     * render as plain inputs and this is never called.
+     */
+    resolveActionFields?(appId: string, actionKey: string, body: ResolveFieldsBody, opts?: {
+        signal?: AbortSignal;
+    }): Promise<ResolveFieldsResult>;
     /** Load auth methods declared by an app's manifest, with availability flags. */
     getAppAuth(appId: string): Promise<AuthDef[]>;
     /** Create a non-OAuth connection with a user-supplied credential. */
-    createConnection(appId: string, body: {
-        authKey: string;
-        credential: Record<string, unknown>;
-        displayName?: string;
-        profile?: Record<string, unknown>;
-    }): Promise<ConnectionSummary>;
+    createConnection(appId: string, body: CreateConnectionBody): Promise<ConnectionSummary>;
     /**
      * Rename a connection and/or replace some of its credential fields (`PATCH /connections/:id`).
      * Send only the fields being changed: the server merges a partial `credential` over the stored
@@ -191,8 +209,34 @@ export interface W6WApi {
      */
     updateConnection?(id: string, body: {
         displayName?: string;
+        binding?: ConnectionBinding;
+        credentialId?: string;
         credential?: Record<string, unknown>;
     }): Promise<ConnectionSummary>;
+    /** List stored credentials, optionally narrowed (`GET /credentials`). */
+    listCredentials?(filter?: {
+        contract?: string;
+        appId?: string;
+        authKey?: string;
+    }): Promise<CredentialSummary[]>;
+    /** Store a new credential (`POST /credentials`). `source` is the auth's field-value record. */
+    createCredential?(body: {
+        name: string;
+        contract: string;
+        source: Record<string, unknown>;
+    }): Promise<CredentialSummary>;
+    getCredential?(id: string): Promise<CredentialSummary>;
+    /** Replace a credential's secret (`POST /credentials/:id/rotate`). */
+    rotateCredential?(id: string, body: {
+        source: Record<string, unknown>;
+    }): Promise<CredentialSummary>;
+    /** Disable (`/disable`) or re-enable (`/enable`) a credential. */
+    setCredentialStatus?(id: string, status: "active" | "disabled"): Promise<CredentialSummary>;
+    /** Mint-level health check; distinct from a connection's app-access test. */
+    testCredential?(id: string): Promise<CredentialTestResult>;
+    credentialDependents?(id: string): Promise<CredentialDependents>;
+    /** Rejects with `ApiError` code `credential_in_use` (body.error.dependents) when in use. */
+    deleteCredential?(id: string): Promise<void>;
     /**
      * Start an OAuth 2.0 flow. Server builds the provider's authorize URL and
      * returns it; the caller opens it in a popup and awaits the server's
@@ -431,6 +475,11 @@ export declare function W6WUIProvider({ api, theme, children }: W6WUIProviderPro
  * `<W6WUIProvider>` — the common mistake is forgetting to wrap the app root.
  */
 export declare function useW6WApi(): W6WApi;
+/**
+ * Like {@link useW6WApi} but returns `undefined` outside a provider instead of
+ * throwing — for optional enhancements (e.g. the `model-route` picker).
+ */
+export declare function useOptionalW6WApi(): W6WApi | undefined;
 /** Scopes test-invokes under it to `project`; the editor wraps its body with this. */
 export declare function WorkflowProjectProvider({ project, children, }: {
     project?: string;

package/dist/resolve-params.d.ts

@@ -38,6 +38,11 @@ export interface ResolveScope {
         output?: unknown;
         meta?: StepMeta;
     }>;
+    /** `nodes.<id>…` root — the SAME object as `steps` (one state, two roots). */
+    nodes?: Record<string, {
+        output?: unknown;
+        meta?: StepMeta;
+    }>;
     trigger: {
         event?: unknown;
     };

package/dist/run-visuals.d.ts

@@ -28,7 +28,10 @@ export interface StepExecution {
  *  as the engine's own `RunState.steps`. */
 export interface RunState {
     status: RunStatus;
-    steps: Record<string, StepExecution>;
+    /** Canonical per-node records (D2). */
+    nodes?: Record<string, StepExecution>;
+    /** Legacy alias of `nodes`; read as `nodes ?? steps` (un-upgraded server). */
+    steps?: Record<string, StepExecution>;
 }
 /**
  * A step node's rendered state — exactly the five {@link StepStatus} values

package/dist/step-problems.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Host-supplied per-step problems painted on the canvas. Pure — no React or
+ * @xyflow imports. The host owns detection; ui never infers a problem itself.
+ */
+export interface StepProblem {
+    code: "unknown_connection";
+    connection: string;
+}
+/** Keyed by step id. */
+export type StepProblems = Record<string, StepProblem>;
+interface ProblemNode {
+    id: string;
+    data: {
+        stepProblem?: StepProblem;
+    };
+}
+/**
+ * Stamp `data.stepProblem` from `problems`, clearing it for steps no longer in
+ * the map. Returns the SAME node object when nothing changed.
+ */
+export declare function applyStepProblems<N extends ProblemNode>(nodes: N[], problems: StepProblems | undefined): N[];
+export declare function stepProblemTooltip(p: StepProblem): string;
+/** True while the step still points at the connection the host reports missing. */
+export declare function isConnectionBlocked(step: {
+    uses: {
+        connection?: string | null;
+    };
+}, problem: StepProblem | undefined): boolean;
+/** The Setup tab's Connection button label — exactly five outcomes. */
+export declare function connectionButtonLabel(connection: string | undefined | null, conns: {
+    id: string;
+    displayName?: string;
+}[] | null, failed: boolean): string;
+export {};

package/dist/types.d.ts

@@ -22,6 +22,11 @@ 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;
@@ -68,6 +73,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
@@ -119,7 +126,7 @@ export interface ActionParam {
      * 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;
     /**
@@ -146,6 +153,34 @@ export interface ActionParam {
 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 +219,8 @@ 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;
 }
 /** Summary of an action an app exposes, as returned by GET /apps/:id. */
 export interface ActionDef {
@@ -267,16 +304,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 +418,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-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@w6w/ui",
-  "version": "0.2.0",
+  "version": "0.2.11",
   "description": "React components for w6w — central API management. Build plugins, apps and integrations on them.",
   "license": "MIT",
   "homepage": "https://w6w.io",
@@ -73,7 +73,8 @@
     "@uiw/react-codemirror": "^4.23.7",
     "@w6w/expr": "^0.1.0",
     "@xyflow/react": "^12.3.6",
-    "prism-react-renderer": "^2.4.1"
+    "prism-react-renderer": "^2.4.1",
+    "react-markdown": "^10.1.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
@@ -100,6 +101,7 @@
     "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:expr-template": "bash test/expr-template/run.sh",
     "test:action-test-form": "bash test/action-test-form/run.sh",
     "test:host-isolation": "bash test/host-isolation/run.sh",

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;
+}