@k2b/cloud 0.37.0 → 0.39.0

package/src/styles/panel.css

@@ -0,0 +1,373 @@
+/* Panel slot: one provider page in a same-origin iframe beside the app.
+   From 1024 px it is a column after the app card and the app card narrows;
+   from 768 to 1023 px a non-modal drawer over the right edge; below 768 px a
+   sheet from the bottom. The canvas carries the state from the cloud_panel
+   cookie, so the server draws the first frame. Loading, failure, the resize
+   shield and the closing hint are stacked in the body and only change their
+   visibility, so nothing ever moves inside the reserved box. */
+.cloud-panel {
+  --cloud-panel-width: var(--cloud-panel-width-set, 26rem);
+  position: relative;
+  display: none;
+  min-height: 0;
+  color: var(--k2b-text);
+}
+
+@media not all and (min-width: 1280px) {
+  .cloud-panel {
+    --cloud-panel-width: var(--cloud-panel-width-set, 21.5rem);
+  }
+}
+
+/* The same surface, radius, frame and dark border as the app card. */
+.cloud-panel__card {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  border: 1px solid transparent;
+  border-radius: var(--cloud-card-radius, var(--k2b-radius-dialog));
+  background: var(--k2b-surface);
+  box-shadow: var(--k2b-shadow-frame);
+}
+
+.dark .cloud-panel__card {
+  border-color: var(--k2b-border);
+}
+
+/* One 46 px row, no line below; the provider's page starts right under it. */
+.cloud-panel__head {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 0.25rem;
+  min-height: 2.875rem;
+  padding: 0.375rem 0.375rem 0.375rem 0.5rem;
+}
+
+.cloud-panel__head .k2b-icon-button .ti {
+  font-size: 1.125rem;
+}
+
+.cloud-panel__title {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  align-items: center;
+  gap: 0.5rem;
+  padding-inline-start: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.cloud-panel__title > .ti {
+  flex: none;
+  font-size: 1rem;
+  color: var(--k2b-text-muted);
+}
+
+.cloud-panel__title > span,
+.cloud-panel__tab-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cloud-panel__tabs {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  gap: 0.125rem;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.cloud-panel__tab {
+  display: inline-flex;
+  flex: none;
+  max-width: 12rem;
+  height: 2rem;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0 0.625rem;
+  border: 0;
+  border-radius: var(--k2b-radius-control);
+  background: transparent;
+  color: var(--k2b-text-muted);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.cloud-panel__tab > .ti {
+  flex: none;
+  font-size: 1rem;
+}
+
+.cloud-panel__tab:hover {
+  background: var(--k2b-hover);
+  color: var(--k2b-text);
+}
+
+.cloud-panel__tab[aria-selected="true"] {
+  background: var(--k2b-surface-muted);
+  color: var(--k2b-text);
+}
+
+.cloud-panel__tab:focus-visible,
+.cloud-panel__grabber:focus-visible {
+  outline: 2px solid var(--k2b-focus-ring);
+  outline-offset: -2px;
+}
+
+.cloud-panel__body {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+}
+
+.cloud-panel__body > :is(.cloud-panel__skeleton, .cloud-panel__frame, .cloud-panel__fallback, .cloud-panel__shield, .cloud-panel__closing) {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  visibility: hidden;
+  opacity: 0;
+}
+
+.cloud-panel[data-state="ready"] .cloud-panel__frame,
+.cloud-panel[data-state="failed"] .cloud-panel__fallback,
+.cloud-panel[data-resizing="true"] .cloud-panel__shield,
+.cloud-panel[data-closing="true"] .cloud-panel__closing {
+  visibility: visible;
+  opacity: 1;
+}
+
+/* A loading page already takes focus and keys; the skeleton covers it until it reports ready. */
+.cloud-panel[data-state="loading"] .cloud-panel__frame {
+  visibility: visible;
+}
+
+.cloud-panel[data-state="loading"] .cloud-panel__skeleton {
+  visibility: visible;
+  opacity: 1;
+}
+
+.cloud-panel__frame {
+  display: block;
+  border: 0;
+  background: var(--k2b-surface);
+}
+
+.cloud-panel__skeleton {
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0.5rem 1rem;
+  background: var(--k2b-surface);
+  pointer-events: none;
+}
+
+.cloud-panel__skeleton > span {
+  display: block;
+  height: 0.75rem;
+  border-radius: 0.375rem;
+  background: var(--k2b-surface-muted);
+}
+
+.cloud-panel__skeleton > span:nth-child(2) {
+  width: 85%;
+}
+
+.cloud-panel__skeleton > span:last-child {
+  width: 60%;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  html:not([data-k2b-motion="reduced"]) .cloud-panel[data-state="loading"] .cloud-panel__skeleton > span {
+    animation: cloud-panel-pulse 1.4s ease-in-out infinite;
+  }
+}
+
+@keyframes cloud-panel-pulse {
+  50% {
+    opacity: 0.55;
+  }
+}
+
+.cloud-panel__fallback {
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  background: var(--k2b-surface);
+}
+
+/* Takes the pointer from the iframe while the separator drags. */
+.cloud-panel__shield {
+  z-index: 2;
+  cursor: col-resize;
+}
+
+/* Dragging clearly below 20 rem: the panel fades and says what release does. */
+.cloud-panel__closing {
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: color-mix(in srgb, var(--k2b-surface) 82%, transparent);
+  pointer-events: none;
+}
+
+.cloud-panel__closing > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--k2b-radius-control);
+  background: var(--k2b-surface-muted);
+  color: var(--k2b-text);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.cloud-panel__closing .ti {
+  font-size: 1rem;
+  color: var(--k2b-text-muted);
+}
+
+.cloud-panel__grabber {
+  display: none;
+}
+
+/* The separator sits in the gap at the panel's start edge. */
+.cloud-panel__resize {
+  position: absolute !important;
+  inset-block: 0;
+  inset-inline-start: calc(-6px - var(--cloud-card-inset, 0.5rem) / 2);
+  z-index: 4;
+}
+
+/* Column: the app area is the AppWorkspace host, so the app lays out by its narrowed width. */
+@media (min-width: 1024px) {
+  .cloud-app-canvas[data-panel="open"] > .cloud-panel {
+    display: block;
+    flex: none;
+    align-self: stretch;
+    width: var(--cloud-panel-width);
+    margin-inline-start: var(--cloud-card-inset, 0.5rem);
+  }
+
+  .cloud-app-canvas[data-panel="open"] > [data-cloud-app-area] {
+    container: k2b-app-area / inline-size;
+  }
+}
+
+/* Drawer: over the app's right edge; the app keeps its width. Not modal. */
+@media (min-width: 768px) {
+  @media not all and (min-width: 1024px) {
+    .cloud-app-canvas[data-panel="open"] > .cloud-panel {
+      position: absolute;
+      z-index: 20;
+      inset-block: calc(0.5rem + env(safe-area-inset-top, 0px)) calc(0.5rem + env(safe-area-inset-bottom, 0px));
+      inset-inline-end: calc(0.5rem + env(safe-area-inset-right, 0px));
+      display: block;
+      width: min(var(--cloud-panel-width), calc(100% - 1rem));
+    }
+
+    .cloud-panel__card {
+      border-radius: var(--k2b-radius-dialog);
+      box-shadow: var(--k2b-shadow-float);
+    }
+
+    .cloud-panel__resize {
+      display: none !important;
+    }
+  }
+}
+
+/* Sheet: from the bottom, a little over half the height; the grabber makes it full. */
+@media not all and (min-width: 768px) {
+  .cloud-app-canvas[data-panel-sheet="open"] > .cloud-panel {
+    position: fixed;
+    z-index: 30;
+    inset-inline: 0;
+    bottom: 0;
+    display: block;
+    height: 58dvh;
+  }
+
+  /* The page's last row scrolls up above the sheet. Only the end of the page
+     grows, so nothing above it moves; full pages own their own scrollers. */
+  .cloud-app-canvas[data-layout-authenticated][data-panel-sheet="open"]:not([data-layout-full-page]) .layout-content-main {
+    padding-bottom: max(58dvh, var(--cloud-tab-bar-space, 0px));
+    scroll-padding-bottom: max(58dvh, var(--cloud-tab-bar-space, 0px));
+  }
+
+  .cloud-app-canvas[data-panel-sheet="open"] > .cloud-panel[data-panel-size="full"] {
+    height: calc(100dvh - 2.875rem - env(safe-area-inset-top, 0px));
+  }
+
+  .cloud-panel__card {
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+    border-radius: 1.125rem 1.125rem 0 0;
+    box-shadow: 0 -10px 36px rgb(9 9 11 / 0.18);
+  }
+
+  .dark .cloud-panel__card {
+    border-bottom-color: transparent;
+    box-shadow: 0 -10px 36px rgb(0 0 0 / 0.5);
+  }
+
+  .cloud-panel__grabber {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 1.25rem;
+    padding: 0;
+    border: 0;
+    background: transparent;
+  }
+
+  .cloud-panel__grabber > span {
+    width: 2.375rem;
+    height: 0.3125rem;
+    border-radius: 999px;
+    background: var(--k2b-border-strong);
+  }
+
+  .cloud-panel__head {
+    padding-top: 0;
+  }
+
+  .cloud-panel__resize {
+    display: none !important;
+  }
+}
+
+@media print {
+  .cloud-panel {
+    display: none !important;
+  }
+}
+
+/* The provider's page inside the iframe: the panel surface from the first paint. */
+.cloud-panel-page {
+  display: flex;
+  height: 100dvh;
+  min-height: 0;
+  flex-direction: column;
+  background: var(--k2b-surface);
+}
+
+html:has([data-cloud-panel-page]),
+html:has([data-cloud-panel-page]) body {
+  background: var(--k2b-surface);
+}

package/src/styles/resource-search.css

@@ -428,6 +428,31 @@
   }
 }
 
