feat(demo): 'it's agents all the way down' scripted animation + Library as a toggleable panel

apps/mesh/src/web/components/account-popover.tsx

@@ -20,78 +20,34 @@ import {
 import { cn } from "@deco/ui/lib/utils.ts";
 import { useIsMobile } from "@deco/ui/hooks/use-mobile.ts";
 import {
-  Check,
   Copy01,
   Download01,
   File06,
   Globe01,
   LogOut01,
   Monitor01,
   Moon01,
-  Plus,
-  SearchMd,
   Settings02,
   Shield01,
   Sun,
   Users03,
   VolumeMax,
   VolumeX,
-  XClose,
 } from "@untitledui/icons";
 import { GitHubIcon } from "@daveyplate/better-auth-ui";
 import { SidebarMenuButton } from "@deco/ui/components/sidebar.tsx";
-import { authClient, useActiveOrganizations } from "@/web/lib/auth-client";
+import { authClient } from "@/web/lib/auth-client";
 import { useProjectContext } from "@decocms/mesh-sdk";
 import { track } from "@/web/lib/posthog-client";
 import { clearPersistedQueryCache } from "@/web/lib/query-persist";
 import { CreateOrganizationDialog } from "@/web/components/create-organization-dialog";
+import {
+  getOrgColorStyle,
+  OrganizationsPanel,
+} from "@/web/components/header/org-switcher";
 import { usePreferences, type ThemeMode } from "@/web/hooks/use-preferences.ts";
 import { toast } from "@deco/ui/components/sonner.js";
 
-function getOrgColorStyle(name: string): {
-  backgroundColor: string;
-  color: string;
-} {
-  let hash = 0;
-  for (let i = 0; i < name.length; i++) {
-    hash = name.charCodeAt(i) + ((hash << 5) - hash);
-  }
-  const h = Math.abs(hash) % 360;
-  return {
-    backgroundColor: `hsl(${h} 55% 70%)`,
-    color: `hsl(${h} 55% 20%)`,
-  };
-}
-
-function OrgIcon({
-  org,
-  size = "sm",
-}: {
-  org: { name: string; logo?: string | null };
-  size?: "xs" | "sm";
-}) {
-  const sizeClass = size === "xs" ? "size-5" : "size-6";
-  const textClass = size === "xs" ? "text-[9px]" : "text-xs";
-
-  return (
-    <div
-      className={cn(
-        sizeClass,
-        "shrink-0 rounded-md flex items-center justify-center border border-border/50 overflow-hidden",
-      )}
-      style={org.logo ? undefined : getOrgColorStyle(org.name)}
-    >
-      {org.logo ? (
-        <img src={org.logo} alt="" className="size-full object-cover" />
-      ) : (
-        <span className={cn("font-semibold leading-none", textClass)}>
-          {org.name.slice(0, 2).toUpperCase()}
-        </span>
-      )}
-    </div>
-  );
-}
-
 interface MenuItem {
   key: string;
   label: string;
@@ -141,112 +97,6 @@ function MenuItemButton({
   );
 }
 
-function OrganizationsPanel({
-  orgParam,
-  onSelectOrg,
-  onCreateOrg,
-}: {
-  orgParam?: string;
-  onSelectOrg: (slug: string) => void;
-  onCreateOrg: () => void;
-}) {
-  // Fetched here, not in the parent: this panel only mounts inside the open
-  // popover/drawer, so the (potentially large) organization.list call is
-  // deferred until the switcher is actually opened — it no longer fires on
-  // every page load.
-  const { data: organizations } = useActiveOrganizations();
-  const sortedOrgs = [...(organizations ?? [])].sort((a, b) => {
-    if (a.slug === orgParam) return -1;
-    if (b.slug === orgParam) return 1;
-    return a.name.localeCompare(b.name);
-  });
-
-  const [searchOpen, setSearchOpen] = useState(false);
-  const [query, setQuery] = useState("");
-
-  const q = query.toLowerCase();
-  const filtered = q
-    ? sortedOrgs.filter(
-        (o) =>
-          o.name.toLowerCase().includes(q) || o.slug.toLowerCase().includes(q),
-      )
-    : sortedOrgs;
-
-  const iconBtnClass =
-    "flex items-center justify-center size-7 rounded-md text-muted-foreground hover:bg-accent/50 hover:text-foreground transition-colors";
-
-  function toggleSearch() {
-    if (searchOpen) setQuery("");
-    setSearchOpen((prev) => !prev);
-  }
-
-  return (
-    <>
-      <div className="flex items-center justify-between px-4 py-3">
-        {searchOpen ? (
-          <input
-            autoFocus
-            type="text"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            onKeyDown={(e) => e.key === "Escape" && toggleSearch()}
-            placeholder="Search organizations..."
-            className="flex-1 min-w-0 bg-transparent text-sm outline-none placeholder:text-muted-foreground/60"
-          />
-        ) : (
-          <span className="text-sm font-medium text-muted-foreground/60">
-            Your Organizations
-          </span>
-        )}
-        <div className="flex items-center gap-1 shrink-0">
-          <button type="button" onClick={toggleSearch} className={iconBtnClass}>
-            {searchOpen ? <XClose size={16} /> : <SearchMd size={16} />}
-          </button>
-          <button type="button" onClick={onCreateOrg} className={iconBtnClass}>
-            <Plus size={16} />
-          </button>
-        </div>
-      </div>
-      <div className="flex-1 min-h-0 overflow-y-auto p-1.5 flex flex-col gap-1">
-        {filtered.length === 0 && (
-          <p className="px-3 py-4 text-sm text-muted-foreground/60 text-center">
-            {query
-              ? `No organizations match "${query}"`
-              : "No organizations available"}
-          </p>
-        )}
-        {filtered.map((org) => (
-          <button
-            key={org.id}
-            type="button"
-            onClick={() => onSelectOrg(org.slug)}
-            className={cn(
-              "flex items-center gap-3 px-3 py-2.5 rounded-md text-sm text-left w-full transition-colors",
-              org.slug === orgParam
-                ? "bg-accent text-accent-foreground"
-                : "text-foreground hover:bg-accent/50",
-            )}
-          >
-            <OrgIcon org={org} size="sm" />
-            <div className="flex-1 min-w-0">
-              <p className="text-sm font-medium truncate">{org.name}</p>
-              <p className="text-xs text-muted-foreground truncate">
-                {org.slug}
-              </p>
-            </div>
-            {org.slug === orgParam && (
-              <Check
-                size={14}
-                className="ml-auto text-muted-foreground shrink-0"
-              />
-            )}
-          </button>
-        ))}
-      </div>
-    </>
-  );
-}
-
 /** Shared content rendered inside popover (desktop) or drawer (mobile) */
 function AccountPopoverContent({
   user,

apps/mesh/src/web/components/chat/chat-context.tsx

@@ -370,6 +370,13 @@ interface TaskProviderInternals {
 // ============================================================================
 
 const ChatStreamCtx = createContext<ChatStreamContextValue | null>(null);
+/**
+ * Exposed so Demo Mode (`web/demo/`) can supply a scripted `ChatStreamContextValue`
+ * directly — feeding the real chat renderers a recorded stream without the live
+ * `ActiveTaskProvider` (MCP transport, SSE, etc.). Not for app use; prefer the
+ * hooks. See `web/demo/demo-chat-stream.tsx`.
+ */
+export { ChatStreamCtx as DemoChatStreamContext };
 const ChatTaskCtx = createContext<ChatTaskContextValue | null>(null);
 const ChatPrefsCtx = createContext<ChatPrefsContextValue | null>(null);
 

apps/mesh/src/web/components/chat/message/assistant.tsx

@@ -10,6 +10,7 @@ import {
 import type { ToolUIPart } from "ai";
 import { type ReactNode, Suspense, useEffect, useState } from "react";
 import { ToolCallShell } from "./parts/tool-call-part/common.tsx";
+import { getPartRenderer as getExtraPartRenderer } from "./parts/extra-part-renderers.ts";
 import type { ChatMessage } from "../types.ts";
 import { MessageStatsBar } from "../usage-stats.tsx";
 import { MessageTextPart } from "./parts/text-part.tsx";
@@ -517,6 +518,11 @@ function MessagePart({
   const getSubtaskMeta = (toolCallId: string) =>
     dataParts.toolSubtaskMetadata.get(toolCallId);
 
+  // Custom part renderers (e.g. Demo Mode) take precedence over the built-in
+  // switch. Empty registry in normal use — see extra-part-renderers.ts.
+  const extraRenderer = getExtraPartRenderer(part.type);
+  if (extraRenderer) return <>{extraRenderer(part as { type: string })}</>;
+
   switch (part.type) {
     case "dynamic-tool":
       return (

apps/mesh/src/web/components/chat/message/parts/extra-part-renderers.ts

@@ -0,0 +1,21 @@
+/**
+ * Tiny extension point for rendering custom message parts inline in the chat.
+ *
+ * The core renderer (`message/assistant.tsx`) consults this registry before its
+ * built-in switch, so non-core surfaces (e.g. Demo Mode) can render their own
+ * part types in the real chat flow WITHOUT the core importing them. The registry
+ * is empty in normal use; a consumer registers a renderer at module load.
+ */
+import type { ReactNode } from "react";
+
+type PartRenderer = (part: { type: string; output?: unknown }) => ReactNode;
+
+const registry = new Map<string, PartRenderer>();
+
+export function registerPartRenderer(type: string, render: PartRenderer): void {
+  registry.set(type, render);
+}
+
+export function getPartRenderer(type: string): PartRenderer | undefined {
+  return registry.get(type);
+}