@k2b/cloud 0.6.0-rc.0 → 0.7.0

package/src/shared/ai-quotas.ts

@@ -0,0 +1,136 @@
+import { z } from "zod";
+import { PrincipalSchema } from "../contracts/shared";
+import { AiPriceSchema } from "./ai-costs";
+
+export const AiBackgroundBudgetSchema = z
+  .object({
+    enabled: z.boolean(),
+    warnAt: AiPriceSchema.nullable(),
+    stopAt: AiPriceSchema.positive(),
+  })
+  .strict()
+  .refine((value) => value.warnAt === null || value.warnAt < value.stopAt, "Warning must be below the stop amount.");
+
+export const AiQuotaRuleSchema = z
+  .object({
+    scope: z.string().min(1).max(128),
+    hours: z.number().int().min(1).max(8760),
+    anchor: z.iso.datetime(),
+    grants: z
+      .array(
+        z
+          .object({
+            principal: PrincipalSchema.refine((p) => p.type !== "public", "Chat quotas require an identity."),
+            displayName: z.string().max(300).optional(),
+            limit: AiPriceSchema.nullable(),
+          })
+          .strict(),
+      )
+      .max(1000)
+      .refine((grants) => new Set(grants.map((g) => JSON.stringify(g.principal))).size === grants.length, "Duplicate quota principal."),
+  })
+  .strict();
+export const AiQuotaConfigSchema = z
+  .object({
+    enabled: z.boolean(),
+    revision: z.number().int().nonnegative(),
+    rules: z.array(AiQuotaRuleSchema).max(256),
+    unit: z.string().trim().min(1).max(16).optional(),
+    background: AiBackgroundBudgetSchema.optional(),
+  })
+  .strict()
+  .refine((c) => new Set(c.rules.map((r) => r.scope)).size === c.rules.length, "Duplicate quota scope.");
+export type AiQuotaConfig = z.infer<typeof AiQuotaConfigSchema>;
+export type AiQuotaRule = z.infer<typeof AiQuotaRuleSchema>;
+export type AiQuotaBalance = {
+  scope: string;
+  limit: number | null;
+  input: number;
+  output: number;
+  used: number;
+  unknown: number;
+  estimated?: number;
+  resetsAt: string;
+  sources: string[];
+  sourceDetails?: { principal: z.infer<typeof PrincipalSchema>; displayName: string }[];
+  bypassed: boolean;
+};
+export type AiQuotaSnapshot = {
+  unit?: string;
+  enabled: boolean;
+  balances: AiQuotaBalance[];
+  usage: { model: string; input: number; output: number; unknown: number }[];
+};
+export type AiQuotaIdentity = { type: "user" | "service_account"; id: string; label: string; lastUsed: string | null };
+export const AiQuotaIdentitySchema = z.object({ type: z.enum(["user", "service_account"]), id: z.uuid() });
+export const AiQuotaResetSchema = AiQuotaIdentitySchema.extend({ scope: z.string().min(1).max(128), requestId: z.uuid() }).strict();
+export const AiQuotaUsersQuerySchema = z
+  .object({
+    search: z.string().max(200).default(""),
+    page: z.coerce.number().int().positive().default(1),
+  })
+  .strict();
+
+export type AiChatQuotaSnapshot = {
+  unit?: string;
+  unlimitedModels?: string[];
+  enabled: boolean;
+  balances: Omit<AiQuotaBalance, "sources" | "sourceDetails">[];
+};
+
+export const AiQuotaReportQuerySchema = z.object({
+  view: z.enum(["users", "rules"]).default("users"),
+  range: z.enum(["24h", "7d", "30d", "90d"]).default("30d"),
+  until: z.iso.datetime({ offset: true }).optional(),
+  search: z.string().trim().max(200).default(""),
+  model: z.string().max(128).default(""),
+  status: z.enum(["all", "available", "exhausted", "unknown", "unlimited", "disabled"]).default("all"),
+  sort: z.enum(["label", "cost", "lastUsed"]).default("lastUsed"),
+  direction: z.enum(["asc", "desc"]).default("desc"),
+  page: z.coerce.number().int().min(1).max(1000000).default(1),
+  identity: z.uuid().optional(),
+  identityType: z.enum(["user", "service_account"]).default("user"),
+});
+export type AiQuotaReportQuery = z.infer<typeof AiQuotaReportQuerySchema>;
+export type AiQuotaStatus = Exclude<AiQuotaReportQuery["status"], "all">;
+export type AiQuotaReportRow = AiQuotaIdentity & {
+  cost: number | null;
+  input: number;
+  output: number;
+  calls: number;
+  measured: number;
+  estimated: number;
+  unknown: number;
+  status: AiQuotaStatus;
+  scopes: number;
+  exhausted: number;
+  balances: Pick<AiQuotaBalance, "scope" | "limit" | "used" | "unknown" | "bypassed">[];
+};
+export type AiQuotaReport = {
+  query: AiQuotaReportQuery;
+  since: string;
+  until: string;
+  asOf: string;
+  overview: {
+    cost: number | null;
+    accounts: number;
+    input: number;
+    output: number;
+    calls: number;
+    measured: number;
+    estimated: number;
+    unknown: number;
+  };
+  timeline: { cost: number | null; at: string; input: number; output: number; calls: number; measured: number; unknown: number }[];
+  models: { cost: number | null; model: string; input: number; output: number; calls: number; measured: number; unknown: number }[];
+  selected: AiQuotaIdentity | null;
+  items: AiQuotaReportRow[];
+  total: number;
+  page: number;
+  perPage: number;
+};
+export const aiQuotaHref = (query: Partial<AiQuotaReportQuery>) => {
+  const params = new URLSearchParams({ tab: "ai-quotas" });
+  for (const [key, value] of Object.entries(query)) if (value !== undefined && value !== "") params.set(key, String(value));
+  return `/admin/settings?${params}`;
+};

