@xenide-io/the-old-ui-theme 0.9.6 → 0.9.8

package/dist/{chunk-2EO5VCXP.mjs → chunk-6SVJAU5K.mjs}

@@ -3742,6 +3742,166 @@ var Chip = forwardRef11(function Chip2(_a, ref) {
 });
 Chip.displayName = "Chip";
 
+// src/lib/chart/use-ph-chart-tokens.ts
+import { useEffect as useEffect5, useState as useState10 } from "react";
+var DEFAULT_TOKENS = {
+  series: ["#1d4aff", "#621da6", "#42827e", "#ce0e74", "#f14f58", "#529a0a", "#fe729e"],
+  muted: "hsl(220 9% 90%)",
+  surface: "#ffffff",
+  textMuted: "hsl(220 9% 46%)",
+  grid: "hsl(220 13% 91%)",
+  borderStrong: "hsl(220 13% 80%)"
+};
+function readTokens() {
+  if (typeof document === "undefined") return DEFAULT_TOKENS;
+  const style = getComputedStyle(document.documentElement);
+  const read = (key, fallback) => style.getPropertyValue(key).trim() || fallback;
+  return {
+    series: [
+      read("--ph-data-1", DEFAULT_TOKENS.series[0]),
+      read("--ph-data-2", DEFAULT_TOKENS.series[1]),
+      read("--ph-data-3", DEFAULT_TOKENS.series[2]),
+      read("--ph-data-4", DEFAULT_TOKENS.series[3]),
+      read("--ph-data-5", DEFAULT_TOKENS.series[4]),
+      read("--ph-data-6", DEFAULT_TOKENS.series[5]),
+      read("--ph-data-7", DEFAULT_TOKENS.series[6])
+    ],
+    muted: read("--ph-muted", DEFAULT_TOKENS.muted),
+    surface: read("--ph-surface", DEFAULT_TOKENS.surface),
+    textMuted: read("--ph-mutedtext", DEFAULT_TOKENS.textMuted),
+    grid: read("--ph-border", DEFAULT_TOKENS.grid),
+    borderStrong: read("--ph-border-strong", DEFAULT_TOKENS.borderStrong)
+  };
+}
+function useChartTokens() {
+  const [tokens, setTokens] = useState10(DEFAULT_TOKENS);
+  useEffect5(() => {
+    setTokens(readTokens());
+  }, []);
+  return tokens;
+}
+
+// src/components/ui/Charts.tsx
+import { jsx as jsx42, jsxs as jsxs36 } from "react/jsx-runtime";
+function percent(value, total) {
+  return total > 0 ? Math.round(value / total * 100) : 0;
+}
+function EmptyChart() {
+  return /* @__PURE__ */ jsx42("p", { className: "text-sm text-ph-subtle", children: "No data for this period." });
+}
+function sliceColour(slice, index, series) {
+  var _a;
+  return (_a = slice.colour) != null ? _a : series[index % series.length];
+}
+function DonutChart({ slices, label, formatValue, className }) {
+  const { series } = useChartTokens();
+  const visible = slices.filter((slice) => slice.value > 0);
+  const total = visible.reduce((sum, slice) => sum + slice.value, 0);
+  if (total <= 0) return /* @__PURE__ */ jsx42(EmptyChart, {});
+  const stops = visible.map((slice, index) => {
+    const colour = sliceColour(slice, index, series);
+    const before = visible.slice(0, index).reduce((sum, item) => sum + item.value, 0);
+    const start = before / total * 360;
+    const end = (before + slice.value) / total * 360;
+    return `${colour} ${start}deg ${end}deg`;
+  }).join(", ");
+  return /* @__PURE__ */ jsxs36("div", { className: cn("flex flex-col items-center gap-4 sm:flex-row sm:items-center", className), children: [
+    /* @__PURE__ */ jsx42(
+      "div",
+      {
+        role: "img",
+        "aria-label": label,
+        className: "relative h-36 w-36 shrink-0 rounded-full",
+        style: { background: `conic-gradient(${stops})` },
+        children: /* @__PURE__ */ jsx42(
+          "span",
+          {
+            className: "absolute inset-[22%] rounded-full bg-ph-surface ring-1 ring-ph-border",
+            "aria-hidden": true
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx42("ul", { className: "min-w-0 w-full flex-1 space-y-2", children: visible.map((slice, index) => {
+      const colour = sliceColour(slice, index, series);
+      return /* @__PURE__ */ jsxs36("li", { className: "flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ jsxs36("span", { className: "flex min-w-0 items-center gap-2 text-ph-subtle", children: [
+          /* @__PURE__ */ jsx42("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { background: colour } }),
+          /* @__PURE__ */ jsx42("span", { className: "truncate", children: slice.label })
+        ] }),
+        /* @__PURE__ */ jsx42("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(slice.value) : `${percent(slice.value, total)}%` })
+      ] }, slice.label);
+    }) })
+  ] });
+}
+function BarChart({ items, formatValue, className }) {
+  const { series } = useChartTokens();
+  const visible = items.filter((item) => item.value > 0);
+  const max = Math.max(...visible.map((item) => item.value), 1);
+  if (!visible.length) return /* @__PURE__ */ jsx42(EmptyChart, {});
+  return /* @__PURE__ */ jsx42("ul", { className: cn("space-y-3", className), children: visible.map((item, index) => {
+    const colour = sliceColour(item, index, series);
+    return /* @__PURE__ */ jsxs36("li", { children: [
+      /* @__PURE__ */ jsxs36("div", { className: "mb-1 flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ jsx42("span", { className: "truncate text-ph-subtle", children: item.label }),
+        /* @__PURE__ */ jsx42("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(item.value) : item.value.toLocaleString("en-AU") })
+      ] }),
+      /* @__PURE__ */ jsx42("div", { className: "h-2.5 rounded-full bg-ph-muted ring-1 ring-ph-border", children: /* @__PURE__ */ jsx42(
+        "div",
+        {
+          className: "h-full rounded-full transition-[width] duration-300 ease-out motion-reduce:transition-none",
+          style: {
+            width: `${Math.max(item.value / max * 100, 2)}%`,
+            background: colour
+          }
+        }
+      ) })
+    ] }, item.label);
+  }) });
+}
+function StackedBarChart({
+  slices,
+  label,
+  formatValue,
+  className
+}) {
+  const { series } = useChartTokens();
+  const visible = slices.filter((slice) => slice.value > 0);
+  const total = visible.reduce((sum, slice) => sum + slice.value, 0);
+  if (total <= 0) return /* @__PURE__ */ jsx42(EmptyChart, {});
+  return /* @__PURE__ */ jsxs36("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ jsx42(
+      "div",
+      {
+        role: "img",
+        "aria-label": label,
+        className: "flex h-3 overflow-hidden rounded-full bg-ph-muted ring-1 ring-ph-border",
+        children: visible.map((slice, index) => /* @__PURE__ */ jsx42(
+          "span",
+          {
+            className: "h-full",
+            style: {
+              width: `${Math.max(slice.value / total * 100, 2)}%`,
+              background: sliceColour(slice, index, series)
+            }
+          },
+          slice.label
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx42("ul", { className: "space-y-2", children: visible.map((slice, index) => {
+      const colour = sliceColour(slice, index, series);
+      return /* @__PURE__ */ jsxs36("li", { className: "flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ jsxs36("span", { className: "flex min-w-0 items-center gap-2 text-ph-subtle", children: [
+          /* @__PURE__ */ jsx42("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { background: colour } }),
+          /* @__PURE__ */ jsx42("span", { className: "truncate", children: slice.label })
+        ] }),
+        /* @__PURE__ */ jsx42("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(slice.value) : `${percent(slice.value, total)}%` })
+      ] }, slice.label);
+    }) })
+  ] });
+}
+
 export {
   ButtonChrome,
   cn,
@@ -3908,5 +4068,9 @@ export {
   Link,
   Spinner,
   Dot,
-  Chip
+  Chip,
+  useChartTokens,
+  DonutChart,
+  BarChart,
+  StackedBarChart
 };

package/dist/index.mjs

@@ -158,7 +158,7 @@ import {
   isThemeId,
   persistTheme,
   readStoredTheme
-} from "./chunk-2EO5VCXP.mjs";
+} from "./chunk-6SVJAU5K.mjs";
 import "./chunk-FWCSY2DS.mjs";
 export {
   Accordion,

package/dist/suite.d.mts

@@ -339,6 +339,10 @@ interface SuiteUserMenuProps {
     onSignOut: () => void;
     /** Fallback letter(s) when there is no avatar image. */
     fallbackInitials?: string;
+    /** Second line under the name, e.g. the workspace subscription ("Plus"). */
+    subtitle?: string | null;
+    /** Show the name + subtitle beside the avatar, for the sidebar footer. */
+    showDetails?: boolean;
     /** Show the old desktop sidebar sign-out action beside the avatar. */
     showSignOutAction?: boolean;
     dataTest?: string;
@@ -351,7 +355,7 @@ interface SuiteUserMenuProps {
  * profile settings and sign out. Desktop sidebars can also expose the legacy
  * adjacent sign-out action without adding it to mobile chrome.
  */
-declare function SuiteUserMenu({ name, email, image, settingsHref, onSignOut, fallbackInitials, showSignOutAction, dataTest, triggerId, triggerDataTest, className, }: SuiteUserMenuProps): react.JSX.Element;
+declare function SuiteUserMenu({ name, email, image, settingsHref, onSignOut, fallbackInitials, subtitle, showDetails, showSignOutAction, dataTest, triggerId, triggerDataTest, className, }: SuiteUserMenuProps): react.JSX.Element;
 
 /** Any icon component that accepts sizing/stroke props (Lucide, theme icons). */
 type SuiteNavIcon = ComponentType<{

package/dist/suite.d.ts

@@ -339,6 +339,10 @@ interface SuiteUserMenuProps {
     onSignOut: () => void;
     /** Fallback letter(s) when there is no avatar image. */
     fallbackInitials?: string;
+    /** Second line under the name, e.g. the workspace subscription ("Plus"). */
+    subtitle?: string | null;
+    /** Show the name + subtitle beside the avatar, for the sidebar footer. */
+    showDetails?: boolean;
     /** Show the old desktop sidebar sign-out action beside the avatar. */
     showSignOutAction?: boolean;
     dataTest?: string;
@@ -351,7 +355,7 @@ interface SuiteUserMenuProps {
  * profile settings and sign out. Desktop sidebars can also expose the legacy
  * adjacent sign-out action without adding it to mobile chrome.
  */
-declare function SuiteUserMenu({ name, email, image, settingsHref, onSignOut, fallbackInitials, showSignOutAction, dataTest, triggerId, triggerDataTest, className, }: SuiteUserMenuProps): react.JSX.Element;
+declare function SuiteUserMenu({ name, email, image, settingsHref, onSignOut, fallbackInitials, subtitle, showDetails, showSignOutAction, dataTest, triggerId, triggerDataTest, className, }: SuiteUserMenuProps): react.JSX.Element;
 
 /** Any icon component that accepts sizing/stroke props (Lucide, theme icons). */
 type SuiteNavIcon = ComponentType<{

package/dist/suite.js

@@ -2784,6 +2784,8 @@ function SuiteUserMenu({
   settingsHref,
   onSignOut,
   fallbackInitials,
+  subtitle,
+  showDetails = false,
   showSignOutAction = false,
   dataTest = "suite-user-menu",
   triggerId,
@@ -2813,10 +2815,17 @@ function SuiteUserMenu({
       children: initials
     }
   ) }) });
+  const trigger = showDetails ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "flex min-w-0 items-center gap-2", children: [
+    avatar,
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "flex min-w-0 flex-col text-left", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate text-sm font-medium text-ph-ink", children: name || email || "Account" }),
+      subtitle ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate text-xs text-ph-mutedtext", children: subtitle }) : null
+    ] })
+  ] }) : avatar;
   const accountMenu = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     DropdownMenu,
     {
-      trigger: avatar,
+      trigger,
       triggerId: triggerId != null ? triggerId : `${dataTest}-trigger`,
       triggerDataTest: triggerDataTest != null ? triggerDataTest : `${dataTest}-trigger`,
       "aria-label": "Account menu",
@@ -2827,6 +2836,7 @@ function SuiteUserMenu({
       modal: false,
       className: cn(
         "[&_.ph-dropdown-trigger]:rounded-full",
+        showDetails && "min-w-0 flex-1 [&_.ph-dropdown-trigger]:w-full [&_.ph-dropdown-trigger]:justify-start [&_.ph-dropdown-trigger]:rounded-lg",
         showSignOutAction ? void 0 : className
       ),
       "data-test": dataTest,
@@ -3584,6 +3594,11 @@ function SuiteAiPanel({
     var _a;
     if (open && !hydrating) (_a = textareaRef.current) == null ? void 0 : _a.focus();
   }, [open, hydrating]);
+  (0, import_react12.useEffect)(() => {
+    if (!open) return;
+    void Promise.resolve().then(() => (init_ai_message_markdown(), ai_message_markdown_exports)).catch(() => {
+    });
+  }, [open]);
   (0, import_react12.useLayoutEffect)(() => {
     const el = textareaRef.current;
     if (!el) return;
@@ -3805,19 +3820,11 @@ function SuiteAiPanel({
                           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "rounded-2xl rounded-bl-md bg-ph-muted px-3 py-2 text-sm leading-relaxed text-ph-ink", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                             import_react12.Suspense,
                             {
-                              fallback: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-                                "div",
-                                {
-                                  className: "space-y-2 py-0.5",
-                                  role: "status",
-                                  "aria-label": "Rendering response",
-                                  children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "sr-only", children: "Rendering response\u2026" }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "suite-shimmer h-3 w-11/12 rounded bg-ph-mutedtext/20" }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "suite-shimmer h-3 w-full rounded bg-ph-mutedtext/20" }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "suite-shimmer h-3 w-3/5 rounded bg-ph-mutedtext/20" })
-                                  ]
-                                }
+                              fallback: (
+                                // The chunk is pre-warmed above, so this only shows on a
+                                // cold cache. Keep it invisible — a skeleton here reads
+                                // as if it were part of the answer.
+                                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "sr-only", role: "status", children: "Rendering response\u2026" })
                               ),
                               children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                                 SuiteAiMarkdownMessage2,
@@ -4783,9 +4790,7 @@ function SuiteSidebar({
             className: cn(
               "shrink-0 border-t border-ph-border",
               surface ? "bg-ph-surface" : "bg-ph-canvas",
-              // Trim only the bottom inset: the 32px avatar sits inside a 40px
-              // trigger, so even padding read top-heavy once the avatar shrank.
-              collapsed ? "px-1.5 pt-1.5 pb-1" : "px-3 pt-3 pb-2"
+              collapsed ? "p-1.5" : "p-3"
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
               "div",

package/dist/suite.mjs

@@ -12,7 +12,7 @@ import {
   Toggle,
   Tooltip,
   cn
-} from "./chunk-2EO5VCXP.mjs";
+} from "./chunk-6SVJAU5K.mjs";
 import {
   SUITE_THEME_CHANNEL,
   SUITE_THEME_COOKIE,
@@ -1897,6 +1897,8 @@ function SuiteUserMenu({
   settingsHref,
   onSignOut,
   fallbackInitials,
+  subtitle,
+  showDetails = false,
   showSignOutAction = false,
   dataTest = "suite-user-menu",
   triggerId,
@@ -1926,10 +1928,17 @@ function SuiteUserMenu({
       children: initials
     }
   ) }) });
+  const trigger = showDetails ? /* @__PURE__ */ jsxs11("span", { className: "flex min-w-0 items-center gap-2", children: [
+    avatar,
+    /* @__PURE__ */ jsxs11("span", { className: "flex min-w-0 flex-col text-left", children: [
+      /* @__PURE__ */ jsx13("span", { className: "truncate text-sm font-medium text-ph-ink", children: name || email || "Account" }),
+      subtitle ? /* @__PURE__ */ jsx13("span", { className: "truncate text-xs text-ph-mutedtext", children: subtitle }) : null
+    ] })
+  ] }) : avatar;
   const accountMenu = /* @__PURE__ */ jsxs11(
     DropdownMenu,
     {
-      trigger: avatar,
+      trigger,
       triggerId: triggerId != null ? triggerId : `${dataTest}-trigger`,
       triggerDataTest: triggerDataTest != null ? triggerDataTest : `${dataTest}-trigger`,
       "aria-label": "Account menu",
@@ -1940,6 +1949,7 @@ function SuiteUserMenu({
       modal: false,
       className: cn2(
         "[&_.ph-dropdown-trigger]:rounded-full",
+        showDetails && "min-w-0 flex-1 [&_.ph-dropdown-trigger]:w-full [&_.ph-dropdown-trigger]:justify-start [&_.ph-dropdown-trigger]:rounded-lg",
         showSignOutAction ? void 0 : className
       ),
       "data-test": dataTest,
@@ -2561,6 +2571,11 @@ function SuiteAiPanel({
     var _a;
     if (open && !hydrating) (_a = textareaRef.current) == null ? void 0 : _a.focus();
   }, [open, hydrating]);
+  useEffect7(() => {
+    if (!open) return;
+    void import("./ai-message-markdown-AUEMCO7K.mjs").catch(() => {
+    });
+  }, [open]);
   useLayoutEffect(() => {
     const el = textareaRef.current;
     if (!el) return;
@@ -2782,19 +2797,11 @@ function SuiteAiPanel({
                           /* @__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(
                             Suspense,
                             {
-                              fallback: /* @__PURE__ */ jsxs14(
-                                "div",
-                                {
-                                  className: "space-y-2 py-0.5",
-                                  role: "status",
-                                  "aria-label": "Rendering response",
-                                  children: [
-                                    /* @__PURE__ */ jsx17("span", { className: "sr-only", children: "Rendering response\u2026" }),
-                                    /* @__PURE__ */ jsx17("div", { className: "suite-shimmer h-3 w-11/12 rounded bg-ph-mutedtext/20" }),
-                                    /* @__PURE__ */ jsx17("div", { className: "suite-shimmer h-3 w-full rounded bg-ph-mutedtext/20" }),
-                                    /* @__PURE__ */ jsx17("div", { className: "suite-shimmer h-3 w-3/5 rounded bg-ph-mutedtext/20" })
-                                  ]
-                                }
+                              fallback: (
+                                // The chunk is pre-warmed above, so this only shows on a
+                                // cold cache. Keep it invisible — a skeleton here reads
+                                // as if it were part of the answer.
+                                /* @__PURE__ */ jsx17("span", { className: "sr-only", role: "status", children: "Rendering response\u2026" })
                               ),
                               children: /* @__PURE__ */ jsx17(
                                 SuiteAiMarkdownMessage,
@@ -3764,9 +3771,7 @@ function SuiteSidebar({
             className: cn2(
               "shrink-0 border-t border-ph-border",
               surface ? "bg-ph-surface" : "bg-ph-canvas",
-              // Trim only the bottom inset: the 32px avatar sits inside a 40px
-              // trigger, so even padding read top-heavy once the avatar shrank.
-              collapsed ? "px-1.5 pt-1.5 pb-1" : "px-3 pt-3 pb-2"
+              collapsed ? "p-1.5" : "p-3"
             ),
             children: /* @__PURE__ */ jsxs19(
               "div",

package/dist/ui.d.mts

@@ -55,4 +55,40 @@ interface CollapsibleSectionProps {
 }
 declare function CollapsibleSection({ title, children, defaultOpen, id, }: CollapsibleSectionProps): react.JSX.Element;
 
-export { CodeBlock, CollapsibleSection, type CollapsibleSectionProps, ComponentDocs, type ComponentDocsProps, type ComponentPropRow, FilterBarProps, FilterChipsProps, FilterControls, type FilterControlsProps, ShowcaseWrapper };
+interface ChartTokens {
+    series: string[];
+    muted: string;
+    surface: string;
+    textMuted: string;
+    grid: string;
+    borderStrong: string;
+}
+declare function useChartTokens(): ChartTokens;
+
+interface ChartSlice {
+    label: string;
+    value: number;
+    colour?: string;
+}
+interface DonutChartProps {
+    slices: readonly ChartSlice[];
+    label: string;
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+interface BarChartProps {
+    items: readonly ChartSlice[];
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+interface StackedBarChartProps {
+    slices: readonly ChartSlice[];
+    label: string;
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+declare function DonutChart({ slices, label, formatValue, className }: DonutChartProps): react.JSX.Element;
+declare function BarChart({ items, formatValue, className }: BarChartProps): react.JSX.Element;
+declare function StackedBarChart({ slices, label, formatValue, className, }: StackedBarChartProps): react.JSX.Element;
+
+export { BarChart, type BarChartProps, type ChartSlice, type ChartTokens, CodeBlock, CollapsibleSection, type CollapsibleSectionProps, ComponentDocs, type ComponentDocsProps, type ComponentPropRow, DonutChart, type DonutChartProps, FilterBarProps, FilterChipsProps, FilterControls, type FilterControlsProps, ShowcaseWrapper, StackedBarChart, type StackedBarChartProps, useChartTokens };

package/dist/ui.d.ts

@@ -55,4 +55,40 @@ interface CollapsibleSectionProps {
 }
 declare function CollapsibleSection({ title, children, defaultOpen, id, }: CollapsibleSectionProps): react.JSX.Element;
 
-export { CodeBlock, CollapsibleSection, type CollapsibleSectionProps, ComponentDocs, type ComponentDocsProps, type ComponentPropRow, FilterBarProps, FilterChipsProps, FilterControls, type FilterControlsProps, ShowcaseWrapper };
+interface ChartTokens {
+    series: string[];
+    muted: string;
+    surface: string;
+    textMuted: string;
+    grid: string;
+    borderStrong: string;
+}
+declare function useChartTokens(): ChartTokens;
+
+interface ChartSlice {
+    label: string;
+    value: number;
+    colour?: string;
+}
+interface DonutChartProps {
+    slices: readonly ChartSlice[];
+    label: string;
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+interface BarChartProps {
+    items: readonly ChartSlice[];
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+interface StackedBarChartProps {
+    slices: readonly ChartSlice[];
+    label: string;
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+declare function DonutChart({ slices, label, formatValue, className }: DonutChartProps): react.JSX.Element;
+declare function BarChart({ items, formatValue, className }: BarChartProps): react.JSX.Element;
+declare function StackedBarChart({ slices, label, formatValue, className, }: StackedBarChartProps): react.JSX.Element;
+
+export { BarChart, type BarChartProps, type ChartSlice, type ChartTokens, CodeBlock, CollapsibleSection, type CollapsibleSectionProps, ComponentDocs, type ComponentDocsProps, type ComponentPropRow, DonutChart, type DonutChartProps, FilterBarProps, FilterChipsProps, FilterControls, type FilterControlsProps, ShowcaseWrapper, StackedBarChart, type StackedBarChartProps, useChartTokens };

package/dist/ui.js

@@ -68,6 +68,7 @@ __export(ui_exports, {
   Avatar: () => Avatar,
   AvatarGroup: () => AvatarGroup,
   Badge: () => Badge,
+  BarChart: () => BarChart,
   Button: () => Button,
   ButtonChrome: () => ButtonChrome,
   Calendar: () => Calendar,
@@ -80,6 +81,7 @@ __export(ui_exports, {
   CommandPalette: () => CommandPalette,
   ComponentDocs: () => ComponentDocs,
   Display: () => Display,
+  DonutChart: () => DonutChart,
   Dot: () => Dot,
   DropdownButton: () => DropdownButton,
   DropdownItem: () => DropdownItem,
@@ -127,6 +129,7 @@ __export(ui_exports, {
   Small: () => Small,
   SortMenu: () => SortMenu,
   Spinner: () => Spinner,
+  StackedBarChart: () => StackedBarChart,
   Stat: () => Stat,
   Table: () => Table,
   Textarea: () => Textarea,
@@ -134,7 +137,8 @@ __export(ui_exports, {
   ThemeSwitcher: () => ThemeSwitcher,
   Toggle: () => Toggle,
   Tooltip: () => Tooltip,
-  TooltipProvider: () => TooltipProvider
+  TooltipProvider: () => TooltipProvider,
+  useChartTokens: () => useChartTokens
 });
 module.exports = __toCommonJS(ui_exports);
 
@@ -3847,6 +3851,166 @@ var Chip = (0, import_react25.forwardRef)(function Chip2(_a, ref) {
   );
 });
 Chip.displayName = "Chip";
+
+// src/lib/chart/use-ph-chart-tokens.ts
+var import_react26 = require("react");
+var DEFAULT_TOKENS = {
+  series: ["#1d4aff", "#621da6", "#42827e", "#ce0e74", "#f14f58", "#529a0a", "#fe729e"],
+  muted: "hsl(220 9% 90%)",
+  surface: "#ffffff",
+  textMuted: "hsl(220 9% 46%)",
+  grid: "hsl(220 13% 91%)",
+  borderStrong: "hsl(220 13% 80%)"
+};
+function readTokens() {
+  if (typeof document === "undefined") return DEFAULT_TOKENS;
+  const style = getComputedStyle(document.documentElement);
+  const read = (key, fallback) => style.getPropertyValue(key).trim() || fallback;
+  return {
+    series: [
+      read("--ph-data-1", DEFAULT_TOKENS.series[0]),
+      read("--ph-data-2", DEFAULT_TOKENS.series[1]),
+      read("--ph-data-3", DEFAULT_TOKENS.series[2]),
+      read("--ph-data-4", DEFAULT_TOKENS.series[3]),
+      read("--ph-data-5", DEFAULT_TOKENS.series[4]),
+      read("--ph-data-6", DEFAULT_TOKENS.series[5]),
+      read("--ph-data-7", DEFAULT_TOKENS.series[6])
+    ],
+    muted: read("--ph-muted", DEFAULT_TOKENS.muted),
+    surface: read("--ph-surface", DEFAULT_TOKENS.surface),
+    textMuted: read("--ph-mutedtext", DEFAULT_TOKENS.textMuted),
+    grid: read("--ph-border", DEFAULT_TOKENS.grid),
+    borderStrong: read("--ph-border-strong", DEFAULT_TOKENS.borderStrong)
+  };
+}
+function useChartTokens() {
+  const [tokens, setTokens] = (0, import_react26.useState)(DEFAULT_TOKENS);
+  (0, import_react26.useEffect)(() => {
+    setTokens(readTokens());
+  }, []);
+  return tokens;
+}
+
+// src/components/ui/Charts.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+function percent(value, total) {
+  return total > 0 ? Math.round(value / total * 100) : 0;
+}
+function EmptyChart() {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-sm text-ph-subtle", children: "No data for this period." });
+}
+function sliceColour(slice, index, series) {
+  var _a;
+  return (_a = slice.colour) != null ? _a : series[index % series.length];
+}
+function DonutChart({ slices, label, formatValue, className }) {
+  const { series } = useChartTokens();
+  const visible = slices.filter((slice) => slice.value > 0);
+  const total = visible.reduce((sum, slice) => sum + slice.value, 0);
+  if (total <= 0) return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(EmptyChart, {});
+  const stops = visible.map((slice, index) => {
+    const colour = sliceColour(slice, index, series);
+    const before = visible.slice(0, index).reduce((sum, item) => sum + item.value, 0);
+    const start = before / total * 360;
+    const end = (before + slice.value) / total * 360;
+    return `${colour} ${start}deg ${end}deg`;
+  }).join(", ");
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cn("flex flex-col items-center gap-4 sm:flex-row sm:items-center", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      "div",
+      {
+        role: "img",
+        "aria-label": label,
+        className: "relative h-36 w-36 shrink-0 rounded-full",
+        style: { background: `conic-gradient(${stops})` },
+        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          "span",
+          {
+            className: "absolute inset-[22%] rounded-full bg-ph-surface ring-1 ring-ph-border",
+            "aria-hidden": true
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { className: "min-w-0 w-full flex-1 space-y-2", children: visible.map((slice, index) => {
+      const colour = sliceColour(slice, index, series);
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("li", { className: "flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "flex min-w-0 items-center gap-2 text-ph-subtle", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { background: colour } }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "truncate", children: slice.label })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(slice.value) : `${percent(slice.value, total)}%` })
+      ] }, slice.label);
+    }) })
+  ] });
+}
+function BarChart({ items, formatValue, className }) {
+  const { series } = useChartTokens();
+  const visible = items.filter((item) => item.value > 0);
+  const max = Math.max(...visible.map((item) => item.value), 1);
+  if (!visible.length) return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(EmptyChart, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { className: cn("space-y-3", className), children: visible.map((item, index) => {
+    const colour = sliceColour(item, index, series);
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("li", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "mb-1 flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "truncate text-ph-subtle", children: item.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(item.value) : item.value.toLocaleString("en-AU") })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "h-2.5 rounded-full bg-ph-muted ring-1 ring-ph-border", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        "div",
+        {
+          className: "h-full rounded-full transition-[width] duration-300 ease-out motion-reduce:transition-none",
+          style: {
+            width: `${Math.max(item.value / max * 100, 2)}%`,
+            background: colour
+          }
+        }
+      ) })
+    ] }, item.label);
+  }) });
+}
+function StackedBarChart({
+  slices,
+  label,
+  formatValue,
+  className
+}) {
+  const { series } = useChartTokens();
+  const visible = slices.filter((slice) => slice.value > 0);
+  const total = visible.reduce((sum, slice) => sum + slice.value, 0);
+  if (total <= 0) return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(EmptyChart, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      "div",
+      {
+        role: "img",
+        "aria-label": label,
+        className: "flex h-3 overflow-hidden rounded-full bg-ph-muted ring-1 ring-ph-border",
+        children: visible.map((slice, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          "span",
+          {
+            className: "h-full",
+            style: {
+              width: `${Math.max(slice.value / total * 100, 2)}%`,
+              background: sliceColour(slice, index, series)
+            }
+          },
+          slice.label
+        ))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { className: "space-y-2", children: visible.map((slice, index) => {
+      const colour = sliceColour(slice, index, series);
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("li", { className: "flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "flex min-w-0 items-center gap-2 text-ph-subtle", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { background: colour } }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "truncate", children: slice.label })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(slice.value) : `${percent(slice.value, total)}%` })
+      ] }, slice.label);
+    }) })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -3857,6 +4021,7 @@ Chip.displayName = "Chip";
   Avatar,
   AvatarGroup,
   Badge,
+  BarChart,
   Button,
   ButtonChrome,
   Calendar,
@@ -3869,6 +4034,7 @@ Chip.displayName = "Chip";
   CommandPalette,
   ComponentDocs,
   Display,
+  DonutChart,
   Dot,
   DropdownButton,
   DropdownItem,
@@ -3916,6 +4082,7 @@ Chip.displayName = "Chip";
   Small,
   SortMenu,
   Spinner,
+  StackedBarChart,
   Stat,
   Table,
   Textarea,
@@ -3923,5 +4090,6 @@ Chip.displayName = "Chip";
   ThemeSwitcher,
   Toggle,
   Tooltip,
-  TooltipProvider
+  TooltipProvider,
+  useChartTokens
 });

package/dist/ui.mjs

@@ -8,6 +8,7 @@ import {
   Avatar,
   AvatarGroup,
   Badge,
+  BarChart,
   Button,
   ButtonChrome,
   Calendar,
@@ -20,6 +21,7 @@ import {
   CommandPalette,
   ComponentDocs,
   Display,
+  DonutChart,
   Dot,
   DropdownButton,
   DropdownItem,
@@ -67,6 +69,7 @@ import {
   Small,
   SortMenu,
   Spinner,
+  StackedBarChart,
   Stat,
   Table,
   Textarea,
@@ -74,8 +77,9 @@ import {
   ThemeSwitcher,
   Toggle,
   Tooltip,
-  TooltipProvider
-} from "./chunk-2EO5VCXP.mjs";
+  TooltipProvider,
+  useChartTokens
+} from "./chunk-6SVJAU5K.mjs";
 import "./chunk-FWCSY2DS.mjs";
 export {
   Accordion,
@@ -86,6 +90,7 @@ export {
   Avatar,
   AvatarGroup,
   Badge,
+  BarChart,
   Button,
   ButtonChrome,
   Calendar,
@@ -98,6 +103,7 @@ export {
   CommandPalette,
   ComponentDocs,
   Display,
+  DonutChart,
   Dot,
   DropdownButton,
   DropdownItem,
@@ -145,6 +151,7 @@ export {
   Small,
   SortMenu,
   Spinner,
+  StackedBarChart,
   Stat,
   Table,
   Textarea,
@@ -152,5 +159,6 @@ export {
   ThemeSwitcher,
   Toggle,
   Tooltip,
-  TooltipProvider
+  TooltipProvider,
+  useChartTokens
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.9.6",
+  "version": "0.9.8",
   "description": "Props-driven React components and theme tokens inspired by classic interface design — optimized for Next.js apps and internal tools.",
   "author": "Xenide",
   "license": "MIT",

package/src/components/ui/Charts.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import { useChartTokens } from "@/lib/chart/use-ph-chart-tokens";
+import { cn } from "@/lib/cn";
+
+export { useChartTokens, type ChartTokens } from "@/lib/chart/use-ph-chart-tokens";
+
+export interface ChartSlice {
+  label: string;
+  value: number;
+  colour?: string;
+}
+
+export interface DonutChartProps {
+  slices: readonly ChartSlice[];
+  label: string;
+  formatValue?: (value: number) => string;
+  className?: string;
+}
+
+export interface BarChartProps {
+  items: readonly ChartSlice[];
+  formatValue?: (value: number) => string;
+  className?: string;
+}
+
+export interface StackedBarChartProps {
+  slices: readonly ChartSlice[];
+  label: string;
+  formatValue?: (value: number) => string;
+  className?: string;
+}
+
+function percent(value: number, total: number): number {
+  return total > 0 ? Math.round((value / total) * 100) : 0;
+}
+
+function EmptyChart() {
+  return <p className="text-sm text-ph-subtle">No data for this period.</p>;
+}
+
+function sliceColour(slice: ChartSlice, index: number, series: string[]): string {
+  return slice.colour ?? series[index % series.length];
+}
+
+export function DonutChart({ slices, label, formatValue, className }: DonutChartProps) {
+  const { series } = useChartTokens();
+  const visible = slices.filter((slice) => slice.value > 0);
+  const total = visible.reduce((sum, slice) => sum + slice.value, 0);
+  if (total <= 0) return <EmptyChart />;
+
+  const stops = visible
+    .map((slice, index) => {
+      const colour = sliceColour(slice, index, series);
+      const before = visible
+        .slice(0, index)
+        .reduce((sum, item) => sum + item.value, 0);
+      const start = (before / total) * 360;
+      const end = ((before + slice.value) / total) * 360;
+      return `${colour} ${start}deg ${end}deg`;
+    })
+    .join(", ");
+
+  return (
+    <div className={cn("flex flex-col items-center gap-4 sm:flex-row sm:items-center", className)}>
+      <div
+        role="img"
+        aria-label={label}
+        className="relative h-36 w-36 shrink-0 rounded-full"
+        style={{ background: `conic-gradient(${stops})` }}
+      >
+        <span
+          className="absolute inset-[22%] rounded-full bg-ph-surface ring-1 ring-ph-border"
+          aria-hidden
+        />
+      </div>
+      <ul className="min-w-0 w-full flex-1 space-y-2">
+        {visible.map((slice, index) => {
+          const colour = sliceColour(slice, index, series);
+          return (
+            <li key={slice.label} className="flex items-center justify-between gap-3 text-sm">
+              <span className="flex min-w-0 items-center gap-2 text-ph-subtle">
+                <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ background: colour }} />
+                <span className="truncate">{slice.label}</span>
+              </span>
+              <span className="shrink-0 tabular-nums text-ph-ink">
+                {formatValue ? formatValue(slice.value) : `${percent(slice.value, total)}%`}
+              </span>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+export function BarChart({ items, formatValue, className }: BarChartProps) {
+  const { series } = useChartTokens();
+  const visible = items.filter((item) => item.value > 0);
+  const max = Math.max(...visible.map((item) => item.value), 1);
+  if (!visible.length) return <EmptyChart />;
+
+  return (
+    <ul className={cn("space-y-3", className)}>
+      {visible.map((item, index) => {
+        const colour = sliceColour(item, index, series);
+        return (
+          <li key={item.label}>
+            <div className="mb-1 flex items-center justify-between gap-3 text-sm">
+              <span className="truncate text-ph-subtle">{item.label}</span>
+              <span className="shrink-0 tabular-nums text-ph-ink">
+                {formatValue ? formatValue(item.value) : item.value.toLocaleString("en-AU")}
+              </span>
+            </div>
+            <div className="h-2.5 rounded-full bg-ph-muted ring-1 ring-ph-border">
+              <div
+                className="h-full rounded-full transition-[width] duration-300 ease-out motion-reduce:transition-none"
+                style={{
+                  width: `${Math.max((item.value / max) * 100, 2)}%`,
+                  background: colour,
+                }}
+              />
+            </div>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+export function StackedBarChart({
+  slices,
+  label,
+  formatValue,
+  className,
+}: StackedBarChartProps) {
+  const { series } = useChartTokens();
+  const visible = slices.filter((slice) => slice.value > 0);
+  const total = visible.reduce((sum, slice) => sum + slice.value, 0);
+  if (total <= 0) return <EmptyChart />;
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      <div
+        role="img"
+        aria-label={label}
+        className="flex h-3 overflow-hidden rounded-full bg-ph-muted ring-1 ring-ph-border"
+      >
+        {visible.map((slice, index) => (
+          <span
+            key={slice.label}
+            className="h-full"
+            style={{
+              width: `${Math.max((slice.value / total) * 100, 2)}%`,
+              background: sliceColour(slice, index, series),
+            }}
+          />
+        ))}
+      </div>
+      <ul className="space-y-2">
+        {visible.map((slice, index) => {
+          const colour = sliceColour(slice, index, series);
+          return (
+            <li key={slice.label} className="flex items-center justify-between gap-3 text-sm">
+              <span className="flex min-w-0 items-center gap-2 text-ph-subtle">
+                <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ background: colour }} />
+                <span className="truncate">{slice.label}</span>
+              </span>
+              <span className="shrink-0 tabular-nums text-ph-ink">
+                {formatValue ? formatValue(slice.value) : `${percent(slice.value, total)}%`}
+              </span>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}

package/src/components/ui/charts.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { BarChart, DonutChart, StackedBarChart } from "./Charts";
+
+const slices = [
+  { label: "Tides", value: 40 },
+  { label: "TurtleTime", value: 60 },
+];
+
+describe("Charts", () => {
+  it("renders a labelled donut and a bar for each slice", () => {
+    render(<DonutChart label="Time by source" slices={slices} />);
+    expect(screen.getByRole("img", { name: "Time by source" })).toBeInTheDocument();
+    expect(screen.getByText("Tides")).toBeInTheDocument();
+    expect(screen.getByText("40%")).toBeInTheDocument();
+  });
+
+  it("renders bars with formatted values", () => {
+    render(<BarChart items={slices} formatValue={(value) => `${value}h`} />);
+    expect(screen.getByText("60h")).toBeInTheDocument();
+  });
+
+  it("renders a stacked mix and an empty state", () => {
+    const { rerender } = render(<StackedBarChart label="Work mix" slices={slices} />);
+    expect(screen.getByRole("img", { name: "Work mix" })).toBeInTheDocument();
+    rerender(<StackedBarChart label="Work mix" slices={[{ label: "None", value: 0 }]} />);
+    expect(screen.getByText("No data for this period.")).toBeInTheDocument();
+  });
+});

package/src/components/ui/index.ts

@@ -264,3 +264,14 @@ export {
   Chip as Chip,
   type ChipProps as ChipProps,
 } from "@/components/ui/Chip";
+export {
+  BarChart as BarChart,
+  DonutChart as DonutChart,
+  StackedBarChart as StackedBarChart,
+  useChartTokens as useChartTokens,
+  type BarChartProps as BarChartProps,
+  type ChartSlice as ChartSlice,
+  type ChartTokens as ChartTokens,
+  type DonutChartProps as DonutChartProps,
+  type StackedBarChartProps as StackedBarChartProps,
+} from "@/components/ui/Charts";

package/src/suite/components/ai-panel.tsx

@@ -297,6 +297,13 @@ export function SuiteAiPanel({
     if (open && !hydrating) textareaRef.current?.focus();
   }, [open, hydrating]);
 
+  // Warm the lazily-imported Markdown renderer as soon as the panel opens, so a
+  // reply never flashes a placeholder while its chunk is still downloading.
+  useEffect(() => {
+    if (!open) return;
+    void import("./ai-message-markdown").catch(() => {});
+  }, [open]);
+
   useLayoutEffect(() => {
     const el = textareaRef.current;
     if (!el) return;
@@ -537,16 +544,12 @@ export function SuiteAiPanel({
                   <div className="rounded-2xl rounded-bl-md bg-ph-muted px-3 py-2 text-sm leading-relaxed text-ph-ink">
                     <Suspense
                       fallback={
-                        <div
-                          className="space-y-2 py-0.5"
-                          role="status"
-                          aria-label="Rendering response"
-                        >
-                          <span className="sr-only">Rendering response…</span>
-                          <div className="suite-shimmer h-3 w-11/12 rounded bg-ph-mutedtext/20" />
-                          <div className="suite-shimmer h-3 w-full rounded bg-ph-mutedtext/20" />
-                          <div className="suite-shimmer h-3 w-3/5 rounded bg-ph-mutedtext/20" />
-                        </div>
+                        // The chunk is pre-warmed above, so this only shows on a
+                        // cold cache. Keep it invisible — a skeleton here reads
+                        // as if it were part of the answer.
+                        <span className="sr-only" role="status">
+                          Rendering response…
+                        </span>
                       }
                     >
                       <SuiteAiMarkdownMessage

package/src/suite/components/suite-sidebar.tsx

@@ -320,9 +320,7 @@ export function SuiteSidebar({
         className={cn(
           "shrink-0 border-t border-ph-border",
           surface ? "bg-ph-surface" : "bg-ph-canvas",
-          // Trim only the bottom inset: the 32px avatar sits inside a 40px
-          // trigger, so even padding read top-heavy once the avatar shrank.
-          collapsed ? "px-1.5 pt-1.5 pb-1" : "px-3 pt-3 pb-2",
+          collapsed ? "p-1.5" : "p-3",
         )}
       >
         <div

package/src/suite/components/suite-user-menu.tsx

@@ -16,6 +16,10 @@ export interface SuiteUserMenuProps {
   onSignOut: () => void;
   /** Fallback letter(s) when there is no avatar image. */
   fallbackInitials?: string;
+  /** Second line under the name, e.g. the workspace subscription ("Plus"). */
+  subtitle?: string | null;
+  /** Show the name + subtitle beside the avatar, for the sidebar footer. */
+  showDetails?: boolean;
   /** Show the old desktop sidebar sign-out action beside the avatar. */
   showSignOutAction?: boolean;
   dataTest?: string;
@@ -72,6 +76,8 @@ export function SuiteUserMenu({
   settingsHref,
   onSignOut,
   fallbackInitials,
+  subtitle,
+  showDetails = false,
   showSignOutAction = false,
   dataTest = "suite-user-menu",
   triggerId,
@@ -110,9 +116,27 @@ export function SuiteUserMenu({
     </span>
   );
 
+  // Sidebar footer shows who is signed in and which plan the workspace is on;
+  // the mobile header keeps the bare avatar so its action row stays compact.
+  const trigger = showDetails ? (
+    <span className="flex min-w-0 items-center gap-2">
+      {avatar}
+      <span className="flex min-w-0 flex-col text-left">
+        <span className="truncate text-sm font-medium text-ph-ink">
+          {name || email || "Account"}
+        </span>
+        {subtitle ? (
+          <span className="truncate text-xs text-ph-mutedtext">{subtitle}</span>
+        ) : null}
+      </span>
+    </span>
+  ) : (
+    avatar
+  );
+
   const accountMenu = (
     <DropdownMenu
-      trigger={avatar}
+      trigger={trigger}
       triggerId={triggerId ?? `${dataTest}-trigger`}
       triggerDataTest={triggerDataTest ?? `${dataTest}-trigger`}
       aria-label="Account menu"
@@ -123,6 +147,8 @@ export function SuiteUserMenu({
       modal={false}
       className={cn(
         "[&_.ph-dropdown-trigger]:rounded-full",
+        showDetails &&
+          "min-w-0 flex-1 [&_.ph-dropdown-trigger]:w-full [&_.ph-dropdown-trigger]:justify-start [&_.ph-dropdown-trigger]:rounded-lg",
         showSignOutAction ? undefined : className,
       )}
       data-test={dataTest}