@xenide-io/the-old-ui-theme 0.4.4 → 0.4.8

package/dist/suite.mjs

@@ -15,24 +15,32 @@ function TodayPageFrame({ children }) {
     "div",
     {
       "data-test": "today-page",
-      className: "today-page-frame relative flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden",
+      className: "today-page-frame relative flex min-h-0 w-full flex-1 flex-col overflow-x-hidden",
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "pointer-events-none absolute inset-x-0 top-0 h-[34rem] overflow-hidden",
+            className: "pointer-events-none absolute inset-0 overflow-hidden",
             "aria-hidden": true,
             children: [
               /* @__PURE__ */ jsx("div", { className: "today-page-frame__glow absolute inset-0" }),
-              /* @__PURE__ */ jsx("div", { className: "today-page-frame__sun absolute -right-16 -top-16 h-72 w-72 rounded-full bg-gradient-to-br from-amber-300/30 via-rose-300/20 to-rose-400/10 blur-3xl opacity-60 motion-safe:animate-[pulse_8s_ease-in-out_infinite] motion-reduce:opacity-40" }),
-              /* @__PURE__ */ jsx("div", { className: "today-page-frame__top-fade absolute inset-x-0 top-0 h-64" }),
-              /* @__PURE__ */ jsx("div", { className: "today-page-frame__cloud today-page-frame__cloud--1 absolute -left-24 top-28 h-80 w-[26rem] rounded-[45%]" }),
-              /* @__PURE__ */ jsx("div", { className: "today-page-frame__cloud today-page-frame__cloud--2 absolute -right-20 top-40 h-72 w-80 rounded-[40%]" }),
-              /* @__PURE__ */ jsx("div", { className: "today-page-frame__cloud today-page-frame__cloud--3 absolute left-[28%] top-[58%] h-64 w-[22rem] rounded-[50%]" })
+              /* @__PURE__ */ jsx("div", { className: "today-page-frame__top-fade absolute inset-x-0 top-0 h-[28rem]" }),
+              /* @__PURE__ */ jsx("div", { className: "today-page-frame__cloud today-page-frame__cloud--1 absolute -left-28 top-16 h-96 w-[30rem] rounded-[45%]" }),
+              /* @__PURE__ */ jsx("div", { className: "today-page-frame__cloud today-page-frame__cloud--2 absolute -right-24 top-24 h-80 w-[22rem] rounded-[40%]" }),
+              /* @__PURE__ */ jsx("div", { className: "today-page-frame__cloud today-page-frame__cloud--3 absolute left-[22%] top-48 h-72 w-[24rem] rounded-[50%]" }),
+              /* @__PURE__ */ jsx("div", { className: "today-page-frame__cloud today-page-frame__cloud--4 absolute right-[18%] top-[42%] h-64 w-[20rem] rounded-[48%]" }),
+              /* @__PURE__ */ jsx("div", { className: "today-page-frame__cloud today-page-frame__cloud--5 absolute left-[8%] top-[68%] h-56 w-[18rem] rounded-[42%]" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "relative flex-1 px-4 pb-5 pt-2 sm:px-6 sm:pb-6 sm:pt-3 lg:px-8 [&_.list-row]:min-h-[52px] [&_.list-row]:sm:min-h-[44px]", children })
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-width": "full",
+            className: "suite-page-stage suite-page-inset relative z-[1] flex w-full min-w-0 flex-1 flex-col [&_.list-row]:min-h-[52px] [&_.list-row]:sm:min-h-[44px]",
+            children
+          }
+        )
       ]
     }
   );
@@ -392,7 +400,7 @@ function SuiteIcon({
 }
 
 // src/suite/components/today-ui.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var APP_META = {
   shellstack: { name: "ShellStack" },
   tides: { name: "Tides" },
@@ -485,15 +493,15 @@ function AnimatedSun({ className }) {
           /* @__PURE__ */ jsx5("stop", { stopColor: "#f59e0b" }),
           /* @__PURE__ */ jsx5("stop", { offset: "1", stopColor: "#fb923c" })
         ] }) }),
