@xenide-io/the-old-ui-theme 0.7.1 → 0.9.0

package/dist/suite.mjs

@@ -1,15 +1,31 @@
 import {
+  Alert,
+  Badge,
   Button,
+  Card,
   DropdownItem,
   DropdownMenu,
+  FileUpload,
   Input,
   Modal,
-  Tooltip
-} from "./chunk-YB4TBWHV.mjs";
+  Select,
+  Toggle,
+  Tooltip,
+  cn
+} from "./chunk-2EO5VCXP.mjs";
+import {
+  suiteThemeBootScript
+} from "./chunk-BS7BZI5W.mjs";
 import {
   SuiteThemeProvider,
-  useSuiteTheme
-} from "./chunk-NOI42JNZ.mjs";
+  clearCookie,
+  readCookie,
+  useSuiteTheme,
+  writeCookie
+} from "./chunk-APKRZQRO.mjs";
+import {
+  SUITE_THEME_COOKIE
+} from "./chunk-IULORI3A.mjs";
 import {
   __spreadProps,
   __spreadValues
@@ -59,7 +75,7 @@ import { Refresh as RefreshCw } from "iconoir-react";
 // src/suite/lib/cn.ts
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-function cn(...inputs) {
+function cn2(...inputs) {
   return twMerge(clsx(inputs));
 }
 
@@ -88,10 +104,10 @@ var APP_ACCENTS = {
   },
   shellstack: {
     label: "ShellStack",
-    accent: "#5e5893",
-    tile: "#5e5893",
-    onTile: "#ffffff",
-    onTileAccent: "#c4a7e7"
+    accent: "#0078D4",
+    tile: "#FFFFFF",
+    onTile: "#111114",
+    onTileAccent: "#0078D4"
   },
   crew: {
     label: "Crew",
@@ -100,12 +116,12 @@ var APP_ACCENTS = {
     onTile: "#ffffff",
     onTileAccent: "#a5f3fc"
   },
-  nakama: {
-    label: "Nakama",
-    accent: "#b8eb44",
-    tile: "#17101f",
-    onTile: "#fff2e2",
-    onTileAccent: "#f54b87"
+  shelly: {
+    label: "Shelly",
+    accent: "#0078D4",
+    tile: "#1B1B1F",
+    onTile: "#ECECF1",
+    onTileAccent: "#00BCF2"
   }
 };
 var APP_GLYPHS = {
@@ -114,7 +130,7 @@ var APP_GLYPHS = {
   kraken: "squid-doc",
   shellstack: "stack-hex",
   crew: "crew-bot",
-  nakama: "nakama-fist"
+  shelly: "shelly-snail"
 };
 
 // src/suite/icons/glyph-parts.tsx
@@ -237,22 +253,15 @@ var SUITE_GLYPHS = {
       { kind: "path", d: "M9.6 14.6q2.4 1.7 4.8 0", accent: true }
     ]
   },
-  "nakama-fist": {
-    description: "Nakama \u2014 raised fist with neon crew signal lines",
+  "shelly-snail": {
+    description: "Shelly \u2014 smiling snail with spiral shell and ball-tipped antennae",
     elements: [
       {
         kind: "path",
-        d: "M192 0c17.7 0 32 14.3 32 32v112h-64V32c0-17.7 14.3-32 32-32zM64 64c0-17.7-32-32 32-32s32 14.3 32 32v80H64V64zm192 0c0-17.7 14.3-32 32-32s32 14.3 32 32v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V64zm96 64c0-17.7 14.3-32 32-32s32 14.3 32 32v64c0 17.7-14.3 32-32 32s-32-14.3-32-32v-64zm-96 88v-.6c9.4 5.4 20.3 8.6 32 8.6 13.2 0 25.4-4 35.6-10.8 8.7 24.9 32.5 42.8 60.4 42.8 11.7 0 22.6-3.1 32-8.6v8.6c0 52.3-25.1 98.8-64 128v96c0 17.7-14.3 32-32 32H160c-17.7 0-32-14.3-32-32v-78.4c-17.3-7.9-33.2-18.8-46.9-32.5L69.5 357.5C45.5 333.5 32 300.9 32 267v-27c0-35.3 28.7-64 64-64h88c22.1 0 40 17.9 40 40s-17.9 40-40 40h-56c-8.8 0-16 7.2-16 16s7.2 16 16 16h56c39.8 0 72-32.2 72-72z",
+        d: "M2931 37263 c-1542 -737 -1730 -2870 -339 -3838 427 -297 339 1 1730 -5802 102 -425 101 -430 -391 -950 -1003 -1062 -1175 -1507 -1834 -4748 -1525 -7505 -1398 -10142 668 -13875 2061 -3724 4835 -5715 9185 -6592 2869 -579 4928 -582 8750 -15 1293 192 3408 506 4700 697 6839 1012 8768 1422 9385 1993 1103 1021 425 2357 -1733 3414 l-944 462 916 620 c5469 3705 5358 13657 -209 18536 -2592 2272 -5133 3185 -8865 3185 -3361 0 -5965 -948 -8226 -2994 -501 -453 -824 -546 -824 -235 0 70 301 1416 668 2991 668 2863 668 2863 1053 3101 1156 713 1317 2506 305 3395 -1583 1390 -3787 234 -3592 -1885 61 -673 61 -673 -1165 -3013 l-1227 -2340 -1303 -10 -1303 -10 -1267 2463 c-1202 2337 -1261 2480 -1155 2784 610 1750 -1309 3465 -2983 2666z m1743 -1216 c309 -354 379 -713 232 -1191 -205 -669 -183 -731 1300 -3583 1821 -3503 1488 -3127 2631 -2970 816 112 1053 109 1729 -25 587 -117 813 -127 901 -42 64 63 778 1394 1586 2958 1470 2844 1470 2844 1345 3365 -208 868 106 1458 852 1598 1380 258 1829 -1605 545 -2260 -501 -255 -427 -36 -1292 -3813 l-725 -3166 513 -617 c1210 -1453 1328 -2014 1709 -8068 224 -3562 368 -4603 790 -5688 820 -2113 2775 -3739 5643 -4695 2847 -948 5589 -1186 7567 -654 l850 228 1070 -471 c2352 -1034 2946 -1824 1719 -2288 -1707 -647 -14950 -2665 -17489 -2665 -5500 0 -9506 1872 -11922 5573 -2564 3926 -2753 6473 -1075 14490 542 2586 754 3104 1682 4102 778 837 757 677 322 2415 -188 754 -529 2180 -757 3170 -228 990 -436 1878 -463 1973 -27 95 -246 260 -486 366 -685 303 -961 1115 -610 1795 335 647 1332 736 1833 163z m21523 -6801 c6385 -1036 10732 -7090 9753 -13583 -628 -4167 -2948 -6812 -6688 -7626 -6108 -1329 -10963 4878 -8256 10556 1608 3373 6202 4320 8566 1766 2055 -2219 1699 -6037 -662 -7096 -2082 -935 -4058 98 -4184 2187 -93 1553 1143 2685 2287 2093 607 -313 709 -1340 148 -1481 -564 -142 -462 -962 120 -962 1033 2 1610 1420 1015 2496 -814 1471 -2971 1452 -3972 -37 -1601 -2380 159 -5650 3046 -5658 2778 -8 4680 2269 4503 5390 -265 4668 -5206 7028 -9332 4457 -3911 -2438 -4439 -8515 -1057 -12167 l561 -607 -647 327 c-2556 1290 -3718 2796 -4088 5301 -61 411 -201 2166 -311 3898 -312 4898 -436 5802 -952 6962 l-261 588 532 493 c1419 1314 3729 2427 5782 2786 639 112 3218 59 4097 -83z M5574 23846 c-476 -475 -431 -1229 97 -1644 835 -658 1687 739 970 1590 -326 388 -715 407 -1067 54z M12075 23992 c-669 -390 -584 -1598 134 -1896 608 -252 1135 289 1057 1085 -72 728 -654 1124 -1191 811z M7801 22451 c-626 -754 1585 -1648 2460 -995 485 362 676 688 546 932 -155 288 -335 267 -719 -84 -549 -502 -1237 -469 -1728 82 -224 251 -389 271 -559 65z",
         filled: true,
-        transform: "translate(2.5 1.75) scale(.0425 .0375)"
-      },
-      { kind: "path", d: "M7 18h3.5M12.2 18h3M8.5 19.5h6", accent: true },
-      {
-        kind: "path",
-        d: "M4.8 5.8h2.7M4.8 7.4h1.4M18.5 17.1h1.7",
-        accent: true
-      },
-      { kind: "circle", cx: 18.5, cy: 4.5, r: 0.8, accent: true, filled: true }
+        transform: "translate(0.88 22.8) scale(0.0005714 -0.0005714)"
+      }
     ]
   },
   workspace: {
@@ -366,7 +375,7 @@ function SuiteAppIcon({
       width: px,
       height: px,
       viewBox: "0 0 24 24",
-      className: cn("shrink-0", className),
+      className: cn2("shrink-0", className),
       style,
       role: label ? "img" : void 0,
       "aria-label": label,
@@ -394,104 +403,55 @@ function SuiteAppIcon({
   );
 }
 
-// src/suite/icons/suite-icon.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var TODAY_SUN_STYLE = `
-@media (prefers-reduced-motion: no-preference) {
-  .suite-icon-today-sun-rays {
-    animation: suite-icon-today-sun-spin 18s linear infinite;
-    transform-box: fill-box;
-    transform-origin: center;
-  }
-}
-@keyframes suite-icon-today-sun-spin {
-  to { transform: rotate(360deg); }
-}
-`;
-function SuiteIcon({
-  name,
-  size = 24,
-  accent,
-  strokeWidth = 2,
-  animated = true,
-  label,
-  className,
-  style
-}) {
-  const glyph = SUITE_GLYPHS[name];
-  const accentHex = accent ? APP_ACCENTS[accent].accent : void 0;
-  const mergedStyle = accentHex ? __spreadProps(__spreadValues({}, style), { "--suite-icon-accent": accentHex }) : style;
-  return /* @__PURE__ */ jsxs4(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      className: cn("shrink-0", className),
-      style: mergedStyle,
-      role: label ? "img" : void 0,
-      "aria-label": label,
-      "aria-hidden": label ? void 0 : true,
-      children: [
-        glyph.animatedAccent && animated ? /* @__PURE__ */ jsx4("style", { children: TODAY_SUN_STYLE }) : null,
-        /* @__PURE__ */ jsx4(
-          GlyphParts,
-          {
-            elements: glyph.elements,
-            accentClassName: glyph.animatedAccent && animated ? "suite-icon-today-sun-rays" : void 0
-          }
-        )
-      ]
-    }
-  );
-}
-
 // src/suite/components/today-ui.tsx
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var APP_META = {
   shellstack: { name: "ShellStack" },
   tides: { name: "Tides" },
   turtletime: { name: "TurtleTime" },
-  kraken: { name: "Kraken" }
+  kraken: { name: "Kraken" },
+  shelly: { name: "Shelly" }
 };
 var SUITE_APPS = [
   "shellstack",
   "tides",
   "turtletime",
-  "kraken"
+  "kraken",
+  "shelly"
 ];
 function sourceToSuiteApp(source) {
-  if (source === "tides" || source === "turtletime" || source === "kraken") {
-    return source;
+  const normalised = source.trim().toLowerCase();
+  if (normalised === "tides" || normalised === "turtletime" || normalised === "kraken" || normalised === "shelly") {
+    return normalised;
   }
   return "shellstack";
 }
 function suiteAppLabel(source) {
   return APP_META[sourceToSuiteApp(source)].name;
 }
-var SOURCE_APP_GLYPH = {
-  shellstack: "stack-hex",
-  tides: "kanban-wave",
-  turtletime: "timer-shell",
-  kraken: "squid-doc"
+var SOURCE_APP_LOGOS = {
+  shellstack: "/icon-shellstack.svg",
+  tides: "/tides-icon.svg",
+  turtletime: "/turtletime-icon.svg",
+  kraken: "/kraken-icon.svg",
+  shelly: "/shelly-icon.svg"
 };
 function SourceAppGlyph({
   source,
   className
 }) {
   const app = sourceToSuiteApp(source);
-  return /* @__PURE__ */ jsx5(
-    SuiteIcon,
-    {
-      name: SOURCE_APP_GLYPH[app],
-      accent: app,
-      className: cn("h-4 w-4 shrink-0 text-ph-subtle", className)
-    }
+  return (
+    // These assets are copied into each product's public directory.
+    // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ jsx4(
+      "img",
+      {
+        src: SOURCE_APP_LOGOS[app],
+        alt: "",
+        className: cn2("h-7 w-7 shrink-0 rounded-lg object-contain", className)
+      }
+    )
   );
 }
 function formatLongDate(date = /* @__PURE__ */ new Date()) {
@@ -504,23 +464,23 @@ function SuiteAppStrip({
   className,
   icons
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
-      className: cn(
+      className: cn2(
         "flex flex-wrap items-center justify-center gap-2.5",
         className
       ),
       "aria-label": "ShellStack suite apps",
       children: SUITE_APPS.map((app) => {
         var _a;
-        return /* @__PURE__ */ jsxs5(
+        return /* @__PURE__ */ jsxs4(
           "div",
           {
             className: "flex items-center gap-2 rounded-full border border-ph-border bg-ph-surface px-2.5 py-1.5 shadow-sm",
             children: [
-              (_a = icons == null ? void 0 : icons[app]) != null ? _a : /* @__PURE__ */ jsx5(SuiteAppIcon, { app, size: "sm" }),
-              /* @__PURE__ */ jsx5("span", { className: "text-xs font-medium text-ph-subtle", children: APP_META[app].name })
+              (_a = icons == null ? void 0 : icons[app]) != null ? _a : /* @__PURE__ */ jsx4(SuiteAppIcon, { app, size: "sm" }),
+              /* @__PURE__ */ jsx4("span", { className: "text-xs font-medium text-ph-subtle", children: APP_META[app].name })
             ]
           },
           app
@@ -530,7 +490,7 @@ function SuiteAppStrip({
   );
 }
 function AnimatedSun({ className }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs4(
     "svg",
     {
       width: "40",
@@ -538,14 +498,14 @@ function AnimatedSun({ className }) {
       viewBox: "0 0 40 40",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      className: cn(className),
+      className: cn2(className),
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsxs5("linearGradient", { id: "animatedSunCenter", x1: "0", y1: "0", x2: "40", y2: "40", children: [
-          /* @__PURE__ */ jsx5("stop", { stopColor: "#f59e0b" }),
-          /* @__PURE__ */ jsx5("stop", { offset: "1", stopColor: "#fb923c" })
+        /* @__PURE__ */ jsx4("defs", { children: /* @__PURE__ */ jsxs4("linearGradient", { id: "animatedSunCenter", x1: "0", y1: "0", x2: "40", y2: "40", children: [
+          /* @__PURE__ */ jsx4("stop", { stopColor: "#f59e0b" }),
+          /* @__PURE__ */ jsx4("stop", { offset: "1", stopColor: "#fb923c" })
         ] }) }),
-        /* @__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(
+        /* @__PURE__ */ jsx4("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__ */ jsx4(
           "line",
           {
             x1: "20",
@@ -559,13 +519,13 @@ function AnimatedSun({ className }) {
           },
           angle
         )) }),
-        /* @__PURE__ */ jsx5("circle", { cx: "20", cy: "20", r: "9", fill: "url(#animatedSunCenter)" })
+        /* @__PURE__ */ jsx4("circle", { cx: "20", cy: "20", r: "9", fill: "url(#animatedSunCenter)" })
       ]
     }
   );
 }
 function AnimatedMoon({ className }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs4(
     "svg",
     {
       width: "40",
@@ -573,23 +533,23 @@ function AnimatedMoon({ className }) {
       viewBox: "0 0 40 40",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      className: cn(className),
+      className: cn2(className),
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsxs5("linearGradient", { id: "animatedMoonBody", x1: "0", y1: "0", x2: "40", y2: "40", children: [
-          /* @__PURE__ */ jsx5("stop", { stopColor: "#a5b4fc" }),
-          /* @__PURE__ */ jsx5("stop", { offset: "1", stopColor: "#818cf8" })
+        /* @__PURE__ */ jsx4("defs", { children: /* @__PURE__ */ jsxs4("linearGradient", { id: "animatedMoonBody", x1: "0", y1: "0", x2: "40", y2: "40", children: [
+          /* @__PURE__ */ jsx4("stop", { stopColor: "#a5b4fc" }),
+          /* @__PURE__ */ jsx4("stop", { offset: "1", stopColor: "#818cf8" })
         ] }) }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx4(
           "path",
           {
             d: "M27.5 25.5A11 11 0 1 1 14.5 9.6a9 9 0 1 0 13 15.9Z",
             fill: "url(#animatedMoonBody)"
           }
         ),
-        /* @__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" })
+        /* @__PURE__ */ jsxs4("g", { className: "opacity-70 motion-safe:animate-[pulse_10s_ease-in-out_infinite] motion-reduce:animate-none", children: [
+          /* @__PURE__ */ jsx4("circle", { cx: "29", cy: "10", r: "1.2", fill: "#c7d2fe" }),
+          /* @__PURE__ */ jsx4("circle", { cx: "34", cy: "16", r: "0.9", fill: "#c7d2fe" })
         ] })
       ]
     }
@@ -598,7 +558,7 @@ function AnimatedMoon({ className }) {
 function TodayTimeIcon({ className }) {
   const hour = (/* @__PURE__ */ new Date()).getHours();
   const isNight = hour >= 18 || hour < 6;
-  return isNight ? /* @__PURE__ */ jsx5(AnimatedMoon, { className }) : /* @__PURE__ */ jsx5(AnimatedSun, { className });
+  return isNight ? /* @__PURE__ */ jsx4(AnimatedMoon, { className }) : /* @__PURE__ */ jsx4(AnimatedSun, { className });
 }
 function TodayTopBar({
   refreshing,
@@ -607,17 +567,17 @@ function TodayTopBar({
   appIcon,
   appName
 }) {
-  const icon = appIcon != null ? appIcon : /* @__PURE__ */ jsx5(TodayTimeIcon, { className: "h-6 w-6 sm:h-7 sm:w-7 text-amber-500" });
-  return /* @__PURE__ */ jsxs5("header", { className: "flex items-center justify-between gap-4", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 items-center gap-3", children: [
-      /* @__PURE__ */ jsx5("div", { className: "hidden shrink-0 sm:block", "aria-hidden": "true", children: icon }),
-      /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [
-        /* @__PURE__ */ jsx5("h1", { className: "font-display text-[1.625rem] font-bold leading-tight tracking-tight text-ph-ink sm:text-[2.25rem]", children: "Today" }),
-        appName ? /* @__PURE__ */ jsx5("span", { className: "rounded-md bg-ph-muted px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-ph-subtle", children: appName }) : null,
-        /* @__PURE__ */ jsx5("span", { className: "text-sm text-ph-subtle", children: formatLongDate() })
+  const icon = appIcon != null ? appIcon : /* @__PURE__ */ jsx4(TodayTimeIcon, { className: "h-6 w-6 sm:h-7 sm:w-7 text-amber-500" });
+  return /* @__PURE__ */ jsxs4("header", { className: "flex items-center justify-between gap-4", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 items-center gap-3", children: [
+      /* @__PURE__ */ jsx4("div", { className: "hidden shrink-0 sm:block", "aria-hidden": "true", children: icon }),
+      /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [
+        /* @__PURE__ */ jsx4("h1", { className: "font-display text-[1.625rem] font-bold leading-tight tracking-tight text-ph-ink sm:text-[2.25rem]", children: "Today" }),
+        appName ? /* @__PURE__ */ jsx4("span", { className: "rounded-md bg-ph-muted px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-ph-subtle", children: appName }) : null,
+        /* @__PURE__ */ jsx4("span", { className: "text-sm text-ph-subtle", children: formatLongDate() })
       ] })
     ] }),
-    /* @__PURE__ */ jsx5("div", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx4("div", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ jsx4(
       "button",
       {
         type: "button",
@@ -626,10 +586,10 @@ function TodayTopBar({
         className: "press-subtle inline-flex h-10 w-10 items-center justify-center rounded-lg text-ph-subtle transition hover:bg-ph-surface hover:text-ph-ink disabled:opacity-50",
         "data-test": "today-refresh",
         "aria-label": "Refresh today",
-        children: /* @__PURE__ */ jsx5(
+        children: /* @__PURE__ */ jsx4(
           RefreshCw,
           {
-            className: cn("h-4 w-4", refreshing && "animate-spin"),
+            className: cn2("h-4 w-4", refreshing && "animate-spin"),
             "aria-hidden": true
           }
         )
@@ -669,8 +629,8 @@ function TodayHero({
   brief,
   briefMeta
 }) {
-  return /* @__PURE__ */ jsxs5("div", { className: "mt-4 sm:mt-6", children: [
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs4("div", { className: "mt-4 sm:mt-6", children: [
+    /* @__PURE__ */ jsx4(
       "p",
       {
         className: "today-hero max-w-2xl font-display text-lg font-semibold tracking-tight text-ph-ink sm:text-xl sm:leading-snug",
@@ -678,9 +638,9 @@ function TodayHero({
       },
       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
+    brief ? /* @__PURE__ */ jsxs4("div", { className: "mt-4 max-w-2xl", "data-test": "today-focus-brief", children: [
+      /* @__PURE__ */ jsx4("p", { className: "text-[15px] leading-[1.65] text-ph-ink", children: brief }),
+      briefMeta ? /* @__PURE__ */ jsx4("p", { className: "mt-1.5 text-xs text-ph-mutedtext", children: briefMeta }) : null
     ] }) : null
   ] });
 }
@@ -696,20 +656,20 @@ function TodayPrimaryAction({
   className,
   dataTest = "today-primary-action"
 }) {
-  const classes = cn(
+  const classes = cn2(
     "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
+  const body = /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx4("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__ */ jsxs4("span", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx4("span", { className: "block text-sm font-semibold tracking-tight sm:text-base", children: label }),
+      description ? /* @__PURE__ */ jsx4("span", { className: "mt-0.5 block text-xs opacity-80 sm:text-sm", children: description }) : null
     ] }),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx4(
       "span",
       {
         className: "today-primary-action__chevron shrink-0 text-base opacity-60 transition group-hover:translate-x-0.5 group-hover:opacity-100",
@@ -719,7 +679,7 @@ function TodayPrimaryAction({
     )
   ] });
   if (href && !onClick) {
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx4(
       "a",
       {
         href,
@@ -730,7 +690,7 @@ function TodayPrimaryAction({
       }
     );
   }
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx4(
     "button",
     {
       type: "button",
@@ -746,33 +706,33 @@ function TodayPrimaryAction({
 function TodayEmptyAction({
   title,
   description,
-  actionLabel,
+  actionLabel: actionLabel2,
   href,
   onClick,
   dataTest
 }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs4(
     "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(
+        /* @__PURE__ */ jsx4("p", { className: "text-sm font-semibold text-ph-ink", children: title }),
+        description ? /* @__PURE__ */ jsx4("p", { className: "mx-auto mt-1 max-w-sm text-xs leading-relaxed text-ph-subtle sm:text-sm", children: description }) : null,
+        actionLabel2 && (href || onClick) ? href ? /* @__PURE__ */ jsx4(
           "a",
           {
             href,
             className: "mt-2.5 inline-flex text-sm font-semibold text-ph-brand hover:underline",
-            children: actionLabel
+            children: actionLabel2
           }
-        ) : /* @__PURE__ */ jsx5(
+        ) : /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
             onClick,
             className: "mt-2.5 inline-flex text-sm font-semibold text-ph-brand hover:underline",
-            children: actionLabel
+            children: actionLabel2
           }
         ) : null
       ]
@@ -785,16 +745,16 @@ function TodayLayout({
   aside,
   className
 }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
-      className: cn("mt-5 space-y-6 sm:mt-6", className),
+      className: cn2("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
+        primary ? /* @__PURE__ */ jsx4("div", { className: "max-w-md", children: primary }) : null,
+        /* @__PURE__ */ jsxs4("div", { className: "grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(16rem,20rem)] lg:items-start lg:gap-8", children: [
+          /* @__PURE__ */ jsx4("div", { className: "min-w-0 space-y-8", children: main }),
+          aside ? /* @__PURE__ */ jsx4("aside", { className: "space-y-3 lg:sticky lg:top-6 lg:self-start", children: aside }) : null
         ] })
       ]
     }
@@ -808,22 +768,30 @@ function TodayAskAiCard({
   onClick,
   href
 }) {
-  const classes = cn(
+  const classes = cn2(
     "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 })
+  const body = /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx4(
+      "img",
+      {
+        src: "/shelly-icon.svg",
+        alt: "",
+        "aria-hidden": true,
+        className: "h-5 w-5 shrink-0 object-contain"
+      }
+    ),
+    /* @__PURE__ */ jsxs4("span", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs4("span", { className: "flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1", children: [
+        /* @__PURE__ */ jsx4("span", { className: "font-display text-sm font-bold tracking-tight text-ph-ink", children: title }),
+        /* @__PURE__ */ jsx4("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 })
+      /* @__PURE__ */ jsx4("span", { className: "mt-1 block text-sm leading-relaxed text-ph-subtle", children: description })
     ] })
   ] });
   if (onClick) {
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx4(
       "button",
       {
         type: "button",
@@ -835,9 +803,9 @@ function TodayAskAiCard({
     );
   }
   if (href) {
-    return /* @__PURE__ */ jsx5("a", { href, className: classes, "data-test": "today-ask-ai", children: body });
+    return /* @__PURE__ */ jsx4("a", { href, className: classes, "data-test": "today-ask-ai", children: body });
   }
-  return /* @__PURE__ */ jsx5("div", { className: classes, "data-test": "today-ask-ai", children: body });
+  return /* @__PURE__ */ jsx4("div", { className: classes, "data-test": "today-ask-ai", children: body });
 }
 function TodaySection({
   icon: Icon,
@@ -848,22 +816,22 @@ function TodaySection({
   testId,
   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(
+  return /* @__PURE__ */ jsxs4("section", { "data-test": testId, className: "space-y-5", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 items-start gap-3.5", children: [
+        /* @__PURE__ */ jsx4(
           "span",
           {
-            className: cn(
+            className: cn2(
               "inline-flex h-10 w-10 sm:h-11 sm:w-11 shrink-0 items-center justify-center rounded-2xl shadow-sm ring-1 ring-black/[0.06]",
               iconClassName != null ? iconClassName : "bg-ph-muted text-ph-ink"
             ),
-            children: /* @__PURE__ */ jsx5(Icon, { className: "h-5 w-5", "aria-hidden": true })
+            children: /* @__PURE__ */ jsx4(Icon, { className: "h-5 w-5", "aria-hidden": true })
           }
         ),
-        /* @__PURE__ */ jsxs5("div", { className: "min-w-0 pt-0.5", children: [
-          /* @__PURE__ */ jsx5("h2", { className: "font-display text-lg font-bold tracking-tight text-ph-ink", children: title }),
-          description ? /* @__PURE__ */ jsx5("p", { className: "mt-1 max-w-xl text-sm leading-relaxed text-ph-subtle", children: description }) : null
+        /* @__PURE__ */ jsxs4("div", { className: "min-w-0 pt-0.5", children: [
+          /* @__PURE__ */ jsx4("h2", { className: "font-display text-lg font-bold tracking-tight text-ph-ink", children: title }),
+          description ? /* @__PURE__ */ jsx4("p", { className: "mt-1 max-w-xl text-sm leading-relaxed text-ph-subtle", children: description }) : null
         ] })
       ] }),
       action
@@ -875,10 +843,10 @@ function TodayPanel({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
-      className: cn(
+      className: cn2(
         "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
       ),
@@ -890,41 +858,38 @@ function TodayEmptyState({
   title,
   description
 }) {
-  return /* @__PURE__ */ jsxs5("div", { className: "border-ph-border/80 rounded-xl border border-dashed px-5 py-8 text-center", children: [
-    /* @__PURE__ */ jsx5("p", { className: "text-sm font-semibold text-ph-ink", children: title }),
-    description ? /* @__PURE__ */ jsx5("p", { className: "mt-1.5 text-sm leading-relaxed text-ph-subtle", children: description }) : null
+  return /* @__PURE__ */ jsxs4("div", { className: "border-ph-border/80 rounded-xl border border-dashed px-5 py-8 text-center", children: [
+    /* @__PURE__ */ jsx4("p", { className: "text-sm font-semibold text-ph-ink", children: title }),
+    description ? /* @__PURE__ */ jsx4("p", { className: "mt-1.5 text-sm leading-relaxed text-ph-subtle", children: description }) : null
   ] });
 }
 
 // src/suite/components/app-switcher.tsx
 import Image from "next/image";
 import { useState } from "react";
-import {
-  NavArrowDown as ChevronDown,
-  OpenNewWindow
-} from "iconoir-react";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { NavArrowDown as ChevronDown, OpenNewWindow } from "iconoir-react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function appSwitcherTriggerClass(open, collapsed = false) {
-  return cn(
+  return cn2(
     "group flex min-w-0 items-center gap-2 rounded-lg border px-2 py-1.5 text-left transition-all duration-200",
     collapsed ? "h-11 w-11 justify-center px-0 py-0" : "w-full",
     open ? "border-ph-brand/30 bg-ph-muted shadow-[0_1px_2px_rgba(0,0,0,0.06)] ring-1 ring-ph-brand/15" : "border-transparent hover:border-ph-border hover:bg-ph-muted/80 hover:shadow-sm"
   );
 }
 function appSwitcherMarkClass() {
-  return "h-8 w-8 shrink-0 rounded-lg shadow-[0_1px_2px_rgba(0,0,0,0.1),0_4px_12px_rgba(0,0,0,0.08)] ring-1 ring-black/[0.06]";
+  return "h-8 w-8 shrink-0 rounded-lg";
 }
 function appSwitcherMenuItemClass() {
-  return "rounded-lg px-2 py-2 data-[highlighted]:bg-transparent hover:bg-ph-muted/80";
+  return "rounded-lg px-2 py-2 data-[highlighted]:bg-transparent hover:bg-ph-muted/80 focus-visible:shadow-none";
 }
 function AppSwitcherMark({
   children,
   collapsed
 }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     "span",
     {
-      className: cn(
+      className: cn2(
         "relative shrink-0",
         collapsed && "group-hover:scale-[1.02]"
       ),
@@ -937,18 +902,18 @@ function AppSwitcherChevron({
   collapsed = false
 }) {
   if (collapsed) {
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx5(
       "span",
       {
-        className: cn(
+        className: cn2(
           "absolute bottom-0 right-0 flex h-3 w-3 items-center justify-center rounded-full border border-ph-border bg-ph-surface shadow-sm transition-colors",
           open && "border-ph-brand/40 bg-ph-brand/10"
         ),
         "aria-hidden": true,
-        children: /* @__PURE__ */ jsx6(
+        children: /* @__PURE__ */ jsx5(
           ChevronDown,
           {
-            className: cn(
+            className: cn2(
               "h-2 w-2 text-ph-mutedtext transition-transform duration-200",
               open && "rotate-180 text-ph-brand"
             )
@@ -957,18 +922,18 @@ function AppSwitcherChevron({
       }
     );
   }
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     "span",
     {
-      className: cn(
+      className: cn2(
         "border-ph-border/80 flex h-5 w-5 shrink-0 items-center justify-center rounded-lg border bg-ph-canvas shadow-sm transition-all duration-200",
         open ? "border-ph-brand/35 bg-ph-brand/10 text-ph-brand" : "text-ph-mutedtext group-hover:border-ph-border group-hover:bg-ph-surface"
       ),
       "aria-hidden": true,
-      children: /* @__PURE__ */ jsx6(
+      children: /* @__PURE__ */ jsx5(
         ChevronDown,
         {
-          className: cn(
+          className: cn2(
             "h-3 w-3 transition-transform duration-200",
             open && "rotate-180"
           )
@@ -990,7 +955,7 @@ function AppSwitcher({
   triggerDataTest
 }) {
   const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     DropdownMenu2,
     {
       "aria-label": "Switch application",
@@ -1001,26 +966,25 @@ function AppSwitcher({
       align: "start",
       open,
       onOpenChange: setOpen,
-      trigger: /* @__PURE__ */ jsxs6(
+      trigger: /* @__PURE__ */ jsxs5(
         "span",
         {
           className: appSwitcherTriggerClass(open, collapsed),
           "data-test": "app-switcher-trigger",
-          "aria-expanded": open,
           children: [
-            /* @__PURE__ */ jsxs6(AppSwitcherMark, { collapsed, children: [
+            /* @__PURE__ */ jsxs5(AppSwitcherMark, { collapsed, children: [
               mark,
-              collapsed ? /* @__PURE__ */ jsx6(AppSwitcherChevron, { open, collapsed: true }) : null
+              collapsed ? /* @__PURE__ */ jsx5(AppSwitcherChevron, { open, collapsed: true }) : null
             ] }),
             !collapsed ? title : null,
-            !collapsed ? /* @__PURE__ */ jsx6(AppSwitcherChevron, { open }) : null
+            !collapsed ? /* @__PURE__ */ jsx5(AppSwitcherChevron, { open }) : null
           ]
         }
       ),
-      children: /* @__PURE__ */ jsxs6("div", { id: "app-switcher-menu", className: "p-1", "data-test": "app-switcher-menu", children: [
-        /* @__PURE__ */ jsx6("p", { className: "px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-ph-mutedtext", children: "Switch application" }),
-        apps.filter((app) => app.slug !== currentApp).map((app) => /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx6(
+      children: /* @__PURE__ */ jsxs5("div", { id: "app-switcher-menu", className: "p-1", "data-test": "app-switcher-menu", children: [
+        /* @__PURE__ */ jsx5("p", { className: "px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-ph-mutedtext", children: "Switch application" }),
+        apps.filter((app) => app.slug !== currentApp).map((app) => /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx5(
             DropdownItem2,
             {
               id: `switch-app-${app.slug}`,
@@ -1030,9 +994,9 @@ function AppSwitcher({
                 setOpen(false);
                 onSelect(app);
               },
-              className: cn(appSwitcherMenuItemClass(), "pr-11"),
-              children: /* @__PURE__ */ jsxs6("span", { className: "flex min-w-0 items-center gap-3", children: [
-                /* @__PURE__ */ jsx6(
+              className: cn2(appSwitcherMenuItemClass(), "pr-11"),
+              children: /* @__PURE__ */ jsxs5("span", { className: "flex min-w-0 items-center gap-3", children: [
+                /* @__PURE__ */ jsx5(
                   Image,
                   {
                     src: app.icon,
@@ -1042,17 +1006,16 @@ function AppSwitcher({
                     className: "h-7 w-7 shrink-0 rounded-md object-contain"
                   }
                 ),
-                /* @__PURE__ */ jsxs6("span", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ jsx6("span", { className: "block truncate text-sm font-medium text-ph-ink", children: app.name }),
-                  /* @__PURE__ */ jsx6("span", { className: "block truncate text-xs text-ph-mutedtext", children: app.description })
+                /* @__PURE__ */ jsxs5("span", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx5("span", { className: "block truncate text-sm font-medium text-ph-ink", children: app.name }),
+                  /* @__PURE__ */ jsx5("span", { className: "block truncate text-xs text-ph-mutedtext", children: app.description })
                 ] })
               ] })
             }
           ),
-          /* @__PURE__ */ jsx6(
-            "button",
+          /* @__PURE__ */ jsx5(
+            DropdownItem2,
             {
-              type: "button",
               id: `switch-app-${app.slug}-new-tab`,
               "data-test": `switch-app-${app.slug}-new-tab`,
               "aria-label": `Open ${app.name} in a new tab`,
@@ -1061,8 +1024,9 @@ function AppSwitcher({
                 setOpen(false);
                 onSelect(app, { newTab: true });
               },
-              className: "absolute right-1.5 top-1/2 z-[1] flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-md text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ph-brand/35",
-              children: /* @__PURE__ */ jsx6(OpenNewWindow, { className: "h-4 w-4", "aria-hidden": "true" })
+              className: "absolute right-1.5 top-1/2 z-[1] flex h-8 -translate-y-1/2 justify-center rounded-md p-0 text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:shadow-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ph-brand/35",
+              style: { width: "2rem" },
+              children: /* @__PURE__ */ jsx5(OpenNewWindow, { className: "h-4 w-4", "aria-hidden": "true" })
             }
           )
         ] }, app.slug))
@@ -1084,7 +1048,7 @@ var SUITE_APPS2 = [
     description: "Organisation and billing",
     icon: "/icon-shellstack.svg",
     landing: "/home",
-    baseUrlEnv: "NEXT_PUBLIC_SHELLSTACK_URL",
+    baseUrlEnv: "NEXT_PUBLIC_PORTAL_URL",
     baseUrlFallback: "http://localhost:3002"
   },
   {
@@ -1115,12 +1079,12 @@ var SUITE_APPS2 = [
     baseUrlFallback: "http://localhost:3003"
   },
   {
-    slug: "nakama",
-    name: "Nakama",
+    slug: "shelly",
+    name: "Shelly",
     description: "AI teammates",
-    icon: "/nakama-icon.svg",
+    icon: "/shelly-icon.svg",
     landing: "/today",
-    baseUrlEnv: "NEXT_PUBLIC_NAKAMA_URL",
+    baseUrlEnv: "NEXT_PUBLIC_SHELLY_URL",
     baseUrlFallback: "http://localhost:3004"
   }
 ];
@@ -1134,16 +1098,20 @@ var SOURCE_APP_SLUG = {
   turtletime: "turtletime",
   tides: "tides",
   kraken: "kraken",
-  nakama: "nakama",
+  shelly: "shelly",
   portal: "shellstack",
   shellstack: "shellstack"
 };
+function suiteAppSlugForNotificationSource(sourceApp) {
+  var _a;
+  return (_a = SOURCE_APP_SLUG[(sourceApp || "").toLowerCase()]) != null ? _a : null;
+}
 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()];
+  const slug = suiteAppSlugForNotificationSource(sourceApp);
   if (!slug) return path;
   return `${suiteAppBaseUrl(slug)}${path}`;
 }
@@ -1174,7 +1142,7 @@ function classifySuiteHref(href, bases, currentOrigin = "") {
 }
 
 // src/suite/components/suite-notification-bell.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var POLL_MS = 6e4;
 function timeAgo(iso) {
   const then = new Date(iso).getTime();
@@ -1270,6 +1238,28 @@ function SuiteNotificationBell({
       const target = resolveSuiteNotificationHref(n.href, n.source_app);
       if (!target) return;
       if (/^https?:\/\//i.test(target)) {
+        try {
+          const url = new URL(target);
+          const sourceApp = suiteAppSlugForNotificationSource(n.source_app);
+          const path = `${url.pathname}${url.search}${url.hash}`;
+          if (url.origin === window.location.origin) {
+            router.push(path);
+            return;
+          }
+          if (sourceApp && sourceApp !== "shellstack") {
+            const sourceOrigin = new URL(suiteAppBaseUrl(sourceApp)).origin;
+            if (url.origin === sourceOrigin) {
+              const launchUrl = new URL(
+                `/launch/${sourceApp}`,
+                suiteAppBaseUrl("shellstack")
+              );
+              launchUrl.searchParams.set("next", path);
+              window.location.assign(launchUrl.toString());
+              return;
+            }
+          }
+        } catch (e) {
+        }
         window.location.assign(target);
         return;
       }
@@ -1292,7 +1282,7 @@ function SuiteNotificationBell({
     } catch (e) {
     }
   }, [markAllRead]);
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs6(
     DropdownMenu2,
     {
       "aria-label": unread > 0 ? `Notifications, ${unread} unread` : "Notifications",
@@ -1302,14 +1292,14 @@ function SuiteNotificationBell({
       panelClassName: "w-80 overflow-hidden p-0",
       open,
       onOpenChange,
-      trigger: /* @__PURE__ */ jsx7("span", { className: "relative inline-flex h-11 w-11 items-center justify-center overflow-visible rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink", children: /* @__PURE__ */ jsxs7("span", { className: "relative inline-flex h-5 w-5", children: [
-        /* @__PURE__ */ jsx7(Bell, { className: "h-5 w-5", strokeWidth: 1.75, "aria-hidden": true }),
-        unread > 0 ? /* @__PURE__ */ jsx7("span", { className: "pointer-events-none absolute -right-2 -top-2 z-[1] flex h-4 min-w-4 items-center justify-center rounded-full bg-ph-brand px-1 text-[9px] font-semibold leading-none text-white ring-2 ring-ph-surface", children: unread > 9 ? "9+" : unread }) : null
+      trigger: /* @__PURE__ */ jsx6("span", { className: "relative inline-flex h-11 w-11 items-center justify-center overflow-visible rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink", children: /* @__PURE__ */ jsxs6("span", { className: "relative inline-flex h-5 w-5", children: [
+        /* @__PURE__ */ jsx6(Bell, { className: "h-5 w-5", strokeWidth: 1.75, "aria-hidden": true }),
+        unread > 0 ? /* @__PURE__ */ jsx6("span", { className: "pointer-events-none absolute -right-2 -top-2 z-[1] flex h-4 min-w-4 items-center justify-center rounded-full bg-ph-brand px-1 text-[9px] font-semibold leading-none text-[var(--ph-on-accent)] ring-2 ring-ph-surface", children: unread > 9 ? "9+" : unread }) : null
       ] }) }),
       children: [
-        /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between border-b border-ph-border px-3 py-2", children: [
-          /* @__PURE__ */ jsx7("span", { className: "text-sm font-semibold text-ph-ink", children: "Notifications" }),
-          unread > 0 ? /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between border-b border-ph-border px-3 py-2", children: [
+          /* @__PURE__ */ jsx6("span", { className: "text-sm font-semibold text-ph-ink", children: "Notifications" }),
+          unread > 0 ? /* @__PURE__ */ jsx6(
             "button",
             {
               type: "button",
@@ -1321,27 +1311,26 @@ function SuiteNotificationBell({
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsx7("div", { className: "max-h-80 overflow-y-auto py-1", children: items.length === 0 ? /* @__PURE__ */ jsx7("p", { className: "px-3 py-6 text-center text-sm text-ph-mutedtext", children: "You're all caught up." }) : items.map((n) => /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsx6("div", { className: "max-h-80 overflow-y-auto py-1", children: items.length === 0 ? /* @__PURE__ */ jsx6("p", { className: "px-3 py-6 text-center text-sm text-ph-mutedtext", children: "You're all caught up." }) : items.map((n) => /* @__PURE__ */ jsxs6(
           "button",
           {
-            type: "button",
             id: `${dataTest}-item-${n.id}`,
             "data-test": `${dataTest}-item-${n.id}`,
             onClick: () => void openItem(n),
             className: "flex w-full flex-col gap-0.5 px-3 py-2 text-left transition hover:bg-ph-muted",
             children: [
-              /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-2", children: [
-                !n.read_at ? /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-2", children: [
+                !n.read_at ? /* @__PURE__ */ jsx6(
                   "span",
                   {
                     className: "h-1.5 w-1.5 shrink-0 rounded-full bg-ph-brand",
                     "aria-hidden": true
                   }
                 ) : null,
-                /* @__PURE__ */ jsx7("span", { className: "truncate text-sm font-medium text-ph-ink", children: n.title })
+                /* @__PURE__ */ jsx6("span", { className: "truncate text-sm font-medium text-ph-ink", children: n.title })
               ] }),
-              n.body ? /* @__PURE__ */ jsx7("span", { className: "line-clamp-2 text-xs text-ph-mutedtext", children: n.body }) : null,
-              /* @__PURE__ */ jsxs7("span", { className: "text-[11px] uppercase tracking-wide text-ph-subtle", children: [
+              n.body ? /* @__PURE__ */ jsx6("span", { className: "line-clamp-2 text-xs text-ph-mutedtext", children: n.body }) : null,
+              /* @__PURE__ */ jsxs6("span", { className: "text-[11px] uppercase tracking-wide text-ph-subtle", children: [
                 n.source_app,
                 " \xB7 ",
                 timeAgo(n.created_at)
@@ -1357,7 +1346,7 @@ function SuiteNotificationBell({
 
 // src/suite/components/command-palette-host.tsx
 import { useEffect as useEffect2, useState as useState3 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function isEditableTarget() {
   if (typeof document === "undefined") return false;
   const el = document.activeElement;
@@ -1389,7 +1378,7 @@ function CommandPaletteHost({
     return () => window.removeEventListener("keydown", onKey);
   }, [open]);
   if (!isAuthenticated) return null;
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     CommandPalette,
     {
       items,
@@ -1423,17 +1412,18 @@ function useIdleMount(timeoutMs = 1200) {
 }
 
 // src/suite/components/deferred-chrome.tsx
-import { Fragment as Fragment3, jsx as jsx9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8 } from "react/jsx-runtime";
 function DeferredChrome({ children }) {
   const ready = useIdleMount();
   if (!ready) return null;
-  return /* @__PURE__ */ jsx9(Fragment3, { children });
+  return /* @__PURE__ */ jsx8(Fragment3, { children });
 }
 
 // src/suite/components/suite-mobile-drawer.tsx
-import { useEffect as useEffect4, useRef, useState as useState5 } from "react";
+import * as Dialog from "@radix-ui/react-dialog";
+import { useEffect as useEffect4, useState as useState5 } from "react";
 import { Xmark as X } from "iconoir-react";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function SuiteMobileDrawer({
   open,
   onClose,
@@ -1455,11 +1445,6 @@ function SuiteMobileDrawer({
 }) {
   const [rendered, setRendered] = useState5(open);
   const [shown, setShown] = useState5(open);
-  const panelRef = useRef(null);
-  const onCloseRef = useRef(onClose);
-  useEffect4(() => {
-    onCloseRef.current = onClose;
-  }, [onClose]);
   useEffect4(() => {
     if (open) {
       queueMicrotask(() => setRendered(true));
@@ -1476,86 +1461,61 @@ function SuiteMobileDrawer({
     const timeout = window.setTimeout(() => setRendered(false), durationMs);
     return () => window.clearTimeout(timeout);
   }, [open, durationMs]);
-  useEffect4(() => {
-    if (!open) return;
-    const onKeyDown = (event) => {
-      if (event.key === "Escape") onCloseRef.current();
-    };
-    window.addEventListener("keydown", onKeyDown);
-    const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-    const frame = requestAnimationFrame(() => {
-      var _a;
-      return (_a = panelRef.current) == null ? void 0 : _a.focus();
-    });
-    return () => {
-      window.removeEventListener("keydown", onKeyDown);
-      document.body.style.overflow = previousOverflow;
-      cancelAnimationFrame(frame);
-      if (previouslyFocused == null ? void 0 : previouslyFocused.isConnected) previouslyFocused.focus();
-    };
-  }, [open]);
   if (!rendered) return null;
-  return /* @__PURE__ */ jsxs8("div", { "data-test": dataTest, className: "no-print fixed inset-0 z-50 lg:hidden", children: [
-    /* @__PURE__ */ jsx10(
-      "button",
+  return /* @__PURE__ */ jsx9(Dialog.Root, { open, onOpenChange: (nextOpen) => !nextOpen && onClose(), children: /* @__PURE__ */ jsxs7(Dialog.Portal, { forceMount: true, children: [
+    /* @__PURE__ */ jsx9(
+      Dialog.Overlay,
       {
-        type: "button",
+        forceMount: true,
         id: backdropId,
-        "data-test": backdropDataTest,
-        tabIndex: -1,
-        className: cn(
-          "absolute inset-0 bg-black/25 backdrop-blur-sm motion-safe:transition-opacity motion-safe:ease-spring-subtle",
+        "data-test": backdropDataTest != null ? backdropDataTest : dataTest,
+        "aria-label": backdropLabel,
+        className: cn2(
+          "no-print fixed inset-0 z-50 bg-black/25 backdrop-blur-sm motion-safe:transition-opacity motion-safe:ease-spring-subtle lg:hidden",
           shown ? "opacity-100" : "opacity-0"
         ),
-        style: { transitionDuration: `${durationMs}ms` },
-        onClick: onClose,
-        "aria-label": backdropLabel
+        style: { transitionDuration: `${durationMs}ms` }
       }
     ),
-    /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsx9(Dialog.Content, { forceMount: true, asChild: true, children: /* @__PURE__ */ jsxs7(
       "aside",
       {
-        ref: panelRef,
         role: "dialog",
-        "aria-modal": "true",
-        "aria-label": dialogLabel,
-        tabIndex: -1,
         "data-test": panelDataTest,
-        className: cn(
-          "relative flex h-dvh max-h-dvh 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",
+        "aria-modal": "true",
+        className: cn2(
+          "fixed inset-y-0 left-0 z-50 flex h-dvh max-h-dvh 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 lg:hidden",
+          side === "right" && "left-auto right-0",
           shown ? "translate-x-0" : side === "right" ? "translate-x-full" : "-translate-x-full",
           panelClassName
         ),
         style: { transitionDuration: `${durationMs}ms` },
         children: [
-          showCloseButton ? /* @__PURE__ */ jsxs8(
+          /* @__PURE__ */ jsx9(Dialog.Title, { className: "sr-only", children: dialogLabel }),
+          showCloseButton ? /* @__PURE__ */ jsxs7(
             "div",
             {
-              className: cn(
+              className: cn2(
                 "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(
+                title ? /* @__PURE__ */ jsx9("span", { className: "truncate text-sm font-semibold text-ph-ink", children: title }) : null,
+                /* @__PURE__ */ jsx9(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx9(
                   "button",
                   {
                     type: "button",
                     id: closeButtonId,
                     "data-test": closeButtonDataTest,
-                    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 })
+                    children: /* @__PURE__ */ jsx9(X, { className: "h-4 w-4", "aria-hidden": true })
                   }
-                )
+                ) })
               ]
             }
           ) : null,
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx9(
             "div",
             {
               "data-test": "suite-mobile-drawer-body",
@@ -1565,13 +1525,13 @@ function SuiteMobileDrawer({
           )
         ]
       }
-    )
-  ] });
+    ) })
+  ] }) });
 }
 
 // src/suite/components/suite-mobile-header.tsx
 import { Menu } from "iconoir-react";
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function SuiteMobileHeader({
   onMenuClick,
   menuIcon: MenuIcon = Menu,
@@ -1583,16 +1543,16 @@ function SuiteMobileHeader({
   dataTest,
   className
 }) {
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs8(
     "header",
     {
       "data-test": dataTest,
-      className: cn(
+      className: cn2(
         "suite-app-bar no-print sticky top-0 z-30 flex min-h-[56px] shrink-0 items-center gap-1 border-b border-ph-border px-2 lg:hidden",
         className
       ),
       children: [
-        onMenuClick ? /* @__PURE__ */ jsx11(
+        onMenuClick ? /* @__PURE__ */ jsx10(
           "button",
           {
             type: "button",
@@ -1601,20 +1561,20 @@ function SuiteMobileHeader({
             className: "suite-press inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-ph-ink transition-colors hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand",
             onClick: onMenuClick,
             "aria-label": menuLabel,
-            children: /* @__PURE__ */ jsx11(MenuIcon, { className: "h-5 w-5", "aria-hidden": true })
+            children: /* @__PURE__ */ jsx10(MenuIcon, { className: "h-5 w-5", "aria-hidden": true })
           }
         ) : null,
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx10(
           "div",
           {
-            className: cn(
+            className: cn2(
               "flex min-w-0 flex-1 items-center",
               !onMenuClick && "pl-2"
             ),
             children: title
           }
         ),
-        actions ? /* @__PURE__ */ jsx11("div", { className: "flex shrink-0 items-center gap-1", children: actions }) : null
+        actions ? /* @__PURE__ */ jsx10("div", { className: "flex shrink-0 items-center gap-1", children: actions }) : null
       ]
     }
   );
@@ -1623,26 +1583,26 @@ function SuiteMobileHeader({
 // src/suite/components/suite-layout.tsx
 import {
   useEffect as useEffect5,
-  useRef as useRef2,
+  useRef,
   useState as useState6
 } from "react";
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 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) => {
+  return /* @__PURE__ */ jsx11("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsx11("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(
+    return /* @__PURE__ */ jsxs9("li", { className: "flex min-w-0 items-center gap-1.5", children: [
+      index > 0 ? /* @__PURE__ */ jsx11("span", { className: "select-none text-ph-border", "aria-hidden": "true", children: "/" }) : null,
+      item.href && !isLast ? /* @__PURE__ */ jsx11(
         "a",
         {
           href: item.href,
           className: "truncate transition hover:text-ph-ink",
           children: item.label
         }
-      ) : /* @__PURE__ */ jsx12(
+      ) : /* @__PURE__ */ jsx11(
         "span",
         {
-          className: cn(
+          className: cn2(
             "truncate",
             isLast ? "font-medium text-ph-ink" : "text-ph-subtle"
           ),
@@ -1664,7 +1624,7 @@ function SuitePage({
   role,
   "aria-live": ariaLive
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx11(
     Component,
     {
       id,
@@ -1672,7 +1632,7 @@ function SuitePage({
       "data-width": width,
       role,
       "aria-live": ariaLive,
-      className: cn(
+      className: cn2(
         "suite-page-stage relative flex w-full min-w-0 flex-col",
         inset && "suite-page-inset",
         className
@@ -1704,7 +1664,7 @@ function SuitePageHeader({
    */
   sticky = true
 }) {
-  const headerRef = useRef2(null);
+  const headerRef = useRef(null);
   const [stuck, setStuck] = useState6(false);
   useEffect5(() => {
     if (!sticky) return;
@@ -1732,33 +1692,33 @@ function SuitePageHeader({
       sentinel.remove();
     };
   }, [sticky]);
-  const resolvedIcon = todayIcon ? /* @__PURE__ */ jsx12(
+  const resolvedIcon = todayIcon ? /* @__PURE__ */ jsx11(
     TodayTimeIcon,
     {
-      className: cn(
+      className: cn2(
         "h-6 w-6 text-amber-500",
         todayIconClassName
       )
     }
   ) : icon;
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs9(
     "header",
     {
       ref: headerRef,
       "data-test": dataTest,
       "data-stuck": sticky ? stuck ? "true" : "false" : void 0,
-      className: cn(
+      className: cn2(
         "flex min-w-0 shrink-0 flex-col items-start gap-3 pb-2 sm:flex-row sm:justify-between sm:gap-4 sm:pb-3",
         // No extra pt here — page inset sets the shared title baseline.
         sticky && "suite-page-header-sticky",
         className
       ),
       children: [
-        /* @__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(
+        /* @__PURE__ */ jsxs9("div", { className: "min-w-0 flex-1", children: [
+          eyebrow ? /* @__PURE__ */ jsx11("div", { className: "mb-0.5 flex min-w-0 items-center gap-1.5 text-xs text-ph-subtle", children: eyebrow }) : null,
+          breadcrumb ? /* @__PURE__ */ jsx11("div", { className: "mb-0.5 flex min-w-0 items-center gap-1.5 text-xs text-ph-subtle", children: breadcrumb }) : null,
+          /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 items-center gap-3", children: [
+            resolvedIcon ? /* @__PURE__ */ jsx11(
               "div",
               {
                 className: "hidden shrink-0 sm:flex sm:items-center [&_svg]:h-6 [&_svg]:w-6",
@@ -1766,24 +1726,24 @@ function SuitePageHeader({
                 children: resolvedIcon
               }
             ) : null,
-            /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [
-              /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [
+              /* @__PURE__ */ jsx11(
                 "h1",
                 {
-                  className: cn(
+                  className: cn2(
                     "min-w-0 break-words font-display text-[1.375rem] font-semibold leading-tight tracking-tight text-ph-ink text-balance sm:text-2xl",
                     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
+              badge ? /* @__PURE__ */ jsx11("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(
+          description ? /* @__PURE__ */ jsx11(
             "div",
             {
-              className: cn(
+              className: cn2(
                 "mt-1.5 max-w-2xl text-pretty text-sm leading-5 text-ph-subtle",
                 resolvedIcon && "sm:pl-9"
               ),
@@ -1791,7 +1751,7 @@ function SuitePageHeader({
             }
           ) : null
         ] }),
-        actions ? /* @__PURE__ */ jsx12("div", { className: "flex max-w-full items-center gap-2 self-stretch overflow-x-auto pb-1 sm:shrink-0 sm:self-center sm:overflow-visible sm:pb-0", children: actions }) : null
+        actions ? /* @__PURE__ */ jsx11("div", { className: "flex max-w-full items-center gap-2 self-stretch overflow-x-auto pb-1 sm:shrink-0 sm:self-center sm:overflow-visible sm:pb-0", children: actions }) : null
       ]
     }
   );
@@ -1802,13 +1762,13 @@ function SuiteToolbar({
   label = "Page tools",
   dataTest
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       role: "toolbar",
       "aria-label": label,
       "data-test": dataTest,
-      className: cn("flex min-w-0 flex-wrap items-center gap-2", className),
+      className: cn2("flex min-w-0 flex-wrap items-center gap-2", className),
       children
     }
   );
@@ -1819,12 +1779,12 @@ function SuiteTabList({
   label,
   dataTest
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx11(
     "nav",
     {
       "aria-label": label,
       "data-test": dataTest,
-      className: cn(
+      className: cn2(
         "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
       ),
@@ -1838,26 +1798,26 @@ function SuiteSectionHeader({
   action,
   className
 }) {
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
-      className: cn(
+      className: cn2(
         "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
+        /* @__PURE__ */ jsxs9("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx11("h2", { className: "font-display text-balance text-lg font-semibold tracking-tight text-ph-ink sm:text-xl", children: title }),
+          description ? /* @__PURE__ */ jsx11("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
+        action ? /* @__PURE__ */ jsx11("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";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 function SuiteSettingsLayout({
   children,
   sidebar,
@@ -1871,13 +1831,13 @@ function SuiteSettingsLayout({
   className,
   contentClassName
 }) {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs10(
     SuitePage,
     {
       dataTest,
-      className: cn("flex h-full flex-col overflow-hidden", className),
+      className: cn2("flex h-full flex-col overflow-hidden", className),
       children: [
-        header != null ? header : /* @__PURE__ */ jsx13(
+        header != null ? header : /* @__PURE__ */ jsx12(
           SuitePageHeader,
           {
             sticky: true,
@@ -1886,10 +1846,10 @@ function SuiteSettingsLayout({
             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(
+        loading != null ? loading : /* @__PURE__ */ jsxs10("div", { className: "suite-page-body mt-6 flex min-h-0 flex-1 flex-col", children: [
+          mobileNav ? /* @__PURE__ */ jsx12("div", { className: "sticky top-0 z-20 mb-2 shrink-0 bg-ph-canvas/95 backdrop-blur lg:hidden", children: mobileNav }) : null,
+          /* @__PURE__ */ jsxs10("div", { className: "flex min-h-0 flex-1 flex-col gap-6 lg:flex-row lg:gap-8", children: [
+            /* @__PURE__ */ jsx12(
               "aside",
               {
                 "aria-label": "Settings",
@@ -1897,10 +1857,10 @@ function SuiteSettingsLayout({
                 children: sidebar
               }
             ),
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx12(
               "div",
               {
-                className: cn(
+                className: cn2(
                   "min-h-0 min-w-0 flex-1 overflow-y-auto overscroll-contain pb-6",
                   contentClassName
                 ),
@@ -1918,24 +1878,25 @@ function SuiteSettingsLayout({
 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";
+import { jsx as jsx13, jsxs as jsxs11 } 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();
 }
 var AVATAR_TOKENS = [
-  "bg-ph-brand",
-  "bg-ph-violet",
-  "bg-ph-info",
-  "bg-ph-success",
-  "bg-ph-danger"
+  ["bg-ph-brand", "text-[var(--ph-on-accent)]"],
+  ["bg-ph-violet", "text-[var(--ph-on-violet)]"],
+  ["bg-ph-info", "text-[var(--ph-on-info)]"],
+  ["bg-ph-success", "text-[var(--ph-on-success)]"],
+  ["bg-ph-danger", "text-[var(--ph-on-danger)]"]
 ];
 function avatarColorClass(seed) {
   let hash = 0;
   for (let i = 0; i < seed.length; i += 1) {
     hash = seed.charCodeAt(i) + ((hash << 5) - hash);
   }
-  return AVATAR_TOKENS[Math.abs(hash) % AVATAR_TOKENS.length];
+  const [bg, ink] = AVATAR_TOKENS[Math.abs(hash) % AVATAR_TOKENS.length];
+  return `${bg} ${ink}`;
 }
 function SuiteUserMenu({
   name,
@@ -1953,7 +1914,7 @@ function SuiteUserMenu({
   const router = useRouter2();
   const initials = fallbackInitials != null ? fallbackInitials : computeInitials(name, email);
   const fallbackColor = avatarColorClass(email || name || "?");
-  const avatar = /* @__PURE__ */ jsx14("span", { className: "inline-flex h-10 w-10 items-center justify-center overflow-hidden rounded-full border border-ph-border", children: image ? /* @__PURE__ */ jsx14(
+  const avatar = /* @__PURE__ */ jsx13("span", { className: "inline-flex h-10 w-10 items-center justify-center overflow-hidden rounded-full border border-ph-border", children: image ? /* @__PURE__ */ jsx13(
     Image2,
     {
       src: image,
@@ -1963,17 +1924,17 @@ function SuiteUserMenu({
       className: "h-full w-full object-cover",
       unoptimized: true
     }
-  ) : /* @__PURE__ */ jsx14(
+  ) : /* @__PURE__ */ jsx13(
     "span",
     {
-      className: cn(
-        "flex h-full w-full items-center justify-center text-sm font-semibold text-white",
+      className: cn2(
+        "flex h-full w-full items-center justify-center text-sm font-semibold",
         fallbackColor
       ),
       children: initials
     }
   ) });
-  const accountMenu = /* @__PURE__ */ jsxs12(
+  const accountMenu = /* @__PURE__ */ jsxs11(
     DropdownMenu,
     {
       trigger: avatar,
@@ -1985,30 +1946,30 @@ function SuiteUserMenu({
       sideOffset: 6,
       collisionPadding: 16,
       modal: false,
-      className: cn(
+      className: cn2(
         "[&_.ph-dropdown-trigger]:rounded-full",
         showSignOutAction ? void 0 : 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__ */ jsxs11("div", { className: "px-2 py-1.5", children: [
+          /* @__PURE__ */ jsx13("p", { className: "truncate text-sm font-medium text-ph-ink", children: name || email || "Account" }),
+          email ? /* @__PURE__ */ jsx13("p", { className: "truncate text-xs text-ph-mutedtext", children: email }) : null
         ] }),
-        /* @__PURE__ */ jsx14("div", { className: "my-1 border-t border-ph-border" }),
-        /* @__PURE__ */ jsxs12(
+        /* @__PURE__ */ jsx13("div", { className: "my-1 border-t border-ph-border" }),
+        /* @__PURE__ */ jsxs11(
           DropdownItem,
           {
             "data-test": `${dataTest}-settings`,
             onClick: () => router.push(settingsHref),
             children: [
-              /* @__PURE__ */ jsx14(Settings, { className: "h-4 w-4 text-ph-mutedtext", "aria-hidden": true }),
+              /* @__PURE__ */ jsx13(Settings, { className: "h-4 w-4 text-ph-mutedtext", "aria-hidden": true }),
               "Profile settings"
             ]
           }
         ),
-        /* @__PURE__ */ jsxs12(DropdownItem, { "data-test": `${dataTest}-sign-out`, onClick: onSignOut, children: [
-          /* @__PURE__ */ jsx14(LogOut, { className: "h-4 w-4 text-ph-mutedtext", "aria-hidden": true }),
+        /* @__PURE__ */ jsxs11(DropdownItem, { "data-test": `${dataTest}-sign-out`, onClick: onSignOut, children: [
+          /* @__PURE__ */ jsx13(LogOut, { className: "h-4 w-4 text-ph-mutedtext", "aria-hidden": true }),
           "Sign out"
         ] })
       ]
@@ -2017,16 +1978,16 @@ function SuiteUserMenu({
   if (!showSignOutAction) {
     return accountMenu;
   }
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
-      className: cn(
+      className: cn2(
         "flex w-full min-w-0 flex-1 items-center justify-between gap-2",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx14("div", { className: "shrink-0", children: accountMenu }),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx13("div", { className: "shrink-0", children: accountMenu }),
+        /* @__PURE__ */ jsx13(
           "button",
           {
             type: "button",
@@ -2035,7 +1996,7 @@ function SuiteUserMenu({
             "aria-label": "Sign out",
             className: "inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ph-focus-ring",
             onClick: onSignOut,
-            children: /* @__PURE__ */ jsx14(LogOut, { className: "h-4 w-4", "aria-hidden": true })
+            children: /* @__PURE__ */ jsx13(LogOut, { className: "h-4 w-4", "aria-hidden": true })
           }
         )
       ]
@@ -2045,7 +2006,7 @@ function SuiteUserMenu({
 
 // src/suite/components/suite-bottom-nav.tsx
 import Link from "next/link";
-import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function SuiteBottomNav({
   items,
   ariaLabel = "Primary navigation",
@@ -2058,8 +2019,8 @@ function SuiteBottomNav({
     );
   }
   const activeIndex = items.findIndex((item) => item.active);
-  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
-    /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs12(Fragment4, { children: [
+    /* @__PURE__ */ jsx14(
       "div",
       {
         "aria-hidden": true,
@@ -2067,12 +2028,12 @@ function SuiteBottomNav({
         style: { height: "calc(60px + env(safe-area-inset-bottom))" }
       }
     ),
-    /* @__PURE__ */ jsxs13(
+    /* @__PURE__ */ jsxs12(
       "nav",
       {
         "aria-label": ariaLabel,
         "data-test": dataTest,
-        className: cn(
+        className: cn2(
           "suite-bottom-nav no-print z-40 grid auto-cols-fr grid-flow-col lg:hidden",
           className
         ),
@@ -2082,31 +2043,31 @@ function SuiteBottomNav({
           "--suite-nav-active": activeIndex >= 0 ? activeIndex : 0
         },
         children: [
-          activeIndex >= 0 ? /* @__PURE__ */ jsx15("span", { "aria-hidden": true, className: "suite-bottom-nav__indicator" }) : null,
+          activeIndex >= 0 ? /* @__PURE__ */ jsx14("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__ */ jsxs13(
+            return /* @__PURE__ */ jsxs12(
               Link,
               {
                 href: item.href,
                 id: item.id,
                 "data-test": (_a = item.dataTest) != null ? _a : `suite-nav-${item.label.toLowerCase().replace(/\s+/g, "-")}`,
                 "aria-current": active ? "page" : void 0,
-                className: cn(
+                className: cn2(
                   "suite-bottom-nav__item relative flex min-h-[60px] min-w-0 flex-col items-center justify-center gap-1 px-1 pb-1.5 pt-2 text-[10px] font-medium leading-none text-ph-mutedtext transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ph-brand motion-reduce:transition-none",
                   active && "font-semibold text-ph-brand"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx15(
+                  /* @__PURE__ */ jsx14(
                     "span",
                     {
-                      className: cn(
+                      className: cn2(
                         "suite-bottom-nav__icon relative z-10 inline-flex items-center justify-center",
                         active && "suite-bottom-nav__icon--active"
                       ),
-                      children: /* @__PURE__ */ jsx15(
+                      children: /* @__PURE__ */ jsx14(
                         Icon,
                         {
                           className: "h-6 w-6",
@@ -2116,7 +2077,7 @@ function SuiteBottomNav({
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx15("span", { className: "relative z-10 max-w-full truncate", children: item.label })
+                  /* @__PURE__ */ jsx14("span", { className: "relative z-10 max-w-full truncate", children: item.label })
                 ]
               },
               item.href
@@ -2130,7 +2091,7 @@ function SuiteBottomNav({
 
 // src/suite/components/today-calibrating.tsx
 import { Refresh as RefreshCw2, SunLight as Sun } from "iconoir-react";
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 function TodayCalibrating({
   onRetry,
   retrying = false,
@@ -2140,27 +2101,27 @@ function TodayCalibrating({
   retrySpinnerClassName = "text-ph-brand"
 }) {
   void _variant;
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
-      className: cn(
+      className: cn2(
         "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__ */ jsx16(
+        /* @__PURE__ */ jsx15(
           "div",
           {
             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__ */ 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(
+        /* @__PURE__ */ jsx15("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__ */ jsx15(Sun, { className: "h-8 w-8", strokeWidth: 2, "aria-hidden": true }) }),
+        /* @__PURE__ */ jsx15("h2", { className: "relative text-base font-semibold tracking-tight text-ph-ink sm:text-lg md:text-xl", children: "Calibrating your day" }),
+        /* @__PURE__ */ jsx15("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__ */ jsx15("div", { className: "relative mt-5 flex justify-center", children: /* @__PURE__ */ jsx15(Spinner, { size: "sm", className: "opacity-70", label: "Loading today" }) }),
+        onRetry ? /* @__PURE__ */ jsxs13(
           "button",
           {
             type: "button",
@@ -2168,7 +2129,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__ */ jsx16(Spinner, { size: "sm", className: retrySpinnerClassName }) : /* @__PURE__ */ jsx16(RefreshCw2, { className: "h-4 w-4", "aria-hidden": true }),
+              retrying ? /* @__PURE__ */ jsx15(Spinner, { size: "sm", className: retrySpinnerClassName }) : /* @__PURE__ */ jsx15(RefreshCw2, { className: "h-4 w-4", "aria-hidden": true }),
               "Try again"
             ]
           }
@@ -2186,7 +2147,7 @@ import {
   useEffect as useEffect6,
   useId,
   useLayoutEffect,
-  useRef as useRef3,
+  useRef as useRef2,
   useState as useState7
 } from "react";
 import {
@@ -2197,8 +2158,8 @@ import {
   Square,
   WarningTriangle
 } from "iconoir-react";
-import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
-var SuiteAiBlockNoteMessage = lazy(() => import("./ai-message-blocknote-WABTHFY7.mjs"));
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+var SuiteAiBlockNoteMessage = lazy(() => import("./ai-message-blocknote-D4Z6DUCJ.mjs"));
 var SUITE_OPEN_ASK_AI_EVENT = "shellstack:open-ask-ai";
 var SUITE_ASK_AI_OPEN_KEY = "shellstack:shelly-open";
 var SUITE_ASK_AI_OPEN_QUERY = "shelly";
@@ -2280,7 +2241,8 @@ function SuiteAiPanel({
   suiteAppBases,
   onSwitchApp,
   onSameAppNavigate,
-  resolveAction
+  resolveAction,
+  isWaitingForReply = false
 }) {
   const inputId = useId();
   const [uncontrolledOpen, setUncontrolledOpen] = useState7(false);
@@ -2300,10 +2262,11 @@ function SuiteAiPanel({
   const [hydrating, setHydrating] = useState7(false);
   const [error, setError] = useState7("");
   const [atBottom, setAtBottom] = useState7(true);
-  const scrollerRef = useRef3(null);
-  const textareaRef = useRef3(null);
-  const abortRef = useRef3(null);
-  const pendingPromptRef = useRef3(null);
+  const scrollerRef = useRef2(null);
+  const textareaRef = useRef2(null);
+  const abortRef = useRef2(null);
+  const pendingPromptRef = useRef2(null);
+  const waiting = loading || isWaitingForReply;
   useEffect6(() => {
     function onOpen(event) {
       var _a;
@@ -2331,7 +2294,7 @@ function SuiteAiPanel({
     setAtBottom(distance < 64);
   }, []);
   const hydrate = useCallback2(async () => {
-    var _a;
+    var _a, _b, _c;
     setHydrating(true);
     setError("");
     try {
@@ -2339,6 +2302,11 @@ function SuiteAiPanel({
       setMessages((_a = data.messages) != null ? _a : []);
       if (!data.configured) {
         setError("ShellStack AI is not configured for this workspace yet.");
+      } else {
+        const latestJob = (_b = data.jobs) == null ? void 0 : _b[0];
+        if ((latestJob == null ? void 0 : latestJob.status) === "failed" && latestJob.error && latestJob.error !== "Chat cleared." && ((_c = data.messages.at(-1)) == null ? void 0 : _c.role) !== "assistant") {
+          setError(latestJob.error);
+        }
       }
     } catch (err) {
       setError(
@@ -2361,7 +2329,7 @@ function SuiteAiPanel({
   }, [open, hydrate]);
   useEffect6(() => {
     if (open && atBottom) scrollToBottom();
-  }, [messages, loading, open, atBottom, scrollToBottom]);
+  }, [messages, waiting, open, atBottom, scrollToBottom]);
   useEffect6(() => {
     var _a;
     if (open && !hydrating) (_a = textareaRef.current) == null ? void 0 : _a.focus();
@@ -2375,7 +2343,7 @@ function SuiteAiPanel({
   async function ask(text) {
     var _a;
     const trimmed = text.trim();
-    if (!trimmed || loading) return;
+    if (!trimmed || waiting) return;
     const controller = new AbortController();
     abortRef.current = controller;
     setLoading(true);
@@ -2491,32 +2459,32 @@ function SuiteAiPanel({
   }
   if (!open) return null;
   const Icon = BrandIcon != null ? BrandIcon : Sparks;
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs14(
     "aside",
     {
       className: "flex h-full min-h-0 flex-col bg-ph-canvas",
       "data-test": "suite-ask-ai-panel",
       "aria-label": title,
       children: [
-        /* @__PURE__ */ jsxs15("header", { className: "flex items-center gap-2 px-2 pb-2", children: [
-          /* @__PURE__ */ jsx17("h2", { className: "sr-only", children: title }),
-          messages.length > 0 ? /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsxs14("header", { className: "flex items-center gap-2 px-2 pb-2", children: [
+          /* @__PURE__ */ jsx16("h2", { className: "sr-only", children: title }),
+          messages.length > 0 ? /* @__PURE__ */ jsxs14(
             "button",
             {
               type: "button",
               onClick: () => void handleClear(),
-              disabled: loading,
+              disabled: waiting,
               className: "ml-auto inline-flex h-9 items-center gap-1.5 rounded-lg px-2 text-xs font-medium text-ph-subtle transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40",
               "data-test": "ask-ai-clear",
               children: [
-                /* @__PURE__ */ jsx17(Erase, { className: "h-3.5 w-3.5" }),
+                /* @__PURE__ */ jsx16(Erase, { className: "h-3.5 w-3.5" }),
                 "Clear"
               ]
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsxs15("div", { className: "relative min-h-0 flex-1", children: [
-          /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsxs14("div", { className: "relative min-h-0 flex-1", children: [
+          /* @__PURE__ */ jsxs14(
             "div",
             {
               ref: scrollerRef,
@@ -2527,25 +2495,25 @@ function SuiteAiPanel({
               "aria-label": "Conversation",
               className: "suite-scroll-lock h-full space-y-5 overflow-y-auto px-2 py-3",
               children: [
-                hydrating && messages.length === 0 ? /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 text-sm text-ph-subtle", children: [
-                  /* @__PURE__ */ jsx17(Spinner, { className: "h-4 w-4 animate-spin" }),
+                hydrating && messages.length === 0 ? /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2 text-sm text-ph-subtle", children: [
+                  /* @__PURE__ */ jsx16(Spinner, { className: "h-4 w-4 animate-spin" }),
                   "Loading your chat\u2026"
                 ] }) : null,
-                !hydrating && messages.length === 0 && !error ? /* @__PURE__ */ jsxs15("div", { className: "mx-auto mt-4 flex max-w-sm flex-col items-center px-1 text-center", children: [
-                  /* @__PURE__ */ jsx17("span", { className: "flex h-10 w-10 items-center justify-center rounded-2xl bg-ph-brand/10 text-ph-brand", children: /* @__PURE__ */ jsx17(Icon, { className: "h-5 w-5" }) }),
-                  /* @__PURE__ */ jsx17("p", { className: "mt-3 font-display text-base font-semibold text-ph-ink", children: "How can I help?" }),
-                  /* @__PURE__ */ jsx17("p", { className: "mt-1 text-sm leading-relaxed text-ph-subtle", children: emptyState }),
-                  presets.length > 0 ? /* @__PURE__ */ jsx17("div", { className: "mt-4 flex w-full flex-col gap-2", children: presets.map((preset) => /* @__PURE__ */ jsxs15(
+                !hydrating && messages.length === 0 && !error ? /* @__PURE__ */ jsxs14("div", { className: "mx-auto mt-4 flex max-w-sm flex-col items-center px-1 text-center", children: [
+                  /* @__PURE__ */ jsx16("span", { className: "flex h-10 w-10 items-center justify-center rounded-2xl bg-ph-brand/10 text-ph-brand", children: /* @__PURE__ */ jsx16(Icon, { className: "h-5 w-5" }) }),
+                  /* @__PURE__ */ jsx16("p", { className: "mt-3 font-display text-base font-semibold text-ph-ink", children: "How can I help?" }),
+                  /* @__PURE__ */ jsx16("p", { className: "mt-1 text-sm leading-relaxed text-ph-subtle", children: emptyState }),
+                  presets.length > 0 ? /* @__PURE__ */ jsx16("div", { className: "mt-4 flex w-full flex-col gap-2", children: presets.map((preset) => /* @__PURE__ */ jsxs14(
                     "button",
                     {
                       type: "button",
                       onClick: () => void ask(preset.prompt),
-                      disabled: loading || hydrating,
+                      disabled: waiting || hydrating,
                       className: "group flex w-full items-center gap-2 rounded-xl border border-ph-border bg-ph-surface px-3 py-2 text-left text-sm text-ph-ink transition-colors hover:border-ph-brand/40 hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40",
                       children: [
-                        /* @__PURE__ */ jsx17(Sparks, { className: "h-4 w-4 shrink-0 text-ph-brand" }),
-                        /* @__PURE__ */ jsx17("span", { className: "min-w-0 flex-1 truncate", children: preset.label }),
-                        /* @__PURE__ */ jsx17(ArrowUp, { className: "h-3.5 w-3.5 shrink-0 rotate-45 text-ph-mutedtext transition-transform group-hover:translate-x-0.5" })
+                        /* @__PURE__ */ jsx16(Sparks, { className: "h-4 w-4 shrink-0 text-ph-brand" }),
+                        /* @__PURE__ */ jsx16("span", { className: "min-w-0 flex-1 truncate", children: preset.label }),
+                        /* @__PURE__ */ jsx16(ArrowUp, { className: "h-3.5 w-3.5 shrink-0 rotate-45 text-ph-mutedtext transition-transform group-hover:translate-x-0.5" })
                       ]
                     },
                     preset.label
@@ -2555,48 +2523,61 @@ function SuiteAiPanel({
                   var _a;
                   const isUser = message.role === "user";
                   if (isUser) {
-                    return /* @__PURE__ */ jsx17(
+                    return /* @__PURE__ */ jsx16(
                       "div",
                       {
                         className: "flex justify-end",
                         "data-test": "ask-ai-user",
-                        children: /* @__PURE__ */ jsx17("div", { className: "w-fit max-w-[85%] whitespace-pre-wrap break-words rounded-2xl rounded-br-md bg-ph-brand px-3 py-2 text-sm leading-relaxed text-[var(--ph-on-accent)] [overflow-wrap:anywhere]", children: message.content })
+                        children: /* @__PURE__ */ jsx16("div", { className: "w-fit max-w-[85%] whitespace-pre-wrap break-words rounded-2xl rounded-br-md bg-ph-brand px-3 py-2 text-sm leading-relaxed text-[var(--ph-on-accent)] [overflow-wrap:anywhere]", children: message.content })
                       },
                       `user-${index}`
                     );
                   }
-                  return /* @__PURE__ */ jsxs15(
+                  return /* @__PURE__ */ jsxs14(
                     "div",
                     {
                       className: "flex items-end gap-2",
                       "data-test": "ask-ai-assistant",
                       children: [
-                        /* @__PURE__ */ jsx17(
+                        /* @__PURE__ */ jsx16(
                           "span",
                           {
                             className: "mb-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ph-brand/10 text-ph-brand",
                             "aria-hidden": true,
-                            children: /* @__PURE__ */ jsx17(Icon, { className: "h-3.5 w-3.5" })
+                            children: /* @__PURE__ */ jsx16(Icon, { className: "h-3.5 w-3.5" })
                           }
                         ),
-                        /* @__PURE__ */ jsxs15("div", { className: "min-w-0 max-w-[85%] space-y-2", children: [
-                          /* @__PURE__ */ jsx17("div", { className: "rounded-2xl rounded-bl-md bg-ph-muted px-3 py-2 text-sm leading-relaxed text-ph-ink", children: /* @__PURE__ */ jsx17(
+                        /* @__PURE__ */ jsxs14("div", { className: "min-w-0 max-w-[85%] space-y-2", children: [
+                          /* @__PURE__ */ jsx16("div", { className: "rounded-2xl rounded-bl-md bg-ph-muted px-3 py-2 text-sm leading-relaxed text-ph-ink", children: /* @__PURE__ */ jsx16(
                             Suspense,
                             {
-                              fallback: /* @__PURE__ */ jsx17("p", { className: "whitespace-pre-wrap break-words", children: message.content }),
-                              children: /* @__PURE__ */ jsx17(SuiteAiBlockNoteMessage, { markdown: message.content })
+                              fallback: /* @__PURE__ */ jsxs14(
+                                "div",
+                                {
+                                  className: "space-y-2 py-0.5",
+                                  role: "status",
+                                  "aria-label": "Rendering response",
+                                  children: [
+                                    /* @__PURE__ */ jsx16("span", { className: "sr-only", children: "Rendering response\u2026" }),
+                                    /* @__PURE__ */ jsx16("div", { className: "h-3 w-11/12 rounded bg-ph-mutedtext/20 motion-safe:animate-pulse" }),
+                                    /* @__PURE__ */ jsx16("div", { className: "h-3 w-full rounded bg-ph-mutedtext/20 motion-safe:animate-pulse" }),
+                                    /* @__PURE__ */ jsx16("div", { className: "h-3 w-3/5 rounded bg-ph-mutedtext/20 motion-safe:animate-pulse" })
+                                  ]
+                                }
+                              ),
+                              children: /* @__PURE__ */ jsx16(SuiteAiBlockNoteMessage, { markdown: message.content })
                             }
                           ) }),
-                          ((_a = message.actions) != null ? _a : []).map((action) => /* @__PURE__ */ jsxs15(
+                          ((_a = message.actions) != null ? _a : []).map((action) => /* @__PURE__ */ jsxs14(
                             "div",
                             {
                               "data-test": "ask-ai-action",
                               "data-status": action.status,
                               className: "rounded-xl border border-ph-border bg-ph-surface px-3 py-2 text-sm text-ph-ink",
                               children: [
-                                /* @__PURE__ */ jsx17("p", { className: "font-medium", children: action.summary }),
-                                action.status === "proposed" ? /* @__PURE__ */ jsxs15("div", { className: "mt-2 flex flex-wrap gap-2", children: [
-                                  /* @__PURE__ */ jsx17(
+                                /* @__PURE__ */ jsx16("p", { className: "font-medium", children: action.summary }),
+                                action.status === "proposed" ? /* @__PURE__ */ jsxs14("div", { className: "mt-2 flex flex-wrap gap-2", children: [
+                                  /* @__PURE__ */ jsx16(
                                     "button",
                                     {
                                       type: "button",
@@ -2607,7 +2588,7 @@ function SuiteAiPanel({
                                       children: resolvingId === action.id ? "Working\u2026" : "Confirm"
                                     }
                                   ),
-                                  /* @__PURE__ */ jsx17(
+                                  /* @__PURE__ */ jsx16(
                                     "button",
                                     {
                                       type: "button",
@@ -2619,11 +2600,11 @@ function SuiteAiPanel({
                                     }
                                   )
                                 ] }) : null,
-                                action.status === "applied" ? /* @__PURE__ */ jsxs15("p", { className: "mt-1 text-xs text-ph-subtle", children: [
+                                action.status === "applied" ? /* @__PURE__ */ jsxs14("p", { className: "mt-1 text-xs text-ph-subtle", children: [
                                   "Done",
-                                  action.href ? /* @__PURE__ */ jsxs15(Fragment5, { children: [
+                                  action.href ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
                                     " \xB7 ",
-                                    /* @__PURE__ */ jsx17(
+                                    /* @__PURE__ */ jsx16(
                                       "a",
                                       {
                                         href: action.href,
@@ -2633,8 +2614,8 @@ function SuiteAiPanel({
                                     )
                                   ] }) : null
                                 ] }) : null,
-                                action.status === "cancelled" ? /* @__PURE__ */ jsx17("p", { className: "mt-1 text-xs text-ph-subtle", children: "Cancelled" }) : null,
-                                action.status === "failed" ? /* @__PURE__ */ jsx17("p", { className: "mt-1 text-xs text-ph-danger", children: action.error || "Could not apply that." }) : null
+                                action.status === "cancelled" ? /* @__PURE__ */ jsx16("p", { className: "mt-1 text-xs text-ph-subtle", children: "Cancelled" }) : null,
+                                action.status === "failed" ? /* @__PURE__ */ jsx16("p", { className: "mt-1 text-xs text-ph-danger", children: action.error || "Could not apply that." }) : null
                               ]
                             },
                             action.id
@@ -2645,31 +2626,31 @@ function SuiteAiPanel({
                     `assistant-${index}`
                   );
                 }),
-                loading ? /* @__PURE__ */ jsxs15("div", { className: "flex items-end gap-2", "aria-hidden": true, children: [
-                  /* @__PURE__ */ jsx17("span", { className: "mb-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ph-brand/10 text-ph-brand", children: /* @__PURE__ */ jsx17(Icon, { className: "h-3.5 w-3.5" }) }),
-                  /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1.5 rounded-2xl rounded-bl-md bg-ph-muted px-3 py-2.5", children: [
-                    /* @__PURE__ */ jsx17("span", { className: "h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce" }),
-                    /* @__PURE__ */ jsx17("span", { className: "h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce [animation-delay:0.15s]" }),
-                    /* @__PURE__ */ jsx17("span", { className: "h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce [animation-delay:0.3s]" })
+                waiting ? /* @__PURE__ */ jsxs14("div", { className: "flex items-end gap-2", "aria-hidden": true, children: [
+                  /* @__PURE__ */ jsx16("span", { className: "mb-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ph-brand/10 text-ph-brand", children: /* @__PURE__ */ jsx16(Icon, { className: "h-3.5 w-3.5" }) }),
+                  /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-1.5 rounded-2xl rounded-bl-md bg-ph-muted px-3 py-2.5", children: [
+                    /* @__PURE__ */ jsx16("span", { className: "h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce" }),
+                    /* @__PURE__ */ jsx16("span", { className: "h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce [animation-delay:0.15s]" }),
+                    /* @__PURE__ */ jsx16("span", { className: "h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce [animation-delay:0.3s]" })
                   ] })
                 ] }) : null,
-                loading ? /* @__PURE__ */ jsx17("span", { className: "sr-only", "aria-live": "polite", children: "Assistant is responding\u2026" }) : null,
-                error ? /* @__PURE__ */ jsxs15(
+                waiting ? /* @__PURE__ */ jsx16("span", { className: "sr-only", "aria-live": "polite", children: "Assistant is responding\u2026" }) : null,
+                error ? /* @__PURE__ */ jsxs14(
                   "div",
                   {
                     role: "alert",
                     className: "flex items-start gap-2 rounded-xl border border-ph-danger/30 bg-ph-danger/10 px-3 py-2.5 text-sm text-ph-ink",
                     children: [
-                      /* @__PURE__ */ jsx17(WarningTriangle, { className: "mt-0.5 h-4 w-4 shrink-0 text-ph-danger" }),
-                      /* @__PURE__ */ jsxs15("div", { className: "min-w-0 flex-1", children: [
-                        /* @__PURE__ */ jsx17("p", { className: "font-medium text-ph-danger", children: "Something went wrong" }),
-                        /* @__PURE__ */ jsx17("p", { className: "mt-0.5 text-ph-subtle", children: error }),
-                        /* @__PURE__ */ jsx17(
+                      /* @__PURE__ */ jsx16(WarningTriangle, { className: "mt-0.5 h-4 w-4 shrink-0 text-ph-danger" }),
+                      /* @__PURE__ */ jsxs14("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsx16("p", { className: "font-medium text-ph-danger", children: "Something went wrong" }),
+                        /* @__PURE__ */ jsx16("p", { className: "mt-0.5 text-ph-subtle", children: error }),
+                        /* @__PURE__ */ jsx16(
                           "button",
                           {
                             type: "button",
                             onClick: retry,
-                            disabled: loading,
+                            disabled: waiting,
                             className: "mt-2 inline-flex min-h-8 items-center gap-1.5 rounded-lg border border-ph-border bg-ph-surface px-2.5 text-xs font-medium text-ph-ink transition-colors hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40",
                             children: "Try again"
                           }
@@ -2681,20 +2662,20 @@ function SuiteAiPanel({
               ]
             }
           ),
-          !atBottom ? /* @__PURE__ */ jsx17("div", { className: "absolute bottom-3 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx17(Tooltip, { content: "Scroll to latest", children: /* @__PURE__ */ jsx17(
+          !atBottom ? /* @__PURE__ */ jsx16("div", { className: "absolute bottom-3 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx16(Tooltip, { content: "Scroll to latest", children: /* @__PURE__ */ jsx16(
             "button",
             {
               type: "button",
               onClick: () => scrollToBottom("smooth"),
               className: "flex h-9 w-9 items-center justify-center rounded-full border border-ph-border bg-ph-surface text-ph-subtle shadow-ph-md transition-colors hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus",
               "aria-label": "Scroll to latest",
-              children: /* @__PURE__ */ jsx17(ArrowDown, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx16(ArrowDown, { className: "h-4 w-4" })
             }
           ) }) }) : null
         ] }),
-        /* @__PURE__ */ jsx17("div", { className: "px-2 pt-2 pb-[max(2rem,calc(env(safe-area-inset-bottom)+1rem))]", children: /* @__PURE__ */ jsxs15("div", { className: "flex items-end gap-1.5 rounded-2xl border border-ph-border bg-ph-surface px-1.5 py-1 transition-colors focus-within:border-ph-brand/45 focus-within:ring-2 focus-within:ring-ph-focus/35", children: [
-          /* @__PURE__ */ jsx17("label", { htmlFor: inputId, className: "sr-only", children: "Ask a question" }),
-          /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx16("div", { className: "px-2 pt-2 pb-[max(2rem,calc(env(safe-area-inset-bottom)+1rem))]", children: /* @__PURE__ */ jsxs14("div", { className: "flex items-end gap-1.5 rounded-2xl border border-ph-border bg-ph-surface px-1.5 py-1 transition-colors focus-within:border-ph-brand/45 focus-within:ring-2 focus-within:ring-ph-focus/35", children: [
+          /* @__PURE__ */ jsx16("label", { htmlFor: inputId, className: "sr-only", children: "Ask a question" }),
+          /* @__PURE__ */ jsx16(
             "textarea",
             {
               id: inputId,
@@ -2713,7 +2694,7 @@ function SuiteAiPanel({
               className: "max-h-36 min-h-10 flex-1 resize-none bg-transparent px-1.5 py-2 text-sm leading-relaxed text-ph-ink outline-none placeholder:text-ph-mutedtext"
             }
           ),
-          loading ? /* @__PURE__ */ jsx17(Tooltip, { content: "Stop generating", children: /* @__PURE__ */ jsx17(
+          loading ? /* @__PURE__ */ jsx16(Tooltip, { content: "Stop generating", children: /* @__PURE__ */ jsx16(
             "button",
             {
               type: "button",
@@ -2721,9 +2702,18 @@ function SuiteAiPanel({
               "data-test": "ask-ai-stop",
               className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-ph-muted text-ph-ink transition-colors hover:bg-ph-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus",
               "aria-label": "Stop generating",
-              children: /* @__PURE__ */ jsx17(Square, { className: "h-3.5 w-3.5 fill-current" })
+              children: /* @__PURE__ */ jsx16(Square, { className: "h-3.5 w-3.5 fill-current" })
+            }
+          ) }) : isWaitingForReply ? /* @__PURE__ */ jsx16(
+            "span",
+            {
+              className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-ph-muted text-ph-subtle",
+              "data-test": "ask-ai-waiting",
+              role: "status",
+              "aria-label": "Shelly is responding",
+              children: /* @__PURE__ */ jsx16(Spinner, { className: "h-4 w-4 animate-spin" })
             }
-          ) }) : /* @__PURE__ */ jsx17(Tooltip, { content: "Send message", children: /* @__PURE__ */ jsx17(
+          ) : /* @__PURE__ */ jsx16(Tooltip, { content: "Send message", children: /* @__PURE__ */ jsx16(
             "button",
             {
               type: "button",
@@ -2732,7 +2722,7 @@ function SuiteAiPanel({
               "data-test": "ask-ai-send",
               className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-ph-brand text-[color:var(--ph-on-accent)] transition-opacity hover:bg-ph-brand-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40",
               "aria-label": "Send message",
-              children: /* @__PURE__ */ jsx17(ArrowUp, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx16(ArrowUp, { className: "h-4 w-4" })
             }
           ) })
         ] }) })
@@ -2744,7 +2734,7 @@ function SuiteAiPanel({
 // src/suite/components/workspace-switcher.tsx
 import { useState as useState8 } from "react";
 import { Building, Check, NavArrowDown } from "iconoir-react";
-import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function SuiteWorkspaceSwitcher({
   workspaces = [],
   groups,
@@ -2762,7 +2752,7 @@ function SuiteWorkspaceSwitcher({
   var _a;
   const [open, setOpen] = useState8(false);
   const sections = (_a = groups == null ? void 0 : groups.filter((group) => group.workspaces.length > 0)) != null ? _a : workspaces.length > 0 ? [{ id: "workspaces", label: "Switch workspace", workspaces }] : [];
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx17(
     DropdownMenu2,
     {
       "aria-label": "Switch workspace",
@@ -2773,24 +2763,23 @@ function SuiteWorkspaceSwitcher({
       align: "start",
       open,
       onOpenChange: setOpen,
-      trigger: /* @__PURE__ */ jsxs16(
+      trigger: /* @__PURE__ */ jsxs15(
         "span",
         {
-          className: cn(
+          className: cn2(
             "flex min-w-0 max-w-full items-center gap-2 rounded-lg border border-ph-border bg-ph-muted text-left transition-colors hover:bg-ph-muted",
             collapsed ? "h-10 w-10 justify-center p-0" : "w-full px-3 py-2",
             open && "border-ph-brand/40"
           ),
           "data-test": "workspace-switcher-trigger",
-          "aria-expanded": open,
           children: [
-            /* @__PURE__ */ jsx18(Building, { className: "h-4 w-4 shrink-0 text-ph-ink", "aria-hidden": true }),
-            !collapsed ? /* @__PURE__ */ jsxs16(Fragment6, { children: [
-              /* @__PURE__ */ jsx18("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-ph-ink", children: name }),
-              /* @__PURE__ */ jsx18(
+            /* @__PURE__ */ jsx17(Building, { className: "h-4 w-4 shrink-0 text-ph-ink", "aria-hidden": true }),
+            !collapsed ? /* @__PURE__ */ jsxs15(Fragment6, { children: [
+              /* @__PURE__ */ jsx17("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-ph-ink", children: name }),
+              /* @__PURE__ */ jsx17(
                 NavArrowDown,
                 {
-                  className: cn(
+                  className: cn2(
                     "h-3.5 w-3.5 shrink-0 text-ph-mutedtext transition-transform",
                     open && "rotate-180"
                   ),
@@ -2801,21 +2790,20 @@ function SuiteWorkspaceSwitcher({
           ]
         }
       ),
-      children: /* @__PURE__ */ jsxs16(
+      children: /* @__PURE__ */ jsxs15(
         "div",
         {
           id: "workspace-switcher-menu",
           className: "p-1",
           "data-test": "workspace-switcher-menu",
           children: [
-            sections.length === 0 ? /* @__PURE__ */ jsx18("p", { className: "px-3 py-2 text-sm text-ph-mutedtext", children: emptyLabel }) : sections.map((section) => /* @__PURE__ */ jsxs16("div", { children: [
-              /* @__PURE__ */ jsx18("p", { className: "px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-ph-mutedtext", children: section.label }),
-              section.workspaces.map((workspace) => /* @__PURE__ */ jsx18(
+            sections.length === 0 ? /* @__PURE__ */ jsx17("p", { className: "px-3 py-2 text-sm text-ph-mutedtext", children: emptyLabel }) : sections.map((section) => /* @__PURE__ */ jsxs15("div", { children: [
+              /* @__PURE__ */ jsx17("p", { className: "px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-ph-mutedtext", children: section.label }),
+              section.workspaces.map((workspace) => /* @__PURE__ */ jsx17(
                 DropdownItem2,
                 {
                   id: `workspace-option-${workspace.id}`,
-                  role: "option",
-                  "aria-selected": workspace.id === currentId,
+                  "aria-current": workspace.id === currentId ? "true" : void 0,
                   "data-test": "workspace-option",
                   "data-workspace-id": workspace.id,
                   onMouseDown: (event) => event.preventDefault(),
@@ -2824,12 +2812,12 @@ function SuiteWorkspaceSwitcher({
                     onSelect(workspace);
                   },
                   className: appSwitcherMenuItemClass(),
-                  children: /* @__PURE__ */ jsxs16("span", { className: "flex min-w-0 w-full items-center gap-3", children: [
-                    /* @__PURE__ */ jsxs16("span", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ jsx18("span", { className: "block truncate text-sm font-medium text-ph-ink", children: workspace.name }),
-                      workspace.description ? /* @__PURE__ */ jsx18("span", { className: "block truncate text-xs text-ph-mutedtext", children: workspace.description }) : null
+                  children: /* @__PURE__ */ jsxs15("span", { className: "flex min-w-0 w-full items-center gap-3", children: [
+                    /* @__PURE__ */ jsxs15("span", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ jsx17("span", { className: "block truncate text-sm font-medium text-ph-ink", children: workspace.name }),
+                      workspace.description ? /* @__PURE__ */ jsx17("span", { className: "block truncate text-xs text-ph-mutedtext", children: workspace.description }) : null
                     ] }),
-                    workspace.id === currentId ? /* @__PURE__ */ jsx18(
+                    workspace.id === currentId ? /* @__PURE__ */ jsx17(
                       Check,
                       {
                         className: "h-4 w-4 shrink-0 text-ph-brand",
@@ -2841,7 +2829,7 @@ function SuiteWorkspaceSwitcher({
                 workspace.id
               ))
             ] }, section.id)),
-            footer ? /* @__PURE__ */ jsx18("div", { className: "mt-1 border-t border-ph-border pt-1", children: footer }) : null
+            footer ? /* @__PURE__ */ jsx17("div", { className: "mt-1 border-t border-ph-border pt-1", children: footer }) : null
           ]
         }
       )
@@ -2849,6 +2837,63 @@ function SuiteWorkspaceSwitcher({
   );
 }
 
+// src/suite/icons/suite-icon.tsx
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+var TODAY_SUN_STYLE = `
+@media (prefers-reduced-motion: no-preference) {
+  .suite-icon-today-sun-rays {
+    animation: suite-icon-today-sun-spin 18s linear infinite;
+    transform-box: fill-box;
+    transform-origin: center;
+  }
+}
+@keyframes suite-icon-today-sun-spin {
+  to { transform: rotate(360deg); }
+}
+`;
+function SuiteIcon({
+  name,
+  size = 24,
+  accent,
+  strokeWidth = 2,
+  animated = true,
+  label,
+  className,
+  style
+}) {
+  const glyph = SUITE_GLYPHS[name];
+  const accentHex = accent ? APP_ACCENTS[accent].accent : void 0;
+  const mergedStyle = accentHex ? __spreadProps(__spreadValues({}, style), { "--suite-icon-accent": accentHex }) : style;
+  return /* @__PURE__ */ jsxs16(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: cn2("shrink-0", className),
+      style: mergedStyle,
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      children: [
+        glyph.animatedAccent && animated ? /* @__PURE__ */ jsx18("style", { children: TODAY_SUN_STYLE }) : null,
+        /* @__PURE__ */ jsx18(
+          GlyphParts,
+          {
+            elements: glyph.elements,
+            accentClassName: glyph.animatedAccent && animated ? "suite-icon-today-sun-rays" : void 0
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/suite/lib/use-sidebar-width.ts
 import {
   useCallback as useCallback3,
@@ -2866,8 +2911,7 @@ var LEGACY_SIDEBAR_WIDTH_KEYS = [
   "tides-sidebar-width",
   "tt-sidebar-width",
   "kraken-sidebar-width",
-  "shellstack-sidebar-width",
-  "nakama-sidebar-width"
+  "shellstack-sidebar-width"
 ];
 function isSuiteSidebarKey(storageKey) {
   return storageKey === SUITE_SIDEBAR_WIDTH_KEY || LEGACY_SIDEBAR_WIDTH_KEYS.includes(
@@ -2875,6 +2919,7 @@ function isSuiteSidebarKey(storageKey) {
   );
 }
 function sidebarColumnWidth(width, collapsed, _chatOpen = false) {
+  void _chatOpen;
   if (collapsed) return SIDEBAR_RAIL_WIDTH;
   return width;
 }
@@ -2891,50 +2936,6 @@ function parseWidth(raw) {
   const parsed = Number.parseInt(raw, 10);
   return Number.isNaN(parsed) ? null : parsed;
 }
-function suiteCookieDomainAttr() {
-  var _a;
-  const host = window.location.hostname;
-  if (host === "localhost" || /^\d{1,3}(?:\.\d{1,3}){3}$/.test(host)) {
-    return "";
-  }
-  if (host.endsWith(".localhost")) {
-    return "; Domain=.localhost";
-  }
-  const known = /* @__PURE__ */ new Set([
-    "tides",
-    "kraken",
-    "turtletime",
-    "time",
-    "nakama",
-    "app",
-    "shellstack",
-    "portal"
-  ]);
-  const parts = host.split(".");
-  if (parts.length >= 3 && known.has((_a = parts[0]) != null ? _a : "")) {
-    return `; Domain=.${parts.slice(1).join(".")}`;
-  }
-  if (parts.length >= 2) return `; Domain=.${parts.slice(1).join(".")}`;
-  return "";
-}
-function readCookie(name) {
-  const prefix = `${name}=`;
-  for (const part of document.cookie.split(";")) {
-    const trimmed = part.trim();
-    if (trimmed.startsWith(prefix)) {
-      return decodeURIComponent(trimmed.slice(prefix.length));
-    }
-  }
-  return null;
-}
-function writeCookie(name, value) {
-  const secure = window.location.protocol === "https:" ? "; Secure" : "";
-  document.cookie = `${name}=${encodeURIComponent(value)}; Path=/; Max-Age=31536000; SameSite=Lax${suiteCookieDomainAttr()}${secure}`;
-}
-function clearCookie(name) {
-  const secure = window.location.protocol === "https:" ? "; Secure" : "";
-  document.cookie = `${name}=; Path=/; Max-Age=0; SameSite=Lax${suiteCookieDomainAttr()}${secure}`;
-}
 function readSidebarWidth(storageKey) {
   try {
     if (isSuiteSidebarKey(storageKey)) {
@@ -3090,7 +3091,7 @@ function SuiteSkeleton({
   return /* @__PURE__ */ jsx20(
     "div",
     {
-      className: cn("space-y-2", circle ? "flex flex-col items-center" : ""),
+      className: cn2("space-y-2", circle ? "flex flex-col items-center" : ""),
       "aria-hidden": true,
       children: Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ jsx20(
         "div",
@@ -3100,7 +3101,7 @@ function SuiteSkeleton({
           children: /* @__PURE__ */ jsx20(
             "div",
             {
-              className: cn(
+              className: cn2(
                 "ph-skeleton",
                 circle ? "h-10 w-10 rounded-full" : "h-3",
                 className
@@ -3124,7 +3125,7 @@ function SuiteSkeletonCard({
   return /* @__PURE__ */ jsxs17(
     "div",
     {
-      className: cn(
+      className: cn2(
         "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
       ),
@@ -3167,7 +3168,7 @@ function SuiteSkeletonList({
   className,
   items = 4
 }) {
-  return /* @__PURE__ */ jsx20("div", { className: cn("space-y-3", className), "aria-hidden": true, children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx20("div", { className: cn2("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]",
@@ -3194,7 +3195,7 @@ function SuiteEmptyState({
   return /* @__PURE__ */ jsxs17(
     "div",
     {
-      className: cn(
+      className: cn2(
         "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
@@ -3207,9 +3208,9 @@ function SuiteEmptyState({
         /* @__PURE__ */ jsxs17("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",
+            "h2",
             {
-              className: cn(
+              className: cn2(
                 "font-semibold text-ph-ink",
                 size === "sm" ? "text-base" : "text-lg"
               ),
@@ -3240,14 +3241,14 @@ function SuiteSettingsMobileNav({
     {
       "data-test": dataTest,
       "aria-label": ariaLabel,
-      className: cn("suite-settings-mobile-nav lg:hidden", className),
+      className: cn2("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__ */ jsx21(
           Icon,
           {
-            className: cn(
+            className: cn2(
               "h-4 w-4 shrink-0 transition",
               active ? "text-ph-surface" : "text-ph-mutedtext"
             ),
@@ -3262,7 +3263,7 @@ function SuiteSettingsMobileNav({
             "data-test": item.testId,
             onClick: () => onSelect(item.href),
             "aria-current": active ? "page" : void 0,
-            className: cn(
+            className: cn2(
               "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"
@@ -3347,7 +3348,7 @@ function SuiteSidebar({
       "aria-pressed": askAiOpen,
       "aria-label": askAiOpen ? "Back to navigation" : "Shelly AI",
       onClick: toggleAskAi,
-      className: cn(
+      className: cn2(
         "inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ph-focus-ring",
         askAiOpen ? "bg-ph-brand/10 text-ph-brand" : "text-ph-mutedtext hover:bg-ph-muted hover:text-ph-ink"
       ),
@@ -3359,7 +3360,7 @@ function SuiteSidebar({
       "div",
       {
         "data-suite-chat-open": "",
-        className: cn(
+        className: cn2(
           "flex h-full w-full min-w-0 flex-col text-ph-ink",
           surface ? "bg-ph-surface" : "bg-ph-canvas",
           className
@@ -3368,12 +3369,12 @@ function SuiteSidebar({
           /* @__PURE__ */ jsxs19(
             "div",
             {
-              className: cn(
+              className: cn2(
                 "flex h-14 shrink-0 items-center gap-1 border-b border-ph-border px-2",
                 surface ? "bg-ph-surface" : "bg-ph-canvas"
               ),
               children: [
-                /* @__PURE__ */ jsx22(Tooltip, { content: "Back to navigation", children: /* @__PURE__ */ jsx22(
+                /* @__PURE__ */ jsx22(
                   "button",
                   {
                     type: "button",
@@ -3383,7 +3384,7 @@ function SuiteSidebar({
                     className: "inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-ph-subtle transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand",
                     children: /* @__PURE__ */ jsx22(NavArrowLeft, { className: "h-4 w-4", "aria-hidden": true })
                   }
-                ) }),
+                ),
                 /* @__PURE__ */ jsx22("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-ph-ink", children: "Shelly AI" })
               ]
             }
@@ -3396,7 +3397,7 @@ function SuiteSidebar({
   return /* @__PURE__ */ jsxs19(
     "div",
     {
-      className: cn(
+      className: cn2(
         "flex h-full w-full min-w-0 flex-col text-ph-ink",
         surface ? "bg-ph-surface" : "bg-ph-canvas",
         className
@@ -3405,13 +3406,13 @@ function SuiteSidebar({
         appSwitcher || notificationBell ? /* @__PURE__ */ jsxs19(
           "div",
           {
-            className: cn(
+            className: cn2(
               "flex shrink-0 border-b border-ph-border",
               surface ? "bg-ph-surface" : "bg-ph-canvas",
               collapsed ? "flex-col items-center gap-1 px-1 py-2" : "h-14 items-center justify-between gap-2 px-3"
             ),
             children: [
-              /* @__PURE__ */ jsx22("div", { className: cn("min-w-0", collapsed ? "shrink-0" : "flex-1"), children: renderNode(appSwitcher, collapsed) }),
+              /* @__PURE__ */ jsx22("div", { className: cn2("min-w-0", collapsed ? "shrink-0" : "flex-1"), children: renderNode(appSwitcher, collapsed) }),
               collapsed ? null : /* @__PURE__ */ jsx22("div", { className: "shrink-0", children: renderNode(notificationBell, collapsed) })
             ]
           }
@@ -3419,14 +3420,23 @@ function SuiteSidebar({
         /* @__PURE__ */ jsxs19(
           "div",
           {
-            className: cn(
+            className: cn2(
               "flex min-h-0 flex-1 flex-col",
               surface ? "bg-ph-surface" : "bg-ph-canvas",
               chatOpen ? "min-h-0" : "overflow-y-auto",
-              collapsed ? "px-1.5 py-2" : "p-2"
+              collapsed ? "px-1.5 py-2" : "p-3"
             ),
             children: [
-              /* @__PURE__ */ jsx22("div", { className: cn("mb-3 w-full shrink-0", collapsed && "flex justify-center"), children: renderNode(contextSwitcher, collapsed) }),
+              contextSwitcher ? /* @__PURE__ */ jsx22(
+                "div",
+                {
+                  className: cn2(
+                    "mb-4 w-full shrink-0",
+                    collapsed && "flex justify-center"
+                  ),
+                  children: renderNode(contextSwitcher, collapsed)
+                }
+              ) : null,
               chatOpen ? /* @__PURE__ */ jsxs19("div", { className: "flex min-h-0 flex-1 flex-col", children: [
                 /* @__PURE__ */ jsxs19("div", { className: "mb-2 flex shrink-0 items-center gap-1", children: [
                   /* @__PURE__ */ jsxs19(
@@ -3446,7 +3456,7 @@ function SuiteSidebar({
                 ] }),
                 /* @__PURE__ */ jsx22("div", { className: "min-h-0 flex-1", children: askAi })
               ] }) : /* @__PURE__ */ jsxs19(Fragment7, { children: [
-                /* @__PURE__ */ jsx22("nav", { "aria-label": "Pages", className: "shrink-0 space-y-0.5", children: /* @__PURE__ */ jsx22("div", { className: "space-y-0.5", children: navItems.map((item) => {
+                /* @__PURE__ */ jsx22("nav", { "aria-label": "Pages", className: "shrink-0 space-y-1", children: /* @__PURE__ */ jsx22("div", { className: "space-y-1", children: navItems.map((item) => {
                   var _a;
                   const Icon = item.icon;
                   const active = Boolean(item.active);
@@ -3458,7 +3468,7 @@ function SuiteSidebar({
                       "data-test": (_a = item.dataTest) != null ? _a : "nav-link",
                       "aria-current": active ? "page" : void 0,
                       onClick: item.onClick,
-                      className: cn(
+                      className: cn2(
                         "group relative flex min-h-11 touch-manipulation items-center gap-2.5 rounded-[var(--ph-radius-app)] text-sm font-medium transition-colors",
                         active ? "bg-ph-muted" : "text-ph-subtle hover:bg-ph-muted hover:text-ph-ink",
                         collapsed ? "mx-auto size-11 shrink-0 justify-center gap-0 px-0 py-0" : "w-full px-2.5 py-2"
@@ -3467,7 +3477,7 @@ function SuiteSidebar({
                         /* @__PURE__ */ jsx22(
                           "span",
                           {
-                            className: cn(
+                            className: cn2(
                               "relative flex h-4 w-4 shrink-0 items-center justify-center",
                               item.iconClassName
                             ),
@@ -3484,7 +3494,7 @@ function SuiteSidebar({
                         /* @__PURE__ */ jsx22(
                           "span",
                           {
-                            className: cn(
+                            className: cn2(
                               "relative truncate",
                               active ? "text-ph-ink" : "text-ph-subtle group-hover:text-ph-ink",
                               collapsed && "sr-only"
@@ -3514,7 +3524,7 @@ function SuiteSidebar({
         /* @__PURE__ */ jsx22(
           "div",
           {
-            className: cn(
+            className: cn2(
               "shrink-0 border-t border-ph-border",
               surface ? "bg-ph-surface" : "bg-ph-canvas",
               collapsed ? "p-1.5" : "p-3"
@@ -3522,20 +3532,14 @@ function SuiteSidebar({
             children: /* @__PURE__ */ jsxs19(
               "div",
               {
-                className: cn(
+                className: cn2(
                   "flex items-center gap-2",
                   collapsed ? "flex-col items-center justify-center [&>div]:w-auto" : "w-full min-w-0"
                 ),
                 children: [
                   renderNode(userMenu, collapsed),
-                  showAskAi ? /* @__PURE__ */ jsx22(
-                    "div",
-                    {
-                      className: cn("shrink-0", collapsed ? "mt-2" : "ml-auto"),
-                      children: /* @__PURE__ */ jsx22(Tooltip, { content: "Shelly AI", side: collapsed ? "right" : "top", children: askAiButton })
-                    }
-                  ) : footerExtras ? /* @__PURE__ */ jsx22("div", { className: cn("shrink-0", collapsed ? "mt-2" : "ml-auto"), children: renderNode(footerExtras, collapsed) }) : null,
-                  showAskAi && footerExtras ? /* @__PURE__ */ jsx22("div", { className: cn("shrink-0", collapsed && "mt-2"), children: renderNode(footerExtras, collapsed) }) : null
+                  showAskAi ? /* @__PURE__ */ jsx22("div", { className: cn2("shrink-0", collapsed ? "mt-2" : "ml-auto"), children: /* @__PURE__ */ jsx22(Tooltip, { content: "Shelly AI", side: collapsed ? "right" : "top", children: askAiButton }) }) : footerExtras ? /* @__PURE__ */ jsx22("div", { className: cn2("shrink-0", collapsed ? "mt-2" : "ml-auto"), children: renderNode(footerExtras, collapsed) }) : null,
+                  showAskAi && footerExtras ? /* @__PURE__ */ jsx22("div", { className: cn2("shrink-0", collapsed && "mt-2"), children: renderNode(footerExtras, collapsed) }) : null
                 ]
               }
             )
@@ -3565,7 +3569,7 @@ function SuiteAppLayout({
     "div",
     {
       "data-test": "app-shell",
-      className: cn(
+      className: cn2(
         "suite-app-layout flex h-dvh overflow-hidden",
         className
       ),
@@ -3573,6 +3577,7 @@ function SuiteAppLayout({
         /* @__PURE__ */ jsxs20(
           "aside",
           {
+            "aria-label": "Sidebar",
             className: "relative hidden shrink-0 flex-col overflow-visible border-r border-ph-border ease-out lg:flex",
             style: { width: `${sidebarWidth}px` },
             "data-collapsed": collapsed ? "true" : "false",
@@ -3584,6 +3589,10 @@ function SuiteAppLayout({
                   role: "separator",
                   "aria-orientation": "vertical",
                   "aria-label": "Resize sidebar",
+                  "aria-valuenow": sidebarWidth,
+                  "aria-valuemin": SIDEBAR_RAIL_WIDTH,
+                  "aria-valuemax": SIDEBAR_MAX_WIDTH,
+                  "aria-valuetext": `${sidebarWidth} pixels`,
                   "data-test": "sidebar-resize-handle",
                   tabIndex: onResizeBy ? 0 : void 0,
                   onPointerDown: onStartResize,
@@ -3600,7 +3609,7 @@ function SuiteAppLayout({
                       onResizeBy == null ? void 0 : onResizeBy(16);
                     }
                   },
-                  className: "absolute inset-y-0 right-0 z-20 w-2 cursor-col-resize touch-none transition-colors hover:bg-[color-mix(in_oklab,var(--ph-accent)_30%,transparent)]"
+                  className: "absolute inset-y-0 right-0 z-20 w-2 cursor-col-resize touch-none transition-colors before:absolute before:-left-2 before:-right-2 before:inset-y-0 before:content-[''] hover:bg-[color-mix(in_oklab,var(--ph-accent)_30%,transparent)]"
                 }
               ) : null
             ]
@@ -3612,10 +3621,10 @@ function SuiteAppLayout({
             "main",
             {
               id: "main-content",
-              tabIndex: -1,
+              tabIndex: 0,
               "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",
+              className: cn2(
+                "flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden overscroll-contain bg-ph-canvas focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ph-focus",
                 "suite-app-layout__main",
                 lockMainScroll ? "overflow-hidden" : "overflow-y-auto"
               ),
@@ -3630,78 +3639,1970 @@ function SuiteAppLayout({
 }
 
 // src/suite/components/suite-integration-picker.tsx
-import { useMemo, useState as useState10 } from "react";
-import { NavArrowDown as NavArrowDown2, NavArrowUp, Server as Plug, Xmark } from "iconoir-react";
-import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
+import {
+  useEffect as useEffect8,
+  useMemo,
+  useRef as useRef3,
+  useState as useState10
+} from "react";
+import {
+  EvPlug as Plug,
+  Filter,
+  NavArrowDown as NavArrowDown2,
+  NavArrowUp,
+  Search,
+  Xmark
+} from "iconoir-react";
+import { Fragment as Fragment8, jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 var DESCRIPTION_LIMIT = 90;
-function SuiteIntegrationPicker({
-  open,
-  items,
-  connectedItems = [],
-  loading = false,
-  onClose,
-  onConnect,
-  onDisconnect,
-  title = "Integrate an app",
-  description = "Connect an app to this workspace securely.",
-  dataTest = "suite-integration-picker"
-}) {
-  const [query, setQuery] = useState10("");
-  const [category, setCategory] = useState10("all");
-  const [expanded, setExpanded] = useState10(null);
-  const categories = useMemo(
-    () => Array.from(new Set(items.flatMap((item) => {
-      var _a;
-      return (_a = item.categories) != null ? _a : [];
-    }))).sort(),
-    [items]
+function IntegrationSkeletonCard() {
+  return /* @__PURE__ */ jsxs21(
+    "div",
+    {
+      className: "flex min-h-36 min-w-0 animate-pulse flex-col justify-between rounded-xl border border-ph-border bg-ph-surface p-4",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxs21("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx24("div", { className: "h-10 w-10 shrink-0 rounded-lg bg-ph-muted" }),
+          /* @__PURE__ */ jsxs21("div", { className: "min-w-0 flex-1 space-y-2 pt-1", children: [
+            /* @__PURE__ */ jsx24("div", { className: "h-4 w-3/5 rounded bg-ph-muted" }),
+            /* @__PURE__ */ jsx24("div", { className: "h-3 w-full rounded bg-ph-muted" }),
+            /* @__PURE__ */ jsx24("div", { className: "h-3 w-4/5 rounded bg-ph-muted" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx24("div", { className: "mt-3 h-9 w-20 rounded bg-ph-muted" })
+      ]
+    }
+  );
+}
+var SKELETON_COUNT = 6;
+var AUTH_SCHEME_LABELS = {
+  API_KEY: "API key",
+  BASIC_AUTH: "Basic auth",
+  BEARER_TOKEN: "Bearer token",
+  OAUTH2: "OAuth 2.0"
+};
+function authSchemeLabel(scheme) {
+  var _a;
+  const normalised = scheme.trim().toUpperCase();
+  return (_a = AUTH_SCHEME_LABELS[normalised]) != null ? _a : normalised.replace(/[-_]/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase());
+}
+function authSchemesFor(item) {
+  var _a;
+  return Array.from(
+    new Set(
+      ((_a = item.authSchemes) != null ? _a : []).map((scheme) => scheme.trim().toUpperCase()).filter(Boolean)
+    )
+  );
+}
+var CATEGORY_APP_AFFINITY = {
+  calendar: ["turtletime", "tides"],
+  email: ["turtletime", "tides"],
+  code: ["tides", "kraken"],
+  chat: ["tides", "kraken"],
+  documents: ["kraken"],
+  notes: ["kraken"],
+  knowledge: ["kraken"],
+  file_storage: ["kraken"],
+  crm: ["shellstack", "tides"],
+  finance: ["shellstack", "tides"],
+  payment: ["shellstack", "tides"],
+  monitoring: ["tides", "kraken"],
+  design: ["tides", "kraken"],
+  support: ["tides", "shellstack"],
+  ticketing: ["tides", "kraken"]
+};
+var DEFAULT_APP_AFFINITY = ["tides", "kraken"];
+function suiteAppsForIntegration(categories) {
+  var _a;
+  const apps = /* @__PURE__ */ new Set();
+  for (const category of categories != null ? categories : []) {
+    for (const app of (_a = CATEGORY_APP_AFFINITY[category.trim().toLowerCase()]) != null ? _a : []) {
+      apps.add(app);
+    }
+  }
+  return apps.size > 0 ? SUITE_APPS2.filter((app) => apps.has(app.slug)).map((app) => app.slug) : [...DEFAULT_APP_AFFINITY];
+}
+function SuiteIntegrationPicker({
+  open,
+  items,
+  connectedItems = [],
+  loading = false,
+  catalogLoading = false,
+  loadingMore = false,
+  hasMore = false,
+  onEndReached,
+  search: controlledSearch,
+  onSearchChange,
+  category: controlledCategory,
+  categories: controlledCategories,
+  onCategoryChange,
+  onClose,
+  onConnect,
+  onFetchAuthFields,
+  onDisconnect,
+  title = "Integrate an app",
+  description = "Connect an app to this workspace securely.",
+  dataTest = "suite-integration-picker"
+}) {
+  const [query, setQuery] = useState10("");
+  const [category, setCategory] = useState10("all");
+  const [categoryQuery, setCategoryQuery] = useState10("");
+  const [categoryMenuOpen, setCategoryMenuOpen] = useState10(false);
+  const [expanded, setExpanded] = useState10(null);
+  const categoryMenuRef = useRef3(null);
+  const categoryTriggerRef = useRef3(null);
+  const categorySearchRef = useRef3(null);
+  const categoryOptionRefs = useRef3({});
+  const pendingCategoryFocus = useRef3(
+    null
+  );
+  const scrollViewportRef = useRef3(null);
+  const loadMoreSentinelRef = useRef3(null);
+  const loadMoreInFlightRef = useRef3(false);
+  const authRequestRef = useRef3(0);
+  const [methodItem, setMethodItem] = useState10(null);
+  const [authItem, setAuthItem] = useState10(null);
+  const [authValues, setAuthValues] = useState10({});
+  const [authLoading, setAuthLoading] = useState10(false);
+  const [authSubmitting, setAuthSubmitting] = useState10(false);
+  const [authError, setAuthError] = useState10(null);
+  const [connectionError, setConnectionError] = useState10(null);
+  const [itemToDisconnect, setItemToDisconnect] = useState10(null);
+  const [disconnecting, setDisconnecting] = useState10(false);
+  const [disconnectError, setDisconnectError] = useState10(null);
+  const itemCategories = useMemo(
+    () => Array.from(
+      new Set(items.flatMap((item) => {
+        var _a;
+        return (_a = item.categories) != null ? _a : [];
+      }))
+    ).sort(),
+    [items]
   );
-  const filtered = items.filter((item) => {
+  const categories = controlledCategories != null ? controlledCategories : itemCategories;
+  const activeSearch = controlledSearch != null ? controlledSearch : query;
+  const activeCategory = controlledCategory != null ? controlledCategory : category;
+  const categoryLabel = (value) => value.replace(/[-_]/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase());
+  const filtered = onSearchChange || onCategoryChange ? items : items.filter((item) => {
     var _a;
-    const haystack = `${item.label} ${item.description}`.toLowerCase();
-    return haystack.includes(query.trim().toLowerCase()) && (category === "all" || ((_a = item.categories) != null ? _a : []).includes(category));
+    return item.label.toLowerCase().includes(activeSearch.trim().toLowerCase()) && (activeCategory === "all" || ((_a = item.categories) != null ? _a : []).includes(activeCategory));
   });
-  return /* @__PURE__ */ jsx24(Modal, { open, onClose, title, description, size: "xl", dataTest, children: /* @__PURE__ */ jsxs21("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx24(Input, { value: query, onChange: (event) => setQuery(event.target.value), placeholder: "Search apps...", "aria-label": "Search apps" }),
-    /* @__PURE__ */ jsx24("div", { className: "flex flex-wrap gap-2", role: "group", "aria-label": "Integration categories", children: ["all", ...categories].map((value) => /* @__PURE__ */ jsx24("button", { type: "button", onClick: () => setCategory(value), className: category === value ? "rounded-full bg-ph-brand px-3 py-1.5 text-xs font-semibold text-white" : "rounded-full border border-ph-border px-3 py-1.5 text-xs text-ph-subtle hover:bg-ph-muted", children: value === "all" ? "All apps" : value }, value)) }),
-    loading ? /* @__PURE__ */ jsx24("p", { className: "text-sm text-ph-subtle", children: "Loading apps..." }) : /* @__PURE__ */ jsx24("div", { className: "grid max-h-[60vh] gap-3 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3", children: filtered.map((item) => {
-      var _a, _b;
-      const isExpanded = expanded === item.id;
-      const longDescription = item.description.length > DESCRIPTION_LIMIT;
-      const text = isExpanded || !longDescription ? item.description : `${item.description.slice(0, DESCRIPTION_LIMIT).trimEnd()}...`;
-      return /* @__PURE__ */ jsxs21("div", { className: "flex min-h-36 flex-col justify-between rounded-xl border border-ph-border bg-ph-surface p-4", children: [
-        /* @__PURE__ */ jsx24("button", { type: "button", className: "text-left", onClick: () => longDescription && setExpanded(isExpanded ? null : item.id), "aria-expanded": isExpanded, children: /* @__PURE__ */ jsxs21("span", { className: "flex items-start gap-3", children: [
-          /* @__PURE__ */ jsx24("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-ph-muted text-ph-ink", children: (_a = item.icon) != null ? _a : /* @__PURE__ */ jsx24(Plug, { className: "h-5 w-5", "aria-hidden": true }) }),
-          /* @__PURE__ */ jsxs21("span", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx24("span", { className: "block font-medium text-ph-ink", children: item.label }),
-            /* @__PURE__ */ jsx24("span", { className: "mt-1 block text-xs text-ph-subtle", children: text }),
-            longDescription ? /* @__PURE__ */ jsxs21("span", { className: "mt-1 block text-xs font-medium text-ph-brand", children: [
-              isExpanded ? "See less" : "See more",
-              " ",
-              isExpanded ? /* @__PURE__ */ jsx24(NavArrowUp, { className: "inline h-3 w-3" }) : /* @__PURE__ */ jsx24(NavArrowDown2, { className: "inline h-3 w-3" })
-            ] }) : null
-          ] })
-        ] }) }),
-        /* @__PURE__ */ jsx24(Button, { type: "button", variant: "primary", className: "mt-3 self-start", disabled: Boolean(item.unavailableReason) || item.connecting, onClick: () => onConnect(item), children: /* @__PURE__ */ jsxs21("span", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx24(Plug, { className: "h-3.5 w-3.5", "aria-hidden": true }),
-          item.connecting ? "Connecting..." : (_b = item.unavailableReason) != null ? _b : "Connect"
-        ] }) })
-      ] }, item.id);
-    }) }),
-    connectedItems.length > 0 && onDisconnect ? /* @__PURE__ */ jsxs21("div", { className: "space-y-2 border-t border-ph-border pt-4", children: [
-      /* @__PURE__ */ jsx24("h3", { className: "font-medium text-ph-ink", children: "Connected apps" }),
-      connectedItems.map((item) => /* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-between gap-3 rounded-lg border border-ph-border bg-ph-muted p-3", children: [
-        /* @__PURE__ */ jsxs21("span", { className: "flex min-w-0 items-center gap-2 text-sm text-ph-ink", children: [
-          item.icon,
-          /* @__PURE__ */ jsx24("span", { className: "truncate", children: item.label })
+  const visibleCategories = categories.filter(
+    (value) => categoryLabel(value).toLowerCase().includes(categoryQuery.trim().toLowerCase())
+  );
+  const categoryValues = ["all", ...visibleCategories];
+  const focusableCategory = categoryValues.includes(activeCategory) ? activeCategory : "all";
+  function focusCategory(value) {
+    pendingCategoryFocus.current = value;
+  }
+  function openCategoryMenu(focus = null) {
+    setCategoryQuery("");
+    if (focus) focusCategory(focus);
+    setCategoryMenuOpen(true);
+  }
+  function closeCategoryMenu(restoreFocus = false) {
+    if (restoreFocus) focusCategory("trigger");
+    setCategoryMenuOpen(false);
+  }
+  function selectCategory(value) {
+    setCategory(value);
+    onCategoryChange == null ? void 0 : onCategoryChange(value);
+    closeCategoryMenu(true);
+  }
+  function moveCategoryFocus(event, value) {
+    var _a;
+    const index = categoryValues.indexOf(value);
+    let nextIndex = null;
+    if (event.key === "ArrowDown") nextIndex = (index + 1) % categoryValues.length;
+    else if (event.key === "ArrowUp")
+      nextIndex = (index - 1 + categoryValues.length) % categoryValues.length;
+    else if (event.key === "Home") nextIndex = 0;
+    else if (event.key === "End") nextIndex = categoryValues.length - 1;
+    if (nextIndex === null) return;
+    event.preventDefault();
+    (_a = categoryOptionRefs.current[categoryValues[nextIndex]]) == null ? void 0 : _a.focus();
+  }
+  function handleCategoryTriggerKeyDown(event) {
+    var _a;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      openCategoryMenu(activeCategory === "all" ? "all" : activeCategory);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      openCategoryMenu((_a = categoryValues.at(-1)) != null ? _a : "all");
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      openCategoryMenu("search");
+    }
+  }
+  function resetAuthForm() {
+    authRequestRef.current += 1;
+    setAuthItem(null);
+    setAuthValues({});
+    setAuthLoading(false);
+    setAuthError(null);
+  }
+  function closeAuthForm() {
+    if (authSubmitting) return;
+    resetAuthForm();
+  }
+  async function prepareConnection(item, scheme) {
+    var _a;
+    setMethodItem(null);
+    setAuthError(null);
+    setConnectionError(null);
+    setAuthValues({});
+    if (!onFetchAuthFields) {
+      try {
+        await onConnect(item, { auth_scheme: scheme });
+      } catch (cause) {
+        setConnectionError(
+          cause instanceof Error ? cause.message : "Could not connect the app."
+        );
+      }
+      return;
+    }
+    const requestId = authRequestRef.current + 1;
+    authRequestRef.current = requestId;
+    setAuthItem({ item, scheme, fields: [] });
+    setAuthLoading(true);
+    try {
+      const details = await onFetchAuthFields(item, scheme);
+      if (requestId !== authRequestRef.current) return;
+      const resolvedScheme = (_a = details.auth_scheme) != null ? _a : scheme;
+      if (details.managed) {
+        setAuthItem(null);
+        await onConnect(item, { auth_scheme: resolvedScheme });
+      } else if (details.fields.length === 0) {
+        setAuthItem(null);
+        await onConnect(item, {
+          auth_scheme: resolvedScheme,
+          auth_fields: {}
+        });
+      } else {
+        setAuthItem({ item, scheme: resolvedScheme, fields: details.fields });
+      }
+    } catch (cause) {
+      if (requestId === authRequestRef.current) {
+        const message = cause instanceof Error ? cause.message : "Could not load authentication details.";
+        setAuthError(message);
+        setConnectionError(message);
+      }
+    } finally {
+      if (requestId === authRequestRef.current) setAuthLoading(false);
+    }
+  }
+  function connectItem(item) {
+    setConnectionError(null);
+    const schemes = authSchemesFor(item);
+    if (schemes.length > 1) {
+      setMethodItem(item);
+      return;
+    }
+    if (schemes.length === 1) {
+      void prepareConnection(item, schemes[0]);
+      return;
+    }
+    void (async () => {
+      try {
+        await onConnect(item);
+      } catch (cause) {
+        setConnectionError(
+          cause instanceof Error ? cause.message : "Could not connect the app."
+        );
+      }
+    })();
+  }
+  function requestDisconnect(item) {
+    setDisconnectError(null);
+    setItemToDisconnect(item);
+  }
+  async function disconnectItem() {
+    if (!onDisconnect || !itemToDisconnect) return;
+    setDisconnecting(true);
+    setDisconnectError(null);
+    try {
+      await onDisconnect(itemToDisconnect);
+      setItemToDisconnect(null);
+    } catch (cause) {
+      setDisconnectError(
+        cause instanceof Error ? cause.message : "Could not disconnect the app."
+      );
+    } finally {
+      setDisconnecting(false);
+    }
+  }
+  async function submitAuthForm(event) {
+    event.preventDefault();
+    if (!authItem) return;
+    setAuthSubmitting(true);
+    setAuthError(null);
+    try {
+      await onConnect(authItem.item, {
+        auth_scheme: authItem.scheme,
+        auth_fields: authValues
+      });
+      resetAuthForm();
+    } catch (cause) {
+      setAuthError(
+        cause instanceof Error ? cause.message : "Could not connect the app."
+      );
+    } finally {
+      setAuthSubmitting(false);
+    }
+  }
+  useEffect8(() => {
+    if (!categoryMenuOpen) return;
+    const handlePointerDown = (event) => {
+      var _a;
+      if (!((_a = categoryMenuRef.current) == null ? void 0 : _a.contains(event.target))) {
+        closeCategoryMenu();
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") closeCategoryMenu(true);
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [categoryMenuOpen]);
+  useEffect8(() => {
+    var _a, _b, _c;
+    const target = pendingCategoryFocus.current;
+    if (!target) return;
+    pendingCategoryFocus.current = null;
+    if (target === "trigger") (_a = categoryTriggerRef.current) == null ? void 0 : _a.focus();
+    else if (target === "search") (_b = categorySearchRef.current) == null ? void 0 : _b.focus();
+    else (_c = categoryOptionRefs.current[target]) == null ? void 0 : _c.focus();
+  }, [activeCategory, categoryMenuOpen, categoryQuery, visibleCategories]);
+  useEffect8(() => {
+    if (!loadingMore) loadMoreInFlightRef.current = false;
+  }, [loadingMore]);
+  useEffect8(() => {
+    const root = scrollViewportRef.current;
+    const sentinel = loadMoreSentinelRef.current;
+    if (!open || !root || !sentinel || !hasMore || !onEndReached || loading || catalogLoading || loadingMore) {
+      return;
+    }
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting || loadMoreInFlightRef.current) return;
+        loadMoreInFlightRef.current = true;
+        observer.unobserve(entry.target);
+        onEndReached();
+      },
+      { root, rootMargin: "0px 0px 80px", threshold: 0 }
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [catalogLoading, hasMore, loading, loadingMore, onEndReached, open]);
+  return /* @__PURE__ */ jsxs21(Fragment8, { children: [
+    /* @__PURE__ */ jsx24(
+      Modal,
+      {
+        open,
+        onClose,
+        title,
+        description,
+        size: "xl",
+        dataTest,
+        bodyClassName: "!overflow-hidden",
+        children: /* @__PURE__ */ jsxs21("div", { className: "space-y-4", children: [
+          connectionError ? /* @__PURE__ */ jsx24("p", { className: "text-sm text-ph-danger", role: "alert", children: connectionError }) : null,
+          /* @__PURE__ */ jsxs21("div", { className: "grid gap-4 md:grid-cols-2", children: [
+            /* @__PURE__ */ jsxs21("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx24(
+                Search,
+                {
+                  className: "pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-ph-subtle",
+                  "aria-hidden": true
+                }
+              ),
+              /* @__PURE__ */ jsx24(
+                Input,
+                {
+                  value: activeSearch,
+                  onChange: (event) => {
+                    setQuery(event.target.value);
+                    onSearchChange == null ? void 0 : onSearchChange(event.target.value);
+                  },
+                  placeholder: "Search apps...",
+                  "aria-label": "Search apps",
+                  className: "pl-10"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs21("div", { ref: categoryMenuRef, className: "relative", children: [
+              /* @__PURE__ */ jsxs21(
+                "button",
+                {
+                  ref: categoryTriggerRef,
+                  id: `${dataTest}-category`,
+                  type: "button",
+                  className: "ph-input flex w-full items-center justify-between text-left",
+                  "aria-haspopup": "listbox",
+                  "aria-expanded": categoryMenuOpen,
+                  "aria-controls": categoryMenuOpen ? `${dataTest}-category-options` : void 0,
+                  "aria-label": "Filter by category",
+                  onClick: () => {
+                    if (categoryMenuOpen) closeCategoryMenu();
+                    else openCategoryMenu();
+                  },
+                  onKeyDown: handleCategoryTriggerKeyDown,
+                  children: [
+                    /* @__PURE__ */ jsxs21("span", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx24(
+                        Filter,
+                        {
+                          className: "h-4 w-4 shrink-0 text-ph-subtle",
+                          "aria-hidden": true
+                        }
+                      ),
+                      /* @__PURE__ */ jsx24("span", { children: activeCategory === "all" ? "All apps" : categoryLabel(activeCategory) })
+                    ] }),
+                    /* @__PURE__ */ jsx24(
+                      NavArrowDown2,
+                      {
+                        className: `h-4 w-4 transition-transform ${categoryMenuOpen ? "rotate-180" : ""}`,
+                        "aria-hidden": true
+                      }
+                    )
+                  ]
+                }
+              ),
+              categoryMenuOpen ? /* @__PURE__ */ jsxs21(
+                "div",
+                {
+                  className: "absolute z-20 mt-2 max-h-[min(22rem,calc(100dvh-12rem))] w-full max-w-full overflow-hidden rounded-lg border border-ph-border bg-ph-surface p-2 shadow-lg",
+                  children: [
+                    /* @__PURE__ */ jsx24(
+                      Input,
+                      {
+                        ref: categorySearchRef,
+                        value: categoryQuery,
+                        onChange: (event) => setCategoryQuery(event.target.value),
+                        placeholder: "Search categories...",
+                        "aria-label": "Search categories",
+                        onKeyDown: (event) => {
+                          var _a;
+                          if (event.key === "ArrowDown") {
+                            event.preventDefault();
+                            (_a = categoryOptionRefs.current[categoryValues[0]]) == null ? void 0 : _a.focus();
+                          } else if (event.key === "Escape") {
+                            event.preventDefault();
+                            closeCategoryMenu(true);
+                          }
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx24(
+                      "div",
+                      {
+                        id: `${dataTest}-category-options`,
+                        role: "listbox",
+                        "aria-label": "Integration categories",
+                        className: "mt-2 max-h-52 overflow-y-auto",
+                        "data-test": "integration-category-options",
+                        children: categoryValues.map((value) => /* @__PURE__ */ jsx24(
+                          "button",
+                          {
+                            type: "button",
+                            role: "option",
+                            "aria-selected": activeCategory === value,
+                            tabIndex: value === focusableCategory ? 0 : -1,
+                            ref: (element) => {
+                              categoryOptionRefs.current[value] = element;
+                            },
+                            className: `flex w-full min-w-0 items-center rounded-md px-3 py-2 text-left text-sm break-words ${activeCategory === value ? "bg-ph-brand text-[var(--ph-on-accent)]" : "text-ph-ink hover:bg-ph-muted"}`,
+                            onClick: () => selectCategory(value),
+                            onKeyDown: (event) => {
+                              if (event.key === "Escape") {
+                                event.preventDefault();
+                                closeCategoryMenu(true);
+                              } else if (event.key === "Enter" || event.key === " ") {
+                                event.preventDefault();
+                                selectCategory(value);
+                              } else moveCategoryFocus(event, value);
+                            },
+                            children: value === "all" ? "All apps" : categoryLabel(value)
+                          },
+                          value
+                        ))
+                      }
+                    )
+                  ]
+                }
+              ) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs21(
+            "div",
+            {
+              ref: scrollViewportRef,
+              className: "min-h-0 max-h-[min(60vh,32rem)] w-full overflow-y-auto pr-1",
+              children: [
+                loading || catalogLoading ? /* @__PURE__ */ jsx24(
+                  "div",
+                  {
+                    className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3",
+                    "aria-label": "Loading apps",
+                    children: Array.from({ length: SKELETON_COUNT }, (_, index) => /* @__PURE__ */ jsx24(IntegrationSkeletonCard, {}, index))
+                  }
+                ) : /* @__PURE__ */ jsxs21("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3", children: [
+                  filtered.map((item) => {
+                    var _a, _b;
+                    const isExpanded = expanded === item.id;
+                    const longDescription = item.description.length > DESCRIPTION_LIMIT;
+                    const text = isExpanded || !longDescription ? item.description : `${item.description.slice(0, DESCRIPTION_LIMIT).trimEnd()}...`;
+                    return /* @__PURE__ */ jsxs21(
+                      "div",
+                      {
+                        className: "flex min-h-36 min-w-0 flex-col justify-between rounded-xl border border-ph-border bg-ph-surface p-4",
+                        children: [
+                          /* @__PURE__ */ jsx24(
+                            "button",
+                            {
+                              type: "button",
+                              className: "min-w-0 text-left",
+                              onClick: () => longDescription && setExpanded(isExpanded ? null : item.id),
+                              "aria-expanded": isExpanded,
+                              children: /* @__PURE__ */ jsxs21("span", { className: "flex items-start gap-3", children: [
+                                /* @__PURE__ */ jsx24("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-ph-muted text-ph-ink", children: (_a = item.icon) != null ? _a : /* @__PURE__ */ jsx24(Plug, { className: "h-5 w-5", "aria-hidden": true }) }),
+                                /* @__PURE__ */ jsxs21("span", { className: "min-w-0", children: [
+                                  /* @__PURE__ */ jsx24("span", { className: "block truncate font-medium text-ph-ink", children: item.label }),
+                                  /* @__PURE__ */ jsx24("span", { className: "mt-1 block text-xs text-ph-subtle", children: text }),
+                                  longDescription ? /* @__PURE__ */ jsxs21("span", { className: "mt-1 block text-xs font-medium text-ph-brand", children: [
+                                    isExpanded ? "See less" : "See more",
+                                    " ",
+                                    isExpanded ? /* @__PURE__ */ jsx24(NavArrowUp, { className: "inline h-3 w-3" }) : /* @__PURE__ */ jsx24(NavArrowDown2, { className: "inline h-3 w-3" })
+                                  ] }) : null
+                                ] })
+                              ] })
+                            }
+                          ),
+                          suiteAppsForIntegration(item.categories).length > 0 ? /* @__PURE__ */ jsx24(
+                            "div",
+                            {
+                              className: "mt-3 flex flex-wrap items-center gap-1.5",
+                              "aria-label": "Works with ShellStack apps",
+                              children: suiteAppsForIntegration(item.categories).map(
+                                (app) => /* @__PURE__ */ jsx24(
+                                  "span",
+                                  {
+                                    "data-test": `${dataTest}-${item.id}-app-${app}`,
+                                    children: /* @__PURE__ */ jsx24(
+                                      SuiteAppIcon,
+                                      {
+                                        app,
+                                        size: 16,
+                                        label: `Works with ${SUITE_APP_MAP[app].name}`,
+                                        className: "rounded-[4px]"
+                                      }
+                                    )
+                                  },
+                                  app
+                                )
+                              )
+                            }
+                          ) : null,
+                          authSchemesFor(item).length > 0 ? /* @__PURE__ */ jsx24(
+                            "div",
+                            {
+                              className: "mt-3 flex flex-wrap gap-1.5",
+                              "aria-label": "Connection methods",
+                              children: authSchemesFor(item).map((scheme) => /* @__PURE__ */ jsx24(
+                                "span",
+                                {
+                                  className: "rounded-full border border-ph-border bg-ph-muted px-2 py-1 text-[0.6875rem] font-medium text-ph-subtle",
+                                  "data-test": `${dataTest}-${item.id}-auth-${scheme.toLowerCase()}`,
+                                  children: authSchemeLabel(scheme)
+                                },
+                                scheme
+                              ))
+                            }
+                          ) : null,
+                          /* @__PURE__ */ jsx24(
+                            Button,
+                            {
+                              type: "button",
+                              variant: "primary",
+                              className: "mt-3 self-start",
+                              disabled: Boolean(item.unavailableReason) || item.connecting,
+                              onClick: () => connectItem(item),
+                              children: /* @__PURE__ */ jsxs21("span", { className: "flex items-center gap-1.5", children: [
+                                /* @__PURE__ */ jsx24(Plug, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+                                item.connecting ? "Connecting..." : (_b = item.unavailableReason) != null ? _b : "Connect"
+                              ] })
+                            }
+                          )
+                        ]
+                      },
+                      item.id
+                    );
+                  }),
+                  loadingMore ? Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx24(IntegrationSkeletonCard, {}, `loading-${index}`)) : null
+                ] }),
+                /* @__PURE__ */ jsx24("div", { ref: loadMoreSentinelRef, className: "h-1", "aria-hidden": "true" })
+              ]
+            }
+          ),
+          connectedItems.length > 0 && onDisconnect ? /* @__PURE__ */ jsxs21("div", { className: "space-y-2 border-t border-ph-border pt-4", children: [
+            /* @__PURE__ */ jsx24("h3", { className: "font-medium text-ph-ink", children: "Connected apps" }),
+            connectedItems.map((item) => /* @__PURE__ */ jsxs21(
+              "div",
+              {
+                className: "flex items-center justify-between gap-3 rounded-lg border border-ph-border bg-ph-muted p-3",
+                children: [
+                  /* @__PURE__ */ jsxs21("span", { className: "flex min-w-0 items-center gap-2 text-sm text-ph-ink", children: [
+                    item.icon,
+                    /* @__PURE__ */ jsx24("span", { className: "truncate", children: item.label })
+                  ] }),
+                  /* @__PURE__ */ jsx24(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "danger",
+                      onClick: () => requestDisconnect(item),
+                      children: /* @__PURE__ */ jsxs21("span", { className: "flex items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsx24(Xmark, { className: "h-4 w-4", "aria-hidden": true }),
+                        "Disconnect"
+                      ] })
+                    }
+                  )
+                ]
+              },
+              item.id
+            ))
+          ] }) : null
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs21(
+      Modal,
+      {
+        open: itemToDisconnect !== null,
+        onClose: () => {
+          if (!disconnecting) setItemToDisconnect(null);
+        },
+        title: "Disconnect app",
+        description: "This will stop syncing data from this app.",
+        size: "sm",
+        zIndex: 220,
+        dataTest: `${dataTest}-disconnect-confirmation`,
+        footer: /* @__PURE__ */ jsxs21("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx24(
+            Button,
+            {
+              type: "button",
+              variant: "tertiary",
+              onClick: () => setItemToDisconnect(null),
+              disabled: disconnecting,
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx24(
+            Button,
+            {
+              type: "button",
+              variant: "danger",
+              onClick: () => void disconnectItem(),
+              disabled: disconnecting,
+              "data-test": `${dataTest}-disconnect-confirm`,
+              children: disconnecting ? "Disconnecting..." : "Disconnect app"
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsx24(Button, { type: "button", variant: "danger", onClick: () => onDisconnect(item), children: /* @__PURE__ */ jsxs21("span", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx24(Xmark, { className: "h-4 w-4", "aria-hidden": true }),
-          "Disconnect"
-        ] }) })
-      ] }, item.id))
-    ] }) : null
-  ] }) });
+        children: [
+          disconnectError ? /* @__PURE__ */ jsx24("p", { className: "text-sm text-ph-danger", role: "alert", children: disconnectError }) : null,
+          /* @__PURE__ */ jsxs21("p", { className: "text-sm text-ph-ink", children: [
+            "Disconnect ",
+            itemToDisconnect == null ? void 0 : itemToDisconnect.label,
+            "? You can reconnect it later."
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx24(
+      Modal,
+      {
+        open: Boolean(methodItem),
+        onClose: () => setMethodItem(null),
+        title: methodItem ? `Connect ${methodItem.label}` : "Choose connection method",
+        description: "Choose how you want to connect this app.",
+        size: "sm",
+        zIndex: 200,
+        dataTest: `${dataTest}-auth-method`,
+        children: methodItem ? /* @__PURE__ */ jsx24("div", { className: "space-y-2", children: authSchemesFor(methodItem).map((scheme) => /* @__PURE__ */ jsxs21(
+          "button",
+          {
+            type: "button",
+            className: "flex w-full items-center justify-between rounded-lg border border-ph-border bg-ph-surface px-3 py-3 text-left text-sm text-ph-ink transition hover:border-ph-brand hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand",
+            onClick: () => void prepareConnection(methodItem, scheme),
+            "data-test": `${dataTest}-choose-${scheme.toLowerCase()}`,
+            children: [
+              /* @__PURE__ */ jsx24("span", { className: "font-medium", children: authSchemeLabel(scheme) }),
+              /* @__PURE__ */ jsx24("span", { className: "text-xs text-ph-subtle", children: "Select" })
+            ]
+          },
+          scheme
+        )) }) : null
+      }
+    ),
+    /* @__PURE__ */ jsx24(
+      Modal,
+      {
+        open: Boolean(authItem),
+        onClose: closeAuthForm,
+        title: authItem ? `${authItem.item.label} authentication` : "Authentication",
+        description: "Enter the credentials required by Composio. They are sent securely to the ShellStack API.",
+        size: "md",
+        zIndex: 210,
+        dataTest: `${dataTest}-auth-form`,
+        children: authLoading ? /* @__PURE__ */ jsx24("p", { className: "text-sm text-ph-subtle", children: "Loading authentication fields..." }) : authItem ? /* @__PURE__ */ jsxs21(
+          "form",
+          {
+            className: "space-y-4",
+            onSubmit: (event) => void submitAuthForm(event),
+            children: [
+              authError ? /* @__PURE__ */ jsx24("p", { className: "text-sm text-ph-danger", role: "alert", children: authError }) : null,
+              authItem.fields.length === 0 && authError ? /* @__PURE__ */ jsx24(
+                Button,
+                {
+                  type: "button",
+                  variant: "tertiary",
+                  onClick: () => void prepareConnection(authItem.item, authItem.scheme),
+                  children: "Try again"
+                }
+              ) : null,
+              authItem.fields.map((field) => {
+                var _a, _b;
+                return /* @__PURE__ */ jsx24(
+                  Input,
+                  {
+                    label: field.label,
+                    type: (_a = field.type) != null ? _a : "password",
+                    required: true,
+                    value: (_b = authValues[field.name]) != null ? _b : "",
+                    onChange: (event) => setAuthValues((current) => __spreadProps(__spreadValues({}, current), {
+                      [field.name]: event.target.value
+                    })),
+                    autoComplete: "off",
+                    "data-test": `${dataTest}-auth-field-${field.name}`
+                  },
+                  field.name
+                );
+              }),
+              /* @__PURE__ */ jsxs21("div", { className: "flex justify-end gap-2 border-t border-ph-border pt-4", children: [
+                /* @__PURE__ */ jsx24(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "tertiary",
+                    onClick: closeAuthForm,
+                    disabled: authSubmitting,
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ jsx24(Button, { type: "submit", variant: "primary", disabled: authSubmitting, children: authSubmitting ? "Connecting..." : "Connect" })
+              ] })
+            ]
+          }
+        ) : null
+      }
+    )
+  ] });
+}
+
+// src/suite/components/suite-integration-rules.tsx
+import { useState as useState11 } from "react";
+import { Plus, Xmark as Xmark2 } from "iconoir-react";
+import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
+var ACTION_LABELS = {
+  create_tides_task: "Create a Tides task",
+  draft_time_entry: "Draft a time entry",
+  create_suite_notification: "Send a suite notification"
+};
+function actionLabel(actionType) {
+  var _a;
+  return (_a = ACTION_LABELS[actionType]) != null ? _a : actionType;
+}
+function formatDateTime(value) {
+  if (!value) return "\u2014";
+  return new Date(value).toLocaleString(void 0, {
+    dateStyle: "medium",
+    timeStyle: "short"
+  });
+}
+function SuiteIntegrationRules({
+  canManage,
+  projects,
+  rules,
+  events,
+  loading = false,
+  error = null,
+  onCreate,
+  onUpdate,
+  onDelete,
+  onRefresh,
+  dataTest = "integration-rules"
+}) {
+  const [formOpen, setFormOpen] = useState11(false);
+  const [name, setName] = useState11("");
+  const [trigger, setTrigger] = useState11("");
+  const [actionType, setActionType] = useState11("create_tides_task");
+  const [projectId, setProjectId] = useState11("");
+  const [minutes, setMinutes] = useState11("");
+  const [priority, setPriority] = useState11("low");
+  const [submitting, setSubmitting] = useState11(false);
+  const [formError, setFormError] = useState11(null);
+  const [busyId, setBusyId] = useState11(null);
+  const [ruleToDelete, setRuleToDelete] = useState11(null);
+  const [deleteError, setDeleteError] = useState11(null);
+  const needsProject = actionType === "create_tides_task" || actionType === "draft_time_entry";
+  async function submitForm(event) {
+    event.preventDefault();
+    if (!onCreate) return;
+    setSubmitting(true);
+    setFormError(null);
+    try {
+      const actionConfig = {};
+      if (projectId) actionConfig.project_id = projectId;
+      if (actionType === "draft_time_entry" && minutes)
+        actionConfig.minutes = minutes;
+      if (actionType === "create_tides_task" && priority !== "low")
+        actionConfig.priority = priority;
+      await onCreate({
+        name: name.trim(),
+        trigger_event_type: trigger.trim(),
+        action_type: actionType,
+        action_config: actionConfig
+      });
+      setName("");
+      setTrigger("");
+      setProjectId("");
+      setMinutes("");
+      setPriority("low");
+      setFormOpen(false);
+      onRefresh == null ? void 0 : onRefresh();
+    } catch (cause) {
+      setFormError(
+        cause instanceof Error ? cause.message : "Could not create the rule."
+      );
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  async function toggleRule(rule) {
+    if (!onUpdate) return;
+    setBusyId(rule.id);
+    try {
+      await onUpdate(rule.id, { enabled: !rule.enabled });
+      onRefresh == null ? void 0 : onRefresh();
+    } finally {
+      setBusyId(null);
+    }
+  }
+  function requestDelete(rule) {
+    setDeleteError(null);
+    setRuleToDelete(rule);
+  }
+  async function deleteRule() {
+    if (!onDelete || !ruleToDelete) return;
+    setBusyId(ruleToDelete.id);
+    setDeleteError(null);
+    try {
+      await onDelete(ruleToDelete.id);
+      onRefresh == null ? void 0 : onRefresh();
+      setRuleToDelete(null);
+    } catch (cause) {
+      setDeleteError(
+        cause instanceof Error ? cause.message : "Could not delete the rule."
+      );
+    } finally {
+      setBusyId(null);
+    }
+  }
+  return /* @__PURE__ */ jsxs22("section", { className: "space-y-4", "data-test": dataTest, children: [
+    /* @__PURE__ */ jsxs22(
+      Card,
+      {
+        variant: "outlined",
+        bodyClassName: "p-5",
+        "data-test": `${dataTest}-card`,
+        children: [
+          /* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
+            /* @__PURE__ */ jsxs22("div", { children: [
+              /* @__PURE__ */ jsx25("h3", { className: "font-medium text-ph-ink", children: "Automation rules" }),
+              /* @__PURE__ */ jsx25("p", { className: "mt-1 text-sm text-ph-subtle", children: "Turn incoming integration events into tasks, time entries, or notifications for this workspace." })
+            ] }),
+            canManage && onCreate ? /* @__PURE__ */ jsx25(
+              Button,
+              {
+                type: "button",
+                variant: "tertiary",
+                size: "sm",
+                onClick: () => setFormOpen((open) => !open),
+                "data-test": `${dataTest}-new`,
+                children: /* @__PURE__ */ jsxs22("span", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsx25(Plus, { className: "h-4 w-4", "aria-hidden": true }),
+                  "New rule"
+                ] })
+              }
+            ) : null
+          ] }),
+          error ? /* @__PURE__ */ jsx25(
+            Alert,
+            {
+              status: "danger",
+              title: "Could not load rules",
+              description: error
+            }
+          ) : null,
+          loading ? /* @__PURE__ */ jsx25("p", { className: "mt-4 text-sm text-ph-subtle", children: "Loading rules..." }) : rules.length === 0 ? /* @__PURE__ */ jsx25(
+            "div",
+            {
+              className: "mt-4 rounded-lg border border-dashed border-ph-border px-4 py-6 text-center",
+              "data-test": `${dataTest}-empty`,
+              children: /* @__PURE__ */ jsxs22("p", { className: "text-sm text-ph-subtle", children: [
+                "No automation rules yet.",
+                canManage ? " Create one to get started." : ""
+              ] })
+            }
+          ) : /* @__PURE__ */ jsx25("ul", { className: "mt-4 space-y-2", "data-test": `${dataTest}-list`, children: rules.map((rule) => /* @__PURE__ */ jsxs22(
+            "li",
+            {
+              className: "flex items-center justify-between gap-3 rounded-lg border border-ph-border bg-ph-muted px-3 py-3",
+              "data-test": `${dataTest}-rule-${rule.id}`,
+              children: [
+                /* @__PURE__ */ jsxs22("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx25("p", { className: "truncate text-sm font-medium text-ph-ink", children: rule.name }),
+                  /* @__PURE__ */ jsxs22("p", { className: "mt-0.5 truncate text-xs text-ph-subtle", children: [
+                    rule.trigger_event_type,
+                    " \u2192 ",
+                    actionLabel(rule.action_type)
+                  ] }),
+                  /* @__PURE__ */ jsxs22("p", { className: "mt-0.5 truncate text-xs text-ph-subtle", children: [
+                    "Last fired: ",
+                    formatDateTime(rule.last_fired_at)
+                  ] })
+                ] }),
+                canManage ? /* @__PURE__ */ jsxs22("div", { className: "flex shrink-0 items-center gap-2", children: [
+                  /* @__PURE__ */ jsx25(
+                    Toggle,
+                    {
+                      checked: rule.enabled,
+                      disabled: busyId === rule.id,
+                      onChange: () => void toggleRule(rule),
+                      "aria-label": `Enable ${rule.name}`
+                    }
+                  ),
+                  /* @__PURE__ */ jsx25(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "tertiary",
+                      size: "sm",
+                      disabled: busyId === rule.id,
+                      onClick: () => requestDelete(rule),
+                      "aria-label": `Delete ${rule.name}`,
+                      children: /* @__PURE__ */ jsx25(Xmark2, { className: "h-4 w-4", "aria-hidden": true })
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsx25(
+                  Badge,
+                  {
+                    variant: rule.enabled ? "success" : "neutral",
+                    size: "sm",
+                    children: rule.enabled ? "Enabled" : "Disabled"
+                  }
+                )
+              ]
+            },
+            rule.id
+          )) }),
+          canManage && formOpen && onCreate ? /* @__PURE__ */ jsxs22(
+            "form",
+            {
+              className: "mt-4 space-y-3 rounded-lg border border-ph-border bg-ph-surface p-4",
+              onSubmit: (event) => void submitForm(event),
+              "data-test": `${dataTest}-form`,
+              children: [
+                formError ? /* @__PURE__ */ jsx25("p", { className: "text-sm text-ph-danger", role: "alert", children: formError }) : null,
+                /* @__PURE__ */ jsx25(
+                  Input,
+                  {
+                    label: "Rule name",
+                    required: true,
+                    value: name,
+                    onChange: (event) => setName(event.target.value),
+                    placeholder: "GitHub issues to tasks",
+                    "data-test": `${dataTest}-name`
+                  }
+                ),
+                /* @__PURE__ */ jsx25(
+                  Input,
+                  {
+                    label: "Trigger event type",
+                    required: true,
+                    value: trigger,
+                    onChange: (event) => setTrigger(event.target.value),
+                    placeholder: "github.issue_assigned",
+                    helperText: "Provider event type, for example github.issue_assigned or googlecalendar.event_ended.",
+                    "data-test": `${dataTest}-trigger`
+                  }
+                ),
+                /* @__PURE__ */ jsx25(
+                  Select,
+                  {
+                    label: "Action",
+                    value: actionType,
+                    onChange: (event) => setActionType(
+                      event.target.value
+                    ),
+                    "data-test": `${dataTest}-action`,
+                    children: Object.entries(ACTION_LABELS).map(([value, label]) => /* @__PURE__ */ jsx25("option", { value, children: label }, value))
+                  }
+                ),
+                needsProject ? /* @__PURE__ */ jsxs22(
+                  Select,
+                  {
+                    label: "Project",
+                    value: projectId,
+                    onChange: (event) => setProjectId(event.target.value),
+                    "data-test": `${dataTest}-project`,
+                    children: [
+                      /* @__PURE__ */ jsx25("option", { value: "", children: "Choose a project..." }),
+                      projects.map((project) => /* @__PURE__ */ jsx25("option", { value: project.id, children: project.name }, project.id))
+                    ]
+                  }
+                ) : null,
+                actionType === "draft_time_entry" ? /* @__PURE__ */ jsx25(
+                  Input,
+                  {
+                    label: "Minutes (optional)",
+                    type: "number",
+                    min: "1",
+                    value: minutes,
+                    onChange: (event) => setMinutes(event.target.value),
+                    "data-test": `${dataTest}-minutes`
+                  }
+                ) : null,
+                actionType === "create_tides_task" ? /* @__PURE__ */ jsxs22(
+                  Select,
+                  {
+                    label: "Priority",
+                    value: priority,
+                    onChange: (event) => setPriority(event.target.value),
+                    "data-test": `${dataTest}-priority`,
+                    children: [
+                      /* @__PURE__ */ jsx25("option", { value: "low", children: "Low" }),
+                      /* @__PURE__ */ jsx25("option", { value: "medium", children: "Medium" }),
+                      /* @__PURE__ */ jsx25("option", { value: "high", children: "High" }),
+                      /* @__PURE__ */ jsx25("option", { value: "urgent", children: "Urgent" })
+                    ]
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxs22("div", { className: "flex justify-end gap-2 border-t border-ph-border pt-3", children: [
+                  /* @__PURE__ */ jsx25(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "tertiary",
+                      onClick: () => setFormOpen(false),
+                      disabled: submitting,
+                      children: "Cancel"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx25(Button, { type: "submit", variant: "primary", disabled: submitting, children: submitting ? "Creating..." : "Create rule" })
+                ] })
+              ]
+            }
+          ) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs22(
+      Modal,
+      {
+        open: ruleToDelete !== null,
+        onClose: () => {
+          if (busyId !== (ruleToDelete == null ? void 0 : ruleToDelete.id)) setRuleToDelete(null);
+        },
+        title: "Delete automation rule",
+        description: "This action cannot be undone.",
+        dataTest: `${dataTest}-delete-confirmation`,
+        footer: /* @__PURE__ */ jsxs22("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx25(
+            Button,
+            {
+              type: "button",
+              variant: "tertiary",
+              onClick: () => setRuleToDelete(null),
+              disabled: busyId === (ruleToDelete == null ? void 0 : ruleToDelete.id),
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx25(
+            Button,
+            {
+              type: "button",
+              variant: "danger",
+              onClick: () => void deleteRule(),
+              disabled: busyId === (ruleToDelete == null ? void 0 : ruleToDelete.id),
+              "data-test": `${dataTest}-delete-confirm`,
+              children: busyId === (ruleToDelete == null ? void 0 : ruleToDelete.id) ? "Deleting..." : "Delete rule"
+            }
+          )
+        ] }),
+        children: [
+          deleteError ? /* @__PURE__ */ jsx25("p", { className: "text-sm text-ph-danger", role: "alert", children: deleteError }) : null,
+          /* @__PURE__ */ jsxs22("p", { className: "text-sm text-ph-ink", children: [
+            "Delete ",
+            ruleToDelete == null ? void 0 : ruleToDelete.name,
+            "? This cannot be undone."
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs22(
+      Card,
+      {
+        variant: "outlined",
+        bodyClassName: "p-5",
+        "data-test": `${dataTest}-events-card`,
+        children: [
+          /* @__PURE__ */ jsx25("h3", { className: "font-medium text-ph-ink", children: "Recent events" }),
+          /* @__PURE__ */ jsx25("p", { className: "mt-1 text-sm text-ph-subtle", children: "The latest events received from your connected apps." }),
+          events.length === 0 ? /* @__PURE__ */ jsx25(
+            "p",
+            {
+              className: "mt-4 rounded-lg border border-dashed border-ph-border px-4 py-6 text-center text-sm text-ph-subtle",
+              "data-test": `${dataTest}-events-empty`,
+              children: "No integration events yet."
+            }
+          ) : /* @__PURE__ */ jsx25("ul", { className: "mt-4 space-y-2", "data-test": `${dataTest}-events-list`, children: events.map((event) => /* @__PURE__ */ jsxs22(
+            "li",
+            {
+              className: "flex items-center justify-between gap-3 rounded-lg border border-ph-border bg-ph-muted px-3 py-2",
+              children: [
+                /* @__PURE__ */ jsxs22("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsxs22("p", { className: "truncate text-sm text-ph-ink", children: [
+                    event.provider,
+                    " \xB7 ",
+                    event.event_type
+                  ] }),
+                  /* @__PURE__ */ jsx25("p", { className: "mt-0.5 text-xs text-ph-subtle", children: formatDateTime(event.created_at) })
+                ] }),
+                /* @__PURE__ */ jsx25(
+                  Badge,
+                  {
+                    variant: event.processed_at ? "success" : "warning",
+                    size: "sm",
+                    children: event.processed_at ? "Processed" : "Pending"
+                  }
+                )
+              ]
+            },
+            event.id
+          )) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/suite/components/suite-clients-projects-directory.tsx
+import {
+  useEffect as useEffect9,
+  useMemo as useMemo2,
+  useRef as useRef4,
+  useState as useState12
+} from "react";
+import {
+  ArrowLeft,
+  MediaImagePlus as ImagePlus,
+  MoreHoriz as MoreHorizontal,
+  Plus as Plus2,
+  Search as Search2,
+  Trash
+} from "iconoir-react";
+import { Fragment as Fragment9, jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
+var DEFAULT_ICON = "castle-emblem";
+var DEFAULT_COLOR = "#6366f1";
+var DIRECTORY_ICON_OPTIONS = [
+  ["arena", "Arena"],
+  ["bridge", "Bridge"],
+  ["capitol", "Capitol"],
+  ["castle-emblem", "Castle"],
+  ["castle-flag", "Castle flag"],
+  ["lighthouse", "Lighthouse"],
+  ["tower", "Tower"],
+  ["wooden-sign", "Sign"],
+  ["anvil", "Anvil"],
+  ["book", "Book"],
+  ["chessboard", "Chessboard"],
+  ["cog", "Settings"],
+  ["hammer", "Build"],
+  ["light-bulb", "Idea"],
+  ["microphone", "Communication"],
+  ["quill-ink", "Writing"],
+  ["scroll-unfurled", "Notes"],
+  ["hourglass", "Planning"],
+  ["wrench", "Tools"],
+  ["archer", "Archer"],
+  ["archery-target", "Target"],
+  ["axe", "Axe"],
+  ["campfire", "Campfire"],
+  ["compass", "Compass"],
+  ["crossed-swords", "Battle"],
+  ["knight-helmet", "Knight"],
+  ["mountains", "Mountains"],
+  ["shield", "Shield"],
+  ["ship-emblem", "Voyage"],
+  ["sword", "Sword"],
+  ["trophy", "Trophy"],
+  ["apple", "Apple"],
+  ["butterfly", "Butterfly"],
+  ["clover", "Clover"],
+  ["dragon", "Dragon"],
+  ["fire", "Fire"],
+  ["flower", "Flower"],
+  ["flowers", "Flowers"],
+  ["grass", "Grass"],
+  ["leaf", "Leaf"],
+  ["pine-tree", "Pine tree"],
+  ["sun", "Sun"],
+  ["water-drop", "Water"],
+  ["aura", "Aura"],
+  ["crystal-ball", "Crystal ball"],
+  ["diamond", "Diamond"],
+  ["explosion", "Explosion"],
+  ["fire-symbol", "Fire symbol"],
+  ["gem", "Gem"],
+  ["lightning-trio", "Lightning"],
+  ["potion", "Potion"],
+  ["rune-stone", "Rune stone"],
+  ["skull", "Skull"],
+  ["tentacle", "Tentacle"],
+  ["wolf-head", "Wolf"],
+  ["anchor", "Anchor"],
+  ["beer", "Beer"],
+  ["carrot", "Carrot"],
+  ["cat", "Cat"],
+  ["crown", "Crown"],
+  ["gold-bar", "Gold bar"],
+  ["helmet", "Helmet"],
+  ["key", "Key"],
+  ["three-keys", "Keys"]
+];
+function isDirectoryIcon(value) {
+  return DIRECTORY_ICON_OPTIONS.some(([name]) => name === value);
+}
+function DirectoryIconPicker({
+  value,
+  preview,
+  onFileChange,
+  onClear,
+  onChange
+}) {
+  const iconRefs = useRef4({});
+  function moveSelection(event, index) {
+    var _a;
+    let nextIndex = null;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      nextIndex = (index + 1) % DIRECTORY_ICON_OPTIONS.length;
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      nextIndex = (index - 1 + DIRECTORY_ICON_OPTIONS.length) % DIRECTORY_ICON_OPTIONS.length;
+    } else if (event.key === "Home") {
+      nextIndex = 0;
+    } else if (event.key === "End") {
+      nextIndex = DIRECTORY_ICON_OPTIONS.length - 1;
+    }
+    if (nextIndex === null) return;
+    event.preventDefault();
+    const [nextIcon] = DIRECTORY_ICON_OPTIONS[nextIndex];
+    onChange(nextIcon);
+    (_a = iconRefs.current[nextIcon]) == null ? void 0 : _a.focus();
+  }
+  return /* @__PURE__ */ jsxs23("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx26("span", { className: "mb-1.5 block text-sm font-medium text-ph-ink", children: "Icon" }),
+    /* @__PURE__ */ jsx26(
+      "div",
+      {
+        role: "radiogroup",
+        "aria-label": "Icon",
+        className: "grid grid-cols-6 gap-1.5 rounded-lg border border-ph-border p-1.5 sm:grid-cols-8",
+        children: DIRECTORY_ICON_OPTIONS.map(([name, label], index) => {
+          const selected = value === name;
+          return /* @__PURE__ */ jsx26(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-label": label,
+              "aria-checked": selected,
+              tabIndex: selected ? 0 : -1,
+              title: label,
+              onClick: () => onChange(name),
+              onKeyDown: (event) => moveSelection(event, index),
+              ref: (element) => {
+                iconRefs.current[name] = element;
+              },
+              className: cn(
+                "flex h-9 items-center justify-center rounded-md text-ph-mutedtext hover:bg-ph-muted hover:text-ph-ink",
+                selected && "bg-ph-muted text-ph-ink ring-2 ring-ph-brand ring-inset"
+              ),
+              children: /* @__PURE__ */ jsx26(
+                "i",
+                {
+                  className: cn("ra", `ra-${name}`, "text-base leading-none"),
+                  "aria-hidden": true
+                }
+              )
+            },
+            name
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxs23("div", { className: "rounded-lg border border-ph-border bg-ph-muted p-2", children: [
+      /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2 text-sm font-medium text-ph-ink", children: [
+        /* @__PURE__ */ jsx26(ImagePlus, { className: "h-4 w-4", "aria-hidden": true }),
+        " Custom image"
+      ] }),
+      /* @__PURE__ */ jsx26("p", { className: "mt-1 text-xs text-ph-mutedtext", children: "PNG, JPG, GIF, WebP, or SVG \u2014 max 512 KB." }),
+      /* @__PURE__ */ jsx26(
+        FileUpload,
+        {
+          accept: "image/png,image/jpeg,image/gif,image/webp,image/svg+xml,.svg",
+          onChange: (event) => {
+            var _a, _b;
+            return onFileChange((_b = (_a = event.target.files) == null ? void 0 : _a[0]) != null ? _b : null);
+          }
+        }
+      ),
+      preview ? /* @__PURE__ */ jsxs23("div", { className: "mt-2 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx26(
+          "img",
+          {
+            src: preview,
+            alt: "",
+            className: "h-8 w-8 rounded object-cover"
+          }
+        ),
+        /* @__PURE__ */ jsxs23(
+          "button",
+          {
+            type: "button",
+            className: "text-xs text-ph-mutedtext hover:text-ph-ink",
+            onClick: onClear,
+            children: [
+              /* @__PURE__ */ jsx26(Trash, { className: "mr-1 inline h-3.5 w-3.5", "aria-hidden": true }),
+              " Remove custom image"
+            ]
+          }
+        )
+      ] }) : null
+    ] })
+  ] });
+}
+function DirectoryIcon({
+  item
+}) {
+  const icon = item.icon && isDirectoryIcon(item.icon) ? item.icon : DEFAULT_ICON;
+  return /* @__PURE__ */ jsx26(
+    "span",
+    {
+      className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-white",
+      style: { backgroundColor: item.color || "var(--ph-brand)" },
+      children: item.icon_image ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        /* @__PURE__ */ jsx26(
+          "img",
+          {
+            src: item.icon_image,
+            alt: "",
+            className: "h-full w-full rounded-lg object-cover"
+          }
+        )
+      ) : /* @__PURE__ */ jsx26(
+        "i",
+        {
+          className: cn("ra", `ra-${icon}`, "text-base leading-none"),
+          "aria-hidden": true
+        }
+      )
+    }
+  );
+}
+function SuiteClientsProjectsDirectory({
+  clients,
+  projects,
+  canEdit = false,
+  loading = false,
+  error,
+  onCreateClient,
+  onUpdateClient,
+  onDeleteClient,
+  onCreateProject,
+  onUpdateProject,
+  onDeleteProject,
+  dataTest = "suite-clients-projects-directory"
+}) {
+  var _a;
+  const [query, setQuery] = useState12("");
+  const [selectedClientId, setSelectedClientId] = useState12(null);
+  const [mobileDetail, setMobileDetail] = useState12(false);
+  const [editing, setEditing] = useState12(null);
+  const [draft, setDraft] = useState12({
+    name: "",
+    icon: DEFAULT_ICON,
+    color: DEFAULT_COLOR
+  });
+  const [draftClientId, setDraftClientId] = useState12(null);
+  const [preview, setPreview] = useState12(null);
+  const [draftArchived, setDraftArchived] = useState12(false);
+  const [confirming, setConfirming] = useState12(null);
+  const [saving, setSaving] = useState12(false);
+  const [mutationError, setMutationError] = useState12(null);
+  const clientButtonRefs = useRef4({});
+  const backToClientsRef = useRef4(null);
+  const mobileFocusTarget = useRef4(null);
+  useEffect9(() => {
+    var _a2, _b;
+    if (selectedClientId && clients.some((client) => client.id === selectedClientId))
+      return;
+    setSelectedClientId((_b = (_a2 = clients[0]) == null ? void 0 : _a2.id) != null ? _b : null);
+  }, [clients, selectedClientId]);
+  useEffect9(() => {
+    var _a2, _b;
+    const target = mobileFocusTarget.current;
+    if (!target) return;
+    mobileFocusTarget.current = null;
+    if (target === "detail") (_a2 = backToClientsRef.current) == null ? void 0 : _a2.focus();
+    else if (selectedClientId)
+      (_b = clientButtonRefs.current[selectedClientId]) == null ? void 0 : _b.focus();
+  }, [mobileDetail, selectedClientId]);
+  const filteredClients = useMemo2(() => {
+    const value = query.trim().toLowerCase();
+    return [...clients].sort((a, b) => a.name.localeCompare(b.name)).filter((client) => !value || client.name.toLowerCase().includes(value));
+  }, [clients, query]);
+  const selectedClient = (_a = clients.find((client) => client.id === selectedClientId)) != null ? _a : null;
+  const selectedProjects = projects.filter((project) => project.clientId === selectedClientId).sort((a, b) => a.name.localeCompare(b.name));
+  function isMobileDirectoryView() {
+    var _a2, _b;
+    return (_b = (_a2 = window.matchMedia) == null ? void 0 : _a2.call(window, "(max-width: 1023px)").matches) != null ? _b : false;
+  }
+  function selectClient(client) {
+    setSelectedClientId(client.id);
+    setMobileDetail(true);
+    if (isMobileDirectoryView()) mobileFocusTarget.current = "detail";
+  }
+  function moveClientSelection(event, index) {
+    var _a2;
+    let nextIndex = null;
+    if (event.key === "ArrowDown") {
+      nextIndex = (index + 1) % filteredClients.length;
+    } else if (event.key === "ArrowUp") {
+      nextIndex = (index - 1 + filteredClients.length) % filteredClients.length;
+    } else if (event.key === "Home") {
+      nextIndex = 0;
+    } else if (event.key === "End") {
+      nextIndex = filteredClients.length - 1;
+    }
+    if (nextIndex === null) return;
+    event.preventDefault();
+    const client = filteredClients[nextIndex];
+    selectClient(client);
+    if (!isMobileDirectoryView()) (_a2 = clientButtonRefs.current[client.id]) == null ? void 0 : _a2.focus();
+  }
+  function openNew(kind) {
+    setMutationError(null);
+    setDraft({
+      name: "",
+      icon: DEFAULT_ICON,
+      color: DEFAULT_COLOR,
+      iconImageFile: null,
+      clearIconImage: false
+    });
+    setPreview(null);
+    setDraftArchived(false);
+    setDraftClientId(kind === "project" ? selectedClientId : null);
+    setEditing({ kind: kind === "client" ? "new-client" : "new-project" });
+  }
+  function openEdit(item, kind) {
+    var _a2;
+    setMutationError(null);
+    setDraft({
+      name: item.name,
+      icon: item.icon && isDirectoryIcon(item.icon) ? item.icon : DEFAULT_ICON,
+      color: item.color || DEFAULT_COLOR,
+      iconImageFile: null,
+      clearIconImage: false
+    });
+    setPreview(item.icon_image || null);
+    setDraftArchived(
+      kind === "project" && Boolean(item.isArchived)
+    );
+    setDraftClientId(
+      kind === "project" ? (_a2 = item.clientId) != null ? _a2 : null : null
+    );
+    setEditing({ kind, item });
+  }
+  function chooseImage(file) {
+    if (!file) return;
+    if (file.size > 512 * 1024) {
+      setMutationError("Icon must be 512 KB or smaller.");
+      return;
+    }
+    setMutationError(null);
+    if (preview == null ? void 0 : preview.startsWith("blob:")) URL.revokeObjectURL(preview);
+    setDraft((current) => __spreadProps(__spreadValues({}, current), {
+      iconImageFile: file,
+      clearIconImage: false
+    }));
+    setPreview(URL.createObjectURL(file));
+  }
+  function clearImage() {
+    if (preview == null ? void 0 : preview.startsWith("blob:")) URL.revokeObjectURL(preview);
+    setPreview(null);
+    setDraft((current) => __spreadProps(__spreadValues({}, current), {
+      iconImageFile: null,
+      clearIconImage: true
+    }));
+  }
+  function closeEditor() {
+    if (!saving) setEditing(null);
+  }
+  async function save() {
+    if (!editing || !draft.name.trim() || saving) return;
+    setSaving(true);
+    setMutationError(null);
+    try {
+      const fields = __spreadProps(__spreadValues({}, draft), { name: draft.name.trim() });
+      if (editing.kind === "new-client") await (onCreateClient == null ? void 0 : onCreateClient(fields));
+      else if (editing.kind === "new-project")
+        await (onCreateProject == null ? void 0 : onCreateProject(__spreadProps(__spreadValues({}, fields), {
+          clientId: draftClientId,
+          isArchived: draftArchived
+        })));
+      else if (editing.kind === "client")
+        await (onUpdateClient == null ? void 0 : onUpdateClient(editing.item, fields));
+      else
+        await (onUpdateProject == null ? void 0 : onUpdateProject(editing.item, __spreadProps(__spreadValues({}, fields), {
+          clientId: draftClientId,
+          isArchived: draftArchived
+        })));
+      setEditing(null);
+    } catch (err) {
+      setMutationError(
+        err instanceof Error ? err.message : "Failed to save directory item."
+      );
+    } finally {
+      setSaving(false);
+    }
+  }
+  function remove(item, kind) {
+    setConfirming({ item, kind });
+  }
+  async function toggleArchive(project) {
+    var _a2;
+    if (!onUpdateProject) return;
+    try {
+      await onUpdateProject(project, {
+        name: project.name,
+        icon: project.icon && isDirectoryIcon(project.icon) ? project.icon : DEFAULT_ICON,
+        color: project.color || DEFAULT_COLOR,
+        clientId: (_a2 = project.clientId) != null ? _a2 : null,
+        isArchived: !project.isArchived
+      });
+    } catch (err) {
+      setMutationError(
+        err instanceof Error ? err.message : "Failed to update project."
+      );
+    }
+  }
+  async function confirmRemove() {
+    if (!confirming) return;
+    const { item, kind } = confirming;
+    setConfirming(null);
+    try {
+      if (kind === "client")
+        await (onDeleteClient == null ? void 0 : onDeleteClient(item));
+      else await (onDeleteProject == null ? void 0 : onDeleteProject(item));
+    } catch (err) {
+      setMutationError(
+        err instanceof Error ? err.message : "Failed to delete directory item."
+      );
+    }
+  }
+  return /* @__PURE__ */ jsxs23("div", { "data-test": dataTest, className: "space-y-3", children: [
+    error || mutationError ? /* @__PURE__ */ jsx26(Alert, { status: "danger", live: "assertive", children: error || mutationError }) : null,
+    loading ? /* @__PURE__ */ jsx26("p", { className: "text-sm text-ph-mutedtext", children: "Loading directory..." }) : /* @__PURE__ */ jsxs23("div", { className: "overflow-hidden rounded-xl border border-ph-border bg-ph-surface lg:grid lg:min-h-[22rem] lg:grid-cols-[minmax(14rem,18rem)_1fr]", children: [
+      /* @__PURE__ */ jsxs23(
+        "section",
+        {
+          className: cn(
+            "border-ph-border lg:border-r",
+            mobileDetail ? "hidden lg:block" : "block"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs23("div", { className: "flex h-14 items-center gap-2 border-b border-ph-border px-3", children: [
+              /* @__PURE__ */ jsxs23("div", { className: "relative min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx26(
+                  Search2,
+                  {
+                    className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-ph-mutedtext",
+                    "aria-hidden": true
+                  }
+                ),
+                /* @__PURE__ */ jsx26(
+                  Input,
+                  {
+                    hideLabel: true,
+                    "aria-label": "Search clients",
+                    placeholder: "Search clients...",
+                    value: query,
+                    onChange: (event) => setQuery(event.target.value),
+                    className: "pl-9"
+                  }
+                )
+              ] }),
+              canEdit && onCreateClient ? /* @__PURE__ */ jsx26(
+                Button,
+                {
+                  size: "sm",
+                  variant: "primary",
+                  icon: /* @__PURE__ */ jsx26(Plus2, { className: "h-4 w-4" }),
+                  onClick: () => openNew("client"),
+                  children: "New client"
+                }
+              ) : null
+            ] }),
+            /* @__PURE__ */ jsx26(
+              "ul",
+              {
+                role: "listbox",
+                "aria-label": "Clients",
+                className: "max-h-[28rem] overflow-y-auto p-1.5",
+                children: filteredClients.length ? filteredClients.map((client, index) => {
+                  const selected = client.id === selectedClientId;
+                  const count = projects.filter(
+                    (project) => project.clientId === client.id
+                  ).length;
+                  return /* @__PURE__ */ jsx26("li", { role: "none", children: /* @__PURE__ */ jsxs23(
+                    "button",
+                    {
+                      type: "button",
+                      role: "option",
+                      "aria-selected": selected,
+                      tabIndex: selected ? 0 : -1,
+                      onClick: () => selectClient(client),
+                      onKeyDown: (event) => moveClientSelection(event, index),
+                      ref: (element) => {
+                        clientButtonRefs.current[client.id] = element;
+                      },
+                      className: cn(
+                        "flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left",
+                        selected ? "bg-ph-muted" : "hover:bg-ph-canvas"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx26(DirectoryIcon, { item: client }),
+                        /* @__PURE__ */ jsxs23("span", { className: "min-w-0 flex-1", children: [
+                          /* @__PURE__ */ jsx26("span", { className: "block truncate text-sm font-medium text-ph-ink", children: client.name }),
+                          /* @__PURE__ */ jsxs23("span", { className: "text-xs text-ph-mutedtext", children: [
+                            count,
+                            " project",
+                            count === 1 ? "" : "s"
+                          ] })
+                        ] })
+                      ]
+                    }
+                  ) }, client.id);
+                }) : /* @__PURE__ */ jsx26("li", { className: "px-3 py-8 text-center text-sm text-ph-mutedtext", children: clients.length ? "No matches." : "Add a client to get started." })
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs23(
+        "section",
+        {
+          className: cn(
+            "flex min-w-0 flex-col",
+            mobileDetail ? "flex" : "hidden lg:flex"
+          ),
+          children: [
+            /* @__PURE__ */ jsx26("div", { className: "flex min-h-14 items-center gap-2 border-b border-ph-border px-3 py-2", children: selectedClient ? /* @__PURE__ */ jsxs23(Fragment9, { children: [
+              /* @__PURE__ */ jsx26(
+                "button",
+                {
+                  type: "button",
+                  ref: backToClientsRef,
+                  className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-ph-mutedtext hover:bg-ph-muted lg:hidden",
+                  onClick: () => {
+                    mobileFocusTarget.current = "list";
+                    setMobileDetail(false);
+                  },
+                  "aria-label": "Back to clients",
+                  children: /* @__PURE__ */ jsx26(ArrowLeft, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx26(DirectoryIcon, { item: selectedClient }),
+              /* @__PURE__ */ jsxs23("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx26("h3", { className: "truncate text-sm font-semibold text-ph-ink", children: selectedClient.name }),
+                /* @__PURE__ */ jsxs23("p", { className: "text-xs text-ph-mutedtext", children: [
+                  selectedProjects.length,
+                  " project",
+                  selectedProjects.length === 1 ? "" : "s"
+                ] })
+              ] }),
+              canEdit && (onUpdateClient || onDeleteClient) ? /* @__PURE__ */ jsx26("div", { onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx26(
+                DropdownMenu,
+                {
+                  "aria-label": `Actions for ${selectedClient.name}`,
+                  align: "end",
+                  trigger: /* @__PURE__ */ jsxs23("span", { className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-ph-mutedtext hover:bg-ph-muted hover:text-ph-ink", children: [
+                    /* @__PURE__ */ jsx26(MoreHorizontal, { className: "h-4 w-4", "aria-hidden": true }),
+                    /* @__PURE__ */ jsx26("span", { className: "sr-only", children: "Client actions" })
+                  ] }),
+                  children: /* @__PURE__ */ jsxs23("div", { className: "p-1", children: [
+                    onUpdateClient ? /* @__PURE__ */ jsx26(
+                      DropdownItem,
+                      {
+                        onClick: () => openEdit(selectedClient, "client"),
+                        children: "Edit client"
+                      }
+                    ) : null,
+                    onDeleteClient ? /* @__PURE__ */ jsx26(
+                      DropdownItem,
+                      {
+                        className: "text-red-600",
+                        onClick: () => void remove(selectedClient, "client"),
+                        children: "Delete client"
+                      }
+                    ) : null
+                  ] })
+                }
+              ) }) : null
+            ] }) : /* @__PURE__ */ jsx26("p", { className: "text-sm text-ph-mutedtext", children: "Select a client" }) }),
+            canEdit && onCreateProject ? /* @__PURE__ */ jsx26("div", { className: "border-b border-ph-border p-3", children: /* @__PURE__ */ jsx26(
+              Button,
+              {
+                variant: "primary",
+                icon: /* @__PURE__ */ jsx26(Plus2, { className: "h-4 w-4" }),
+                onClick: () => openNew("project"),
+                children: "Add project"
+              }
+            ) }) : null,
+            /* @__PURE__ */ jsx26("ul", { className: "flex-1 p-2", children: selectedClient && selectedProjects.length ? selectedProjects.map((project) => /* @__PURE__ */ jsx26("li", { children: /* @__PURE__ */ jsxs23(
+              "div",
+              {
+                className: "flex items-center gap-3 rounded-lg px-2 py-1 hover:bg-ph-canvas",
+                onClick: () => openEdit(project, "project"),
+                children: [
+                  /* @__PURE__ */ jsxs23(
+                    "button",
+                    {
+                      type: "button",
+                      className: "flex min-w-0 flex-1 items-center gap-3 rounded-lg py-1 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand",
+                      onClick: () => openEdit(project, "project"),
+                      children: [
+                        /* @__PURE__ */ jsx26(DirectoryIcon, { item: project }),
+                        /* @__PURE__ */ jsxs23("span", { className: "min-w-0 flex-1", children: [
+                          /* @__PURE__ */ jsx26(
+                            "span",
+                            {
+                              className: cn(
+                                "block truncate text-sm font-medium",
+                                project.isArchived ? "text-ph-mutedtext line-through" : "text-ph-ink"
+                              ),
+                              children: project.name
+                            }
+                          ),
+                          /* @__PURE__ */ jsx26("span", { className: "text-xs text-ph-mutedtext", children: project.isArchived ? "Archived" : "Active" })
+                        ] })
+                      ]
+                    }
+                  ),
+                  canEdit && (onUpdateProject || onDeleteProject) ? /* @__PURE__ */ jsx26("div", { onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx26(
+                    DropdownMenu,
+                    {
+                      "aria-label": `Actions for ${project.name}`,
+                      align: "end",
+                      trigger: /* @__PURE__ */ jsxs23("span", { className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-ph-mutedtext hover:bg-ph-muted hover:text-ph-ink", children: [
+                        /* @__PURE__ */ jsx26(
+                          MoreHorizontal,
+                          {
+                            className: "h-4 w-4",
+                            "aria-hidden": true
+                          }
+                        ),
+                        /* @__PURE__ */ jsx26("span", { className: "sr-only", children: "Project actions" })
+                      ] }),
+                      children: /* @__PURE__ */ jsxs23("div", { className: "p-1", children: [
+                        onUpdateProject ? /* @__PURE__ */ jsxs23(Fragment9, { children: [
+                          /* @__PURE__ */ jsx26(
+                            DropdownItem,
+                            {
+                              onClick: () => openEdit(project, "project"),
+                              children: "Edit project"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx26(
+                            DropdownItem,
+                            {
+                              onClick: () => void toggleArchive(project),
+                              children: project.isArchived ? "Unarchive project" : "Archive project"
+                            }
+                          )
+                        ] }) : null,
+                        onDeleteProject ? /* @__PURE__ */ jsx26(
+                          DropdownItem,
+                          {
+                            className: "text-red-600",
+                            onClick: () => void remove(project, "project"),
+                            children: "Delete project"
+                          }
+                        ) : null
+                      ] })
+                    }
+                  ) }) : null
+                ]
+              }
+            ) }, project.id)) : /* @__PURE__ */ jsx26("li", { className: "px-3 py-8 text-center text-sm text-ph-mutedtext", children: selectedClient ? "No projects yet." : "Select a client to see its projects." }) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx26(
+      Modal,
+      {
+        open: editing !== null,
+        onClose: closeEditor,
+        title: (editing == null ? void 0 : editing.kind.includes("project")) ? editing.kind === "new-project" ? "New project" : "Edit project" : (editing == null ? void 0 : editing.kind) === "new-client" ? "New client" : "Edit client",
+        footer: /* @__PURE__ */ jsxs23("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx26(Button, { variant: "tertiary", onClick: closeEditor, disabled: saving, children: "Cancel" }),
+          /* @__PURE__ */ jsx26(
+            Button,
+            {
+              variant: "primary",
+              onClick: () => void save(),
+              disabled: saving || !draft.name.trim(),
+              children: saving ? "Saving..." : "Save"
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ jsxs23("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx26(
+            Input,
+            {
+              label: "Name",
+              autoFocus: true,
+              value: draft.name,
+              onChange: (event) => setDraft(__spreadProps(__spreadValues({}, draft), { name: event.target.value }))
+            }
+          ),
+          /* @__PURE__ */ jsx26(
+            DirectoryIconPicker,
+            {
+              value: isDirectoryIcon(draft.icon) ? draft.icon : DEFAULT_ICON,
+              preview,
+              onFileChange: chooseImage,
+              onClear: clearImage,
+              onChange: (icon) => {
+                if (preview) clearImage();
+                setDraft((current) => __spreadProps(__spreadValues({}, current), { icon }));
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs23("div", { children: [
+            /* @__PURE__ */ jsx26("span", { className: "mb-1.5 block text-sm font-medium text-ph-ink", children: "Colour" }),
+            /* @__PURE__ */ jsxs23("div", { className: "flex flex-wrap gap-2", children: [
+              [
+                "#6366f1",
+                "#0ea5e9",
+                "#10b981",
+                "#f59e0b",
+                "#ef4444",
+                "#a855f7",
+                "#64748b"
+              ].map((color) => /* @__PURE__ */ jsx26(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `Colour ${color}`,
+                  "aria-pressed": draft.color === color,
+                  onClick: () => setDraft(__spreadProps(__spreadValues({}, draft), { color })),
+                  className: cn(
+                    "h-8 w-8 rounded-full ring-offset-2",
+                    draft.color === color && "ring-2 ring-ph-brand"
+                  ),
+                  style: { backgroundColor: color }
+                },
+                color
+              )),
+              /* @__PURE__ */ jsx26(
+                Input,
+                {
+                  hideLabel: true,
+                  label: "Custom colour",
+                  type: "color",
+                  value: draft.color,
+                  onChange: (event) => setDraft(__spreadProps(__spreadValues({}, draft), { color: event.target.value })),
+                  className: "h-8 w-8 p-0"
+                }
+              )
+            ] })
+          ] }),
+          (editing == null ? void 0 : editing.kind.includes("project")) ? /* @__PURE__ */ jsxs23(
+            Select,
+            {
+              label: "Client",
+              value: draftClientId != null ? draftClientId : "",
+              onChange: (event) => setDraftClientId(event.target.value || null),
+              children: [
+                /* @__PURE__ */ jsx26("option", { value: "", children: "No client" }),
+                clients.map((client) => /* @__PURE__ */ jsx26("option", { value: client.id, children: client.name }, client.id))
+              ]
+            }
+          ) : null,
+          (editing == null ? void 0 : editing.kind.includes("project")) ? /* @__PURE__ */ jsxs23("label", { className: "flex items-center gap-2 text-sm text-ph-ink", children: [
+            /* @__PURE__ */ jsx26(
+              "input",
+              {
+                type: "checkbox",
+                checked: draftArchived,
+                onChange: (event) => setDraftArchived(event.target.checked)
+              }
+            ),
+            "Archived"
+          ] }) : null
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx26(
+      Modal,
+      {
+        open: confirming !== null,
+        onClose: () => setConfirming(null),
+        title: "Confirm deletion",
+        footer: /* @__PURE__ */ jsxs23("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx26(Button, { variant: "tertiary", onClick: () => setConfirming(null), children: "Cancel" }),
+          /* @__PURE__ */ jsx26(Button, { variant: "primary", onClick: () => void confirmRemove(), children: "Delete" })
+        ] }),
+        children: /* @__PURE__ */ jsxs23("p", { className: "text-sm text-ph-ink", children: [
+          "Delete ",
+          confirming == null ? void 0 : confirming.item.name,
+          "? This cannot be undone."
+        ] })
+      }
+    )
+  ] });
 }
 export {
   APP_ACCENTS,
@@ -3729,6 +5630,7 @@ export {
   SUITE_SIDEBAR_WIDTH_COOKIE,
   SUITE_SIDEBAR_WIDTH_KEY,
   SUITE_SPRINGS,
+  SUITE_THEME_COOKIE,
   SourceAppGlyph,
   SuiteAiPanel,
   SuiteAppIcon,
@@ -3736,9 +5638,11 @@ export {
   SuiteAppStrip,
   SuiteBottomNav,
   SuiteBreadcrumbs,
+  SuiteClientsProjectsDirectory,
   SuiteEmptyState,
   SuiteIcon,
   SuiteIntegrationPicker,
+  SuiteIntegrationRules,
   SuiteMobileDrawer,
   SuiteMobileHeader,
   SuiteMotionProvider,
@@ -3774,7 +5678,7 @@ export {
   appSwitcherMenuItemClass,
   appSwitcherTriggerClass,
   classifySuiteHref,
-  cn,
+  cn2 as cn,
   consumePendingAskAiPrompt,
   consumeSuiteAskAiOpenFromLocation,
   getTodayGreeting,
@@ -3791,6 +5695,7 @@ export {
   sourceToSuiteApp,
   suiteAppBaseUrl,
   suiteAppLabel,
+  suiteThemeBootScript,
   useIdleMount,
   useSidebarWidth,
   useSuiteTheme