"use client";

import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";

import { suggestions } from "@/lib/demo-data";

import { formatCtx, formatTokens, STAT_PLACEHOLDER } from "@/lib/stats-bar";

import {

askStream,

deleteSession,

getSession,

listSessions,

relativeTime,

AskError,

type SessionSummary,

type SessionUsage,

type TurnSummary,

} from "@/lib/agent-api";

import { openTraceStream } from "@/lib/trace-api";

import { toChainView, toLifecycleNodes, toTimelineTurns } from "@/lib/trace-view";

import { foldLabel, hasFailure, splitTurn, toolDuration, type TurnSegment } from "@/lib/turn-view";

import { readAskParam, sanitizePrefill } from "@/lib/ask-why";

import type { ChatItem, CrossLink, ToolCallView, TraceEvent, TurnView } from "@/lib/types";

import { GhostButton } from "@/components/ui";

import { Markdown } from "@/components/Markdown";

import { ComposerContext } from "@/components/ComposerContext";

import { mono } from "@/lib/styles";

import { useIsMobile } from "@/lib/use-mobile";

import { MobileWorkbench } from "@/components/mobile/MobileWorkbench";

import { MobileChat, MobileEmptyState } from "@/components/mobile/MobileChat";

import { TimelineView } from "./TimelineView";

import { ChainView } from "./ChainView";

import { LifecycleMap } from "./LifecycleMap";

import { ToolsPanel } from "./ToolsPanel";

type Panel = "timeline" | "chain" | "lifecycle" | "tools";

const PANEL_TABS = [

["timeline", "Timeline"],

["chain", "Chain View"],

["lifecycle", "Lifecycle Map"],

["tools", "Tools"],

] as const satisfies readonly (readonly [Panel, string])[];

const MAX_TRACE_EVENTS = 5000;

function askErrorText(err: unknown): string {

if (err instanceof AskError) {

// R7 限额:与「并发会话数满」同为 429,靠服务端给的 code 分档

if (err.code === "daily_tokens" || err.code === "daily_cost") {

return "今天的对话额度已经用完了,明天再来吧。";

}

if (err.code === "turn_limit") return "这个会话的轮数已达上限,新建一个会话继续吧。";

if (err.status === 409) return "上一轮回复还在进行中,请等它结束再发。";

if (err.status === 429) return "当前会话数已满,请稍后再试。";

if (err.status === 404) return "这个会话已不存在,请新建一个会话。";

}

return "请求失败了,请稍后再试。";

}

