{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "chat", "title": "Mastra Chat", "description": "The full Agent Controller shell: conversation history sidebar, chat, and the agent workbench (browser, files, memory, schedules).", "dependencies": [ "ai", "lucide-react", "shiki@^3.23.0", "sonner" ], "registryDependencies": [ "dialog", "dropdown-menu", "tabs", "@mastra-chat-kit/agent", "@mastra-chat-kit/code-block", "@mastra-chat-kit/context", "@mastra-chat-kit/tool", "@mastra-chat-kit/chat-engine", "@mastra-chat-kit/chat-tool-views", "https://ai-sdk.dev/elements/api/registry/attachments.json", "https://ai-sdk.dev/elements/api/registry/confirmation.json", "https://ai-sdk.dev/elements/api/registry/conversation.json", "https://ai-sdk.dev/elements/api/registry/file-tree.json", "https://ai-sdk.dev/elements/api/registry/message.json", "https://ai-sdk.dev/elements/api/registry/model-selector.json", "https://ai-sdk.dev/elements/api/registry/prompt-input.json", "https://ai-sdk.dev/elements/api/registry/queue.json", "https://ai-sdk.dev/elements/api/registry/reasoning.json", "https://ai-sdk.dev/elements/api/registry/shimmer.json", "https://ai-sdk.dev/elements/api/registry/suggestion.json", "https://ai-sdk.dev/elements/api/registry/task.json", "https://ai-sdk.dev/elements/api/registry/terminal.json", "sonner", "@mastra-chat-kit/chat-routes" ], "files": [ { "path": "components/chat/chat-switcher.tsx", "content": "'use client';\n\nimport { PanelLeftIcon, PanelRightIcon } from 'lucide-react';\nimport { useState } from 'react';\nimport { AgentControllerChat } from '@/components/chat/agent-controller-chat';\nimport { AgentControllerSidebar } from '@/components/chat/agent-controller-sidebar';\nimport { WorkbenchPanel } from '@/components/chat/workbench-panel';\nimport { useAgentControllerChat } from '@/lib/agent-controller/use-agent-controller-chat';\n\n/**\n * The app shell — sidebar │ chat │ workbench, no top header bar so the chat runs\n * edge to edge. The sidebar-collapse control lives at the top of the sidebar (and\n * floats top-left when the sidebar is collapsed, so it's always reachable); the\n * workbench toggle floats in the chat's empty top-right gutter.\n *\n * One controller session (an `AgentController` with a real Workspace: filesystem +\n * shell sandbox + browser) backs all three panes, so history, transcript, and the\n * workbench's Files/Terminal/Browser reflect the same run.\n */\nexport function ChatSwitcher() {\n const [leftCollapsed, setLeftCollapsed] = useState(false);\n // Workbench starts CLOSED so the default view is a clean chat, not an IDE.\n const [rightCollapsed, setRightCollapsed] = useState(true);\n const controller = useAgentControllerChat();\n\n // New chat: clear the transcript, then focus the composer so it's obviously\n // responsive — from an already-empty chat there'd otherwise be no visible change.\n const handleNew = () => {\n controller.reset();\n requestAnimationFrame(() => {\n document\n .querySelector('textarea[data-slot=\"input-group-control\"]')\n ?.focus();\n });\n };\n\n return (\n // Recessed frame: the shell + both rails share the sidebar tone; the chat floats inset\n // as a raised rounded panel (the \"inset\" layout — clean, subtle separation).\n
\n setLeftCollapsed((v) => !v)}\n />\n\n {/* Collapsed → a floating control brings the sidebar back (same spot as the\n in-sidebar toggle, so it appears to stay put). */}\n {leftCollapsed && (\n setLeftCollapsed(false)}\n className=\"absolute top-2.5 left-2.5 z-20 flex size-8 items-center justify-center rounded-md text-muted-foreground transition hover:bg-accent hover:text-foreground active:scale-[0.96]\"\n >\n \n \n )}\n\n
\n {/* The chat is the raised, floating panel: inset margin + rounded + border + soft\n shadow, over the recessed sidebar-tone frame. */}\n
\n \n
\n\n {/* Only when the panel is CLOSED does the toggle float in the chat's empty\n top-right gutter — open, it would overlap the panel, so the collapse\n control lives in the panel's own header instead. */}\n {rightCollapsed && (\n setRightCollapsed(false)}\n className=\"absolute top-2.5 right-2.5 z-20 flex size-8 items-center justify-center rounded-md text-muted-foreground transition hover:bg-accent hover:text-foreground active:scale-[0.96]\"\n >\n \n \n )}\n\n {!rightCollapsed && (\n setRightCollapsed(true)} />\n )}\n
\n
\n );\n}\n", "type": "registry:component", "target": "components/chat/chat-switcher.tsx" }, { "path": "components/chat/composer.tsx", "content": "'use client';\n\nimport type { ChatStatus } from 'ai';\nimport { CheckIcon, ChevronLeftIcon, ChevronRightIcon, GlobeIcon } from 'lucide-react';\nimport { type ReactNode, useState } from 'react';\nimport {\n Attachment,\n AttachmentPreview,\n AttachmentRemove,\n Attachments,\n} from '@/components/ai-elements/attachments';\nimport {\n ModelSelector,\n ModelSelectorContent,\n ModelSelectorItem,\n ModelSelectorList,\n ModelSelectorLogo,\n ModelSelectorName,\n ModelSelectorTrigger,\n} from '@/components/ai-elements/model-selector';\nimport {\n PromptInput,\n PromptInputActionAddAttachments,\n PromptInputActionAddScreenshot,\n PromptInputActionMenu,\n PromptInputActionMenuContent,\n PromptInputActionMenuTrigger,\n PromptInputBody,\n PromptInputButton,\n PromptInputFooter,\n PromptInputHeader,\n type PromptInputMessage,\n PromptInputSubmit,\n PromptInputTextarea,\n PromptInputTools,\n usePromptInputAttachments,\n} from '@/components/ai-elements/prompt-input';\n\ntype Provider = 'anthropic' | 'openai';\nexport type ModelOption = { id: string; name: string; provider: Provider };\n\n// Model router ids (provider/model). Keep in sync with MODEL_ALLOWLIST in the\n// server's mastra/index.ts. OpenAI entries are the cheaper chat tier on purpose.\n// `name` is the DISPLAY label — kept short (no \"Claude\" prefix; the provider logo\n// beside it already conveys the vendor). OpenAI names keep \"GPT\" (it's the model\n// name, not a vendor word).\nexport const MODELS: ModelOption[] = [\n { id: 'anthropic/claude-sonnet-4-6', name: 'Sonnet 4.6', provider: 'anthropic' },\n { id: 'anthropic/claude-opus-4-8', name: 'Opus 4.8', provider: 'anthropic' },\n { id: 'anthropic/claude-haiku-4-5', name: 'Haiku 4.5', provider: 'anthropic' },\n { id: 'openai/gpt-4.1-mini', name: 'GPT-4.1 mini', provider: 'openai' },\n { id: 'openai/gpt-4o-mini', name: 'GPT-4o mini', provider: 'openai' },\n { id: 'openai/gpt-4.1-nano', name: 'GPT-4.1 nano', provider: 'openai' },\n];\n\nconst MODEL_GROUPS: { provider: Provider; heading: string }[] = [\n { provider: 'anthropic', heading: 'Anthropic' },\n { provider: 'openai', heading: 'OpenAI' },\n];\n\nexport type ComposerSubmit = {\n text: string;\n model: string;\n webSearch: boolean;\n files?: PromptInputMessage['files'];\n};\n\n/** Renders the in-progress attachment chips above the textarea. */\nfunction AttachmentsDisplay() {\n const attachments = usePromptInputAttachments();\n if (attachments.files.length === 0) {\n return null;\n }\n return (\n \n {attachments.files.map((file) => (\n attachments.remove(file.id)}>\n \n \n \n ))}\n \n );\n}\n\n/**\n * The ONE chat composer — full PromptInput surface (attachments + drag-drop,\n * action menu, web-search toggle, model selector, submit). Kept separate from\n * the chat view so the input surface can be reused behind any transport —\n * only the behaviour behind `onSend` changes.\n */\nexport function Composer({\n onSend,\n status,\n className = 'm-4',\n footerExtra,\n toolsExtra,\n}: {\n onSend: (submit: ComposerSubmit) => void;\n status?: ChatStatus;\n className?: string;\n /** Rendered in the footer, right of the tools (e.g. the live token-usage Context). */\n footerExtra?: ReactNode;\n /** Rendered at the START of the tools row (e.g. the controller mode switcher). */\n toolsExtra?: ReactNode;\n}) {\n const [text, setText] = useState('');\n const [model, setModel] = useState(MODELS[0].id);\n const [modelOpen, setModelOpen] = useState(false);\n const [webSearch, setWebSearch] = useState(false);\n const currentModel = MODELS.find((m) => m.id === model) ?? MODELS[0];\n\n // The model selector pages by provider: arrows switch provider, its models list\n // underneath. Opening the palette starts on the current model's provider.\n const [activeProvider, setActiveProvider] = useState(currentModel.provider);\n const providerIdx = Math.max(\n 0,\n MODEL_GROUPS.findIndex((g) => g.provider === activeProvider),\n );\n const activeGroup = MODEL_GROUPS[providerIdx];\n const cycleProvider = (dir: 1 | -1) =>\n setActiveProvider(\n MODEL_GROUPS[(providerIdx + dir + MODEL_GROUPS.length) % MODEL_GROUPS.length].provider,\n );\n\n const handleSubmit = (message: PromptInputMessage) => {\n const hasText = Boolean(message.text?.trim());\n const hasAttachments = Boolean(message.files?.length);\n if (!hasText && !hasAttachments) {\n return;\n }\n onSend({ text: message.text ?? '', model, webSearch, files: message.files });\n setText('');\n };\n\n return (\n \n \n \n \n \n setText(e.target.value)}\n value={text}\n placeholder=\"Ask anything…\"\n />\n \n \n \n {toolsExtra}\n \n \n \n \n \n \n \n setWebSearch((v) => !v)}\n tooltip={{ content: 'Search the web', shortcut: '⌘K' }}\n variant={webSearch ? 'default' : 'ghost'}\n className=\"transition active:scale-[0.96]\"\n >\n \n Search\n \n {/* The Model Selector element. Paged by provider: ◀ / ▶ switch provider,\n its models list underneath. The chosen model is sent on every turn via\n body.model and honored server-side. */}\n {\n setModelOpen(open);\n if (open) {\n setActiveProvider(currentModel.provider);\n }\n }}\n >\n \n \n \n {currentModel.name}\n \n \n \n {/* Provider pager header — centered ◀ Provider ▶ cluster, kept clear of\n the dialog's built-in ✕ (top-right) so the Next arrow stays clickable. */}\n
\n cycleProvider(-1)}\n className=\"flex size-8 items-center justify-center rounded-md text-muted-foreground transition hover:bg-accent hover:text-foreground active:scale-[0.96]\"\n >\n \n \n \n \n {activeGroup.heading}\n \n cycleProvider(1)}\n className=\"flex size-8 items-center justify-center rounded-md text-muted-foreground transition hover:bg-accent hover:text-foreground active:scale-[0.96]\"\n >\n \n \n
\n {/* Models for the active provider */}\n \n {MODELS.filter((mo) => mo.provider === activeProvider).map((mo) => (\n {\n setModel(mo.id);\n setModelOpen(false);\n }}\n >\n \n {mo.name}\n {model === mo.id && }\n \n ))}\n \n \n \n \n
\n {footerExtra}\n \n
\n \n \n );\n}\n", "type": "registry:component", "target": "components/chat/composer.tsx" }, { "path": "components/chat/agent-controller-chat.tsx", "content": "'use client';\n\nimport { BotIcon, CopyIcon, UserIcon } from 'lucide-react';\nimport { Agent, AgentContent, AgentHeader } from '@/components/ai-elements/agent';\nimport {\n Confirmation,\n ConfirmationAction,\n ConfirmationActions,\n ConfirmationRequest,\n ConfirmationTitle,\n} from '@/components/ai-elements/confirmation';\nimport {\n Context,\n ContextContent,\n ContextContentBody,\n ContextContentHeader,\n ContextInputUsage,\n ContextOutputUsage,\n ContextReasoningUsage,\n ContextTrigger,\n} from '@/components/ai-elements/context';\nimport {\n Conversation,\n ConversationContent,\n ConversationScrollButton,\n} from '@/components/ai-elements/conversation';\nimport {\n Message,\n MessageAction,\n MessageActions,\n MessageContent,\n MessageResponse,\n} from '@/components/ai-elements/message';\nimport {\n Queue,\n QueueItem,\n QueueItemContent,\n QueueItemDescription,\n QueueItemIndicator,\n QueueList,\n} from '@/components/ai-elements/queue';\nimport { Reasoning, ReasoningContent, ReasoningTrigger } from '@/components/ai-elements/reasoning';\nimport { Shimmer } from '@/components/ai-elements/shimmer';\nimport { Suggestion } from '@/components/ai-elements/suggestion';\nimport { Task, TaskContent, TaskItem, TaskTrigger } from '@/components/ai-elements/task';\nimport {\n Tool,\n ToolContent,\n ToolHeader,\n ToolInput,\n ToolOutput,\n} from '@/components/ai-elements/tool';\nimport { Composer, type ComposerSubmit } from '@/components/chat/composer';\nimport {\n AskUserPrompt,\n GeneratedImage,\n GoalCard,\n type KnowledgeResult,\n KnowledgeSources,\n PlanCard,\n StepTrace,\n} from '@/components/chat/tool-views';\nimport {\n type ActiveTool,\n type AgentControllerContentPart,\n collectToolResults,\n type SubagentRun,\n} from '@/lib/agent-controller/events';\nimport type { UseAgentControllerChat } from '@/lib/agent-controller/use-agent-controller-chat';\nimport { cn } from '@/lib/utils';\n\n/**\n * Empty-state suggestion pills — a short label the user sees, and the fuller `prompt`\n * actually sent on click (so the pills read evenly while still exercising real tools).\n */\nconst STARTERS: { label: string; prompt: string }[] = [\n { label: 'Weather in LA', prompt: \"What's the weather in Los Angeles?\" },\n {\n label: 'Fibonacci demo',\n prompt: 'Create hello.js that prints the first 10 Fibonacci numbers, then run it.',\n },\n { label: 'List workspace files', prompt: 'List the files in the workspace.' },\n { label: 'Latest Mastra release', prompt: 'Search the web for the latest Mastra release notes.' },\n];\n\n/** Round avatar next to each message: user (filled brand) / assistant (bot). */\nfunction MsgAvatar({ role }: { role: string }) {\n const isUser = role === 'user';\n return (\n \n {isUser ? : }\n \n );\n}\n\n/** Bot avatar + three bouncing dots — shown before the assistant reply streams. */\n/**\n * Shown between `agent_start` and the first assistant token. The event map\n * documents `agent_start` → the Shimmer element, so this renders Shimmer rather\n * than hand-rolled dots — otherwise /events claims a mapping the UI never uses.\n */\nfunction ThinkingIndicator() {\n return (\n
\n {/* biome-ignore lint/a11y/useValidAriaRole: `role` is MsgAvatar's message-role prop, not an ARIA role */}\n \n \n Thinking…\n \n
\n );\n}\n\n/**\n * Agent Controller chat — consumes the AgentController SSE (`useAgentControllerChat`) and renders its\n * full surface onto stock AI Elements: text, thinking\n * → Reasoning, tool calls → Tool, search results → Sources/InlineCitation, images →\n * Image, submit_plan → Plan, the step sequence → ChainOfThought, task_updated → Task,\n * approvals → Confirmation. Only the engine behind the shared differs.\n */\nexport function AgentControllerChat({ controller }: { controller: UseAgentControllerChat }) {\n const { transcript, status, sendMessage, approve, answerQuestion } = controller;\n // Goals AND planning are agent-driven — the agent calls its own `setGoal` tool for a\n // standing objective and the built-in `submit_plan` for tasks that warrant a plan, so\n // there are no manual mode/goal controls in the composer. `clearGoal` backs the goal\n // card's dismiss affordance (the user can abandon an active goal).\n const { goal, clearGoal } = controller;\n const {\n messages,\n tasks,\n pendingApproval,\n pendingSuspension,\n usage,\n info,\n subagents,\n activeTools,\n error,\n queuedFollowUps,\n } = transcript;\n const resultsById = collectToolResults(messages);\n // Subagent runs keyed by the parent `subagent` tool-call id, so a `subagent`\n // tool call in the transcript renders as the nested card.\n const subagentsById = new Map(subagents.map((r) => [r.toolCallId, r]));\n\n const handleSend = ({ text, model, webSearch, files }: ComposerSubmit) =>\n sendMessage(text, {\n model,\n webSearch,\n files: files?.map((f) => ({ url: f.url, mediaType: f.mediaType, filename: f.filename })),\n });\n\n // Live token usage lives INSIDE the composer footer (not floating in the chat).\n const contextSlot = usage ? (\n \n \n \n \n \n \n \n \n \n \n \n ) : null;\n\n // White composer so it pops against the zinc canvas. Rendered under the hero on the\n // empty state, or pinned at the bottom once the chat is going. The token-usage Context\n // rides in its footer. No composer controls for modes/goals — those are agent-driven.\n const composer = (\n \n );\n\n // Suggestion pills → a fuller prompt on click. Reused in the empty state above the composer.\n const starterPills = (\n
\n {STARTERS.map((s) => (\n handleSend({ text: prompt, model: '', webSearch: false })}\n className=\"animate-fade-up\"\n >\n {s.label}\n \n ))}\n
\n );\n\n return (\n // Flat chat pane. NO h-full here — an explicit height opts the flex item out of\n // align-stretch and then collapses to content height; letting it stretch to the\n // row is what actually fills the column. min-h-0 lets the conversation scroll.\n
\n {messages.length === 0 && status !== 'streaming' ? (\n // Empty state: hero + suggestion pills + composer, centered as one group. The pills\n // sit ABOVE the composer so they read as prompts leading into the input.\n
\n
\n

\n What’s on your mind today?\n

\n

\n Ask a question, run some code, or browse the web.\n

\n
\n {starterPills}\n
{composer}
\n {goal && (\n
\n \n
\n )}\n
\n ) : (\n \n \n {/* Goal card pinned above the conversation — the live judge verdict for the\n active objective (updates as goal_evaluation events stream in). */}\n {goal && }\n {messages\n .filter((m) => m.role === 'user' || m.role === 'assistant')\n .map((m) => {\n // The agent's actual tool-call sequence → a ChainOfThought trace.\n const steps =\n m.role === 'assistant'\n ? m.content\n .filter((p) => p.type === 'tool_call')\n .map((p) => `Called ${(p as { name: string }).name}`)\n : [];\n return (\n \n \n \n \n {steps.length > 0 && }\n {m.content.map((part, i) =>\n renderContent(part, i, resultsById, subagentsById),\n )}\n \n {m.role === 'assistant' && (\n \n copyAgentControllerMessage(m.content)}\n >\n \n \n \n )}\n \n
\n );\n })}\n\n {/* Live tool calls whose input is still streaming — shown until the settled\n message part lands and suppresses them (698.25). No double-render: the\n reducer drops an active entry the moment its tool_call message part exists. */}\n {activeTools.map((t) => (\n \n ))}\n\n {tasks.length > 0 && (\n \n \n \n {tasks.map((t, i) => (\n \n {t.status ? `[${t.status}] ` : ''}\n {t.content ?? t.title ?? 'Task'}\n \n ))}\n \n \n )}\n\n {pendingApproval && (\n \n Run {pendingApproval.toolName}?\n \n 
\n                    {JSON.stringify(pendingApproval.args, null, 2)}\n
\n \n approve('approve')}>\n Approve\n \n approve('decline')}>\n Reject\n \n \n \n \n )}\n\n {/* Agent-driven ask_user: the run is suspended awaiting the user's answer\n to a clarifying question. Answering resumes it on the open SSE. */}\n {pendingSuspension && (\n \n )}\n\n {/* Bot avatar + typing dots while the run is in flight and the assistant\n hasn't started its reply yet (otherwise the reply itself is the signal). */}\n {status === 'streaming' &&\n messages.filter((m) => m.role === 'user' || m.role === 'assistant').at(-1)?.role !==\n 'assistant' && }\n\n {/* Messages sent while a run was busy are queued server-side and replayed\n when it settles (`follow_up_queued`). Without this the count is folded\n into state and never shown, so the user gets no sign they landed. */}\n {queuedFollowUps > 0 && (\n \n \n \n \n \n \n {queuedFollowUps === 1\n ? '1 message queued — it will send when this run finishes'\n : `${queuedFollowUps} messages queued — they will send when this run finishes`}\n \n \n \n \n \n )}\n\n {/* Transient run status (controller `info` events). */}\n {info && !error &&

{info}

}\n\n {error && (\n

AgentController error: {error}

\n )}\n \n \n \n )}\n\n {/* Bottom composer only once a chat is going — the empty state has its own\n centered one, so it never shows twice. */}\n {!(messages.length === 0 && status !== 'streaming') && (\n
{composer}
\n )}\n \n );\n}\n\n/** Copy the plain text of a controller assistant turn (text parts only). */\nfunction copyAgentControllerMessage(content: AgentControllerContentPart[]) {\n const text = content\n .filter((p) => p.type === 'text')\n .map((p) => (p as { text: string }).text ?? '')\n .join('\\n');\n navigator.clipboard?.writeText(text);\n}\n\n/**\n * A subagent invocation → the card: header (type + model + forked badge),\n * the delegated task, the subagent's nested tool calls, its streamed text, and a\n * live/`done`/error footer. Driven by the accumulated `subagent_*` events; falls\n * back to the parent tool-call `task` before any subagent event arrives.\n */\nfunction SubagentCard({ run, fallbackTask }: { run?: SubagentRun; fallbackTask?: string }) {\n const agentType = run?.agentType ?? 'subagent';\n const task = run?.task ?? fallbackTask;\n const running = run?.status !== 'done';\n return (\n \n \n \n {task &&

Task: {task}

}\n {run?.tools.map((t, ti) => (\n // biome-ignore lint/suspicious/noArrayIndexKey: tool list is append-only, never reordered\n \n \n \n \n {t.result !== undefined && (\n \n {JSON.stringify(t.result, null, 2)}\n \n }\n errorText={t.isError ? 'Tool reported an error' : undefined}\n />\n )}\n \n \n ))}\n {run?.text && {run.text}}\n {running ? (\n

Working…

\n ) : run?.isError ? (\n

Subagent reported an error.

\n ) : null}\n \n \n );\n}\n\n/**\n * A tool call whose input is still streaming — rendered from an `activeTools` entry\n * during the window before the settled `message_update` tool-invocation part arrives\n * (which then suppresses this via the reducer). Shows the input-streaming state\n * with whatever args have streamed so far (best-effort parse of the partial JSON).\n */\nfunction ActiveToolCard({ tool }: { tool: ActiveTool }) {\n let input: unknown = tool.argsText;\n try {\n if (tool.argsText.trim()) {\n input = JSON.parse(tool.argsText);\n }\n } catch {\n // Partial/streaming JSON — show the raw text until it parses.\n input = tool.argsText;\n }\n return (\n \n \n \n \n \n \n );\n}\n\nfunction renderContent(\n part: AgentControllerContentPart,\n i: number,\n resultsById: Map,\n subagentsById: Map,\n) {\n if (part.type === 'text') {\n return {(part as { text: string }).text};\n }\n if (part.type === 'thinking') {\n return (\n \n \n {(part as { thinking: string }).thinking}\n \n );\n }\n if (part.type === 'tool_call') {\n const call = part as { id: string; name: string; args: unknown };\n const result = resultsById.get(call.id) as { result?: unknown; isError?: boolean } | undefined;\n const output = result?.result;\n\n // The agent's `setGoal` tool has no inline rendering — the GoalCard (pinned above\n // the conversation, driven by goal_evaluation) is its surface, so suppress the raw call.\n if (call.name === 'setGoal') {\n return null;\n }\n // `ask_user` renders as the live AskUserPrompt (driven by tool_suspended), not a raw\n // tool card — suppress the call so the clarifying question isn't shown twice.\n if (call.name === 'ask_user') {\n return null;\n }\n // The built-in `subagent` tool → the nested card, driven by the\n // subagent_* events accumulated for this tool-call id.\n if (call.name === 'subagent') {\n const run = subagentsById.get(call.id);\n const task = (call.args as { task?: string } | undefined)?.task;\n return ;\n }\n // submit_plan → the element.\n if (call.name === 'submit_plan') {\n const a = call.args as { title?: string; plan?: string };\n return ;\n }\n // generateImage → the element (fetches bytes by id).\n const img = output as { imageId?: string; mediaType?: string; prompt?: string } | undefined;\n if (call.name === 'generateImage' && img?.imageId) {\n return (\n \n );\n }\n\n const hasOutput = result !== undefined;\n const searchResults =\n call.name === 'searchKnowledge'\n ? (output as { results?: KnowledgeResult[] } | undefined)?.results\n : undefined;\n return (\n
\n \n \n \n \n {hasOutput && (\n \n {JSON.stringify(result?.result, null, 2)}\n \n }\n errorText={result?.isError ? 'Tool reported an error' : undefined}\n />\n )}\n \n \n {Array.isArray(searchResults) && }\n
\n );\n }\n // tool_result is rendered alongside its tool_call; skip standalone.\n if (part.type === 'tool_result') {\n return null;\n }\n if (part.type === 'system_reminder') {\n return (\n

