Agent Operations Hero

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 RunStatus,
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  SourceCitationRail,
26  CitationMarker,
27  type CitationSource,
28} from "@/components/motiq/source-citation-rail";
29import {
30  PromptComposer,
31  type ComposerStatus,
32} from "@/components/motiq/prompt-composer";
33 
34/**
35 * AgentOperationsHero — an editable hero for AI / automation products. A wide
36 * copy band (eyebrow + a real headline + support copy + two CTAs + live status)
37 * sits above a full-width "app window" that renders a *live, reduced* preview of
38 * a real agent workflow; when the surface is wide enough the workflow tiles into
39 * two columns so the hero holds a calm height. It is authored mobile-first: in a
40 * narrow container the CTAs are full-width 44px bars, the surface leads with the
41 * prompt + the run, and the tool call plus cited sources sit behind a real
42 * disclosure (`defaultDetailsOpen` opens it). Composed from released Motiq
43 * components at deliberately trimmed complexity:
44 *   • PromptComposer     — ONE compact prompt input
45 *   • AgentRunTimeline   — ONE workflow, three steps, with approval + retry
46 *   • ToolCallActivity   — ONE active tool call
47 *   • SourceCitationRail — ONE grounded result with its cited sources
48 *
49 * It is strictly a *presentation* composition. It never talks to a model, never
50 * executes an agent, never retrieves anything, never reveals chain-of-thought,
51 * and never fabricates a result. The application owns the workflow state; this
52 * block simply renders whatever `phase` + `dataset` it is given and reports user
53 * intent (submit / approve / reject / retry / cancel / stop) back by moving the
54 * phase. It ships clearly-fictional inline demo data so it renders standalone.
55 *
56 * EVERY layout decision is a *container* query, not a viewport query. The block
57 * is routinely dropped into a documentation column or a dashboard panel that is
58 * far narrower than the window, where `lg:` would claim room the component does
59 * not have and split an 800px panel into two 320px columns. Two named contexts
60 * drive the whole composition:
61// … truncated