@xenide-io/the-old-ui-theme 0.9.5 → 0.9.7

package/dist/ai-message-markdown-AUEMCO7K.mjs

@@ -0,0 +1,65 @@
+"use client";
+import "./chunk-FWCSY2DS.mjs";
+
+// src/suite/components/ai-message-markdown.tsx
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { jsx } from "react/jsx-runtime";
+var WORD_STEP_MS = 18;
+var MAX_DELAY_MS = 600;
+var SKIP_TAGS = /* @__PURE__ */ new Set(["code", "pre", "style", "script"]);
+function rehypeStaggerWords() {
+  return (tree) => {
+    let wordIndex = 0;
+    const visit = (node) => {
+      if (!node.children) return;
+      if (node.tagName && SKIP_TAGS.has(node.tagName)) return;
+      const next = [];
+      for (const child of node.children) {
+        const isText = child.type === "text" && typeof child.value === "string" && /\S/.test(child.value);
+        if (!isText) {
+          visit(child);
+          next.push(child);
+          continue;
+        }
+        for (const part of child.value.split(/(\s+)/)) {
+          if (!part) continue;
+          if (/^\s+$/.test(part)) {
+            next.push({ type: "text", value: part });
+            continue;
+          }
+          const delay = Math.min(wordIndex * WORD_STEP_MS, MAX_DELAY_MS);
+          wordIndex += 1;
+          next.push({
+            type: "element",
+            tagName: "span",
+            properties: {
+              className: ["suite-word-in"],
+              style: `animation-delay:${delay}ms`
+            },
+            children: [{ type: "text", value: part }]
+          });
+        }
+      }
+      node.children = next;
+    };
+    visit(tree);
+  };
+}
+function SuiteAiMarkdownMessage({
+  markdown,
+  animate = false
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "suite-ai-markdown", children: /* @__PURE__ */ jsx(
+    ReactMarkdown,
+    {
+      remarkPlugins: [remarkGfm],
+      rehypePlugins: animate ? [rehypeStaggerWords] : void 0,
+      components: { img: () => null },
+      children: markdown
+    }
+  ) });
+}
+export {
+  SuiteAiMarkdownMessage as default
+};

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

@@ -64,19 +64,59 @@ var ai_message_markdown_exports = {};
 __export(ai_message_markdown_exports, {
   default: () => SuiteAiMarkdownMessage
 });
+function rehypeStaggerWords() {
+  return (tree) => {
+    let wordIndex = 0;
+    const visit = (node) => {
+      if (!node.children) return;
+      if (node.tagName && SKIP_TAGS.has(node.tagName)) return;
+      const next = [];
+      for (const child of node.children) {
+        const isText = child.type === "text" && typeof child.value === "string" && /\S/.test(child.value);
+        if (!isText) {
+          visit(child);
+          next.push(child);
+          continue;
+        }
+        for (const part of child.value.split(/(\s+)/)) {
+          if (!part) continue;
+          if (/^\s+$/.test(part)) {
+            next.push({ type: "text", value: part });
+            continue;
+          }
+          const delay = Math.min(wordIndex * WORD_STEP_MS, MAX_DELAY_MS);
+          wordIndex += 1;
+          next.push({
+            type: "element",
+            tagName: "span",
+            properties: {
+              className: ["suite-word-in"],
+              style: `animation-delay:${delay}ms`
+            },
+            children: [{ type: "text", value: part }]
+          });
+        }
+      }
+      node.children = next;
+    };
+    visit(tree);
+  };
+}
 function SuiteAiMarkdownMessage({
-  markdown
+  markdown,
+  animate = false
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "suite-ai-markdown", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     import_react_markdown.default,
     {
       remarkPlugins: [import_remark_gfm.default],
+      rehypePlugins: animate ? [rehypeStaggerWords] : void 0,
       components: { img: () => null },
       children: markdown
     }
   ) });
 }
