4d:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 4e:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 4f:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 50:T4f30,"use client"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { useEffect, useRef, useState } from "react"; import { InlineEdit } from "@/components/motion-lexicon/inline-edit"; import { MetricTicker } from "@/components/motion-lexicon/metric-ticker"; import { PromptComposer } from "@/components/motion-lexicon/prompt-composer"; type Locale = "zh" | "en"; type RunState = "ready" | "thinking" | "working" | "approval" | "complete"; export type AgentWorkspaceBlockProps = { locale?: Locale; className?: string }; const ease = [0.23, 1, 0.32, 1] as const; export function AgentWorkspaceBlock({ locale = "en", className = "", }: AgentWorkspaceBlockProps) { const reduced = useReducedMotion(); const copy = locale === "zh" ? zh : en; const [mission, setMission] = useState(0); const [state, setState] = useState("ready"); const timers = useRef([]); useEffect(() => () => timers.current.forEach(window.clearTimeout), []); const run = () => { timers.current.forEach(window.clearTimeout); timers.current = []; setState("thinking"); const stages: Array<[RunState, number]> = [ ["working", reduced ? 0 : 850], ["approval", reduced ? 0 : 2100], ]; let elapsed = 0; stages.forEach(([next, wait]) => { elapsed += wait; timers.current.push(window.setTimeout(() => setState(next), elapsed)); }); }; const active = copy.missions[mission]; return (

Relay {copy.workspace}

{copy.state[state]}

{copy.missionsLabel}

{copy.missions.map((item, index) => ( ))}

{["R", "D", "Q"].map((agent, index) => ( {agent} ))}

{copy.team} {copy.teamMeta}


              {active.kicker}

{active.title}

{active.description}

{copy.requestLabel}

{active.request}

{state === "ready" ? (

{copy.readyTitle} {copy.readyBody}

0{index + 1} {step} {copy.queued}

) : (

{state !== "complete" ? ( ) : null}

{copy.runTitle[state]} {copy.runMeta[state]}

{visible && !current ? "✓" : index + 1} {step} {current ? copy.state[state] : visible ? copy.state.complete : copy.state.ready}

{state === "approval" ? (

! {copy.approval}

) : null}

)}

run()} />

); } const en = { workspace: "Agent product workspace", requestLabel: "Request", queued: "Queued", evidenceState: ["Verified", "Available", "Recorded"], missionsLabel: "Missions", team: "Interface team", teamMeta: "3 agents · 1 active", readyTitle: "Ready to run this mission", readyBody: "The agent will show its evidence as it works.", start: "Start mission", attach: "Add context", placeholder: "Ask Relay to continue…", evidence: "Evidence", approval: "The preview is ready. Publish it to the shared review URL?", approve: "Approve", state: { ready: "Ready", thinking: "Thinking", working: "Working", approval: "Needs approval", complete: "Complete", }, runTitle: { ready: "Ready", thinking: "Reading the request", working: "Building the interface", approval: "Waiting for approval", complete: "Mission complete", }, runMeta: { ready: "", thinking: "Comparing product context", working: "Editing and checking", approval: "One decision required", complete: "All evidence recorded", }, missions: [ { short: "Agent launch", kicker: "Interface mission", title: "Ship the agent UI collection", description: "Turn visible agent work into a product surface people can understand, trust, and want to reuse.", request: "Build a cohesive set of beautiful components for thinking, tools, approvals, and handoffs.", steps: [ "Map the agent interaction states", "Build the component collection", "Publish a browser preview", "Record acceptance evidence", ], evidence: ["11 live components", "Reduced motion", "Registry source"], }, { short: "Research brief", kicker: "Research mission", title: "Turn sources into a decision", description: "Keep retrieval, synthesis, citations, and the next action connected in one calm workspace.", request: "Compare the strongest AI interface patterns and recommend a visual direction.", steps: [ "Collect primary references", "Group interaction patterns", "Write the recommendation", "Attach cited evidence", ], evidence: ["8 primary sources", "3 design paths", "Cited answer"], }, { short: "Release review", kicker: "Review mission", title: "Close the release with proof", description: "Move checks, screenshots, approvals, and deployment into one visible completion path.", request: "Review the release, fix actionable defects, and return one production address.", steps: [ "Run quality gates", "Inspect desktop and mobile", "Approve production deploy", "Verify the live artifact", ], evidence: ["197 unit tests", "34 browser checks", "Live artifact"], }, ], }; const zh = { workspace: "Agent 产品工作区", requestLabel: "需求", queued: "待执行", evidenceState: ["已验证", "可使用", "已记录"], missionsLabel: "任务", team: "界面协作组", teamMeta: "3 个 Agent · 1 个执行中", readyTitle: "任务已经可以开始", readyBody: "Agent 会在执行过程中持续展示证据。", start: "开始任务", attach: "添加上下文", placeholder: "让 Relay 继续…", evidence: "执行证据", approval: "预览已经完成，是否发布到共享评审地址？", approve: "允许发布", state: { ready: "待开始", thinking: "思考中", working: "执行中", approval: "等待审批", complete: "已完成", }, runTitle: { ready: "待开始", thinking: "正在读取需求", working: "正在构建界面", approval: "正在等待审批", complete: "任务完成", }, runMeta: { ready: "", thinking: "比较产品上下文", working: "编辑并运行检查", approval: "需要一个明确决定", complete: "所有证据已经记录", }, missions: [ { short: "Agent 组件发布", kicker: "界面任务", title: "发布 Agent 组件组", description: "把 Agent 的执行过程转化为人能理解、信任并愿意复用的产品界面。", request: "为思考、工具、审批与交接设计一组统一且好看的组件。", steps: [ "梳理 Agent 交互状态", "构建组件集合", "发布浏览器预览", "记录验收证据", ], evidence: ["11 个实时组件", "支持减弱动效", "Registry 源码"], }, { short: "研究简报", kicker: "研究任务", title: "把来源转化为决策", description: "让检索、综合、引用与下一步行动在同一个安静工作区中连续发生。", request: "比较优秀的 AI 界面模式，并给出视觉方向建议。", steps: ["收集一手参考", "整理交互模式", "形成建议", "附上引用证据"], evidence: ["8 个一手来源", "3 个设计方向", "带引用的回答"], }, { short: "发布验收", kicker: "验收任务", title: "用证据完成发布", description: "把检查、截图、审批与部署组织成一条清楚的完成路径。", request: "验收版本，处理可修复问题，最终只返回一个生产地址。", steps: ["运行质量门禁", "检查桌面和手机", "批准生产部署", "验证线上产物"], evidence: ["197 个单元测试", "34 个浏览器检查", "线上产物"], }, ], }; 49:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4d",null,{"registryDependencies":["https://motion-lexicon.pages.dev/r/inline-edit.json","https://motion-lexicon.pages.dev/r/metric-ticker.json","https://motion-lexicon.pages.dev/r/prompt-composer.json"]}]]}],["$","$L4e",null,{"sourceUrl":"https://motion-lexicon.pages.dev/r/agent-workspace.json","proxyUrl":"https://shadcnregistry.com/r/motion-lexicon/agent-workspace","itemId":"@motion-lexicon/agent-workspace"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L4f",null,{"files":[{"path":"src/registry/blocks/agent-workspace.tsx","content":"$50","type":"registry:component","target":"components/motion-lexicon/blocks/agent-workspace.tsx"}]}]]}],"$L51"]}]

Agent Workspace

Installation

Files

components

Styles