function SessionSidebar({

sessions,

selected,

onSelect,

onNew,

onRefresh,

onDelete,

}: {

sessions: SessionSummary[];

selected: string | null;

onSelect: (id: string) => void;

onNew: () => void;

onRefresh: () => void;

onDelete: (id: string) => void;

}) {

const [hovered, setHovered] = useState<string | null>(null);

return (

<div style={{ width: 260, flex: "none", background: "var(--bg-panel)", borderRight: "1px solid var(--border)", display: "flex", flexDirection: "column" }}>

<div style={{ display: "flex", alignItems: "center", gap: 6, padding: "9px 10px", borderBottom: "1px solid var(--border)" }}>

<div style={{ fontSize: 12, fontWeight: 600, color: "var(--text-muted)", flex: 1 }}>Sessions</div>

<GhostButton height={28} onClick={onNew}>+ New</GhostButton>

<GhostButton height={28} style={{ width: 28, padding: 0 }} onClick={onRefresh}>

<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">

<path d="M23 4v6h-6" />

<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />

</svg>

</GhostButton>

</div>

<div style={{ padding: 8, display: "flex", flexDirection: "column", gap: 2, overflow: "auto" }}>

{sessions.map((s) => (

<div

key={s.id}

onClick={() => onSelect(s.id)}

style={{ position: "relative", padding: "7px 10px", borderRadius: 6, background: selected === s.id ? "var(--bg-selected)" : "transparent", cursor: "pointer" }}

onMouseEnter={(e) => { setHovered(s.id); if (selected !== s.id) e.currentTarget.style.background = "var(--bg-hover)"; }}

onMouseLeave={(e) => { setHovered(null); if (selected !== s.id) e.currentTarget.style.background = "transparent"; }}

>

<div style={{ fontSize: 13, color: "var(--text)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{s.title || "新会话"}</div>

<div style={{ fontSize: 11, color: "var(--text-dim)", marginTop: 2 }}>{relativeTime(s.lastActiveAt)}</div>

{hovered === s.id && (

<div

style={{ position: "absolute", top: 6, right: 6 }}

onClick={(e) => { e.stopPropagation(); onDelete(s.id); }}

>

<GhostButton height={20} style={{ width: 20, padding: 0, borderRadius: 5 }}>

<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">

<path d="M18 6 6 18M6 6l12 12" />

</svg>

</GhostButton>

</div>

)}

</div>

))}

</div>

</div>

);

}

function ToolChip({

name,

preview,

dur,

error,

open,

onToggle,

}: {

name: string;

preview: string;

dur: string;

error: boolean;

open: boolean;

onToggle: () => void;

}) {

return (

<div

onClick={onToggle}

style={{

background: error ? "var(--err-bg)" : "var(--ok-bg)",

border: `1px solid ${error ? "var(--err-border)" : "var(--ok-border)"}`,

borderRadius: 7, padding: "7px 10px", display: "flex", alignItems: "center", gap: 8,

cursor: "pointer",

}}

>

<span style={{ ...mono(12, 600), color: error ? "var(--err-text)" : "var(--ok-text)" }}>{name}</span>

<span style={{ ...mono(11), color: "var(--text-dim)", flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{preview}</span>

<span style={{ fontSize: 11, color: "var(--text-muted)", fontVariantNumeric: "tabular-nums" }}>{dur}</span>

<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--text-dim)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">

<polyline points={open ? "18 15 12 9 6 15" : "6 9 12 15 18 9"} />

</svg>

</div>

);

}

function ToolCard({

call,

open,

onToggle,

rowLink,

}: {

call: ToolCallView;

open: boolean;

onToggle: () => void;

/** R-CROSSLINK C2 卡 → 行(画板 2q / 4w):`has` 决定链接渲不渲染,`go` 去右栏定位那一行 */

rowLink?: CrossLink;

}) {

const error = call.isError;

const chip = (

<ToolChip name={call.name} preview={call.inputPreview} dur={toolDuration(call)} error={error} open={open} onToggle={onToggle} />

);

if (!open) return chip;

const body = { font: "400 11px/1.6 var(--font-mono)", maxHeight: 106, overflow: "hidden", wordBreak: "break-all" } as const;

const label = { ...mono(10, 600), color: "var(--text-dim)", letterSpacing: "0.08em" } as const;

return (

<div>

{chip}

<div

style={{

background: "var(--bg-subtle)",

border: `1px solid ${error ? "var(--err-border)" : "var(--ok-border)"}`,

borderRadius: 6, padding: "10px 12px", marginTop: 4,

}}

>

<div style={{ ...label, marginBottom: 3 }}>INPUT</div>

<div style={{ ...body, color: "var(--text)" }}>{call.inputPreview}</div>

<div style={{ ...label, margin: "10px 0 3px" }}>RESULT</div>

<div style={{ ...body, color: error ? "var(--err-text)" : "var(--text)" }}>{call.resultPreview}</div>

{/* R-CROSSLINK C2(画板 2q):这条链接在展开体**之内**而不是卡片下面 —— 出了展开体它就成了

移动端的 44 命中区与去掉的上外边距在 globals.css 的 `.m-locate-*`(画板 4w)。 */}

{rowLink?.has(call.toolCallId) && (

<div className="m-locate-row" style={{ marginTop: 10 }}>

<button

className="m-locate-link"

onClick={() => rowLink.go(call.toolCallId)}

onMouseEnter={(e) => { e.currentTarget.style.background = "var(--bg-hover)"; }}

onMouseLeave={(e) => { e.currentTarget.style.background = "none"; }}

style={{

...mono(11), color: "var(--accent)", borderRadius: 5, padding: "2px 6px",

marginLeft: -6, background: "none", border: "none", cursor: "pointer", whiteSpace: "nowrap",

}}

>

在 Timeline 里查看 ↗

</button>

</div>

)}

</div>

</div>

);

}

function FoldRow({ turn, open, onToggle }: { turn: TurnView; open: boolean; onToggle: () => void }) {

return (

<div

onClick={onToggle}

style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--text-muted)", cursor: "pointer" }}

onMouseEnter={(e) => { e.currentTarget.style.color = "var(--accent)"; }}

onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-muted)"; }}

>

<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--text-dim)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">

<polyline points={open ? "6 9 12 15 18 9" : "9 6 15 12 9 18"} />

</svg>

<span style={{ fontSize: 13, lineHeight: 1.7 }}>{foldLabel(turn)}</span>

{hasFailure(turn) && <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--err-text)", flex: "none" }} />}

</div>

);

}

export const AssistantMessage = memo(function AssistantMessage({

text,

streaming = false,

onAsk,

components = true,

}: {

text: string;

streaming?: boolean;

onAsk?: (text: string) => void;

components?: boolean;

}) {

return (

<div className="md-chat" style={{ minWidth: 0 }}>

<Markdown headingIds={false} cards={components} html={components} streaming={streaming} onAsk={onAsk}>{text}</Markdown>

</div>

);

});