+/* On a phone the resource picker is a full-screen sheet: the whole width, from
+   below the status bar to the bottom edge, rounded at the top. Its results
+   take the room the search field and footer leave. Global search keeps its
+   floating card. */
+@media (max-width: 47.999rem) {
+  .cloud-search-dialog.cloud-search-dialog--picker {
+    --search-top: max(0.5rem, env(safe-area-inset-top, 0px));
+    --search-max-height: calc(100dvh - var(--search-top));
+    inset: var(--search-top) 0 auto;
+    transform: none;
+    width: 100%;
+    height: var(--search-max-height);
+    border-width: 1px 0 0;
+    border-radius: var(--ui-radius-frame) var(--ui-radius-frame) 0 0;
+  }
+  .cloud-search-dialog--picker > .cloud-search-dialog__content,
+  .cloud-search-dialog--picker .cloud-resource-search {
+    height: 100%;
+  }
+  .cloud-search-dialog--picker .cloud-resource-search {
+    --search-body-height: max(0px, calc(var(--search-max-height) - 12rem));
+    padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
+  }
+}
+
 /* Border grips belong only to desktop Spotlight, never the resource picker. */
 .cloud-search-dialog:has(.cloud-global-search) {
   overflow: visible;

package/src/styles/tokens.css

@@ -15,7 +15,16 @@
   --ui-hover: rgb(239 240 239 / 0.9);
   --ui-active: rgb(229 231 230 / 0.94);
   --ui-selected: color-mix(in srgb, var(--color-blue-500) 7%, var(--ui-surface));
-  --ui-app-accent-text: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 78%, black);
+  /* app-color.ts computes these defaults from --color-blue-500; app-color.test.ts pins them. */
+  --app-ink-light: #2264c9;
+  --app-ink-dark: #589aff;
+  --app-selected-light: #f0f6ff;
+  --app-selected-dark: #15243b;
+  --app-selected-nav-light: #e0e8f6;
+  --app-selected-nav-dark: #22334e;
+  --ui-app-accent-text: var(--app-ink-light);
+  --ui-app-selected: var(--app-selected-light);
+  --ui-app-selected-nav: var(--app-selected-nav-light);
   --ui-app-accent-border: var(--app-accent, var(--color-blue-500));
   --ui-focus: inset 0 0 0 2px color-mix(in srgb, var(--color-blue-500) 45%, transparent);
   --ui-action-primary-surface: var(--color-zinc-900);