package/src/shared/ai-usage.ts

@@ -11,28 +11,18 @@ export const AiUsageQuerySchema = z.object({
   modelProfileId: text,
   providerModel: text,
   appId: text,
+  workflowId: z.uuid().optional(),
+  workflowRunId: z.uuid().optional(),
   view: z.enum(AI_USAGE_VIEWS).default("overview"),
-  kind: z.enum(["chat", "background", "tool"]).optional(),
-  status: z
-    .enum([
-      "completed",
-      "failed",
-      "aborted",
-      "queued",
-      "running",
-      "waiting_for_action",
-      "rejected",
-      "pending",
-      "waiting_for_approval",
-      "waiting_for_frontend",
-    ])
-    .optional(),
+  kind: z.enum(["chat", "background"]).optional(),
+  status: z.enum(["completed", "failed", "running"]).optional(),
   task: text,
   errorCode: text,
   search: z.string().trim().max(200).optional(),
   rating: z.enum(["up", "down"]).optional(),
   reason: z.enum(AI_USAGE_REASONS).optional(),
-  sort: z.enum(["newest", "runs", "tokens", "credits", "errors", "negative", "negativeRate"]).default("runs"),
+  direction: z.enum(["asc", "desc"]).default("desc"),
+  sort: z.enum(["newest", "runs", "tokens", "cost", "errors", "negative", "negativeRate"]).default("runs"),
   page: z.coerce.number().int().min(1).max(1000000).default(1),
   perPage: z.coerce.number().int().min(1).max(100).default(50),
 });

package/src/shared/app-presentation.ts

@@ -9,21 +9,22 @@ const mergedTranslation = (catalog: AppPresentationCatalog, requestedLocale: str
       return canonical ? [[canonical, translation] as const] : [];
     }),
   );