-var import_react_markdown, import_remark_gfm, import_jsx_runtime23;
+var import_react_markdown, import_remark_gfm, import_jsx_runtime23, WORD_STEP_MS, MAX_DELAY_MS, SKIP_TAGS;
 var init_ai_message_markdown = __esm({
   "src/suite/components/ai-message-markdown.tsx"() {
     "use strict";
@@ -84,6 +124,9 @@ var init_ai_message_markdown = __esm({
     import_react_markdown = __toESM(require("react-markdown"));
     import_remark_gfm = __toESM(require("remark-gfm"));
     import_jsx_runtime23 = require("react/jsx-runtime");
+    WORD_STEP_MS = 18;
+    MAX_DELAY_MS = 600;
+    SKIP_TAGS = /* @__PURE__ */ new Set(["code", "pre", "style", "script"]);
   }
 });
 
@@ -2741,6 +2784,8 @@ function SuiteUserMenu({
   settingsHref,
   onSignOut,
   fallbackInitials,
+  subtitle,
+  showDetails = false,
   showSignOutAction = false,
   dataTest = "suite-user-menu",
   triggerId,
@@ -2770,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",
@@ -2784,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,
@@ -3541,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;
@@ -3665,6 +3723,10 @@ function SuiteAiPanel({
     else window.location.assign(new URL(openPath, href).toString());
   }
   if (!open) return null;
+  const lastAssistantIndex = messages.reduce(
+    (found, message, index) => message.role === "assistant" ? index : found,
+    -1
+  );
   const Icon = BrandIcon != null ? BrandIcon : import_iconoir_react8.Sparks;
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "aside",
@@ -3733,7 +3795,7 @@ function SuiteAiPanel({
                     return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       "div",
                       {
-                        className: "flex justify-end",
+                        className: "suite-msg-in suite-msg-in--user flex justify-end",
                         "data-test": "ask-ai-user",
                         children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("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 })
                       },
@@ -3749,30 +3811,28 @@ function SuiteAiPanel({
                         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                           "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",
+                            className: "suite-msg-avatar 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__ */ (0, import_jsx_runtime24.jsx)(Icon, { className: "h-3.5 w-3.5" })
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "min-w-0 max-w-[85%] space-y-2", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "suite-msg-bubble min-w-0 max-w-[85%] space-y-2", children: [
                           /* @__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",
+                              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,
                                 {
-                                  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: "h-3 w-11/12 rounded bg-ph-mutedtext/20 motion-safe:animate-pulse" }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-3 w-full rounded bg-ph-mutedtext/20 motion-safe:animate-pulse" }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-3 w-3/5 rounded bg-ph-mutedtext/20 motion-safe:animate-pulse" })
-                                  ]
+                                  markdown: message.content,
+                                  animate: index === lastAssistantIndex
                                 }
-                              ),
-                              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SuiteAiMarkdownMessage2, { markdown: message.content })
+                              )
                             }
                           ) }),
                           ((_a = message.actions) != null ? _a : []).map((action) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
@@ -3836,9 +3896,9 @@ function SuiteAiPanel({
                 waiting ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-end gap-2", "aria-hidden": true, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("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__ */ (0, import_jsx_runtime24.jsx)(Icon, { className: "h-3.5 w-3.5" }) }),
                   /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-1.5 rounded-2xl rounded-bl-md bg-ph-muted px-3 py-2.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce [animation-delay:0.15s]" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce [animation-delay:0.3s]" })
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "suite-think-dot h-1.5 w-1.5 rounded-full bg-ph-mutedtext" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "suite-think-dot suite-think-dot--2 h-1.5 w-1.5 rounded-full bg-ph-mutedtext" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "suite-think-dot suite-think-dot--3 h-1.5 w-1.5 rounded-full bg-ph-mutedtext" })
                   ] })
                 ] }) : null,
                 waiting ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "sr-only", "aria-live": "polite", children: "Assistant is responding\u2026" }) : null,
