@w6w/ui 0.1.1 → 0.2.11

package/CHANGELOG.md

@@ -9,6 +9,33 @@ repo's git history for exact dates and commits.
 
 ## [Unreleased]
 
+- `WorkflowFlowEditor` takes an optional `stepProblems` map (`StepProblems`, exported from `./flow`)
+  and paints a missing-connection error ring and tooltip on each affected app step, repainting live
+  when the map changes. The host owns detection; omitted, the canvas renders as before.
+- The step panel's Setup tab labels a connection that is absent from the loaded list "Missing
+  connection — choose another", and a failed connections fetch "Couldn't load connections" instead
+  of treating it as missing.
+
+## [0.2.0]
+
+- New presentational lists, props in and callbacks out, so a host can compose its own pages:
+  `CallableList` (Functions and Endpoints rows, with a ui-owned row view-model),
+  `ReliabilityList` and `ReliabilityChart` (health of first- and third-party APIs, router-free),
+  and `ConnectionList`, `ConnectionHeader` (B-1u, E-1u, D-12u).
+- `ListItem` takes an optional `href`. With it the row renders as a real `<a href>` (middle-click,
+  copy link, new tab); the click still reaches `onClick`, and `ListItem` never calls
+  `preventDefault`.
+- `EditConnectionModal`: rename a connection and replace part of its credential; blank fields keep
+  the stored value. It is the sixth component that reads the `W6WUIProvider` client.
+- `W6WApi` gains an optional `updateConnection(id, body)` (`PATCH /connections/:id`), implemented by
+  `createW6WApi`. Without it `EditConnectionModal` shows no Save button, so existing custom clients
+  keep compiling.
+- `AuthFieldsForm` takes `mode?: "create" | "edit"` (default `"create"`, unchanged behaviour).
+- `listApps` (the `createW6WApi` client the pickers use) walks ONE pinned snapshot of the catalog: the
+  first page pins it and every later page reads that same snapshot. If the snapshot expires mid-walk,
+  the walk restarts once from the first page. `AppPicker` shows "N of M" and restarts on expiry. This
+  was prepared as 0.1.2, which was never published, so it ships first in 0.2.0.
+
 ## [0.1.1]
 
 - `styles.css` now carries React Flow's base rules (`.react-flow{`, handles, controls), so

package/README.md

@@ -62,8 +62,8 @@ and the `test/` rigs). Vite needs nothing extra; a few setups do — see the
 
 ## Usage
 
