@k2b/cloud 0.39.0 → 0.40.0

package/src/ssr/LayoutHelpPanel.browser-harness.tsx

@@ -0,0 +1,136 @@
+import { keyboardPlatform } from "@k2b/ui";
+import { Hono } from "hono";
+import { defineApp } from "../_internal/define-app";
+import { person } from "../_internal/define-app.test-fixture";
+import type { AppAppearance, CloudRuntime } from "../contracts/app";
+import type { User } from "../contracts/shared";
+import type { HelpDocumentManifest, HelpDocumentPayload } from "../shared/help";
+import { appAppearanceStyle } from "./app-appearance";
+import Layout from "./Layout";
+import { LayoutHelpPage, type LayoutHelpPageProps, LayoutHelpPanel, type LayoutHelpPanelProps } from "./LayoutHelp";
+import { helpArticlePartsServer } from "./layout-help-article.server";
+import PanelLayout from "./PanelLayout";
+import { readPanelContext } from "./panel-context";
+
+export const documents: HelpDocumentManifest[] = [
+  { id: "spaces-share", title: "Share a Space", kind: "task", icon: "ti ti-share" },
+  { id: "spaces-start", title: "Start with Spaces", kind: "start", icon: "ti ti-rocket" },
+].map((topic) => ({
+  ...topic,
+  kind: topic.id === "spaces-share" ? "task" : "start",
+  order: 1,
+  url: `/api/help/${topic.id}`,
+  searchUrl: "/api/help/search",
+}));
+export const helpManifest = { documents, pageBase: "/help/apps/spaces", baseLocale: "en", locale: "en", manifestHash: "fixture" };
+export const fixtureDocument: HelpDocumentPayload = {
+  id: "spaces-share",
+  title: "Share a Space",
+  locale: "en",
+  markdown: "Share",
+  kind: "task",
+  needs: "manage",
+  related: [],
+  // A lead, the facts chips, and a section: everything the article head reads from the article.
+  html: '<p>Share a Space so other people can see and edit its tasks.</p><h2 id="share">Share</h2><div class="help-steps"><ol><li>Open Space settings.</li><li>Add a person.</li></ol></div>',
+};
+const initialArticle = { payload: fixtureDocument, parts: helpArticlePartsServer(fixtureDocument.html) };
+const appearance: AppAppearance = { accent: "#16a34a", background: { from: "#16a34a", to: "#0284c7" } };
+const apps: CloudRuntime["apps"] = [
+  {
+    id: "spaces",
+    name: "Spaces",
+    icon: "ti ti-box",
+    description: "Help fixture",
+    routes: ["/app/spaces"],
+    nav: { href: "/app/spaces", section: "primary" },
+    appearance,
+    help: helpManifest,
+  },
+  {
+    id: "core",
+    name: "Core",
+    icon: "ti ti-cloud",
+    description: "Core fixture",
+    routes: ["/"],
+    panel: { href: "/panel", label: "Help", icon: "ti ti-help-circle" },
+  },
+];
+const app = defineApp({
+  id: "help-fixture",
+  name: "Help fixture",
+  description: "Help fixture",
+  icon: "ti ti-help-circle",
+  baseUrl: "http://fixture:3000",
+  routes: ["/"],
+});
+type Environment = { Variables: { runtime: CloudRuntime; user: User } };
+const PropsSnapshot = (props: { value: LayoutHelpPanelProps | LayoutHelpPageProps }) => (
+  <script id="help-fixture-props" type="application/json" innerHTML={JSON.stringify(props.value).replace(/</g, "\\u003c")} />
+);
+export const server = new Hono<Environment>()
+  .use(async (c, next) => {
+    c.set("runtime", { apps });
+    c.set("user", person);
+    await next();
+  })
+  .get(
+    "/app/spaces",
+    ...app.ssr<Environment>((c) => () => (
+      <Layout c={c} title="Spaces" help={["spaces-share"]}>
+        <p>App content</p>
+      </Layout>
+    )),
+  )
+  .get(
+    "/panel",
+    ...app.ssr<Environment>((c) => {
+      const context = readPanelContext(c);
+      const props: LayoutHelpPanelProps = {
+        documents,
+        app: { id: "spaces", name: "Spaces", icon: "ti ti-box" },
+        appearance: appAppearanceStyle(appearance),
+        view: context?.app === "spaces" ? context.help?.filter((id) => documents.some((topic) => topic.id === id)) : [],
+        platform: keyboardPlatform(c.req.header("User-Agent") ?? ""),
+        pageBase: helpManifest.pageBase,
+        initialArticle: c.req.query("topic") === "spaces-share" ? initialArticle : undefined,
+        initialTopic: c.req.query("topic") === "spaces-share" ? "spaces-share" : undefined,
+      };
+      return () => (
+        <PanelLayout c={c} title="Help">
+          <div id="help-fixture-root" class="flex h-full min-h-0 flex-1 flex-col">
+            <LayoutHelpPanel {...props} />
+          </div>
+          <PropsSnapshot value={props} />
+        </PanelLayout>
+      );
+    }),
+  )
+  .get(
+    "/help/apps/spaces/spaces-share",
+    ...app.ssr<Environment>((c) => () => (
+      <Layout c={c} title="Help">
+        <div id="help-fixture-root">
+          <LayoutHelpPage
+            documents={documents}
+            initialTopic="spaces-share"
+            initialArticle={initialArticle}
+            pageBase={helpManifest.pageBase}
+          />
+        </div>
+        <PropsSnapshot value={{ documents, initialTopic: "spaces-share", initialArticle, pageBase: helpManifest.pageBase }} />
+      </Layout>
+    )),
+  );
+
+/**
+ * Capture during parsing and immediately after mounting; coordinates inside the provider are relative to its viewport.
+ * The article head keeps its position, width and height; the contents column keeps its position and width.
+ */
+export function helpPanelGeometry() {
+  return ["[data-help-view]", "[data-cloud-app-area]", ".help-article-head", ".help-article-aside"].map((selector, index) => {
+    const rect = document.querySelector(selector)?.getBoundingClientRect();
+    if (!rect) return null;
+    return index < 3 ? { x: rect.x, y: rect.y, width: rect.width, height: rect.height } : { x: rect.x, y: rect.y, width: rect.width };
+  });
+}

