machinaos 0.0.76 → 0.0.78

package/client/src/index.css

@@ -116,26 +116,32 @@
      * convention). */
     --action-run:           135 94% 65%;        /* primary CTA: deploy / run */
     --action-run-soft:      135 94% 65% / 0.15;
+    --action-run-hover:     135 94% 65% / 0.25;
     --action-run-border:    135 94% 65% / 0.6;
 
     --action-stop:          326 100% 74%;       /* destructive: stop / cancel / logout */
     --action-stop-soft:     326 100% 74% / 0.15;
+    --action-stop-hover:    326 100% 74% / 0.25;
     --action-stop-border:   326 100% 74% / 0.6;
 
     --action-save:          191 97% 77%;        /* commit / save / panel toggle */
     --action-save-soft:     191 97% 77% / 0.15;
+    --action-save-hover:    191 97% 77% / 0.25;
     --action-save-border:   191 97% 77% / 0.6;
 
     --action-config:        27 100% 71%;        /* settings / config / warning */
     --action-config-soft:   27 100% 71% / 0.15;
+    --action-config-hover:  27 100% 71% / 0.25;
     --action-config-border: 27 100% 71% / 0.6;
 
     --action-secret:        65 92% 76%;         /* credentials / theme toggle */
     --action-secret-soft:   65 92% 76% / 0.15;
+    --action-secret-hover:  65 92% 76% / 0.25;
     --action-secret-border: 65 92% 76% / 0.6;
 
     --action-tools:         265 89% 78%;        /* component palette / creative */
     --action-tools-soft:    265 89% 78% / 0.15;
+    --action-tools-hover:   265 89% 78% / 0.25;
     --action-tools-border:  265 89% 78% / 0.6;
   }
 
@@ -265,21 +271,27 @@
    * the standard "soft tinted button" look (see ActionButton CVA). */
   --color-action-run:           hsl(var(--action-run));
   --color-action-run-soft:      hsl(var(--action-run-soft));
+  --color-action-run-hover:     hsl(var(--action-run-hover));
   --color-action-run-border:    hsl(var(--action-run-border));
   --color-action-stop:          hsl(var(--action-stop));
   --color-action-stop-soft:     hsl(var(--action-stop-soft));
+  --color-action-stop-hover:    hsl(var(--action-stop-hover));
   --color-action-stop-border:   hsl(var(--action-stop-border));
   --color-action-save:          hsl(var(--action-save));
   --color-action-save-soft:     hsl(var(--action-save-soft));
+  --color-action-save-hover:    hsl(var(--action-save-hover));
   --color-action-save-border:   hsl(var(--action-save-border));
   --color-action-config:        hsl(var(--action-config));
   --color-action-config-soft:   hsl(var(--action-config-soft));
+  --color-action-config-hover:  hsl(var(--action-config-hover));
   --color-action-config-border: hsl(var(--action-config-border));
   --color-action-secret:        hsl(var(--action-secret));
   --color-action-secret-soft:   hsl(var(--action-secret-soft));
+  --color-action-secret-hover:  hsl(var(--action-secret-hover));
   --color-action-secret-border: hsl(var(--action-secret-border));
   --color-action-tools:         hsl(var(--action-tools));
   --color-action-tools-soft:    hsl(var(--action-tools-soft));
+  --color-action-tools-hover:   hsl(var(--action-tools-hover));
   --color-action-tools-border:  hsl(var(--action-tools-border));
 
   --radius-sm: calc(var(--radius) - 4px);
@@ -289,15 +301,65 @@
 
   --font-sans: 'Geist Variable', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;