-        /* @__PURE__ */ jsx5("g", { className: "origin-center motion-safe:animate-[spin_20s_linear_infinite] motion-reduce:animate-none", children: [0, 45, 90, 135, 180, 225, 270, 315].map((angle) => /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx5("g", { className: "origin-center opacity-80 motion-safe:animate-[pulse_8s_ease-in-out_infinite] motion-reduce:animate-none", children: [0, 45, 90, 135, 180, 225, 270, 315].map((angle) => /* @__PURE__ */ jsx5(
           "line",
           {
             x1: "20",
-            y1: "4",
+            y1: "5",
             x2: "20",
             y2: "9",
             stroke: "#fbbf24",
-            strokeWidth: "2",
+            strokeWidth: "1.75",
             strokeLinecap: "round",
             transform: `rotate(${angle} 20 20)`
           },
@@ -527,10 +535,9 @@ function AnimatedMoon({ className }) {
             fill: "url(#animatedMoonBody)"
           }
         ),
-        /* @__PURE__ */ jsxs5("g", { className: "motion-safe:animate-[pulse_4s_ease-in-out_infinite] motion-reduce:animate-none", children: [
-          /* @__PURE__ */ jsx5("circle", { cx: "29", cy: "10", r: "1.4", fill: "#c7d2fe" }),
-          /* @__PURE__ */ jsx5("circle", { cx: "34", cy: "16", r: "1", fill: "#c7d2fe" }),
-          /* @__PURE__ */ jsx5("circle", { cx: "25", cy: "5.5", r: "0.9", fill: "#c7d2fe" })
+        /* @__PURE__ */ jsxs5("g", { className: "opacity-70 motion-safe:animate-[pulse_10s_ease-in-out_infinite] motion-reduce:animate-none", children: [
+          /* @__PURE__ */ jsx5("circle", { cx: "29", cy: "10", r: "1.2", fill: "#c7d2fe" }),
+          /* @__PURE__ */ jsx5("circle", { cx: "34", cy: "16", r: "0.9", fill: "#c7d2fe" })
         ] })
       ]
     }
@@ -592,30 +599,193 @@ function getTodayGreeting(user, stats) {
   const overdueCount = (_d = stats == null ? void 0 : stats.overdueCount) != null ? _d : 0;
   const hours = (_e = stats == null ? void 0 : stats.hours) != null ? _e : 0;
   if (overdueCount > 0) {
-    return `${greeting}. You have ${taskCount} task${taskCount === 1 ? "" : "s"} due today, ${overdueCount} overdue.`;
+    return `${greeting}. ${taskCount} task${taskCount === 1 ? "" : "s"} due today, ${overdueCount} overdue.`;
   }
   if (taskCount > 0) {
-    return `${greeting}. You have ${taskCount} task${taskCount === 1 ? "" : "s"} due today.`;
+    return `${greeting}. ${taskCount} task${taskCount === 1 ? "" : "s"} due today.`;
   }
   if (hours > 0) {
-    return `${greeting}. You logged ${hours} hour${hours === 1 ? "" : "s"} today.`;
+    return `${greeting}. ${hours} hour${hours === 1 ? "" : "s"} logged today.`;
   }
   if (period === "evening" || period === "night") {
-    return `${greeting}. Time to wrap up.`;
+    return `${greeting}. Nice work \u2014 time to wrap up.`;
   }
-  return `${greeting}. Nothing overdue \u2014 take a nice, deep breath.`;
+  return `${greeting}. Clear queue \u2014 take a nice, deep breath.`;
 }
 function TodayHero({
-  message = "Take a nice, deep breath."
+  message = "Take a nice, deep breath.",
+  brief,
+  briefMeta
+}) {
+  return /* @__PURE__ */ jsxs5("div", { className: "mt-4 sm:mt-6", children: [
+    /* @__PURE__ */ jsx5(
+      "p",
+      {
+        className: "today-hero max-w-2xl font-display text-lg font-semibold tracking-tight text-ph-ink sm:text-xl sm:leading-snug",
+        children: message
+      },
+      typeof message === "string" ? message : "hero"
+    ),
+    brief ? /* @__PURE__ */ jsxs5("div", { className: "mt-4 max-w-2xl", "data-test": "today-focus-brief", children: [
+      /* @__PURE__ */ jsx5("p", { className: "text-[15px] leading-[1.65] text-ph-ink", children: brief }),
+      briefMeta ? /* @__PURE__ */ jsx5("p", { className: "mt-1.5 text-xs text-ph-mutedtext", children: briefMeta }) : null
+    ] }) : null
+  ] });
+}
+function TodayPrimaryAction({
+  label,
+  description,
+  icon,
+  accent = "neutral",
+  onClick,
+  href,
+  loading = false,
+  active = false,
+  className,
+  dataTest = "today-primary-action"
 }) {
-  return /* @__PURE__ */ jsx5("div", { className: "mt-8 text-center sm:mt-10", children: /* @__PURE__ */ jsx5(
-    "p",
+  const classes = cn(
+    "today-primary-action group relative flex w-full max-w-md items-center gap-3 overflow-hidden rounded-xl px-3.5 py-2.5 text-left transition sm:px-4 sm:py-3",
+    `today-primary-action--${accent}`,
+    active && "today-primary-action--active",
+    loading && "pointer-events-none opacity-70",
+    className
+  );
+  const body = /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("span", { className: "today-primary-action__icon inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg sm:h-10 sm:w-10", children: icon }),
+    /* @__PURE__ */ jsxs5("span", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx5("span", { className: "block text-sm font-semibold tracking-tight sm:text-base", children: label }),
+      description ? /* @__PURE__ */ jsx5("span", { className: "mt-0.5 block text-xs opacity-80 sm:text-sm", children: description }) : null
+    ] }),
+    /* @__PURE__ */ jsx5(
+      "span",
+      {
+        className: "today-primary-action__chevron shrink-0 text-base opacity-60 transition group-hover:translate-x-0.5 group-hover:opacity-100",
+        "aria-hidden": true,
+        children: "\u2192"
+      }
+    )
+  ] });
+  if (href && !onClick) {
+    return /* @__PURE__ */ jsx5(
+      "a",
+      {
+        href,
+        className: classes,
+        "data-test": dataTest,
+        "aria-busy": loading,
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx5(
+    "button",
     {
-      className: "today-hero font-display text-2xl font-bold tracking-tight text-ph-ink sm:text-[1.75rem] sm:leading-tight",
-      children: message
-    },
-    typeof message === "string" ? message : "hero"
-  ) });
+      type: "button",
+      onClick,
+      disabled: loading,
+      className: classes,
+      "data-test": dataTest,
+      "aria-busy": loading,
+      children: body
+    }
+  );
+}
+function TodayEmptyAction({
+  title,
+  description,
+  actionLabel,
+  href,
+  onClick,
+  dataTest
+}) {
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: "rounded-lg border border-dashed border-ph-border/80 bg-ph-muted/30 px-4 py-4 text-center",
+      "data-test": dataTest,
+      children: [
+        /* @__PURE__ */ jsx5("p", { className: "text-sm font-semibold text-ph-ink", children: title }),
+        description ? /* @__PURE__ */ jsx5("p", { className: "mx-auto mt-1 max-w-sm text-xs leading-relaxed text-ph-subtle sm:text-sm", children: description }) : null,
+        actionLabel && (href || onClick) ? href ? /* @__PURE__ */ jsx5(
+          "a",
+          {
+            href,
+            className: "mt-2.5 inline-flex text-sm font-semibold text-ph-brand hover:underline",
+            children: actionLabel
+          }
+        ) : /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            onClick,
+            className: "mt-2.5 inline-flex text-sm font-semibold text-ph-brand hover:underline",
+            children: actionLabel
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function TodayLayout({
+  primary,
+  main,
+  aside,
+  className
+}) {
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: cn("mt-5 space-y-6 sm:mt-6", className),
+      "data-test": "today-layout",
+      children: [
+        primary ? /* @__PURE__ */ jsx5("div", { className: "max-w-md", children: primary }) : null,
+        /* @__PURE__ */ jsxs5("div", { className: "grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(16rem,20rem)] lg:items-start lg:gap-8", children: [
+          /* @__PURE__ */ jsx5("div", { className: "min-w-0 space-y-8", children: main }),
+          aside ? /* @__PURE__ */ jsx5("aside", { className: "space-y-3 lg:sticky lg:top-6 lg:self-start", children: aside }) : null
+        ] })
+      ]
+    }
+  );
+}
+function TodayAskAiCard({
+  title = "Ask AI",
+  description = "Ask about your workspace, draft something, or look a fact up online.",
+  cta = "Ask",
+  className,
+  onClick,
+  href
+}) {
+  const classes = cn(
+    "group flex w-full items-start gap-3.5 rounded-2xl border border-ph-border/70 bg-ph-surface px-4 py-3.5 text-left shadow-[0_1px_12px_-8px_rgba(15,23,42,0.1)] transition hover:border-ph-brand/35 hover:bg-[color-mix(in_oklab,var(--ph-accent)_6%,var(--ph-surface))] sm:px-5",
+    className
+  );
+  const body = /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("span", { className: "inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-ph-brand/15 text-ph-brand shadow-sm ring-1 ring-black/[0.06]", children: /* @__PURE__ */ jsx5(SuiteIcon, { name: "stack-hex", accent: "shellstack", className: "h-5 w-5" }) }),
+    /* @__PURE__ */ jsxs5("span", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs5("span", { className: "flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1", children: [
+        /* @__PURE__ */ jsx5("span", { className: "font-display text-sm font-bold tracking-tight text-ph-ink", children: title }),
+        /* @__PURE__ */ jsx5("span", { className: "text-sm font-medium text-ph-brand transition group-hover:underline", children: cta })
+      ] }),
+      /* @__PURE__ */ jsx5("span", { className: "mt-1 block text-sm leading-relaxed text-ph-subtle", children: description })
+    ] })
+  ] });
+  if (onClick) {
+    return /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        onClick,
+        className: classes,
+        "data-test": "today-ask-ai",
+        children: body
+      }
+    );
+  }
+  if (href) {
+    return /* @__PURE__ */ jsx5("a", { href, className: classes, "data-test": "today-ask-ai", children: body });
+  }
+  return /* @__PURE__ */ jsx5("div", { className: classes, "data-test": "today-ask-ai", children: body });
 }
 function TodaySection({
   icon: Icon,
@@ -626,7 +796,7 @@ function TodaySection({
   testId,
   children
 }) {
-  return /* @__PURE__ */ jsxs5("section", { "data-test": testId, className: "space-y-4", children: [
+  return /* @__PURE__ */ jsxs5("section", { "data-test": testId, className: "space-y-5", children: [
     /* @__PURE__ */ jsxs5("div", { className: "flex items-start justify-between gap-4", children: [
       /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 items-start gap-3.5", children: [
         /* @__PURE__ */ jsx5(
@@ -657,8 +827,7 @@ function TodayPanel({
     "div",
     {
       className: cn(
-        "border-ph-border/70 rounded-2xl border bg-ph-surface p-6 shadow-[0_2px_28px_-10px_rgba(15,23,42,0.14)] transition-all duration-200 ease-out sm:p-6",
-        "hover:shadow-[0_8px_32px_-12px_rgba(15,23,42,0.18)] hover:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:transform-none",
+        "border-ph-border/70 rounded-2xl border bg-ph-surface p-5 shadow-[0_1px_16px_-8px_rgba(15,23,42,0.12)] sm:p-5",
         className
       ),
       children
@@ -836,6 +1005,70 @@ function AppSwitcher({
 import { useCallback, useEffect, useState as useState2 } from "react";
 import { useRouter } from "next/navigation";
 import { Bell } from "iconoir-react";
+
+// src/suite/lib/apps.ts
+var SUITE_APPS2 = [
+  {
+    slug: "shellstack",
+    name: "ShellStack",
+    description: "Organisation and billing",
+    icon: "/icon-shellstack.svg",
+    landing: "/home",
+    baseUrlEnv: "NEXT_PUBLIC_SHELLSTACK_URL",
+    baseUrlFallback: "http://localhost:3002"
+  },
+  {
+    slug: "tides",
+    name: "Tides",
+    description: "Projects and tasks",
+    icon: "/tides-icon.svg",
+    landing: "/today",
+    baseUrlEnv: "NEXT_PUBLIC_TIDES_URL",
+    baseUrlFallback: "http://localhost:3001"
+  },
+  {
+    slug: "turtletime",
+    name: "TurtleTime",
+    description: "Time tracking",
+    icon: "/turtletime-icon.svg",
+    landing: "/today",
+    baseUrlEnv: "NEXT_PUBLIC_TURTLETIME_URL",
+    baseUrlFallback: "http://localhost:3000"
+  },
+  {
+    slug: "kraken",
+    name: "Kraken",
+    description: "Documents and knowledge",
+    icon: "/kraken-icon.svg",
+    landing: "/today",
+    baseUrlEnv: "NEXT_PUBLIC_KRAKEN_URL",
+    baseUrlFallback: "http://localhost:3003"
+  }
+];
+var SUITE_APP_MAP = Object.fromEntries(SUITE_APPS2.map((app) => [app.slug, app]));
+function suiteAppBaseUrl(slug) {
+  const def = SUITE_APP_MAP[slug];
+  const fromEnv = typeof process !== "undefined" ? process.env[def.baseUrlEnv] : void 0;
+  return (fromEnv || def.baseUrlFallback).replace(/\/$/, "");
+}
+var SOURCE_APP_SLUG = {
+  turtletime: "turtletime",
+  tides: "tides",
+  kraken: "kraken",
+  portal: "shellstack",
+  shellstack: "shellstack"
+};
+function resolveSuiteNotificationHref(href, sourceApp) {
+  const value = (href || "").trim();
+  if (!value) return "";
+  if (/^(https?:|mailto:|\/\/)/i.test(value)) return value;
+  const path = value.startsWith("/") ? value : `/${value}`;
+  const slug = SOURCE_APP_SLUG[(sourceApp || "").toLowerCase()];
+  if (!slug) return path;
+  return `${suiteAppBaseUrl(slug)}${path}`;
+}
+
+// src/suite/components/suite-notification-bell.tsx
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var POLL_MS = 6e4;
 function timeAgo(iso) {
@@ -926,9 +1159,13 @@ function SuiteNotificationBell({
         } catch (e) {
         }
       }
-      if (!n.href) return;
-      if (/^https?:\/\//i.test(n.href)) window.location.assign(n.href);
-      else router.push(n.href);
+      const target = resolveSuiteNotificationHref(n.href, n.source_app);
+      if (!target) return;
+      if (/^https?:\/\//i.test(target)) {
+        window.location.assign(target);
+        return;
+      }
+      router.push(target);
     },
     [router, markRead]
   );
@@ -1064,11 +1301,11 @@ function useIdleMount(timeoutMs = 1200) {
 }
 
 // src/suite/components/deferred-chrome.tsx
-import { Fragment as Fragment2, jsx as jsx9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx9 } from "react/jsx-runtime";
 function DeferredChrome({ children }) {
   const ready = useIdleMount();
   if (!ready) return null;
-  return /* @__PURE__ */ jsx9(Fragment2, { children });
+  return /* @__PURE__ */ jsx9(Fragment3, { children });
 }
 
 // src/suite/components/suite-mobile-drawer.tsx
@@ -1081,6 +1318,7 @@ function SuiteMobileDrawer({
   children,
   side = "left",
   showCloseButton = false,
+  title,
   closeLabel = "Close navigation",
   backdropLabel = "Close navigation",
   dialogLabel = "Navigation",
@@ -1158,23 +1396,35 @@ function SuiteMobileDrawer({
         tabIndex: -1,
         "data-test": panelDataTest,
         className: cn(
-          "suite-scroll-lock relative flex h-full w-[86%] max-w-64 flex-col overflow-hidden bg-ph-surface shadow-xl outline-none motion-safe:transition-transform motion-safe:ease-spring-fast",
+          "suite-scroll-lock relative flex h-full w-[86%] max-w-72 flex-col overflow-hidden bg-ph-surface shadow-xl outline-none motion-safe:transition-transform motion-safe:ease-spring-fast",
           side === "right" && "ml-auto",
           shown ? "translate-x-0" : side === "right" ? "translate-x-full" : "-translate-x-full",
           panelClassName
         ),
         style: { transitionDuration: `${durationMs}ms` },
         children: [
-          showCloseButton ? /* @__PURE__ */ jsx10("div", { className: "flex h-14 shrink-0 items-center justify-end border-b border-ph-border px-3", children: /* @__PURE__ */ jsx10(
-            "button",
+          showCloseButton ? /* @__PURE__ */ jsxs8(
+            "div",
             {
-              type: "button",
-              onClick: onClose,
-              className: "-mr-1.5 inline-flex h-11 w-11 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand",
-              "aria-label": closeLabel,
-              children: /* @__PURE__ */ jsx10(X, { className: "h-4 w-4", "aria-hidden": true })
+              className: cn(
+                "flex h-14 shrink-0 items-center border-b border-ph-border px-3",
+                title ? "justify-between" : "justify-end"
+              ),
+              children: [
+                title ? /* @__PURE__ */ jsx10("span", { className: "truncate text-sm font-semibold text-ph-ink", children: title }) : null,
+                /* @__PURE__ */ jsx10(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onClose,
+                    className: "-mr-1.5 inline-flex h-11 w-11 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand",
+                    "aria-label": closeLabel,
+                    children: /* @__PURE__ */ jsx10(X, { className: "h-4 w-4", "aria-hidden": true })
+                  }
+                )
+              ]
             }
-          ) }) : null,
+          ) : null,
           children
         ]
       }
@@ -1231,74 +1481,361 @@ function SuiteMobileHeader({
   );
 }
 
-// src/suite/components/suite-user-menu.tsx
-import Image2 from "next/image";
-import { useRouter as useRouter2 } from "next/navigation";
-import { LogOut, Settings } from "iconoir-react";
+// src/suite/components/suite-layout.tsx
+import {
+  useEffect as useEffect5,
+  useRef as useRef2,
+  useState as useState6
+} from "react";
 import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
-function computeInitials(name, email) {
-  const source = (name || email || "?").trim();
-  return source.split(/[\s@]+/).filter(Boolean).slice(0, 2).map((part) => part[0]).join("").toUpperCase();
+function SuiteBreadcrumbs({ items, className }) {
+  return /* @__PURE__ */ jsx12("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsx12("ol", { className: "flex min-w-0 items-center gap-1.5", children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ jsxs10("li", { className: "flex min-w-0 items-center gap-1.5", children: [
+      index > 0 ? /* @__PURE__ */ jsx12("span", { className: "select-none text-ph-border", "aria-hidden": "true", children: "/" }) : null,
+      item.href && !isLast ? /* @__PURE__ */ jsx12(
+        "a",
+        {
+          href: item.href,
+          className: "truncate transition hover:text-ph-ink",
+          children: item.label
+        }
+      ) : /* @__PURE__ */ jsx12(
+        "span",
+        {
+          className: cn(
+            "truncate",
+            isLast ? "font-medium text-ph-ink" : "text-ph-subtle"
+          ),
+          "aria-current": isLast ? "page" : void 0,
+          children: item.label
+        }
+      )
+    ] }, index);
+  }) }) });
 }
-function SuiteUserMenu({
-  name,
-  email,
-  image,
-  settingsHref,
-  onSignOut,
-  fallbackInitials,
-  dataTest = "suite-user-menu",
-  className
+function SuitePage({
+  children,
+  width = "full",
+  inset = true,
+  className,
+  as: Component = "div",
+  dataTest,
+  id,
+  role,
+  "aria-live": ariaLive
 }) {
-  const router = useRouter2();
-  const initials = fallbackInitials != null ? fallbackInitials : computeInitials(name, email);
-  const avatar = /* @__PURE__ */ jsx12("span", { className: "inline-flex h-11 w-11 items-center justify-center rounded-full transition-colors hover:bg-ph-muted", children: image ? /* @__PURE__ */ jsx12(
-    Image2,
+  return /* @__PURE__ */ jsx12(
+    Component,
     {
-      src: image,
-      alt: "",
-      width: 32,
-      height: 32,
-      className: "h-8 w-8 rounded-full object-cover",
-      unoptimized: true
+      id,
+      "data-test": dataTest,
+      "data-width": width,
+      role,
+      "aria-live": ariaLive,
+      className: cn(
+        "suite-page-stage flex w-full min-w-0 flex-col",
+        inset && "suite-page-inset",
+        className
+      ),
+      children
+    }
+  );
+}
+function SuitePageHeader({
+  title,
+  description,
+  eyebrow,
+  actions,
+  className,
+  titleClassName,
+  dataTest,
+  /** Optional icon rendered before the title. */
+  icon,
+  /** Use the animated sun/moon icon from the Today page. */
+  todayIcon,
+  todayIconClassName,
+  /** Small badge/pill next to the title (e.g. "Beta", org name). */
+  badge,
+  /** Breadcrumb line rendered above the title. */
+  breadcrumb,
+  /** Stick to the top of the scrollport (desktop page titles). */
+  sticky = false
+}) {
+  const headerRef = useRef2(null);
+  const [stuck, setStuck] = useState6(false);
+  useEffect5(() => {
+    var _a;
+    if (!sticky) return;
+    const el = headerRef.current;
+    if (!el) return;
+    const sentinel = document.createElement("div");
+    sentinel.setAttribute("aria-hidden", "true");
+    sentinel.style.cssText = "position:relative;height:1px;width:100%;margin:0;padding:0;pointer-events:none";
+    (_a = el.parentElement) == null ? void 0 : _a.insertBefore(sentinel, el);
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setStuck(!entry.isIntersecting);
+      },
+      { threshold: [1], root: null }
+    );
+    observer.observe(sentinel);
+    return () => {
+      observer.disconnect();
+      sentinel.remove();
+    };
+  }, [sticky]);
+  const resolvedIcon = todayIcon ? /* @__PURE__ */ jsx12(
+    TodayTimeIcon,
+    {
+      className: cn(
+        "h-7 w-7 text-amber-500 sm:h-8 sm:w-8",
+        todayIconClassName
+      )
     }
-  ) : /* @__PURE__ */ jsx12("span", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-ph-muted text-sm font-semibold text-ph-brand", children: initials }) });
+  ) : icon;
   return /* @__PURE__ */ jsxs10(
-    DropdownMenu,
+    "header",
     {
-      trigger: avatar,
-      "aria-label": "Account menu",
-      align: "end",
-      side: "bottom",
-      sideOffset: 6,
-      collisionPadding: 16,
-      modal: false,
-      className,
+      ref: headerRef,
       "data-test": dataTest,
+      "data-stuck": sticky ? stuck ? "true" : "false" : void 0,
+      className: cn(
+        "flex items-start justify-between gap-4 pb-2 sm:pb-3",
+        // No extra pt here — page inset sets the shared title baseline.
+        // Stuck state adds pad via .suite-page-header-sticky[data-stuck].
+        sticky && "suite-page-header-sticky",
+        className
+      ),
       children: [
-        /* @__PURE__ */ jsxs10("div", { className: "px-2 py-1.5", children: [
-          /* @__PURE__ */ jsx12("p", { className: "truncate text-sm font-medium text-ph-ink", children: name || email || "Account" }),
-          email ? /* @__PURE__ */ jsx12("p", { className: "truncate text-xs text-ph-mutedtext", children: email }) : null
-        ] }),
-        /* @__PURE__ */ jsx12("div", { className: "my-1 border-t border-ph-border" }),
-        /* @__PURE__ */ jsxs10(
-          DropdownItem,
-          {
-            "data-test": `${dataTest}-settings`,
-            onClick: () => router.push(settingsHref),
+        /* @__PURE__ */ jsxs10("div", { className: "min-w-0 flex-1", children: [
+          eyebrow ? /* @__PURE__ */ jsx12("div", { className: "mb-0.5 flex min-w-0 items-center gap-1.5 text-xs text-ph-subtle", children: eyebrow }) : null,
+          breadcrumb ? /* @__PURE__ */ jsx12("div", { className: "mb-0.5 flex min-w-0 items-center gap-1.5 text-xs text-ph-subtle", children: breadcrumb }) : null,
+          /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 items-center gap-3", children: [
+            resolvedIcon ? /* @__PURE__ */ jsx12(
+              "div",
+              {
+                className: "hidden shrink-0 sm:flex sm:items-center [&_svg]:h-7 [&_svg]:w-7 sm:[&_svg]:h-8 sm:[&_svg]:w-8",
+                "aria-hidden": "true",
+                children: resolvedIcon
+              }
+            ) : null,
+            /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [
+              /* @__PURE__ */ jsx12(
+                "h1",
+                {
+                  className: cn(
+                    "font-display text-[1.625rem] font-bold leading-none tracking-tight text-ph-ink sm:text-[2.25rem]",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ),
+              badge ? /* @__PURE__ */ jsx12("span", { className: "rounded-md bg-ph-muted px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-ph-subtle", children: badge }) : null
+            ] })
+          ] }),
+          description ? /* @__PURE__ */ jsx12(
+            "div",
+            {
+              className: cn(
+                "mt-1.5 max-w-2xl text-pretty text-sm leading-5 text-ph-subtle",
+                resolvedIcon && "sm:pl-11"
+              ),
+              children: description
+            }
+          ) : null
+        ] }),
+        actions ? /* @__PURE__ */ jsx12("div", { className: "flex shrink-0 items-center gap-2 self-center", children: actions }) : null
+      ]
+    }
+  );
+}
+function SuiteToolbar({
+  children,
+  className,
+  label = "Page tools",
+  dataTest
+}) {
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      role: "toolbar",
+      "aria-label": label,
+      "data-test": dataTest,
+      className: cn("flex min-w-0 flex-wrap items-center gap-2", className),
+      children
+    }
+  );
+}
+function SuiteTabList({
+  children,
+  className,
+  label,
+  dataTest
+}) {
+  return /* @__PURE__ */ jsx12(
+    "nav",
+    {
+      "aria-label": label,
+      "data-test": dataTest,
+      className: cn(
+        "flex min-w-0 flex-wrap gap-2 [&_a]:min-h-[48px] [&_button]:min-h-[48px] sm:[&_a]:min-h-[44px] sm:[&_button]:min-h-[44px]",
+        className
+      ),
+      children
+    }
+  );
+}
+function SuiteSectionHeader({
+  title,
+  description,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: cn(
+        "flex min-w-0 flex-col gap-4 sm:flex-row sm:items-end sm:justify-between",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs10("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx12("h2", { className: "font-display text-balance text-lg font-semibold tracking-tight text-ph-ink sm:text-xl", children: title }),
+          description ? /* @__PURE__ */ jsx12("div", { className: "mt-1 max-w-2xl text-pretty text-sm leading-5 text-ph-subtle", children: description }) : null
+        ] }),
+        action ? /* @__PURE__ */ jsx12("div", { className: "flex min-h-[44px] shrink-0 items-center", children: action }) : null
+      ]
+    }
+  );
+}
+
+// src/suite/components/suite-settings-layout.tsx
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function SuiteSettingsLayout({
+  children,
+  sidebar,
+  mobileNav,
+  loading,
+  title = "Settings",
+  description,
+  header,
+  dataTest = "settings-page",
+  headerDataTest = "settings-page-header",
+  className,
+  contentClassName
+}) {
+  return /* @__PURE__ */ jsxs11(
+    SuitePage,
+    {
+      dataTest,
+      className: cn("flex h-full flex-col overflow-hidden", className),
+      children: [
+        header != null ? header : /* @__PURE__ */ jsx13(
+          SuitePageHeader,
+          {
+            sticky: true,
+            dataTest: headerDataTest,
+            title,
+            description
+          }
+        ),
+        loading != null ? loading : /* @__PURE__ */ jsxs11("div", { className: "suite-page-body mt-6 flex min-h-0 flex-1 flex-col", children: [
+          mobileNav ? /* @__PURE__ */ jsx13("div", { className: "sticky top-0 z-20 mb-2 shrink-0 bg-ph-canvas/95 backdrop-blur lg:hidden", children: mobileNav }) : null,
+          /* @__PURE__ */ jsxs11("div", { className: "flex min-h-0 flex-1 flex-col gap-6 lg:flex-row lg:gap-8", children: [
+            /* @__PURE__ */ jsx13(
+              "aside",
+              {
+                "aria-label": "Settings",
+                className: "hidden w-56 shrink-0 bg-transparent lg:block lg:self-stretch lg:overflow-y-auto lg:overscroll-contain",
+                children: sidebar
+              }
+            ),
+            /* @__PURE__ */ jsx13(
+              "div",
+              {
+                className: cn(
+                  "min-h-0 min-w-0 flex-1 overflow-y-auto overscroll-contain pb-6",
+                  contentClassName
+                ),
+                children
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/suite/components/suite-user-menu.tsx
+import Image2 from "next/image";
+import { useRouter as useRouter2 } from "next/navigation";
+import { LogOut, Settings } from "iconoir-react";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+function computeInitials(name, email) {
+  const source = (name || email || "?").trim();
+  return source.split(/[\s@]+/).filter(Boolean).slice(0, 2).map((part) => part[0]).join("").toUpperCase();
+}
+function SuiteUserMenu({
+  name,
+  email,
+  image,
+  settingsHref,
+  onSignOut,
+  fallbackInitials,
+  dataTest = "suite-user-menu",
+  className
+}) {
+  const router = useRouter2();
+  const initials = fallbackInitials != null ? fallbackInitials : computeInitials(name, email);
+  const avatar = /* @__PURE__ */ jsx14("span", { className: "inline-flex h-11 w-11 items-center justify-center rounded-full transition-colors hover:bg-ph-muted", children: image ? /* @__PURE__ */ jsx14(
+    Image2,
+    {
+      src: image,
+      alt: "",
+      width: 32,
+      height: 32,
+      className: "h-8 w-8 rounded-full object-cover",
+      unoptimized: true
+    }
+  ) : /* @__PURE__ */ jsx14("span", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-ph-muted text-sm font-semibold text-ph-brand", children: initials }) });
+  return /* @__PURE__ */ jsxs12(
+    DropdownMenu,
+    {
+      trigger: avatar,
+      "aria-label": "Account menu",
+      align: "end",
+      side: "bottom",
+      sideOffset: 6,
+      collisionPadding: 16,
+      modal: false,
+      className,
+      "data-test": dataTest,
+      children: [
+        /* @__PURE__ */ jsxs12("div", { className: "px-2 py-1.5", children: [
+          /* @__PURE__ */ jsx14("p", { className: "truncate text-sm font-medium text-ph-ink", children: name || email || "Account" }),
+          email ? /* @__PURE__ */ jsx14("p", { className: "truncate text-xs text-ph-mutedtext", children: email }) : null
+        ] }),
+        /* @__PURE__ */ jsx14("div", { className: "my-1 border-t border-ph-border" }),
+        /* @__PURE__ */ jsxs12(
+          DropdownItem,
+          {
+            "data-test": `${dataTest}-settings`,
+            onClick: () => router.push(settingsHref),
             children: [
-              /* @__PURE__ */ jsx12(Settings, { className: "h-4 w-4 text-ph-mutedtext", "aria-hidden": true }),
+              /* @__PURE__ */ jsx14(Settings, { className: "h-4 w-4 text-ph-mutedtext", "aria-hidden": true }),
               "Profile settings"
             ]
           }
         ),
-        /* @__PURE__ */ jsxs10(
+        /* @__PURE__ */ jsxs12(
           DropdownItem,
           {
             "data-test": `${dataTest}-sign-out`,
             onClick: onSignOut,
             children: [
-              /* @__PURE__ */ jsx12(LogOut, { className: "h-4 w-4 text-ph-mutedtext", "aria-hidden": true }),
+              /* @__PURE__ */ jsx14(LogOut, { className: "h-4 w-4 text-ph-mutedtext", "aria-hidden": true }),
               "Sign out"
             ]
           }
@@ -1310,7 +1847,7 @@ function SuiteUserMenu({
 
 // src/suite/components/suite-bottom-nav.tsx
 import Link from "next/link";
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 function SuiteBottomNav({
   items,
   ariaLabel = "Primary navigation",
@@ -1323,8 +1860,8 @@ function SuiteBottomNav({
     );
   }
   const activeIndex = items.findIndex((item) => item.active);
-  return /* @__PURE__ */ jsxs11(Fragment3, { children: [
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
+    /* @__PURE__ */ jsx15(
       "div",
       {
         "aria-hidden": true,
@@ -1332,7 +1869,7 @@ function SuiteBottomNav({
         style: { height: "calc(60px + env(safe-area-inset-bottom))" }
       }
     ),
-    /* @__PURE__ */ jsxs11(
+    /* @__PURE__ */ jsxs13(
       "nav",
       {
         "aria-label": ariaLabel,
@@ -1347,12 +1884,12 @@ function SuiteBottomNav({
           "--suite-nav-active": activeIndex >= 0 ? activeIndex : 0
         },
         children: [
-          activeIndex >= 0 ? /* @__PURE__ */ jsx13("span", { "aria-hidden": true, className: "suite-bottom-nav__indicator" }) : null,
+          activeIndex >= 0 ? /* @__PURE__ */ jsx15("span", { "aria-hidden": true, className: "suite-bottom-nav__indicator" }) : null,
           items.map((item) => {
             var _a;
             const Icon = item.icon;
             const active = Boolean(item.active);
-            return /* @__PURE__ */ jsxs11(
+            return /* @__PURE__ */ jsxs13(
               Link,
               {
                 href: item.href,
@@ -1363,14 +1900,14 @@ function SuiteBottomNav({
                   active && "font-semibold text-ph-brand"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx13(
+                  /* @__PURE__ */ jsx15(
                     "span",
                     {
                       className: cn(
                         "suite-bottom-nav__icon relative z-10 inline-flex items-center justify-center",
                         active && "suite-bottom-nav__icon--active"
                       ),
-                      children: /* @__PURE__ */ jsx13(
+                      children: /* @__PURE__ */ jsx15(
                         Icon,
                         {
                           className: "h-6 w-6",
@@ -1380,7 +1917,7 @@ function SuiteBottomNav({
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx13("span", { className: "relative z-10 max-w-full truncate", children: item.label })
+                  /* @__PURE__ */ jsx15("span", { className: "relative z-10 max-w-full truncate", children: item.label })
                 ]
               },
               item.href
@@ -1392,117 +1929,39 @@ function SuiteBottomNav({
   ] });
 }
 
-// src/suite/lib/apps.ts
-var SUITE_APPS2 = [
-  {
-    slug: "shellstack",
-    name: "ShellStack",
-    description: "Organisation and billing",
-    icon: "/icon-shellstack.svg",
-    landing: "/home",
-    baseUrlEnv: "NEXT_PUBLIC_SHELLSTACK_URL",
-    baseUrlFallback: "http://localhost:3002"
-  },
-  {
-    slug: "tides",
-    name: "Tides",
-    description: "Projects and tasks",
-    icon: "/tides-icon.svg",
-    landing: "/today",
-    baseUrlEnv: "NEXT_PUBLIC_TIDES_URL",
-    baseUrlFallback: "http://localhost:3001"
-  },
-  {
-    slug: "turtletime",
-    name: "TurtleTime",
-    description: "Time tracking",
-    icon: "/turtletime-icon.svg",
-    landing: "/tracker",
-    baseUrlEnv: "NEXT_PUBLIC_TURTLETIME_URL",
-    baseUrlFallback: "http://localhost:3000"
-  },
-  {
-    slug: "kraken",
-    name: "Kraken",
-    description: "Documents and knowledge",
-    icon: "/kraken-icon.svg",
-    landing: "/today",
-    baseUrlEnv: "NEXT_PUBLIC_KRAKEN_URL",
-    baseUrlFallback: "http://localhost:3003"
-  }
-];
-var SUITE_APP_MAP = Object.fromEntries(SUITE_APPS2.map((app) => [app.slug, app]));
-function suiteAppBaseUrl(slug) {
-  const def = SUITE_APP_MAP[slug];
-  const fromEnv = typeof process !== "undefined" ? process.env[def.baseUrlEnv] : void 0;
-  return (fromEnv || def.baseUrlFallback).replace(/\/$/, "");
-}
-
 // src/suite/components/today-calibrating.tsx
 import { Refresh as RefreshCw2, SunLight as Sun } from "iconoir-react";
-import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 function TodayCalibrating({
   onRetry,
   retrying = false,
   className,
   spinner: Spinner,
-  variant = "ring",
+  variant: _variant = "ring",
   retrySpinnerClassName = "text-ph-brand"
 }) {
-  return /* @__PURE__ */ jsxs12(
+  void _variant;
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       className: cn(
-        "relative flex min-h-[14rem] flex-col items-center justify-center overflow-hidden rounded-2xl border border-ph-border bg-ph-surface px-5 py-8 text-center shadow-sm",
+        "suite-auth-handoff relative flex min-h-[14rem] flex-col items-center justify-center overflow-hidden rounded-2xl border border-ph-border bg-ph-surface px-5 py-8 text-center shadow-sm",
         className
       ),
       "data-test": "today-calibrating",
       children: [
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx16(
           "div",
           {
-            className: "pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_35%,rgba(251,191,36,0.12),transparent_55%)]",
+            className: "pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_35%,rgba(251,191,36,0.1),transparent_55%)]",
             "aria-hidden": true
           }
         ),
-        /* @__PURE__ */ jsxs12("div", { className: "relative mb-6 flex h-24 w-24 items-center justify-center", children: [
-          variant === "ring" ? /* @__PURE__ */ jsxs12(Fragment4, { children: [
-            /* @__PURE__ */ jsx14(
-              Spinner,
-              {
-                size: "lg",
-                className: "absolute inset-0 m-auto opacity-40",
-                label: "Loading today"
-              }
-            ),
-            /* @__PURE__ */ jsx14(
-              "span",
-              {
-                className: "bg-ph-muted/30 absolute inset-2 animate-ping rounded-full",
-                "aria-hidden": true
-              }
-            )
-          ] }) : null,
-          /* @__PURE__ */ jsx14("span", { className: "relative flex h-14 w-14 items-center justify-center rounded-2xl border border-ph-border bg-ph-surface text-ph-ink shadow-sm", children: /* @__PURE__ */ jsx14(
-            Sun,
-            {
-              className: cn("h-9 w-9", variant === "pulse" && "animate-pulse"),
-              strokeWidth: 2,
-              "aria-hidden": true
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx14("h2", { className: "relative text-base font-semibold tracking-tight text-ph-ink sm:text-lg md:text-xl", children: "Calibrating your day" }),
-        /* @__PURE__ */ jsx14("p", { className: "relative mt-1.5 max-w-sm text-sm sm:text-[15px] leading-relaxed text-ph-subtle", children: "Pulling together tasks, time and updates from your workspace\u2026" }),
-        /* @__PURE__ */ jsx14("div", { className: "relative mt-5 flex gap-1.5", "aria-hidden": true, children: [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx14(
-          "span",
-          {
-            className: "h-1.5 w-5 animate-pulse rounded-full bg-ph-muted",
-            style: { animationDelay: `${i * 120}ms` }
-          },
-          i
-        )) }),
-        onRetry ? /* @__PURE__ */ jsxs12(
+        /* @__PURE__ */ jsx16("div", { className: "relative mb-5 flex h-14 w-14 items-center justify-center rounded-2xl border border-ph-border bg-ph-surface text-ph-ink shadow-sm", children: /* @__PURE__ */ jsx16(Sun, { className: "h-8 w-8", strokeWidth: 2, "aria-hidden": true }) }),
+        /* @__PURE__ */ jsx16("h2", { className: "relative text-base font-semibold tracking-tight text-ph-ink sm:text-lg md:text-xl", children: "Calibrating your day" }),
+        /* @__PURE__ */ jsx16("p", { className: "relative mt-1.5 max-w-sm text-sm sm:text-[15px] leading-relaxed text-ph-subtle", children: "Pulling together tasks, time and updates from your workspace\u2026" }),
+        /* @__PURE__ */ jsx16("div", { className: "relative mt-5 flex justify-center", children: /* @__PURE__ */ jsx16(Spinner, { size: "sm", className: "opacity-70", label: "Loading today" }) }),
+        onRetry ? /* @__PURE__ */ jsxs14(
           "button",
           {
             type: "button",
@@ -1510,7 +1969,7 @@ function TodayCalibrating({
             disabled: retrying,
             className: "relative mt-6 inline-flex items-center gap-2 rounded-xl border border-ph-border bg-ph-canvas px-4 py-2 text-sm font-medium text-ph-ink transition hover:bg-ph-muted disabled:opacity-60",
             children: [
-              retrying ? /* @__PURE__ */ jsx14(Spinner, { size: "sm", className: retrySpinnerClassName }) : /* @__PURE__ */ jsx14(RefreshCw2, { className: "h-4 w-4", "aria-hidden": true }),
+              retrying ? /* @__PURE__ */ jsx16(Spinner, { size: "sm", className: retrySpinnerClassName }) : /* @__PURE__ */ jsx16(RefreshCw2, { className: "h-4 w-4", "aria-hidden": true }),
               "Try again"
             ]
           }
@@ -1525,11 +1984,11 @@ import {
   createContext,
   useCallback as useCallback2,
   useContext,
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useMemo,
-  useState as useState6
+  useState as useState7
 } from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var SuiteThemeContext = createContext(null);
 function systemTheme(fallback) {
   if (typeof window === "undefined") return fallback;
@@ -1567,7 +2026,7 @@ function SuiteThemeProvider({
   config,
   children
 }) {
-  const [state, setState] = useState6(() => {
+  const [state, setState] = useState7(() => {
     const theme2 = readStoredTheme(config.storageKey);
     if (typeof document === "undefined") {
       return { theme: theme2, resolvedTheme: config.fallbackTheme };
@@ -1577,7 +2036,7 @@ function SuiteThemeProvider({
     return { theme: theme2, resolvedTheme: resolvedTheme2 };
   });
   const { theme, resolvedTheme } = state;
-  useEffect5(() => {
+  useEffect6(() => {
     if (theme !== "system") return;
     const media = window.matchMedia("(prefers-color-scheme: dark)");
     const update = () => {
@@ -1607,7 +2066,7 @@ function SuiteThemeProvider({
     () => ({ theme, resolvedTheme, setTheme, toggleTheme }),
     [theme, resolvedTheme, setTheme, toggleTheme]
   );
-  return /* @__PURE__ */ jsx15(SuiteThemeContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx17(SuiteThemeContext.Provider, { value, children });
 }
 function useSuiteTheme() {
   const ctx = useContext(SuiteThemeContext);
@@ -1616,39 +2075,170 @@ function useSuiteTheme() {
 }
 
 // src/suite/components/ai-panel.tsx
-import { useState as useState7 } from "react";
-import { Check as Check2, Copy, Xmark as X2 } from "iconoir-react";
-import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import {
+  useCallback as useCallback3,
+  useEffect as useEffect7,
+  useRef as useRef3,
+  useState as useState8
+} from "react";
+import { Check as Check2, Copy, Sparks, Xmark as X2 } from "iconoir-react";
+import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+var SUITE_OPEN_ASK_AI_EVENT = "shellstack:open-ask-ai";
+function openSuiteAskAi(detail) {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(
+    new CustomEvent(SUITE_OPEN_ASK_AI_EVENT, {
+      detail: detail != null ? detail : {}
+    })
+  );
+}
+var LAUNCHER_EDGE_GAP = 12;
+var LAUNCHER_STORAGE_KEY = "suite-ask-ai-launcher-position";
+function resolveSuiteAiLauncherPosition(side, desiredY, viewportWidth, viewportHeight, launcherWidth, launcherHeight) {
+  const maxX = Math.max(
+    LAUNCHER_EDGE_GAP,
+    viewportWidth - launcherWidth - LAUNCHER_EDGE_GAP
+  );
+  const maxY = Math.max(
+    LAUNCHER_EDGE_GAP,
+    viewportHeight - launcherHeight - LAUNCHER_EDGE_GAP
+  );
+  return {
+    x: side === "left" ? LAUNCHER_EDGE_GAP : maxX,
+    y: Math.min(Math.max(desiredY, LAUNCHER_EDGE_GAP), maxY)
+  };
+}
 function SuiteAiPanel({
-  presets,
-  emptyState,
-  fetchStatus,
-  complete,
+  presets = [],
+  emptyState = "Ask anything about your workspace, or look something up online.",
+  title = "Ask AI",
+  fetchChat,
+  sendMessage,
+  clearChat,
   brandIcon: BrandIcon,
-  spinner: Spinner
+  spinner: Spinner,
+  hideLauncher = false
 }) {
-  const [open, setOpen] = useState7(false);
-  const [prompt, setPrompt] = useState7("");
-  const [loading, setLoading] = useState7(false);
-  const [answer, setAnswer] = useState7("");
-  const [error, setError] = useState7("");
-  const [copied, setCopied] = useState7(false);
+  const [open, setOpen] = useState8(false);
+  const [prompt, setPrompt] = useState8("");
+  const [messages, setMessages] = useState8([]);
+  const [loading, setLoading] = useState8(false);
+  const [hydrating, setHydrating] = useState8(false);
+  const [error, setError] = useState8("");
+  const [copiedId, setCopiedId] = useState8(null);
+  const [launcherSide, setLauncherSide] = useState8("right");
+  const [launcherPosition, setLauncherPosition] = useState8(null);
+  const [draggingLauncher, setDraggingLauncher] = useState8(false);
+  const scrollerRef = useRef3(null);
+  const launcherRef = useRef3(null);
+  const launcherSideRef = useRef3("right");
+  const launcherPositionRef = useRef3(null);
+  const launcherDragRef = useRef3(null);
+  const suppressLauncherClickRef = useRef3(false);
+  const pendingPromptRef = useRef3(null);
+  useEffect7(() => {
+    const launcher = launcherRef.current;
+    if (!launcher) return;
+    let side = "right";
+    let desiredY = window.innerHeight - launcher.offsetHeight - 20;
+    try {
+      const stored = JSON.parse(
+        localStorage.getItem(LAUNCHER_STORAGE_KEY) || "null"
+      );
+      if ((stored == null ? void 0 : stored.side) === "left" || (stored == null ? void 0 : stored.side) === "right")
+        side = stored.side;
+      if (typeof (stored == null ? void 0 : stored.y) === "number") desiredY = stored.y;
+    } catch (e) {
+    }
+    launcherSideRef.current = side;
+    setLauncherSide(side);
+    const placeLauncher = () => {
+      var _a, _b;
+      const element = launcherRef.current;
+      if (!element) return;
+      const next = resolveSuiteAiLauncherPosition(
+        launcherSideRef.current,
+        (_b = (_a = launcherPositionRef.current) == null ? void 0 : _a.y) != null ? _b : desiredY,
+        window.innerWidth,
+        window.innerHeight,
+        element.offsetWidth,
+        element.offsetHeight
+      );
+      launcherPositionRef.current = next;
+      setLauncherPosition(next);
+    };
+    placeLauncher();
+    window.addEventListener("resize", placeLauncher);
+    return () => window.removeEventListener("resize", placeLauncher);
+  }, []);
+  const scrollToBottom = useCallback3(() => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    el.scrollTop = el.scrollHeight;
+  }, []);
+  const hydrate = useCallback3(async () => {
+    var _a;
+    setHydrating(true);
+    setError("");
+    try {
+      const data = await fetchChat();
+      setMessages((_a = data.messages) != null ? _a : []);
+      if (!data.configured) {
+        setError("ShellStack AI is not configured for this workspace yet.");
+      }
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Could not load your Ask AI chat."
+      );
+    } finally {
+      setHydrating(false);
+    }
+  }, [fetchChat]);
+  useEffect7(() => {
+    function onOpen(event) {
+      var _a;
+      const detail = event.detail;
+      setOpen(true);
+      if ((_a = detail == null ? void 0 : detail.prompt) == null ? void 0 : _a.trim()) {
+        pendingPromptRef.current = detail.prompt.trim();
+        setPrompt(detail.prompt.trim());
+      }
+    }
+    window.addEventListener(SUITE_OPEN_ASK_AI_EVENT, onOpen);
+    return () => window.removeEventListener(SUITE_OPEN_ASK_AI_EVENT, onOpen);
+  }, []);
+  useEffect7(() => {
+    if (!open) return;
+    void hydrate().then(() => {
+      const pending = pendingPromptRef.current;
+      pendingPromptRef.current = null;
+      if (pending) {
+        setPrompt(pending);
+      }
+    });
+  }, [open, hydrate]);
+  useEffect7(() => {
+    if (open) scrollToBottom();
+  }, [messages, loading, open, scrollToBottom]);
   async function ask(text) {
+    var _a;
     const trimmed = text.trim();
     if (!trimmed || loading) return;
     setLoading(true);
     setError("");
-    setAnswer("");
-    setCopied(false);
+    setPrompt("");
+    setMessages((prev) => [...prev, { role: "user", content: trimmed }]);
     try {
-      const status = await fetchStatus();
-      if (!status.configured) {
-        setError("ShellStack AI is not configured for this workspace yet.");
-        return;
-      }
-      const result = await complete({ prompt: trimmed });
-      setAnswer(result.text);
+      const result = await sendMessage({ prompt: trimmed });
+      setMessages((_a = result.messages) != null ? _a : []);
     } catch (err) {
+      setMessages(
+        (prev) => {
+          var _a2, _b;
+          return ((_a2 = prev[prev.length - 1]) == null ? void 0 : _a2.role) === "user" && ((_b = prev[prev.length - 1]) == null ? void 0 : _b.content) === trimmed ? prev.slice(0, -1) : prev;
+        }
+      );
+      setPrompt(trimmed);
       setError(
         err instanceof Error ? err.message : "The AI request failed. Try again."
       );
@@ -1656,133 +2246,395 @@ function SuiteAiPanel({
       setLoading(false);
     }
   }
-  async function copyAnswer() {
-    if (!answer) return;
+  async function handleClear() {
+    if (loading) return;
     try {
-      await navigator.clipboard.writeText(answer);
-      setCopied(true);
-      window.setTimeout(() => setCopied(false), 1500);
+      await clearChat();
+      setMessages([]);
+      setError("");
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Could not clear this chat."
+      );
+    }
+  }
+  async function copyMessage(index, content) {
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopiedId(index);
+      window.setTimeout(() => setCopiedId(null), 1500);
     } catch (e) {
     }
   }
-  return /* @__PURE__ */ jsxs13(Fragment5, { children: [
-    /* @__PURE__ */ jsxs13(
-      "button",
-      {
-        type: "button",
-        "data-test": "ai-panel-launcher",
-        onClick: () => setOpen(true),
-        className: "fixed bottom-5 right-5 z-30 flex items-center gap-2 rounded-full border border-ph-border bg-ph-surface px-4 py-2.5 text-sm font-medium text-ph-ink shadow-ph hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand",
-        "aria-label": "Open ShellStack AI",
-        children: [
-          /* @__PURE__ */ jsx16(BrandIcon, { className: "h-4 w-4 text-ph-brand" }),
-          "Ask AI"
-        ]
-      }
-    ),
-    open && /* @__PURE__ */ jsxs13("div", { className: "fixed inset-0 z-40", role: "dialog", "aria-modal": "true", children: [
-      /* @__PURE__ */ jsx16(
+  function saveLauncherPosition(side, position) {
+    try {
+      localStorage.setItem(
+        LAUNCHER_STORAGE_KEY,
+        JSON.stringify({ side, y: position.y })
+      );
+    } catch (e) {
+    }
+  }
+  function dockLauncher(side, desiredY) {
+    const launcher = launcherRef.current;
+    if (!launcher) return;
+    const next = resolveSuiteAiLauncherPosition(
+      side,
+      desiredY,
+      window.innerWidth,
+      window.innerHeight,
+      launcher.offsetWidth,
+      launcher.offsetHeight
+    );
+    launcherSideRef.current = side;
+    launcherPositionRef.current = next;
+    setLauncherSide(side);
+    setLauncherPosition(next);
+    saveLauncherPosition(side, next);
+  }
+  function startLauncherDrag(event) {
+    if (event.pointerType === "mouse" && event.button !== 0) return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    launcherDragRef.current = {
+      pointerId: event.pointerId,
+      offsetX: event.clientX - rect.left,
+      offsetY: event.clientY - rect.top,
+      startX: event.clientX,
+      startY: event.clientY
+    };
+    suppressLauncherClickRef.current = false;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDraggingLauncher(true);
+  }
+  function moveLauncher(event) {
+    const drag = launcherDragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    const launcher = event.currentTarget;
+    const maxX = Math.max(
+      LAUNCHER_EDGE_GAP,
+      window.innerWidth - launcher.offsetWidth - LAUNCHER_EDGE_GAP
+    );
+    const maxY = Math.max(
+      LAUNCHER_EDGE_GAP,
+      window.innerHeight - launcher.offsetHeight - LAUNCHER_EDGE_GAP
+    );
+    const next = {
+      x: Math.min(
+        Math.max(event.clientX - drag.offsetX, LAUNCHER_EDGE_GAP),
+        maxX
+      ),
+      y: Math.min(
+        Math.max(event.clientY - drag.offsetY, LAUNCHER_EDGE_GAP),
+        maxY
+      )
+    };
+    if (Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) > 4) {
+      suppressLauncherClickRef.current = true;
+    }
+    launcherPositionRef.current = next;
+    setLauncherPosition(next);
+  }
+  function finishLauncherDrag(event) {
+    var _a, _b, _c, _d;
+    const drag = launcherDragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    launcherDragRef.current = null;
+    setDraggingLauncher(false);
+    const rect = event.currentTarget.getBoundingClientRect();
+    const currentX = (_b = (_a = launcherPositionRef.current) == null ? void 0 : _a.x) != null ? _b : rect.left;
+    const side = currentX + rect.width / 2 < window.innerWidth / 2 ? "left" : "right";
+    dockLauncher(side, (_d = (_c = launcherPositionRef.current) == null ? void 0 : _c.y) != null ? _d : rect.top);
+  }
+  function moveLauncherWithKeyboard(event) {
+    var _a, _b;
+    if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key))
+      return;
+    event.preventDefault();
+    const currentY = (_b = (_a = launcherPositionRef.current) == null ? void 0 : _a.y) != null ? _b : event.currentTarget.getBoundingClientRect().top;
+    if (event.key === "ArrowLeft") dockLauncher("left", currentY);
+    else if (event.key === "ArrowRight") dockLauncher("right", currentY);
+    else
+      dockLauncher(
+        launcherSideRef.current,
+        currentY + (event.key === "ArrowUp" ? -24 : 24)
+      );
+  }
+  const Icon = BrandIcon != null ? BrandIcon : Sparks;
+  return /* @__PURE__ */ jsxs15(Fragment5, { children: [
+    !hideLauncher ? /* @__PURE__ */ jsxs15(Fragment5, { children: [
+      /* @__PURE__ */ jsxs15(
+        "button",
+        {
+          ref: launcherRef,
+          type: "button",
+          "data-test": "ai-panel-launcher",
+          onClick: () => {
+            if (suppressLauncherClickRef.current) {
+              suppressLauncherClickRef.current = false;
+              return;
+            }
+            setOpen(true);
+          },
+          onPointerDown: startLauncherDrag,
+          onPointerMove: moveLauncher,
+          onPointerUp: finishLauncherDrag,
+          onPointerCancel: finishLauncherDrag,
+          onKeyDown: moveLauncherWithKeyboard,
+          className: `fixed z-30 flex touch-none select-none items-center gap-2 rounded-full border border-ph-border bg-ph-surface px-4 py-2.5 text-sm font-medium text-ph-ink shadow-ph hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand ${draggingLauncher ? "cursor-grabbing" : "cursor-grab"}`,
+          style: launcherPosition ? { left: launcherPosition.x, top: launcherPosition.y } : { bottom: 20, right: 20 },
+          "aria-label": "Open Ask AI",
+          "aria-describedby": "suite-ask-ai-launcher-help",
+          children: [
+            /* @__PURE__ */ jsx18(Icon, { className: "h-4 w-4 text-ph-brand" }),
+            "Ask AI"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx18("span", { id: "suite-ask-ai-launcher-help", className: "sr-only", children: "Drag to reposition, or use arrow keys. The launcher docks to the nearest screen edge." })
+    ] }) : null,
+    open ? /* @__PURE__ */ jsxs15("div", { className: "fixed inset-0 z-40", role: "dialog", "aria-modal": "true", children: [
+      /* @__PURE__ */ jsx18(
         "button",
         {
           type: "button",
           className: "absolute inset-0 bg-black/25",
           onClick: () => setOpen(false),
-          "aria-label": "Close AI panel"
+          "aria-label": "Close Ask AI"
         }
       ),
-      /* @__PURE__ */ jsxs13("aside", { className: "absolute inset-y-0 right-0 flex w-full max-w-md flex-col border-l border-ph-border bg-ph-surface shadow-2xl", children: [
-        /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between border-b border-ph-border px-4 py-3", children: [
-          /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx16(BrandIcon, { className: "h-4 w-4 text-ph-brand" }),
-            /* @__PURE__ */ jsx16("span", { className: "text-sm font-semibold text-ph-ink", children: "ShellStack AI" })
-          ] }),
-          /* @__PURE__ */ jsx16(
-            "button",
-            {
-              type: "button",
-              onClick: () => setOpen(false),
-              className: "rounded p-1 hover:bg-ph-muted",
-              "aria-label": "Close",
-              children: /* @__PURE__ */ jsx16(X2, { className: "h-4 w-4" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx16("div", { className: "flex flex-wrap gap-1.5 border-b border-ph-border px-4 py-2", children: presets.map((preset) => /* @__PURE__ */ jsx16(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              setPrompt(preset.prompt);
-              void ask(preset.prompt);
-            },
-            disabled: loading,
-            className: "rounded-md border border-ph-border px-2 py-1 text-xs text-ph-ink hover:bg-ph-muted disabled:opacity-50",
-            children: preset.label
-          },
-          preset.label
-        )) }),
-        /* @__PURE__ */ jsxs13("div", { className: "flex-1 space-y-3 overflow-y-auto p-4", children: [
-          error && /* @__PURE__ */ jsx16("p", { className: "bg-ph-danger/10 rounded-lg px-3 py-2 text-sm text-ph-danger", children: error }),
-          loading && /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 text-sm text-ph-mutedtext", children: [
-            /* @__PURE__ */ jsx16(Spinner, { className: "h-4 w-4 animate-spin" }),
-            "Thinking\u2026"
-          ] }),
-          answer && !loading && /* @__PURE__ */ jsxs13("div", { className: "rounded-lg bg-ph-muted px-3 py-2 text-sm text-ph-ink", children: [
-            /* @__PURE__ */ jsx16("p", { className: "whitespace-pre-wrap", children: answer }),
-            /* @__PURE__ */ jsxs13(
+      /* @__PURE__ */ jsxs15(
+        "aside",
+        {
+          className: `absolute inset-y-0 flex w-full max-w-md flex-col bg-ph-surface shadow-2xl ${launcherSide === "left" ? "left-0 border-r border-ph-border" : "right-0 border-l border-ph-border"}`,
+          "data-test": "suite-ask-ai-panel",
+          children: [
+            /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between border-b border-ph-border px-4 py-3", children: [
+              /* @__PURE__ */ jsxs15("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx18(Icon, { className: "h-4 w-4 shrink-0 text-ph-brand" }),
+                  /* @__PURE__ */ jsx18("span", { className: "text-sm font-semibold text-ph-ink", children: title })
+                ] }),
+                /* @__PURE__ */ jsx18("p", { className: "mt-0.5 text-[11px] text-ph-mutedtext", children: "Shared across your suite \xB7 same chat in every app" })
+              ] }),
+              /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1", children: [
+                messages.length > 0 ? /* @__PURE__ */ jsx18(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => void handleClear(),
+                    disabled: loading,
+                    className: "rounded-md px-2 py-1 text-xs text-ph-mutedtext hover:bg-ph-muted hover:text-ph-ink disabled:opacity-50",
+                    "data-test": "ask-ai-clear",
+                    children: "Clear"
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx18(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setOpen(false),
+                    className: "rounded p-1 hover:bg-ph-muted",
+                    "aria-label": "Close",
+                    children: /* @__PURE__ */ jsx18(X2, { className: "h-4 w-4" })
+                  }
+                )
+              ] })
+            ] }),
+            presets.length > 0 && messages.length === 0 ? /* @__PURE__ */ jsx18("div", { className: "flex flex-wrap gap-1.5 border-b border-ph-border px-4 py-2", children: presets.map((preset) => /* @__PURE__ */ jsx18(
               "button",
               {
                 type: "button",
-                onClick: () => void copyAnswer(),
-                className: "mt-2 inline-flex items-center gap-1 text-xs text-ph-mutedtext hover:text-ph-ink",
+                onClick: () => void ask(preset.prompt),
+                disabled: loading || hydrating,
+                className: "rounded-full border border-ph-border px-2.5 py-1 text-xs text-ph-ink hover:bg-ph-muted disabled:opacity-50",
+                children: preset.label
+              },
+              preset.label
+            )) }) : null,
+            /* @__PURE__ */ jsxs15(
+              "div",
+              {
+                ref: scrollerRef,
+                className: "flex-1 space-y-3 overflow-y-auto p-4",
                 children: [
-                  copied ? /* @__PURE__ */ jsx16(Check2, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx16(Copy, { className: "h-3 w-3" }),
-                  copied ? "Copied" : "Copy"
+                  error ? /* @__PURE__ */ jsx18("p", { className: "bg-ph-danger/10 rounded-lg px-3 py-2 text-sm text-ph-danger", children: error }) : null,
+                  hydrating && messages.length === 0 ? /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 text-sm text-ph-mutedtext", children: [
+                    /* @__PURE__ */ jsx18(Spinner, { className: "h-4 w-4 animate-spin" }),
+                    "Loading chat\u2026"
+                  ] }) : null,
+                  !hydrating && messages.length === 0 && !error ? /* @__PURE__ */ jsxs15("div", { className: "mt-10 px-2 text-center", children: [
+                    /* @__PURE__ */ jsx18("p", { className: "font-display text-base font-semibold text-ph-ink", children: "How can I help?" }),
+                    /* @__PURE__ */ jsx18("p", { className: "mt-2 text-sm leading-relaxed text-ph-subtle", children: emptyState })
+                  ] }) : null,
+                  messages.map((message, index) => {
+                    const isUser = message.role === "user";
+                    return /* @__PURE__ */ jsxs15(
+                      "div",
+                      {
+                        className: isUser ? "ml-8 rounded-2xl bg-ph-brand/10 px-3.5 py-2.5 text-sm text-ph-ink" : "mr-4 rounded-2xl bg-ph-muted px-3.5 py-2.5 text-sm text-ph-ink",
+                        "data-test": isUser ? "ask-ai-user" : "ask-ai-assistant",
+                        children: [
+                          /* @__PURE__ */ jsx18("p", { className: "whitespace-pre-wrap", children: message.content }),
+                          !isUser ? /* @__PURE__ */ jsxs15(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => void copyMessage(index, message.content),
+                              className: "mt-2 inline-flex items-center gap-1 text-xs text-ph-mutedtext hover:text-ph-ink",
+                              children: [
+                                copiedId === index ? /* @__PURE__ */ jsx18(Check2, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx18(Copy, { className: "h-3 w-3" }),
+                                copiedId === index ? "Copied" : "Copy"
+                              ]
+                            }
+                          ) : null
+                        ]
+                      },
+                      `${message.role}-${index}-${message.content.slice(0, 24)}`
+                    );
+                  }),
+                  loading ? /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 text-sm text-ph-mutedtext", children: [
+                    /* @__PURE__ */ jsx18(Spinner, { className: "h-4 w-4 animate-spin" }),
+                    "Thinking\u2026"
+                  ] }) : null
                 ]
               }
-            )
-          ] }),
-          !answer && !loading && !error && /* @__PURE__ */ jsx16("p", { className: "mt-8 text-center text-xs text-ph-mutedtext", children: emptyState })
-        ] }),
-        /* @__PURE__ */ jsx16("div", { className: "border-t border-ph-border p-3", children: /* @__PURE__ */ jsxs13("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsx16(
-            "textarea",
-            {
-              value: prompt,
-              onChange: (e) => setPrompt(e.target.value),
-              onKeyDown: (e) => {
-                if (e.key === "Enter" && !e.shiftKey) {
-                  e.preventDefault();
-                  void ask(prompt);
+            ),
+            /* @__PURE__ */ jsx18("div", { className: "border-t border-ph-border p-3", children: /* @__PURE__ */ jsxs15("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx18(
+                "textarea",
+                {
+                  value: prompt,
+                  onChange: (e) => setPrompt(e.target.value),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" && !e.shiftKey) {
+                      e.preventDefault();
+                      void ask(prompt);
+                    }
+                  },
+                  placeholder: "Ask anything\u2026",
+                  rows: 2,
+                  disabled: loading,
+                  "data-test": "ask-ai-input",
+                  className: "flex-1 resize-none rounded-xl border border-ph-border bg-ph-canvas p-2.5 text-sm text-ph-ink outline-none focus:ring-1 focus:ring-ph-brand"
                 }
-              },
-              placeholder: "Ask anything\u2026",
-              rows: 2,
-              disabled: loading,
-              className: "flex-1 resize-none rounded-lg border border-ph-border bg-ph-canvas p-2 text-sm text-ph-ink outline-none focus:ring-1 focus:ring-ph-brand"
-            }
-          ),
-          /* @__PURE__ */ jsx16(
-            "button",
-            {
-              type: "button",
-              onClick: () => void ask(prompt),
-              disabled: loading || !prompt.trim(),
-              className: "self-end rounded-lg bg-ph-brand px-3 py-2 text-sm font-medium text-white disabled:opacity-50",
-              children: "Ask"
-            }
-          )
-        ] }) })
-      ] })
-    ] })
+              ),
+              /* @__PURE__ */ jsx18(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => void ask(prompt),
+                  disabled: loading || !prompt.trim(),
+                  "data-test": "ask-ai-send",
+                  className: "self-end rounded-xl bg-ph-brand px-3.5 py-2 text-sm font-medium text-white disabled:opacity-50",
+                  children: "Ask"
+                }
+              )
+            ] }) })
+          ]
+        }
+      )
+    ] }) : null
   ] });
 }
 
+// src/suite/lib/use-sidebar-width.ts
+import {
+  useCallback as useCallback4,
+  useEffect as useEffect8,
+  useState as useState9
+} from "react";
+var SIDEBAR_RAIL_WIDTH = 56;
+var SIDEBAR_COLLAPSE_THRESHOLD = 80;
+var SIDEBAR_MIN_EXPANDED_WIDTH = 180;
+var SIDEBAR_MAX_WIDTH = 320;
+var SIDEBAR_DEFAULT_WIDTH = 320;
+function clampWidth(width) {
+  return Math.min(SIDEBAR_MAX_WIDTH, Math.max(SIDEBAR_RAIL_WIDTH, width));
+}
+function snapWidth(width) {
+  if (width <= SIDEBAR_COLLAPSE_THRESHOLD) return SIDEBAR_RAIL_WIDTH;
+  if (width < SIDEBAR_MIN_EXPANDED_WIDTH) return SIDEBAR_MIN_EXPANDED_WIDTH;
+  return Math.min(SIDEBAR_MAX_WIDTH, width);
+}
+function useSidebarWidth(storageKey) {
+  const [width, setWidth] = useState9(SIDEBAR_DEFAULT_WIDTH);
+  const [narrowViewport, setNarrowViewport] = useState9(false);
+  const collapsed = narrowViewport || width <= SIDEBAR_COLLAPSE_THRESHOLD;
+  useEffect8(() => {
+    let stored = null;
+    try {
+      stored = localStorage.getItem(storageKey);
+    } catch (e) {
+    }
+    if (!stored) return;
+    const parsed = Number.parseInt(stored, 10);
+    if (!Number.isNaN(parsed)) {
+      queueMicrotask(() => setWidth(snapWidth(clampWidth(parsed))));
+    }
+  }, [storageKey]);
+  useEffect8(() => {
+    const media = window.matchMedia("(max-width: 639px)");
+    const sync = () => setNarrowViewport(media.matches);
+    sync();
+    media.addEventListener("change", sync);
+    return () => media.removeEventListener("change", sync);
+  }, []);
+  const persist = useCallback4(
+    (value) => {
+      try {
+        localStorage.setItem(storageKey, String(value));
+      } catch (e) {
+      }
+    },
+    [storageKey]
+  );
+  const setCollapsed = useCallback4(
+    (value) => {
+      setWidth((current) => {
+        const next = value ? SIDEBAR_RAIL_WIDTH : current <= SIDEBAR_COLLAPSE_THRESHOLD ? SIDEBAR_DEFAULT_WIDTH : snapWidth(current);
+        persist(next);
+        return next;
+      });
+    },
+    [persist]
+  );
+  const resetWidth = useCallback4(() => {
+    setWidth(SIDEBAR_DEFAULT_WIDTH);
+    persist(SIDEBAR_DEFAULT_WIDTH);
+  }, [persist]);
+  const startResize = useCallback4(
+    (event) => {
+      event.preventDefault();
+      const startX = event.clientX;
+      const startWidth = width;
+      const onMove = (moveEvent) => {
+        setWidth(clampWidth(startWidth + moveEvent.clientX - startX));
+      };
+      const onUp = () => {
+        document.removeEventListener("pointermove", onMove);
+        document.removeEventListener("pointerup", onUp);
+        setWidth((current) => {
+          const snapped = snapWidth(current);
+          persist(snapped);
+          return snapped;
+        });
+      };
+      document.addEventListener("pointermove", onMove);
+      document.addEventListener("pointerup", onUp);
+    },
+    [persist, width]
+  );
+  return { width, collapsed, setCollapsed, resetWidth, startResize };
+}
+
 // src/suite/lib/motion.tsx
 import { LazyMotion, domAnimation, m } from "motion/react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function SuiteMotionProvider({ children }) {
-  return /* @__PURE__ */ jsx17(LazyMotion, { features: domAnimation, strict: true, children });
+  return /* @__PURE__ */ jsx19(LazyMotion, { features: domAnimation, strict: true, children });
 }
 var SUITE_SPRINGS = {
   /** Snappy panel/sheet entrances — small overshoot. */
@@ -1793,217 +2645,25 @@ var SUITE_SPRINGS = {
   press: { type: "spring", stiffness: 600, damping: 35, mass: 0.5 }
 };
 
-// src/suite/components/suite-layout.tsx
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
-var WIDTHS = {
-  full: "max-w-none",
-  wide: "max-w-7xl",
-  content: "max-w-6xl",
-  narrow: "max-w-4xl"
-};
-function SuiteBreadcrumbs({ items, className }) {
-  return /* @__PURE__ */ jsx18("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsx18("ol", { className: "flex min-w-0 items-center gap-1.5", children: items.map((item, index) => {
-    const isLast = index === items.length - 1;
-    return /* @__PURE__ */ jsxs14("li", { className: "flex min-w-0 items-center gap-1.5", children: [
-      index > 0 ? /* @__PURE__ */ jsx18("span", { className: "select-none text-ph-border", "aria-hidden": "true", children: "/" }) : null,
-      item.href && !isLast ? /* @__PURE__ */ jsx18(
-        "a",
-        {
-          href: item.href,
-          className: "truncate transition hover:text-ph-ink",
-          children: item.label
-        }
-      ) : /* @__PURE__ */ jsx18(
-        "span",
-        {
-          className: cn(
-            "truncate",
-            isLast ? "font-medium text-ph-ink" : "text-ph-subtle"
-          ),
-          "aria-current": isLast ? "page" : void 0,
-          children: item.label
-        }
-      )
-    ] }, index);
-  }) }) });
-}
-function SuitePage({
-  children,
-  width = "wide",
-  inset = true,
-  className,
-  as: Component = "div",
-  dataTest,
-  id,
-  role,
-  "aria-live": ariaLive
-}) {
-  return /* @__PURE__ */ jsx18(
-    Component,
-    {
-      id,
-      "data-test": dataTest,
-      role,
-      "aria-live": ariaLive,
-      className: cn(
-        "mx-auto flex w-full min-w-0 flex-col",
-        WIDTHS[width],
-        // Tight inset keeps page titles aligned without excessive whitespace.
-        inset && "px-4 pb-5 pt-2 sm:px-6 sm:pb-6 sm:pt-3 lg:px-8",
-        className
-      ),
-      children
-    }
-  );
-}
-function SuitePageHeader({
-  title,
-  description,
-  eyebrow,
-  actions,
-  className,
-  titleClassName,
-  dataTest,
-  /** Optional icon rendered before the title. */
-  icon,
-  /** Use the animated sun/moon icon from the Today page. */
-  todayIcon,
-  todayIconClassName,
-  /** Small badge/pill next to the title (e.g. "Beta", org name). */
-  badge,
-  /** Breadcrumb line rendered above the title. */
-  breadcrumb
-}) {
-  const resolvedIcon = todayIcon ? /* @__PURE__ */ jsx18(
-    TodayTimeIcon,
-    {
-      className: cn(
-        "h-6 w-6 sm:h-7 sm:w-7 text-amber-500",
-        todayIconClassName
-      )
-    }
-  ) : icon;
-  return /* @__PURE__ */ jsxs14(
-    "header",
-    {
-      "data-test": dataTest,
-      className: cn(
-        "flex items-start justify-between gap-4 pb-2 sm:pb-3",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs14("div", { className: "flex min-w-0 items-start gap-3", children: [
-          resolvedIcon ? /* @__PURE__ */ jsx18(
-            "div",
-            {
-              className: "hidden shrink-0 pt-1 sm:block",
-              "aria-hidden": "true",
-              children: resolvedIcon
-            }
-          ) : null,
-          /* @__PURE__ */ jsxs14("div", { className: "flex min-w-0 flex-col gap-1", children: [
-            eyebrow ? /* @__PURE__ */ jsx18("div", { className: "mb-0.5 flex min-w-0 items-center gap-1.5 text-xs text-ph-subtle", children: eyebrow }) : null,
-            breadcrumb ? /* @__PURE__ */ jsx18("div", { className: "mb-0.5 flex min-w-0 items-center gap-1.5 text-xs text-ph-subtle", children: breadcrumb }) : null,
-            /* @__PURE__ */ jsxs14("div", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [
-              /* @__PURE__ */ jsx18(
-                "h1",
-                {
-                  className: cn(
-                    "font-display text-[1.625rem] font-bold leading-tight tracking-tight text-ph-ink sm:text-[2.25rem]",
-                    titleClassName
-                  ),
-                  children: title
-                }
-              ),
-              badge ? /* @__PURE__ */ jsx18("span", { className: "rounded-md bg-ph-muted px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-ph-subtle", children: badge }) : null
-            ] }),
-            description ? /* @__PURE__ */ jsx18("div", { className: "mt-1 max-w-2xl text-pretty text-sm leading-5 text-ph-subtle", children: description }) : null
-          ] })
-        ] }),
-        actions ? /* @__PURE__ */ jsx18("div", { className: "flex shrink-0 items-center gap-2 pt-1", children: actions }) : null
-      ]
-    }
-  );
-}
-function SuiteToolbar({
-  children,
-  className,
-  label = "Page tools",
-  dataTest
-}) {
-  return /* @__PURE__ */ jsx18(
-    "div",
-    {
-      role: "toolbar",
-      "aria-label": label,
-      "data-test": dataTest,
-      className: cn("flex min-w-0 flex-wrap items-center gap-2", className),
-      children
-    }
-  );
-}
-function SuiteTabList({
-  children,
-  className,
-  label,
-  dataTest
-}) {
-  return /* @__PURE__ */ jsx18(
-    "nav",
-    {
-      "aria-label": label,
-      "data-test": dataTest,
-      className: cn(
-        "flex min-w-0 flex-wrap gap-2 [&_a]:min-h-[48px] [&_button]:min-h-[48px] sm:[&_a]:min-h-[44px] sm:[&_button]:min-h-[44px]",
-        className
-      ),
-      children
-    }
-  );
-}
-function SuiteSectionHeader({
-  title,
-  description,
-  action,
-  className
-}) {
-  return /* @__PURE__ */ jsxs14(
-    "div",
-    {
-      className: cn(
-        "flex min-w-0 flex-col gap-4 sm:flex-row sm:items-end sm:justify-between",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs14("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx18("h2", { className: "font-display text-balance text-lg font-semibold tracking-tight text-ph-ink sm:text-xl", children: title }),
-          description ? /* @__PURE__ */ jsx18("div", { className: "mt-1 max-w-2xl text-pretty text-sm leading-5 text-ph-subtle", children: description }) : null
-        ] }),
-        action ? /* @__PURE__ */ jsx18("div", { className: "flex min-h-[44px] shrink-0 items-center", children: action }) : null
-      ]
-    }
-  );
-}
-
 // src/suite/components/suite-skeleton.tsx
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 function SuiteSkeleton({
   className,
   lines = 1,
   circle,
   width
 }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
       className: cn("space-y-2", circle ? "flex flex-col items-center" : ""),
       "aria-hidden": true,
-      children: Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ jsx19(
+      children: Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ jsx20(
         "div",
         {
           className: "animate-[skeleton-stagger_0.6s_ease-out_both]",
           style: { animationDelay: `${index * 80}ms` },
-          children: /* @__PURE__ */ jsx19(
+          children: /* @__PURE__ */ jsx20(
             "div",
             {
               className: cn(
@@ -2027,35 +2687,35 @@ function SuiteSkeletonCard({
   rows = 3,
   header = true
 }) {
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       className: cn(
-        "ph-skeleton-card animate-[skeleton-stagger_0.5s_ease-out_both] rounded-2xl border border-ph-border/70 bg-ph-surface p-6 shadow-sm",
+        "ph-skeleton-card animate-[skeleton-stagger_0.5s_ease-out_both] rounded-2xl border border-ph-border bg-ph-surface p-6 shadow-sm",
         className
       ),
       "aria-hidden": true,
       children: [
-        header ? /* @__PURE__ */ jsxs15(
+        header ? /* @__PURE__ */ jsxs16(
           "div",
           {
             className: "mb-5 flex items-center gap-3 animate-[skeleton-stagger_0.5s_ease-out_both]",
             style: { animationDelay: "100ms" },
             children: [
-              /* @__PURE__ */ jsx19("div", { className: "ph-skeleton h-10 w-10 rounded-xl" }),
-              /* @__PURE__ */ jsxs15("div", { className: "flex-1 space-y-2", children: [
-                /* @__PURE__ */ jsx19("div", { className: "ph-skeleton h-4 w-1/3" }),
-                /* @__PURE__ */ jsx19("div", { className: "ph-skeleton h-3 w-1/2" })
+              /* @__PURE__ */ jsx20("div", { className: "ph-skeleton h-10 w-10 rounded-xl" }),
+              /* @__PURE__ */ jsxs16("div", { className: "flex-1 space-y-2", children: [
+                /* @__PURE__ */ jsx20("div", { className: "ph-skeleton h-4 w-1/3" }),
+                /* @__PURE__ */ jsx20("div", { className: "ph-skeleton h-3 w-1/2" })
               ] })
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsx19("div", { className: "space-y-3", children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20("div", { className: "space-y-3", children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsx20(
           "div",
           {
             className: "animate-[skeleton-stagger_0.5s_ease-out_both]",
             style: { animationDelay: `${200 + index * 80}ms` },
-            children: /* @__PURE__ */ jsx19(
+            children: /* @__PURE__ */ jsx20(
               "div",
               {
                 className: "ph-skeleton h-3",
@@ -2073,16 +2733,16 @@ function SuiteSkeletonList({
   className,
   items = 4
 }) {
-  return /* @__PURE__ */ jsx19("div", { className: cn("space-y-3", className), "aria-hidden": true, children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20("div", { className: cn("space-y-3", className), "aria-hidden": true, children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsx20(
     "div",
     {
       className: "animate-[skeleton-stagger_0.6s_ease-out_both]",
       style: { animationDelay: `${index * 100}ms` },
-      children: /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-3 rounded-xl border border-ph-border/60 bg-ph-surface p-4", children: [
-        /* @__PURE__ */ jsx19("div", { className: "ph-skeleton h-10 w-10 rounded-lg" }),
-        /* @__PURE__ */ jsxs15("div", { className: "min-w-0 flex-1 space-y-2", children: [
-          /* @__PURE__ */ jsx19("div", { className: "ph-skeleton h-3.5 w-3/4" }),
-          /* @__PURE__ */ jsx19("div", { className: "ph-skeleton h-3 w-1/2" })
+      children: /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-3 rounded-xl border border-ph-border bg-ph-surface p-4", children: [
+        /* @__PURE__ */ jsx20("div", { className: "ph-skeleton h-10 w-10 rounded-lg" }),
+        /* @__PURE__ */ jsxs16("div", { className: "min-w-0 flex-1 space-y-2", children: [
+          /* @__PURE__ */ jsx20("div", { className: "ph-skeleton h-3.5 w-3/4" }),
+          /* @__PURE__ */ jsx20("div", { className: "ph-skeleton h-3 w-1/2" })
         ] })
       ] })
     },
@@ -2097,22 +2757,22 @@ function SuiteEmptyState({
   className,
   size = "md"
 }) {
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       className: cn(
-        "relative overflow-hidden rounded-2xl border border-ph-border/80 bg-ph-surface text-center",
+        "relative overflow-hidden rounded-2xl border border-ph-border bg-ph-surface text-center",
         size === "sm" ? "px-5 py-8" : "px-6 py-12 sm:px-10 sm:py-16",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs15("div", { className: "pointer-events-none absolute inset-0 overflow-hidden opacity-60", "aria-hidden": true, children: [
-          /* @__PURE__ */ jsx19("div", { className: "absolute -left-10 -top-10 h-40 w-40 rounded-full bg-ph-brand/10 blur-3xl" }),
-          /* @__PURE__ */ jsx19("div", { className: "absolute -bottom-10 -right-10 h-40 w-40 rounded-full bg-ph-accent/10 blur-3xl" })
+        /* @__PURE__ */ jsxs16("div", { className: "pointer-events-none absolute inset-0 overflow-hidden opacity-60", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx20("div", { className: "absolute -left-10 -top-10 h-40 w-40 rounded-full bg-ph-brand/10 blur-3xl" }),
+          /* @__PURE__ */ jsx20("div", { className: "absolute -bottom-10 -right-10 h-40 w-40 rounded-full bg-ph-accent/10 blur-3xl" })
         ] }),
-        /* @__PURE__ */ jsxs15("div", { className: "relative", children: [
-          icon ? /* @__PURE__ */ jsx19("div", { className: "mx-auto mb-4 inline-flex items-center justify-center rounded-2xl bg-ph-muted p-3 shadow-sm ring-1 ring-black/[0.06]", children: icon }) : null,
-          /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsxs16("div", { className: "relative", children: [
+          icon ? /* @__PURE__ */ jsx20("div", { className: "mx-auto mb-4 inline-flex items-center justify-center rounded-2xl bg-ph-muted p-3 shadow-sm ring-1 ring-black/[0.06]", children: icon }) : null,
+          /* @__PURE__ */ jsx20(
             "h3",
             {
               className: cn(
@@ -2122,8 +2782,8 @@ function SuiteEmptyState({
               children: title
             }
           ),
-          description ? /* @__PURE__ */ jsx19("p", { className: "mx-auto mt-2 max-w-sm text-sm leading-relaxed text-ph-subtle", children: description }) : null,
-          action ? /* @__PURE__ */ jsx19("div", { className: "mt-5 flex flex-wrap items-center justify-center gap-2", children: action }) : null
+          description ? /* @__PURE__ */ jsx20("p", { className: "mx-auto mt-2 max-w-sm text-sm leading-relaxed text-ph-subtle", children: description }) : null,
+          action ? /* @__PURE__ */ jsx20("div", { className: "mt-5 flex flex-wrap items-center justify-center gap-2", children: action }) : null
         ] })
       ]
     }
@@ -2132,23 +2792,25 @@ function SuiteEmptyState({
 
 // src/suite/components/suite-settings-mobile-nav.tsx
 import { isValidElement } from "react";
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 function SuiteSettingsMobileNav({
   items,
   activeHref,
   onSelect,
-  dataTest
+  dataTest,
+  ariaLabel = "Settings sections",
+  className
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "nav",
     {
       "data-test": dataTest,
-      "aria-label": "Settings sections",
-      className: "-mx-4 px-4 lg:hidden",
-      children: /* @__PURE__ */ jsx20("div", { className: "flex snap-x gap-2 overflow-x-auto pb-3 pt-1 scrollbar-hide [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: items.map((item) => {
+      "aria-label": ariaLabel,
+      className: cn("suite-settings-mobile-nav lg:hidden", className),
+      children: /* @__PURE__ */ jsx21("div", { className: "flex snap-x gap-2 overflow-x-auto pb-3 pt-1 scrollbar-hide [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: items.map((item) => {
         const Icon = item.icon;
         const active = activeHref === item.href || activeHref.startsWith(`${item.href}/`);
-        const iconNode = isValidElement(item.icon) ? item.icon : /* @__PURE__ */ jsx20(
+        const iconNode = isValidElement(item.icon) ? item.icon : /* @__PURE__ */ jsx21(
           Icon,
           {
             className: cn(
@@ -2158,7 +2820,7 @@ function SuiteSettingsMobileNav({
             "aria-hidden": true
           }
         );
-        return /* @__PURE__ */ jsxs16(
+        return /* @__PURE__ */ jsxs17(
           "button",
           {
             type: "button",
@@ -2166,14 +2828,14 @@ function SuiteSettingsMobileNav({
             onClick: () => onSelect(item.href),
             "aria-current": active ? "page" : void 0,
             className: cn(
-              "group relative flex shrink-0 snap-start items-center gap-2 rounded-full px-3.5 py-2.5 text-sm font-medium transition",
+              "group relative flex shrink-0 snap-start items-center gap-2 rounded-full px-3.5 py-2.5 text-sm font-medium transition-colors",
               "min-h-[44px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand",
               active ? "bg-ph-ink text-ph-surface shadow-sm" : "bg-ph-surface text-ph-subtle ring-1 ring-ph-border hover:bg-ph-muted hover:text-ph-ink"
             ),
             children: [
               iconNode,
-              /* @__PURE__ */ jsx20("span", { className: "whitespace-nowrap", children: item.label }),
-              active ? /* @__PURE__ */ jsx20("span", { className: "absolute inset-x-0 -bottom-3 h-0.5 rounded-full bg-ph-ink lg:hidden" }) : null
+              /* @__PURE__ */ jsx21("span", { className: "whitespace-nowrap", children: item.label }),
+              active ? /* @__PURE__ */ jsx21("span", { className: "absolute inset-x-0 -bottom-3 h-0.5 rounded-full bg-ph-ink lg:hidden" }) : null
             ]
           },
           item.href
@@ -2185,7 +2847,7 @@ function SuiteSettingsMobileNav({
 
 // src/suite/components/suite-sidebar.tsx
 import Link2 from "next/link";
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 function renderNode(node, collapsed) {
   if (typeof node === "function") return node(collapsed);
   return node;
@@ -2202,7 +2864,7 @@ function SuiteSidebar({
   className,
   surface = false
 }) {
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       className: cn(
@@ -2211,7 +2873,7 @@ function SuiteSidebar({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs17(
+        /* @__PURE__ */ jsxs18(
           "div",
           {
             className: cn(
@@ -2220,12 +2882,12 @@ function SuiteSidebar({
               collapsed ? "flex-col items-center gap-1 px-1 py-2" : "h-14 items-center justify-between gap-2 px-3"
             ),
             children: [
-              /* @__PURE__ */ jsx21("div", { className: cn("min-w-0", collapsed ? "shrink-0" : "flex-1"), children: renderNode(appSwitcher, collapsed) }),
-              collapsed ? null : /* @__PURE__ */ jsx21("div", { className: "shrink-0", children: renderNode(notificationBell, collapsed) })
+              /* @__PURE__ */ jsx22("div", { className: cn("min-w-0", collapsed ? "shrink-0" : "flex-1"), children: renderNode(appSwitcher, collapsed) }),
+              collapsed ? null : /* @__PURE__ */ jsx22("div", { className: "shrink-0", children: renderNode(notificationBell, collapsed) })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs17(
+        /* @__PURE__ */ jsxs18(
           "div",
           {
             className: cn(
@@ -2234,17 +2896,17 @@ function SuiteSidebar({
               collapsed ? "px-1.5 py-2" : "p-2"
             ),
             children: [
-              /* @__PURE__ */ jsxs17(
+              /* @__PURE__ */ jsxs18(
                 "nav",
                 {
                   "aria-label": "Pages",
                   className: "shrink-0 space-y-0.5",
                   children: [
-                    /* @__PURE__ */ jsx21("div", { className: cn("mb-3", collapsed && "flex justify-center"), children: renderNode(contextSwitcher, collapsed) }),
-                    /* @__PURE__ */ jsx21("div", { className: "space-y-0.5", children: navItems.map((item) => {
+                    /* @__PURE__ */ jsx22("div", { className: cn("mb-3", collapsed && "flex justify-center"), children: renderNode(contextSwitcher, collapsed) }),
+                    /* @__PURE__ */ jsx22("div", { className: "space-y-0.5", children: navItems.map((item) => {
                       const Icon = item.icon;
                       const active = Boolean(item.active);
-                      const link = /* @__PURE__ */ jsxs17(
+                      const link = /* @__PURE__ */ jsxs18(
                         Link2,
                         {
                           href: item.href,
@@ -2257,7 +2919,7 @@ function SuiteSidebar({
                             collapsed ? "mx-auto size-10 shrink-0 justify-center gap-0 px-0 py-0" : "w-full px-2.5 py-2"
                           ),
                           children: [
-                            /* @__PURE__ */ jsx21(
+                            /* @__PURE__ */ jsx22(
                               "span",
                               {
                                 className: cn(
@@ -2265,7 +2927,7 @@ function SuiteSidebar({
                                   item.iconClassName
                                 ),
                                 "aria-hidden": true,
-                                children: /* @__PURE__ */ jsx21(
+                                children: /* @__PURE__ */ jsx22(
                                   Icon,
                                   {
                                     className: "h-full w-full",
@@ -2274,7 +2936,7 @@ function SuiteSidebar({
                                 )
                               }
                             ),
-                            /* @__PURE__ */ jsx21(
+                            /* @__PURE__ */ jsx22(
                               "span",
                               {
                                 className: cn(
@@ -2285,17 +2947,17 @@ function SuiteSidebar({
                                 children: item.label
                               }
                             ),
-                            !collapsed && item.badge ? /* @__PURE__ */ jsx21("span", { className: "relative ml-auto shrink-0", children: item.badge }) : null
+                            !collapsed && item.badge ? /* @__PURE__ */ jsx22("span", { className: "relative ml-auto shrink-0", children: item.badge }) : null
                           ]
                         },
                         item.label
                       );
-                      return collapsed ? /* @__PURE__ */ jsx21(Tooltip, { content: item.label, side: "right", children: link }, item.label) : link;
+                      return collapsed ? /* @__PURE__ */ jsx22(Tooltip, { content: item.label, side: "right", children: link }, item.label) : link;
                     }) })
                   ]
                 }
               ),
-              secondaryNav ? /* @__PURE__ */ jsx21(
+              secondaryNav ? /* @__PURE__ */ jsx22(
                 "div",
                 {
                   className: "min-h-0 flex-1",
@@ -2306,7 +2968,7 @@ function SuiteSidebar({
             ]
           }
         ),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(
           "div",
           {
             className: cn(
@@ -2314,7 +2976,7 @@ function SuiteSidebar({
               surface ? "bg-ph-surface" : "bg-ph-canvas",
               collapsed ? "p-1.5" : "p-3"
             ),
-            children: /* @__PURE__ */ jsxs17(
+            children: /* @__PURE__ */ jsxs18(
               "div",
               {
                 className: cn(
@@ -2323,7 +2985,7 @@ function SuiteSidebar({
                 ),
                 children: [
                   renderNode(userMenu, collapsed),
-                  !collapsed && footerExtras ? /* @__PURE__ */ jsx21("div", { className: "ml-auto shrink-0", children: renderNode(footerExtras, collapsed) }) : null
+                  !collapsed && footerExtras ? /* @__PURE__ */ jsx22("div", { className: "ml-auto shrink-0", children: renderNode(footerExtras, collapsed) }) : null
                 ]
               }
             )
@@ -2335,7 +2997,7 @@ function SuiteSidebar({
 }
 
 // src/suite/components/suite-app-layout.tsx
-import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 function SuiteAppLayout({
   sidebar,
   children,
@@ -2343,41 +3005,59 @@ function SuiteAppLayout({
   bottomNav,
   sidebarWidth = 240,
   collapsed = false,
+  lockMainScroll = false,
   onStartResize,
   onResetWidth,
   className
 }) {
-  return /* @__PURE__ */ jsxs18("div", { "data-test": "app-shell", className: cn("min-h-screen", className), children: [
-    /* @__PURE__ */ jsxs18("div", { className: "hidden lg:flex h-screen overflow-hidden", children: [
-      /* @__PURE__ */ jsxs18(
-        "aside",
-        {
-          className: "relative flex shrink-0 flex-col border-r border-ph-border transition-[width] duration-200 ease-out",
-          style: { width: `${sidebarWidth}px` },
-          children: [
-            sidebar,
-            onStartResize ? /* @__PURE__ */ jsx22(
-              "div",
-              {
-                role: "separator",
-                "aria-orientation": "vertical",
-                "aria-label": "Resize sidebar",
-                onPointerDown: onStartResize,
-                onDoubleClick: onResetWidth,
-                className: "absolute inset-y-0 right-0 z-10 w-1 cursor-col-resize transition-colors hover:bg-[color-mix(in_oklab,var(--ph-accent)_30%,transparent)]"
-              }
-            ) : null
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx22("main", { className: "min-w-0 flex-1 overflow-y-auto bg-ph-canvas", children })
-    ] }),
-    /* @__PURE__ */ jsxs18("div", { className: "flex min-h-screen flex-col lg:hidden", children: [
-      mobileHeader ? /* @__PURE__ */ jsx22("div", { className: "shrink-0", children: mobileHeader }) : null,
-      /* @__PURE__ */ jsx22("main", { className: "min-w-0 flex-1 overflow-y-auto bg-ph-canvas", children }),
-      bottomNav ? /* @__PURE__ */ jsx22("div", { className: "shrink-0", children: bottomNav }) : null
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs19(
+    "div",
+    {
+      "data-test": "app-shell",
+      className: cn("flex min-h-dvh lg:h-screen lg:overflow-hidden", className),
+      children: [
+        /* @__PURE__ */ jsxs19(
+          "aside",
+          {
+            className: "relative hidden shrink-0 flex-col overflow-hidden border-r border-ph-border transition-[width] duration-200 ease-out lg:flex",
+            style: { width: `${sidebarWidth}px` },
+            "data-collapsed": collapsed ? "true" : "false",
+            children: [
+              sidebar,
+              onStartResize ? /* @__PURE__ */ jsx23(
+                "div",
+                {
+                  role: "separator",
+                  "aria-orientation": "vertical",
+                  "aria-label": "Resize sidebar",
+                  onPointerDown: onStartResize,
+                  onDoubleClick: onResetWidth,
+                  className: "absolute inset-y-0 right-0 z-10 w-1 cursor-col-resize transition-colors hover:bg-[color-mix(in_oklab,var(--ph-accent)_30%,transparent)]"
+                }
+              ) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs19("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
+          mobileHeader ? /* @__PURE__ */ jsx23("div", { className: "shrink-0 lg:hidden", children: mobileHeader }) : null,
+          /* @__PURE__ */ jsx23(
+            "main",
+            {
+              id: "main-content",
+              tabIndex: -1,
+              "data-lock-scroll": lockMainScroll ? "true" : void 0,
+              className: cn(
+                "flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden overscroll-contain bg-ph-canvas focus:outline-none",
+                lockMainScroll ? "overflow-hidden" : "overflow-y-auto"
+              ),
+              children
+            }
+          ),
+          bottomNav ? /* @__PURE__ */ jsx23("div", { className: "shrink-0 lg:hidden", children: bottomNav }) : null
+        ] })
+      ]
+    }
+  );
 }
 export {
   APP_ACCENTS,
@@ -2389,10 +3069,16 @@ export {
   AppSwitcherMark,
   CommandPaletteHost,
   DeferredChrome,
+  SIDEBAR_COLLAPSE_THRESHOLD,
+  SIDEBAR_DEFAULT_WIDTH,
+  SIDEBAR_MAX_WIDTH,
+  SIDEBAR_MIN_EXPANDED_WIDTH,
+  SIDEBAR_RAIL_WIDTH,
   SUITE_APPS2 as SUITE_APPS,
   SUITE_APP_MAP,
   SUITE_GLYPHS,
   SUITE_ICON_NAMES,
+  SUITE_OPEN_ASK_AI_EVENT,
   SUITE_SPRINGS,
   SourceAppGlyph,
   SuiteAiPanel,
@@ -2410,6 +3096,7 @@ export {
   SuitePage,
   SuitePageHeader,
   SuiteSectionHeader,
+  SuiteSettingsLayout,
   SuiteSettingsMobileNav,
   SuiteSidebar,
   SuiteSkeleton,
@@ -2419,11 +3106,15 @@ export {
   SuiteThemeProvider,
   SuiteToolbar,
   SuiteUserMenu,
+  TodayAskAiCard,
   TodayCalibrating,
+  TodayEmptyAction,
   TodayEmptyState,
   TodayHero,
+  TodayLayout,
   TodayPageFrame,
   TodayPanel,
+  TodayPrimaryAction,
   TodaySection,
   TodayTimeIcon,
   TodayTopBar,
@@ -2433,9 +3124,12 @@ export {
   cn,
   getTodayGreeting,
   m,
+  openSuiteAskAi,
+  resolveSuiteNotificationHref,
   sourceToSuiteApp,
   suiteAppBaseUrl,
   suiteAppLabel,
   useIdleMount,
+  useSidebarWidth,
   useSuiteTheme
 };