@spzxg/cli-ui 0.6.2 → 0.6.6

package/src/operator/node/SessionView.tsx

@@ -0,0 +1,288 @@
+"use client";
+
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import type { Status, Priority, AskQuestion, AskAnswers } from "./protocol/types";
+import { OperatorBoardContext, OperatorBoardQuoteContext, type OperatorBoardOptions, type OperatorBoardRequest, type OperatorBoardTarget } from "./boardInteraction";
+import { readDraft, writeDraft, type Quote } from "./composerDraft";
+import { clientFeatures } from "./protocol/features";
+import { toolDataOf } from "./transcriptModel";
+import { Icon } from "./icons";
+import { type ResolveResult } from "./TaskChanges";
+import { fmtTokens, fmtCost, fmtJobCost, isAwaiting, buildSessions, usageSplit, costDisplay } from "./format";
+import {
+  SLABEL, SSUB, AWAIT_LABEL, STATUSES, PLABEL, PRIORITIES,
+  RAIL_W,
+  type ProjectRow, type TaskRow, type Msg, type SyncStatusResp, type AgentsBundle, type InternalUsageEstimate,
+} from "./types";
+import { capsFor, agentLabel, findAgent } from "./agents";
+import { StatusDot, Popover } from "./shared";
+import { Chat } from "./Chat";
+import { TaskHero } from "./TaskHero";
+import { RunControls } from "./RunControls";
+import { CliBoard } from "../../components";
+import type { ComponentProps } from "react";
+import { useOperatorContextEvents, useOperatorFileWatch } from "./boardEvents";
+import { readBoardState, publishBoardState } from "./boardState";
+import { registerOperatorBoard } from "./boardInteraction";
+import { useConfigurationBusy } from "../../chat/configuration";
+import type { SessionRail as NodeSessionRail } from "./SessionRail";
+const SessionRail=(props:ComponentProps<typeof NodeSessionRail>)=><CliBoard operator={props}/>;
+import { ColResize, ColRail } from "./Layout";
+import { jget, downloadExport } from "./api";
+
+// Non-blocking banner shown when a reopened task's worktree is behind its base
+// branch. Computed (read-only) on open; the actual git op fires only when the user
+// clicks. Fast-forward-able tasks show nothing here — they catch up silently on the
+// next message — so the banner only appears for tier 2 (clean merge → Sync) and
+// tier 3 (conflicts → Fix with AI).
+function SyncBanner({ taskId, running, pinned, onResolveWithAI, onSwitchToChat }: {
+  taskId: string; running: boolean; pinned: boolean;
+  onResolveWithAI: (taskId: string) => Promise<ResolveResult>;
+  onSwitchToChat: () => void;
+}) {
+  const [st, setSt] = useState<SyncStatusResp | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const load = useCallback(async () => {
+    try { const r = await fetch(`/api/tasks/${taskId}/sync`, { cache: "no-store" }); setSt(await r.json()); }
+    catch { setSt(null); }
+  }, [taskId]);
+
+  // Recompute on open and whenever a turn finishes (a turn may have fast-forwarded
+  // or otherwise moved the branch). Skip while running to avoid mid-merge reads.
+  useEffect(() => { if (!running) load(); }, [running, load]);
+
+  if (!st || !st.isolated || !st.behind) return null;
+  if (st.canFastForward && !pinned) return null; // only ordinary tasks auto-follow main
+
+  const conflicts = st.conflicts?.length ?? 0;
+
+  const doSync = async () => {
+    setBusy(true);
+    try {
+      const r = await fetch(`/api/tasks/${taskId}/sync`, { method: "POST" });
+      const res = await r.json();
+      // Prediction said clean but the real merge conflicted — escalate to Fix with AI.
+      if (res?.conflicts?.length) { const fix = await onResolveWithAI(taskId); if (fix.ok && !fix.merged) onSwitchToChat(); }
+    } finally { setBusy(false); load(); }
+  };
+
+  const doFix = async () => {
+    setBusy(true);
+    try { const res = await onResolveWithAI(taskId); if (res.ok && !res.merged) onSwitchToChat(); }
+    finally { setBusy(false); load(); }
+  };
+
+  return (
+    <div className={`sync-banner${conflicts ? " conflict" : ""}`}>
+      <span className="sync-msg">
+        {conflicts > 0
+          ? `落后 ${st.baseBranch} ${st.behind} 个提交 · ${conflicts} 个文件存在冲突`
+          : `落后 ${st.baseBranch} ${st.behind} 个提交`}
+      </span>
+      <span className="sync-spacer" />
+      {conflicts > 0 ? (
+        <button className="tc-btn primary" onClick={doFix} disabled={busy || running}>{busy ? "…" : "用 AI 解决"}</button>
+      ) : (
+        <button className="tc-btn primary" onClick={doSync} disabled={busy || running}>{busy ? "同步中…" : "同步"}</button>
+      )}
+    </div>
+  );
+}
+
+export function SessionView(props: Parameters<typeof SessionViewInner>[0]) { return <SessionViewInner key={props.task.id} {...props}/>; }
+function SessionViewInner({ project, task, tasks, onSelectTask, onFork, agents, messages, running, blockedBy, transcriptLoading, older=0, onLoadOlder, onSend, onStart, onStop, onClear, clearConfirming, onConfirmClear, onCancelClear, onEdit, onReconnect, onSetStatus, onSetPriority, onSetModel, onSetAgent, onSetReasoning, onSetPermission, onSetSendContext, onResolveWithAI, onMerged, onPrCreated, onAnswer, onCancelQueued, onBack, mobile, railW, onRailWidth, onRailReset, railCollapsed, onRailCollapse, onRailExpand, board }: {
+  board?: OperatorBoardOptions;
+  tasks: TaskRow[]; onSelectTask: (id: string) => void; onFork: (text: string, sourceIds: string[], requestId: string) => Promise<boolean>;
+  project: ProjectRow; task: TaskRow; agents: AgentsBundle; messages: Msg[]; running: boolean; blockedBy?: string[]; transcriptLoading?: boolean;
+  older?: number; onLoadOlder?: (beforeApply?: () => void) => Promise<boolean>;
+  onSend: (t: string) => Promise<boolean>; onStart: () => void; onStop: () => Promise<boolean>; onClear: () => void; onEdit: () => void;
+  clearConfirming?: boolean; onConfirmClear?: () => void; onCancelClear?: () => void;
+  // Deep-link to Settings → Agents, for the transcript's "your login died" recovery button.
+  onReconnect?: () => void;
+  onSetStatus: (s: Status) => void; onSetPriority: (p: Priority) => void; onSetModel: (m: string | null) => Promise<void>;
+  onSetAgent: (id:string)=>Promise<void>;
+  onSetReasoning: (r: string | null) => Promise<void>; onSetPermission: (p: string | null) => Promise<void>;
+  onSetSendContext: (v: boolean) => void;
+  onResolveWithAI: (taskId: string) => Promise<ResolveResult>;
+  onMerged?: () => void;
+  onPrCreated?: (url: string) => void;
+  onAnswer: (askId: string, questions: AskQuestion[], answers: AskAnswers) => void;
+  onCancelQueued: (pendingId: string) => void;
+  onBack?: () => void; mobile?: boolean;
+  railW: number; onRailWidth: (w: number) => void; onRailReset: () => void;
+  railCollapsed: boolean; onRailCollapse: () => void; onRailExpand: () => void;
+}) {
+  const sessionRef = useRef<HTMLDivElement>(null);
+  useOperatorFileWatch(task.id,board?.watchFiles!==false,board,undefined,board?.fileWatchIntervalMs);
+  useOperatorContextEvents(task.id,true,board);
+  const previousAuto=useRef(board?.autoContext);
+  useLayoutEffect(()=>{
+    if(board?.autoContext===undefined&&previousAuto.current===undefined)return;
+    previousAuto.current=board?.autoContext;const view=readBoardState(task.id),enabled=board?.autoContext!==false;
+    if(view&&view.autoContext!==enabled)publishBoardState(task.id,{...view,autoContext:enabled});
+  },[task.id,board?.autoContext]);
+
+  const [compact, setCompact] = useState(false);
+  const configBusy = useConfigurationBusy(task.id);
+  useLayoutEffect(() => {
+    const el = sessionRef.current;
+    if (!el) return;
+    setCompact(el.getBoundingClientRect().width < Math.max(760, railW + 400));
+    const observer = new ResizeObserver(([entry]) => setCompact(entry.contentRect.width < Math.max(760, railW + 400)));
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [railW]);
+  const singlePane = mobile || compact;
+  const [statusOpen, setStatusOpen] = useState(false);
+  const [moreOpen, setMoreOpen] = useState(false);
+  const [view, setView] = useState<"chat" | "changes">("chat");
+  const [boardRequest,setBoardRequest]=useState<OperatorBoardRequest|null>(null);
+  const boardSequence=useRef(0);
+  const acknowledgeBoardRequest=useCallback((sequence:number)=>setBoardRequest(previous=>previous?.sequence===sequence?null:previous),[]);
+  const routing=useRef({singlePane,railCollapsed,onRailExpand,task,tasks,board});
+  routing.current={singlePane,railCollapsed,onRailExpand,task,tasks,board};
+  const openBoard=useCallback((target:OperatorBoardTarget)=>{
+    const context=routing.current;
+    if(target.kind==='browser'&&(target.taskId!==context.task.id||!clientFeatures().browser))return false;
+    if(target.kind==='file'&&(!target.path||![context.task,...context.tasks].some(t=>t.id===target.taskId&&t.project_id===context.task.project_id)))return false;
+    if(context.board?.availableTabs&&!context.board.availableTabs.includes(target.kind==='file'?'files':'browser'))return false;
+    setBoardRequest({sequence:++boardSequence.current,target});
+    if(context.singlePane)setView('changes');else if(context.railCollapsed)context.onRailExpand();
+    return true;
+  },[]);
+  useEffect(()=>registerOperatorBoard(target=>target.taskId===task.id?openBoard(target):false),[task.id,openBoard]);
+  useEffect(()=>{
+    const show=(event:Event)=>{if((event as CustomEvent<{taskId?:string}>).detail?.taskId===task.id)openBoard({kind:'browser',taskId:task.id});};
+    window.addEventListener('orch:show-browser',show);return()=>window.removeEventListener('orch:show-browser',show);
+  },[task.id,openBoard]);
+  const quoteFromBoard=useCallback((quote:Quote)=>{
+    const context=routing.current;
+    writeDraft(context.task.id,{...readDraft(context.task.id),quote});
+    if(context.singlePane)setView('chat');
+    requestAnimationFrame(()=>sessionRef.current?.querySelector<HTMLTextAreaElement>('.composer textarea')?.focus({preventScroll:true}));
+  },[]);
+  const activity=useMemo(()=>{const tool=[...messages].reverse().find(m=>m.role==='tool');return `${messages.length}:${tool?.id??''}:${tool?toolDataOf(tool).result!==undefined:false}`;},[messages]);
+  const [clearEstimate, setClearEstimate] = useState<InternalUsageEstimate | null>(null);
+  const sessions = useMemo(() => buildSessions(messages), [messages]);
+  const hasSession = task.started === 1 || messages.length > 0 || !!task.parent_task_id;
+  const awaiting = isAwaiting(task);
+  useEffect(() => {
+    if (!clearConfirming) { setClearEstimate(null); return; }
+    let alive = true;
+    jget<{ estimate: InternalUsageEstimate | null }>(`/api/tasks/${task.id}/clear`)
+      .then((r) => { if (alive) setClearEstimate(r.estimate); })
+      .catch(() => { if (alive) setClearEstimate(null); });
+    return () => { alive = false; };
+  }, [clearConfirming, task.id]);
+  // Run-control pickers + feature gates come from this task's agent capabilities,
+  // never a hardcoded list — so the options always match the agent it runs under.
+  const caps = capsFor(agents, task.agent);
+  const controls = { task, caps, agents:agents.agents.map(a=>({id:a.id,label:a.label,disabled:!a.authenticated||a.installed===false})), onSetAgent, defaults: findAgent(agents, task.agent)?.defaults, disabled: running, onSetModel, onSetReasoning, onSetPermission };
+  // Usage chip: tokens split into fresh work vs re-read cache (the raw total is
+  // mostly cache reads and wildly overstates what ran), and a dollar figure whose
+  // presentation follows how this agent is signed in — a subscription login's
+  // figure is an API-price equivalent covered by plan quota, not a bill. Both
+  // derivations live in ./format so the wording has one home.
+  const usage = usageSplit(task);
+  const cost = costDisplay(findAgent(agents, task.agent));
+  // PR number for the header chip, parsed from the stored URL (…/pull/42).
+  const prNum = task.pr_url?.match(/\/pull\/(\d+)/)?.[1];
+  return (
+    <OperatorBoardContext.Provider value={openBoard}><OperatorBoardQuoteContext.Provider value={quoteFromBoard}>
+      <div className={`session${singlePane ? " compact-session" : ""}`} ref={sessionRef}>
+        <div className="sess-head">
+          {onBack && <button className="mobile-back" onClick={onBack} title="返回任务列表" aria-label="返回任务列表">{Icon.chevRight({ style: { transform: "rotate(180deg)" } })}</button>}
+          <div className="sh-main">
+            <div className="crumb">
+              <span className="pic" style={{ width: 16, height: 16, borderRadius: 5, background: project.color, display: "grid", placeItems: "center", color: "#fff", fontSize: 9, fontWeight: 700 }}>{project.name[0]}</span>
+              <span className="session-project-name" title={project.name}>{project.name}</span>
+
+            </div>
+            <div className="sh-title">
+              <span className="sht-text" title={task.title}>{task.title}</span>
+              <button className="icon-btn sh-edit" title="查看并编辑任务详情" aria-label="查看并编辑任务详情" onClick={onEdit}>{Icon.edit()}</button>
+            </div>
+          </div>
+          <div className="sh-tools">
+            <div style={{ position: "relative" }}>
+              <button className={`status-ctl ${awaiting ? "awaiting" : ""}`} onClick={(e) => { e.stopPropagation(); setStatusOpen((o) => !o); setMoreOpen(false); }}>
+                <StatusDot status={task.status} running={running} awaiting={awaiting} />
+                <span className="cv">{awaiting ? AWAIT_LABEL : SLABEL[task.status]}</span>
+                {Icon.chevDown()}
+              </button>
+              {statusOpen && (
+                <Popover onClose={() => setStatusOpen(false)}>
+                  {STATUSES.map((s) => (
+                    <button key={s} className="pop-item" onClick={() => { onSetStatus(s); setStatusOpen(false); }}>
+                      <StatusDot status={s} />
+                      <div><div>{SLABEL[s]}</div><div className="pi-sub">{SSUB[s]}</div></div>
+                      {task.status === s && <span className="pi-check">{Icon.check()}</span>}
+                    </button>
+                  ))}
+                </Popover>
+              )}
+            </div>
+            <div style={{ position: "relative" }}>
+              <button className="icon-btn session-more" aria-label="更多任务操作" aria-expanded={moreOpen} onClick={(e) => { e.stopPropagation(); setMoreOpen(!moreOpen); setStatusOpen(false); }}>{Icon.dots()}</button>
+              {moreOpen && <Popover onClose={() => setMoreOpen(false)}>
+                <div className="pop-sec">{agentLabel(agents, task.agent)} · {fmtTokens(usage.fresh)} tokens{cost.show && task.cost_usd > 0 ? ` · ${cost.approx ? "~" : ""}${fmtCost(task.cost_usd)}` : ""}</div>
+                <button className="pop-item" onClick={() => { setMoreOpen(false); onEdit(); }}>{Icon.edit()} 编辑任务详情</button>
+                <button className="pop-item" onClick={() => { setMoreOpen(false); downloadExport(`/api/tasks/${task.id}/export`); }}>{Icon.download()} 导出执行过程</button>
+                {task.pr_url && <a className="pop-item" href={task.pr_url} target="_blank" rel="noreferrer">{Icon.github()} 打开 PR{prNum ? ` #${prNum}` : ""}</a>}
+                <div className="divider" /><div className="pop-sec">优先级</div>
+                {PRIORITIES.map((p) => <button className="pop-item" key={p} aria-pressed={task.priority === p} onClick={() => { onSetPriority(p); setMoreOpen(false); }}><span className={`pri ${p}`}>{PLABEL[p]}</span>{task.priority === p && Icon.check()}</button>)}
+                <div className="divider" />
+                <button className="pop-item" onClick={() => { setMoreOpen(false); onClear(); }} disabled={running || task.started !== 1}>{Icon.clear()} 保存摘要，开启新上下文</button>
+              </Popover>}
+            </div>
+          </div>
+        </div>
+
+        {hasSession && <div className="session-viewbar">
+          {singlePane ? <div className="viewseg">
+            <button className={`viewseg-btn ${view === "chat" ? "on" : ""}`} onClick={() => setView("chat")}>对话</button>
+            <button className={`viewseg-btn ${view === "changes" ? "on" : ""}`} onClick={() => setView("changes")}>看板</button>
+          </div> : <span className="session-agent-label">{agentLabel(agents, task.agent)}</span>}
+          <span className="session-branch" title={task.work_branch || ""}>{Icon.git()} {task.parent_task_id ? `来自 ${task.fork_source_title}` : "独立任务分支"}</span>
+        </div>}
+
+        {hasSession && (
+          <SyncBanner taskId={task.id} running={running} pinned={!!task.fork_commit} onResolveWithAI={onResolveWithAI} onSwitchToChat={() => setView("chat")} />
+        )}
+
+        {clearConfirming && (
+          <div className="clear-confirm">
+            <span>保存摘要并开启新的上下文？</span>
+            {clearEstimate && <span className="job-cost-hint">预计消耗 {fmtJobCost(clearEstimate)}</span>}
+            <span className="spacer" />
+            <button className="btn btn-ghost btn-sm" onClick={onCancelClear}>取消</button>
+            <button className="btn btn-accent btn-sm" onClick={onConfirmClear}>{Icon.clear()} 确认 /clear</button>
+          </div>
+        )}
+
+        {!hasSession ? (
+          <><div className="hero-controls"><RunControls {...controls} /></div><TaskHero task={task} project={project} onStart={onStart} onEdit={onEdit} onSetSendContext={onSetSendContext} running={running || configBusy} blockedBy={blockedBy} /></>
+        ) : (
+          // Keep the chat at the same React position across all widths. Moving
+          // it between different parents remounted the composer during resize
+          // and could drop a keystroke, an upload, or an in-flight setting save.
+          <div className={singlePane ? "sess-responsive" : "sess-split"} style={singlePane ? undefined : { gridTemplateColumns: railCollapsed ? "minmax(0,1fr) 30px" : `minmax(0,1fr) 0px ${railW}px` }}>
+            <div className={`sess-main${singlePane ? " compact-chat" : ""}`} hidden={singlePane && view !== "chat"}><Chat project={project} task={task} tasks={tasks} agents={agents} messages={messages}
+              running={running} blockedBy={blockedBy} transcriptLoading={transcriptLoading} older={older} onLoadOlder={onLoadOlder}
+              controls={controls} configBusy={configBusy} active={!singlePane || view === "chat"}
+              onSelectTask={onSelectTask} onFork={onFork} onSend={onSend} onStop={onStop}
+              onStart={onStart} onEdit={onEdit} onClear={onClear} onSetSendContext={onSetSendContext}
+              onReconnect={onReconnect} onAnswer={onAnswer} onCancelQueued={onCancelQueued} /></div>
+            {!singlePane && !railCollapsed && <ColResize side="right" min={RAIL_W.min} max={RAIL_W.max} onWidth={onRailWidth} onReset={onRailReset} />}
+            {!singlePane && railCollapsed ? <ColRail label="看板" right onExpand={onRailExpand} /> : (!singlePane || view === "changes") && (
+              <SessionRail {...board} openRequest={boardRequest} onRequestHandled={acknowledgeBoardRequest} activity={activity} project={project} task={task} sessions={sessions} running={running}
+                onResolveWithAI={onResolveWithAI} onMerged={onMerged} onPrCreated={onPrCreated} onClear={onClear}
+                onCollapse={singlePane ? () => setView("chat") : onRailCollapse} onSwitchToChat={() => setView("chat")} />
+            )}
+          </div>
+        )}
+      </div>
+    </OperatorBoardQuoteContext.Provider></OperatorBoardContext.Provider>
+  );
+}