+
+  /* ── New-contract tokens (design_handoff_machinaos_themes) ──────────
+   * Surface / foreground / semantic / typography / radius tokens
+   * exposed as Tailwind utilities. Defined per-theme in client/src/
+   * themes/{light,dark,renaissance,cyber}.css — themes redefine the
+   * `--bg-app`, `--fg-default`, etc. CSS variables under
+   * `:root[data-theme="..."]`; these `@theme inline` aliases give
+   * Tailwind classes that resolve against whichever theme is active.
+   *
+   * Note: full-colour values (not HSL triplets), so `bg-bg-app/50`
+   * alpha composition does NOT work — use `--bg-overlay` or the
+   * shadcn alias (`bg-background/50`) when you need alpha. */
+  --color-bg-app:      var(--bg-app);
+  --color-bg-panel:    var(--bg-panel);
+  --color-bg-canvas:   var(--bg-canvas);
+  --color-bg-elevated: var(--bg-elevated);
+  --color-bg-input:    var(--bg-input);
+  --color-bg-hover:    var(--bg-hover);
+  --color-bg-active:   var(--bg-active);
+  --color-bg-overlay:  var(--bg-overlay);
+
+  --color-fg-default:    var(--fg-default);
+  --color-fg-muted:      var(--fg-muted);
+  --color-fg-faint:      var(--fg-faint);
+  --color-fg-on-accent:  var(--fg-on-accent);
+  --color-fg-on-success: var(--fg-on-success);
+  --color-fg-on-danger:  var(--fg-on-danger);
+  --color-fg-on-warning: var(--fg-on-warning);
+
+  /* Border tokens — exposed as Tailwind colour utilities so call sites
+   * can write `border-default`, `border-strong`, `border-focus` /
+   * `bg-border-default` etc. */
+  --color-border-default: var(--border-default);
+  --color-border-strong:  var(--border-strong);
+  --color-border-focus:   var(--border-focus);
+
+  /* Typography family aliases — `font-display`, `font-body` (font-mono
+   * is already exposed above; we re-declare it here so it tracks the
+   * per-theme `--font-mono` instead of the static fallback). */
+  --font-display: var(--font-display);
+  --font-body:    var(--font-body);
+
+  --radius-pill: var(--radius-pill);
 }
 
 /* ============================================================================
  * React Flow chrome — light + dark
  * ============================================================================ */
 
