versun/claude-code
1
0
Fork 0
mirror of https://github.com/claude-code-best/claude-code.git synced 2026-06-19 06:45:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: 完成所有文件的lint

Browse Source
This commit is contained in:
claude-code-best
2026-05-01 21:39:30 +08:00
parent d136872cc9
commit 6182015005
1333 changed files with 68255 additions and 77882 deletions
Download Patch File Download Diff File Expand all files Collapse all files

465
packages/remote-control-server/web/src/components/EventStream.tsx
View File

@@ -1,6 +1,6 @@
import { useState, useEffect, useRef } from "react";
import type { SessionEvent, EventPayload } from "../types";
import { esc, truncate, cn, extractEventText, isConversationClearedStatus } from "../lib/utils";
import { useState, useEffect, useRef } from 'react';
import type { SessionEvent, EventPayload } from '../types';
import { esc, truncate, cn, extractEventText, isConversationClearedStatus } from '../lib/utils';
// ============================================================
// Tool Trace State
@@ -8,9 +8,9 @@ import { esc, truncate, cn, extractEventText, isConversationClearedStatus } from
interface TraceHost {
id: string;
kind: "assistant" | "orphan";
kind: 'assistant' | 'orphan';
assistantContent: string;
entryKinds: ("use" | "result")[];
entryKinds: ('use' | 'result')[];
}
interface ToolTraceState {
@@ -26,7 +26,7 @@ function createTraceState(): ToolTraceState {
function addAssistantHost(state: ToolTraceState, content: string): { state: ToolTraceState; host: TraceHost } {
const host: TraceHost = {
id: `trace-${state.nextHostId}`,
kind: "assistant",
kind: 'assistant',
assistantContent: content,
entryKinds: [],
};
@@ -45,26 +45,29 @@ function clearActiveHost(state: ToolTraceState): ToolTraceState {
return { ...state, activeHostId: null };
}
function addTraceEntry(state: ToolTraceState, entryKind: "use" | "result"): {
function addTraceEntry(
state: ToolTraceState,
entryKind: 'use' | 'result',
): {
state: ToolTraceState;
host: TraceHost;
createdHost: TraceHost | null;
} {
let host = state.hosts.find((h) => h.id === state.activeHostId);
let host = state.hosts.find(h => h.id === state.activeHostId);
let createdHost: TraceHost | null = null;
if (!host) {
createdHost = {
id: `trace-${state.nextHostId}`,
kind: "orphan",
assistantContent: "",
kind: 'orphan',
assistantContent: '',
entryKinds: [],
};
host = createdHost;
}
const updatedHost = { ...host, entryKinds: [...host.entryKinds, entryKind] };
const newHosts = state.hosts.map((h) => (h.id === updatedHost.id ? updatedHost : h));
const newHosts = state.hosts.map(h => (h.id === updatedHost.id ? updatedHost : h));
if (createdHost) newHosts.push(createdHost);
return {
@@ -83,12 +86,12 @@ function addTraceEntry(state: ToolTraceState, entryKind: "use" | "result"): {
// ============================================================
interface UserMessage {
kind: "user";
kind: 'user';
content: string;
}
interface AssistantMessage {
kind: "assistant";
kind: 'assistant';
content: string;
traceEntries: TraceEntry[];
traceExpanded: boolean;
@@ -96,7 +99,7 @@ interface AssistantMessage {
}
interface TraceEntry {
entryKind: "use" | "result";
entryKind: 'use' | 'result';
toolName?: string;
toolInput?: unknown;
content?: string;
@@ -105,12 +108,12 @@ interface TraceEntry {
}
interface SystemMessage {
kind: "system";
kind: 'system';
content: string;
}
interface PermissionMessage {
kind: "permission";
kind: 'permission';
requestId: string;
toolName: string;
toolInput: unknown;
@@ -118,21 +121,21 @@ interface PermissionMessage {
}
interface AskUserMessage {
kind: "ask_user";
kind: 'ask_user';
requestId: string;
questions: import("../types").Question[];
questions: import('../types').Question[];
description: string;
}
interface PlanMessage {
kind: "plan";
kind: 'plan';
requestId: string;
planContent: string;
description: string;
}
interface LoadingMessage {
kind: "loading";
kind: 'loading';
verb: string;
startTime: number;
}
@@ -150,15 +153,40 @@ type DisplayMessage =
// Spinner
// ============================================================
const SPINNER_FRAMES = ["·", "✢", "✱", "✶", "✻", "✽"];
const SPINNER_FRAMES = ['·', '✢', '✱', '✶', '✻', '✽'];
const SPINNER_CYCLE = [...SPINNER_FRAMES, ...SPINNER_FRAMES.slice().reverse()];
const SPINNER_VERBS = [
"Accomplishing", "Baking", "Calculating", "Clauding", "Cogitating", "Computing",
"Considering", "Contemplating", "Cooking", "Crafting", "Creating", "Crunching",
"Deliberating", "Doing", "Effecting", "Generating", "Hatching", "Ideating",
"Imagining", "Inferring", "Manifesting", "Mulling", "Pondering", "Processing",
"Ruminating", "Simmering", "Synthesizing", "Thinking", "Tinkering", "Working",
'Accomplishing',
'Baking',
'Calculating',
'Clauding',
'Cogitating',
'Computing',
'Considering',
'Contemplating',
'Cooking',
'Crafting',
'Creating',
'Crunching',
'Deliberating',
'Doing',
'Effecting',
'Generating',
'Hatching',
'Ideating',
'Imagining',
'Inferring',
'Manifesting',
'Mulling',
'Pondering',
'Processing',
'Ruminating',
'Simmering',
'Synthesizing',
'Thinking',
'Tinkering',
'Working',
];
// ============================================================
@@ -169,7 +197,11 @@ interface EventStreamProps {
messages: DisplayMessage[];
onApprovePermission: (requestId: string) => void;
onRejectPermission: (requestId: string) => void;
onSubmitAnswers: (requestId: string, answers: Record<string, unknown>, questions: import("../types").Question[]) => void;
onSubmitAnswers: (
requestId: string,
answers: Record<string, unknown>,
questions: import('../types').Question[],
) => void;
onSubmitPlanResponse: (requestId: string, value: string, feedback?: string) => void;
}
@@ -192,28 +224,42 @@ export function EventStream({
<div ref={scrollRef} className="flex-1 overflow-y-auto px-4 py-4">
<div className="mx-auto max-w-5xl space-y-3">
{messages.map((msg, i) => (
<MessageRow key={i} message={msg} {...{ onApprovePermission, onRejectPermission, onSubmitAnswers, onSubmitPlanResponse }} />
<MessageRow
key={i}
message={msg}
{...{ onApprovePermission, onRejectPermission, onSubmitAnswers, onSubmitPlanResponse }}
/>
))}
</div>
</div>
);
}
function MessageRow({ message, onApprovePermission, onRejectPermission, onSubmitAnswers, onSubmitPlanResponse }: {
function MessageRow({
message,
onApprovePermission,
onRejectPermission,
onSubmitAnswers,
onSubmitPlanResponse,
}: {
message: DisplayMessage;
onApprovePermission: (requestId: string) => void;
onRejectPermission: (requestId: string) => void;
onSubmitAnswers: (requestId: string, answers: Record<string, unknown>, questions: import("../types").Question[]) => void;
onSubmitAnswers: (
requestId: string,
answers: Record<string, unknown>,
questions: import('../types').Question[],
) => void;
onSubmitPlanResponse: (requestId: string, value: string, feedback?: string) => void;
}) {
switch (message.kind) {
case "user":
case 'user':
return <UserBubble content={message.content} />;
case "assistant":
case 'assistant':
return <AssistantBubble content={message.content} traceEntries={message.traceEntries} />;
case "system":
case 'system':
return <SystemBubble content={message.content} />;
case "permission":
case 'permission':
return (
<PermissionPrompt
{...message}
@@ -221,22 +267,22 @@ function MessageRow({ message, onApprovePermission, onRejectPermission, onSubmit
onReject={() => onRejectPermission(message.requestId)}
/>
);
case "ask_user":
case 'ask_user':
return (
<AskUserPanel
{...message}
onSubmit={(answers) => onSubmitAnswers(message.requestId, answers, message.questions)}
onSubmit={answers => onSubmitAnswers(message.requestId, answers, message.questions)}
onSkip={() => onRejectPermission(message.requestId)}
/>
);
case "plan":
case 'plan':
return (
<PlanPanel
{...message}
onSubmit={(value, feedback) => onSubmitPlanResponse(message.requestId, value, feedback)}
/>
);
case "loading":
case 'loading':
return <LoadingIndicator verb={message.verb} />;
default:
return null;
@@ -266,7 +312,7 @@ function formatAssistantContent(content: string): string {
// Inline code
html = html.replace(/`([^`]+)`/g, '<code class="rounded bg-tool-card px-1.5 py-0.5 font-mono text-xs">$1</code>');
// Bold
html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
return html;
}
@@ -279,6 +325,7 @@ function AssistantBubble({ content, traceEntries }: { content: string; traceEntr
{content && (
<div
className="rounded-2xl rounded-bl-md bg-surface-2 px-4 py-2.5 text-sm text-text-primary"
// biome-ignore lint/security/noDangerouslySetInnerHtml: content is sanitized by formatAssistantContent
dangerouslySetInnerHTML={{ __html: formatAssistantContent(content) }}
/>
)}
@@ -288,8 +335,10 @@ function AssistantBubble({ content, traceEntries }: { content: string; traceEntr
onClick={() => setExpanded(!expanded)}
className="flex items-center gap-1.5 text-xs text-text-muted hover:text-text-secondary transition-colors"
>
<span className={cn("transition-transform", expanded && "rotate-90")}>›</span>
<span>{traceEntries.length} tool {traceEntries.length === 1 ? "call" : "calls"}</span>
<span className={cn('transition-transform', expanded && 'rotate-90')}>›</span>
<span>
{traceEntries.length} tool {traceEntries.length === 1 ? 'call' : 'calls'}
</span>
</button>
{expanded && (
<div className="mt-1 space-y-1 pl-2">
@@ -308,8 +357,8 @@ function AssistantBubble({ content, traceEntries }: { content: string; traceEntr
function ToolCard({ entry }: { entry: TraceEntry }) {
const [expanded, setExpanded] = useState(false);
if (entry.entryKind === "use") {
const inputStr = typeof entry.toolInput === "string" ? entry.toolInput : JSON.stringify(entry.toolInput, null, 2);
if (entry.entryKind === 'use') {
const inputStr = typeof entry.toolInput === 'string' ? entry.toolInput : JSON.stringify(entry.toolInput, null, 2);
return (
<div
className="cursor-pointer rounded-lg border border-border bg-tool-card"
@@ -317,7 +366,7 @@ function ToolCard({ entry }: { entry: TraceEntry }) {
>
<div className="flex items-center gap-2 px-3 py-2 text-xs">
<span className="text-brand">▶</span>
<span className="font-medium text-text-primary">{entry.toolName || "tool"}</span>
<span className="font-medium text-text-primary">{entry.toolName || 'tool'}</span>
</div>
{expanded && (
<pre className="border-t border-border px-3 py-2 text-xs text-text-secondary overflow-x-auto">
@@ -328,22 +377,18 @@ function ToolCard({ entry }: { entry: TraceEntry }) {
);
}
const contentStr = typeof entry.output === "string" ? entry.output : JSON.stringify(entry.output, null, 2);
const contentStr = typeof entry.output === 'string' ? entry.output : JSON.stringify(entry.output, null, 2);
return (
<div
className={cn(
"cursor-pointer rounded-lg border bg-tool-card",
entry.isError ? "border-status-error/30" : "border-border",
'cursor-pointer rounded-lg border bg-tool-card',
entry.isError ? 'border-status-error/30' : 'border-border',
)}
onClick={() => setExpanded(!expanded)}
>
<div className="flex items-center gap-2 px-3 py-2 text-xs">
<span className={entry.isError ? "text-status-error" : "text-status-active"}>
{entry.isError ? "✕" : "✓"}
</span>
<span className="font-medium text-text-primary">
{entry.isError ? "Error" : "Result"}
</span>
<span className={entry.isError ? 'text-status-error' : 'text-status-active'}>{entry.isError ? '✕' : '✓'}</span>
<span className="font-medium text-text-primary">{entry.isError ? 'Error' : 'Result'}</span>
</div>
{expanded && (
<pre className="border-t border-border px-3 py-2 text-xs text-text-secondary overflow-x-auto">
@@ -357,9 +402,7 @@ function ToolCard({ entry }: { entry: TraceEntry }) {
function SystemBubble({ content }: { content: string }) {
return (
<div className="flex justify-center">
<div className="rounded-full bg-surface-2 px-4 py-1.5 text-xs text-text-muted">
{esc(content)}
</div>
<div className="rounded-full bg-surface-2 px-4 py-1.5 text-xs text-text-muted">{esc(content)}</div>
</div>
);
}
@@ -379,14 +422,14 @@ function PermissionPrompt({
onApprove: () => void;
onReject: () => void;
}) {
const inputStr = typeof toolInput === "string" ? toolInput : JSON.stringify(toolInput, null, 2);
const inputStr = typeof toolInput === 'string' ? toolInput : JSON.stringify(toolInput, null, 2);
return (
<div className="rounded-xl border border-status-warning/30 bg-surface-1 p-4">
<div className="mb-2 text-sm font-semibold text-status-warning">Permission Request</div>
{description && <div className="mb-2 text-sm text-text-secondary">{esc(description)}</div>}
<div className="mb-2 font-mono text-xs font-bold text-text-primary">{esc(toolName)}</div>
{toolName !== "AskUserQuestion" && (
{toolName !== 'AskUserQuestion' && (
<pre className="mb-3 max-h-40 overflow-auto rounded-lg bg-tool-card p-2 text-xs text-text-secondary">
{truncate(inputStr, 500)}
</pre>
@@ -416,7 +459,7 @@ function AskUserPanel({
onSkip,
}: {
requestId: string;
questions: import("../types").Question[];
questions: import('../types').Question[];
description: string;
onSubmit: (answers: Record<string, unknown>) => void;
onSkip: () => void;
@@ -427,7 +470,7 @@ function AskUserPanel({
const handleSelect = (qIdx: number, oIdx: number, multiSelect: boolean) => {
if (multiSelect) {
const current = (answers[qIdx] as number[]) || [];
const next = current.includes(oIdx) ? current.filter((i) => i !== oIdx) : [...current, oIdx];
const next = current.includes(oIdx) ? current.filter(i => i !== oIdx) : [...current, oIdx];
setAnswers({ ...answers, [qIdx]: next });
} else {
setAnswers({ ...answers, [qIdx]: oIdx });
@@ -438,7 +481,7 @@ function AskUserPanel({
const text = otherTexts[qIdx]?.trim();
if (!text) return;
setAnswers({ ...answers, [qIdx]: text });
setOtherTexts({ ...otherTexts, [qIdx]: "" });
setOtherTexts({ ...otherTexts, [qIdx]: '' });
};
const handleSubmit = () => {
@@ -446,10 +489,10 @@ function AskUserPanel({
for (const [qIdx, val] of Object.entries(answers)) {
const q = questions[parseInt(qIdx, 10)];
if (!q) continue;
if (typeof val === "number") {
if (typeof val === 'number') {
mapped[qIdx] = q.options?.[val]?.label || String(val);
} else if (Array.isArray(val)) {
mapped[qIdx] = val.map((i) => q.options?.[i]?.label || String(i));
mapped[qIdx] = val.map(i => q.options?.[i]?.label || String(i));
} else {
mapped[qIdx] = val;
}
@@ -465,22 +508,20 @@ function AskUserPanel({
return (
<div className="rounded-xl border border-brand/30 bg-surface-1 p-4">
<div className="mb-3 text-sm font-semibold text-text-primary">
{esc(description || q.question || "Question")}
{esc(description || q.question || 'Question')}
</div>
<div className="space-y-2">
{(q.options || []).map((opt, j) => {
const isSelected = multiSelect
? ((answers[0] as number[]) || []).includes(j)
: selectedIdx === j;
const isSelected = multiSelect ? ((answers[0] as number[]) || []).includes(j) : selectedIdx === j;
return (
<button
key={j}
onClick={() => handleSelect(0, j, multiSelect)}
className={cn(
"w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors",
'w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors',
isSelected
? "border-brand bg-brand/10 text-text-primary"
: "border-border bg-surface-2 text-text-secondary hover:border-border-light",
? 'border-brand bg-brand/10 text-text-primary'
: 'border-border bg-surface-2 text-text-secondary hover:border-border-light',
)}
>
<div className="font-medium">{esc(opt.label)}</div>
@@ -491,11 +532,11 @@ function AskUserPanel({
<div className="flex gap-2">
<input
type="text"
value={otherTexts[0] || ""}
onChange={(e) => setOtherTexts({ ...otherTexts, [0]: e.target.value })}
value={otherTexts[0] || ''}
onChange={e => setOtherTexts({ ...otherTexts, [0]: e.target.value })}
placeholder="Other..."
className="flex-1 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-brand focus:outline-none"
onKeyDown={(e) => e.key === "Enter" && handleOtherSubmit(0)}
onKeyDown={e => e.key === 'Enter' && handleOtherSubmit(0)}
/>
<button
onClick={() => handleOtherSubmit(0)}
@@ -528,17 +569,15 @@ function AskUserPanel({
return (
<div className="rounded-xl border border-brand/30 bg-surface-1 p-4">
<div className="mb-3 text-sm font-semibold text-text-primary">{esc(description || "Questions")}</div>
<div className="mb-3 text-sm font-semibold text-text-primary">{esc(description || 'Questions')}</div>
<div className="mb-3 flex gap-1 overflow-x-auto">
{questions.map((q, i) => (
<button
key={i}
onClick={() => setActiveTab(i)}
className={cn(
"rounded-md px-3 py-1.5 text-xs whitespace-nowrap transition-colors",
activeTab === i
? "bg-brand/20 text-brand"
: "text-text-muted hover:bg-surface-2",
'rounded-md px-3 py-1.5 text-xs whitespace-nowrap transition-colors',
activeTab === i ? 'bg-brand/20 text-brand' : 'text-text-muted hover:bg-surface-2',
)}
>
{q.header || `Q${i + 1}`}
@@ -557,7 +596,9 @@ function AskUserPanel({
/>
)}
<div className="mt-4 flex items-center justify-between">
<span className="text-xs text-text-muted">{activeTab + 1} / {questions.length}</span>
<span className="text-xs text-text-muted">
{activeTab + 1} / {questions.length}
</span>
<div className="flex gap-2">
<button
onClick={handleSubmit}
@@ -586,7 +627,7 @@ function QuestionTab({
onOtherTextChange,
onOtherSubmit,
}: {
question: import("../types").Question;
question: import('../types').Question;
qIdx: number;
answers: Record<string, unknown>;
otherTexts: Record<string, string>;
@@ -601,18 +642,16 @@ function QuestionTab({
<div className="mb-2 text-sm text-text-secondary">{esc(question.question)}</div>
<div className="space-y-2">
{(question.options || []).map((opt, j) => {
const isSelected = multiSelect
? ((answers[qIdx] as number[]) || []).includes(j)
: answers[qIdx] === j;
const isSelected = multiSelect ? ((answers[qIdx] as number[]) || []).includes(j) : answers[qIdx] === j;
return (
<button
key={j}
onClick={() => onSelect(qIdx, j, multiSelect)}
className={cn(
"w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors",
'w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors',
isSelected
? "border-brand bg-brand/10 text-text-primary"
: "border-border bg-surface-2 text-text-secondary hover:border-border-light",
? 'border-brand bg-brand/10 text-text-primary'
: 'border-border bg-surface-2 text-text-secondary hover:border-border-light',
)}
>
<div className="font-medium">{esc(opt.label)}</div>
@@ -623,11 +662,11 @@ function QuestionTab({
<div className="flex gap-2">
<input
type="text"
value={otherTexts[qIdx] || ""}
onChange={(e) => onOtherTextChange(qIdx, e.target.value)}
value={otherTexts[qIdx] || ''}
onChange={e => onOtherTextChange(qIdx, e.target.value)}
placeholder="Other..."
className="flex-1 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-brand focus:outline-none"
onKeyDown={(e) => e.key === "Enter" && onOtherSubmit(qIdx)}
onKeyDown={e => e.key === 'Enter' && onOtherSubmit(qIdx)}
/>
<button
onClick={() => onOtherSubmit(qIdx)}
@@ -652,58 +691,59 @@ function PlanPanel({
onSubmit: (value: string, feedback?: string) => void;
}) {
const [selected, setSelected] = useState<string | null>(null);
const [feedback, setFeedback] = useState("");
const [feedback, setFeedback] = useState('');
const isEmpty = !planContent || !planContent.trim();
const handleSubmit = () => {
if (!selected) return;
onSubmit(selected, selected === "no" ? feedback : undefined);
onSubmit(selected, selected === 'no' ? feedback : undefined);
};
return (
<div className="rounded-xl border border-brand/30 bg-surface-1 p-4">
<div className="mb-3 text-sm font-semibold text-text-primary">
{isEmpty ? "Exit plan mode?" : "Ready to code?"}
{isEmpty ? 'Exit plan mode?' : 'Ready to code?'}
</div>
{!isEmpty && (
<div
className="mb-4 max-h-64 overflow-auto rounded-lg bg-tool-card p-4 text-sm text-text-secondary prose prose-invert"
// biome-ignore lint/security/noDangerouslySetInnerHtml: content is sanitized by formatPlanContent
dangerouslySetInnerHTML={{ __html: formatPlanContent(planContent) }}
/>
)}
<div className="space-y-2">
{isEmpty ? (
<>
<PlanOption selected={selected === "yes-default"} onClick={() => setSelected("yes-default")} label="Yes" />
<PlanOption selected={selected === "no"} onClick={() => setSelected("no")} label="No" />
<PlanOption selected={selected === 'yes-default'} onClick={() => setSelected('yes-default')} label="Yes" />
<PlanOption selected={selected === 'no'} onClick={() => setSelected('no')} label="No" />
</>
) : (
<>
<PlanOption
selected={selected === "yes-accept-edits"}
onClick={() => setSelected("yes-accept-edits")}
selected={selected === 'yes-accept-edits'}
onClick={() => setSelected('yes-accept-edits')}
label="Yes, auto-accept edits"
desc="Approve plan and auto-accept file edits"
/>
<PlanOption
selected={selected === "yes-default"}
onClick={() => setSelected("yes-default")}
selected={selected === 'yes-default'}
onClick={() => setSelected('yes-default')}
label="Yes, manually approve edits"
desc="Approve plan but confirm each edit"
/>
<PlanOption
selected={selected === "no"}
onClick={() => setSelected("no")}
selected={selected === 'no'}
onClick={() => setSelected('no')}
label="No, keep planning"
desc="Provide feedback to refine the plan"
/>
</>
)}
</div>
{selected === "no" && (
{selected === 'no' && (
<textarea
value={feedback}
onChange={(e) => setFeedback(e.target.value)}
onChange={e => setFeedback(e.target.value)}
placeholder="Tell Claude what to change..."
className="mt-3 w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-brand focus:outline-none"
rows={3}
@@ -737,10 +777,10 @@ function PlanOption({
<button
onClick={onClick}
className={cn(
"w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors",
'w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors',
selected
? "border-brand bg-brand/10 text-text-primary"
: "border-border bg-surface-2 text-text-secondary hover:border-border-light",
? 'border-brand bg-brand/10 text-text-primary'
: 'border-border bg-surface-2 text-text-secondary hover:border-border-light',
)}
>
<div className="font-medium">{label}</div>
@@ -758,7 +798,7 @@ function formatPlanContent(content: string): string {
// Inline code
html = html.replace(/`([^`]+)`/g, '<code class="rounded bg-tool-card px-1.5 py-0.5 font-mono text-xs">$1</code>');
// Bold
html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
return html;
}
@@ -767,8 +807,8 @@ function LoadingIndicator({ verb }: { verb: string }) {
const [elapsed, setElapsed] = useState(0);
useEffect(() => {
const spinInterval = setInterval(() => setFrame((f) => (f + 1) % SPINNER_CYCLE.length), 120);
const timerInterval = setInterval(() => setElapsed((e) => e + 1), 1000);
const spinInterval = setInterval(() => setFrame(f => (f + 1) % SPINNER_CYCLE.length), 120);
const timerInterval = setInterval(() => setElapsed(e => e + 1), 1000);
return () => {
clearInterval(spinInterval);
clearInterval(timerInterval);
@@ -788,7 +828,17 @@ function LoadingIndicator({ verb }: { verb: string }) {
// Event Processing Hook
// ============================================================
export { type DisplayMessage, type TraceEntry, type UserMessage, type AssistantMessage, type SystemMessage, type PermissionMessage, type AskUserMessage, type PlanMessage, type LoadingMessage };
export type {
DisplayMessage,
TraceEntry,
UserMessage,
AssistantMessage,
SystemMessage,
PermissionMessage,
AskUserMessage,
PlanMessage,
LoadingMessage,
};
export function useEventProcessor() {
const [messages, setMessages] = useState<DisplayMessage[]>([]);
@@ -802,19 +852,19 @@ export function useEventProcessor() {
};
const removeLoading = () => {
setMessages((prev) => prev.filter((m) => m.kind !== "loading"));
setMessages(prev => prev.filter(m => m.kind !== 'loading'));
};
const showLoading = () => {
removeLoading();
const verb = SPINNER_VERBS[Math.floor(Math.random() * SPINNER_VERBS.length)];
setMessages((prev) => [...prev, { kind: "loading", verb, startTime: Date.now() }]);
setMessages(prev => [...prev, { kind: 'loading', verb, startTime: Date.now() }]);
};
const processEvent = (event: SessionEvent, replay = false) => {
const type = event.type;
const payload = event.payload || ({} as EventPayload);
const direction = event.direction || "inbound";
const direction = event.direction || 'inbound';
// Skip bridge init noise
const serialized = JSON.stringify(event);
@@ -826,14 +876,14 @@ export function useEventProcessor() {
}
switch (type) {
case "user": {
const toolResultBlocks = getEmbeddedToolBlocks(payload, "tool_result");
case 'user': {
const toolResultBlocks = getEmbeddedToolBlocks(payload, 'tool_result');
if (toolResultBlocks.length > 0) {
// Process tool results
for (const block of toolResultBlocks) {
addToolTraceEntry("result", {
content: block.content as string || "",
output: block.content as string || "",
addToolTraceEntry('result', {
content: (block.content as string) || '',
output: (block.content as string) || '',
is_error: !!block.is_error,
});
}
@@ -847,25 +897,25 @@ export function useEventProcessor() {
traceStateRef.current = clearActiveHost(traceStateRef.current);
const text = extractEventText(payload as Record<string, unknown>);
if (text) {
setMessages((prev) => [...prev, { kind: "user", content: text }]);
setMessages(prev => [...prev, { kind: 'user', content: text }]);
if (!replay) showLoading();
}
break;
}
case "partial_assistant":
case 'partial_assistant':
return;
case "assistant": {
case 'assistant': {
removeLoading();
const text = extractEventText(payload as Record<string, unknown>);
const toolUseBlocks = getEmbeddedToolBlocks(payload, "tool_use");
const toolUseBlocks = getEmbeddedToolBlocks(payload, 'tool_use');
if (text && text.trim()) {
const result = addAssistantHost(traceStateRef.current, text);
traceStateRef.current = result.state;
setMessages((prev) => [
setMessages(prev => [
...prev,
{
kind: "assistant",
kind: 'assistant',
content: text,
traceEntries: [],
traceExpanded: false,
@@ -875,169 +925,172 @@ export function useEventProcessor() {
}
for (const block of toolUseBlocks) {
addToolTraceEntry("use", {
tool_name: (block.name as string) || "tool",
addToolTraceEntry('use', {
tool_name: (block.name as string) || 'tool',
tool_input: block.input,
});
}
break;
}
case "task_state":
case "automation_state":
case 'task_state':
case 'automation_state':
return;
case "result":
case "result_success":
case 'result':
case 'result_success':
removeLoading();
return;
case "tool_use":
addToolTraceEntry("use", payload as Record<string, unknown> as { tool_name: string; tool_input: unknown });
case 'tool_use':
addToolTraceEntry('use', payload as Record<string, unknown> as { tool_name: string; tool_input: unknown });
break;
case "tool_result":
addToolTraceEntry("result", payload as Record<string, unknown> as { content: string; output: string; is_error: boolean });
case 'tool_result':
addToolTraceEntry(
'result',
payload as Record<string, unknown> as { content: string; output: string; is_error: boolean },
);
break;
case "control_request":
case "permission_request": {
case 'control_request':
case 'permission_request': {
const req = payload.request;
if (req && req.subtype === "can_use_tool") {
const toolName = req.tool_name || "unknown";
if (req && req.subtype === 'can_use_tool') {
const toolName = req.tool_name || 'unknown';
const toolInput = req.input || req.tool_input || {};
if (toolName === "AskUserQuestion") {
setMessages((prev) => [
if (toolName === 'AskUserQuestion') {
setMessages(prev => [
...prev,
{
kind: "ask_user",
requestId: payload.request_id || event.id || "",
questions: (toolInput as Record<string, unknown>).questions as import("../types").Question[] || [],
description: req.description || "",
kind: 'ask_user',
requestId: payload.request_id || event.id || '',
questions: ((toolInput as Record<string, unknown>).questions as import('../types').Question[]) || [],
description: req.description || '',
},
]);
} else if (toolName === "ExitPlanMode") {
setMessages((prev) => [
} else if (toolName === 'ExitPlanMode') {
setMessages(prev => [
...prev,
{
kind: "plan",
requestId: payload.request_id || event.id || "",
planContent: ((toolInput as Record<string, unknown>).plan as string) || "",
description: req.description || "",
kind: 'plan',
requestId: payload.request_id || event.id || '',
planContent: ((toolInput as Record<string, unknown>).plan as string) || '',
description: req.description || '',
},
]);
} else {
setMessages((prev) => [
setMessages(prev => [
...prev,
{
kind: "permission",
requestId: payload.request_id || event.id || "",
kind: 'permission',
requestId: payload.request_id || event.id || '',
toolName,
toolInput,
description: req.description || "",
description: req.description || '',
},
]);
}
}
break;
}
case "control_response":
case "permission_response":
case 'control_response':
case 'permission_response':
return;
case "status": {
case 'status': {
if (isConversationClearedStatus(payload as Record<string, unknown>)) {
reset();
return;
}
const rawMsg = payload.message;
const msg = (typeof rawMsg === "string" ? rawMsg : "") || payload.content || "";
const msg = (typeof rawMsg === 'string' ? rawMsg : '') || payload.content || '';
if (/connecting|waiting|initializing|Remote Control/i.test(msg)) return;
if (!msg.trim()) return;
setMessages((prev) => [...prev, { kind: "system", content: msg }]);
setMessages(prev => [...prev, { kind: 'system', content: msg }]);
break;
}
case "error":
case 'error':
removeLoading();
setMessages((prev) => [
setMessages(prev => [
...prev,
{ kind: "system", content: `Error: ${(typeof payload.message === "string" ? payload.message : "") || payload.content || "Unknown error"}` },
{
kind: 'system',
content: `Error: ${(typeof payload.message === 'string' ? payload.message : '') || payload.content || 'Unknown error'}`,
},
]);
break;
case "session_status":
if (payload.status === "archived" || payload.status === "inactive") {
case 'session_status':
if (payload.status === 'archived' || payload.status === 'inactive') {
removeLoading();
setMessages((prev) => [...prev, { kind: "system", content: `Session ${payload.status}` }]);
setMessages(prev => [...prev, { kind: 'system', content: `Session ${payload.status}` }]);
}
break;
case "interrupt":
case 'interrupt':
removeLoading();
setMessages((prev) => [...prev, { kind: "system", content: "Session interrupted" }]);
setMessages(prev => [...prev, { kind: 'system', content: 'Session interrupted' }]);
break;
case "system":
case 'system':
return;
default: {
const raw = JSON.stringify(payload);
if (/Remote Control connecting/i.test(raw)) return;
setMessages((prev) => [...prev, { kind: "system", content: `${type}: ${truncate(raw, 200)}` }]);
setMessages(prev => [...prev, { kind: 'system', content: `${type}: ${truncate(raw, 200)}` }]);
}
}
};
function processReplayEvent(type: string, payload: EventPayload, direction: string, event: SessionEvent) {
switch (type) {
case "user": {
case 'user': {
const text = extractEventText(payload as Record<string, unknown>);
if (text) {
traceStateRef.current = clearActiveHost(traceStateRef.current);
setMessages((prev) => [...prev, { kind: "user", content: text }]);
setMessages(prev => [...prev, { kind: 'user', content: text }]);
}
break;
}
case "assistant": {
case 'assistant': {
const text = extractEventText(payload as Record<string, unknown>);
if (text && text.trim()) {
const result = addAssistantHost(traceStateRef.current, text);
traceStateRef.current = result.state;
setMessages((prev) => [
setMessages(prev => [
...prev,
{ kind: "assistant", content: text, traceEntries: [], traceExpanded: false, traceId: result.host.id },
{ kind: 'assistant', content: text, traceEntries: [], traceExpanded: false, traceId: result.host.id },
]);
}
break;
}
case "error":
setMessages((prev) => [...prev, { kind: "system", content: `Error: ${payload.message || "Unknown error"}` }]);
case 'error':
setMessages(prev => [...prev, { kind: 'system', content: `Error: ${payload.message || 'Unknown error'}` }]);
break;
case "session_status":
if (payload.status === "archived" || payload.status === "inactive") {
setMessages((prev) => [...prev, { kind: "system", content: `Session ${payload.status}` }]);
case 'session_status':
if (payload.status === 'archived' || payload.status === 'inactive') {
setMessages(prev => [...prev, { kind: 'system', content: `Session ${payload.status}` }]);
}
break;
}
}
function addToolTraceEntry(entryKind: "use" | "result", payload: Record<string, unknown>) {
function addToolTraceEntry(entryKind: 'use' | 'result', payload: Record<string, unknown>) {
const result = addTraceEntry(traceStateRef.current, entryKind);
traceStateRef.current = result.state;
const entry: TraceEntry = entryKind === "use"
? {
entryKind: "use",
toolName: (payload.tool_name as string) || (payload.name as string) || "tool",
toolInput: payload.tool_input || payload.input,
}
: {
entryKind: "result",
content: (payload.content as string) || "",
output: (payload.output as string) || (payload.content as string) || "",
isError: !!payload.is_error,
};
const entry: TraceEntry =
entryKind === 'use'
? {
entryKind: 'use',
toolName: (payload.tool_name as string) || (payload.name as string) || 'tool',
toolInput: payload.tool_input || payload.input,
}
: {
entryKind: 'result',
content: (payload.content as string) || '',
output: (payload.output as string) || (payload.content as string) || '',
isError: !!payload.is_error,
};
// Add entry to the last assistant message
setMessages((prev) => {
setMessages(prev => {
for (let i = prev.length - 1; i >= 0; i--) {
if (prev[i].kind === "assistant") {
if (prev[i].kind === 'assistant') {
const msg = prev[i] as AssistantMessage;
return [
...prev.slice(0, i),
{ ...msg, traceEntries: [...msg.traceEntries, entry] },
...prev.slice(i + 1),
];
return [...prev.slice(0, i), { ...msg, traceEntries: [...msg.traceEntries, entry] }, ...prev.slice(i + 1)];
}
}
return prev;
@@ -1045,20 +1098,20 @@ export function useEventProcessor() {
}
function getUserUuid(payload: EventPayload): string | null {
if (!payload || typeof payload !== "object") return null;
if (typeof payload.uuid === "string" && payload.uuid) return payload.uuid;
if (payload.raw && typeof payload.raw === "object" && typeof payload.raw.uuid === "string" && payload.raw.uuid) {
if (!payload || typeof payload !== 'object') return null;
if (typeof payload.uuid === 'string' && payload.uuid) return payload.uuid;
if (payload.raw && typeof payload.raw === 'object' && typeof payload.raw.uuid === 'string' && payload.raw.uuid) {
return payload.raw.uuid;
}
return null;
}
function getEmbeddedToolBlocks(payload: EventPayload, blockType: string): import("../types").ContentBlock[] {
if (!payload || typeof payload !== "object") return [];
function getEmbeddedToolBlocks(payload: EventPayload, blockType: string): import('../types').ContentBlock[] {
if (!payload || typeof payload !== 'object') return [];
const msg = payload.message as Record<string, unknown> | undefined;
if (!msg || typeof msg !== "object" || !Array.isArray(msg.content)) return [];
return (msg.content as import("../types").ContentBlock[]).filter(
(b) => b && typeof b === "object" && b.type === blockType,
if (!msg || typeof msg !== 'object' || !Array.isArray(msg.content)) return [];
return (msg.content as import('../types').ContentBlock[]).filter(
b => b && typeof b === 'object' && b.type === blockType,
);
}