@xenide-io/the-old-ui-theme 0.9.18 → 0.11.0

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

@@ -26,10 +26,9 @@ import {
 } from "iconoir-react";
 
 import { Tooltip } from "../../components/ui/Tooltip";
-import {
-  classifySuiteHref,
-  type SuiteAppSlug,
-} from "../lib/apps";
+import { trackSuiteEvent } from "../../lib/suite-analytics";
+import { SuiteAiDraftEditor, suiteAiDraftFields } from "./ai-draft-editor";
+import { classifySuiteHref, type SuiteAppSlug } from "../lib/apps";
 
 const SuiteAiMarkdownMessage = lazy(() => import("./ai-message-markdown"));
 
@@ -85,10 +84,7 @@ export function consumeSuiteAskAiOpenFromLocation(): boolean {
 }
 
 export type SuiteAiActionStatus =
-  | "proposed"
-  | "applied"
-  | "cancelled"
-  | "failed";
+  "proposed" | "applied" | "cancelled" | "failed";
 
 export interface SuiteAiAction {
   id: string;
@@ -207,6 +203,7 @@ export function SuiteAiPanel({
   resolveAction?: (
     id: string,
     decision: "confirm" | "cancel",
+    edits?: Record<string, unknown>,
   ) => Promise<{ messages: SuiteAiChatMessage[] }>;
   /** A durable background job is still preparing the assistant reply. */
   isWaitingForReply?: boolean;
@@ -214,6 +211,9 @@ export function SuiteAiPanel({
   const inputId = useId();
   const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
   const [resolvingId, setResolvingId] = useState("");
+  const [actionDrafts, setActionDrafts] = useState<
+    Record<string, Record<string, unknown>>
+  >({});
   const open = openProp ?? uncontrolledOpen;
   const setOpen = useCallback(
     (next: boolean) => {
@@ -252,6 +252,12 @@ export function SuiteAiPanel({
     return () => window.removeEventListener(SUITE_OPEN_ASK_AI_EVENT, onOpen);
   }, [setOpen]);
 
+  useEffect(() => {
+    if (!open) return;
+    trackSuiteEvent("AI Chat Opened", { origin: "suite_panel" });
+    trackSuiteEvent("UI Opened", { view: "ai_panel" });
+  }, [open]);
+
   const scrollToBottom = useCallback((behavior: ScrollBehavior = "auto") => {
     const el = scrollerRef.current;
     if (!el) return;
@@ -337,6 +343,14 @@ export function SuiteAiPanel({
     setPrompt("");
     setAtBottom(true);
     setMessages((prev) => [...prev, { role: "user", content: trimmed }]);
+    trackSuiteEvent("AI Message Sent", {
+      prompt_length: trimmed.length,
+      page_path:
+        typeof window !== "undefined" ? window.location.pathname : undefined,
+      is_preset: presets.some((preset) => preset.prompt === trimmed),
+      is_edit: false,
+      has_attachment: false,
+    });
     try {
       const result = await sendMessage({
         prompt: trimmed,
@@ -369,6 +383,7 @@ export function SuiteAiPanel({
   }
 
   function stop() {
+    trackSuiteEvent("AI Message Cancelled");
     abortRef.current?.abort();
     abortRef.current = null;
     setLoading(false);
@@ -399,6 +414,14 @@ export function SuiteAiPanel({
     setError("");
     setAtBottom(true);
     setMessages((prev) => prev.slice(0, index));
+    trackSuiteEvent("AI Message Sent", {
+      prompt_length: trimmed.length,
+      page_path:
+        typeof window !== "undefined" ? window.location.pathname : undefined,
+      is_preset: false,
+      is_edit: true,
+      has_attachment: false,
+    });
     const controller = new AbortController();
     abortRef.current = controller;
     setLoading(true);
@@ -449,6 +472,10 @@ export function SuiteAiPanel({
       await clearChat();
       setMessages([]);
       setError("");
+      trackSuiteEvent("AI Chat Cleared", {
+        page_path:
+          typeof window !== "undefined" ? window.location.pathname : undefined,
+      });
     } catch (err) {
       setError(
         err instanceof Error ? err.message : "Could not clear this chat.",
@@ -457,16 +484,25 @@ export function SuiteAiPanel({
   }
 
   async function handleResolve(
-    actionId: string,
+    action: SuiteAiAction,
     decision: "confirm" | "cancel",
   ) {
     if (!resolveAction || resolvingId) return;
+    const actionId = action.id;
     setResolvingId(actionId);
     setError("");
     try {
-      const result = await resolveAction(actionId, decision);
+      const edits = decision === "confirm" ? actionDrafts[actionId] : undefined;
+      const result = edits
+        ? await resolveAction(actionId, decision, edits)
+        : await resolveAction(actionId, decision);
       const nextMessages = result.messages ?? [];
       setMessages(nextMessages);
+      trackSuiteEvent("AI Action Resolved", {
+        decision,
+        action_kind: action.kind,
+        destructive: Boolean(action.payload?.destructive),
+      });
       notifySuiteMutated(
         nextMessages.flatMap((message) => message.actions ?? []),
       );
@@ -525,12 +561,38 @@ export function SuiteAiPanel({
     >
       <header className="flex items-center gap-2 px-2 pb-2">
         <h2 className="sr-only">{title}</h2>
+        {presets.length > 0 ? (
+          <details className="relative" data-test="ask-ai-workflows">
+            <summary className="ph-btn ph-btn-secondary ph-btn-sm min-h-10 cursor-pointer list-none">
+              Workflows
+            </summary>
+            <div className="absolute left-0 top-full z-30 mt-1 max-h-80 w-64 overflow-auto rounded-lg border border-ph-border bg-ph-surface p-1 shadow-lg">
+              {presets.map((preset) => (
+                <button
+                  key={preset.label}
+                  type="button"
+                  disabled={waiting || hydrating}
+                  className="flex min-h-10 w-full items-center rounded px-3 py-2 text-left text-sm hover:bg-ph-muted focus-visible:outline focus-visible:outline-2 disabled:opacity-50"
+                  onClick={(event) => {
+                    setPrompt(preset.prompt);
+                    event.currentTarget
+                      .closest("details")
+                      ?.removeAttribute("open");
+                    textareaRef.current?.focus();
+                  }}
+                >
+                  {preset.label}
+                </button>
+              ))}
+            </div>
+          </details>
+        ) : null}
         {messages.length > 0 ? (
           <button
             type="button"
             onClick={() => void handleClear()}
             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"
+            className="ph-btn ph-btn-ghost ph-btn-sm ml-auto h-9 text-xs text-ph-subtle"
             data-test="ask-ai-clear"
           >
             <Erase className="h-3.5 w-3.5" />
@@ -558,7 +620,7 @@ export function SuiteAiPanel({
 
           {!hydrating && messages.length === 0 && !error ? (
             <div className="mx-auto mt-4 flex max-w-sm flex-col items-center px-1 text-center">
-              <span className="flex h-10 w-10 items-center justify-center rounded-2xl bg-ph-brand/10 text-ph-brand">
+              <span className="flex h-10 w-10 items-center justify-center rounded-[var(--ph-radius-surface)] bg-ph-brand/10 text-ph-brand">
                 <Icon className="h-5 w-5" />
               </span>
               <p className="mt-3 font-display text-base font-semibold text-ph-ink">
@@ -575,7 +637,7 @@ export function SuiteAiPanel({
                       type="button"
                       onClick={() => void ask(preset.prompt)}
                       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"
+                      className="group flex w-full items-center gap-2 rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface px-3 py-2 text-left text-sm text-ph-ink transition-[background-color,border-color,box-shadow] hover:border-[var(--ph-selected-border)] hover:bg-[var(--ph-surface-hover)] focus-visible:outline-none focus-visible:shadow-[var(--ph-focus-halo)] disabled:opacity-40"
                     >
                       <Sparks className="h-4 w-4 shrink-0 text-ph-brand" />
                       <span className="min-w-0 flex-1 truncate">
@@ -620,7 +682,7 @@ export function SuiteAiPanel({
                         }}
                         rows={2}
                         data-test="ask-ai-edit-input"
-                        className="w-full resize-none rounded-2xl rounded-br-md border border-ph-border bg-ph-surface px-3 py-2 text-sm leading-relaxed text-ph-ink outline-none focus-visible:border-ph-brand/45 focus-visible:ring-2 focus-visible:ring-ph-focus/35"
+                        className="w-full resize-none rounded-2xl rounded-br-md border border-ph-border bg-ph-surface px-3 py-2 text-sm leading-relaxed text-ph-ink outline-none focus-visible:border-[var(--ph-selected-border)] focus-visible:shadow-[var(--ph-focus-halo)]"
                       />
                       <div className="flex justify-end gap-2">
                         <button
@@ -629,7 +691,7 @@ export function SuiteAiPanel({
                             setEditingIndex(null);
                             setEditDraft("");
                           }}
-                          className="inline-flex min-h-8 items-center 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"
+                          className="ph-btn ph-btn-secondary ph-btn-xs"
                         >
                           Cancel
                         </button>
@@ -638,7 +700,7 @@ export function SuiteAiPanel({
                           data-test="ask-ai-edit-save"
                           disabled={!editDraft.trim() || waiting}
                           onClick={() => void saveEdit(index)}
-                          className="inline-flex min-h-8 items-center rounded-lg bg-ph-brand px-2.5 text-xs font-medium 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"
+                          className="ph-btn ph-btn-primary ph-btn-xs"
                         >
                           Save
                         </button>
@@ -658,12 +720,14 @@ export function SuiteAiPanel({
                       <div className="mb-0.5 flex items-center gap-0.5 opacity-100 transition-opacity [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-focus-within:opacity-100 [@media(hover:hover)]:group-hover:opacity-100">
                         <button
                           type="button"
-                          onClick={() => void handleCopy(index, message.content)}
+                          onClick={() =>
+                            void handleCopy(index, message.content)
+                          }
                           aria-label={
                             copiedIndex === index ? "Copied" : "Copy message"
                           }
                           data-test="ask-ai-copy"
-                          className="flex h-7 w-7 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-focus"
+                          className="ph-btn ph-btn-ghost ph-btn-square ph-btn-xs h-7 w-7 text-ph-mutedtext"
                         >
                           {copiedIndex === index ? (
                             <Check className="h-3.5 w-3.5" />
@@ -679,7 +743,7 @@ export function SuiteAiPanel({
                           }}
                           aria-label="Edit message"
                           data-test="ask-ai-edit"
-                          className="flex h-7 w-7 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-focus"
+                          className="ph-btn ph-btn-ghost ph-btn-square ph-btn-xs h-7 w-7 text-ph-mutedtext"
                         >
                           <EditPencil className="h-3.5 w-3.5" />
                         </button>
@@ -727,17 +791,105 @@ export function SuiteAiPanel({
                       key={action.id}
                       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"
+                      className="rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface px-3 py-2 text-sm text-ph-ink"
                     >
                       <p className="font-medium">{action.summary}</p>
+                      {action.payload && action.kind.startsWith("propose_") ? (
+                        <details
+                          className="mt-2"
+                          data-test="ask-ai-workflow-preview"
+                        >
+                          <summary className="cursor-pointer rounded text-xs text-ph-brand focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">
+                            Review proposed content and evidence
+                          </summary>
+                          {typeof action.payload.before === "string" ? (
+                            <div className="mt-2">
+                              <p className="text-xs font-medium text-ph-subtle">
+                                Current description
+                              </p>
+                              <pre className="mt-1 max-h-48 overflow-auto whitespace-pre-wrap break-words text-xs">
+                                {action.payload.before}
+                              </pre>
+                            </div>
+                          ) : null}
+                          <div className="mt-2">
+                            <p className="text-xs font-medium text-ph-subtle">
+                              Proposed draft
+                            </p>
+                            <pre className="mt-1 max-h-80 overflow-auto whitespace-pre-wrap break-words text-xs">
+                              {String(
+                                action.payload.body ??
+                                  action.payload.description ??
+                                  JSON.stringify(
+                                    action.payload.tasks ?? action.payload,
+                                    null,
+                                    2,
+                                  ),
+                              )}
+                            </pre>
+                          </div>
+                          <pre className="mt-2 max-h-40 overflow-auto whitespace-pre-wrap break-words text-xs text-ph-subtle">
+                            {JSON.stringify(
+                              action.kind === "propose_project_handover"
+                                ? {
+                                    project_id: action.payload.project_id,
+                                    sources: action.payload.sources,
+                                    task_versions: action.payload.task_versions,
+                                  }
+                                : action.kind === "propose_requirement_update"
+                                  ? {
+                                      source_url: action.payload.source_url,
+                                      document_revision:
+                                        action.payload.document_revision,
+                                      task_updated_at:
+                                        action.payload.task_updated_at,
+                                    }
+                                  : Object.fromEntries(
+                                      Object.entries(action.payload).filter(
+                                        ([key]) =>
+                                          ![
+                                            "body",
+                                            "description",
+                                            "before",
+                                            "tasks",
+                                          ].includes(key),
+                                      ),
+                                    ),
+                              null,
+                              2,
+                            )}
+                          </pre>
+                        </details>
+                      ) : null}
                       {action.status === "proposed" ? (
                         <div className="mt-2 flex flex-wrap gap-2">
+                          {suiteAiDraftFields(action.kind, action.payload) ? (
+                            <button
+                              type="button"
+                              className="ph-btn ph-btn-secondary ph-btn-xs"
+                              onClick={() =>
+                                setActionDrafts((drafts) => ({
+                                  ...drafts,
+                                  [action.id]:
+                                    drafts[action.id] ??
+                                    suiteAiDraftFields(
+                                      action.kind,
+                                      action.payload,
+                                    )!,
+                                }))
+                              }
+                            >
+                              Edit draft
+                            </button>
+                          ) : null}
                           <button
                             type="button"
                             data-test="ask-ai-action-confirm"
                             disabled={Boolean(resolvingId) || !resolveAction}
-                            onClick={() => void handleResolve(action.id, "confirm")}
-                            className="inline-flex min-h-8 items-center rounded-lg bg-ph-brand px-2.5 text-xs font-medium 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"
+                            onClick={() =>
+                              void handleResolve(action, "confirm")
+                            }
+                            className="ph-btn ph-btn-primary ph-btn-xs"
                           >
                             {resolvingId === action.id ? "Working…" : "Confirm"}
                           </button>
@@ -745,13 +897,29 @@ export function SuiteAiPanel({
                             type="button"
                             data-test="ask-ai-action-cancel"
                             disabled={Boolean(resolvingId) || !resolveAction}
-                            onClick={() => void handleResolve(action.id, "cancel")}
-                            className="inline-flex min-h-8 items-center 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"
+                            onClick={() =>
+                              void handleResolve(action, "cancel")
+                            }
+                            className="ph-btn ph-btn-secondary ph-btn-xs"
                           >
                             Cancel
                           </button>
                         </div>
                       ) : null}
+                      {action.status === "proposed" &&
+                      actionDrafts[action.id] ? (
+                        <SuiteAiDraftEditor
+                          kind={action.kind}
+                          draft={actionDrafts[action.id]}
+                          canAddTasks={Boolean(action.payload?.project_id)}
+                          onChange={(draft) =>
+                            setActionDrafts((drafts) => ({
+                              ...drafts,
+                              [action.id]: draft,
+                            }))
+                          }
+                        />
+                      ) : null}
                       {action.status === "applied" ? (
                         <p className="mt-1 text-xs text-ph-subtle">
                           Done
@@ -805,17 +973,19 @@ export function SuiteAiPanel({
           {error ? (
             <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"
+              className="flex items-start gap-2 rounded-[var(--ph-radius-surface)] border border-ph-danger/30 bg-ph-danger/10 px-3 py-2.5 text-sm text-ph-ink"
             >
               <WarningTriangle className="mt-0.5 h-4 w-4 shrink-0 text-ph-danger" />
               <div className="min-w-0 flex-1">
-                <p className="font-medium text-ph-danger">Something went wrong</p>
+                <p className="font-medium text-ph-danger">
+                  Something went wrong
+                </p>
                 <p className="mt-0.5 text-ph-subtle">{error}</p>
                 <button
                   type="button"
                   onClick={retry}
                   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"
+                  className="ph-btn ph-btn-secondary ph-btn-xs mt-2 gap-1.5"
                 >
                   Try again
                 </button>
@@ -830,7 +1000,7 @@ export function SuiteAiPanel({
               <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"
+                className="ph-btn ph-btn-ghost ph-btn-circle h-9 w-9 border border-ph-border bg-ph-surface text-ph-subtle shadow-[var(--ph-shadow-floating)]"
                 aria-label="Scroll to latest"
               >
                 <ArrowDown className="h-4 w-4" />
@@ -841,7 +1011,7 @@ export function SuiteAiPanel({
       </div>
 
       <div className="px-2 pt-2 pb-[max(2rem,calc(env(safe-area-inset-bottom)+1rem))]">
-        <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">
+        <div className="suite-ai-composer flex items-end gap-1.5 border bg-ph-surface px-1.5 py-1">
           <label htmlFor={inputId} className="sr-only">
             Ask a question
           </label>
@@ -871,7 +1041,7 @@ export function SuiteAiPanel({
                 type="button"
                 onClick={stop}
                 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"
+                className="ph-btn ph-btn-ghost ph-btn-circle h-9 w-9 shrink-0 bg-ph-muted text-ph-ink"
                 aria-label="Stop generating"
               >
                 <Square className="h-3.5 w-3.5 fill-current" />
@@ -884,7 +1054,7 @@ export function SuiteAiPanel({
                 onClick={() => void ask(prompt)}
                 disabled={!prompt.trim()}
                 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"
+                className="ph-btn ph-btn-primary ph-btn-circle h-9 w-9 shrink-0"
                 aria-label="Send message"
               >
                 <ArrowUp className="h-4 w-4" />

package/src/suite/components/app-switcher.tsx

@@ -5,6 +5,7 @@ import { useState, type ReactNode } from "react";
 import { NavArrowDown as ChevronDown, OpenNewWindow } from "iconoir-react";
 
 import { cn } from "../lib/cn";
+import { trackSuiteEvent } from "../../lib/suite-analytics";
 import type {
   SuiteDropdownItemComponent,
   SuiteDropdownMenuComponent,
@@ -12,20 +13,20 @@ import type {
 
 export function appSwitcherTriggerClass(open: boolean, collapsed = false) {
   return cn(
-    "group flex min-w-0 items-center gap-2 rounded-lg border px-2 py-1.5 text-left transition-all duration-200",
+    "group flex min-w-0 items-center gap-2 rounded-[var(--ph-radius-control)] border px-2 py-1.5 text-left transition-[color,background-color,border-color,box-shadow] duration-150",
     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",
+      ? "border-[var(--ph-selected-border)] bg-[var(--ph-selected-bg)] shadow-[var(--ph-shadow-control)]"
+      : "border-transparent hover:border-ph-border hover:bg-[var(--ph-surface-hover)]",
   );
 }
 
 export function appSwitcherMarkClass() {
-  return "h-8 w-8 shrink-0 rounded-lg";
+  return "h-8 w-8 shrink-0 rounded-[var(--ph-radius-control)]";
 }
 
 export function appSwitcherMenuItemClass() {
-  return "rounded-lg px-2 py-2 data-[highlighted]:bg-transparent hover:bg-ph-muted/80 focus-visible:shadow-none";
+  return "px-2 py-2";
 }
 
 export function AppSwitcherMark({
@@ -58,7 +59,7 @@ export function AppSwitcherChevron({
     return (
       <span
         className={cn(
-          "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",
+          "absolute bottom-0 right-0 flex h-3 w-3 items-center justify-center rounded-full border border-ph-border bg-ph-surface transition-colors",
           open && "border-ph-brand/40 bg-ph-brand/10",
         )}
         aria-hidden
@@ -76,7 +77,7 @@ export function AppSwitcherChevron({
   return (
     <span
       className={cn(
-        "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",
+        "border-ph-border/80 flex h-5 w-5 shrink-0 items-center justify-center rounded-[var(--ph-radius-control)] border bg-ph-canvas transition-[color,background-color,border-color] duration-150",
         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",
@@ -160,7 +161,7 @@ export function AppSwitcher({
       }
     >
       <div id="app-switcher-menu" className="p-1" data-test="app-switcher-menu">
-        <p className="px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-ph-mutedtext">
+        <p className="px-3 py-2 text-[length:var(--ph-type-overline)] font-semibold uppercase tracking-[0.08em] text-ph-mutedtext">
           Switch application
         </p>
         {apps
@@ -173,6 +174,12 @@ export function AppSwitcher({
                 onMouseDown={(e) => e.preventDefault()}
                 onClick={() => {
                   setOpen(false);
+                  trackSuiteEvent('App Launched', {
+                    target_app: app.slug,
+                    from_app: currentApp,
+                    new_tab: false,
+                    origin: 'app_switcher',
+                  });
                   onSelect(app);
                 }}
                 className={cn(appSwitcherMenuItemClass(), "pr-11")}
@@ -202,9 +209,15 @@ export function AppSwitcher({
                 onMouseDown={(e) => e.preventDefault()}
                 onClick={() => {
                   setOpen(false);
+                  trackSuiteEvent('App Launched', {
+                    target_app: app.slug,
+                    from_app: currentApp,
+                    new_tab: true,
+                    origin: 'app_switcher',
+                  });
                   onSelect(app, { newTab: 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"
+                className="absolute right-1.5 top-1/2 z-[1] flex h-8 -translate-y-1/2 justify-center p-0 text-ph-mutedtext"
                 style={{ width: "2rem" }}
               >
                 <OpenNewWindow className="h-4 w-4" aria-hidden="true" />

package/src/suite/components/command-palette-host.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
+import { trackSuiteEvent } from "../../lib/suite-analytics";
 import type {
   SuiteCommandItem,
   SuiteCommandPaletteComponent,
@@ -45,6 +46,23 @@ export function CommandPaletteHost({
 }) {
   const [open, setOpen] = useState(false);
 
+  // Wrap selection so a palette pick reports the chosen action. Apps own the
+  // item list, so the id is the most stable `target` available here.
+  const trackedItems = useMemo<SuiteCommandItem[]>(
+    () =>
+      items.map((item) => ({
+        ...item,
+        onSelect: () => {
+          trackSuiteEvent("Command Palette Action", {
+            action_kind: "command",
+            target: item.id,
+          });
+          item.onSelect();
+        },
+      })),
+    [items],
+  );
+
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       if (!((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k")) return;
@@ -61,7 +79,7 @@ export function CommandPaletteHost({
 
   return (
     <CommandPalette
-      items={items}
+      items={trackedItems}
       isOpen={open}
       onClose={() => setOpen(false)}
       placeholder={placeholder}

package/src/suite/components/suite-app-layout.tsx

@@ -59,7 +59,7 @@ export function SuiteAppLayout({
     >
       <aside
         aria-label="Sidebar"
-        className="relative hidden shrink-0 flex-col overflow-visible border-r border-ph-border ease-out lg:flex"
+        className="suite-app-layout__sidebar relative hidden shrink-0 flex-col overflow-visible border-r ease-out lg:flex"
         style={{ width: `${sidebarWidth}px` }}
         data-collapsed={collapsed ? "true" : "false"}
       >
@@ -81,7 +81,10 @@ export function SuiteAppLayout({
             onKeyDown={(event) => {
               if (event.key === "Home") {
                 event.preventDefault();
-                onResetWidth?.();
+                onResizeBy?.(SIDEBAR_RAIL_WIDTH - sidebarWidth);
+              } else if (event.key === "End") {
+                event.preventDefault();
+                onResizeBy?.(SIDEBAR_MAX_WIDTH - sidebarWidth);
               } else if (event.key === "ArrowLeft") {
                 event.preventDefault();
                 onResizeBy?.(-16);
@@ -90,7 +93,7 @@ export function SuiteAppLayout({
                 onResizeBy?.(16);
               }
             }}
-            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)]"
+            className="suite-sidebar-resize-handle absolute inset-y-0 right-0 z-20 w-2 cursor-col-resize touch-none before:absolute before:-left-2 before:-right-2 before:inset-y-0 before:content-['']"
           />
         ) : null}
       </aside>
@@ -104,7 +107,7 @@ export function SuiteAppLayout({
           tabIndex={0}
           data-lock-scroll={lockMainScroll ? "true" : undefined}
           className={cn(
-            "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",
+            "flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden overscroll-contain bg-ph-canvas focus:outline-none",
             "suite-app-layout__main",
             lockMainScroll ? "overflow-hidden" : "overflow-y-auto",
           )}

package/src/suite/components/suite-bottom-nav.tsx

@@ -89,7 +89,7 @@ export function SuiteBottomNav({
               }
               aria-current={active ? "page" : undefined}
               className={cn(
-                "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",
+                "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-[length:var(--ph-type-overline)] font-medium leading-none text-ph-mutedtext transition-colors duration-200 focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_3px_color-mix(in_oklab,var(--ph-focus-ring)_30%,transparent)] motion-reduce:transition-none",
                 active && "font-semibold text-ph-brand",
               )}
             >