-  const overlays = localeFallbackChain(requestedLocale, baseLocale).filter((locale) => locale !== baseLocale).reverse();
-  return overlays.reduce<AppPresentationTranslation>(
-    (current, locale) => {
-      const next = byLocale.get(locale);
-      if (!next) return current;
-      return {
-        ...current,
-        ...next,
-        adminGroups: { ...current.adminGroups, ...next.adminGroups },
-        adminLinks: { ...current.adminLinks, ...next.adminLinks },
-        legalLinks: { ...current.legalLinks, ...next.legalLinks },
-      };
-    },
-    {},
-  );
+  const overlays = localeFallbackChain(requestedLocale, baseLocale)
+    .filter((locale) => locale !== baseLocale)
+    .reverse();
+  return overlays.reduce<AppPresentationTranslation>((current, locale) => {
+    const next = byLocale.get(locale);
+    if (!next) return current;
+    return {
+      ...current,
+      ...next,
+      adminGroups: { ...current.adminGroups, ...next.adminGroups },
+      adminLinks: { ...current.adminLinks, ...next.adminLinks },
+      legalLinks: { ...current.legalLinks, ...next.legalLinks },
+      searchLinks: { ...current.searchLinks, ...next.searchLinks },
+      searchLinkDescriptions: { ...current.searchLinkDescriptions, ...next.searchLinkDescriptions },
+    };
+  }, {});
 };
 
 /** Resolve only human presentation; stable app identity, routes, icons, and authorization stay untouched. */
@@ -40,6 +41,11 @@ export const resolveAppPresentation = <T extends AppMeta>(app: T, requestedLocal
       label: (group.id && translation.adminGroups?.[group.id]) || group.label,
       links: group.links.map((link) => ({ ...link, label: translation.adminLinks?.[link.href] ?? link.label })),
     })),
+    searchLinks: app.searchLinks?.map((link) => ({
+      ...link,
+      label: translation.searchLinks?.[link.href] ?? link.label,
+      description: translation.searchLinkDescriptions?.[link.href] ?? link.description,
+    })),
     legalLinks: app.legalLinks?.map((link) => ({ ...link, label: translation.legalLinks?.[link.href] ?? link.label })),
   };
 };

package/src/shared/capability-messages.ts

