feat(demo): day-zero onboarding scenario (deferred setup)

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

@@ -328,6 +328,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";
@@ -518,6 +519,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);
+}

apps/mesh/src/web/components/sidebar/task-groups/agent-row.tsx

@@ -0,0 +1,116 @@
+import { Plus } from "@untitledui/icons";
+import type { DraggableAttributes } from "@dnd-kit/core";
+import type { SyntheticListenerMap } from "@dnd-kit/core/dist/hooks/utilities";
+import { useVirtualMCP } from "@decocms/mesh-sdk";
+import { cn } from "@deco/ui/lib/utils.ts";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuTrigger,
+} from "@deco/ui/components/context-menu.tsx";
+import { AgentAvatar } from "@/web/components/agent-icon";
+import { AgentGroupContextMenuItems } from "./agent-group-context-menu-items";
+
+export interface AgentRowProps {
+  virtualMcpId: string;
+  /** Highlighted when the active thread belongs to this agent. */
+  isActive: boolean;
+  /** The current user's thread count for this agent (shown at rest). */
+  threadCount?: number;
+  /** Click the row → open the agent (its most recent thread, or a new one). */
+  onOpen: (virtualMcpId: string) => void;
+  /** The hover "+" and context-menu "New task" → start a fresh thread. */
+  onNewTask: (virtualMcpId: string) => void;
+  onShowSettings: (virtualMcpId: string) => void;
+  onHideGroup: (virtualMcpId: string) => void;
+  isOrgPinned?: boolean;
+  canManageOrgPin?: boolean;
+  onToggleOrgPin?: (virtualMcpId: string, pinned: boolean) => void;
+  /** When set, the row is draggable for reordering. */
+  sortable?: {
+    attributes: DraggableAttributes;
+    listeners: SyntheticListenerMap | undefined;
+    isDragging: boolean;
+  };
+}
+
+export function AgentRow({
+  virtualMcpId,
+  isActive,
+  threadCount,
+  onOpen,
+  onNewTask,
+  onShowSettings,
+  onHideGroup,
+  isOrgPinned = false,
+  canManageOrgPin = false,
+  onToggleOrgPin,
+  sortable,
+}: AgentRowProps) {
+  const entity = useVirtualMCP(virtualMcpId);
+  const isDragging = sortable?.isDragging ?? false;
+  const title = entity?.title ?? "Agent";
+
+  const row = (
+    <div
+      {...(sortable ? { ...sortable.attributes, ...sortable.listeners } : {})}
+      role="button"
+      tabIndex={0}
+      onClick={() => onOpen(virtualMcpId)}
+      onKeyDown={(e) => {
+        if (e.target !== e.currentTarget) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onOpen(virtualMcpId);
+        }
+      }}
+      className={cn(
+        "group/group flex items-center gap-2 px-2 py-1.5 rounded-md text-sm font-medium transition-colors",
+        "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
+        sortable && "touch-none active:cursor-grabbing",
+        isActive
+          ? "bg-accent text-accent-foreground"
+          : "text-foreground hover:bg-accent/60",
+        isDragging && "shadow-md bg-accent/40 cursor-grabbing",
+      )}
+    >
+      <AgentAvatar icon={entity?.icon ?? null} name={title} size="2xs" />
+      <span className="flex-1 truncate">{title}</span>
+      <div className="shrink-0 grid [grid-template-areas:'slot'] items-center justify-items-center">
+        {typeof threadCount === "number" && threadCount > 0 && (
+          <span className="[grid-area:slot] size-7 flex items-center justify-center text-xs text-muted-foreground tabular-nums transition-opacity group-hover/group:opacity-0">
+            {threadCount}
+          </span>
+        )}
+        <button
+          type="button"
+          aria-label="New thread with this agent"
+          onClick={(e) => {
+            e.stopPropagation();
+            onNewTask(virtualMcpId);
+          }}
+          className="[grid-area:slot] size-7 flex items-center justify-center rounded-md opacity-0 group-hover/group:opacity-100 focus-visible:opacity-100 transition-opacity text-muted-foreground hover:text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+        >
+          <Plus size={14} />
+        </button>
+      </div>
+    </div>
+  );
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>{row}</ContextMenuTrigger>
+      <ContextMenuContent className="w-56">
+        <AgentGroupContextMenuItems
+          virtualMcpId={virtualMcpId}
+          isOrgPinned={isOrgPinned}
+          canManageOrgPin={canManageOrgPin}
+          onNewTaskInGroup={onNewTask}
+          onShowSettings={onShowSettings}
+          onToggleOrgPin={onToggleOrgPin ?? (() => {})}
+          onHideGroup={onHideGroup}
+        />
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

apps/mesh/src/web/components/sidebar/task-groups/my-threads-section.tsx