\n {(part as { message: string }).message}\n

\n );\n }\n return null;\n}\n", "type": "registry:component", "target": "components/chat/agent-controller-chat.tsx" }, { "path": "components/chat/agent-controller-sidebar.tsx", "content": "'use client';\n\nimport {\n ArchiveIcon,\n ArchiveRestoreIcon,\n MoreHorizontalIcon,\n PanelLeftIcon,\n PencilIcon,\n SearchIcon,\n SquarePenIcon,\n Trash2Icon,\n XIcon,\n} from 'lucide-react';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { toast } from 'sonner';\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from '@/components/ui/dialog';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport { type SearchHit, type ThreadItem, useThreads } from '@/lib/agent-controller/use-threads';\nimport { cn } from '@/lib/utils';\n\nconst DAY = 86_400_000;\nconst GROUP_ORDER = ['Today', 'Yesterday', 'Previous 7 days', 'Previous 30 days', 'Older'] as const;\n\nfunction groupOf(ts: number, todayStart: number): (typeof GROUP_ORDER)[number] {\n if (ts >= todayStart) return 'Today';\n if (ts >= todayStart - DAY) return 'Yesterday';\n if (ts >= todayStart - 7 * DAY) return 'Previous 7 days';\n if (ts >= todayStart - 30 * DAY) return 'Previous 30 days';\n return 'Older';\n}\n\n/**\n * Agent Controller conversation history — the conversation-history left rail wired to the\n * controller's persisted threads (`/api/agent-controller/threads*`). New-chat, debounced\n * title/first-message search, date-grouped list, per-chat rename / archive+undo /\n * delete, and a collapsible Archived section. The shell (`ChatSwitcher`) owns the\n * active thread; `refreshSignal` bumps when a turn finishes so a new thread (and\n * its title) shows up.\n */\nexport function AgentControllerSidebar({\n activeThreadId,\n onSelect,\n onNew,\n refreshSignal,\n collapsed,\n onToggleCollapse,\n}: {\n activeThreadId: string | null;\n onSelect: (id: string) => void;\n onNew: () => void;\n refreshSignal: number;\n collapsed: boolean;\n onToggleCollapse: () => void;\n}) {\n const [showArchived, setShowArchived] = useState(false);\n const [pendingDelete, setPendingDelete] = useState(null);\n\n // All thread data + mutations live in the engine so a second skin inherits them\n // (bd h27). This component owns only presentation — including the toasts below,\n // which is why the hook returns a boolean instead of notifying by itself.\n const {\n active,\n archived,\n search,\n setSearch,\n isSearching,\n debouncedSearch,\n searchHits,\n searching,\n archive,\n rename,\n remove,\n } = useThreads({ refreshSignal });\n\n // Active chats grouped by last-activity day, in fixed order.\n const groups = useMemo(() => {\n const todayStart = new Date().setHours(0, 0, 0, 0);\n const buckets = new Map();\n for (const t of active) {\n const label = groupOf(+new Date(t.updatedAt ?? t.createdAt ?? todayStart), todayStart);\n const arr = buckets.get(label) ?? [];\n arr.push(t);\n buckets.set(label, arr);\n }\n return GROUP_ORDER.map((label) => ({ label, items: buckets.get(label) ?? [] })).filter(\n (g) => g.items.length > 0,\n );\n }, [active]);\n\n const handleArchive = async (t: ThreadItem, nextArchived: boolean) => {\n const ok = await archive(t, nextArchived);\n if (!ok) {\n toast.error(nextArchived ? 'Failed to archive' : 'Failed to restore');\n return;\n }\n if (nextArchived) {\n toast.success('Conversation archived', {\n action: { label: 'Undo', onClick: () => handleArchive(t, false) },\n });\n } else {\n toast.success('Conversation restored');\n }\n };\n\n const handleRename = async (t: ThreadItem, title: string) => {\n const next = title.trim();\n if (!next || next === t.title) {\n return;\n }\n if (await rename(t, next)) {\n toast.success('Conversation renamed');\n } else {\n toast.error('Failed to rename');\n }\n };\n\n const handleDelete = async (t: ThreadItem) => {\n setPendingDelete(null);\n if (await remove(t)) {\n toast.success('Conversation deleted');\n if (t.id === activeThreadId) onNew();\n } else {\n toast.error('Failed to delete');\n }\n };\n\n return (\n \n
\n {/* Top bar: sidebar-collapse control (aligns with the floating one shown\n when collapsed, so it looks like it stays put). */}\n
\n \n \n \n
\n\n {/* New chat */}\n
\n {\n setSearch('');\n onNew();\n }}\n className=\"flex h-10 w-full items-center gap-2 rounded-lg border border-border bg-background px-3 font-medium text-sm shadow-sm transition-[scale,background-color] hover:bg-accent active:scale-[0.98]\"\n >\n \n New chat\n \n
\n\n {/* Search */}\n
\n
\n \n setSearch(e.target.value)}\n placeholder=\"Search chats…\"\n className=\"h-9 w-full rounded-lg border border-border bg-background pr-8 pl-9 text-sm outline-none transition-colors placeholder:text-muted-foreground focus:border-ring\"\n />\n {search && (\n setSearch('')}\n className=\"-translate-y-1/2 absolute top-1/2 right-1 flex size-7 items-center justify-center rounded-md text-muted-foreground transition-[scale,color] hover:text-foreground active:scale-[0.96]\"\n >\n \n \n )}\n
\n
\n\n {/* List */}\n
\n {isSearching ? (\n
\n {searchHits.length === 0 && !searching ? (\n No matches for “{debouncedSearch}”\n ) : (\n searchHits.map((h) => (\n {\n onSelect(h.id);\n setSearch('');\n }}\n />\n ))\n )}\n
\n ) : (\n <>\n {active.length === 0 && (\n Your conversations will appear here once you start chatting.\n )}\n {groups.map((g) => (\n
\n {g.items.map((t) => (\n onSelect(t.id)}\n onArchive={() => handleArchive(t, true)}\n onRename={(title) => handleRename(t, title)}\n onDelete={() => setPendingDelete(t)}\n />\n ))}\n
\n ))}\n\n {archived.length > 0 && (\n
\n setShowArchived((v) => !v)}\n className=\"flex h-9 w-full items-center gap-2 rounded-md px-2 font-medium text-muted-foreground text-xs uppercase tracking-wide transition-colors hover:text-foreground\"\n >\n \n {showArchived ? 'Hide archived' : `Archived (${archived.length})`}\n \n {showArchived &&\n archived.map((t) => (\n onSelect(t.id)}\n onArchive={() => handleArchive(t, false)}\n onRename={(title) => handleRename(t, title)}\n onDelete={() => setPendingDelete(t)}\n archivedRow\n />\n ))}\n
\n )}\n \n )}\n
\n
\n\n {/* Delete confirmation */}\n !o && setPendingDelete(null)}>\n \n \n Delete this conversation?\n \n This permanently deletes “{pendingDelete?.title}” and its messages. This can’t be\n undone.\n \n \n \n setPendingDelete(null)}\n className=\"h-9 rounded-lg border border-border px-4 font-medium text-sm transition-[scale] active:scale-[0.96]\"\n >\n Cancel\n \n pendingDelete && handleDelete(pendingDelete)}\n className=\"h-9 rounded-lg bg-destructive px-4 font-medium text-destructive-foreground text-sm transition-[scale] active:scale-[0.96]\"\n >\n Delete\n \n \n \n \n \n );\n}\n\nfunction Section({ label, children }: { label: string; children: React.ReactNode }) {\n return (\n
\n
\n {label}\n
\n
{children}
\n
\n );\n}\n\nfunction Empty({ children }: { children: React.ReactNode }) {\n return
{children}
;\n}\n\nfunction ChatRow({\n thread,\n isActive,\n onClick,\n onArchive,\n onRename,\n onDelete,\n archivedRow,\n}: {\n thread: ThreadItem;\n isActive: boolean;\n onClick: () => void;\n onArchive: () => void;\n onRename: (title: string) => void;\n onDelete: () => void;\n archivedRow?: boolean;\n}) {\n const [renaming, setRenaming] = useState(false);\n const [draft, setDraft] = useState(thread.title);\n const inputRef = useRef(null);\n\n const startRename = () => {\n setDraft(thread.title);\n setRenaming(true);\n };\n const commit = () => {\n setRenaming(false);\n onRename(draft);\n };\n\n // Focus + select-all ONCE when rename mode opens — not on every keystroke. (A ref\n // callback re-runs each render, which re-selected the text after every letter, so\n // typing replaced the whole selection. This effect keys off `renaming` only.)\n useEffect(() => {\n if (renaming) {\n const el = inputRef.current;\n el?.focus();\n el?.select();\n }\n }, [renaming]);\n\n if (renaming) {\n return (\n
\n setDraft(e.target.value)}\n onBlur={commit}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n commit();\n } else if (e.key === 'Escape') {\n setRenaming(false);\n }\n }}\n className=\"h-10 min-w-0 flex-1 bg-transparent text-sm outline-none\"\n />\n
\n );\n }\n\n return (\n \n \n {thread.title}\n \n \n \n e.stopPropagation()}\n className=\"flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground opacity-0 transition-[scale,opacity,color] hover:text-foreground focus-visible:opacity-100 active:scale-[0.96] group-hover:opacity-100 data-[state=open]:opacity-100\"\n >\n \n \n \n \n \n \n Rename\n \n \n {archivedRow ? (\n <>\n \n Restore\n \n ) : (\n <>\n \n Archive\n \n )}\n \n \n \n \n Delete\n \n \n \n \n );\n}\n\nfunction SearchRow({\n hit,\n isActive,\n onClick,\n}: {\n hit: SearchHit;\n isActive: boolean;\n onClick: () => void;\n}) {\n return (\n \n {hit.title}\n {hit.snippet && (\n {hit.snippet}\n )}\n \n );\n}\n", "type": "registry:component", "target": "components/chat/agent-controller-sidebar.tsx" }, { "path": "components/chat/workbench-panel.tsx", "content": "'use client';\n\nimport {\n BrainIcon,\n CalendarClockIcon,\n FilesIcon,\n GlobeIcon,\n PanelRightCloseIcon,\n TerminalIcon,\n} from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { Terminal } from '@/components/ai-elements/terminal';\nimport { WorkbenchBrowser } from '@/components/chat/workbench-browser';\nimport { WorkbenchFiles } from '@/components/chat/workbench-files';\nimport { WorkbenchMemory } from '@/components/chat/workbench-memory';\nimport { WorkbenchSchedules } from '@/components/chat/workbench-schedules';\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';\nimport type { AgentControllerWorkspace } from '@/lib/agent-controller/events';\nimport type { UseAgentControllerChat } from '@/lib/agent-controller/use-agent-controller-chat';\nimport { cn } from '@/lib/utils';\n\n/**\n * The agent workbench — a collapsible right panel that surfaces what the controller\n * agent's Workspace is doing, on three tabs:\n *\n * - **Files** — the agent's filesystem (P3.3: served from `WORKSPACE_ROOT`).\n * - **Terminal** — live shell stdout/stderr, accumulated from `shell_output`.\n * - **Browser** — a live screencast of the agent's Chrome (P3.4: `startScreencast`).\n *\n * It shares the single controller session with `` (the hook is lifted to\n * the shell), so the panel reflects the same run the user is chatting with.\n */\nexport function WorkbenchPanel({\n controller,\n onCollapse,\n}: {\n controller: UseAgentControllerChat;\n onCollapse?: () => void;\n}) {\n const { terminal, workspace, memory } = controller.transcript;\n const { schedules } = controller;\n\n return (\n // Flush to the window edge — the right rail is part of the recessed frame; the chat\n // floats inset between the two rails (see ChatSwitcher).\n
\n \n \n \n \n Files\n \n \n \n Terminal\n \n \n \n Browser\n \n \n \n Memory\n \n \n \n Schedules\n \n {/* Workspace status dot — reflects the controller workspace lifecycle. */}\n \n {/* Collapse control lives in the panel header (not floating over it). */}\n \n \n \n \n\n \n \n \n \n {terminal.output ? (\n \n ) : (\n \n Shell output streams here when the agent runs a command.\n \n )}\n \n \n \n \n \n \n \n \n \n \n \n
\n );\n}\n\n/**\n * A compact status dot + label for the workspace lifecycle. Green when the\n * agent's workspace is live, red on error, amber (pulsing) while it initializes.\n * Renders nothing until the workspace first reports in, so an idle panel stays quiet.\n */\nfunction WorkspaceStatus({\n workspace,\n className,\n}: {\n workspace: AgentControllerWorkspace | null;\n className?: string;\n}) {\n if (!workspace) {\n return null;\n }\n const isReady = workspace.status === 'ready';\n const isError = workspace.status === 'error';\n const dot = isReady\n ? 'bg-emerald-500'\n : isError\n ? 'bg-destructive'\n : 'bg-amber-500 animate-pulse';\n const label = isReady ? 'Ready' : isError ? 'Error' : workspace.status;\n return (\n \n \n {label}\n \n );\n}\n\nfunction PanelPlaceholder({ children }: { children: ReactNode }) {\n return (\n
\n {children}\n
\n );\n}\n", "type": "registry:component", "target": "components/chat/workbench-panel.tsx" }, { "path": "components/chat/workbench-browser.tsx", "content": "'use client';\n\nimport { PlayIcon } from 'lucide-react';\nimport { useEffect, useState } from 'react';\n\ntype Status = 'idle' | 'connecting' | 'live' | 'error';\n\n/**\n * Browser tab — a live screencast of the controller agent's Chrome (the\n * `@mastra/browser-viewer` instance), streamed as base64 JPEG frames over SSE\n * from `/api/browser/screencast`.\n *\n * Connecting to that endpoint *launches* the browser server-side (`browser.launch()`),\n * so we do NOT auto-connect on tab open — merely clicking the Browser tab shouldn't\n * spin up Chrome. The view stays idle until the user explicitly starts the live view;\n * only then do we open the EventSource (and the browser launches). Closing the tab /\n * unmounting stops the screencast.\n */\nexport function WorkbenchBrowser() {\n const [started, setStarted] = useState(false);\n const [frame, setFrame] = useState(null);\n const [url, setUrl] = useState(null);\n const [status, setStatus] = useState('idle');\n\n useEffect(() => {\n if (!started) return;\n setStatus('connecting');\n const es = new EventSource('/api/browser/screencast');\n es.onmessage = (e) => {\n try {\n const msg = JSON.parse(e.data) as { type: string; data?: string; url?: string };\n if (msg.type === 'frame' && msg.data) {\n setFrame(`data:image/jpeg;base64,${msg.data}`);\n setStatus('live');\n } else if (msg.type === 'url' && msg.url) {\n setUrl(msg.url);\n } else if (msg.type === 'error') {\n setStatus('error');\n } else if (msg.type === 'stop') {\n es.close();\n }\n } catch {\n /* ignore malformed frame */\n }\n };\n es.onerror = () => setStatus((s) => (s === 'live' ? s : 'error'));\n return () => es.close();\n }, [started]);\n\n // Idle: nothing has launched. Offer to start the live view on demand.\n if (!started) {\n return (\n
\n

\n Watch the agent browse the web here. Starting the live view launches the agent’s\n browser.\n

\n setStarted(true)}\n className=\"inline-flex items-center gap-2 rounded-md border border-border bg-card px-3 py-1.5 font-medium text-sm transition-colors hover:bg-accent hover:text-accent-foreground\"\n >\n \n Start live view\n \n
\n );\n }\n\n return (\n
\n
\n \n {url ?? 'agent browser'}\n \n
\n
\n {frame ? (\n // biome-ignore lint/performance/noImgElement: streamed base64 data-URI frame; next/image can't optimize it\n \"Live\n ) : (\n
\n {status === 'error'\n ? \"Browser unavailable — the agent hasn't opened it yet, or Chrome isn't installed.\"\n : \"Starting the agent's browser…\"}\n
\n )}\n
\n
\n );\n}\n", "type": "registry:component", "target": "components/chat/workbench-browser.tsx" }, { "path": "components/chat/workbench-files.tsx", "content": "'use client';\n\nimport { XIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport type { BundledLanguage } from 'shiki';\nimport { CodeBlock } from '@/components/ai-elements/code-block';\nimport { FileTree, FileTreeFile, FileTreeFolder } from '@/components/ai-elements/file-tree';\nimport type { UseAgentControllerChat } from '@/lib/agent-controller/use-agent-controller-chat';\nimport { type FileNode, useWorkspaceFiles } from '@/lib/agent-controller/use-workspace';\nimport { cn } from '@/lib/utils';\n\n/** Map a filename to a Shiki language, defaulting to plain text. */\nconst EXT_LANG: Record = {\n ts: 'typescript',\n tsx: 'tsx',\n js: 'javascript',\n jsx: 'jsx',\n mjs: 'javascript',\n cjs: 'javascript',\n json: 'json',\n md: 'markdown',\n css: 'css',\n scss: 'scss',\n html: 'html',\n py: 'python',\n rb: 'ruby',\n go: 'go',\n rs: 'rust',\n sh: 'bash',\n bash: 'bash',\n yml: 'yaml',\n yaml: 'yaml',\n toml: 'toml',\n sql: 'sql',\n java: 'java',\n};\n\nfunction langFor(name: string): BundledLanguage {\n const ext = name.split('.').pop()?.toLowerCase() ?? '';\n return EXT_LANG[ext] ?? ('text' as BundledLanguage);\n}\n\n/**\n * Files tab — a live view of the controller agent's workspace (`WORKSPACE_ROOT`),\n * served straight off disk by `/api/workspace/*`. It keeps itself in sync\n * automatically — reloading on mount, polling while the agent is running (so writes\n * appear as they happen), and once more when the run finishes — so there's no manual\n * refresh to think about. Selecting a file loads its text into a CodeBlock.\n */\nexport function WorkbenchFiles({ controller }: { controller: UseAgentControllerChat }) {\n // Tree loading, streaming-poll and file reads live in the engine (bd h27), so a\n // second skin can surface the workspace without reimplementing any of it.\n const { tree, loadingTree, selected, content, loadingFile, selectPath, closeFile } =\n useWorkspaceFiles({\n status: controller.status,\n });\n\n return (\n
\n
\n Workspace\n {loadingTree && (\n \n Syncing…\n \n )}\n
\n\n {tree.length === 0 ? (\n
\n The workspace is empty — files the agent creates appear here.\n
\n ) : (\n // When a file is open, cap the tree to a small slice (scrolls if long) so the file\n // viewer below gets the majority of the height; otherwise the tree fills the panel.\n
\n n.type === 'dir').map((n) => n.path))}\n selectedPath={selected ?? undefined}\n onSelect={selectPath}\n >\n {renderNodes(tree)}\n \n
\n )}\n\n {selected && (\n
\n
\n \n {selected}\n \n \n \n \n
\n
\n {loadingFile ? (\n

Loading…

\n ) : content !== null ? (\n // Soft-wrap long lines so prose/long code flows DOWN instead of scrolling\n // sideways off the narrow panel. Targets the inner 
 so the shared\n              // CodeBlock used elsewhere keeps its default (horizontal-scroll) behavior.\n              \n            ) : (\n              
Could not read this file.
\n            )}\n
\n
\n )}\n
\n );\n}\n\nfunction renderNodes(nodes: FileNode[]): ReactNode {\n return nodes.map((n) =>\n n.type === 'dir' ? (\n \n {n.children && renderNodes(n.children)}\n \n ) : (\n \n ),\n );\n}\n", "type": "registry:component", "target": "components/chat/workbench-files.tsx" }, { "path": "components/chat/workbench-memory.tsx", "content": "'use client';\n\nimport { BrainIcon, EyeIcon, SparklesIcon, ZapIcon } from 'lucide-react';\nimport type { AgentControllerMemory } from '@/lib/agent-controller/events';\nimport { cn } from '@/lib/utils';\n\n/**\n * Memory tab — a live view of the controller agent's **Observational Memory** (698.20/698.35).\n * A background Observer distills durable facts from the conversation and a Reflector\n * compresses them, so the agent recalls context across chats. This surfaces what that\n * loop is doing, folded from the `om_*` events:\n *\n * - **Token windows** (`om_status`, fires each run) — how far the conversation has\n * accumulated toward the next observation, and observations toward the next reflection.\n * - **Buffer status** — whether the Observer/Reflector are idle or running.\n * - **Latest observations** — the distilled facts, when the loop surfaces them.\n * - **Activity** — a rolling log of observe / reflect / activate cycles.\n *\n * The Observer/Reflector run on a background loop, so the lifecycle entries arrive as\n * they happen; `om_status` is the always-present snapshot.\n */\nexport function WorkbenchMemory({ memory }: { memory: AgentControllerMemory | null }) {\n const status = memory?.status ?? null;\n const hasContent = !!status || !!memory?.observations || (memory?.activity.length ?? 0) > 0;\n\n // Nothing recorded yet (fresh user, no run): explain what will appear and when.\n // (`!memory` in the guard also narrows `memory` to non-null for the render below.)\n if (!memory || !hasContent) {\n return (\n
\n \n \n \n

\n Observational Memory distills durable facts from your chats and carries them across\n conversations. The live token windows fill in as you chat; anything it has already learned\n shows here.\n

\n
\n );\n }\n\n return (\n
\n
\n \n \n \n Observational Memory\n
\n\n {/* Token windows: progress toward the next observe / reflect. Present once a run has\n emitted an om_status snapshot; hydrated views (facts-only) skip straight to them. */}\n {status ? (\n
\n }\n label=\"Messages → observation\"\n hint=\"Unobserved message tokens; the Observer runs at the threshold.\"\n tokens={status.messages.tokens}\n threshold={status.messages.threshold}\n busy={status.observationBuffer.status !== 'idle'}\n />\n }\n label=\"Observations → reflection\"\n hint=\"Observation tokens; the Reflector compresses at the threshold.\"\n tokens={status.observations.tokens}\n threshold={status.observations.threshold}\n busy={status.reflectionBuffer.status !== 'idle'}\n />\n
\n \n \n {status.observationBuffer.chunks > 0 && (\n {status.observationBuffer.chunks} buffered\n )}\n
\n
\n ) : (\n

\n Send a message to see live memory windows update.\n

\n )}\n\n {/* Distilled observations — the facts OM has learned (hydrated on load or streamed live). */}\n {memory.observations && (\n
\n

\n Learned facts\n

\n

{memory.observations}

\n
\n )}\n\n {/* Activity log — newest first. */}\n {memory.activity.length > 0 && (\n
\n

\n Activity\n

\n {memory.activity\n .slice()\n .reverse()\n .map((a, i) => (\n \n \n {a.kind === 'observe' ? (\n \n ) : a.kind === 'reflect' ? (\n \n ) : (\n \n )}\n \n \n {a.detail}\n \n
\n ))}\n
\n )}\n \n );\n}\n\n/** One token window: a labelled progress bar toward a threshold, with tabular-nums counts. */\nfunction TokenWindow({\n icon,\n label,\n hint,\n tokens,\n threshold,\n busy,\n}: {\n icon: React.ReactNode;\n label: string;\n hint: string;\n tokens: number;\n threshold: number;\n busy: boolean;\n}) {\n const pct = threshold > 0 ? Math.min(100, Math.round((tokens / threshold) * 100)) : 0;\n const reached = threshold > 0 && tokens >= threshold;\n return (\n
\n
\n \n {icon}\n {label}\n \n \n {tokens.toLocaleString()} / {threshold.toLocaleString()}\n \n
\n
\n \n
\n
\n );\n}\n\n/** Idle/running status chip for the Observer or Reflector. */\nfunction StatusPill({ label, status }: { label: string; status: string }) {\n const running = status !== 'idle';\n return (\n \n {label}: {running ? status : 'idle'}\n \n );\n}\n", "type": "registry:component", "target": "components/chat/workbench-memory.tsx" }, { "path": "components/chat/workbench-schedules.tsx", "content": "'use client';\n\nimport { CalendarClockIcon, ClockIcon, PauseIcon, RepeatIcon } from 'lucide-react';\nimport type { AgentControllerSchedule } from '@/lib/agent-controller/events';\nimport { cn } from '@/lib/utils';\n\n/**\n * Schedules tab — the recurring schedules the controller agent has set up via its\n * native `mastra.schedules` tools (698.18). Read-only and agent-driven: the user\n * asks the agent to schedule/cancel something (start_schedule / stop_schedule),\n * and this panel reflects the result — no manual create/pause controls, matching\n * how the rest of the controller surfaces capabilities.\n *\n * The list is fetched from `/api/agent-controller/schedules` on mount and refetched when a\n * run settles (see `useAgentControllerChat.refreshSchedules`), so a schedule the agent\n * just created appears without a reload.\n */\nexport function WorkbenchSchedules({ schedules }: { schedules: AgentControllerSchedule[] }) {\n if (schedules.length === 0) {\n return (\n
\n \n \n \n

\n No recurring schedules yet. Ask the agent to run something on a timer — “remind me every\n morning to review the changelog” — and it appears here with its cadence and next run.\n

\n
\n );\n }\n\n // Active first, then paused; within each, soonest next-fire first.\n const sorted = [...schedules].sort((a, b) => {\n if (a.status !== b.status) return a.status === 'active' ? -1 : 1;\n return a.nextFireAt - b.nextFireAt;\n });\n\n return (\n
\n
\n \n \n \n Schedules\n {sorted.length}\n
\n\n
\n {sorted.map((s) => (\n \n ))}\n
\n
\n );\n}\n\n/** One schedule: its prompt, cron cadence, status, and next-run time. */\nfunction ScheduleCard({ schedule }: { schedule: AgentControllerSchedule }) {\n const paused = schedule.status === 'paused';\n return (\n // Outer radius (rounded-xl = 12px) − 8px padding → inner chips use rounded-md (6px).\n \n
\n

\n {schedule.name || schedule.prompt}\n

\n \n
\n {/* Show the prompt as a secondary line only when a distinct name titled the card. */}\n {schedule.name && (\n

{schedule.prompt}

\n )}\n
\n \n \n \n {schedule.cron}\n \n \n {!paused && schedule.nextFireAt > 0 && (\n \n \n next {formatRelative(schedule.nextFireAt)}\n \n )}\n
\n \n );\n}\n\n/** Active/paused chip. Amber-active reads as \"live\"; muted paused reads as \"held\". */\nfunction StatusPill({ paused }: { paused: boolean }) {\n return (\n \n {paused ? : }\n {paused ? 'Paused' : 'Active'}\n \n );\n}\n\n/** Compact \"in 3h\" / \"in 2d\" style relative time from an epoch-ms timestamp. */\nfunction formatRelative(epochMs: number): string {\n const diff = epochMs - Date.now();\n if (diff <= 0) return 'now';\n const mins = Math.round(diff / 60_000);\n if (mins < 60) return `in ${mins}m`;\n const hours = Math.round(mins / 60);\n if (hours < 24) return `in ${hours}h`;\n const days = Math.round(hours / 24);\n return `in ${days}d`;\n}\n", "type": "registry:component", "target": "components/chat/workbench-schedules.tsx" } ], "docs": "This kit needs TWO things in your project. Check both:\n\n 1. The RADIX base -> npx shadcn@latest init --base radix\n 2. The LUCIDE icon set -> \"iconLibrary\": \"lucide\" in components.json\n\nWith both, a fresh install typechecks with 0 errors and `next build` exits 0\n(verified on shadcn CLI 4.16.0 / Next 16.2.6).\n\nIf either is wrong:\n • Base UI instead of Radix (a bare `init` gives you this — --defaults resolves\n to --preset=base-nova) -> 14 type errors. This kit's own components port fine\n either way (the CLI rewrites `asChild` to Base UI's `render`), but the upstream\n Vercel AI Elements it depends on are Radix-authored and don't survive that.\n • hugeicons instead of lucide -> 1 type error and a failed build, in shadcn's own\n ui/spinner.tsx. Fix: set iconLibrary to lucide, then\n `shadcn add spinner --overwrite`.\n\nThen set MASTRA_SERVER_URL to point at your Mastra server (default\nhttp://localhost:4111). See https://mastra-chat-kit-registry.vercel.app for the full endpoint contract.", "type": "registry:block" }