export const AssistantTurn = memo(function AssistantTurn({

text,

turn,

done,

rowLink,

locate,

onAsk,

}: {

text: string;

turn: TurnView;

done: boolean;

/** R-CROSSLINK C2:卡片展开体里那条「在 Timeline 里查看 ↗」(画板 2q) */

rowLink?: CrossLink;

/** R-CROSSLINK C2 行 → 卡:右栏要求定位到某个 toolCallId;不在本轮里就什么都不做 */

locate?: { toolCallId: string; nonce: number } | null;

/** R-CARDS:信息卡片动作按钮的预填通路,只递给最终回答段(R-CARDS-2 起处理过程段不开组件) */

onAsk?: (text: string) => void;

}) {

const [open, setOpen] = useState(false);

const [openCards, setOpenCards] = useState<Record<number, boolean>>({});

const { process, final } = useMemo(() => splitTurn(text, turn.toolCalls), [text, turn.toolCalls]);

const toggleCard = (index: number) => setOpenCards((prev) => ({ ...prev, [index]: !prev[index] }));

const rootRef = useRef<HTMLDivElement | null>(null);

/**

const appliedNonce = useRef(0);

useEffect(() => {

if (!locate || locate.nonce === appliedNonce.current) return;

const index = turn.toolCalls.findIndex((c) => c.toolCallId === locate.toolCallId);

if (index < 0) return; // 不是本轮的卡

appliedNonce.current = locate.nonce;

setOpen(true);

setOpenCards((prev) => ({ ...prev, [index]: true }));

const timer = setTimeout(() => {

const nodes = rootRef.current?.querySelectorAll<HTMLElement>("[data-tool-call-id]") ?? [];

for (const node of nodes) {

if (node.dataset.toolCallId === locate.toolCallId) {

node.scrollIntoView({ block: "center" });

return;

}

}

}, 0);

return () => clearTimeout(timer);

}, [locate, turn.toolCalls]);

// R-CARDS:`streaming` 按整轮给 —— 已完成的文本段里不会有未闭合的围栏(围栏未闭合 = 正文后缀,而它们后面还跟着卡),

// 所以骨架只会出现在正在长的最后一段;闭合了的坏 JSON 在任何一段都直接是代码块。

// R-CARDS-2:处理过程段**不开组件**(`components={false}`,画板 2u / 2v:组件只在最终回答的首或尾、不进折叠行);

// 流式期间「最终段」= 最后一次工具调用之后的正文,模型在组件之后又调了工具的话,那些组件会随正文进折叠行并变回代码块(任务卡已认)

const segment = (seg: TurnSegment, i: number) =>

seg.kind === "text" ? (

<AssistantMessage key={i} text={seg.text} streaming={!done} components={false} />

) : (

<div key={i} data-tool-call-id={seg.call.toolCallId}>

<ToolCard call={seg.call} open={!!openCards[seg.index]} onToggle={() => toggleCard(seg.index)} rowLink={rowLink} />

</div>

);

const finalAnswer = final.trim() !== "" ? <AssistantMessage text={final} streaming={!done} onAsk={onAsk} /> : null;

if (!done) {

return (

<div ref={rootRef} style={{ display: "flex", flexDirection: "column", gap: 14, minWidth: 0 }}>

{process.map(segment)}

{finalAnswer}

</div>

);

}

return (

<div ref={rootRef} style={{ display: "flex", flexDirection: "column", gap: 14, minWidth: 0 }}>

<FoldRow turn={turn} open={open} onToggle={() => setOpen((o) => !o)} />

{open && (

<div style={{ borderLeft: "1px solid var(--border)", marginLeft: 5, paddingLeft: 14, display: "flex", flexDirection: "column", gap: 14 }}>

{process.map(segment)}

</div>

)}

{finalAnswer}

</div>

);

});

function ChatPane({

items,

rowLink,

locate,

onAsk,

}: {

items: ChatItem[];

rowLink?: CrossLink;

locate?: { toolCallId: string; nonce: number } | null;

/** R-CARDS:信息卡片动作按钮 → 输入框(预填,不发送);可回传卡的发送通路走 ComposerContext(R-CARDS-2) */

onAsk?: (text: string) => void;

}) {

const scrollRef = useRef<HTMLDivElement | null>(null);

// 末项的「长度」= 正文长度 + 工具卡数:卡片到达而正文没变的那一帧也要跟着滚到底

const last = items[items.length - 1];

const tail = (last?.text.length ?? 0) + (last?.kind === "assistant" ? (last.turn?.toolCalls.length ?? 0) : 0);

useEffect(() => {

scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth" });

}, [items.length, tail]);

return (

<div ref={scrollRef} style={{ flex: 1, overflow: "auto", padding: "18px 20px", display: "flex", flexDirection: "column", gap: 14 }}>

{items.map((item, i) => {

if (item.kind === "user") {

return (

<div key={i} style={{ display: "flex", justifyContent: "flex-end" }}>

<div style={{ maxWidth: "85%", background: "var(--user-bg)", border: "1px solid rgba(59,130,246,0.2)", borderRadius: 12, padding: "8px 12px", fontSize: 14, lineHeight: 1.7 }}>

{item.text}

</div>

</div>

);

}

// R-TOOLCARDS:有工具调用的一轮走 AssistantTurn;没有的与改动前一字不差(任务卡验收 #4)

if (item.turn) return <AssistantTurn key={i} text={item.text} turn={item.turn} done={item.done} rowLink={rowLink} locate={locate} onAsk={onAsk} />;

return <AssistantMessage key={i} text={item.text} streaming={!item.done} onAsk={onAsk} />;

})}

</div>

);

}

function EmptyState({ onSuggest }: { onSuggest: (text: string) => void }) {

const ICONS: Record<string, React.ReactNode> = {

shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />,

chat: <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />,

slash: (

<>

<circle cx="12" cy="12" r="10" />

<line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />

</>

),

};

return (

<div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>

<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10, width: 360 }}>

