AI Agent Workspace

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6import {
7  getStatusMeta,
8  statusVars,
9  useControllableState,
10  type StatusTone,
11} from "@/lib/motiq";
12import {
13  AgentRunTimeline,
14  type AgentRun,
15  type RunStep,
16  type RunStage,
17  type StepStatus,
18} from "@/components/motiq/agent-run-timeline";
19import {
20  ToolCallActivity,
21  type ToolCall,
22  type ToolCallStatus,
23} from "@/components/motiq/tool-call-activity";
24import {
25  AiResponseStream,
26  type ResponseSegment,
27  type StreamState,
28  type StreamSource,
29} from "@/components/motiq/ai-response-stream";
30import {
31  SourceCitationRail,
32  CitationMarker,
33  type CitationSource,
34} from "@/components/motiq/source-citation-rail";
35 
36/**
37 * AiAgentWorkspace — a composed, full-page AI agent workspace built from four
38 * released Motiq components:
39 *   • AgentRunTimeline    — the run, step-by-step, with approval + retry controls
40 *   • ToolCallActivity    — the same run seen as a live tool-call inspector
41 *   • AiResponseStream    — the streamed answer, with inline citations
42 *   • SourceCitationRail   — interactive, claim-level source attribution
43 *
44 * It is strictly a *presentation* composition. It never talks to a model, never
45 * executes an agent, never retrieves anything, and never fabricates a result.
46 * The application owns the workspace state end to end; this block simply renders
47 * whatever `phase` + `dataset` it is given and reports user intent
48 * (approve / reject / retry / cancel / stop) back by moving the phase. It ships
49 * with clearly-fictional inline demo data so it renders standalone, and every
50 * override is a prop so a host app can drive the exact same UI from real state.
51 *
52 * The demo state machine has six required states — Idle · Running · Waiting for
53 * approval · Completed · Failed · Cancelled — each of which fully determines the
54 * state of all four child components. Callbacks transition between phases:
55 *   approve  → completed     reject  → cancelled
56 *   retry    → running       cancel  → cancelled       stop → cancelled
57 *
58 * Hydration-safe: there is no `Date.now()` / `Math.random()` / `new Date()` at
59 * module scope, during render, or in a state initializer — every timestamp is a
60 * fixed epoch constant, so the server and client render identical markup.
61 * Reduced-motion, forced-colors, and dark mode are all inherited from the
62 * children. Clean-room original.
63 */
64 
65// … truncated