@@ -4730,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

@@ -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,
@@ -2386,7 +2396,7 @@ import {
   WarningTriangle
 } from "iconoir-react";
 import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
-var SuiteAiMarkdownMessage = lazy(() => import("./ai-message-markdown-TSPYON2F.mjs"));
+var SuiteAiMarkdownMessage = lazy(() => import("./ai-message-markdown-AUEMCO7K.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";
@@ -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;
@@ -2685,6 +2700,10 @@ function SuiteAiPanel({
     else window.location.assign(new URL(openPath, href).toString());
   }
   if (!open) return null;
+  const lastAssistantIndex = messages.reduce(
+    (found, message, index) => message.role === "assistant" ? index : found,
+    -1
+  );
   const Icon = BrandIcon != null ? BrandIcon : Sparks;
   return /* @__PURE__ */ jsxs14(
     "aside",
@@ -2753,7 +2772,7 @@ function SuiteAiPanel({
                     return /* @__PURE__ */ jsx17(
                       "div",
                       {
-                        className: "flex justify-end",
+                        className: "suite-msg-in suite-msg-in--user 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 })
                       },
@@ -2769,30 +2788,28 @@ function SuiteAiPanel({
                         /* @__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",
+                            className: "suite-msg-avatar 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" })
                           }
                         ),
-                        /* @__PURE__ */ jsxs14("div", { className: "min-w-0 max-w-[85%] space-y-2", children: [
+                        /* @__PURE__ */ jsxs14("div", { className: "suite-msg-bubble 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(
                             Suspense,
                             {
-                              fallback: /* @__PURE__ */ jsxs14(
-                                "div",
+                              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,
                                 {
-                                  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: "h-3 w-11/12 rounded bg-ph-mutedtext/20 motion-safe:animate-pulse" }),
-                                    /* @__PURE__ */ jsx17("div", { className: "h-3 w-full rounded bg-ph-mutedtext/20 motion-safe:animate-pulse" }),
-                                    /* @__PURE__ */ jsx17("div", { className: "h-3 w-3/5 rounded bg-ph-mutedtext/20 motion-safe:animate-pulse" })
-                                  ]
+                                  markdown: message.content,
+                                  animate: index === lastAssistantIndex
                                 }
-                              ),
-                              children: /* @__PURE__ */ jsx17(SuiteAiMarkdownMessage, { markdown: message.content })
+                              )
                             }
                           ) }),
                           ((_a = message.actions) != null ? _a : []).map((action) => /* @__PURE__ */ jsxs14(
@@ -2856,9 +2873,9 @@ function SuiteAiPanel({
                 waiting ? /* @__PURE__ */ jsxs14("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__ */ jsxs14("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]" })
+                    /* @__PURE__ */ jsx17("span", { className: "suite-think-dot h-1.5 w-1.5 rounded-full bg-ph-mutedtext" }),
+                    /* @__PURE__ */ jsx17("span", { className: "suite-think-dot suite-think-dot--2 h-1.5 w-1.5 rounded-full bg-ph-mutedtext" }),
+                    /* @__PURE__ */ jsx17("span", { className: "suite-think-dot suite-think-dot--3 h-1.5 w-1.5 rounded-full bg-ph-mutedtext" })
                   ] })
                 ] }) : null,
                 waiting ? /* @__PURE__ */ jsx17("span", { className: "sr-only", "aria-live": "polite", children: "Assistant is responding\u2026" }) : null,
@@ -3754,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.9.5",
+  "version": "0.9.7",
   "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/styles/suite-skin.css

@@ -797,6 +797,164 @@ button:hover > .ph-card {
   border-top: 1px solid var(--ph-border-subtle);
 }
 
+/* ── Ask AI conversation motion ─────────────────────────────────────────
+   Replies arrive whole (the suite chat is polled, not streamed), so the
+   motion carries the "alive" signal instead: a soft one-shot entrance per
+   message, a breathing thinking indicator, and a shimmer for the skeleton.
+   Only opacity + transform animate — height/margin would fight the
+   scroller. All of it collapses under prefers-reduced-motion. */
+@keyframes suite-msg-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.97);
+    filter: blur(4px);
+  }
+  60% {
+    opacity: 1;
+  }
+  to {
+    opacity: 1;
+    transform: none;
+    filter: blur(0);
+  }
+}
+@keyframes suite-msg-in-user {
+  /* The user's own turn grows out of the composer corner, per the chat
+     scroller guidance, so sending feels anchored to where they typed. */
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.96);
+    filter: blur(4px);
+  }
+  60% {
+    opacity: 1;
+  }
+  to {
+    opacity: 1;
+    transform: none;
+    filter: blur(0);
+  }
+}
+.suite-msg-in {
+  /* Slight overshoot rather than a flat ease-out: the bubble reads as
+     landing rather than fading up. Origin sits at the tail corner so it
+     appears to grow from the avatar (assistant) / composer (user). */
+  animation: suite-msg-in 280ms cubic-bezier(0.34, 1.4, 0.64, 1) both;
+  transform-origin: 0 100%;
+}
+.suite-msg-in--user {
+  animation-name: suite-msg-in-user;
+  animation-duration: 240ms;
+  transform-origin: 100% 100%;
+}
+/* Avatar lands first, bubble follows — a small layer separation. The bubble
+   only settles (no blur) because the words themselves carry the reveal. */
+@keyframes suite-msg-settle {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+.suite-msg-avatar {
+  animation: suite-msg-in 260ms cubic-bezier(0.34, 1.4, 0.64, 1) both;
+}
+.suite-msg-bubble {
+  animation: suite-msg-settle 200ms ease-out both;
+}
+
+/* ── Answer reveal ──────────────────────────────────────────────────────
+   Replies land in one payload (the suite chat is polled), so the words
+   themselves are staggered to read as if they were being written. Delay is
+   applied per word inline by the rehype plugin in ai-message-markdown.tsx
+   and capped so a long answer still finishes settling in well under a
+   second. `both` fill keeps each word hidden until its turn. */
+@keyframes suite-word-in {
+  from {
+    opacity: 0;
+    filter: blur(2px);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+.suite-word-in {
+  animation: suite-word-in 240ms ease-out both;
+}
+
+@keyframes suite-think-breathe {
+  0%,
+  100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.suite-think-dot {
+  animation: suite-think-breathe 1.4s ease-in-out infinite;
+}
+.suite-think-dot--2 {
+  animation-delay: 0.16s;
+}
+.suite-think-dot--3 {
+  animation-delay: 0.32s;
+}
+
+/* Sweep a translateX band rather than background-position: the latter
+   repaints every frame, the former stays on the compositor. */
+@keyframes suite-shimmer {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(200%);
+  }
+}
+.suite-shimmer {
+  position: relative;
+  overflow: hidden;
+}
+.suite-shimmer::after {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 60%;
+  background-image: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in oklab, var(--ph-text-primary) 9%, transparent),
+    transparent
+  );
+  animation: suite-shimmer 1.6s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .suite-msg-in,
+  .suite-msg-in--user,
+  .suite-msg-avatar,
+  .suite-msg-bubble,
+  .suite-word-in {
+    animation: none;
+    filter: none;
+  }
+  .suite-think-dot {
+    animation: none;
+    opacity: 0.7;
+    transform: none;
+  }
+  .suite-shimmer::after {
+    animation: none;
+    opacity: 0;
+  }
+}
+
 /* ── Auth / OAuth / launch handoff ──────────────────────────────────────
    One calm opacity fade — no stacked entrance reveals on bridge pages. */
 .suite-auth-handoff {

package/src/suite/components/ai-message-markdown.test.tsx

@@ -38,4 +38,44 @@ describe("SuiteAiMarkdownMessage", () => {
     expect(container.querySelector('[contenteditable]')).toBeNull();
     expect(container.querySelector("img")).toBeNull();
   });
+
+  it("leaves words untouched unless animate is set", () => {
+    const { container } = render(
+      <SuiteThemeProvider config={themeConfig}>
+        <SuiteAiMarkdownMessage markdown={"Hello there world"} />
+      </SuiteThemeProvider>,
+    );
+
+    expect(container.querySelectorAll(".suite-word-in")).toHaveLength(0);
+    expect(container.textContent).toContain("Hello there world");
+  });
+
+  it("staggers each word when animate is set", () => {
+    const { container } = render(
+      <SuiteThemeProvider config={themeConfig}>
+        <SuiteAiMarkdownMessage markdown={"Hello there world"} animate />
+      </SuiteThemeProvider>,
+    );
+
+    const words = container.querySelectorAll<HTMLElement>(".suite-word-in");
+    expect(words).toHaveLength(3);
+    expect(words[0].textContent).toBe("Hello");
+    expect(words[0].style.animationDelay).toBe("0ms");
+    expect(words[1].style.animationDelay).toBe("18ms");
+    expect(words[2].style.animationDelay).toBe("36ms");
+    // Copy still yields the original prose.
+    expect(container.textContent).toBe("Hello there world");
+  });
+
+  it("does not stagger code spans", () => {
+    const { container } = render(
+      <SuiteThemeProvider config={themeConfig}>
+        <SuiteAiMarkdownMessage markdown={"Run `npm run dev` now"} animate />
+      </SuiteThemeProvider>,
+    );
+
+    const code = container.querySelector("code");
+    expect(code).toBeTruthy();
+    expect(code?.querySelector(".suite-word-in")).toBeNull();
+  });
 });