<div style={{ fontSize: 18, fontWeight: 600 }}>Agent X-Ray</div>

<div style={{ fontSize: 14, color: "var(--text-muted)", textAlign: "center", marginBottom: 8 }}>

和 agent 说点什么 — 右侧实时显示它的内核如何运转

</div>

<div style={{ display: "flex", flexDirection: "column", gap: 8, width: 340 }}>

{suggestions.map((s) => (

<GhostButton key={s.text} height={36} onClick={() => onSuggest(s.text)} style={{ fontSize: 13, justifyContent: "flex-start" }}>

<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">

{ICONS[s.icon]}

</svg>

{s.text}

</GhostButton>

))}

</div>

</div>

</div>

);

}

function useAutoGrow(ref: React.RefObject<HTMLTextAreaElement | null>, value: string) {

useEffect(() => {

const el = ref.current;

if (!el) return;

// clientHeight 含 padding 不含 border,offsetHeight 两者都含 —— 差值就是上下 border。

// 盒模型是 border-box,直接把 scrollHeight 写进 height 会一次比一次矮 2px。

const borders = el.offsetHeight - el.clientHeight;

el.style.height = "auto";

el.style.height = `${el.scrollHeight + borders}px`;

}, [ref, value]);

}

const INPUT_LINE = 19;

const INPUT_MAX_LINES = 5;

function InputBar({

value,

onChange,

onSend,

busy,

inputRef,

}: {

value: string;

onChange: (v: string) => void;

onSend: () => void;

busy: boolean;

/** R-CROSSLINK:预填之后要把光标停在句尾(画板 2q),所以容器要拿得到这个输入框 */

inputRef: React.RefObject<HTMLTextAreaElement | null>;

}) {

useAutoGrow(inputRef, value);

return (

// align-items 从 center 改成 flex-end(画板 2q 的输入栏就是 flex-end):

// 单行时两者一模一样,长到两行时发送按钮跟着底边走,与画板一致

<div style={{ padding: "12px 16px", borderTop: "1px solid var(--border)", display: "flex", gap: 8, alignItems: "flex-end" }}>

<textarea

ref={inputRef}

rows={1}

value={value}

onChange={(e) => onChange(e.target.value)}

onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); onSend(); } }}

placeholder="和 agent 说点什么…(右侧实时显示内核轨迹)"

style={{

flex: 1, border: "1px solid var(--border)", borderRadius: 7, padding: "8px 12px",

fontSize: 14, color: "var(--text)", background: "var(--bg)", outline: "none", font: "inherit",

resize: "none", overflowY: "auto", display: "block",

lineHeight: `${INPUT_LINE}px`,

// 上下 padding 16 + 上下 border 2

maxHeight: INPUT_MAX_LINES * INPUT_LINE + 18,

}}

/>

<GhostButton

height={32}

style={{ width: 32, padding: 0 }}

onClick={onSend}

disabled={busy}

title={busy ? "回复生成中…" : "发送"}

>

{busy ? (

// 3/4 圆弧转圈。transformOrigin 显式给 50%:SVG 里它的默认值不是盒中心,

// 不写会绕着左上角甩。keyframes omSpin 在 app/globals.css。

<svg

width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"

strokeWidth="2.4" strokeLinecap="round"

style={{ animation: "omSpin 0.8s linear infinite", transformOrigin: "50% 50%" }}

>

<path d="M12 3a9 9 0 1 0 9 9" />

</svg>

) : (

<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">

<line x1="22" y1="2" x2="11" y2="13" />

<polygon points="22 2 15 22 11 13 2 9 22 2" />

</svg>

)}

</GhostButton>

</div>

);

}