@@ -0,0 +1,75 @@
+import { TaskRow } from "@/web/layouts/tasks-panel/task-row";
+import type { Task } from "@/web/components/chat/task/types";
+import { groupThreadsByStatus } from "./group-threads";
+import { StatusGroup } from "./task-group";
+import { ShowMoreButton } from "./show-more-button";
+import type { SidebarFilters } from "./next-page-offset";
+
+/**
+ * The current user's threads, all agents mixed. Two renderings toggled by the
+ * sidebar's group-by control:
+ *  - "flat": a single chronological list (each row shows its agent icon).
+ *  - "status": collapsible groups by thread status.
+ *
+ * In flat mode, pagination piggybacks on the global thread store's
+ * `fetchNextPage` (the same feed the Team section reads) via the Show more
+ * button. Status mode keeps its existing per-status server pagination.
+ */
+export function MyThreadsSection({
+  threads,
+  groupBy,
+  activeTaskId,
+  onSelectTask,
+  onArchiveTask,
+  filters,
+  hasMore,
+  isFetchingMore,
+  onLoadMore,
+}: {
+  threads: Task[];
+  groupBy: "flat" | "status";
+  activeTaskId: string | null;
+  onSelectTask: (task: Task) => void;
+  onArchiveTask: (task: Task) => void;
+  filters: SidebarFilters;
+  hasMore: boolean;
+  isFetchingMore: boolean;
+  onLoadMore: () => void;
+}) {
+  if (groupBy === "status") {
+    return (
+      <>
+        {groupThreadsByStatus(threads).map((group) => (
+          <StatusGroup
+            key={group.status}
+            status={group.status}
+            threads={group.threads}
+            activeTaskId={activeTaskId}
+            onSelectTask={onSelectTask}
+            onArchiveTask={onArchiveTask}
+            filters={filters}
+          />
+        ))}
+      </>
+    );
+  }
+
+  return (
+    <>
+      {threads.map((task) => (
+        <TaskRow
+          key={task.id}
+          task={task}
+          isActive={activeTaskId === task.id}
+          onClick={() => onSelectTask(task)}
+          onArchive={() => onArchiveTask(task)}
+          showAutomationBadge={Boolean(task.trigger_id)}
+          showAgentIcon
+        />
+      ))}
+      {(hasMore || isFetchingMore) && (
+        <ShowMoreButton onClick={onLoadMore} isFetching={isFetchingMore} />
+      )}
+    </>
+  );
+}

apps/mesh/src/web/components/sidebar/task-groups/sidebar-section-header.tsx

@@ -0,0 +1,52 @@
+import type { ReactNode } from "react";
+import { ChevronDown, ChevronRight } from "@untitledui/icons";
+
+/**
+ * Small uppercase section label that doubles as an accordion toggle. Shared by
+ * the sidebar's Team threads / My threads / Agents sections so they read as
+ * peers. Optional trailing `action` (e.g. "See all") reveals on header hover.
+ */
+export function SidebarSectionHeader({
+  label,
+  open,
+  onToggle,
+  count,
+  action,
+}: {
+  label: string;
+  open: boolean;
+  onToggle: () => void;
+  count?: number;
+  action?: { label: string; icon?: ReactNode; onClick: () => void };
+}) {
+  return (
+    <div className="group/section flex items-center gap-1 px-2 pt-1 pb-0.5">
+      <button
+        type="button"
+        aria-expanded={open}
+        onClick={onToggle}
+        className="flex flex-1 min-w-0 items-center gap-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground/80 hover:text-foreground transition-colors focus-visible:outline-none"
+      >
+        {open ? (
+          <ChevronDown size={12} className="shrink-0" />
+        ) : (
+          <ChevronRight size={12} className="shrink-0" />
+        )}
+        <span className="truncate">{label}</span>
+        {typeof count === "number" && count > 0 && (
+          <span className="tabular-nums text-muted-foreground/60">{count}</span>
+        )}
+      </button>
+      {action && (
+        <button
+          type="button"
+          onClick={action.onClick}
+          className="shrink-0 flex items-center gap-0.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground/60 hover:text-foreground opacity-0 group-hover/section:opacity-100 focus-visible:opacity-100 transition-opacity focus-visible:outline-none"
+        >
+          {action.label}
+          {action.icon}
+        </button>
+      )}
+    </div>
+  );
+}

apps/mesh/src/web/components/sidebar/task-groups/sortable-task-groups.tsx → apps/mesh/src/web/components/sidebar/task-groups/sortable-agent-rows.tsx

@@ -1,26 +1,31 @@
-import type { TaskGroupProps } from "./task-group";
-import { TaskGroup } from "./task-group";
 import type { TaskGroupData } from "./group-threads";
 import type { SidebarOrderScope } from "./stable-order";
 import { AgentGroupsSortableLayout } from "./sortable-agent-groups-layout";
+import { AgentRow, type AgentRowProps } from "./agent-row";
 
-export interface SortableTaskGroupsProps {
+export interface SortableAgentRowsProps {
   groups: TaskGroupData[];
   orderScope: SidebarOrderScope;
   decopilotId: string;
   orgPinnedIds: string[];
   onReorder: () => void;
-  renderGroup: (group: TaskGroupData) => TaskGroupProps;
+  renderGroup: (group: TaskGroupData) => AgentRowProps;
 }
 
-export function SortableTaskGroups({
+/**
+ * Flat, draggable list of agents (one row per agent). Reuses the shared
+ * `AgentGroupsSortableLayout` so decopilot-pinning, org-pinned/user sections,
+ * and drag-to-reorder behave exactly as they did for the old grouped view —
+ * only the rendered item changed from a thread group to a single agent row.
+ */
+export function SortableAgentRows({
   groups,
   orderScope,
   decopilotId,
   orgPinnedIds,
   onReorder,
   renderGroup,
-}: SortableTaskGroupsProps) {
+}: SortableAgentRowsProps) {
   return (
     <AgentGroupsSortableLayout
       groups={groups}
@@ -30,9 +35,9 @@ export function SortableTaskGroups({
       onReorder={onReorder}
       surface="expanded"
       renderGroup={renderGroup}
-      renderFixed={(props) => <TaskGroup key={props.virtualMcpId} {...props} />}
+      renderFixed={(props) => <AgentRow key={props.virtualMcpId} {...props} />}
       renderSortable={(props, sortable) => (
-        <TaskGroup key={props.virtualMcpId} {...props} sortable={sortable} />
+        <AgentRow key={props.virtualMcpId} {...props} sortable={sortable} />
       )}
     />
   );