@k2b/cloud 0.28.0 → 0.29.1

package/src/ssr/RailApps.island.tsx

@@ -1,25 +1,29 @@
 import { ScrollArea, Tooltip, useLocale } from "@k2b/ui";
 import { createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js";
 import type { RailSnapshot } from "../contracts/rail-preferences";
+import { AppBadge, useAppBadgeDescription } from "./AppBadge";
 import { appAccentStyle } from "./app-appearance";
+import { watchAppBadges } from "./app-badges";
 import { RAIL_PREFERENCES_EVENT, readRailContext } from "./rail-context";
 import { projectRailNavigation, type RailApp, type RailLink, railLinkActive } from "./rail-navigation";
 
 function RailIcon(props: { link: RailLink; currentPath: string }) {
   let target: HTMLAnchorElement | undefined;
   const active = () => railLinkActive(props.link, props.currentPath);
+  const badge = useAppBadgeDescription(() => props.link.badge);
   return (
     <>
       <a
         ref={target}
         href={props.link.href}
-        class={`rail-item shrink-0 ${active() ? "rail-item-active" : ""}`}
-        aria-label={props.link.label}
+        class={`rail-item relative shrink-0 ${active() ? "rail-item-active" : ""}`}
+        aria-label={badge() ? `${props.link.label}, ${badge()}` : props.link.label}
         aria-current={active() ? "page" : undefined}
         style={appAccentStyle(props.link.accent)}
       >
         <i class={`${props.link.iconClass} text-base`} aria-hidden="true" />
         <span class="sr-only">{props.link.label}</span>
+        <AppBadge endpoint={props.link.badge} />
       </a>
       <Tooltip target={() => target} content={props.link.label} placement="right" delay={0} />
     </>
@@ -36,10 +40,13 @@ export default function RailApps(props: { apps: RailApp[]; settings: RailSnapsho
     const syncLocation = () => setCurrentPath(`${window.location.pathname}${window.location.search}${window.location.hash}`);
     sync();
     syncLocation();
+    // Every visible app, not only the rail's: the app grid shows the same counts.
+    const stopBadges = watchAppBadges(props.apps.flatMap((app) => (app.badge ? [app.badge] : [])));
     window.addEventListener(RAIL_PREFERENCES_EVENT, sync);
     window.addEventListener("popstate", syncLocation);
     window.addEventListener("hashchange", syncLocation);
     onCleanup(() => {
+      stopBadges();
       window.removeEventListener(RAIL_PREFERENCES_EVENT, sync);
       window.removeEventListener("popstate", syncLocation);
       window.removeEventListener("hashchange", syncLocation);

package/src/ssr/app-badges.ts

@@ -0,0 +1,93 @@
+import { createSignal } from "solid-js";
+import { APP_BADGES_REFRESH_EVENT } from "../browser/app-badges";
+
+/**
+ * Shortest time between two scheduled reads in one tab, and the longest one
+ * read may take. Badges are a hint to open an app, not a live view, so one
+ * read per minute keeps them current while someone works elsewhere without a
+ * steady stream of requests per tab.
+ */
+export const APP_BADGE_INTERVAL_MS = 60_000;
+
+// Keyed by endpoint, so a pinned app shortcut and the app's own entry share one
+// 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);
+
+/** A positive safe integer from an `AppNavBadge` body, else 0. */
+export const parseAppBadge = (body: unknown): number => {
+  if (typeof body !== "object" || body === null || !("count" in body)) return 0;
+  const count = body.count;
+  return typeof count === "number" && Number.isSafeInteger(count) && count > 0 ? count : 0;
+};
+
+const readBadge = async (endpoint: string, signal: AbortSignal): Promise<number> => {
+  try {
+    const response = await fetch(endpoint, { credentials: "same-origin", headers: { accept: "application/json" }, signal });
+    return response.status === 200 ? parseAppBadge(await response.json()) : 0;
+  } catch {
+    // An unreachable or failing app shows no badge rather than a stale one.
+    return 0;
+  }
+};
+
+let watching = false;
+
+/**
+ * Reads the badge endpoints after hydration, every interval while the tab is
+ * visible, when a hidden tab becomes visible again after the interval, and on
+ * `refreshAppBadges()`. A hidden tab sends nothing and keeps its schedule.
+ * Each endpoint has at most one read in flight, and its count shows as soon as
+ * that read settles, so a slow app delays only its own badge. A refresh while
+ * a read runs queues one more read after it instead of another request, and a
+ * 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 () => {};
+  watching = true;
+  const stopped = new AbortController();
+  // Endpoints with a read in flight, mapped to whether one more read waits for it.
+  const running = new Map<string, boolean>();
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let last = Number.NEGATIVE_INFINITY;
+
+  const read = (endpoint: string) => {
+    if (running.has(endpoint)) {
+      running.set(endpoint, true);
+      return;
+    }
+    running.set(endpoint, false);
+    void readBadge(endpoint, AbortSignal.any([stopped.signal, AbortSignal.timeout(APP_BADGE_INTERVAL_MS)])).then((count) => {
+      if (stopped.signal.aborted) return;
+      setCounts((previous) => new Map(previous).set(endpoint, count));
+      const queued = running.get(endpoint);
+      running.delete(endpoint);
+      if (queued && document.visibilityState !== "hidden") read(endpoint);
+    });
+  };
+  const refresh = () => {
+    // Leave the pending read in place, so the tab still reads on time once it is visible again.
+    if (document.visibilityState === "hidden") return;
+    clearTimeout(timer);
+    last = Date.now();
+    timer = setTimeout(refresh, APP_BADGE_INTERVAL_MS);
+    for (const endpoint of unique) read(endpoint);
+  };
+  const resume = () => {
+    if (document.visibilityState !== "hidden" && Date.now() - last >= APP_BADGE_INTERVAL_MS) refresh();
+  };
+
+  document.addEventListener("visibilitychange", resume);
+  window.addEventListener(APP_BADGES_REFRESH_EVENT, refresh);
+  refresh();
+  return () => {
+    watching = false;
+    clearTimeout(timer);
+    stopped.abort();
+    document.removeEventListener("visibilitychange", resume);
+    window.removeEventListener(APP_BADGES_REFRESH_EVENT, refresh);
+  };
+};

package/src/ssr/rail-messages.ts

@@ -32,6 +32,8 @@ export const railMessages = i18n.define({
       saveFailed: "Could not save app bar settings. Your edits are still here.",
       conflict: "The app bar changed in another editor. Cancel and reopen this editor to load the latest settings.",
       invalid: "Check shortcut titles, links and icons. Each app can be pinned once; settings must fit within 16 KiB.",
+      badge: ({ count }: { count: number }) => `${count} new`,
+      badgeMany: "more than 99 new",
     },
     de: {
       managed: "Von der Administration bereitgestellt",
@@ -63,6 +65,8 @@ export const railMessages = i18n.define({
       conflict:
         "Die App-Leiste wurde in einem anderen Editor geändert. Brich ab und öffne den Editor erneut, um den aktuellen Stand zu laden.",
       invalid: "Prüfe Titel, Links und Icons. Jede App kann einmal angeheftet werden; die Einstellungen dürfen höchstens 16 KiB belegen.",
+      badge: ({ count }) => `${count} neu`,
+      badgeMany: "mehr als 99 neu",
     },
   },
 });

package/src/ssr/rail-navigation.ts

@@ -9,6 +9,8 @@ export type RailApp = {
   defaultVisible: boolean;
   description?: string;
   accent?: string;
+  /** The app's `nav.badge` endpoint. */
+  badge?: string;
 };
 export type RailLink = Omit<RailApp, "defaultVisible"> & { exact?: boolean };
 

package/src/styles/effects.css

@@ -96,6 +96,148 @@
   outline-offset: var(--k2b-focus-offset);
 }
 
+/* A pending approval: a calm tinted card in place 4 that says what will happen. Fields stack on phones and the
+   decision buttons share the width there. */
+.k2b-ui .ai-approval {
+  display: grid;
+  min-width: 0;
+  gap: 0.75rem;
+  padding: 1rem 1.125rem;
+  /* Transparent, so forced colours still draw an outline where the tint disappears. */
+  border: 1px solid transparent;
+  border-radius: calc(var(--k2b-radius-surface) + 0.25rem);
+  color: var(--k2b-text-secondary);
+  background: color-mix(in srgb, var(--k2b-warning-surface) 70%, var(--k2b-surface-canvas));
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+.k2b-ui.k2b-dark .ai-approval,
+.dark .k2b-ui .ai-approval {
+  background: color-mix(in srgb, var(--k2b-warning-surface) 55%, var(--k2b-surface-canvas));
+}
+
+.k2b-ui .ai-approval__head {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.k2b-ui .ai-approval__icon {
+  flex: none;
+  color: var(--k2b-warning-text);
+  font-size: 1.125rem;
+}
+
+/* The title wraps, so it reads in full where the decision button has to shorten it. */
+.k2b-ui .ai-approval__title {
+  margin: 0;
+  color: var(--k2b-text);
+  font-size: 0.875rem;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.k2b-ui .ai-approval__sub,
+.k2b-ui .ai-approval__state {
+  margin: 0;
+  color: var(--k2b-text-muted);
+  font-size: 0.75rem;
+}
+
+.k2b-ui .ai-approval__state {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-weight: 500;
+}
+
+.k2b-ui .ai-approval__text {
+  min-width: 0;
+  color: var(--k2b-text-secondary);
+  font-size: 0.75rem;
+}
+
+.k2b-ui .ai-approval__label,
+.k2b-ui .ai-approval__fields dt {
+  color: var(--k2b-text);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.k2b-ui .ai-approval__fields {
+  display: grid;
+  margin: 0;
+  gap: 0.3rem 1rem;
+  grid-template-columns: max-content minmax(0, 1fr);
+  font-size: 0.75rem;
+}
+
+.k2b-ui .ai-approval__fields dd {
+  min-width: 0;
+  margin: 0;
+  color: var(--k2b-text-secondary);
+  overflow-wrap: anywhere;
+}
+
+.k2b-ui .ai-approval__preview {
+  max-height: 12rem;
+  margin: 0;
+  overflow: auto;
+  color: var(--k2b-text-secondary);
+  font-size: 0.75rem;
+  line-height: 1.55;
+}
+
+.k2b-ui .ai-approval__foot {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.k2b-ui .ai-approval__actions {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.375rem;
+  margin-left: auto;
+}
+
+@media (max-width: 40rem) {
+  .k2b-ui .ai-approval__fields {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0;
+  }
+
+  .k2b-ui .ai-approval__fields dd {
+    margin-bottom: 0.35rem;
+  }
+
+  .k2b-ui .ai-approval__actions {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  /* The buttons share the width and may shrink below their labels: a long action title ends in an ellipsis instead
+     of pushing the menu out of the card. The title above shows it in full. */
+  .k2b-ui .ai-approval__actions > *,
+  .k2b-ui .ai-approval__actions .k2b-split-button__primary {
+    min-width: 0;
+    flex: 1;
+    justify-content: center;
+  }
+
+  .k2b-ui .ai-approval__actions .k2b-split-button__primary > .k2b-button__label {
+    display: block;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
 /* Result links sit inside an already padded activity row. Keep them inline so
    they do not make linked capability results taller than neighboring rows. */
 .k2b-ui .k2b-button.ai-chat-result-link[data-size="xs"] {
@@ -892,3 +1034,26 @@ dialog:has(.launchpad-panel)::backdrop {
 .k2b-ui .ai-response-info__rows dd { min-width: 0; margin: 0; overflow: hidden; color: var(--k2b-text); text-align: end; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
 .k2b-ui .ai-response-info__tools { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--k2b-text-secondary); }
 .k2b-ui .ai-response-info__tools > li { display: inline-flex; align-items: center; gap: 0.375rem; }
+
+/* The image a step looked at: a small inset thumbnail whose box is fixed before the image loads, so nothing moves. */
+.k2b-ui .k2b-chat-activity .ai-step-image {
+  display: flex;
+  width: 12rem;
+  max-width: 100%;
+  height: 8rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 0;
+  border-radius: var(--k2b-radius-control);
+  background: var(--ui-surface-muted);
+  box-shadow: var(--ui-control-recess);
+}
+
+.k2b-ui .k2b-chat-activity .ai-step-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top;
+}

package/src/styles/file-chooser.css

@@ -167,3 +167,28 @@
   gap: 0.5rem;
   margin-left: auto;
 }
+
+/* A saved file's progress, or the field for another name when its name is taken. Every row keeps the field's
+   height, so a conflict never moves the rows below. */
+.cloud-file-saver__slot {
+  display: flex;
+  align-items: center;
+  min-height: 2.25rem;
+}
+
+.cloud-file-saver__slot > .k2b-progress {
+  flex: 1 1 auto;
+}
+
+.cloud-file-saver__rename {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.cloud-file-saver__rename > :first-child {
+  flex: 1 1 auto;
+  min-width: 0;
+}

package/src/styles/utilities-markdown-table.css

@@ -84,7 +84,11 @@
   font-size: inherit;
   line-height: inherit;
   color: inherit;
-  overflow-wrap: anywhere;
+  /* break-word, not anywhere: anywhere lowers a column's min-content width to
+     one character, so auto table layout squeezes short columns until every
+     word breaks. break-word still wraps an overlong word, but only when it
+     would overflow. */
+  overflow-wrap: break-word;
 }
 
 .dark .md-table-cell {

package/src/styles/utilities-navigation.css

@@ -771,6 +771,47 @@
   box-shadow: none;
 }
 
+/* An app's count on its icon in the rail and the app grid. It is laid over the
+   icon's corner and never takes layout space, so a count appearing, growing to
+   "99+", or clearing moves nothing. The fill is the solid action colour, the
+   same as the sidebar's mention count. */
+.cloud-app-badge {
+  position: absolute;
+  top: 0;
+  right: -0.25rem;
+  box-sizing: border-box;
+  min-width: 0.875rem;
+  height: 0.875rem;
+  padding-inline: 0.1875rem;
+  border-radius: 999px;
+  color: #ffffff;
+  background: var(--k2b-action-solid);
+  font-size: 0.625rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  line-height: 0.875rem;
+  text-align: center;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.app-icon > .cloud-app-badge {
+  top: -0.375rem;
+  right: -0.375rem;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding-inline: 0.3125rem;
+  font-size: 0.6875rem;
+  line-height: 1.25rem;
+}
+
+@media (forced-colors: active) {
+  .cloud-app-badge {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+}
+
 .rail-item-active:hover {
   color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 88%, black);
   background: transparent;