export function Workbench() {

const [sessions, setSessions] = useState<SessionSummary[]>([]);

const [sessionId, setSessionId] = useState<string | null>(null);

const [items, setItems] = useState<ChatItem[]>([]);

const [draft, setDraft] = useState("");

const [streaming, setStreaming] = useState(false);

const [loadingHistory, setLoadingHistory] = useState(false);

const [panel, setPanel] = useState<Panel>("timeline");

const [events, setEvents] = useState<TraceEvent[]>([]);

/**

const [usage, setUsage] = useState<SessionUsage | null>(null);

// 会话切换的请求序号:连点两个会话时,先发后到的历史加载必须被丢弃,

// 否则 UI 会被旧会话的消息覆盖(codex review P2)

const loadSeq = useRef(0);

// ── R-CROSSLINK:三条联动共用的那一个原语 + 两个方向的定位 ────────────────

// 输入框(桌面 InputBar / 移动壳各一份,同一个 ref —— 两套壳同时只挂一套)

const inputRef = useRef<HTMLTextAreaElement | null>(null);

// 「又预填了一次」的信号:同一句话连点两次时文本不变,靠它把光标重新放到句尾

const [prefillAt, setPrefillAt] = useState(0);

// 受控定位:key / toolCallId 相同的连点也要再滚一次,所以带 nonce

const [locateRow, setLocateRow] = useState<{ key: string; nonce: number } | null>(null);

const [locateCard, setLocateCard] = useState<{ toolCallId: string; nonce: number } | null>(null);

// 移动壳的运行时 Sheet:预填时关(画板 4v)、定位时开到 large(画板 4w)。

// 桌面壳没有 Sheet,这个 state 对它是死的。

const [sheetRequest, setSheetRequest] = useState<{ action: "open" | "close"; nonce: number } | null>(null);

const nonce = useRef(0);

/** 两个方向的定位请求一起作废。切会话、开新会话都要调 —— 它们只在一个会话里有意义。 */

const clearLocate = useCallback(() => {

setLocateRow(null);

setLocateCard(null);

}, []);

// R-MOBILE:决定挂哪一套壳。状态、取数与两条 SSE 都在本容器里,

// 所以无论哪一套壳,**全站只有一份订阅**(这正是不用纯 CSS 分流的原因)。

const isMobile = useIsMobile();

const active = sessionId !== null || items.length > 0;

const title = sessions.find((s) => s.id === sessionId)?.title || "";

// 右栏实际显示的面板:空状态下前三个 tab 都落到 Lifecycle 待命图(画板 1e),

// Tools 不受此约束(它不依赖会话)

const shownPanel: Panel = active || panel === "tools" ? panel : "lifecycle";

// 右栏三视图 = 同一条轨迹流的三种投影(docs/architecture.md)。

// 必须 memo:events 最多 5000 条,而输入框每敲一个字都会触发重渲染——

// 不 memo 的话每次击键都要把整条轨迹重投影三遍。

const timelineTurns = useMemo(() => toTimelineTurns(events, streaming), [events, streaming]);

const chain = useMemo(() => toChainView(events), [events]);

const lifeNodes = useMemo(() => toLifecycleNodes(events, streaming), [events, streaming]);

/**

const prefill = useCallback((text: string) => {

const clean = sanitizePrefill(text);

if (!clean) return;

setDraft(clean);

setPrefillAt((n) => n + 1);

// 移动端关掉运行时 Sheet(画板 4v:目标是让访客打字,Sheet 留在屏上只会挡键盘)

setSheetRequest({ action: "close", nonce: ++nonce.current });

inputRef.current?.focus();

}, []);

// 预填之后把光标停在句尾(画板 2q:光标在句尾、发送按钮常态可点)。

// 只认 prefillAt —— 挂 draft 的话每敲一个字都会把光标弹到末尾。

useEffect(() => {

if (prefillAt === 0) return;

const el = inputRef.current;

if (!el) return;

const end = el.value.length;

el.setSelectionRange(end, end);

}, [prefillAt]);

/**

useEffect(() => {

const url = new URL(window.location.href);

const text = readAskParam(url.search);

// 【判「有没有 ask」只能问 URLSearchParams,不能在原始串上找 "ask="】(codex 第 1 轮 P2)

// `/?%61sk=hello` 里参数名是编码过的:`readAskParam` 经 URLSearchParams 解码后认得它、照常预填,

// 而字面匹配认不出 → 参数留在地址栏、刷新再预填一次,「读一次即清」当场失效。

if (url.searchParams.has("ask")) {

url.searchParams.delete("ask");

window.history.replaceState(null, "", `${url.pathname}${url.search}${url.hash}`);

}

if (!text) return;

setDraft(text);

setPrefillAt((n) => n + 1);

// 这一次不是用户手势(是刚落地),iOS 大概率不弹键盘;桌面与安卓会聚焦,

// 与画板 4x「聚焦并弹键盘」尽量对齐,拿不到也不影响文本已经在框里

inputRef.current?.focus();

}, []);

/**

const cardIds = useMemo(() => {

const ids = new Set<string>();

for (const item of items) {

if (item.kind !== "assistant" || !item.turn) continue;

for (const call of item.turn.toolCalls) ids.add(call.toolCallId);

}

return ids;

}, [items]);

const rowKeyById = useMemo(() => {

const map = new Map<string, string>();

for (const turn of timelineTurns) {

for (const row of turn.rows) if (row.toolCallId !== undefined) map.set(row.toolCallId, row.key);

}

return map;

}, [timelineTurns]);

const cardIdsRef = useRef(cardIds);

const rowKeyRef = useRef(rowKeyById);

cardIdsRef.current = cardIds;

rowKeyRef.current = rowKeyById;

/**

const cardLink = useMemo<CrossLink>(

() => ({

has: (id) => cardIdsRef.current.has(id),

go: (id) => {

setLocateCard({ toolCallId: id, nonce: ++nonce.current });

setSheetRequest({ action: "close", nonce: ++nonce.current });

},

}),

[],

);

/** 会话区卡片的「在 Timeline 里查看 ↗」:切到 Timeline、展开那一行并滚进视野;移动端顺带把 Sheet 升到 large */

const rowLink = useMemo<CrossLink>(

() => ({

has: (id) => rowKeyRef.current.has(id),

go: (id) => {

const key = rowKeyRef.current.get(id);

if (key === undefined) return;

setPanel("timeline");

setLocateRow({ key, nonce: ++nonce.current });

setSheetRequest({ action: "open", nonce: ++nonce.current });

},

}),

[],

);

const refreshSessions = useCallback(() => {

listSessions()

.then(setSessions)

.catch((err) => console.error("load sessions failed:", err));

}, []);

useEffect(refreshSessions, [refreshSessions]);

// 会话确定后订阅轨迹流:先回放该会话已有轨迹,再 live tail。

// 服务端每条流有存活上界(客户端断开探测不到,见 apps/api/trace/stream.ts),

// 到点由 trace-api 凭 afterSeq 自动续上,这里不必感知。

useEffect(() => {

setEvents([]);

if (!sessionId) return;

return openTraceStream(sessionId, {

onEvent: (event) =>

setEvents((prev) => {

// seq 严格递增到达;重连窗口里的重复/乱序帧一律丢弃

if (prev.length > 0 && event.seq <= prev[prev.length - 1].seq) return prev;

const next = [...prev, event];

return next.length > MAX_TRACE_EVENTS ? next.slice(next.length - MAX_TRACE_EVENTS) : next;

}),

});

}, [sessionId]);

const openSession = useCallback(

(id: string) => {

if (streaming) return;

const seq = ++loadSeq.current;

setPanel("timeline");

// 目标会话立刻生效:即便加载还没回来,状态也已经指向**这个**会话

setSessionId(id);

setItems([]);

// 定位请求属于**上一个**会话(codex 第 1 轮 P2):行键是 `s<seq>` 而 seq 每个会话都从 0 起,

// 留着它的话,下一次 TimelineView 挂载(移动端关掉再打开 Sheet 就是一次)会拿旧请求去展开

// 新会话里同键的**无关行**,还顺手关掉贴底跟随。卡片那侧同理(toolCallId 不跨会话)。

clearLocate();

// 统计条与 items / events 同时作废(codex 第 1 轮 P2):加载期间留着上一个会话的

// 数字会张冠李戴,加载失败时那个错的数字还会永久留在顶栏

setUsage(null);

setLoadingHistory(true);

getSession(id)

.then(({ session, messages, ctxPercent }) => {

if (loadSeq.current !== seq) return; // 已被更晚的选择/新建取代

// 统计条初值(R-USAGE):tokens 来自库内累计,一定有;ctxPercent 只有该会话

// 恰好还活在运行时注册表里才有 —— 没有就是没有,显示 `-`,不拿别的数顶替

setUsage({

totalTokens: session.totalTokens,

...(typeof ctxPercent === "number" ? { ctxPercent } : {}),

});

// 回放:`turn` 只在有工具调用的助手行上存在(服务端从 payload 白名单派生),

// 旧行 / 无工具的一轮没有它,渲染成纯正文 —— 与实时收尾后的形状是同一份(验收 #3 / #5)

setItems(

messages.map((m) =>

m.role === "user"

? { kind: "user", text: m.content }

: { kind: "assistant", text: m.content, turn: m.turn, done: true },

),

);

})

.catch((err) => console.error("load session failed:", err))

.finally(() => {

if (loadSeq.current === seq) setLoadingHistory(false);

});

},

[streaming, clearLocate],

);

const startNew = useCallback(() => {

if (streaming) return;

loadSeq.current++; // 作废在途的历史加载

setLoadingHistory(false);

setSessionId(null);

setItems([]);

setDraft("");

setPanel("timeline");

setUsage(null); // 新会话没有累计,统计条回到占位(R-USAGE)

clearLocate(); // 同 openSession:定位请求不跨会话

}, [streaming, clearLocate]);

/**

const removeSession = useCallback(

(id: string) => {

if (streaming) return;

const title = sessions.find((s) => s.id === id)?.title || "新会话";

if (!window.confirm(`删除会话「${title}」?对话内容与轨迹会一并删除,不可恢复。`)) return;

deleteSession(id)

.then(() => {

if (sessionId === id) startNew();

})

.catch((err) => console.error("delete session failed:", err))

.finally(refreshSessions);

},

[streaming, sessions, sessionId, startNew, refreshSessions],

);

/**

const sendText = useCallback((text: string): boolean => {

const prompt = text.trim();

// 历史加载未回来时不收发送:此时 items 已被清空,若在这里作废加载结果,

// 这个会话的历史就再也不会出现在界面上(复审 P2)。加载只有几十毫秒,

// 与 streaming 期间的拦截是同一种处理。

if (!prompt || streaming || loadingHistory) return false;

setPanel("timeline");

setItems((prev) => [...prev, { kind: "user", text: prompt }]);

setStreaming(true);

// 首个 delta **或首个 tool_start** 到达时才建助手项(避免先渲染一个空行;模型可能一句话没说先调工具),

// 之后每一帧就地替换它。「是否首帧」在调用点定死,不在 setItems 更新函数里读可变量——

// 更新函数由 React 择时执行,读到的会是变更后的值。

//

// 服务端 delta 是**逐 token** 发的(apps/api/agent/ask.ts),一条长回复几千帧;

// 助手气泡改渲染 markdown 之后,一帧一次 setItems 就等于一帧解析一遍整篇正文。

// 这里按动画帧合帧:攒在 assistant / turn 里,一帧最多提交一次,渲染开销与 token 速率脱钩;

// 工具帧走同一个合帧出口。帧回调在页面隐藏时不跑,所以每个出口都要先 flushNow() 把攒下的落地。

//

// R-TOOLCARDS:`turn` 只在第一个 tool_start 到达时建(没有工具调用的一轮不会有它,渲染与改动前一字不差),

// 卡片按服务端给的 `at` 落位;提交时深拷贝一份给 React,本地这份继续原地累积。

let assistant = "";

let turn: TurnView | undefined;

let started = false;

let finalized = false;

let pending = false;

let frame = 0;

const snapshot = (done: boolean): ChatItem => ({

kind: "assistant",

text: assistant,

turn: turn ? { ...turn, toolCalls: turn.toolCalls.map((c) => ({ ...c })) } : undefined,

done,

});

const commit = (done = false) => {

const item = snapshot(done);

const first = !started;

started = true;

setItems((prev) => (first ? [...prev, item] : [...prev.slice(0, -1), item]));

};

const flushNow = () => {

if (frame) { cancelAnimationFrame(frame); frame = 0; }

if (pending) { pending = false; commit(); }

};

const schedule = () => {

pending = true;

if (!frame) frame = requestAnimationFrame(() => { frame = 0; flushNow(); });

};

const onDelta = (text: string) => {

assistant += text;

schedule();

};

const onToolStart = (call: { toolCallId: string; name: string; at: number; inputPreview: string }) => {

turn ??= { modelRoundTrips: 0, turnMs: 0, toolCalls: [] };

turn.toolCalls.push({ ...call, resultPreview: "", isError: false });

schedule();

};

const onToolEnd = (end: { toolCallId: string; resultPreview: string; isError: boolean; durationMs: number }) => {

const call = turn?.toolCalls.find((c) => c.toolCallId === end.toolCallId);

if (!call) return;

call.resultPreview = end.resultPreview;

call.isError = end.isError;

call.durationMs = end.durationMs;

schedule();

};

// 收尾(done / error / 网络断开三处都走这里,只生效一次):先把在途帧落地,再把助手项标成 done ——

// 折叠只在这一刻发生一次(画板 2l 规则 2)。没等到 tool_end 的卡按服务端同一条兜底规则标成错误态、

// 耗时留空(turn-recorder.ts 的 finish),实时与回放看到的因此是同一份(验收 #3)。

//

// 没有收尾帧(连接中途断开、done / error 都没到)就**不折叠**:折叠行要的两个数拿不到,编一行

// 「0 次模型往返 · 0ms」是撒谎。保持内联态、只把在途的落地 —— 与改动前的行为相同;重新打开会话时

// 按库里那份(服务端 finish 落的)回放。

const finalize = (summary?: TurnSummary) => {

if (finalized) return;

finalized = true;

flushNow();

if (!started) return;

if (turn) {

if (!summary) return;

turn.modelRoundTrips = summary.modelRoundTrips;

turn.turnMs = summary.turnMs;

for (const c of turn.toolCalls) {

if (c.durationMs === undefined) { c.isError = true; c.resultPreview = ""; }

}

}

commit(true);

};

askStream(

{ prompt, sessionId: sessionId ?? undefined },

{

onSession: setSessionId,

onDelta,

onToolStart,

onToolEnd,

onDone: finalize,

// R-USAGE:一轮结束时顶栏当场更新(done 与 error 两种收尾都会给)

onUsage: setUsage,

// 先收尾再追加错误行:否则后到的 flush 会以「就地替换末项」的语义把这条错误消息顶掉。

onError: (message, summary) => {

finalize(summary);

setItems((prev) => [...prev, { kind: "assistant", text: message, done: true }]);

},

},

)

.catch((err) => {

console.error("ask failed:", err);

finalize();

setItems((prev) => [...prev, { kind: "assistant", text: askErrorText(err), done: true }]);

})

.finally(() => {

finalize();

setStreaming(false);

refreshSessions();

});

return true;

}, [streaming, loadingHistory, sessionId, refreshSessions]);

const send = useCallback(() => {

if (sendText(draft)) setDraft("");

}, [sendText, draft]);

/**

const sendTextRef = useRef(sendText);

useEffect(() => { sendTextRef.current = sendText; }, [sendText]);

// 回「发没发出去」:清洗闸丢弃、或 sendText 的守卫拒收,都回 false,卡不锁(codex 第 1 轮 P2)。

// ref 在 passive effect 里同步:React 在处理下一个离散事件(点击)之前一定先冲掉上一次提交的 passive effect,所以卡点到的永远是最新那份 sendText。

const sendFromCard = useCallback((text: string): boolean => {

const clean = sanitizePrefill(text);

if (!clean) return false;

return sendTextRef.current(clean);

}, []);

// 可回传卡读的那份:值只在一轮开始 / 结束时换,消费者只有卡本身(ComposerContext.tsx)

const composer = useMemo(() => ({ busy: streaming, onSend: sendFromCard }), [streaming, sendFromCard]);

// ── R-MOBILE:移动壳 ─────────────────────────────────────────────────

// 桌面壳一行没动,原样留在下面。这里是**并列的第二种呈现**,不是改造。

if (isMobile) {

return (

<ComposerContext.Provider value={composer}>

<MobileWorkbench

sessions={sessions}

sessionId={sessionId}

draft={draft}

streaming={streaming}

active={active}

title={title}

usage={usage}

eventCount={events.length}

shownPanel={shownPanel}

onPanel={setPanel}

onDraft={setDraft}

onSend={send}

onSelect={openSession}

onNew={startNew}

onDelete={removeSession}

onRefresh={refreshSessions}

// R-CROSSLINK:预填要能聚焦到移动端这只输入框(画板 4v),Sheet 的开关由容器按动作请求

inputRef={inputRef}

sheetRequest={sheetRequest}

renderChat={() => <MobileChat items={items} rowLink={rowLink} locate={locateCard} onAsk={prefill} />}

renderEmpty={() => <MobileEmptyState onSuggest={setDraft} />}

// 内核层照搬:Sheet 里装的就是桌面右栏那四个组件本身

renderPanel={(p, onPanelExpand) =>

p === "tools" ? (

<ToolsPanel />

) : !active ? (

<LifecycleMap nodes={lifeNodes} idle compact />

) : p === "timeline" ? (

<TimelineView

turns={timelineTurns}

compact

onExpand={onPanelExpand}

onAskWhy={prefill}

cardLink={cardLink}

locate={locateRow}

/>

) : p === "chain" ? (

<ChainView chain={chain} compact />

) : (

<LifecycleMap nodes={lifeNodes} compact />

)

}

/>

</ComposerContext.Provider>

);

}

return (

// `m-hide-narrow`:窄屏下桌面壳整块不渲染出来。与上面的 `isMobile` 分支成对 ——

// JS 保证只挂一份 SSE,CSS 保证水合首帧那一瞬不会把三栏画到 390 宽的屏上

// (理由见 lib/use-mobile.ts)。桌面上这个类名不产生任何效果。

// R-CARDS-2:ComposerContext.Provider 不产生 DOM,桌面壳的标记与改动前一字不差

<ComposerContext.Provider value={composer}>

<div className="m-hide-narrow" style={{ flex: 1, minHeight: 0, display: "flex" }}>

<SessionSidebar

sessions={sessions}

selected={sessionId}

onSelect={openSession}

onNew={startNew}

onRefresh={refreshSessions}

onDelete={removeSession}

/>

<div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column" }}>

{/* 会话顶栏 */}