@@ -143,7 +152,9 @@
   --ui-hover: #252c35;
   --ui-active: color-mix(in srgb, var(--ui-hover) 72%, var(--ui-border-strong));
   --ui-selected: color-mix(in srgb, var(--color-blue-400) 12%, var(--ui-surface));
-  --ui-app-accent-text: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white);
+  --ui-app-accent-text: var(--app-ink-dark);
+  --ui-app-selected: var(--app-selected-dark);
+  --ui-app-selected-nav: var(--app-selected-nav-dark);
   --ui-app-accent-border: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white);
   --ui-focus: inset 0 0 0 2px color-mix(in srgb, var(--color-blue-400) 55%, transparent);
   --ui-action-primary-surface: var(--color-zinc-100);
@@ -186,23 +197,29 @@
   --ui-shadow-workspace-edge: -3px 0 6px -5px rgb(0 0 0 / 0.28), 3px 0 6px -5px rgb(0 0 0 / 0.28);
 }
 
-/* App appearance is applied on the canvas rather than :root. Recompute the
-   derived accent roles here so an app never inherits the platform fallback. */
+/* Custom properties resolve where declared. Each app scope must re-read its
+   inline per-app values instead of inheriting the resolved platform defaults. */
 .cloud-app-canvas,
 .app-accent-scope {
-  --ui-app-accent-text: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 78%, black);
+  --ui-app-accent-text: var(--app-ink-light);
+  --ui-app-selected: var(--app-selected-light);
+  --ui-app-selected-nav: var(--app-selected-nav-light);
   --ui-app-accent-border: var(--app-accent, var(--color-blue-500));
   /* Portable UI components consume their own optional hook; Cloud alone maps
      it to the active app appearance. */
   --k2b-app-workspace-active: var(--ui-app-accent-text);