-.react-flow {
-  background-color: hsl(var(--background)) !important;
-}
+/* `.react-flow` is intentionally transparent so the parent
+ * `.canvas-host` / `.canvas` `background-image` (per-theme
+ * `--canvas-grid` + multi-layer gradient stack) paints through.
+ * Per the upstream v11 stylesheet, `.react-flow` ships with only
+ * `direction: ltr;` — no background. Painting one here would hide
+ * the per-theme decorations (Cyber perspective grid, Renaissance
+ * fleur-de-lis, Surveillance CCTV reticle, etc.). When migrating
+ * to @xyflow/react v12, set `--xy-background-color: transparent;`
+ * on `.xy-flow` (v12 sets a default opaque background via custom
+ * property). */
 
 .react-flow__background pattern circle {
   fill: hsl(var(--muted-foreground) / 0.3) !important;

package/client/src/lib/__tests__/connectionConfig.test.ts

@@ -0,0 +1,91 @@
+/**
+ * Lock-in tests for `lib/connectionConfig.ts`.
+ *
+ * The tuning constants here drive AuthContext's TanStack Query retry
+ * policy and PartySocket's reconnect envelope. Drift in either —
+ * accidentally raising AUTH_RETRY.CAP_MS to 30s, or flipping
+ * WS_CLOSE.NORMAL_CLOSURE off RFC 6455's 1000 — would silently
+ * regress perceived launch time or break the "intentional close"
+ * contract.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { AUTH_RETRY, WS_CLOSE, WS_RECONNECT } from '../connectionConfig';
+
+describe('AUTH_RETRY', () => {
+  it('keeps base under 100 ms for sub-second first retries', () => {
+    // The previous hand-rolled chain started at 1000 ms, which cost
+    // ~3 s of perceived launch time when the backend was ready 100 ms
+    // after the first failure. Anything above 100 ms here would
+    // re-introduce that stall.
+    expect(AUTH_RETRY.BASE_MS).toBeLessThan(100);
+  });
+
+  it('caps individual retries below 5 s so a slow backend still recovers in <30 s wall', () => {
+    expect(AUTH_RETRY.CAP_MS).toBeGreaterThan(0);
+    expect(AUTH_RETRY.CAP_MS).toBeLessThan(5_000);
+  });
+
+  it('allows enough attempts to span a multi-second backend cold start', () => {
+    // With BASE_MS=50, CAP_MS=4000: cumulative upper bound
+    //   sum_{n=0..N-1} min(CAP_MS, BASE_MS * 2^n)
+    // For N=7 → ~10 s, which covers the typical 4 s backend window.
+    expect(AUTH_RETRY.MAX_ATTEMPTS).toBeGreaterThanOrEqual(5);
+    expect(AUTH_RETRY.MAX_ATTEMPTS).toBeLessThanOrEqual(10);
+  });
+
+  it('full-jitter formula stays within the documented envelope for every attempt', () => {
+    // The actual formula:
+    //   sleep = random(0, min(CAP_MS, BASE_MS * 2 ** attempt))
+    // Sample 1000 draws per attempt and confirm every draw stays under
+    // the cap. (Random.random() is bounded [0, 1) so the upper bound is
+    // strict.)
+    for (let attempt = 0; attempt < AUTH_RETRY.MAX_ATTEMPTS; attempt += 1) {
+      const upperBound = Math.min(AUTH_RETRY.CAP_MS, AUTH_RETRY.BASE_MS * 2 ** attempt);
+      for (let i = 0; i < 100; i += 1) {
+        const draw = Math.random() * upperBound;
+        expect(draw).toBeGreaterThanOrEqual(0);
+        expect(draw).toBeLessThanOrEqual(AUTH_RETRY.CAP_MS);
+      }
+    }
+  });
+});
+
+describe('WS_RECONNECT', () => {
+  it('first reconnect attempt is sub-second', () => {
+    // Matches the AuthContext retry shape so first reconnect after a
+    // transient drop is fast.
+    expect(WS_RECONNECT.MIN_DELAY_MS).toBeGreaterThan(0);
+    expect(WS_RECONNECT.MIN_DELAY_MS).toBeLessThan(1_000);
+  });
+
+  it('reconnect cap is bounded so dev-iteration restarts are visible', () => {
+    expect(WS_RECONNECT.MAX_DELAY_MS).toBeGreaterThan(WS_RECONNECT.MIN_DELAY_MS);
+    expect(WS_RECONNECT.MAX_DELAY_MS).toBeLessThanOrEqual(15_000);
+  });
+
+  it('grow factor is between 1.0 and 2.0 (gentle ramp, not aggressive)', () => {
+    expect(WS_RECONNECT.GROW_FACTOR).toBeGreaterThan(1.0);
+    expect(WS_RECONNECT.GROW_FACTOR).toBeLessThan(2.0);
+  });
+
+  it('enqueue cap is positive and finite', () => {
+    expect(WS_RECONNECT.MAX_ENQUEUED_MESSAGES).toBeGreaterThan(0);
+    expect(Number.isFinite(WS_RECONNECT.MAX_ENQUEUED_MESSAGES)).toBe(true);
+  });
+});
+
+describe('WS_CLOSE', () => {
+  it('NORMAL_CLOSURE matches RFC 6455 §7.4.1', () => {
+    // PartySocket inspects this exact value to skip its reconnect
+    // loop. Any drift would either re-trigger reconnect on logout
+    // (1000 → !1000) or suppress reconnect on real drops (drift the
+    // other way). RFC 6455 §7.4.1 fixes this at 1000.
+    expect(WS_CLOSE.NORMAL_CLOSURE).toBe(1000);
+  });
+
+  it('NORMAL_CLOSURE is in the 1000-1014 reserved-server range', () => {
+    expect(WS_CLOSE.NORMAL_CLOSURE).toBeGreaterThanOrEqual(1000);
+    expect(WS_CLOSE.NORMAL_CLOSURE).toBeLessThanOrEqual(1014);
+  });
+});

package/client/src/lib/aiModelProviders.ts

@@ -18,6 +18,14 @@ const AI_MODEL_PROVIDERS = [
   'deepseek',
   'kimi',
   'mistral',
+  // Local-server providers — the chat-model plugins exist
+  // (`ollamaChatModel`, `lmstudioChatModel`), so they MUST live in this
+  // map for `ParameterRenderer` to derive the provider id from the node
+  // type when the schema-implicit `provider` param is absent. Without
+  // them the model dropdown stays empty and the runtime falls back to
+  // the OpenAI cloud.
+  'ollama',
+  'lmstudio',
 ] as const;
 
 /** `<provider>ChatModel` node type → provider id (matches the backend-served

package/client/src/lib/connectionConfig.ts

@@ -0,0 +1,107 @@
+/**
+ * Centralised tuning constants for the auth + WebSocket connection layer.
+ *
+ * The hand-rolled retry chain in `AuthContext` and the flat 3-second
+ * reconnect timer in `WebSocketContext` were retired in favour of
+ * library-backed retry policies (TanStack Query for auth, PartySocket
+ * for the WS). The numeric envelope of those policies lives here so a
+ * future tuning pass — tighter backoff, longer cap, smaller queue — is
+ * a single-file edit and tests can reference the same values.
+ *
+ * Pattern mirrors `client/src/lib/queryConfig.ts`'s `STALE_TIME` /
+ * `GC_TIME` buckets: named, frozen, JSDoc-explained.
+ *
+ * Pre-existing constants (REQUEST_TIMEOUT, ping interval) stay in
+ * `WebSocketContext.tsx` for now — moving them is out of scope for
+ * this change.
+ */
+
+/**
+ * Auth-bootstrap retry tuning, consumed by `AuthContext`'s
+ * `useQuery({ retry, retryDelay })` config.
+ *
+ * Full-jitter exponential backoff per the AWS Architecture Blog —
+ * https://aws.amazon.com/blogs/architecture/exponential-backoff-and-jitter/.
+ *
+ * Formula:
+ *
+ *     sleep = random_between(0, min(CAP_MS, BASE_MS * 2^attempt))
+ *
+ * Sample sequence (BASE_MS=50, CAP_MS=4000):
+ *
+ *     attempt 0 → up to 50ms
+ *     attempt 1 → up to 100ms
+ *     attempt 2 → up to 200ms
+ *     attempt 3 → up to 400ms
+ *     attempt 4 → up to 800ms
+ *     attempt 5 → up to 1600ms
+ *     attempt 6 → up to 3200ms
+ *     attempt 7 → up to 4000ms (capped)
+ *
+ * Total upper-bound wall time ≈ 10 s across 7 retries — covers the
+ * typical ~4 s backend cold-start window in 4-5 attempts. The previous
+ * `1000ms · Math.pow(2, n)` chain needed 31 s in the worst case.
+ */
+export const AUTH_RETRY = {
+  /** Base for the exponential factor (ms). */
+  BASE_MS: 50,
+  /** Cap on a single retry's delay (ms). */
+  CAP_MS: 4_000,
+  /** Stop retrying after this many failed attempts. */
+  MAX_ATTEMPTS: 7,
+} as const;
+
+/**
+ * WebSocket reconnect envelope, consumed by `WebSocketContext`'s
+ * `new ReconnectingWebSocket(url, [], {...})` constructor.
+ *
+ * `partysocket/ws` interleaves jitter automatically; these values
+ * define the envelope it stays inside.
+ *
+ * Sample reconnect sequence (MIN_DELAY_MS=250, GROW_FACTOR=1.3,
+ * MAX_DELAY_MS=8000):
+ *
+ *     attempt 1 → ~250ms
+ *     attempt 2 → ~325ms
+ *     attempt 3 → ~422ms
+ *     ...
+ *     attempt N → capped at 8s
+ *
+ * Refs:
+ *   https://docs.partykit.io/reference/partysocket-api/
+ *   https://github.com/cloudflare/partykit/tree/main/packages/partysocket
+ */
+export const WS_RECONNECT = {
+  /** Delay before the first reconnect attempt (ms). */
+  MIN_DELAY_MS: 250,
+  /** Cap on any single reconnect delay (ms). */
+  MAX_DELAY_MS: 8_000,
+  /** Multiplier applied to the previous delay each attempt. */
+  GROW_FACTOR: 1.3,
+  /**
+   * Bound on the send-while-disconnected buffer. PartySocket replays
+   * these calls on the next OPEN. Mirrors the previous
+   * `pendingSendQueueRef` cap intent.
+   */
+  MAX_ENQUEUED_MESSAGES: 200,
+} as const;
+
+/**
+ * WebSocket close codes per RFC 6455 §7.4.1.
+ * https://datatracker.ietf.org/doc/html/rfc6455#section-7.4.1
+ *
+ * Browsers expose these via `CloseEvent.code`. PartySocket inspects
+ * `1000` to skip its reconnect loop (intentional close); every other
+ * code is treated as transient and triggers reconnect.
+ *
+ * Only the subset this app actively sends or branches on is listed.
+ * Add new entries here rather than inlining the numeric literal.
+ */
+export const WS_CLOSE = {
+  /**
+   * 1000 — Normal Closure. The connection successfully completed the
+   * purpose for which it was created. Used for logout + unmount
+   * teardown so PartySocket does not reconnect.
+   */
+  NORMAL_CLOSURE: 1000,
+} as const;

package/client/src/lib/queryPersist.ts

@@ -62,11 +62,19 @@ export const queryPersistMaxAge = 24 * 60 * 60 * 1000;
 const PERSISTED_KEY_PREFIXES = [
   'nodeSpec',
   'nodeGroups',
-  // credentialValues: panel form fields prefilled across reloads.
-  'credentialValues',
-  // credentialCatalogue is NOT here -- it has its own IDB warm-start in
-  // useCatalogueQuery.ts (idb-keyval) so localStorage persistence would
-  // duplicate the bytes for no benefit. skillContent stays in-memory only.
+  // credentialValues was previously persisted here for the cred-panel
+  // form-field warm-start. Removed per OWASP HTML5 Security Cheat Sheet
+  // / ASVS V9.9: a credentialValues entry contains the decrypted API
+  // key value (populated by getStoredApiKey on the WS roundtrip), and
+  // localStorage stores it in plaintext readable via DevTools on shared
+  // / compromised machines. The in-memory TanStack Query cache (still
+  // gcTime: FOREVER, see queryClient.ts) keeps the form populated for
+  // the session lifetime; on reload the panel refetches — one
+  // roundtrip cost, fine because the modal only opens on user action.
+  //
+  // credentialCatalogue is also NOT here -- it has its own IDB
+  // warm-start in useCatalogueQuery.ts (idb-keyval). skillContent
+  // stays in-memory only.
 ];
 
 export function shouldPersistQuery(query: Query): boolean {