<div style={{ height: 40, flex: "none", display: "flex", alignItems: "center", gap: 12, padding: "0 14px", borderBottom: "1px solid var(--border)" }}>

<div style={{ fontSize: 13, fontWeight: active ? 600 : 400, color: active ? "var(--text)" : "var(--text-dim)", flex: 1 }}>

{active ? title || "新会话" : "未选择会话"}

</div>

{active && (

<div style={{ fontSize: 11, color: "var(--text-dim)", fontVariantNumeric: "tabular-nums", display: "flex", alignItems: "center", gap: 6 }}>

<span>{formatTokens(usage?.totalTokens)}</span><span>·</span><span>{STAT_PLACEHOLDER}</span><span>·</span>

<span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>

<span style={{ width: 6, height: 6, borderRadius: "50%", background: "#16a34a", display: "inline-block" }} />

{formatCtx(usage?.ctxPercent)}

</span>

<span>·</span><span>{events.length} events</span>

</div>

)}

</div>

<div style={{ flex: 1, minHeight: 0, display: "flex" }}>

{/* 中栏:对话 */}

<div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", borderRight: "1px solid var(--border)" }}>

{active ? (

<ChatPane items={items} rowLink={rowLink} locate={locateCard} onAsk={prefill} />

) : (

<EmptyState onSuggest={setDraft} />

)}

