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

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

@@ -166,6 +166,7 @@ export function SuiteAiPanel({
   onSwitchApp,
   onSameAppNavigate,
   resolveAction,
+  isWaitingForReply = false,
 }: {
   presets?: SuiteAiPreset[];
   emptyState?: ReactNode;
@@ -173,6 +174,7 @@ export function SuiteAiPanel({
   fetchChat: () => Promise<{
     messages: SuiteAiChatMessage[];
     configured: boolean;
+    jobs?: Array<{ status?: string; error?: string }>;
   }>;
   sendMessage: (params: {
     prompt: string;
@@ -193,6 +195,8 @@ export function SuiteAiPanel({
     id: string,
     decision: "confirm" | "cancel",
   ) => Promise<{ messages: SuiteAiChatMessage[] }>;
+  /** A durable background job is still preparing the assistant reply. */
+  isWaitingForReply?: boolean;
 }) {
   const inputId = useId();
   const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
@@ -216,6 +220,7 @@ export function SuiteAiPanel({
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const abortRef = useRef<AbortController | null>(null);
   const pendingPromptRef = useRef<string | null>(null);
+  const waiting = loading || isWaitingForReply;
 
   useEffect(() => {
     function onOpen(event: Event) {
@@ -253,6 +258,16 @@ export function SuiteAiPanel({
       setMessages(data.messages ?? []);
       if (!data.configured) {
         setError("ShellStack AI is not configured for this workspace yet.");
+      } else {
+        const latestJob = data.jobs?.[0];
+        if (
+          latestJob?.status === "failed" &&
+          latestJob.error &&
+          latestJob.error !== "Chat cleared." &&
+          data.messages.at(-1)?.role !== "assistant"
+        ) {
+          setError(latestJob.error);
+        }
       }
     } catch (err) {
       setError(
@@ -276,7 +291,7 @@ export function SuiteAiPanel({
 
   useEffect(() => {
     if (open && atBottom) scrollToBottom();
-  }, [messages, loading, open, atBottom, scrollToBottom]);
+  }, [messages, waiting, open, atBottom, scrollToBottom]);
 
   useEffect(() => {
     if (open && !hydrating) textareaRef.current?.focus();
@@ -291,7 +306,7 @@ export function SuiteAiPanel({
 
   async function ask(text: string) {
     const trimmed = text.trim();
-    if (!trimmed || loading) return;
+    if (!trimmed || waiting) return;
     const controller = new AbortController();
     abortRef.current = controller;
     setLoading(true);
@@ -424,7 +439,7 @@ export function SuiteAiPanel({
           <button
             type="button"
             onClick={() => void handleClear()}
-            disabled={loading}
+            disabled={waiting}
             className="ml-auto inline-flex h-9 items-center gap-1.5 rounded-lg px-2 text-xs font-medium text-ph-subtle transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40"
             data-test="ask-ai-clear"
           >
@@ -469,7 +484,7 @@ export function SuiteAiPanel({
                       key={preset.label}
                       type="button"
                       onClick={() => void ask(preset.prompt)}
-                      disabled={loading || hydrating}
+                      disabled={waiting || hydrating}
                       className="group flex w-full items-center gap-2 rounded-xl border border-ph-border bg-ph-surface px-3 py-2 text-left text-sm text-ph-ink transition-colors hover:border-ph-brand/40 hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40"
                     >
                       <Sparks className="h-4 w-4 shrink-0 text-ph-brand" />
@@ -515,9 +530,16 @@ 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={
-                        <p className="whitespace-pre-wrap break-words">
-                          {message.content}
-                        </p>
+                        <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>
                       }
                     >
                       <SuiteAiBlockNoteMessage markdown={message.content} />
@@ -584,7 +606,7 @@ export function SuiteAiPanel({
             );
           })}
 
-          {loading ? (
+          {waiting ? (
             <div className="flex items-end gap-2" aria-hidden>
               <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">
                 <Icon className="h-3.5 w-3.5" />
@@ -597,7 +619,7 @@ export function SuiteAiPanel({
             </div>
           ) : null}
 
-          {loading ? (
+          {waiting ? (
             <span className="sr-only" aria-live="polite">
               Assistant is responding…
             </span>
@@ -615,7 +637,7 @@ export function SuiteAiPanel({
                 <button
                   type="button"
                   onClick={retry}
-                  disabled={loading}
+                  disabled={waiting}
                   className="mt-2 inline-flex min-h-8 items-center gap-1.5 rounded-lg border border-ph-border bg-ph-surface px-2.5 text-xs font-medium text-ph-ink transition-colors hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40"
                 >
                   Try again
@@ -678,6 +700,15 @@ export function SuiteAiPanel({
                 <Square className="h-3.5 w-3.5 fill-current" />
               </button>
             </Tooltip>
+          ) : isWaitingForReply ? (
+            <span
+              className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-ph-muted text-ph-subtle"
+              data-test="ask-ai-waiting"
+              role="status"
+              aria-label="Shelly is responding"
+            >
+              <Spinner className="h-4 w-4 animate-spin" />
+            </span>
           ) : (
             <Tooltip content="Send message">
               <button

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

@@ -4,7 +4,10 @@ import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
 vi.mock("next/image", () => ({
-  default: (props: ComponentPropsWithoutRef<"img">) => <img {...props} />,
+  default: ({ alt = "", ...props }: ComponentPropsWithoutRef<"img">) => (
+    // eslint-disable-next-line @next/next/no-img-element -- this is the next/image test double.
+    <img alt={alt} {...props} />
+  ),
 }));
 
 import { AppSwitcher, type SuiteAppEntry } from "./app-switcher";
@@ -28,10 +31,10 @@ const APPS: SuiteAppEntry[] = [
     icon: "/kraken.svg",
   },
   {
-    slug: "nakama",
-    name: "Nakama",
+    slug: "shelly",
+    name: "Shelly",
     description: "AI teammates",
-    icon: "/nakama.svg",
+    icon: "/shelly.svg",
   },
 ];
 
@@ -56,7 +59,11 @@ function TestDropdownItem({
   children,
   ...props
 }: ComponentPropsWithoutRef<"button">) {
-  return <button {...props}>{children}</button>;
+  return (
+    <button data-dropdown-item="true" {...props}>
+      {children}
+    </button>
+  );
 }
 
 describe("AppSwitcher", () => {
@@ -85,12 +92,20 @@ describe("AppSwitcher", () => {
     const newTabButton = screen.getByRole("button", {
       name: "Open Kraken in a new tab",
     });
-    expect(newTabButton).toHaveClass("absolute", "h-8", "w-8");
+    expect(newTabButton).toHaveClass("absolute", "h-8");
+    expect(newTabButton).toHaveStyle({ width: "2rem" });
+    expect(newTabButton).toHaveAttribute("data-dropdown-item", "true");
     expect(
       screen.queryByRole("button", { name: "Open Tides in a new tab" }),
     ).not.toBeInTheDocument();
 
     await user.click(newTabButton);
     expect(onSelect).toHaveBeenCalledWith(APPS[2], { newTab: true });
+
+    onSelect.mockClear();
+    await user.click(
+      document.querySelector("[data-test='switch-app-kraken']") as HTMLElement,
+    );
+    expect(onSelect).toHaveBeenCalledWith(APPS[2]);
   });
 });

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

@@ -2,10 +2,7 @@
 
 import Image from "next/image";
 import { useState, type ReactNode } from "react";
-import {
-  NavArrowDown as ChevronDown,
-  OpenNewWindow,
-} from "iconoir-react";
+import { NavArrowDown as ChevronDown, OpenNewWindow } from "iconoir-react";
 
 import { cn } from "../lib/cn";
 import type {
@@ -24,11 +21,11 @@ export function appSwitcherTriggerClass(open: boolean, collapsed = false) {
 }
 
 export function appSwitcherMarkClass() {
-  return "h-8 w-8 shrink-0 rounded-lg shadow-[0_1px_2px_rgba(0,0,0,0.1),0_4px_12px_rgba(0,0,0,0.08)] ring-1 ring-black/[0.06]";
+  return "h-8 w-8 shrink-0 rounded-lg";
 }
 
 export function appSwitcherMenuItemClass() {
-  return "rounded-lg px-2 py-2 data-[highlighted]:bg-transparent hover:bg-ph-muted/80";
+  return "rounded-lg px-2 py-2 data-[highlighted]:bg-transparent hover:bg-ph-muted/80 focus-visible:shadow-none";
 }
 
 export function AppSwitcherMark({
@@ -152,7 +149,6 @@ export function AppSwitcher({
         <span
           className={appSwitcherTriggerClass(open, collapsed)}
           data-test="app-switcher-trigger"
-          aria-expanded={open}
         >
           <AppSwitcherMark collapsed={collapsed}>
             {mark}
@@ -199,8 +195,7 @@ export function AppSwitcher({
                   </span>
                 </span>
               </DropdownItem>
-              <button
-                type="button"
+              <DropdownItem
                 id={`switch-app-${app.slug}-new-tab`}
                 data-test={`switch-app-${app.slug}-new-tab`}
                 aria-label={`Open ${app.name} in a new tab`}
@@ -209,10 +204,11 @@ export function AppSwitcher({
                   setOpen(false);
                   onSelect(app, { newTab: true });
                 }}
-                className="absolute right-1.5 top-1/2 z-[1] flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-md text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ph-brand/35"
+                className="absolute right-1.5 top-1/2 z-[1] flex h-8 -translate-y-1/2 justify-center rounded-md p-0 text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:shadow-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ph-brand/35"
+                style={{ width: "2rem" }}
               >
                 <OpenNewWindow className="h-4 w-4" aria-hidden="true" />
-              </button>
+              </DropdownItem>
             </div>
           ))}
       </div>

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

@@ -3,6 +3,10 @@
 import { type ReactNode, type PointerEvent } from "react";
 
 import { cn } from "../lib/cn";
+import {
+  SIDEBAR_MAX_WIDTH,
+  SIDEBAR_RAIL_WIDTH,
+} from "../lib/use-sidebar-width";
 
 export interface SuiteAppLayoutProps {
   sidebar: ReactNode;
@@ -54,6 +58,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"
         style={{ width: `${sidebarWidth}px` }}
         data-collapsed={collapsed ? "true" : "false"}
@@ -65,6 +70,10 @@ export function SuiteAppLayout({
             role="separator"
             aria-orientation="vertical"
             aria-label="Resize sidebar"
+            aria-valuenow={sidebarWidth}
+            aria-valuemin={SIDEBAR_RAIL_WIDTH}
+            aria-valuemax={SIDEBAR_MAX_WIDTH}
+            aria-valuetext={`${sidebarWidth} pixels`}
             data-test="sidebar-resize-handle"
             tabIndex={onResizeBy ? 0 : undefined}
             onPointerDown={onStartResize}
@@ -81,7 +90,7 @@ export function SuiteAppLayout({
                 onResizeBy?.(16);
               }
             }}
-            className="absolute inset-y-0 right-0 z-20 w-2 cursor-col-resize touch-none transition-colors hover:bg-[color-mix(in_oklab,var(--ph-accent)_30%,transparent)]"
+            className="absolute inset-y-0 right-0 z-20 w-2 cursor-col-resize touch-none transition-colors before:absolute before:-left-2 before:-right-2 before:inset-y-0 before:content-[''] hover:bg-[color-mix(in_oklab,var(--ph-accent)_30%,transparent)]"
           />
         ) : null}
       </aside>
@@ -92,10 +101,10 @@ export function SuiteAppLayout({
         ) : null}
         <main
           id="main-content"
-          tabIndex={-1}
+          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",
+            "flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden overscroll-contain bg-ph-canvas focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ph-focus",
             "suite-app-layout__main",
             lockMainScroll ? "overflow-hidden" : "overflow-y-auto",
           )}

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

@@ -40,7 +40,6 @@ export function SuiteBottomNav({
   className?: string;
 }) {
   if (process.env.NODE_ENV !== "production" && items.length > 5) {
-    // eslint-disable-next-line no-console
     console.warn(
       `SuiteBottomNav: ${items.length} items — bottom nav should have at most 5 (Hick's Law).`,
     );

package/src/suite/components/suite-clients-projects-directory.test.tsx

@@ -0,0 +1,71 @@
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { SuiteClientsProjectsDirectory } from "@/suite/components/suite-clients-projects-directory";
+
+describe("SuiteClientsProjectsDirectory", () => {
+  afterEach(cleanup);
+
+  it("uses roving focus and arrow keys for the icon radiogroup", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <SuiteClientsProjectsDirectory
+        clients={[]}
+        projects={[]}
+        canEdit
+        onCreateClient={vi.fn()}
+      />,
+    );
+
+    await user.click(screen.getByRole("button", { name: "New client" }));
+    const castle = screen.getByRole("radio", { name: "Castle" });
+    const castleFlag = screen.getByRole("radio", { name: "Castle flag" });
+
+    expect(castle).toHaveAttribute("tabindex", "0");
+    expect(castleFlag).toHaveAttribute("tabindex", "-1");
+
+    castle.focus();
+    await user.keyboard("{ArrowRight}");
+    expect(castleFlag).toHaveAttribute("aria-checked", "true");
+    expect(castleFlag).toHaveFocus();
+
+    await user.keyboard("{Home}");
+    expect(screen.getByRole("radio", { name: "Arena" })).toHaveFocus();
+  });
+
+  it("moves focus between the mobile client list and detail view", async () => {
+    const user = userEvent.setup();
+    const originalMatchMedia = window.matchMedia;
+    Object.defineProperty(window, "matchMedia", {
+      configurable: true,
+      value: vi.fn().mockReturnValue({ matches: true }),
+    });
+
+    try {
+      render(
+        <SuiteClientsProjectsDirectory
+          clients={[{ id: "acme", name: "Acme" }]}
+          projects={[]}
+        />,
+      );
+
+      await user.click(screen.getByRole("option", { name: /Acme/ }));
+      await waitFor(() =>
+        expect(
+          screen.getByRole("button", { name: "Back to clients" }),
+        ).toHaveFocus(),
+      );
+
+      await user.click(screen.getByRole("button", { name: "Back to clients" }));
+      await waitFor(() =>
+        expect(screen.getByRole("option", { name: /Acme/ })).toHaveFocus(),
+      );
+    } finally {
+      Object.defineProperty(window, "matchMedia", {
+        configurable: true,
+        value: originalMatchMedia,
+      });
+    }
+  });
+});