@@ -11,10 +11,17 @@ const catalog = i18n.define({
       catalogLimit: ({ max }: { max: number }) => `Capability catalog limit must be between 1 and ${max}`,
       cloudUnavailable: "Cloud is unavailable",
       deadlineExceeded: "The capability deadline was exceeded",
+      idempotencyConflict: "This Idempotency-Key was already used with different input",
+      idempotencyInProgress:
+        "An identical call with this Idempotency-Key is still running; verify the outcome with a Query before retrying",
       idempotencyInvalid: "Idempotency-Key is invalid",
       idempotencyNotAllowed: "This Action does not support idempotent retries; omit Idempotency-Key",
       idempotencyOnlyActions: "Idempotency-Key is only valid for Actions that require it",
       idempotencyRequired: "This Action requires an Idempotency-Key",
+      idempotencyResultNotRetained:
+        "This Action already succeeded, but its result was too large to retain; read the current state with a Query",
+      idempotencyUncertain:
+        "An earlier call with this Idempotency-Key ended with an unknown outcome; verify the current state with a Query",
       inputNotSerializable: "Capability input must be JSON-serializable",
       inputSchemaMismatch: "Capability input did not match the registered schema",
       invalidCapabilityError: ({ appId }: { appId: string }) => `App ${appId} returned an invalid capability error`,
@@ -39,10 +46,17 @@ const catalog = i18n.define({
       catalogLimit: ({ max }) => `Das Limit des Capability-Katalogs muss zwischen 1 und ${max} liegen`,
       cloudUnavailable: "Cloud ist nicht verfügbar",
       deadlineExceeded: "Das Zeitlimit der Capability wurde überschritten",
+      idempotencyConflict: "Dieser Idempotency-Key wurde bereits mit anderen Eingaben verwendet",
+      idempotencyInProgress:
+        "Ein identischer Aufruf mit diesem Idempotency-Key läuft noch; prüfe das Ergebnis mit einer Query, bevor du erneut aufrufst",
       idempotencyInvalid: "Der Idempotency-Key ist ungültig",
       idempotencyNotAllowed: "Diese Action unterstützt keine idempotenten Wiederholungen; Idempotency-Key weglassen",
       idempotencyOnlyActions: "Ein Idempotency-Key ist nur für Actions gültig, die ihn voraussetzen",
       idempotencyRequired: "Diese Action benötigt einen Idempotency-Key",
+      idempotencyResultNotRetained:
+        "Diese Action war bereits erfolgreich, ihr Ergebnis war jedoch zu groß zum Aufbewahren; lies den aktuellen Stand mit einer Query",
+      idempotencyUncertain:
+        "Ein früherer Aufruf mit diesem Idempotency-Key endete mit unbekanntem Ergebnis; prüfe den aktuellen Stand mit einer Query",
       inputNotSerializable: "Die Capability-Eingabe muss als JSON serialisierbar sein",
       inputSchemaMismatch: "Die Capability-Eingabe entspricht nicht dem registrierten Schema",
       invalidCapabilityError: ({ appId }) => `App ${appId} hat einen ungültigen Capability-Fehler zurückgegeben`,

package/src/shared/help.ts

@@ -1,7 +1,7 @@
-import { canonicalLocale, localeFallbackChain } from "./locale";
+import { localeFallbackChain } from "./locale";
 
 export type HelpDocumentManifest = {
-  /** Resolved content locale. Present on request-scoped manifests. */
+  /** Resolved content locale on central Help manifests. */
   locale?: string;
   id: string;
   title: string;
@@ -13,56 +13,20 @@ export type HelpDocumentManifest = {
   url: string;
 };
 
-export type HelpManifest = {
-  manifestHash: string;
-  pageBase: string;
-  /** Base language that owns the complete logical article set. Absent on legacy registrations. */
-  baseLocale?: string;
-  /** Localized metadata variants keyed by canonical BCP 47 locale. */
-  documentsByLocale?: Readonly<Record<string, readonly HelpDocumentManifest[]>>;
-  documents: readonly HelpDocumentManifest[];
-};
-
 export type HelpSearchPayload = {
-  /** Resolved request locale. Optional only for rolling compatibility with older Cloud hosts. */
-  locale?: string;
+  /** Resolved request locale. */
+  locale: string;
   ids: string[];
 };
 
 export type HelpDocumentPayload = {
-  /** Resolved request locale. Optional only for rolling compatibility with older Cloud hosts. */
-  locale?: string;
+  /** Resolved request locale. */
+  locale: string;
   id: string;
   title: string;
   markdown: string;
   html: string;
 };
 
-export type ResolvedHelpManifest = Omit<HelpManifest, "documentsByLocale" | "documents"> & {
-  locale: string;
-  documents: readonly HelpDocumentManifest[];
-};
-
 /** Exact locale, then BCP 47 ancestors, then the corpus base locale. */
 export const helpLocaleChain = localeFallbackChain;
-
-/** Resolve localized Help metadata per article while preserving the base article set and order. */
-export const resolveHelpManifest = (manifest: HelpManifest, requestedLocale: string): ResolvedHelpManifest => {
-  const baseLocale = canonicalLocale(manifest.baseLocale ?? "en") ?? "en";
-  const variants = manifest.documentsByLocale ?? {};
-  const chain = helpLocaleChain(requestedLocale, baseLocale);
-  const selectedLocale = chain.find((locale) => locale === baseLocale || variants[locale] !== undefined) ?? baseLocale;
-  const overlays = [...chain.slice(0, chain.indexOf(baseLocale)), baseLocale].reverse();
-  const byId = new Map(manifest.documents.map((document) => [document.id, document]));
-  for (const locale of overlays) {
-    if (locale === baseLocale) continue;
-    for (const document of variants[locale] ?? []) byId.set(document.id, { ...byId.get(document.id), ...document });
-  }
-  return {
-    manifestHash: manifest.manifestHash,
-    pageBase: manifest.pageBase,
-    baseLocale,
-    locale: selectedLocale,
-    documents: manifest.documents.map((document) => ({ ...(byId.get(document.id) ?? document), locale: selectedLocale })),
-  };
-};

package/src/shared/index.ts

@@ -52,3 +52,9 @@ export {
 } from "./template-rendering";
 export * from "./theme";
 export * from "./time";
+
+export * from "./ai-quotas";
+
+export type { AiChatQuotaSnapshot } from "./ai-quotas";
+
+export * from "./ai-costs";

package/src/ssr/AdminLayout.tsx

@@ -1,6 +1,6 @@
 import { AppWorkspace } from "@k2b/ui";
 import type { JSX } from "solid-js/jsx-runtime";
-import type { RailPreferences } from "../contracts/rail-preferences";
+import type { RailSnapshot } from "../contracts/rail-preferences";
 import { getLocale } from "../server/locale";
 import type { LayoutAnnouncementsState } from "../server/middleware/settings";
 import AdminSidebar from "./AdminSidebar";
@@ -10,7 +10,7 @@ import { getLocalizedRuntimeContext, type RuntimeContext } from "./runtime";
 
 type Breadcrumb = { title: string; href?: string };
 type AdminLayoutContext = {
-  get(key: "railPreferences"): RailPreferences | undefined;
+  get(key: "railPreferences"): RailSnapshot | undefined;
   get(key: "user"): any;
   get(key: "page"): any;
   get(key: "runtime"): RuntimeContext;
@@ -25,7 +25,9 @@ type Props = {
   /** Disable when a bounded child such as SettingsPage owns scrolling. */
   scroll?: boolean;
 };
-export default function AdminLayout({ children, c, title, scroll = true }: Props) {
+export default function AdminLayout(props: Props) {
+  // Keep children lazy so Layout installs the request locale before rendering them.
+  const { c, title, scroll = true } = props;
   const locale = getLocale(c);
   const t = platformMessages.resolve([locale]).t;
   const url = new URL(c.req.raw.url);
@@ -40,11 +42,11 @@ export default function AdminLayout({ children, c, title, scroll = true }: Props
   }
   return (
     <Layout c={c} fullWidth fullPage title={breadcrumbs}>
-      <AppWorkspace class="min-h-0 flex-1" resizable={false}>
+      <AppWorkspace mobileSurface="flush" class="min-h-0 flex-1" resizable={false}>
         <AdminSidebar currentPath={currentPath} apps={runtime.apps} />
         <AppWorkspace.Content>
           <AppWorkspace.Main scroll={scroll} class={scroll ? "p-[var(--ui-space-shell)]" : undefined}>
-            {children}
+            {props.children}
           </AppWorkspace.Main>
         </AppWorkspace.Content>
       </AppWorkspace>

package/src/ssr/AdminSidebar.tsx

@@ -1,3 +1,4 @@
+import WorkspaceNavigation from "./WorkspaceNavigation.island";
 import { AppWorkspace, useLocale } from "@k2b/ui";
 import { activeAdminHref } from "./admin-active-link";
 import { type AdminLink, buildAdminGroups } from "./admin-navigation";
@@ -31,20 +32,33 @@ export default function AdminSidebar({ currentPath, apps }: { currentPath: strin
   const groups = () => buildAdminGroups(apps, locale());
 
   return (
-    <AppWorkspace.Sidebar resizable={false}>
-      <AppWorkspace.SidebarMobileTrigger label={t().admin} />
-
-      <AppWorkspace.SidebarMobile>
-        <AppWorkspace.SidebarMobileBody scrollPreserveKey="admin-sidebar-mobile">
-          <AdminNavigation currentPath={currentPath} groups={groups()} />
-        </AppWorkspace.SidebarMobileBody>
-      </AppWorkspace.SidebarMobile>
-
-      <AppWorkspace.SidebarDesktop>
-        <AppWorkspace.SidebarBody scrollPreserveKey="admin-sidebar">
-          <AdminNavigation currentPath={currentPath} groups={groups()} />
-        </AppWorkspace.SidebarBody>
-      </AppWorkspace.SidebarDesktop>
-    </AppWorkspace.Sidebar>
+    <>
+      <WorkspaceNavigation
+        label={t().admin}
+        items={groups().map((group) => ({
+          id: group.label,
+          label: group.label,
+          children: group.links.map((link) => ({
+            id: link.href,
+            label: link.label,
+            href: link.href,
+            icon: `ti ${link.icon}`,
+            active:
+              link.href ===
+              activeAdminHref(
+                currentPath,
+                groups().flatMap((entry) => entry.links.map((entry) => entry.href)),
+              ),
+          })),
+        }))}
+      />
+      <AppWorkspace.Sidebar resizable={false}>
+        <AppWorkspace.SidebarDesktop>
+          <AppWorkspace.SidebarBody scrollPreserveKey="admin-sidebar">
+            <AdminNavigation currentPath={currentPath} groups={groups()} />
+          </AppWorkspace.SidebarBody>
+        </AppWorkspace.SidebarDesktop>
+      </AppWorkspace.Sidebar>
+    </>
   );
 }

package/src/ssr/AppLaunchpad.island.tsx

@@ -1,42 +1,9 @@
-import { dialogCore, IconButton, ScrollArea, Tooltip, useLocale } from "@k2b/ui";
-import { createEffect, For, Show } from "solid-js";
+import { AppLaunchpadPanel, type AppLaunchpadApp, type AppLaunchpadLegalLink, type AppLaunchpadContext } from "./AppLaunchpadPanel";
+import { openCloudMobileMenu } from "./MobileNavigation";
+export type { AppLaunchpadApp, AppLaunchpadLegalLink } from "./AppLaunchpadPanel";
+import { dialogCore, IconButton, Tooltip, useLocale } from "@k2b/ui";
+import { createEffect } from "solid-js";
 import { platformMessages } from "./platform-messages";
-import { openRailEditor } from "./RailEditor";
-import { readRailContext } from "./rail-context";
-import { railMessages } from "./rail-messages";
-import { projectRailNavigation } from "./rail-navigation";
-
-export type AppLaunchpadApp = {
-  id: string;
-  iconClass: string;
-  label: string;
-  href: string;
-  description?: string;
-  accent?: string;
-};
-
-export type AppLaunchpadLegalLink = {
-  label: string;
-  href: string;
-  icon?: string;
-};
-
-type AppLaunchpadContext = {
-  apps: AppLaunchpadApp[];
-  legalLinks: AppLaunchpadLegalLink[];
-};
-
-type AppIconPaletteEntry = { from: string };
-
-const appIconPalette: readonly [AppIconPaletteEntry, ...AppIconPaletteEntry[]] = [
-  { from: "#2563eb" },
-  { from: "#059669" },
-  { from: "#7c3aed" },
-  { from: "#d97706" },
-  { from: "#e11d48" },
-  { from: "#0891b2" },
-  { from: "#52525b" },
-];
 
 declare global {
   interface Window {
@@ -47,17 +14,6 @@ declare global {
   }
 }
 
-const paletteForId = (id: string) => {
-  let hash = 0;
-  for (let i = 0; i < id.length; i++) hash = (hash + id.charCodeAt(i)) % appIconPalette.length;
-  return appIconPalette[hash] ?? appIconPalette[0];
-};
-
-const appIconStyle = (app: AppLaunchpadApp) => {
-  const tone = /^#[0-9a-f]{6}$/i.test(app.accent ?? "") ? app.accent! : paletteForId(app.id).from;
-  return `--app-icon-color:${tone}`;
-};
-
 const readEmbeddedContext = (): AppLaunchpadContext | undefined => {
   if (typeof document === "undefined") return undefined;
   const element = document.getElementById("cloud-app-launchpad-data");
@@ -69,6 +25,7 @@ const readEmbeddedContext = (): AppLaunchpadContext | undefined => {
     if (!Array.isArray(parsed.apps)) return undefined;
     return {
       apps: parsed.apps,
+      profile: parsed.profile?.name && (parsed.profile.theme === "dark" || parsed.profile.theme === "light") ? parsed.profile : undefined,
       legalLinks: Array.isArray(parsed.legalLinks) ? parsed.legalLinks : [],
     };
   } catch {
@@ -76,99 +33,28 @@ const readEmbeddedContext = (): AppLaunchpadContext | undefined => {
   }
 };
 
-const AppLaunchpadPanel = (props: AppLaunchpadContext & { close: () => void }) => {
-  const locale = useLocale();
-  const t = () => railMessages.resolve([locale()]).t;
-  const rail = readRailContext();
-  const shortcuts = () => (rail ? projectRailNavigation(rail.apps, rail.settings, locale()).shortcuts : []);
-  return (
-    <ScrollArea class="launchpad-panel mx-auto max-h-[min(86vh,var(--ui-dialog-available-height))] w-[var(--ui-dialog-available-width)] max-w-[var(--ui-dialog-available-width)] overscroll-contain p-4 text-primary sm:w-fit sm:p-6 md:p-7 dark:text-white">
-      <Show when={rail}>
-        <div class="mb-2 flex justify-end">
-          <IconButton
-            variant="ghost"
-            size="sm"
-            label={t().customize}
-            tooltip={t().customize}
-            tooltipDelay={0}
-            onClick={() => {
-              props.close();
-              openRailEditor(locale());
-            }}
-          >
-            <i class="ti ti-adjustments-horizontal" aria-hidden="true" />
-          </IconButton>
-        </div>
-      </Show>
-      <Show when={shortcuts().length > 0}>
-        <section class="mb-5 flex flex-col gap-3" aria-label={t().shortcuts}>
-          <h3 class="text-center text-sm font-medium">{t().shortcuts}</h3>
-          <div class="flex flex-wrap justify-center gap-2">
-            <For each={shortcuts()}>
-              {(shortcut) => (
-                <a
-                  href={shortcut.href}
-                  class="inline-flex items-center gap-2 rounded-lg border border-[var(--ui-border)] px-3 py-2 text-sm"
-                >
-                  <i class={shortcut.iconClass} aria-hidden="true" />
-                  {shortcut.label}
-                </a>
-              )}
-            </For>
-          </div>
-        </section>
-      </Show>
-      <div class="flex flex-wrap justify-center gap-x-4 gap-y-4 sm:gap-x-7 sm:gap-y-6">
-        <For each={props.apps}>
-          {(app) => (
-            <a
-              href={app.href}
-              class="group flex w-[4.75rem] min-w-0 flex-col items-center gap-1.5 rounded-2xl p-1 text-center outline-none focus-visible:ring-2 focus-visible:ring-white/60 sm:w-[6.25rem] sm:gap-2 sm:p-2"
-            >
-              <span
-                class="app-icon grid h-12 w-12 place-items-center rounded-[0.95rem] text-[1.25rem] sm:h-16 sm:w-16 sm:rounded-[1.25rem] sm:text-[1.7rem]"
-                style={appIconStyle(app)}
-              >
-                <i class={app.iconClass} />
-              </span>
-              <span class="max-w-full truncate text-[11px] font-medium text-primary sm:text-xs dark:text-white">{app.label}</span>
-            </a>
-          )}
-        </For>
-      </div>
-      <Show when={props.legalLinks.length > 0}>
-        <div class="mt-7 flex flex-wrap justify-center text-[11px] text-dimmed dark:text-white/56">
-          <For each={props.legalLinks}>
-            {(link) => (
-              <a
-                href={link.href}
-                class="inline-flex items-center gap-1.5 rounded-md px-2 py-1 transition-colors hover:text-primary dark:hover:text-white"
-              >
-                <i class={link.icon ?? "ti ti-file-text"} />
-                {link.label}
-              </a>
-            )}
-          </For>
-        </div>
-      </Show>
-    </ScrollArea>
-  );
-};
-
-export function setAppLaunchpadContext(apps: AppLaunchpadApp[], legalLinks: AppLaunchpadLegalLink[] = []) {
+export function setAppLaunchpadContext(
+  apps: AppLaunchpadApp[],
+  legalLinks: AppLaunchpadLegalLink[] = [],
+  profile?: AppLaunchpadContext["profile"],
+) {
   if (typeof window === "undefined") return;
-  window.__cloudAppLaunchpad = { apps, legalLinks };
+  window.__cloudAppLaunchpad = { apps, legalLinks, profile };
   window.cloud ??= {};
   window.cloud.openAppLaunchpad = () => {
     openAppLaunchpad();
   };
 }
 
-export function openAppLaunchpad(apps?: AppLaunchpadApp[], legalLinks?: AppLaunchpadLegalLink[]) {
+export function openAppLaunchpad(apps?: AppLaunchpadApp[], legalLinks?: AppLaunchpadLegalLink[], profile?: AppLaunchpadContext["profile"]) {
   if (typeof window === "undefined") return;
-  const context = apps ? { apps, legalLinks: legalLinks ?? [] } : (window.__cloudAppLaunchpad ?? readEmbeddedContext());
-  if (!context || context.apps.length === 0) return;
+  const context = apps ? { apps, legalLinks: legalLinks ?? [], profile } : (window.__cloudAppLaunchpad ?? readEmbeddedContext());
+  if (!context) return;
   window.__cloudAppLaunchpad = context;
+  if (window.matchMedia("(max-width: 1023px)").matches) {
+    void openCloudMobileMenu(context);
+    return;
+  }
   void dialogCore.open<void>((close) => <AppLaunchpadPanel apps={context.apps} legalLinks={context.legalLinks} close={close} />, {
     panelClassName: "k2b-dialog k2b-dialog--large is-bare",
     contentClassName: "k2b-dialog__viewport is-bare",
@@ -178,7 +64,7 @@ export function openAppLaunchpad(apps?: AppLaunchpadApp[], legalLinks?: AppLaunc
 
 export function AppLaunchpadProvider(props: AppLaunchpadContext) {
   createEffect(() => {
-    setAppLaunchpadContext(props.apps, props.legalLinks);
+    setAppLaunchpadContext(props.apps, props.legalLinks, props.profile);
   });
 
   return <span class="hidden" data-cloud-app-launchpad-provider />;
@@ -187,13 +73,14 @@ export function AppLaunchpadProvider(props: AppLaunchpadContext) {
 export function AppLaunchpadButton(props: AppLaunchpadContext & { variant: "rail" | "header" | "menu"; label?: string }) {
   const locale = useLocale();
   const t = () => platformMessages.resolve([locale()]).t;
-  const open = () => openAppLaunchpad(props.apps, props.legalLinks);
+  const open = () => openAppLaunchpad(props.apps, props.legalLinks, props.profile);
 
   if (props.variant === "rail") {
     return (
       <Tooltip.Trigger
         type="button"
         class="rail-item shrink-0"
+        data-cloud-launchpad
         content={props.label ?? t().apps}
         placement="right"
         delay={0}
@@ -227,10 +114,10 @@ export function AppLaunchpadButton(props: AppLaunchpadContext & { variant: "rail
 
 export function AppLaunchpad(props: AppLaunchpadContext & { variant?: "provider" | "rail" | "header" | "menu"; label?: string }) {
   if (!props.variant || props.variant === "provider") {
-    return <AppLaunchpadProvider apps={props.apps} legalLinks={props.legalLinks} />;
+    return <AppLaunchpadProvider apps={props.apps} legalLinks={props.legalLinks} profile={props.profile} />;
   }
 
-  return <AppLaunchpadButton apps={props.apps} legalLinks={props.legalLinks} variant={props.variant} label={props.label} />;
+  return <AppLaunchpadButton apps={props.apps} legalLinks={props.legalLinks} profile={props.profile} variant={props.variant} label={props.label} />;
 }
 
 export default AppLaunchpad;