<InputBar value={draft} onChange={setDraft} onSend={send} busy={streaming} inputRef={inputRef} />

</div>

{/* 右栏:运行时面板 */}

<div className="runtime-panel" style={{ width: "42%", minWidth: 300, maxWidth: 500, flex: "none", display: "flex", flexDirection: "column" }}>

<div style={{ display: "flex", background: "var(--bg-panel)", borderBottom: "1px solid var(--border)" }}>

{PANEL_TABS.map(([key, label]) => {

// 空状态右栏展示 Lifecycle 待命图,tab 高亮随之(画板 1e);

// Tools 例外:它不依赖会话,空会话下切过去也有内容(R-TOOLS 验收 #4)

const highlighted = key === shownPanel;

return (

<div

key={key}

onClick={() => setPanel(key)}

style={{

fontSize: 12, fontWeight: highlighted ? 600 : 400, padding: "8px 14px",

background: highlighted ? "var(--bg)" : "transparent",

color: highlighted ? "var(--text)" : "var(--text-muted)",

borderRight: "1px solid var(--border)", cursor: "pointer",

}}

>

{label}

</div>

);

})}

</div>

{shownPanel === "tools" ? (

<ToolsPanel />

) : !active ? (

<LifecycleMap nodes={lifeNodes} idle />

) : shownPanel === "timeline" ? (

<TimelineView turns={timelineTurns} onAskWhy={prefill} cardLink={cardLink} locate={locateRow} />

) : shownPanel === "chain" ? (

<ChainView chain={chain} />

) : (

<LifecycleMap nodes={lifeNodes} />

)}

</div>

</div>

</div>

</div>

</ComposerContext.Provider>

);

}