+  --k2b-app-workspace-selected: var(--ui-app-selected-nav);
   --k2b-detail-panel-accent: var(--ui-app-accent-text);
   --k2b-link-accent: var(--ui-app-accent-text);
 }
 
 .dark :is(.cloud-app-canvas, .app-accent-scope) {
-  --ui-app-accent-text: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white);
+  --ui-app-accent-text: var(--app-ink-dark);
+  --ui-app-selected: var(--app-selected-dark);
+  --ui-app-selected-nav: var(--app-selected-nav-dark);
   --ui-app-accent-border: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white);
   --k2b-app-workspace-active: var(--ui-app-accent-text);
+  --k2b-app-workspace-selected: var(--ui-app-selected-nav);
   --k2b-detail-panel-accent: var(--ui-app-accent-text);
   --k2b-link-accent: var(--ui-app-accent-text);
 }

package/src/styles/utilities-navigation.css

@@ -226,12 +226,12 @@
 @utility sidebar-item-active {
   position: relative;
   background: var(--ui-selected);
-  color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 78%, black);
+  color: var(--ui-app-accent-text);
   @apply font-medium;
   box-shadow: var(--ui-shadow-surface);
 
   &:hover {
-    color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 88%, black);
+    color: var(--ui-app-accent-text);
   }
 
   &::before {
@@ -241,14 +241,6 @@
   }
 }
 
-.dark .sidebar-item-active {
-  color: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white);
-}
-
-.dark .sidebar-item-active:hover {
-  color: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 45%, white);
-}
-
 @utility sidebar-item-meta {
   @apply mt-0.5 text-left text-xs leading-tight text-dimmed;
 }
@@ -723,12 +715,12 @@
   border-left: 0;
   position: relative;
   background: var(--ui-selected);
-  color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 78%, black);
+  color: var(--ui-app-accent-text);
   @apply rounded-lg font-medium;
   box-shadow: var(--ui-shadow-surface);
 
   &:hover {
-    color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 88%, black);
+    color: var(--ui-app-accent-text);
   }
 
   &::before {
@@ -738,14 +730,6 @@
   }
 }
 
-.dark .list-item-active {
-  color: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white);
-}
-
-.dark .list-item-active:hover {
-  color: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 45%, white);
-}
-
 @utility section-label {
   @apply text-[0.6875rem] font-medium normal-case tracking-normal mb-5 text-dimmed select-none;
 }
@@ -1115,7 +1099,7 @@
 }
 
 .sidebar-icon-action-active {
-  color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 78%, black);
+  color: var(--ui-app-accent-text);
   background: var(--ui-selected);
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 20%, transparent);
 }

package/src/workflows/store/events.ts

@@ -10,11 +10,28 @@
  * A schedule tick is an event. A button press is an event. An inbound message
  * is an event. Nothing needs its own registration path.
  */