package/src/ssr/LayoutHelpTrigger.tsx

@@ -1,4 +1,7 @@
 import { IconButton, Tooltip, useLocale } from "@k2b/ui";
+import { createSignal, onCleanup, onMount } from "solid-js";
+import { isServer } from "solid-js/web";
+import { closePanel, openPanel } from "../browser/panel";
 import { importOnDemand } from "../browser/reload";
 import { createBusyAction } from "./busy-action";
 import { platformMessages } from "./platform-messages";
@@ -6,6 +9,8 @@ import { platformMessages } from "./platform-messages";
 type LayoutHelpTriggerProps = {
   variant: "header" | "rail";
   class?: string;
+  panel?: boolean;
+  helpOpen?: boolean;
 };
 
 /** Opens end-user help from either the desktop rail or the compact header. */
@@ -13,17 +18,35 @@ export default function LayoutHelpTrigger(props: LayoutHelpTriggerProps) {
   const locale = useLocale();
   const t = () => platformMessages.resolve([locale()]).t;
   const action = createBusyAction();
-  const openHelp = () =>
-    action.run(
+  // The server knows the cookie; the browser also knows the mode: a phone starts with the sheet closed, whatever the
+  // cookie says, and the lazy controller may have changed the state before this island mounts.
+  const readOpen = () => {
+    const canvas = document.querySelector(".cloud-app-canvas");
+    const attribute = window.matchMedia("(min-width: 768px)").matches ? "data-panel" : "data-panel-sheet";
+    return canvas?.getAttribute(attribute) === "open" && document.getElementById("cloud-panel")?.dataset.provider === "core";
+  };
+  const [helpOpen, setHelpOpen] = createSignal(isServer ? !!props.helpOpen : !!props.panel && readOpen());
+  onMount(() => {
+    const changed = (event: WindowEventMap["cloud.panel.state"]) => setHelpOpen(event.detail.open && event.detail.provider === "core");
+    window.addEventListener("cloud.panel.state", changed);
+    onCleanup(() => window.removeEventListener("cloud.panel.state", changed));
+  });
+  const openHelp = () => {
+    if (helpOpen()) return closePanel();
+    if (openPanel("core")) return;
+    return action.run(
       () => importOnDemand(() => import("./LayoutHelp")),
       (help) => help.openLayoutHelpDialog(),
     );
+  };
 
   if (props.variant === "rail")
     return (
       <Tooltip.Trigger
         type="button"
         class={`rail-item text-blue-500 hover:bg-blue-500/10 hover:text-blue-600 dark:text-blue-400 dark:hover:bg-blue-500/15 dark:hover:text-blue-300 ${props.class ?? ""}`}
+        aria-controls={props.panel ? "cloud-panel" : undefined}
+        aria-expanded={props.panel ? helpOpen() : undefined}
         onClick={openHelp}
         aria-busy={action.busy() ? "true" : undefined}
         aria-label={t().openHelp}
@@ -38,6 +61,8 @@ export default function LayoutHelpTrigger(props: LayoutHelpTriggerProps) {
   return (
     <IconButton
       class={props.class}
+      aria-controls={props.panel ? "cloud-panel" : undefined}
+      aria-expanded={props.panel ? helpOpen() : undefined}
       onClick={openHelp}
       aria-busy={action.busy() ? "true" : undefined}
       label={t().openHelp}

package/src/ssr/MobileNavigation.tsx

@@ -48,8 +48,8 @@ function MobileNavigation(props: {
               value={tab}
               onValueChange={setTab}
               options={[
-                { value: "app", label: workspace()?.label || t().appMenu },
-                { value: "apps", label: t().allApps },
+                { value: "app", label: <span class="block k2b-truncate-fade">{workspace()?.label || t().appMenu}</span> },
+                { value: "apps", label: <span class="block k2b-truncate-fade">{t().allApps}</span> },
               ]}
             />
           }

package/src/ssr/PanelLayout.tsx

@@ -5,12 +5,19 @@ import { getLocale } from "../server/locale";
 import { resolveRuntimeRoute } from "./app-navigation";
 import type { MinimalLayoutContext } from "./layout-context";
 import PanelRuntime from "./PanelRuntime.island";
+import { readPanelContext } from "./panel-context";
 import { getRuntimeContext } from "./runtime";
 
-export type PanelLayoutProps = { c: MinimalLayoutContext; title: string; children: JSX.Element };
+export type PanelLayoutProps = {
+  c: MinimalLayoutContext & { header(name: string, value: string): void };
+  title: string;
+  children: JSX.Element;
+};
 
 /** A provider page embedded in the shell's same-origin panel. */
 export default function PanelLayout(props: PanelLayoutProps) {
+  props.c.header("Referrer-Policy", "same-origin");
+  const context = readPanelContext(props.c);
   const runtime = getRuntimeContext(props.c);
   // The provider owns this path by the canonical prefixes its panel declaration was checked against.
   const apps = runtime.apps.map((entry) => ({ ...entry, routes: entry.routes.map(canonicalRoute) }));
@@ -19,6 +26,7 @@ export default function PanelLayout(props: PanelLayoutProps) {
   return (
     <LocaleProvider locale={getLocale(props.c)}>
       <div class="cloud-panel-page" data-cloud-panel-page="" data-panel-provider={app?.id}>
+        <script id="cloud-panel-context" type="application/json" innerHTML={JSON.stringify(context).replace(/</g, "\\u003c")} />
         <PanelRuntime provider={app?.id} scope={app?.panel ? new URL(app.panel.href, props.c.req.raw.url).pathname : undefined} />
         {props.children}
       </div>

package/src/ssr/PanelRuntime.island.tsx

@@ -1,5 +1,6 @@
 import { installAppWorkspaceController, installInputModeController, keyboardPlatform } from "@k2b/ui";
 import { onCleanup, onMount } from "solid-js";
+import { installPanelContextReceiver } from "../browser/panel-context-receiver";
 import { syncTimezoneCookie } from "./timezone-cookie";
 
 export default function PanelRuntime(props: { provider?: string; scope?: string }) {
@@ -12,6 +13,7 @@ export default function PanelRuntime(props: { provider?: string; scope?: string
     const deferred = new Set<ReturnType<typeof setTimeout>>();
     const embedded = window.parent !== window;
     let disposeTheme = () => {};
+    let disposeContext = () => {};
     let resumeTheme = () => {};
     // A page kept in the back/forward cache keeps following the host; only a removed iframe lets go.
     const pageHide = (event: PageTransitionEvent) => {
@@ -38,6 +40,9 @@ export default function PanelRuntime(props: { provider?: string; scope?: string
       if (event.key.toLowerCase() === "j" && event.metaKey === apple && event.ctrlKey === !apple) {
         event.preventDefault();
         if (!event.repeat) close();
+      } else if (event.key.toLowerCase() === "k" && event.metaKey === apple && event.ctrlKey === !apple) {
+        event.preventDefault();
+        if (!event.repeat) window.parent.postMessage({ type: "cloud.panel.search", v: 1 }, location.origin);
       } else if (event.key === "Escape" && !event.metaKey && !event.ctrlKey) {
         // An open modal dialog takes Escape through its cancel event, without preventing this keydown.
         if (document.querySelector("dialog[open], [aria-modal='true']")) return;
@@ -49,6 +54,7 @@ export default function PanelRuntime(props: { provider?: string; scope?: string
       }
     };
     if (embedded) {
+      disposeContext = installPanelContextReceiver();
       try {
         const parent = window.parent;
         const parentRoot = parent.document.documentElement;
@@ -73,6 +79,7 @@ export default function PanelRuntime(props: { provider?: string; scope?: string
       window.addEventListener("click", click);
     }
     onCleanup(() => {
+      disposeContext();
       disposeInput();
       disposeWorkspace();
       disposeTheme();

package/src/ssr/PanelSlot.tsx

@@ -1,5 +1,6 @@
-import { Button, IconButton, type KeyboardPlatform, Placeholder, ResizeSeparator, useLocale } from "@k2b/ui";
+import { Button, IconButton, type KeyboardPlatform, NoticeCard, Placeholder, ResizeSeparator, useLocale } from "@k2b/ui";
 import { PANEL_MAX_WIDTH_REM, PANEL_MIN_WIDTH_REM, type PanelCookieState } from "../_internal/panel-cookie";
+import { withPanelContext } from "../contracts/panel-context-plain";
 import { platformMessages } from "./platform-messages";
 import type { ShellData } from "./shell-data";
 
@@ -9,6 +10,10 @@ export default function PanelSlot(props: { panel: NonNullable<ShellData["panel"]
   const t = platformMessages.resolve([locale()]).t;
   const provider = props.panel.providers.find((provider) => provider.id === props.panel.provider) ?? props.panel.providers[0];
   if (!provider) return null;
+  const answer = props.panel.consent?.provider === provider.id ? props.panel.consent.allowed : null;
+  const ask = props.state.open && provider.consent && answer === null;
+  const allowed = !provider.consent || answer === true;
+  const hasConsent = props.panel.providers.some((provider) => provider.consent);
   const tabs = props.panel.providers.length > 1;
   return (
     <aside
@@ -18,6 +23,10 @@ export default function PanelSlot(props: { panel: NonNullable<ShellData["panel"]
       aria-label={t.panel}
       data-state={props.state.open ? "loading" : "closed"}
       data-provider={provider.id}
+      data-app-name={provider.appName}
+      data-provider-consent={String(provider.consent)}
+      data-context-allowed={String(allowed)}
+      data-consent={ask ? "ask" : undefined}
     >
       <ResizeSeparator
         class="cloud-panel__resize"
@@ -48,7 +57,7 @@ export default function PanelSlot(props: { panel: NonNullable<ShellData["panel"]
                   tabindex={item.id === provider.id ? 0 : -1}
                 >
                   <i class={item.icon} aria-hidden="true" />
-                  <span class="cloud-panel__tab-label">{item.label}</span>
+                  <span class="cloud-panel__tab-label k2b-truncate-fade">{item.label}</span>
                 </button>
               ))}
             </div>
@@ -58,6 +67,19 @@ export default function PanelSlot(props: { panel: NonNullable<ShellData["panel"]
               <span>{provider.label}</span>
             </h2>
           )}
+          {/* The controller mounts the ⋯ menu over this button; the place stays reserved for Core providers. */}
+          {hasConsent && (
+            <span
+              class="cloud-panel__menu"
+              data-cloud-panel-menu=""
+              style={{ visibility: provider.consent ? "visible" : "hidden" }}
+              inert={!provider.consent}
+            >
+              <IconButton label={t.panelMenu} title={t.panelMenu} aria-haspopup="menu" aria-expanded="false">
+                <i class="ti ti-dots" aria-hidden="true" />
+              </IconButton>
+            </span>
+          )}
           <IconButton
             label={t.closePanel}
             title={`${t.closePanel} (${props.platform === "apple" ? "⌘J" : "Ctrl+J"})`}
@@ -67,6 +89,34 @@ export default function PanelSlot(props: { panel: NonNullable<ShellData["panel"]
           </IconButton>
         </div>
         <div class="cloud-panel__body" id="cloud-panel-body" role={tabs ? "tabpanel" : undefined}>
+          {hasConsent && (
+            // The shell asks, not the provider: the question sits above the provider page, which loads without context.
+            <NoticeCard
+              class="cloud-panel__consent"
+              tone="neutral"
+              data-cloud-panel-consent=""
+              role="region"
+              tabindex="-1"
+              aria-labelledby="cloud-panel-consent-title"
+              title={
+                <span id="cloud-panel-consent-title" data-cloud-panel-consent-title="">
+                  {t.panelConsentTitle({ app: provider.appName })}
+                </span>
+              }
+              detail={<span data-cloud-panel-consent-body="">{t.panelConsentBody({ app: provider.appName })}</span>}
+            >
+              <div class="cloud-panel__consent-actions">
+                <Button size="sm" variant="primary" data-cloud-panel-consent-answer="allow">
+                  {t.panelConsentAllow}
+                </Button>
+                <Button size="sm" variant="secondary" data-cloud-panel-consent-answer="deny">
+                  {t.panelConsentDeny}
+                </Button>
+              </div>
+              {/* A failed save reports in this reserved line, so the question never grows. */}
+              <p class="cloud-panel__consent-error" data-cloud-panel-consent-error="" role="status" />
+            </NoticeCard>
+          )}
           <div class="cloud-panel__skeleton" aria-hidden="true">
             <span />
             <span />
@@ -76,7 +126,7 @@ export default function PanelSlot(props: { panel: NonNullable<ShellData["panel"]
           {props.state.open && (
             <iframe
               class="cloud-panel__frame"
-              src={provider.href}
+              src={withPanelContext(provider.href, allowed ? props.panel.context : null)}
               title={provider.label}
               loading="lazy"
               data-cloud-panel-frame={provider.id}

package/src/ssr/ShellRuntime.island.tsx

@@ -13,7 +13,7 @@ import { appWorkspaceCookieName, readAppWorkspaceLayoutCookie } from "../_intern
 import { registerContextAwareCommand } from "../browser/command-bridge";
 import { attachCommandShortcuts } from "../browser/command-shortcuts";
 import { navigationSearchItems } from "../browser/navigation-search";
-import type { PanelRequest } from "../browser/panel";
+import { openPanel, type PanelRequest } from "../browser/panel";
 import { importOnDemand } from "../browser/reload";
 import { registerGlobalSearchHost } from "../browser/search-bridge";
 import { attachShellFocusControls, readShellFocus, SHELL_FOCUS_CHANGE_EVENT, toggleShellFocus } from "../browser/shell-focus";
@@ -111,12 +111,18 @@ export default function ShellRuntime(props: ShellRuntimeProps) {
         event.preventDefault();
         togglePanel();
       };
+      // The panel controller loads lazily; it reads this mark to recheck consent after a restore it did not see.
+      const restored = (event: PageTransitionEvent) => {
+        if (event.persisted) document.documentElement.setAttribute("data-cloud-page-restored", "");
+      };
+      window.addEventListener("pageshow", restored);
       window.addEventListener("cloud.panel.request", request);
       if (!props.commands) window.addEventListener("keydown", key);
       if (document.querySelector('.cloud-app-canvas[data-panel="open"]')) void load();
       onCleanup(() => {
         stopped = true;
         dispose?.();
+        window.removeEventListener("pageshow", restored);
         window.removeEventListener("cloud.panel.request", request);
         window.removeEventListener("keydown", key);
       });
@@ -209,7 +215,10 @@ export default function ShellRuntime(props: ShellRuntimeProps) {
                 : command.id === "cloud.search"
                   ? { search: {} }
                   : // Returning the load keeps the Command busy until the dialog is open; a second press opens no second dialog.
-                    () => importOnDemand(() => import("./LayoutHelp")).then((help) => help?.openLayoutHelpDialog()),
+                    () => {
+                      if (openPanel("core")) return;
+                      return importOnDemand(() => import("./LayoutHelp")).then((help) => help?.openLayoutHelpDialog());
+                    },
           }),
         );
       }

package/src/ssr/app-color.ts

@@ -8,8 +8,9 @@ const fillShares = {
 
 /**
  * Opaque theme backgrounds checked for readable app ink; a test pins them to
- * tokens.css and @k2b/ui. `sidebar` is the workspace sidebar
- * (`--k2b-surface-muted`) and `sidebarHover` its row hover over it; `subtle`,
+ * tokens.css and @k2b/ui. `sidebar` is the workspace sidebar's own background
+ * (`--k2b-surface` since the one-surface workspace); a test reads that
+ * declaration from @k2b/ui. `sidebarHover` is its row hover over it; `subtle`,
  * `muted`, `hover`, and `platformSelected` are the `--ui-surface-subtle`,
  * `--ui-surface-muted`, `--ui-hover`, and blue `--ui-selected` fills app ink
  * also sits on.
@@ -18,8 +19,8 @@ export const appColorSurfaces = {
   light: {
     canvas: "#fafafa",
     surface: "#ffffff",
-    sidebar: "#f4f4f5",
-    sidebarHover: "#e8e8e9",
+    sidebar: "#ffffff",
+    sidebarHover: "#f3f3f3",
     subtle: "#f8f8f8",
     muted: "#f3f4f3",
     raised: "#ffffff",
@@ -29,8 +30,8 @@ export const appColorSurfaces = {
   dark: {
     canvas: "#090d12",
     surface: "#11151b",
-    sidebar: "#20242a",
-    sidebarHover: "#2b2f34",
+    sidebar: "#11151b",
+    sidebarHover: "#1d2026",
     subtle: "#161a20",
     muted: "#20242a",
     raised: "#181d24",
@@ -72,13 +73,17 @@ export const mixHex = (a: HexColor, b: HexColor, share: number): HexColor => {
     .join("")}`;
 };
 
-/** Derive selection fills and the nearest AA-readable app ink in each theme. */
+/** Derive selection fills, the shell's open-app fill, and the nearest AA-readable app ink in each theme. */
 export const appColors = (accent: HexColor) => {
   const forTheme = (theme: keyof typeof appColorSurfaces) => {
     const surfaces = appColorSurfaces[theme];
     const selected = mixHex(accent, surfaces.surface, fillShares[theme].selected);
     const selectedNav = mixHex(accent, surfaces.sidebar, fillShares[theme].selectedNav);
-    const backgrounds = [...Object.values(surfaces), selected, selectedNav];
+    // Cloud's shell marks the open app on its app-colored bar (global.css):
+    // with the surface in light, and in dark with the navigation share over the
+    // muted surface, which stays apart from the dark bar.
+    const shellSelected = theme === "light" ? surfaces.surface : mixHex(accent, surfaces.muted, fillShares.dark.selectedNav);
+    const backgrounds = [...Object.values(surfaces), selected, selectedNav, shellSelected];
     const toward = theme === "light" ? "#000000" : "#ffffff";
     let ink: HexColor = toward;
     for (let i = 100; i >= 0; i--) {
@@ -88,7 +93,7 @@ export const appColors = (accent: HexColor) => {
         break;
       }
     }
-    return { ink, selected, selectedNav };
+    return { ink, selected, selectedNav, shellSelected };
   };
   return { light: forTheme("light"), dark: forTheme("dark") };
 };

package/src/ssr/app-navigation.ts

@@ -1,6 +1,7 @@
 import { isOwnAppPath } from "../_internal/app-path";
 import { hasAnyAppRole } from "../_internal/app-roles";
 import type { RuntimeAppMeta } from "../contracts/app";
+import { panelProviderNeedsConsent } from "../contracts/panel-context-plain";
 import { isPwaPartId } from "../contracts/pwa-paths";
 import type { User } from "../contracts/shared";
 import { resolveAppPresentation } from "../shared/app-presentation";
@@ -54,7 +55,7 @@ export const visiblePwaParts = (apps: readonly RuntimeAppMeta[], user: User | un
     .sort((a, b) => a.name.localeCompare(b.name, locale) || a.id.localeCompare(b.id));
 };
 
-export type PanelProvider = { id: string; label: string; icon: string; href: string };
+export type PanelProvider = { id: string; label: string; icon: string; href: string; appName: string; consent: boolean };
 
 /** Authorized presentation only: the panel route still authorizes every request. */
 export const visiblePanelProviders = (apps: readonly RuntimeAppMeta[], user: User | undefined, locale: string): PanelProvider[] => {
@@ -62,8 +63,20 @@ export const visiblePanelProviders = (apps: readonly RuntimeAppMeta[], user: Use
   return apps
     .flatMap((app) => {
       if (!app.panel || !isOwnAppPath(app.panel.href, app.routes) || !hasAnyAppRole(user, app.panel.requiresRoles)) return [];
-      const panel = resolveAppPresentation(app, locale).panel;
-      return panel ? [{ id: app.id, label: panel.label, icon: panel.icon, href: panel.href }] : [];
+      const presentation = resolveAppPresentation(app, locale);
+      const panel = presentation.panel;
+      return panel
+        ? [
+            {
+              id: app.id,
+              label: panel.label,
+              icon: panel.icon,
+              href: panel.href,
+              appName: presentation.name,
+              consent: panelProviderNeedsConsent(app.id),
+            },
+          ]
+        : [];
     })
     .sort((a, b) => a.label.localeCompare(b.label, locale) || a.id.localeCompare(b.id));
 };

package/src/ssr/compact-shell.browser-harness.ts

@@ -116,30 +116,38 @@ const workspace = (selected: string) =>
  * A task-list page: a long list in Main and an open detail that the server renders with its own close
  * control, as Contacts and Capabilities do. Invented content.
  */
-const listWorkspace = () =>
+const listWorkspace = (head = false) =>
   createComponent(AppWorkspace, {
     class: "min-h-0 flex-1",
     get children() {
-      return createComponent(AppWorkspace.Content, {
-        get children() {
-          return [
-            createComponent(AppWorkspace.Main, {
-              get children() {
-                return Array.from({ length: 80 }, (_, index) =>
-                  createComponent(Button, { class: "list-row", align: "start", children: `Task ${index + 1}` }),
-                );
-              },
-            }),
-            createComponent(AppWorkspace.Detail, {
-              id: "task-detail",
-              open: true,
-              get children() {
-                return createComponent(Button, { "data-workspace-detail-close": "", children: "Close task" });
-              },
-            }),
-          ];
-        },
-      });
+      return [
+        head ? createComponent(AppWorkspace.Head, { primary: { label: "New task", icon: "ti ti-plus", href: "?new=task" } }) : null,
+        createComponent(AppWorkspace.Content, {
+          get children() {
+            return [
+              createComponent(AppWorkspace.Main, {
+                get children() {
+                  return Array.from({ length: 80 }, (_, index) =>
+                    createComponent(Button, {
+                      variant: head ? "ghost" : undefined,
+                      class: "list-row",
+                      align: "start",
+                      children: `Task ${index + 1}`,
+                    }),
+                  );
+                },
+              }),
+              createComponent(AppWorkspace.Detail, {
+                id: "task-detail",
+                open: true,
+                get children() {
+                  return createComponent(Button, { "data-workspace-detail-close": "", children: "Close task" });
+                },
+              }),
+            ];
+          },
+        }),
+      ];
     },
   });
 
@@ -270,7 +278,7 @@ const server = new Hono()
             fullPage: list === "page",
             title: [{ title: "Home", href: "/" }, { title: "Tasks" }],
             get children() {
-              return listWorkspace();
+              return listWorkspace(c.req.query("head") === "1");
             },
           });
       return () =>

package/src/ssr/dialog-app-colors.browser-harness.tsx

@@ -0,0 +1,43 @@
+import { DataTable, prompts, SettingsModal } from "@k2b/ui";
+import { render } from "solid-js/web";
+
+const host = document.createElement("div");
+document.querySelector(".cloud-app-canvas")!.append(host);
+
+const SelectedTable = () => (
+  <DataTable
+    rows={[{ id: "selected", name: "Selected file" }]}
+    columns={[{ id: "name", header: "Name", value: "name" }]}
+    getRowId={(row) => row.id}
+    selectedRowId="selected"
+    surface="plain"
+  />
+);
+
+render(
+  () => (
+    <button
+      type="button"
+      onClick={() =>
+        void prompts.dialog<void>(
+          (close) => (
+            <div class="dialog-fixed-frame flex min-h-0 flex-col overflow-hidden">
+              <SettingsModal title="App settings" onClose={() => close()}>
+                <SettingsModal.Tab id="general" title="General">
+                  <SelectedTable />
+                </SettingsModal.Tab>
+                <SettingsModal.Tab id="files" title="Files">
+                  <SelectedTable />
+                </SettingsModal.Tab>
+              </SettingsModal>
+            </div>
+          ),
+          { surface: "bare", header: false, size: "large" },
+        )
+      }
+    >
+      Open app settings
+    </button>
+  ),
+  host,
+);

package/src/ssr/help-messages.ts

@@ -20,6 +20,8 @@ export const helpMessages = i18n.define({
       shortcutsInApp: ({ app }: { app: string }) => `In ${app}`,
       shortcutsInThisApp: "In this app",
       shortcutsWithSelection: "With a selection",
+      helpNotAvailable: "This Help is not available",
+      helpNotAvailableDetail: "You may not have access to it, or it no longer exists.",
       noArticles: "No Help articles here yet",
       reload: "Reload",
       noArticlesDetail: "This app has not published Help yet.",
@@ -79,6 +81,8 @@ export const helpMessages = i18n.define({
       shortcutsInApp: ({ app }) => `In ${app}`,
       shortcutsInThisApp: "In dieser App",
       shortcutsWithSelection: "Mit Auswahl",
+      helpNotAvailable: "Diese Hilfe ist nicht verfügbar",
+      helpNotAvailableDetail: "Vielleicht hast du keinen Zugriff, oder es gibt sie nicht mehr.",
       noArticles: "Hier gibt es noch keine Hilfeartikel",
       reload: "Neu laden",
       noArticlesDetail: "Diese App hat noch keine Hilfe veröffentlicht.",