package/src/suite/components/ai-message-markdown.tsx

@@ -1,17 +1,91 @@
 "use client";
 
-import ReactMarkdown from "react-markdown";
+import ReactMarkdown, { type Options } from "react-markdown";
 import remarkGfm from "remark-gfm";
 
+/** Per-word stagger step, and the ceiling so a long reply still settles fast. */
+const WORD_STEP_MS = 18;
+const MAX_DELAY_MS = 600;
+
+/** Tags whose text is left alone — animating code word by word reads badly. */
+const SKIP_TAGS = new Set(["code", "pre", "style", "script"]);
+
+interface HastNode {
+  type: string;
+  tagName?: string;
+  value?: string;
+  properties?: Record<string, unknown>;
+  children?: HastNode[];
+}
+
+/**
+ * Wrap each word of prose in a span that fades in on a stagger, so a reply
+ * that arrived in one payload reads as if it were being written.
+ *
+ * Delay lives inline on the span, so React re-rendering the same tree reuses
+ * the same elements and the animation does not replay.
+ */
+function rehypeStaggerWords() {
+  return (tree: HastNode) => {
+    let wordIndex = 0;
+
+    const visit = (node: HastNode) => {
+      if (!node.children) return;
+      if (node.tagName && SKIP_TAGS.has(node.tagName)) return;
+
+      const next: HastNode[] = [];
+      for (const child of node.children) {
+        const isText =
+          child.type === "text" &&
+          typeof child.value === "string" &&
+          /\S/.test(child.value);
+
+        if (!isText) {
+          visit(child);
+          next.push(child);
+          continue;
+        }
+
+        for (const part of child.value!.split(/(\s+)/)) {
+          if (!part) continue;
+          if (/^\s+$/.test(part)) {
+            next.push({ type: "text", value: part });
+            continue;
+          }
+          const delay = Math.min(wordIndex * WORD_STEP_MS, MAX_DELAY_MS);
+          wordIndex += 1;
+          next.push({
+            type: "element",
+            tagName: "span",
+            properties: {
+              className: ["suite-word-in"],
+              style: `animation-delay:${delay}ms`,
+            },
+            children: [{ type: "text", value: part }],
+          });
+        }
+      }
+      node.children = next;
+    };
+
+    visit(tree);
+  };
+}
+
 export default function SuiteAiMarkdownMessage({
   markdown,
+  animate = false,
 }: {
   markdown: string;
+  animate?: boolean;
 }) {
   return (
     <div className="suite-ai-markdown">
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
+        rehypePlugins={
+          (animate ? [rehypeStaggerWords] : undefined) as Options["rehypePlugins"]
+        }
         components={{ img: () => null }}
       >
         {markdown}

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;
@@ -425,6 +432,13 @@ export function SuiteAiPanel({
 
   if (!open) return null;
 
+  // Only the newest reply gets the staggered word reveal; animating the whole
+  // transcript would replay whenever the panel remounts mid-conversation.
+  const lastAssistantIndex = messages.reduce(
+    (found, message, index) => (message.role === "assistant" ? index : found),
+    -1,
+  );
+
   const Icon = BrandIcon ?? Sparks;
 
   return (
@@ -505,7 +519,7 @@ export function SuiteAiPanel({
               return (
                 <div
                   key={`user-${index}`}
-                  className="flex justify-end"
+                  className="suite-msg-in suite-msg-in--user flex justify-end"
                   data-test="ask-ai-user"
                 >
                   <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]">
@@ -521,28 +535,27 @@ export function SuiteAiPanel({
                 data-test="ask-ai-assistant"
               >
                 <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"
+                  className="suite-msg-avatar 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
                 >
                   <Icon className="h-3.5 w-3.5" />
                 </span>
-                <div className="min-w-0 max-w-[85%] space-y-2">
+                <div className="suite-msg-bubble min-w-0 max-w-[85%] space-y-2">
                   <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="h-3 w-11/12 rounded bg-ph-mutedtext/20 motion-safe:animate-pulse" />
-                          <div className="h-3 w-full rounded bg-ph-mutedtext/20 motion-safe:animate-pulse" />
-                          <div className="h-3 w-3/5 rounded bg-ph-mutedtext/20 motion-safe:animate-pulse" />
-                        </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 markdown={message.content} />
+                      <SuiteAiMarkdownMessage
+                        markdown={message.content}
+                        animate={index === lastAssistantIndex}
+                      />
                     </Suspense>
                   </div>
                   {(message.actions ?? []).map((action) => (
@@ -612,9 +625,9 @@ export function SuiteAiPanel({
                 <Icon className="h-3.5 w-3.5" />
               </span>
               <div className="flex items-center gap-1.5 rounded-2xl rounded-bl-md bg-ph-muted px-3 py-2.5">
-                <span className="h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce" />
-                <span className="h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce [animation-delay:0.15s]" />
-                <span className="h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce [animation-delay:0.3s]" />
+                <span className="suite-think-dot h-1.5 w-1.5 rounded-full bg-ph-mutedtext" />
+                <span className="suite-think-dot suite-think-dot--2 h-1.5 w-1.5 rounded-full bg-ph-mutedtext" />
+                <span className="suite-think-dot suite-think-dot--3 h-1.5 w-1.5 rounded-full bg-ph-mutedtext" />
               </div>
             </div>
           ) : null}

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}

package/dist/ai-message-markdown-TSPYON2F.mjs

@@ -1,22 +0,0 @@
-"use client";
-import "./chunk-FWCSY2DS.mjs";
-
-// src/suite/components/ai-message-markdown.tsx
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import { jsx } from "react/jsx-runtime";
-function SuiteAiMarkdownMessage({
-  markdown
-}) {
-  return /* @__PURE__ */ jsx("div", { className: "suite-ai-markdown", children: /* @__PURE__ */ jsx(
-    ReactMarkdown,
-    {
-      remarkPlugins: [remarkGfm],
-      components: { img: () => null },
-      children: markdown
-    }
-  ) });
-}
-export {
-  SuiteAiMarkdownMessage as default
-};