+import { Buffer } from "node:buffer";
 import { type SQL, sql } from "bun";
 import type { WorkflowJsonValue } from "../contracts";
 import { createWorkflowRun } from "./runs";
 import { withTransaction } from "./transaction";
 
+/** UTF-8 bytes of serialized JSON, independently for data and context. */
+export const WORKFLOW_EVENT_MAX_PAYLOAD_BYTES = 16 * 1024 * 1024;
+
+export class WorkflowEventTooLargeError extends Error {
+  readonly code = "WORKFLOW_EVENT_TOO_LARGE";
+  readonly limitBytes = WORKFLOW_EVENT_MAX_PAYLOAD_BYTES;
+
+  constructor(
+    readonly field: "data" | "context",
+    readonly bytes: number,
+  ) {
+    super(`Workflow event ${field} is ${bytes} bytes; the limit is ${WORKFLOW_EVENT_MAX_PAYLOAD_BYTES} bytes (16 MiB).`);
+    this.name = "WorkflowEventTooLargeError";
+  }
+}
+
 export type WorkflowEventInput = {
   appId: string;
   scopeId: string;
@@ -173,6 +190,13 @@ export const emitWorkflowEvent = async (
   const context = event.context ?? {};
   const authorization = event.authorization ?? {};
 
+  // Validate before even opening a savepoint: callers may catch this inside
+  // their own transaction and continue writing domain state.
+  for (const field of ["data", "context"] as const) {
+    const bytes = Buffer.byteLength(JSON.stringify(field === "data" ? data : context), "utf8");
+    if (bytes > WORKFLOW_EVENT_MAX_PAYLOAD_BYTES) throw new WorkflowEventTooLargeError(field, bytes);
+  }
+
   return withTransaction(options.db, async (tx) => {
     const inserted = await tx<{ id: string }[]>`
       INSERT INTO workflows.event (

package/src/workflows/store/index.ts

@@ -45,8 +45,10 @@ export {
   emitWorkflowEvent,
   listUndispatchedWorkflowEvents,
   type UndispatchedWorkflowEvent,
+  WORKFLOW_EVENT_MAX_PAYLOAD_BYTES,
   type WorkflowEmission,
   type WorkflowEventInput,
+  WorkflowEventTooLargeError,
 } from "./events";
 export {
   getWorkflowRun,
@@ -66,6 +68,12 @@ export {
   type WorkflowStepSummary,
   workflowHealth,
 } from "./observability";
+export {
+  expireWorkflowEventPayloads,
+  expireWorkflowEventPayloadsBatch,
+  startWorkflowEventRetention,
+  WORKFLOW_EVENT_RETENTION_DAYS,
+} from "./retention";
 export {
   beginWorkflowEffect,
   claimWorkflowRun,

package/src/workflows/store/observability.ts

@@ -387,6 +387,7 @@ export type WorkflowRunDetail = WorkflowRunSummary & {
   source: string;
   eventId: string | null;
   eventData: Record<string, WorkflowJsonValue> | null;
+  eventPayloadExpired: boolean;
   steps: WorkflowStepSummary[];
   children: Record<WorkflowRunState, number>;
 };
@@ -412,10 +413,13 @@ export const getWorkflowRun = async (runId: string, options: { db?: SQL } = {}):
       source: string;
       event_id: string | null;
       event_data: Record<string, WorkflowJsonValue> | null;
+      event_payload_expired: boolean;
     })[]
   >`
     SELECT ${db.unsafe(RUN_SELECT)},
-           r.inputs, r.result, r.effects_used, v.effect_budget, v.source, r.event_id, e.data AS event_data
+           r.inputs, r.result, r.effects_used, v.effect_budget, v.source, r.event_id,
+           CASE WHEN e.payload_expired_at IS NULL THEN e.data END AS event_data,
+           (e.payload_expired_at IS NOT NULL) AS event_payload_expired
     ${db.unsafe(RUN_FROM)}
     WHERE r.id = ${runId}::uuid
   `;
@@ -438,6 +442,7 @@ export const getWorkflowRun = async (runId: string, options: { db?: SQL } = {}):
     source: row.source,
     eventId: row.event_id,
     eventData: row.event_data,
+    eventPayloadExpired: row.event_payload_expired,
     children,
     steps,
   };