-Five components call your W6W server themselves — `AppPicker`, `AddConnectionModal`,
-`ActionTestForm`, `StepBuilderModal` and `WorkflowFlowEditor`. They read one API client from
+Six components call your W6W server themselves — `AppPicker`, `AddConnectionModal`,
+`EditConnectionModal`, `ActionTestForm`, `StepBuilderModal` and `WorkflowFlowEditor`. They read one API client from
 `W6WUIProvider`. Every other component is props in, callbacks out.
 
 ```tsx
@@ -196,23 +196,25 @@ not pulled in automatically.
 
 ## Components
 
-42 exported components (the count `pnpm coverage:stories` checks), grouped as in the docs:
+50 exported components (the count `pnpm coverage:stories` checks), grouped as in the docs:
 
 - **Providers**: `W6WUIProvider`, `ExpressionOptionsProvider` (plus `createW6WApi`, `useW6WApi`,
   `useExpressionOptions`, `startOAuthPopup`, `useEnterSubmit`).
 - **Buttons and icons**: `IconButton`, `Icon`, `EditButton`, `DeleteButton`.
-- **Data display**: `AppIcon`, `ListItem`, `Copyable`, `CopyableText`.
+- **Data display**: `AppIcon`, `ListItem`, `CallableList`, `Copyable`, `CopyableText`.
 - **Forms**: `AppPicker`, `ActionTestForm`, `ParamsForm`, `PropertyEntryForm`, `AuthFieldsForm`,
   `ExpressionInput`, `NodeConfigForm`, `RetryPolicyFields`.
 - **Editors**: `CodeBlock`, `CodeEditor`, `JsonEditor`, `YamlEditor`.
 - **Workflow canvas**: `WorkflowFlowEditor` (from `@w6w/ui/flow`).
 - **Modals**: `Modal`, `ConfirmModal`, `AddConnectionModal`, `StepBuilderModal`.
 - **Status and health**: `HealthStatusPill`, `StepStatusPill`, `UptimeStrip`, `HistoryTimeline`,
-  `RepoSyncIndicator`.
+  `RepoSyncIndicator`, `ReliabilityList`, `ReliabilityChart`.
 - **Executions**: `ExecutionList`, `ExecutionFilters`, `ExecutionStats`, `ExecutionDetail`,
   `ExecutionLogPanel`, `ApiCallsPanel`.
 - **Server resources**: `ServerResourcesCard`, `ServerResourcesCardSmall`, `ServerResourcesRail`,
   `ServerResourcesBadge`.
+- **Connections**: `ConnectionList`, `ConnectionHeader`, `EditConnectionModal` (provider; needs
+  the optional `updateConnection` on the API client).
 
 Everything is exported from `@w6w/ui` except `WorkflowFlowEditor`, which is only in `@w6w/ui/flow`
 (alongside a re-export of `ExpressionOptionsProvider`). `@w6w/ui/code` re-exports `CodeBlock` and

package/dist/AppPicker.d.ts

@@ -1,10 +1,24 @@
 import { ReactNode } from 'react';
 import { AppSummary, ThemeMode } from './types.ts';
+/**
+ * The app's declared model-provider designation, or `null` when it declares
+ * none (A01). PRESENCE of `modelProvider` is the ONLY test — this never
+ * consults `categories`, so a category-`ai` app without a designation is not
+ * a provider and must never be surfaced as one.
+ */
+export declare function modelProviderOf(app: AppSummary): NonNullable<AppSummary["modelProvider"]> | null;
 export interface AppPickerProps {
     /** Fired when the user picks an app card. */
     onSelectApp: (app: AppSummary) => void;
     theme?: ThemeMode;
-    /** Optional pre-filter over the app list (e.g. only connectable apps). Applied CLIENT-side, on top of whatever page/list was fetched — never widens a fetch, only narrows what's shown. */
+    /**
+     * Optional pre-filter over the app list (e.g. only connectable apps).
+     * Applied CLIENT-side, on top of whatever page/list was fetched — never
+     * widens a fetch, only narrows what's shown. Because the server counted the
+     * apps this filter may then hide, a narrowing filter also removes the paged
+     * footer's denominator: the count reads `N apps`, never `N of total`.
+     * Prefer {@link ids} / {@link category} when the server can do the narrowing.
+     */
     filter?: (app: AppSummary) => boolean;
     /** Search-box placeholder. Defaults to "Search apps…". */
     searchPlaceholder?: string;
@@ -35,12 +49,42 @@ export interface AppPickerProps {
      * would be redundant.
      */
     categoryFilter?: boolean;
+    /**
+     * Render an opt-in model-provider filter BESIDE the category chips (crit 1,
+     * A01/A02): one toggle that narrows the list to apps carrying a
+     * `modelProvider` designation. It filters on the PRESENCE of `modelProvider`
+     * only — never on categories — so an undesignated category-`ai` app is never
+     * surfaced by it. Defaults to `false`, so no existing call site's behavior
+     * changes; the toggle itself is hidden when nothing in the visible catalog
+     * declares a provider (no dead-end filter, same rule as the category chips).
+     */
+    providerFilter?: boolean;
+    /**
+     * Opt-in bridge-support lookup, keyed by app id — the HOST passes this in,
+     * because this package never fetches (`GET /models/providers` carries
+     * `operations.complete` support and its `reasons`, and the host already
+     * holds that descriptor). Presence of an entry adds a chip beside the
+     * model-provider badge: "Bridge supported" when `supported`, else an
+     * "unsupported" chip carrying the entry's `reason` as both its text and its
+     * `title`. Omitting the prop (or an app having no entry) renders no chip at
+     * all, so every existing call site and snapshot is unchanged.
+     */
+    bridgeSupport?: ReadonlyMap<string, {
+        supported: boolean;
+        reason?: string;
+    }>;
     /**
      * Server-side `category` param for the bounded paged fetch (e.g. `"ai"` for
      * the AI tab) — sent to `W6WApi.listAppsPage`, never applied client-side.
      * Ignored when `apps` is supplied or the host has no `listAppsPage`.
      */
     category?: string;
+    /**
+     * Server-side id allow-list (`GET /apps?ids=a,b&paged=true`) for the bounded
+     * paged fetch: the page `total` is the FILTERED total, so the footer reads
+     * `N of N`. Sent to `listAppsPage`/`loadPage`; ignored when `apps` is supplied.
+     */
+    ids?: string[];
     /** Bounded page size for the paged fetch. Defaults to {@link DEFAULT_PAGE_LIMIT} (60). */
     pageLimit?: number;
     /**
@@ -55,10 +99,12 @@ export interface AppPickerProps {
         q?: string;
         cursor?: string;
         limit: number;
+        ids?: string[];
         signal: AbortSignal;
     }) => Promise<{
         apps: AppSummary[];
         nextCursor?: string;
+        total?: number;
     }>;
 }
 /**
@@ -80,4 +126,4 @@ export interface AppPickerProps {
  *    with neither `listAppsPage` nor `listApps` settles into this same
  *    mode's existing empty state — no request, no throw.
  */
-export declare function AppPicker({ onSelectApp, theme, filter, searchPlaceholder, emptyMessage, search, emptyAction, apps: providedApps, categoryFilter, category, pageLimit, loadPage, }: AppPickerProps): import("react").JSX.Element;
+export declare function AppPicker({ onSelectApp, theme, filter, searchPlaceholder, emptyMessage, search, emptyAction, apps: providedApps, categoryFilter, providerFilter, bridgeSupport, category, ids, pageLimit, loadPage, }: AppPickerProps): import("react").JSX.Element;

package/dist/CanvasLayer.d.ts

@@ -0,0 +1,38 @@
+import { FlowCanvas } from './canvas-types.ts';
+export interface CanvasLayerProps {
+    canvas: FlowCanvas;
+    savePosition?: boolean;
+    /** Fired ONCE per finished edit (drop / blur / colour pick / format), never per frame. */
+    onChange?: (canvas: FlowCanvas) => void;
+    /**
+     * Fired once when a section is dropped after a drag, so the host can move the members by the
+     * same delta. When omitted, only the section's own position changes (via `onChange`).
+     */
+    onSectionDrop?: (id: string, delta: {
+        dx: number;
+        dy: number;
+    }) => void;
+    /** Ask the host to confirm-then-delete a note or section (the layer never deletes itself). */
+    onRequestDelete?: (kind: "note" | "section", id: string) => void;
+    /** Hides every control and disables drag. */
+    readOnly?: boolean;
+    /** Flow zoom, to turn screen-pixel drags into flow units. Resolved from the store in a flow. */
+    zoom?: number;
+    className?: string;
+    /**
+     * The element to portal into. Omit inside a React Flow: the enclosing flow's
+     * `.react-flow__viewport` is resolved from its DOM ref. Pass explicitly (tests, stories).
+     */
+    viewport?: Element | null;
+}
+export declare const SECTIONS_Z_INDEX = -2;
+export declare const NOTES_Z_INDEX = -1;
+/** The selected note's or section's toolbar sits above nodes and edges, unlike the box itself. */
+export declare const NOTE_TOOLBAR_Z_INDEX = 1000;
+/** The note colour palette offered by the toolbar (a custom colour is still accepted). */
+export declare const NOTE_COLORS: string[];
+/**
+ * Sections (z -2) and notes (z -1) rendered behind edges/nodes, inside the flow viewport; the
+ * selected note's or section's toolbar floats above everything.
+ */
+export declare function CanvasLayer(props: CanvasLayerProps): import("react").JSX.Element;

package/dist/{CodeBlock-Dot3Pd7P.js → CodeBlock-BqXDA35P.js}

@@ -1,6 +1,6 @@
 import { jsx as $ } from "react/jsx-runtime";
 import { createElement as K, useCallback as V, useMemo as ge } from "react";
-import { C as de } from "./Copyable-1niV9gUa.js";
+import { C as de } from "./Copyable-F4NTaG77.js";
 function re(e) {
   var t, a, l = "";
   if (typeof e == "string" || typeof e == "number") l += e;
@@ -2886,4 +2886,4 @@ function At(e) {
 export {
   At as C
 };
-//# sourceMappingURL=CodeBlock-Dot3Pd7P.js.map
+//# sourceMappingURL=CodeBlock-BqXDA35P.js.map