@k2b/cloud 0.6.0 → 0.8.0

package/src/ssr/LayoutHeader.tsx

@@ -1,16 +1,18 @@
 import { ButtonLink } from "@k2b/ui";
+import type { NavigationSearchItem } from "../browser/navigation-search";
 import type { CloudTheme } from "../shared/theme";
 import AppLaunchpad, { type AppLaunchpadApp } from "./AppLaunchpad.island";
 import type { GlobalSearchHelpApp } from "./GlobalSearchHelpDialog";
 import GlobalSearchTrigger from "./GlobalSearchTrigger.island";
-import HotkeysHelpRail from "./HotkeysHelpRail.island";
 import LayoutBreadcrumbs from "./LayoutBreadcrumbs.island";
-import type { LayoutBreadcrumb } from "./layout-runtime";
+import LayoutHelpTrigger from "./LayoutHelpTrigger.island";
 import LayoutPreferences from "./LayoutPreferences.island";
+import type { LayoutBreadcrumb } from "./layout-runtime";
 import ProfilePreferences from "./ProfilePreferences.island";
 
 type LayoutHeaderProps = {
   accent?: string;
+  appLabel?: string;
   authenticated: boolean;
   breadcrumbs: LayoutBreadcrumb[];
   homeLabel: string;
@@ -20,6 +22,7 @@ type LayoutHeaderProps = {
   profileAvatarSrc?: string;
   profileName: string;
   searchHelpApps: GlobalSearchHelpApp[];
+  searchLinks?: NavigationSearchItem[];
   signInLabel: string;
   theme: CloudTheme;
 };
@@ -27,7 +30,7 @@ type LayoutHeaderProps = {
 export default function LayoutHeader(props: LayoutHeaderProps) {
   return (
     <header
-      class="layout-header paper flex min-h-[2.875rem] shrink-0 items-center justify-between px-2 py-1.5 md:px-3 md:py-2"
+      class="layout-header paper flex min-h-[2.875rem] shrink-0 items-center justify-between px-2 py-1.5 lg:px-3 lg:py-2"
       style="box-shadow: var(--ui-shadow-surface)"
     >
       <div class="flex min-w-0 items-center gap-2">
@@ -35,39 +38,68 @@ export default function LayoutHeader(props: LayoutHeaderProps) {
           href="/"
           class={
             props.authenticated
-              ? "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-dimmed transition-colors hover:bg-zinc-100 hover:text-secondary md:hidden dark:hover:bg-zinc-800"
+              ? "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-dimmed transition-colors hover:bg-zinc-100 hover:text-secondary lg:hidden dark:hover:bg-zinc-800"
               : "flex shrink-0 items-center"
           }
           aria-label={props.homeLabel}
         >
           <img src="/branding/logo" alt="" class={props.authenticated ? "h-4 w-4" : "h-6 w-6"} />
         </a>
-        <div class="hidden min-w-0 items-center md:flex">
+        <div class="hidden min-w-0 items-center lg:flex">
           <LayoutBreadcrumbs breadcrumbs={props.breadcrumbs} />
         </div>
-        <div class="flex min-w-0 items-center md:hidden">
-          <LayoutBreadcrumbs breadcrumbs={props.breadcrumbs} mobile />
+        <div class="flex min-w-0 items-center lg:hidden">
+          <span class="truncate font-semibold">{props.appLabel ?? props.breadcrumbs.at(-1)?.title}</span>
         </div>
       </div>
       <div class="flex shrink-0 items-center gap-1">
-        <div class="flex items-center gap-1 md:hidden">
-          <HotkeysHelpRail
+        <div class="flex items-center gap-1 lg:hidden">
+          <LayoutHelpTrigger
             variant="header"
-            registerHotkey={!props.authenticated}
+            registerCommand={!props.authenticated}
             searchHelpApps={props.searchHelpApps}
             accent={props.accent}
           />
-          {props.authenticated && <GlobalSearchTrigger variant="header" registerHotkey searchHelpApps={props.searchHelpApps} />}
+          <GlobalSearchTrigger
+            variant={props.authenticated ? "header" : "host"}
+            registerCommand
+            searchLinks={props.searchLinks}
+            searchResources={props.authenticated}
+          />
         </div>
         {props.authenticated ? (
           <>
-            <div class="md:hidden">
-              <AppLaunchpad apps={props.launchpadApps} legalLinks={props.legalLinks} variant="header" label={props.openAppsLabel} />
+            <div class="lg:hidden">
+              <AppLaunchpad
+                profile={props.authenticated ? { name: props.profileName, theme: props.theme } : undefined}
+                apps={props.launchpadApps}
+                legalLinks={props.legalLinks}
+                variant="header"
+                label={props.openAppsLabel}
+              />
+            </div>
+            <div class="hidden lg:block">
+              <ProfilePreferences
+                avatarSrc={props.profileAvatarSrc}
+                initialTheme={props.theme}
+                name={props.profileName}
+                placement="header"
+              />
             </div>
-            <ProfilePreferences avatarSrc={props.profileAvatarSrc} initialTheme={props.theme} name={props.profileName} placement="header" />
           </>
         ) : (
           <>
+            {props.appLabel && (
+              <div class="lg:hidden">
+                <AppLaunchpad
+                  profile={props.authenticated ? { name: props.profileName, theme: props.theme } : undefined}
+                  apps={props.launchpadApps}
+                  legalLinks={props.legalLinks}
+                  variant="header"
+                  label={props.openAppsLabel}
+                />
+              </div>
+            )}
             <LayoutPreferences initialTheme={props.theme} position="bottom-left" />
             <ButtonLink href="/auth/login" size="sm" variant="primary">
               <i class="ti ti-login" aria-hidden="true" />

package/src/ssr/LayoutHelp.tsx

@@ -1,12 +1,14 @@
-import { clipboard, hotkeys } from "@k2b/stdlib/solid";
-import { Button, IconButton, IconButtonLink, MarkdownView, NoticeCard, Placeholder, prompts, ScrollArea, useLocale } from "@k2b/ui";
 import type { HelpDocumentManifest, HelpDocumentPayload, HelpSearchPayload } from "@k2b/cloud/shared";
+import { clipboard } from "@k2b/stdlib/solid";
+import { Button, IconButton, IconButtonLink, MarkdownView, NoticeCard, Placeholder, prompts, ScrollArea, useLocale } from "@k2b/ui";
 import { createEffect, createMemo, createSignal, For, type JSX, onCleanup, onMount, Show } from "solid-js";
+import { COMMANDS_CHANGED, contextCommandsWithShortcuts, shortcutLabel } from "../browser/command-shortcuts";
 import { appAccentStyle } from "./app-appearance";
 import { type GlobalSearchHelpApp, openGlobalSearchHelpDialog } from "./GlobalSearchHelpDialog";
 import { helpMessages } from "./help-messages";
 import { formatHelpBundleMarkdown, formatHelpDocumentMarkdown } from "./layout-help-markdown";
 import { adjacentHelpDocuments, focusHelpArticleHeading, resetHelpArticleScroll } from "./layout-help-navigation";
+import { searchHelpTopics } from "./layout-help-search";
 import { layoutHelpTopicHref } from "./layout-help-url";
 
 type HelpTopicBase = {
@@ -106,7 +108,13 @@ export function LayoutHelpDocuments(props: LayoutHelpDocumentsProps) {
 const Shortcuts = (props: { openSearchHelp: () => void }) => {
   const locale = useLocale();
   const t = () => helpMessages.resolve([locale()]).t;
-  const entries = createMemo(() => [...hotkeys.entries()].sort((a, b) => a.label.localeCompare(b.label) || a.keys.localeCompare(b.keys)));
+  const [commands, setCommands] = createSignal(contextCommandsWithShortcuts());
+  onMount(() => {
+    const update = () => setCommands(contextCommandsWithShortcuts());
+    window.addEventListener(COMMANDS_CHANGED, update);
+    onCleanup(() => window.removeEventListener(COMMANDS_CHANGED, update));
+  });
+  const entries = createMemo(() => commands().filter((command) => command.shortcut));
   return (
     <div class="flex flex-col gap-3">
       <p class="text-sm leading-relaxed text-dimmed">{t().shortcutsIntro}</p>
@@ -118,20 +126,14 @@ const Shortcuts = (props: { openSearchHelp: () => void }) => {
           {(entry) => (
             <div class="flex items-start justify-between gap-4 rounded-[var(--ui-radius-surface)] bg-[var(--ui-surface-subtle)] px-3 py-2.5">
               <div class="min-w-0">
-                <p class="text-sm font-medium text-primary">{entry.label}</p>
-                <Show when={entry.desc}>
-                  <p class="mt-0.5 text-xs text-dimmed">{entry.desc}</p>
+                <p class="text-sm font-medium text-primary">{entry.title}</p>
+                <Show when={entry.description}>
+                  <p class="mt-0.5 text-xs text-dimmed">{entry.description}</p>
                 </Show>
               </div>
-              <div class="flex shrink-0 gap-1" role="group" aria-label={entry.keysPretty.map((part) => part.ariaLabel).join(" + ")}>
-                <For each={entry.keysPretty}>
-                  {(part) => (
-                    <kbd class="rounded bg-[var(--ui-surface-raised)] px-1.5 py-1 text-[11px] ring-1 ring-black/10 dark:ring-white/10">
-                      {part.key}
-                    </kbd>
-                  )}
-                </For>
-              </div>
+              <kbd class="shrink-0 rounded bg-[var(--ui-surface-raised)] px-1.5 py-1 text-[11px] ring-1 ring-black/10 dark:ring-white/10">
+                {shortcutLabel(entry.shortcut!)}
+              </kbd>
             </div>
           )}
         </For>
@@ -161,7 +163,7 @@ const HelpShell = (props: {
   const [loading, setLoading] = createSignal(props.session.view === "article");
   const [loadError, setLoadError] = createSignal<string | null>(null);
   const [loadAttempt, setLoadAttempt] = createSignal(0);
-  const [remoteMatches, setRemoteMatches] = createSignal<ReadonlySet<string>>(new Set());
+  const [remoteIds, setRemoteIds] = createSignal<readonly string[] | null>(null);
   const [searching, setSearching] = createSignal(false);
   const [copyingAll, setCopyingAll] = createSignal(false);
   const [copyAllError, setCopyAllError] = createSignal<string | null>(null);
@@ -234,10 +236,7 @@ const HelpShell = (props: {
   const results = createMemo(() => {
     const value = normalizedQuery();
     if (!value) return topics();
-    const matches = remoteMatches();
-    return topics().filter(
-      (topic) => [topic.title, topic.description].some((part) => part?.toLocaleLowerCase().includes(value)) || matches.has(topic.id),
-    );
+    return searchHelpTopics(topics(), value, remoteIds());
   });
 
   createEffect(() => {
@@ -250,7 +249,7 @@ const HelpShell = (props: {
       ),
     ];
     const version = ++searchVersion;
-    setRemoteMatches(new Set<string>());
+    setRemoteIds(null);
     setSearching(false);
     if (!value || urls.length === 0) return;
 
@@ -269,7 +268,7 @@ const HelpShell = (props: {
         }),
       )
         .then((groups) => {
-          if (version === searchVersion) setRemoteMatches(new Set<string>(groups.flat()));
+          if (version === searchVersion) setRemoteIds([...new Set(groups.flat())]);
         })
         .catch((error) => {
           if (error instanceof DOMException && error.name === "AbortError") return;
@@ -445,7 +444,7 @@ const HelpShell = (props: {
   };
   const showHub = () => {
     setQuery("");
-    setRemoteMatches(new Set<string>());
+    setRemoteIds(null);
     setView("hub");
   };
   const modalTitle = createMemo(() => {

package/src/ssr/{HotkeysHelpRail.island.tsx → LayoutHelpTrigger.island.tsx}

@@ -1,19 +1,20 @@
-import { hotkeys } from "@k2b/stdlib/solid";
 import { IconButton, Tooltip, useLocale } from "@k2b/ui";
+import { createEffect, onCleanup } from "solid-js";
+import { registerContextAwareCommand } from "../browser/commands";
 import type { GlobalSearchHelpApp } from "./GlobalSearchHelpDialog";
 import { openLayoutHelpDialog } from "./LayoutHelp";
 import { platformMessages } from "./platform-messages";
 
-type HotkeysHelpTriggerProps = {
+type LayoutHelpTriggerProps = {
   variant: "header" | "rail";
   class?: string;
-  registerHotkey?: boolean;
+  registerCommand?: boolean;
   searchHelpApps?: GlobalSearchHelpApp[];
   accent?: string;
 };
 
 /** Opens end-user help from either the desktop rail or the compact header. */
-export default function HotkeysHelpRail(props: HotkeysHelpTriggerProps) {
+export default function LayoutHelpTrigger(props: LayoutHelpTriggerProps) {
   const locale = useLocale();
   const t = () => platformMessages.resolve([locale()]).t;
   const searchHelpApps = props.searchHelpApps ?? [];
@@ -22,14 +23,19 @@ export default function HotkeysHelpRail(props: HotkeysHelpTriggerProps) {
     openLayoutHelpDialog(searchHelpApps, props.accent);
   };
 
-  if (props.registerHotkey) {
-    hotkeys.create(() => ({
-      "shift+/": {
-        label: t().openShortcutHelp,
-        desc: t().shortcutHelpDescription,
-        run: openHelp,
-      },
-    }));
+  if (props.registerCommand) {
+    createEffect(() =>
+      onCleanup(
+        registerContextAwareCommand({
+          id: "cloud.help",
+          title: t().openShortcutHelp,
+          description: t().shortcutHelpDescription,
+          icon: "ti ti-help-circle",
+          shortcut: "shift+/",
+          action: openHelp,
+        }),
+      ),
+    );
   }
 
   if (props.variant === "rail")

package/src/ssr/LayoutRail.tsx

@@ -1,9 +1,10 @@
-import type { RailPreferences } from "../contracts/rail-preferences";
+import type { NavigationSearchItem } from "../browser/navigation-search";
+import type { RailSnapshot } from "../contracts/rail-preferences";
 import type { CloudTheme } from "../shared/theme";
 import AppLaunchpad, { type AppLaunchpadApp } from "./AppLaunchpad.island";
 import type { GlobalSearchHelpApp } from "./GlobalSearchHelpDialog";
 import GlobalSearchTrigger from "./GlobalSearchTrigger.island";
-import HotkeysHelpRail from "./HotkeysHelpRail.island";
+import LayoutHelpTrigger from "./LayoutHelpTrigger.island";
 import ProfilePreferences from "./ProfilePreferences.island";
 import RailApps from "./RailApps.island";
 import type { RailApp } from "./rail-navigation";
@@ -17,11 +18,12 @@ type LayoutRailProps = {
   legalLinks: Array<{ label: string; href: string; icon?: string }>;
   openAppsLabel: string;
   apps: RailApp[];
-  railSettings: RailPreferences;
+  railSettings: RailSnapshot;
   currentUrl: string;
   profileAvatarSrc?: string;
   profileName: string;
   searchHelpApps: GlobalSearchHelpApp[];
+  searchLinks?: NavigationSearchItem[];
   theme: CloudTheme;
 };
 
@@ -30,14 +32,14 @@ const jsonScript = (value: unknown): string => JSON.stringify(value).replace(/</
 export default function LayoutRail(props: LayoutRailProps) {
   return (
     <>
-      <AppLaunchpad apps={props.launchpadApps} legalLinks={props.legalLinks} />
+      <AppLaunchpad profile={{ name: props.profileName, theme: props.theme }} apps={props.launchpadApps} legalLinks={props.legalLinks} />
       <script id="cloud-app-launchpad-data" type="application/json">
-        {jsonScript({ apps: props.launchpadApps, legalLinks: props.legalLinks })}
+        {jsonScript({ apps: props.launchpadApps, legalLinks: props.legalLinks, profile: { name: props.profileName, theme: props.theme } })}
       </script>
       <script id="cloud-rail-data" type="application/json">
         {jsonScript({ apps: props.apps, settings: props.railSettings })}
       </script>
-      <aside class="layout-rail hidden w-10 shrink-0 flex-col md:flex">
+      <aside class="layout-rail hidden w-10 shrink-0 flex-col lg:flex">
         <div class="layout-rail-logo flex h-[2.875rem] shrink-0 items-center justify-center">
           <a href="/" aria-label={props.homeLabel}>
             <img src="/branding/logo" alt="Logo" class="h-5 w-5" />
@@ -45,10 +47,16 @@ export default function LayoutRail(props: LayoutRailProps) {
         </div>
         <nav class="layout-rail-navigation flex min-h-0 flex-1 flex-col items-center gap-1" aria-label={props.appsLabel}>
           <RailApps apps={props.apps} settings={props.railSettings} currentUrl={props.currentUrl} />
-          <AppLaunchpad apps={props.launchpadApps} legalLinks={props.legalLinks} variant="rail" label={props.openAppsLabel} />
+          <AppLaunchpad
+            profile={{ name: props.profileName, theme: props.theme }}
+            apps={props.launchpadApps}
+            legalLinks={props.legalLinks}
+            variant="rail"
+            label={props.openAppsLabel}
+          />
           <div class="mt-auto shrink-0 flex flex-col items-center gap-1">
-            <GlobalSearchTrigger variant="rail" searchHelpApps={props.searchHelpApps} />
-            <HotkeysHelpRail variant="rail" registerHotkey searchHelpApps={props.searchHelpApps} accent={props.accent} />
+            <GlobalSearchTrigger variant="rail" searchLinks={props.searchLinks} />
+            <LayoutHelpTrigger variant="rail" registerCommand searchHelpApps={props.searchHelpApps} accent={props.accent} />
             <ProfilePreferences avatarSrc={props.profileAvatarSrc} initialTheme={props.theme} name={props.profileName} placement="rail" />
           </div>
         </nav>

package/src/ssr/MinimalLayout.tsx

@@ -2,8 +2,8 @@ import { LocaleProvider } from "@k2b/ui";
 import type { JSX } from "solid-js/jsx-runtime";
 import { getLocale } from "../server/locale";
 import { readThemeFromCookieHeader } from "../shared/theme";
-import type { MinimalLayoutContext } from "./layout-context";
 import LayoutPreferences from "./LayoutPreferences.island";
+import type { MinimalLayoutContext } from "./layout-context";
 import TimezoneCookie from "./TimezoneCookie.island";
 
 export type MinimalLayoutPreferencePosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";

package/src/ssr/MobileNavigation.tsx

@@ -0,0 +1,71 @@
+import { BottomSheet, Navigation, SegmentedControl, useLocale } from "@k2b/ui";
+import { createSignal, onCleanup, Show } from "solid-js";
+import { type AppLaunchpadContext, AppLaunchpadPanel } from "./AppLaunchpadPanel";
+import { openMobileMenu } from "./mobile-menu-history";
+import { platformMessages } from "./platform-messages";
+import { observeWorkspaceNavigation, readWorkspaceNavigation } from "./workspace-navigation";
+
+export function openCloudMobileMenu(apps: AppLaunchpadContext) {
+  return openMobileMenu((beforeSelect) => (close, context) => (
+    <MobileNavigation apps={apps} beforeSelect={beforeSelect} close={close} dismiss={context.requestDismiss} />
+  ));
+}
+
+function MobileNavigation(props: {
+  apps: AppLaunchpadContext;
+  beforeSelect: () => Promise<boolean>;
+  close: () => void;
+  dismiss: () => Promise<void>;
+}) {
+  const locale = useLocale();
+  const t = () => platformMessages.resolve([locale()]).t;
+  const [workspace, setWorkspace] = createSignal(readWorkspaceNavigation());
+  const [tab, setTab] = createSignal<"app" | "apps">("app");
+  // A new wrapper signal version propagates in-place updates of the owner snapshot.
+  onCleanup(
+    observeWorkspaceNavigation(() =>
+      setWorkspace(() => {
+        const next = readWorkspaceNavigation();
+        return next ? { ...next } : undefined;
+      }),
+    ),
+  );
+  return (
+    <BottomSheet onDismiss={props.dismiss}>
+      <BottomSheet.Header
+        title={workspace()?.label || t().apps}
+        close={() => void props.dismiss()}
+        actions={
+          <Show when={workspace()} fallback={<span class="font-semibold">{t().allApps}</span>}>
+            <SegmentedControl
+              class="cloud-mobile-menu__switch"
+              size="md"
+              ariaLabel={t().navigation}
+              value={tab}
+              onValueChange={setTab}
+              options={[
+                { value: "app", label: workspace()?.label || t().appMenu },
+                { value: "apps", label: t().allApps },
+              ]}
+            />
+          </Show>
+        }
+      />
+      <BottomSheet.Body>
+        <Show
+          when={workspace() && tab() === "app"}
+          fallback={<AppLaunchpadPanel surface="sheet" {...props.apps} close={props.close} beforeSelect={props.beforeSelect} />}
+        >
+          <Navigation
+            navigation={workspace()!.navigation}
+            label={workspace()!.label || t().appMenu}
+            beforeSelect={async () => {
+              const owner = workspace()?.owner;
+              return (await props.beforeSelect()) && Boolean(owner?.isConnected && readWorkspaceNavigation()?.owner === owner);
+            }}
+          />
+        </Show>
+      </BottomSheet.Body>
+    </BottomSheet>
+  );
+}

package/src/ssr/MobileProfileActions.tsx

@@ -0,0 +1,49 @@
+import { documentNavigate } from "@k2b/ssr/nav";
+import { Button, ButtonLink } from "@k2b/ui";
+import type { CloudTheme } from "../shared/theme";
+import { createProfileActions } from "./profile-actions";
+
+export function MobileProfileActions(props: { profile: { name: string; theme: CloudTheme }; beforeSelect: () => Promise<boolean> }) {
+  const { preferences, signingOut, signOut } = createProfileActions(props.profile.theme);
+  return (
+    <section class="cloud-mobile-profile" aria-label={preferences.messages().menuLabel}>
+      <ButtonLink
+        href="/me"
+        variant="ghost"
+        onClick={(event) => {
+          if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+          event.preventDefault();
+          void props.beforeSelect().then((allowed) => {
+            if (allowed) documentNavigate("/me");
+          });
+        }}
+      >
+        <i class="ti ti-user-circle" aria-hidden="true" />
+        {preferences.messages().profileSettings}
+      </ButtonLink>
+      <Button variant="ghost" onClick={preferences.toggleTheme}>
+        <i class={`ti ${preferences.theme() === "light" ? "ti-moon" : "ti-sun-high"}`} aria-hidden="true" />
+        {preferences.themeLabel()}
+      </Button>
+      <Button
+        variant="ghost"
+        onClick={async () => {
+          if (await props.beforeSelect()) preferences.toggleLanguage();
+        }}
+      >
+        <i class="ti ti-language" aria-hidden="true" />
+        {preferences.languageLabel()}
+      </Button>
+      <Button
+        variant="ghost"
+        disabled={signingOut()}
+        onClick={async () => {
+          if (await props.beforeSelect()) await signOut();
+        }}
+      >
+        <i class="ti ti-logout" aria-hidden="true" />
+        {preferences.messages().signOut}
+      </Button>
+    </section>
+  );
+}

package/src/ssr/ProfilePreferences.island.tsx

@@ -1,9 +1,6 @@
-import { Avatar, Dropdown, type DropdownItem, toast, useLocale } from "@k2b/ui";
-import { createMemo, createSignal } from "solid-js";
-import { browserNotificationClient } from "../browser/notifications";
-import { apiClient } from "../clients/core";
+import { Avatar, Dropdown } from "@k2b/ui";
 import type { CloudTheme } from "../shared/theme";
-import { createPreferenceController } from "./preference-controller";
+import { createProfileActions } from "./profile-actions";
 
 type ProfilePreferencesProps = {
   avatarSrc?: string;
@@ -13,37 +10,7 @@ type ProfilePreferencesProps = {
 };
 
 export default function ProfilePreferences(props: ProfilePreferencesProps) {
-  const locale = useLocale();
-  const preferences = createPreferenceController(props.initialTheme, locale);
-  const [signingOut, setSigningOut] = createSignal(false);
-  const signOut = async () => {
-    if (signingOut()) return;
-    setSigningOut(true);
-    try {
-      await browserNotificationClient.disable().catch(() => undefined);
-      const response = await apiClient.auth.logout.$post();
-      if (!response.ok) throw new Error(preferences.messages().signOutFailed);
-      window.location.href = "/auth/login";
-    } catch {
-      toast.error(preferences.messages().signOutFailed);
-      setSigningOut(false);
-    }
-  };
-
-  const items = createMemo<DropdownItem[]>(() => [
-    ...preferences.items(),
-    {
-      href: "/me",
-      icon: "ti ti-user-circle",
-      label: preferences.messages().profileSettings,
-    },
-    {
-      action: signOut,
-      icon: "ti ti-logout",
-      label: preferences.messages().signOut,
-      disabled: signingOut(),
-    },
-  ]);
+  const { preferences, items, signOut, signingOut } = createProfileActions(props.initialTheme);
 
   const avatar = () => <Avatar name={props.name} src={props.avatarSrc} size="xs" />;
 

package/src/ssr/RailApps.island.tsx

@@ -1,6 +1,6 @@
 import { ScrollArea, Tooltip, useLocale } from "@k2b/ui";
 import { createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js";
-import type { RailPreferences } from "../contracts/rail-preferences";
+import type { RailSnapshot } from "../contracts/rail-preferences";
 import { appAccentStyle } from "./app-appearance";
 import { RAIL_PREFERENCES_EVENT, readRailContext } from "./rail-context";
 import { projectRailNavigation, type RailApp, type RailLink, railLinkActive } from "./rail-navigation";
@@ -26,7 +26,7 @@ function RailIcon(props: { link: RailLink; currentUrl: string }) {
   );
 }
 
-export default function RailApps(props: { apps: RailApp[]; settings: RailPreferences; currentUrl: string }) {
+export default function RailApps(props: { apps: RailApp[]; settings: RailSnapshot; currentUrl: string }) {
   const locale = useLocale();
   const [settings, setSettings] = createSignal(props.settings);
   const [currentUrl, setCurrentUrl] = createSignal(props.currentUrl);

package/src/ssr/RailEditor.tsx

@@ -19,7 +19,7 @@ import { coreClient } from "../clients/core";
 import { type RailPreferences, RailPreferencesSchema, type RailShortcut } from "../contracts/rail-preferences";
 import { publishRailPreferences, readRailContext } from "./rail-context";
 import { railMessages } from "./rail-messages";
-import { isRailAppVisible, type RailApp, sortRailApps } from "./rail-navigation";
+import { isRailAppVisible, projectRailNavigation, type RailApp, sortRailApps } from "./rail-navigation";
 
 export const readRailPreferences = async (signal: AbortSignal, message: string) => {
   const response = await coreClient.me.rail.$get({}, { init: { signal } });
@@ -35,7 +35,10 @@ function RailEditorForm(props: RailDialogProps & { initial: RailPreferences }) {
   const [settings, setSettings] = createSignal<RailPreferences>(structuredClone(props.initial));
   const valid = createMemo(() => RailPreferencesSchema.safeParse(settings()).success);
   const dirty = () => JSON.stringify(settings()) !== JSON.stringify(props.initial);
-  const pinned = () => new Set(settings().shortcuts.flatMap((entry) => (entry.kind === "app" ? [entry.appId] : [])));
+  const managedShortcuts = readRailContext()?.settings.managedShortcuts ?? [];
+  const managedLinks = () => projectRailNavigation(props.apps, { ...settings(), shortcuts: [], managedShortcuts }, locale()).shortcuts;
+  const pinned = () =>
+    new Set([...managedShortcuts, ...settings().shortcuts].flatMap((entry) => (entry.kind === "app" ? [entry.appId] : [])));
   const appOptions = () => props.apps.map((app) => ({ id: app.id, label: app.label, icon: app.iconClass }));
   const nextApp = () => props.apps.find((app) => !pinned().has(app.id));
   const updateShortcut = (index: number, next: RailShortcut) =>
@@ -77,6 +80,18 @@ function RailEditorForm(props: RailDialogProps & { initial: RailPreferences }) {
       />
       <PanelDialog.Body>
         <fieldset disabled={save.loading()} class="flex min-h-0 flex-col gap-4">
+          <Show when={managedLinks().length > 0}>
+            <PanelDialog.Section title={t().managed} icon="ti ti-building">
+              <For each={managedLinks()}>
+                {(link) => (
+                  <div class="flex items-center gap-2 text-sm">
+                    <i class={link.iconClass} aria-hidden="true" />
+                    <span>{link.label}</span>
+                  </div>
+                )}
+              </For>
+            </PanelDialog.Section>
+          </Show>
           <PanelDialog.Section title={t().apps} icon="ti ti-apps">
             <div
               style={{ display: "grid", "grid-template-columns": "repeat(auto-fit, minmax(min(100%, 13rem), 1fr))", gap: "0.75rem 1.5rem" }}

package/src/ssr/WorkspaceNavigation.island.tsx

@@ -0,0 +1,7 @@
+import { createNavigation, type NavigationItem } from "@k2b/ui";
+import WorkspaceNavigationProvider from "./WorkspaceNavigationProvider";
+
+/** SSR-first link navigation. Use provideWorkspaceNavigation for island-owned actions. */
+export default function WorkspaceNavigation(props: { items: readonly NavigationItem[]; label: string }) {
+  return <WorkspaceNavigationProvider navigation={createNavigation({ items: () => props.items })} label={props.label} />;
+}

package/src/ssr/WorkspaceNavigationProvider.tsx

@@ -0,0 +1,16 @@
+import type { NavigationController } from "@k2b/ui";
+import { provideWorkspaceNavigation } from "./workspace-navigation";
+
+/** Use within an existing app island when navigation includes local actions. */
+export default function WorkspaceNavigationProvider(props: { navigation: NavigationController; label: string }) {
+  let owner!: HTMLScriptElement;
+  provideWorkspaceNavigation(props.navigation, { label: () => props.label, owner: () => owner });
+  return (
+    <script
+      ref={owner}
+      type="application/json"
+      data-cloud-workspace-navigation
+      innerHTML={JSON.stringify({ label: props.label, items: props.navigation.items() }).replace(/</g, "\\u003c")}
+    />
+  );
+}

package/src/ssr/admin-navigation.ts

@@ -23,6 +23,7 @@ export const buildAdminGroups = (apps: readonly RuntimeContext["apps"][number][]
   const aiLinks: AdminLink[] = [
     { href: "/admin/settings?tab=ai-general", icon: "ti-adjustments", label: t.general },
     { href: "/admin/settings?tab=ai-providers", icon: "ti-sparkles", label: t.providers },
+    { href: "/admin/settings?tab=ai-quotas", icon: "ti-gauge", label: t.aiQuotas },
     { href: "/admin/settings?tab=ai-usage", icon: "ti-chart-histogram", label: t.aiUsage },
     { href: "/admin/settings?tab=ai-skills", icon: "ti-wand", label: t.skills },
     { href: "/admin/settings?tab=ai-projects", icon: "ti-folders", label: t.projects },
@@ -33,6 +34,7 @@ export const buildAdminGroups = (apps: readonly RuntimeContext["apps"][number][]
       app,
       groups: (app.adminNav ?? [])
         .map((group) => ({
+          section: group.section,
           label: group.label,
           links: group.links.flatMap((link) => {
             const href = normalizeAdminHref(link.href);
@@ -43,6 +45,10 @@ export const buildAdminGroups = (apps: readonly RuntimeContext["apps"][number][]
     }))
     .sort((a, b) => a.app.name.localeCompare(b.app.name));
 
+  aiLinks.push(
+    ...contributedApps.flatMap(({ groups }) => groups.filter((group) => group.section === "ai").flatMap((group) => group.links)),
+  );
+
   const appsWithGroups = new Set(contributedApps.filter(({ groups }) => groups.length > 0).map(({ app }) => app.id));
   const appLinks = apps
     .filter((app) => !appsWithGroups.has(app.id))
@@ -57,10 +63,14 @@ export const buildAdminGroups = (apps: readonly RuntimeContext["apps"][number][]
       label: t.general,
       links: [
         { href: "/admin", icon: "ti-dashboard", label: t.overview },
+        { href: "/admin/app-credentials", icon: "ti-key", label: t.appCredentials },
+        { href: "/admin/rail", icon: "ti-layout-sidebar", label: t.rail },
         { href: "/admin/announcements", icon: "ti-speakerphone", label: t.announcements },
       ],
     },
-    ...contributedApps.flatMap(({ groups }) => groups),
+    ...contributedApps.flatMap(({ groups }) =>
+      groups.filter((group) => group.section !== "ai").map(({ label, links }) => ({ label, links })),
+    ),
     {
       label: t.userManagement,
       links: [