@k2b/cloud 0.31.0 → 0.32.0

package/src/shared/email-html.ts

@@ -2,6 +2,7 @@ import sanitizeHtml from "sanitize-html";
 
 export const EMAIL_HTML_TAGS = [
   "a",
+  "blockquote",
   "br",
   "code",
   "div",
@@ -12,6 +13,7 @@ export const EMAIL_HTML_TAGS = [
   "li",
   "ol",
   "p",
+  "pre",
   "span",
   "strong",
   "table",
@@ -26,6 +28,7 @@ export const EMAIL_HTML_TAGS = [
 
 export const EMAIL_HTML_ALLOWED_ATTRIBUTES: Record<string, string[]> = {
   a: ["href", "target", "style"],
+  blockquote: ["style"],
   div: ["style"],
   h1: ["style"],
   h2: ["style"],
@@ -33,6 +36,7 @@ export const EMAIL_HTML_ALLOWED_ATTRIBUTES: Record<string, string[]> = {
   li: ["style"],
   ol: ["style"],
   p: ["style"],
+  pre: ["style"],
   span: ["style"],
   table: ["style", "cellpadding", "cellspacing", "width", "align", "border"],
   tbody: ["style"],

package/src/shared/index.ts

@@ -13,7 +13,12 @@ export * from "./account-display";
 export * from "./account-session";
 export * from "./ai-costs";
 export type { AiPromptContextInput, AiToolPromptHint } from "./ai-platform-prompt";
-export { AI_PLATFORM_PROMPT_TEMPLATE, aiPromptContext, renderAiPlatformPrompt } from "./ai-platform-prompt";
+export {
+  AI_LOCAL_CLIENT_DEFAULT_INSTRUCTIONS,
+  AI_PLATFORM_PROMPT_TEMPLATE,
+  aiPromptContext,
+  renderAiPlatformPrompt,
+} from "./ai-platform-prompt";
 export type { AiChatQuotaSnapshot } from "./ai-quotas";
 export * from "./ai-quotas";
 export {

package/src/shared/markdown/extensions/code.ts

@@ -55,6 +55,20 @@ const renderCode = (source: string, language?: string): string => {
   return highlighter ? highlighter(source) : escapeHtml(source);
 };
 
+/**
+ * The label and diagram container need Cloud's styles and scripts; highlight spans only add to the email
+ * element budget. A bare `pre` lets the email design style blocks with `pre` and reserve `code` for inline code.
+ */
+export function plainCodeExtension(): MarkedExtension {
+  return {
+    renderer: {
+      code(token: Tokens.Code): string {
+        return `<pre>${escapeHtml(token.text)}</pre>\n`;
+      },
+    },
+  };
+}
+
 export function codeExtension(): MarkedExtension {
   return {
     renderer: {

package/src/shared/markdown/index.ts

@@ -9,7 +9,7 @@ import { markdownInfoBlocks } from "@k2b/ui";
 import { Marked, type MarkedExtension } from "marked";
 import sanitizeHtml from "sanitize-html";
 import { markdownClient } from "./client";
-import { codeExtension } from "./extensions/code";
+import { codeExtension, plainCodeExtension } from "./extensions/code";
 import { guidedHelpExtension } from "./extensions/guided-help";
 import { imagesExtension } from "./extensions/images";
 import { katexExtension } from "./extensions/katex";
@@ -36,12 +36,12 @@ const createMarked = (profile: MarkdownProfile, links: LinkStyle, infoBlocks: Ma
   marked.use(infoBlocks);
   marked.use(taskListExtension());
   marked.use(tablesExtension());
-  // Plain links keep marked's own renderer: an anchor around the link text.
+  // Plain output keeps marked's own link renderer and renders code blocks as a bare `pre`.
   // Cloud links are calm reference pills and quiet web links from `@k2b/ui`.
   if (links === "widget") marked.use(linksExtension({ internalTarget: profile === "help" ? "_self" : "_blank", locale }));
   marked.use(imagesExtension());
   marked.use(katexExtension());
-  marked.use(codeExtension());
+  marked.use(links === "widget" ? codeExtension() : plainCodeExtension());
   // Inline-style decorators come last so they run after structural tokenizers.
   marked.use(markExtension());
   marked.use(subSupExtension());
@@ -67,7 +67,7 @@ const markedFor = (profile: MarkdownProfile, links: LinkStyle = "widget", locale
 const marked = markedFor("content");
 
 export type MarkdownRenderOptions = {
-  /** `"plain"` renders each link as an ordinary anchor around its text, for HTML read outside Cloud such as email. The default renders references to Cloud content as calm pills and web links as quiet text links. */
+  /** `"plain"` renders each link as an ordinary anchor around its text, for HTML read outside Cloud such as email. It also renders a code block, fenced or indented and including a Mermaid fence, as its source in a `pre` without the language label. The default renders references to Cloud content as calm pills and web links as quiet text links. */
   links?: LinkStyle;
   /** Request locale for the screen-reader names of untitled info blocks. Defaults to English on the server and the page language in the browser. */
   locale?: string;

package/src/ssr/AppBadge.tsx

@@ -4,10 +4,10 @@ import { appBadgeCount } from "./app-badges";
 import { railMessages } from "./rail-messages";
 
 /** What a screen reader hears after the app name; empty without a count. Says no more than the "99+" shown. */
-export const useAppBadgeDescription = (endpoint: () => string | undefined) => {
+export const useAppBadgeDescription = (input: () => { endpoint?: string; appId?: string }) => {
   const locale = useLocale();
   return () => {
-    const count = appBadgeCount(endpoint());
+    const count = appBadgeCount(input());
     const t = railMessages.resolve([locale()]).t;
     return count > 99 ? t.badgeMany : count > 0 ? t.badge({ count }) : "";
   };
@@ -18,8 +18,8 @@ export const useAppBadgeDescription = (endpoint: () => string | undefined) => {
  * takes layout space, so appearing, growing to "99+", or clearing moves
  * nothing. Decorative: the link carries the description.
  */
-export function AppBadge(props: { endpoint?: string }) {
-  const count = () => appBadgeCount(props.endpoint);
+export function AppBadge(props: { endpoint?: string; appId?: string }) {
+  const count = () => appBadgeCount(props);
   return (
     <Show when={count() > 0}>
       <span class="cloud-app-badge" aria-hidden="true">

package/src/ssr/AppLaunchpadPanel.tsx

@@ -132,7 +132,7 @@ export const AppLaunchpadPanel = (
           <div class="flex flex-wrap justify-center gap-3">
             <For each={shortcuts()}>
               {(shortcut) => {
-                const badge = useAppBadgeDescription(() => shortcut.badge);
+                const badge = useAppBadgeDescription(() => ({ endpoint: shortcut.badge, appId: shortcut.appId }));
                 return (
                   <a
                     onClick={follow}
@@ -141,7 +141,7 @@ export const AppLaunchpadPanel = (
                   >
                     <span class="relative grid h-9 w-9 place-items-center rounded-xl bg-[var(--ui-hover)] text-lg transition-colors group-hover:bg-[var(--ui-active)]">
                       <i class={shortcut.iconClass} aria-hidden="true" />
-                      <AppBadge endpoint={shortcut.badge} />
+                      <AppBadge endpoint={shortcut.badge} appId={shortcut.appId} />
                     </span>
                     <span class="max-w-full truncate text-[11px] font-medium text-primary dark:text-white">
                       {shortcut.label}
@@ -159,7 +159,7 @@ export const AppLaunchpadPanel = (
       <div class="launchpad-apps-grid flex flex-wrap justify-center gap-x-4 gap-y-4 sm:gap-x-7 sm:gap-y-6">
         <For each={apps()}>
           {(app) => {
-            const badge = useAppBadgeDescription(() => app.badge);
+            const badge = useAppBadgeDescription(() => ({ endpoint: app.badge, appId: app.id }));
             return (
               <a
                 onClick={follow}
@@ -171,7 +171,7 @@ export const AppLaunchpadPanel = (
                   style={appIconStyle(app)}
                 >
                   <i class={app.iconClass} />
-                  <AppBadge endpoint={app.badge} />
+                  <AppBadge endpoint={app.badge} appId={app.id} />
                 </span>
                 <span class="max-w-full truncate text-[11px] font-medium text-primary sm:text-xs dark:text-white">
                   {app.label}

package/src/ssr/RailApps.island.tsx

@@ -10,7 +10,7 @@ import { projectRailNavigation, type RailApp, type RailLink, railLinkActive } fr
 function RailIcon(props: { link: RailLink; currentPath: string }) {
   let target: HTMLAnchorElement | undefined;
   const active = () => railLinkActive(props.link, props.currentPath);
-  const badge = useAppBadgeDescription(() => props.link.badge);
+  const badge = useAppBadgeDescription(() => ({ endpoint: props.link.badge, appId: props.link.appId }));
   return (
     <>
       <a
@@ -23,7 +23,7 @@ function RailIcon(props: { link: RailLink; currentPath: string }) {
       >
         <i class={`${props.link.iconClass} text-base`} aria-hidden="true" />
         <span class="sr-only">{props.link.label}</span>
-        <AppBadge endpoint={props.link.badge} />
+        <AppBadge endpoint={props.link.badge} appId={props.link.appId} />
       </a>
       <Tooltip target={() => target} content={props.link.label} placement="right" delay={0} />
     </>

package/src/ssr/app-badges.ts

@@ -1,5 +1,7 @@
 import { createSignal } from "solid-js";
 import { APP_BADGES_REFRESH_EVENT } from "../browser/app-badges";
+import { APPROVAL_COUNTS_PATH } from "../contracts/approval-paths";
+import type { ApprovalCounts } from "../contracts/approvals";
 
 /**
  * Shortest time between two scheduled reads in one tab, and the longest one
@@ -13,8 +15,20 @@ export const APP_BADGE_INTERVAL_MS = 60_000;
 // count. Only the browser ever writes it; server renders always see no badge.
 const [counts, setCounts] = createSignal<ReadonlyMap<string, number>>(new Map());
 
-/** The count for a declared `nav.badge` endpoint; 0 until the browser has read it. */
-export const appBadgeCount = (endpoint: string | undefined): number => (endpoint ? (counts().get(endpoint) ?? 0) : 0);
+const [approvalCounts, setApprovalCounts] = createSignal<ApprovalCounts | null>(null);
+
+/** Retain an SSR count until the first browser read; a failed read still resolves to zero. */
+export const liveApprovalCount = (appId?: string): number | null => {
+  const current = approvalCounts();
+  if (!current) return null;
+  if (appId === undefined) return current.total;
+  return Object.hasOwn(current.apps, appId) ? (current.apps[appId] ?? 0) : 0;
+};
+export const approvalCount = (appId?: string): number => liveApprovalCount(appId) ?? 0;
+
+/** Endpoint and approval counts for one app; 0 until the browser has read them. */
+export const appBadgeCount = (input: { endpoint?: string; appId?: string }): number =>
+  (input.endpoint ? (counts().get(input.endpoint) ?? 0) : 0) + (input.appId ? approvalCount(input.appId) : 0);
 
 /** A positive safe integer from an `AppNavBadge` body, else 0. */
 export const parseAppBadge = (body: unknown): number => {
@@ -33,6 +47,33 @@ const readBadge = async (endpoint: string, signal: AbortSignal): Promise<number>
   }
 };
 
+const isCount = (value: unknown, minimum: number): value is number =>
+  typeof value === "number" && Number.isSafeInteger(value) && value >= minimum;
+
+/** What `ApprovalCountsSchema` accepts from a JSON body, without loading validators into the shell; a test compares both. */
+export const parseApprovalCounts = (body: unknown): ApprovalCounts | null => {
+  if (typeof body !== "object" || body === null || Array.isArray(body)) return null;
+  if (Object.keys(body).length !== 2 || !("total" in body) || !("apps" in body)) return null;
+  const { total, apps } = body;
+  if (!isCount(total, 0) || typeof apps !== "object" || apps === null || Array.isArray(apps)) return null;
+  // Like Zod's record, ignore a `__proto__` key that JSON.parse keeps as an own property.
+  const entries = Object.entries(apps).filter(([app]) => app !== "__proto__");
+  return entries.every(([, count]) => isCount(count, 1)) ? { total, apps: Object.fromEntries(entries) } : null;
+};
+
+const readApprovalCounts = async (signal: AbortSignal): Promise<ApprovalCounts> => {
+  try {
+    const response = await fetch(APPROVAL_COUNTS_PATH, { credentials: "same-origin", headers: { accept: "application/json" }, signal });
+    if (response.status === 200) {
+      const parsed = parseApprovalCounts(await response.json());
+      if (parsed) return parsed;
+    }
+  } catch {
+    // A failing read clears approval counts just like an app badge.
+  }
+  return { total: 0, apps: {} };
+};
+
 let watching = false;
 
 /**
@@ -45,8 +86,8 @@ let watching = false;
  * read still running after the interval gives up. Returns a disposer.
  */
 export const watchAppBadges = (endpoints: readonly string[]): (() => void) => {
-  const unique = [...new Set(endpoints)];
-  if (typeof window === "undefined" || unique.length === 0 || watching) return () => {};
+  const unique = [...new Set([...endpoints, APPROVAL_COUNTS_PATH])];
+  if (typeof window === "undefined" || watching) return () => {};
   watching = true;
   const stopped = new AbortController();
   // Endpoints with a read in flight, mapped to whether one more read waits for it.
@@ -60,9 +101,12 @@ export const watchAppBadges = (endpoints: readonly string[]): (() => void) => {
       return;
     }
     running.set(endpoint, false);
-    void readBadge(endpoint, AbortSignal.any([stopped.signal, AbortSignal.timeout(APP_BADGE_INTERVAL_MS)])).then((count) => {
+    const signal = AbortSignal.any([stopped.signal, AbortSignal.timeout(APP_BADGE_INTERVAL_MS)]);
+    const result = endpoint === APPROVAL_COUNTS_PATH ? readApprovalCounts(signal) : readBadge(endpoint, signal);
+    void result.then((count) => {
       if (stopped.signal.aborted) return;
-      setCounts((previous) => new Map(previous).set(endpoint, count));
+      if (typeof count === "number") setCounts((previous) => new Map(previous).set(endpoint, count));
+      else setApprovalCounts(count);
       const queued = running.get(endpoint);
       running.delete(endpoint);
       if (queued && document.visibilityState !== "hidden") read(endpoint);

package/src/ssr/page-trail.browser-harness.tsx

@@ -66,11 +66,11 @@ const Page = (props: { c: unknown; title: Title; children: JSX.Element }) => (
     {props.children}
   </Layout>
 );
-const AccountsWorkspace = (props: { children: JSX.Element }) => (
+const AccountsWorkspace = (props: { children: JSX.Element; active?: boolean }) => (
   <AppWorkspace mobileSurface="flush" class="min-h-0 flex-1">
     <AppWorkspace.Sidebar id="accounts-navigation" label="Accounts">
       <AppWorkspace.SidebarDesktop>
-        <AppWorkspace.SidebarItem href="/app/accounts/users" icon="ti ti-user" active>
+        <AppWorkspace.SidebarItem href="/app/accounts/users" icon="ti ti-user" active={props.active ?? true}>
           Users
         </AppWorkspace.SidebarItem>
       </AppWorkspace.SidebarDesktop>
@@ -134,7 +134,8 @@ export const server = new Hono()
       const uid = c.req.param("uid") ?? "";
       return () => (
         <Page c={c} title={[start, accountsRoot, { title: "Users", href: "/app/accounts/users" }, { title: uid }]}>
-          <AccountsWorkspace>
+          <AccountsWorkspace active={false}>
+            <h1 class="p-3">User Seven</h1>
             <p class="p-3">Profile of {uid}</p>
             <input aria-label="Note" class="m-3" />
           </AccountsWorkspace>
@@ -142,6 +143,54 @@ export const server = new Hono()
       );
     }),
   )
+  .get(
+    "/app/accounts/teams",
+    ...probe.ssr((c) => () => (
+      <Page c={c} title={[start, accountsRoot, { title: "Directory", href: "/app/accounts/directory" }, { title: "Teams" }]}>
+        <AppWorkspace mobileSurface="flush" class="min-h-0 flex-1">
+          <AppWorkspace.Sidebar label="Directory">
+            <AppWorkspace.SidebarDesktop>
+              <AppWorkspace.SidebarItem href="/app/accounts/teams" active>
+                Teams
+              </AppWorkspace.SidebarItem>
+            </AppWorkspace.SidebarDesktop>
+          </AppWorkspace.Sidebar>
+          <AppWorkspace.Content>
+            <AppWorkspace.Main>
+              <input aria-label="Search teams" placeholder="Search Teams…" />
+            </AppWorkspace.Main>
+          </AppWorkspace.Content>
+        </AppWorkspace>
+      </Page>
+    )),
+  )
+  .get(
+    "/app/accounts/teams/engineering",
+    ...probe.ssr((c) => () => (
+      <Page c={c} title={[start, accountsRoot, { title: "Teams", href: "/app/accounts/teams" }, { title: "Engineering" }]}>
+        <AppWorkspace mobileSurface="flush" class="min-h-0 flex-1">
+          <AppWorkspace.Sidebar label="Directory">
+            <AppWorkspace.SidebarDesktop>
+              <AppWorkspace.SidebarItem href="/app/accounts/teams" active="ancestor">
+                Teams
+              </AppWorkspace.SidebarItem>
+            </AppWorkspace.SidebarDesktop>
+          </AppWorkspace.Sidebar>
+          <AppWorkspace.Content>
+            <AppWorkspace.Main>Team members</AppWorkspace.Main>
+          </AppWorkspace.Content>
+        </AppWorkspace>
+      </Page>
+    )),
+  )
+  .get(
+    "/app/accounts/directory",
+    ...probe.ssr((c) => () => (
+      <Page c={c} title={[{ title: "Directory" }]}>
+        <h1>Directory</h1>
+      </Page>
+    )),
+  )
   .get(
     "/app/files",
     ...probe.ssr((c) => {

package/src/ssr/rail-navigation.ts

@@ -12,7 +12,7 @@ export type RailApp = {
   /** The app's `nav.badge` endpoint. */
   badge?: string;
 };
-export type RailLink = Omit<RailApp, "defaultVisible"> & { exact?: boolean };
+export type RailLink = Omit<RailApp, "defaultVisible"> & { appId?: string; exact?: boolean };
 
 export const isRailAppVisible = (app: RailApp, settings: RailPreferences): boolean =>
   Object.hasOwn(settings.visibility, app.id) ? (settings.visibility[app.id] ?? app.defaultVisible) : app.defaultVisible;
@@ -32,7 +32,7 @@ export const projectRailNavigation = (apps: readonly RailApp[], settings: RailSn
       const app = catalog.get(shortcut.appId);
       if (!app || pinned.has(app.id)) continue;
       pinned.add(app.id);
-      shortcuts.push({ ...app, id: shortcut.id });
+      shortcuts.push({ ...app, id: shortcut.id, appId: app.id });
     } else {
       shortcuts.push({
         id: shortcut.id,
@@ -46,7 +46,9 @@ export const projectRailNavigation = (apps: readonly RailApp[], settings: RailSn
   }
   return {
     shortcuts,
-    apps: sortRailApps(apps, locale).filter((app) => !pinned.has(app.id) && isRailAppVisible(app, settings)),
+    apps: sortRailApps(apps, locale)
+      .filter((app) => !pinned.has(app.id) && isRailAppVisible(app, settings))
+      .map((app) => ({ ...app, appId: app.id })),
   };
 };
 

package/src/ssr/runtime.ts

@@ -36,9 +36,14 @@ export const localizedAppName = (
   appId: string,
   fallback: string,
 ): string => {
+  return appNameIn(carrier, appId, getLocale(carrier as Parameters<typeof getLocale>[0]), fallback);
+};
+
+/** An app's registered name in the locale of a recorded request. */
+export const appNameIn = (carrier: RuntimeCarrier, appId: string, locale: string, fallback: string): string => {
   const runtime = carrier.get("runtime");
   const apps =
     runtime && typeof runtime === "object" && Array.isArray((runtime as RuntimeContext).apps) ? (runtime as RuntimeContext).apps : [];
   const app = apps.find((entry) => entry.id === appId);
-  return app ? resolveAppPresentation(app, getLocale(carrier as Parameters<typeof getLocale>[0])).name : fallback;
+  return app ? resolveAppPresentation(app, locale).name : fallback;
 };