huskies: merge 473_refactor_split_chat_tsx_into_smaller_components
This commit is contained in:
dave
@@ -0,0 +1,112 @@
|
||||
interface ApiKeyDialogProps {
|
||||
apiKeyInput: string;
|
||||
onApiKeyChange: (value: string) => void;
|
||||
onSave: () => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
export function ApiKeyDialog({
|
||||
apiKeyInput,
|
||||
onApiKeyChange,
|
||||
onSave,
|
||||
onCancel,
|
||||
}: ApiKeyDialogProps) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: "rgba(0, 0, 0, 0.7)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#2f2f2f",
|
||||
padding: "32px",
|
||||
borderRadius: "12px",
|
||||
maxWidth: "500px",
|
||||
width: "90%",
|
||||
border: "1px solid #444",
|
||||
}}
|
||||
>
|
||||
<h2 style={{ marginTop: 0, color: "#ececec" }}>
|
||||
Enter Anthropic API Key
|
||||
</h2>
|
||||
<p
|
||||
style={{
|
||||
color: "#aaa",
|
||||
fontSize: "0.9em",
|
||||
marginBottom: "20px",
|
||||
}}
|
||||
>
|
||||
To use Claude models, please enter your Anthropic API key. Your key
|
||||
will be stored server-side and reused across sessions.
|
||||
</p>
|
||||
<input
|
||||
type="password"
|
||||
value={apiKeyInput}
|
||||
onChange={(e) => onApiKeyChange(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && onSave()}
|
||||
placeholder="sk-ant-..."
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "12px",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #555",
|
||||
backgroundColor: "#1a1a1a",
|
||||
color: "#ececec",
|
||||
fontSize: "1em",
|
||||
marginBottom: "20px",
|
||||
outline: "none",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "12px",
|
||||
justifyContent: "flex-end",
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
style={{
|
||||
padding: "10px 20px",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #555",
|
||||
backgroundColor: "transparent",
|
||||
color: "#aaa",
|
||||
cursor: "pointer",
|
||||
fontSize: "0.9em",
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onSave}
|
||||
disabled={!apiKeyInput.trim()}
|
||||
style={{
|
||||
padding: "10px 20px",
|
||||
borderRadius: "8px",
|
||||
border: "none",
|
||||
backgroundColor: apiKeyInput.trim() ? "#ececec" : "#555",
|
||||
color: apiKeyInput.trim() ? "#000" : "#888",
|
||||
cursor: apiKeyInput.trim() ? "pointer" : "not-allowed",
|
||||
fontSize: "0.9em",
|
||||
}}
|
||||
>
|
||||
Save Key
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+193
-1228
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,278 @@
|
||||
import * as React from "react";
|
||||
import Markdown from "react-markdown";
|
||||
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
|
||||
import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
|
||||
import type { WizardStateData } from "../api/client";
|
||||
import type { Message } from "../types";
|
||||
import { MessageItem } from "./MessageItem";
|
||||
import SetupWizard from "./SetupWizard";
|
||||
|
||||
const { useEffect, useRef } = React;
|
||||
|
||||
/** Fixed-height thinking trace block that auto-scrolls to bottom as text arrives. */
|
||||
export function ThinkingBlock({ text }: { text: string }) {
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const el = scrollRef.current;
|
||||
if (el) {
|
||||
el.scrollTop = el.scrollHeight;
|
||||
}
|
||||
}, [text]);
|
||||
|
||||
return (
|
||||
<div
|
||||
data-testid="chat-thinking-block"
|
||||
ref={scrollRef}
|
||||
style={{
|
||||
maxHeight: "96px",
|
||||
overflowY: "auto",
|
||||
background: "#161b22",
|
||||
border: "1px solid #2d333b",
|
||||
borderRadius: "6px",
|
||||
padding: "6px 10px",
|
||||
fontSize: "0.78em",
|
||||
fontFamily: "monospace",
|
||||
color: "#6e7681",
|
||||
fontStyle: "italic",
|
||||
whiteSpace: "pre-wrap",
|
||||
wordBreak: "break-word",
|
||||
lineHeight: "1.4",
|
||||
marginBottom: "8px",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
display: "block",
|
||||
fontSize: "0.8em",
|
||||
color: "#444c56",
|
||||
marginBottom: "4px",
|
||||
fontStyle: "normal",
|
||||
letterSpacing: "0.04em",
|
||||
textTransform: "uppercase",
|
||||
}}
|
||||
>
|
||||
thinking
|
||||
</span>
|
||||
{text}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Streaming message renderer — stable component to avoid recreation on each render. */
|
||||
export function StreamingMessage({ content }: { content: string }) {
|
||||
return (
|
||||
<Markdown
|
||||
components={{
|
||||
// biome-ignore lint/suspicious/noExplicitAny: react-markdown requires any for component props
|
||||
code: ({ className, children, ...props }: any) => {
|
||||
const match = /language-(\w+)/.exec(className || "");
|
||||
const isInline = !className;
|
||||
return !isInline && match ? (
|
||||
<SyntaxHighlighter
|
||||
// biome-ignore lint/suspicious/noExplicitAny: oneDark style types are incompatible
|
||||
style={oneDark as any}
|
||||
language={match[1]}
|
||||
PreTag="div"
|
||||
>
|
||||
{String(children).replace(/\n$/, "")}
|
||||
</SyntaxHighlighter>
|
||||
) : (
|
||||
<code className={className} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
},
|
||||
}}
|
||||
>
|
||||
{content}
|
||||
</Markdown>
|
||||
);
|
||||
}
|
||||
|
||||
interface ChatMessageListProps {
|
||||
messages: Message[];
|
||||
loading: boolean;
|
||||
streamingContent: string;
|
||||
streamingThinking: string;
|
||||
activityStatus: string | null;
|
||||
wizardState: WizardStateData | null;
|
||||
setWizardState: React.Dispatch<React.SetStateAction<WizardStateData | null>>;
|
||||
needsOnboarding: boolean;
|
||||
setNeedsOnboarding: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
sendMessage: (text: string) => void;
|
||||
scrollContainerRef: React.RefObject<HTMLDivElement | null>;
|
||||
messagesEndRef: React.RefObject<HTMLDivElement | null>;
|
||||
onScroll: () => void;
|
||||
onboardingTriggeredRef: React.MutableRefObject<boolean>;
|
||||
}
|
||||
|
||||
export function ChatMessageList({
|
||||
messages,
|
||||
loading,
|
||||
streamingContent,
|
||||
streamingThinking,
|
||||
activityStatus,
|
||||
wizardState,
|
||||
setWizardState,
|
||||
needsOnboarding,
|
||||
setNeedsOnboarding,
|
||||
sendMessage,
|
||||
scrollContainerRef,
|
||||
messagesEndRef,
|
||||
onScroll,
|
||||
onboardingTriggeredRef,
|
||||
}: ChatMessageListProps) {
|
||||
return (
|
||||
<div
|
||||
ref={scrollContainerRef}
|
||||
onScroll={onScroll}
|
||||
style={{
|
||||
flex: 1,
|
||||
overflowY: "auto",
|
||||
padding: "20px 0",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "24px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
maxWidth: "768px",
|
||||
margin: "0 auto",
|
||||
width: "100%",
|
||||
padding: "0 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "24px",
|
||||
}}
|
||||
>
|
||||
{wizardState &&
|
||||
!wizardState.completed &&
|
||||
messages.length === 0 &&
|
||||
!loading && (
|
||||
<SetupWizard
|
||||
wizardState={wizardState}
|
||||
onWizardUpdate={setWizardState}
|
||||
sendMessage={sendMessage}
|
||||
/>
|
||||
)}
|
||||
{needsOnboarding &&
|
||||
!wizardState &&
|
||||
messages.length === 0 &&
|
||||
!loading && (
|
||||
<div
|
||||
data-testid="onboarding-welcome"
|
||||
style={{
|
||||
padding: "24px",
|
||||
borderRadius: "12px",
|
||||
background: "#1c2a1c",
|
||||
border: "1px solid #2d4a2d",
|
||||
marginBottom: "8px",
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
style={{
|
||||
margin: "0 0 8px 0",
|
||||
color: "#a0d4a0",
|
||||
fontSize: "1.1rem",
|
||||
}}
|
||||
>
|
||||
Welcome to Huskies
|
||||
</h3>
|
||||
<p
|
||||
style={{
|
||||
margin: "0 0 16px 0",
|
||||
color: "#ccc",
|
||||
lineHeight: 1.5,
|
||||
}}
|
||||
>
|
||||
This project needs to be set up before you can start writing
|
||||
stories. The agent will guide you through configuring your
|
||||
project goals and tech stack.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="onboarding-start-button"
|
||||
onClick={() => {
|
||||
if (onboardingTriggeredRef.current) return;
|
||||
onboardingTriggeredRef.current = true;
|
||||
setNeedsOnboarding(false);
|
||||
sendMessage(
|
||||
"I just created a new project. Help me set it up.",
|
||||
);
|
||||
}}
|
||||
style={{
|
||||
padding: "10px 20px",
|
||||
borderRadius: "8px",
|
||||
border: "none",
|
||||
backgroundColor: "#a0d4a0",
|
||||
color: "#1a1a1a",
|
||||
cursor: "pointer",
|
||||
fontSize: "0.95rem",
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
Start Project Setup
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{messages.map((msg: Message, idx: number) => (
|
||||
<MessageItem
|
||||
// biome-ignore lint/suspicious/noArrayIndexKey: Message has no stable ID
|
||||
key={`msg-${idx}-${msg.role}-${msg.content.substring(0, 20)}`}
|
||||
msg={msg}
|
||||
/>
|
||||
))}
|
||||
{loading && streamingThinking && (
|
||||
<ThinkingBlock text={streamingThinking} />
|
||||
)}
|
||||
{loading && streamingContent && (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
maxWidth: "100%",
|
||||
padding: "0",
|
||||
borderRadius: "0",
|
||||
background: "transparent",
|
||||
color: "#ececec",
|
||||
border: "none",
|
||||
fontFamily: "inherit",
|
||||
fontSize: "1em",
|
||||
fontWeight: "500",
|
||||
whiteSpace: "normal",
|
||||
lineHeight: "1.6",
|
||||
}}
|
||||
>
|
||||
<div className="markdown-body">
|
||||
<StreamingMessage content={streamingContent} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{loading &&
|
||||
(activityStatus != null ||
|
||||
(!streamingContent && !streamingThinking)) && (
|
||||
<div
|
||||
data-testid="activity-indicator"
|
||||
style={{
|
||||
alignSelf: "flex-start",
|
||||
color: "#888",
|
||||
fontSize: "0.9em",
|
||||
marginTop: "10px",
|
||||
}}
|
||||
>
|
||||
<span className="pulse">{activityStatus ?? "Thinking..."}</span>
|
||||
</div>
|
||||
)}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
import type { AgentConfigInfo } from "../api/agents";
|
||||
import type { PipelineStageItem, PipelineState } from "../api/client";
|
||||
import { AgentPanel } from "./AgentPanel";
|
||||
import { LozengeFlyProvider } from "./LozengeFlyContext";
|
||||
import type { LogEntry } from "./ServerLogsPanel";
|
||||
import { ServerLogsPanel } from "./ServerLogsPanel";
|
||||
import { StagePanel } from "./StagePanel";
|
||||
import { WorkItemDetailPanel } from "./WorkItemDetailPanel";
|
||||
|
||||
interface ChatPipelinePanelProps {
|
||||
isNarrowScreen: boolean;
|
||||
pipeline: PipelineState;
|
||||
pipelineVersion: number;
|
||||
agentConfigVersion: number;
|
||||
agentStateVersion: number;
|
||||
storyTokenCosts: Map<string, number>;
|
||||
agentRoster: AgentConfigInfo[];
|
||||
busyAgentNames: Set<string>;
|
||||
selectedWorkItemId: string | null;
|
||||
serverLogs: LogEntry[];
|
||||
onSelectWorkItem: (id: string) => void;
|
||||
onCloseWorkItem: () => void;
|
||||
onStartAgent: (storyId: string, agentName?: string) => void;
|
||||
onStopAgent: (storyId: string, agentName: string) => void;
|
||||
onDeleteItem: (item: PipelineStageItem) => void;
|
||||
}
|
||||
|
||||
export function ChatPipelinePanel({
|
||||
isNarrowScreen,
|
||||
pipeline,
|
||||
pipelineVersion,
|
||||
agentConfigVersion,
|
||||
agentStateVersion,
|
||||
storyTokenCosts,
|
||||
agentRoster,
|
||||
busyAgentNames,
|
||||
selectedWorkItemId,
|
||||
serverLogs,
|
||||
onSelectWorkItem,
|
||||
onCloseWorkItem,
|
||||
onStartAgent,
|
||||
onStopAgent,
|
||||
onDeleteItem,
|
||||
}: ChatPipelinePanelProps) {
|
||||
return (
|
||||
<div
|
||||
data-testid="chat-right-column"
|
||||
style={{
|
||||
flex: "0 0 40%",
|
||||
overflowY: "auto",
|
||||
borderLeft: isNarrowScreen ? "none" : "1px solid #333",
|
||||
borderTop: isNarrowScreen ? "1px solid #333" : "none",
|
||||
padding: "12px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "12px",
|
||||
}}
|
||||
>
|
||||
<LozengeFlyProvider pipeline={pipeline}>
|
||||
{selectedWorkItemId ? (
|
||||
<WorkItemDetailPanel
|
||||
storyId={selectedWorkItemId}
|
||||
pipelineVersion={pipelineVersion}
|
||||
onClose={onCloseWorkItem}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<AgentPanel
|
||||
configVersion={agentConfigVersion}
|
||||
stateVersion={agentStateVersion}
|
||||
/>
|
||||
<StagePanel
|
||||
title="Done"
|
||||
items={pipeline.done ?? []}
|
||||
costs={storyTokenCosts}
|
||||
onItemClick={(item) => onSelectWorkItem(item.story_id)}
|
||||
onStopAgent={onStopAgent}
|
||||
onDeleteItem={onDeleteItem}
|
||||
/>
|
||||
<StagePanel
|
||||
title="To Merge"
|
||||
items={pipeline.merge}
|
||||
costs={storyTokenCosts}
|
||||
onItemClick={(item) => onSelectWorkItem(item.story_id)}
|
||||
onStopAgent={onStopAgent}
|
||||
onDeleteItem={onDeleteItem}
|
||||
/>
|
||||
<StagePanel
|
||||
title="QA"
|
||||
items={pipeline.qa}
|
||||
costs={storyTokenCosts}
|
||||
onItemClick={(item) => onSelectWorkItem(item.story_id)}
|
||||
onStopAgent={onStopAgent}
|
||||
onDeleteItem={onDeleteItem}
|
||||
/>
|
||||
<StagePanel
|
||||
title="Current"
|
||||
items={pipeline.current}
|
||||
costs={storyTokenCosts}
|
||||
onItemClick={(item) => onSelectWorkItem(item.story_id)}
|
||||
agentRoster={agentRoster}
|
||||
busyAgentNames={busyAgentNames}
|
||||
onStartAgent={onStartAgent}
|
||||
onStopAgent={onStopAgent}
|
||||
onDeleteItem={onDeleteItem}
|
||||
/>
|
||||
<StagePanel
|
||||
title="Backlog"
|
||||
items={pipeline.backlog}
|
||||
costs={storyTokenCosts}
|
||||
onItemClick={(item) => onSelectWorkItem(item.story_id)}
|
||||
agentRoster={agentRoster}
|
||||
busyAgentNames={busyAgentNames}
|
||||
onStartAgent={onStartAgent}
|
||||
onStopAgent={onStopAgent}
|
||||
onDeleteItem={onDeleteItem}
|
||||
/>
|
||||
<ServerLogsPanel logs={serverLogs} />
|
||||
</>
|
||||
)}
|
||||
</LozengeFlyProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
interface PermissionRequest {
|
||||
requestId: string;
|
||||
toolName: string;
|
||||
toolInput: Record<string, unknown>;
|
||||
}
|
||||
|
||||
interface PermissionDialogProps {
|
||||
permissionQueue: PermissionRequest[];
|
||||
onResponse: (approved: boolean, alwaysAllow?: boolean) => void;
|
||||
}
|
||||
|
||||
export function PermissionDialog({
|
||||
permissionQueue,
|
||||
onResponse,
|
||||
}: PermissionDialogProps) {
|
||||
const current = permissionQueue[0];
|
||||
if (!current) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: "rgba(0, 0, 0, 0.7)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#2f2f2f",
|
||||
padding: "32px",
|
||||
borderRadius: "12px",
|
||||
maxWidth: "520px",
|
||||
width: "90%",
|
||||
border: "1px solid #444",
|
||||
}}
|
||||
>
|
||||
<h2 style={{ marginTop: 0, color: "#ececec" }}>
|
||||
Permission Request
|
||||
{permissionQueue.length > 1 && (
|
||||
<span
|
||||
style={{
|
||||
fontSize: "0.6em",
|
||||
color: "#888",
|
||||
marginLeft: "8px",
|
||||
}}
|
||||
>
|
||||
(+{permissionQueue.length - 1} queued)
|
||||
</span>
|
||||
)}
|
||||
</h2>
|
||||
<p
|
||||
style={{
|
||||
color: "#aaa",
|
||||
fontSize: "0.9em",
|
||||
marginBottom: "12px",
|
||||
}}
|
||||
>
|
||||
The agent wants to use the{" "}
|
||||
<strong style={{ color: "#ececec" }}>{current.toolName}</strong> tool.
|
||||
Do you approve?
|
||||
</p>
|
||||
{Object.keys(current.toolInput).length > 0 && (
|
||||
<pre
|
||||
style={{
|
||||
background: "#1a1a1a",
|
||||
border: "1px solid #333",
|
||||
borderRadius: "6px",
|
||||
padding: "12px",
|
||||
fontSize: "0.8em",
|
||||
color: "#ccc",
|
||||
overflowX: "auto",
|
||||
maxHeight: "200px",
|
||||
marginBottom: "20px",
|
||||
whiteSpace: "pre-wrap",
|
||||
wordBreak: "break-word",
|
||||
}}
|
||||
>
|
||||
{JSON.stringify(current.toolInput, null, 2)}
|
||||
</pre>
|
||||
)}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "12px",
|
||||
justifyContent: "flex-end",
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onResponse(false)}
|
||||
style={{
|
||||
padding: "10px 20px",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #555",
|
||||
backgroundColor: "transparent",
|
||||
color: "#aaa",
|
||||
cursor: "pointer",
|
||||
fontSize: "0.9em",
|
||||
}}
|
||||
>
|
||||
Deny
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onResponse(true)}
|
||||
style={{
|
||||
padding: "10px 20px",
|
||||
borderRadius: "8px",
|
||||
border: "none",
|
||||
backgroundColor: "#ececec",
|
||||
color: "#000",
|
||||
cursor: "pointer",
|
||||
fontSize: "0.9em",
|
||||
}}
|
||||
>
|
||||
Approve
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onResponse(true, true)}
|
||||
style={{
|
||||
padding: "10px 20px",
|
||||
borderRadius: "8px",
|
||||
border: "none",
|
||||
backgroundColor: "#4caf50",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
fontSize: "0.9em",
|
||||
}}
|
||||
>
|
||||
Always Allow
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
interface ReconciliationEvent {
|
||||
id: string;
|
||||
storyId: string;
|
||||
status: string;
|
||||
message: string;
|
||||
}
|
||||
|
||||
interface ReconciliationBannerProps {
|
||||
reconciliationEvents: ReconciliationEvent[];
|
||||
}
|
||||
|
||||
export function ReconciliationBanner({
|
||||
reconciliationEvents,
|
||||
}: ReconciliationBannerProps) {
|
||||
return (
|
||||
<div
|
||||
data-testid="reconciliation-banner"
|
||||
style={{
|
||||
padding: "6px 24px",
|
||||
background: "#1c2a1c",
|
||||
borderTop: "1px solid #2d4a2d",
|
||||
fontSize: "0.8em",
|
||||
color: "#7ec87e",
|
||||
maxHeight: "100px",
|
||||
overflowY: "auto",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
marginBottom: "2px",
|
||||
color: "#a0d4a0",
|
||||
}}
|
||||
>
|
||||
Reconciling startup state...
|
||||
</div>
|
||||
{reconciliationEvents.map((evt) => (
|
||||
<div
|
||||
key={evt.id}
|
||||
style={{
|
||||
color:
|
||||
evt.status === "failed"
|
||||
? "#d07070"
|
||||
: evt.status === "advanced"
|
||||
? "#80c880"
|
||||
: "#666",
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
}}
|
||||
>
|
||||
{evt.storyId ? `[${evt.storyId}] ` : ""}
|
||||
{evt.message}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,439 @@
|
||||
import * as React from "react";
|
||||
import { api, type ChatWebSocket } from "../api/client";
|
||||
import type { ChatInputHandle } from "../components/ChatInput";
|
||||
import type { Message, ProviderConfig } from "../types";
|
||||
|
||||
const { useCallback, useRef, useState } = React;
|
||||
|
||||
type SetState<T> = React.Dispatch<React.SetStateAction<T>>;
|
||||
|
||||
interface UseChatSendParams {
|
||||
messages: Message[];
|
||||
loading: boolean;
|
||||
model: string;
|
||||
enableTools: boolean;
|
||||
claudeSessionId: string | null;
|
||||
streamingContent: string;
|
||||
setClaudeSessionId: SetState<string | null>;
|
||||
setMessages: SetState<Message[]>;
|
||||
setLoading: SetState<boolean>;
|
||||
setStreamingContent: SetState<string>;
|
||||
setStreamingThinking: SetState<string>;
|
||||
setActivityStatus: SetState<string | null>;
|
||||
setSideQuestion: SetState<{
|
||||
question: string;
|
||||
response: string;
|
||||
loading: boolean;
|
||||
} | null>;
|
||||
chatInputRef: React.RefObject<ChatInputHandle | null>;
|
||||
wsRef: React.MutableRefObject<ChatWebSocket | null>;
|
||||
queuedMessagesRef: React.MutableRefObject<{ id: string; text: string }[]>;
|
||||
setQueuedMessages: SetState<{ id: string; text: string }[]>;
|
||||
queueIdCounterRef: React.MutableRefObject<number>;
|
||||
clearMessages: () => void;
|
||||
projectPath: string;
|
||||
}
|
||||
|
||||
export interface UseChatSendResult {
|
||||
sendMessage: (text: string) => Promise<void>;
|
||||
sendMessageBatch: (texts: string[]) => Promise<void>;
|
||||
cancelGeneration: () => Promise<void>;
|
||||
handleSaveApiKey: () => Promise<void>;
|
||||
clearSession: () => Promise<void>;
|
||||
showApiKeyDialog: boolean;
|
||||
setShowApiKeyDialog: SetState<boolean>;
|
||||
apiKeyInput: string;
|
||||
setApiKeyInput: SetState<string>;
|
||||
}
|
||||
|
||||
export function useChatSend({
|
||||
messages,
|
||||
loading,
|
||||
model,
|
||||
enableTools,
|
||||
claudeSessionId,
|
||||
streamingContent,
|
||||
setClaudeSessionId,
|
||||
setMessages,
|
||||
setLoading,
|
||||
setStreamingContent,
|
||||
setStreamingThinking,
|
||||
setActivityStatus,
|
||||
setSideQuestion,
|
||||
chatInputRef,
|
||||
wsRef,
|
||||
queuedMessagesRef,
|
||||
setQueuedMessages,
|
||||
queueIdCounterRef,
|
||||
clearMessages,
|
||||
projectPath,
|
||||
}: UseChatSendParams): UseChatSendResult {
|
||||
const [showApiKeyDialog, setShowApiKeyDialog] = useState(false);
|
||||
const [apiKeyInput, setApiKeyInput] = useState("");
|
||||
const pendingMessageRef = useRef<string>("");
|
||||
|
||||
const sendMessage = useCallback(
|
||||
async (messageText: string) => {
|
||||
if (!messageText.trim()) return;
|
||||
|
||||
if (/^\/reset\s*$/i.test(messageText)) {
|
||||
setMessages([]);
|
||||
setClaudeSessionId(null);
|
||||
setStreamingContent("");
|
||||
setStreamingThinking("");
|
||||
setActivityStatus(null);
|
||||
setMessages([
|
||||
{
|
||||
role: "assistant",
|
||||
content: "Session reset. Starting a fresh conversation.",
|
||||
},
|
||||
]);
|
||||
return;
|
||||
}
|
||||
|
||||
const slashMatch = messageText.match(/^\/(\S+)(?:\s+([\s\S]*))?$/);
|
||||
if (slashMatch) {
|
||||
const cmd = slashMatch[1].toLowerCase();
|
||||
const args = (slashMatch[2] ?? "").trim();
|
||||
|
||||
if (cmd !== "btw") {
|
||||
const knownCommands = new Set([
|
||||
"status",
|
||||
"assign",
|
||||
"start",
|
||||
"show",
|
||||
"move",
|
||||
"delete",
|
||||
"cost",
|
||||
"git",
|
||||
"overview",
|
||||
"rebuild",
|
||||
"loc",
|
||||
"help",
|
||||
"ambient",
|
||||
"htop",
|
||||
"rmtree",
|
||||
"timer",
|
||||
"unblock",
|
||||
"unreleased",
|
||||
"setup",
|
||||
]);
|
||||
|
||||
if (knownCommands.has(cmd)) {
|
||||
setMessages((prev: Message[]) => [
|
||||
...prev,
|
||||
{ role: "user", content: messageText },
|
||||
]);
|
||||
try {
|
||||
const result = await api.botCommand(cmd, args, undefined);
|
||||
setMessages((prev: Message[]) => [
|
||||
...prev,
|
||||
{ role: "assistant", content: result.response },
|
||||
]);
|
||||
} catch (e) {
|
||||
setMessages((prev: Message[]) => [
|
||||
...prev,
|
||||
{
|
||||
role: "assistant",
|
||||
content: `**Error running command:** ${e}`,
|
||||
},
|
||||
]);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
setMessages((prev: Message[]) => [
|
||||
...prev,
|
||||
{ role: "user", content: messageText },
|
||||
{
|
||||
role: "assistant",
|
||||
content: `Unknown command: \`/${cmd}\`. Type \`/help\` to see available commands.`,
|
||||
},
|
||||
]);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const btwMatch = messageText.match(/^\/btw\s+(.+)/s);
|
||||
if (btwMatch) {
|
||||
const question = btwMatch[1].trim();
|
||||
setSideQuestion({ question, response: "", loading: true });
|
||||
|
||||
const isClaudeCode = model === "claude-code-pty";
|
||||
const provider = isClaudeCode
|
||||
? "claude-code"
|
||||
: model.startsWith("claude-")
|
||||
? "anthropic"
|
||||
: "ollama";
|
||||
const config: ProviderConfig = {
|
||||
provider,
|
||||
model,
|
||||
base_url: "http://localhost:11434",
|
||||
enable_tools: false,
|
||||
};
|
||||
wsRef.current?.sendSideQuestion(question, messages, config);
|
||||
return;
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
const newItem = {
|
||||
id: String(queueIdCounterRef.current++),
|
||||
text: messageText,
|
||||
};
|
||||
queuedMessagesRef.current = [...queuedMessagesRef.current, newItem];
|
||||
setQueuedMessages([...queuedMessagesRef.current]);
|
||||
return;
|
||||
}
|
||||
|
||||
const isClaudeCode = model === "claude-code-pty";
|
||||
if (!isClaudeCode && model.startsWith("claude-")) {
|
||||
const hasKey = await api.getAnthropicApiKeyExists();
|
||||
if (!hasKey) {
|
||||
pendingMessageRef.current = messageText;
|
||||
setShowApiKeyDialog(true);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const fileRefs = [...messageText.matchAll(/(^|[\s\n])@([^\s@]+)/g)].map(
|
||||
(m) => m[2],
|
||||
);
|
||||
let expandedText = messageText;
|
||||
if (fileRefs.length > 0) {
|
||||
const expansions = await Promise.allSettled(
|
||||
fileRefs.map(async (ref) => {
|
||||
const contents = await api.readFile(ref);
|
||||
return { ref, contents };
|
||||
}),
|
||||
);
|
||||
for (const result of expansions) {
|
||||
if (result.status === "fulfilled") {
|
||||
expandedText += `\n\n[File: ${result.value.ref}]\n\`\`\`\n${result.value.contents}\n\`\`\``;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const userMsg: Message = { role: "user", content: expandedText };
|
||||
const newHistory = [...messages, userMsg];
|
||||
|
||||
setMessages(newHistory);
|
||||
setLoading(true);
|
||||
setStreamingContent("");
|
||||
setStreamingThinking("");
|
||||
setActivityStatus(null);
|
||||
|
||||
try {
|
||||
const provider = isClaudeCode
|
||||
? "claude-code"
|
||||
: model.startsWith("claude-")
|
||||
? "anthropic"
|
||||
: "ollama";
|
||||
const config: ProviderConfig = {
|
||||
provider,
|
||||
model,
|
||||
base_url: "http://localhost:11434",
|
||||
enable_tools: enableTools,
|
||||
...(isClaudeCode && claudeSessionId
|
||||
? { session_id: claudeSessionId }
|
||||
: {}),
|
||||
};
|
||||
wsRef.current?.sendChat(newHistory, config);
|
||||
} catch (e) {
|
||||
console.error("Chat error:", e);
|
||||
const errorMessage = String(e);
|
||||
if (!errorMessage.includes("Chat cancelled by user")) {
|
||||
setMessages((prev: Message[]) => [
|
||||
...prev,
|
||||
{ role: "assistant", content: `**Error:** ${e}` },
|
||||
]);
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
},
|
||||
[
|
||||
messages,
|
||||
loading,
|
||||
model,
|
||||
enableTools,
|
||||
claudeSessionId,
|
||||
setClaudeSessionId,
|
||||
setMessages,
|
||||
setLoading,
|
||||
setStreamingContent,
|
||||
setStreamingThinking,
|
||||
setActivityStatus,
|
||||
setSideQuestion,
|
||||
wsRef,
|
||||
queuedMessagesRef,
|
||||
setQueuedMessages,
|
||||
queueIdCounterRef,
|
||||
],
|
||||
);
|
||||
|
||||
const sendMessageBatch = useCallback(
|
||||
async (messageTexts: string[]) => {
|
||||
if (messageTexts.length === 0) return;
|
||||
|
||||
const userMsgs: Message[] = messageTexts.map((text) => ({
|
||||
role: "user",
|
||||
content: text,
|
||||
}));
|
||||
const newHistory = [...messages, ...userMsgs];
|
||||
|
||||
setMessages(newHistory);
|
||||
setLoading(true);
|
||||
setStreamingContent("");
|
||||
setStreamingThinking("");
|
||||
setActivityStatus(null);
|
||||
|
||||
try {
|
||||
const isClaudeCode = model === "claude-code-pty";
|
||||
const provider = isClaudeCode
|
||||
? "claude-code"
|
||||
: model.startsWith("claude-")
|
||||
? "anthropic"
|
||||
: "ollama";
|
||||
const config: ProviderConfig = {
|
||||
provider,
|
||||
model,
|
||||
base_url: "http://localhost:11434",
|
||||
enable_tools: enableTools,
|
||||
...(isClaudeCode && claudeSessionId
|
||||
? { session_id: claudeSessionId }
|
||||
: {}),
|
||||
};
|
||||
wsRef.current?.sendChat(newHistory, config);
|
||||
} catch (e) {
|
||||
console.error("Chat error:", e);
|
||||
const errorMessage = String(e);
|
||||
if (!errorMessage.includes("Chat cancelled by user")) {
|
||||
setMessages((prev: Message[]) => [
|
||||
...prev,
|
||||
{ role: "assistant", content: `**Error:** ${e}` },
|
||||
]);
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
},
|
||||
[
|
||||
messages,
|
||||
model,
|
||||
enableTools,
|
||||
claudeSessionId,
|
||||
setMessages,
|
||||
setLoading,
|
||||
setStreamingContent,
|
||||
setStreamingThinking,
|
||||
setActivityStatus,
|
||||
wsRef,
|
||||
],
|
||||
);
|
||||
|
||||
const cancelGeneration = useCallback(async () => {
|
||||
if (queuedMessagesRef.current.length > 0) {
|
||||
const queued = queuedMessagesRef.current
|
||||
.map((item) => item.text)
|
||||
.join("\n");
|
||||
chatInputRef.current?.appendToInput(queued);
|
||||
}
|
||||
queuedMessagesRef.current = [];
|
||||
setQueuedMessages([]);
|
||||
try {
|
||||
wsRef.current?.cancel();
|
||||
await api.cancelChat();
|
||||
|
||||
if (streamingContent) {
|
||||
setMessages((prev: Message[]) => [
|
||||
...prev,
|
||||
{ role: "assistant", content: streamingContent },
|
||||
]);
|
||||
setStreamingContent("");
|
||||
}
|
||||
|
||||
setStreamingThinking("");
|
||||
setLoading(false);
|
||||
setActivityStatus(null);
|
||||
} catch (e) {
|
||||
console.error("Failed to cancel chat:", e);
|
||||
}
|
||||
}, [
|
||||
streamingContent,
|
||||
queuedMessagesRef,
|
||||
setQueuedMessages,
|
||||
chatInputRef,
|
||||
wsRef,
|
||||
setMessages,
|
||||
setStreamingContent,
|
||||
setStreamingThinking,
|
||||
setLoading,
|
||||
setActivityStatus,
|
||||
]);
|
||||
|
||||
const handleSaveApiKey = useCallback(async () => {
|
||||
if (!apiKeyInput.trim()) return;
|
||||
|
||||
try {
|
||||
await api.setAnthropicApiKey(apiKeyInput);
|
||||
setShowApiKeyDialog(false);
|
||||
setApiKeyInput("");
|
||||
|
||||
const pendingMessage = pendingMessageRef.current;
|
||||
pendingMessageRef.current = "";
|
||||
|
||||
if (pendingMessage.trim()) {
|
||||
sendMessage(pendingMessage);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to save API key:", e);
|
||||
alert(`Failed to save API key: ${e}`);
|
||||
}
|
||||
}, [apiKeyInput, sendMessage]);
|
||||
|
||||
const clearSession = useCallback(async () => {
|
||||
const confirmed = window.confirm(
|
||||
"Are you sure? This will clear all messages and reset the conversation context.",
|
||||
);
|
||||
|
||||
if (confirmed) {
|
||||
try {
|
||||
await api.cancelChat();
|
||||
wsRef.current?.cancel();
|
||||
} catch (e) {
|
||||
console.error("Failed to cancel chat:", e);
|
||||
}
|
||||
|
||||
clearMessages();
|
||||
setStreamingContent("");
|
||||
setStreamingThinking("");
|
||||
setLoading(false);
|
||||
setActivityStatus(null);
|
||||
setClaudeSessionId(null);
|
||||
try {
|
||||
localStorage.removeItem(`storykit-claude-session-id:${projectPath}`);
|
||||
} catch {
|
||||
// Ignore — quota or security errors.
|
||||
}
|
||||
}
|
||||
}, [
|
||||
wsRef,
|
||||
clearMessages,
|
||||
setStreamingContent,
|
||||
setStreamingThinking,
|
||||
setLoading,
|
||||
setActivityStatus,
|
||||
setClaudeSessionId,
|
||||
projectPath,
|
||||
]);
|
||||
|
||||
return {
|
||||
sendMessage,
|
||||
sendMessageBatch,
|
||||
cancelGeneration,
|
||||
handleSaveApiKey,
|
||||
clearSession,
|
||||
showApiKeyDialog,
|
||||
setShowApiKeyDialog,
|
||||
apiKeyInput,
|
||||
setApiKeyInput,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,280 @@
|
||||
import * as React from "react";
|
||||
import type { PipelineState, WizardStateData } from "../api/client";
|
||||
import { api, ChatWebSocket } from "../api/client";
|
||||
import type { LogEntry } from "../components/ServerLogsPanel";
|
||||
import type { Message } from "../types";
|
||||
import { formatToolActivity } from "../utils/chatUtils";
|
||||
|
||||
const { useEffect, useRef, useState } = React;
|
||||
|
||||
type SetState<T> = React.Dispatch<React.SetStateAction<T>>;
|
||||
|
||||
interface UseChatWebSocketParams {
|
||||
setMessages: SetState<Message[]>;
|
||||
setLoading: SetState<boolean>;
|
||||
setClaudeSessionId: SetState<string | null>;
|
||||
queuedMessagesRef: React.MutableRefObject<{ id: string; text: string }[]>;
|
||||
setQueuedMessages: SetState<{ id: string; text: string }[]>;
|
||||
setPendingAutoSendBatch: SetState<string[] | null>;
|
||||
}
|
||||
|
||||
interface ReconciliationEvent {
|
||||
id: string;
|
||||
storyId: string;
|
||||
status: string;
|
||||
message: string;
|
||||
}
|
||||
|
||||
export interface UseChatWebSocketResult {
|
||||
wsRef: React.MutableRefObject<ChatWebSocket | null>;
|
||||
wsConnected: boolean;
|
||||
streamingContent: string;
|
||||
setStreamingContent: SetState<string>;
|
||||
streamingThinking: string;
|
||||
setStreamingThinking: SetState<string>;
|
||||
activityStatus: string | null;
|
||||
setActivityStatus: SetState<string | null>;
|
||||
permissionQueue: {
|
||||
requestId: string;
|
||||
toolName: string;
|
||||
toolInput: Record<string, unknown>;
|
||||
}[];
|
||||
setPermissionQueue: SetState<
|
||||
{
|
||||
requestId: string;
|
||||
toolName: string;
|
||||
toolInput: Record<string, unknown>;
|
||||
}[]
|
||||
>;
|
||||
pipeline: PipelineState;
|
||||
pipelineVersion: number;
|
||||
reconciliationActive: boolean;
|
||||
reconciliationEvents: ReconciliationEvent[];
|
||||
agentConfigVersion: number;
|
||||
agentStateVersion: number;
|
||||
needsOnboarding: boolean;
|
||||
setNeedsOnboarding: SetState<boolean>;
|
||||
wizardState: WizardStateData | null;
|
||||
setWizardState: SetState<WizardStateData | null>;
|
||||
sideQuestion: {
|
||||
question: string;
|
||||
response: string;
|
||||
loading: boolean;
|
||||
} | null;
|
||||
setSideQuestion: SetState<{
|
||||
question: string;
|
||||
response: string;
|
||||
loading: boolean;
|
||||
} | null>;
|
||||
serverLogs: LogEntry[];
|
||||
storyTokenCosts: Map<string, number>;
|
||||
}
|
||||
|
||||
export function useChatWebSocket({
|
||||
setMessages,
|
||||
setLoading,
|
||||
setClaudeSessionId,
|
||||
queuedMessagesRef,
|
||||
setQueuedMessages,
|
||||
setPendingAutoSendBatch,
|
||||
}: UseChatWebSocketParams): UseChatWebSocketResult {
|
||||
const wsRef = useRef<ChatWebSocket | null>(null);
|
||||
const [wsConnected, setWsConnected] = useState(false);
|
||||
const [streamingContent, setStreamingContent] = useState("");
|
||||
const [streamingThinking, setStreamingThinking] = useState("");
|
||||
const [activityStatus, setActivityStatus] = useState<string | null>(null);
|
||||
const [permissionQueue, setPermissionQueue] = useState<
|
||||
{
|
||||
requestId: string;
|
||||
toolName: string;
|
||||
toolInput: Record<string, unknown>;
|
||||
}[]
|
||||
>([]);
|
||||
const [pipeline, setPipeline] = useState<PipelineState>({
|
||||
backlog: [],
|
||||
current: [],
|
||||
qa: [],
|
||||
merge: [],
|
||||
done: [],
|
||||
});
|
||||
const [pipelineVersion, setPipelineVersion] = useState(0);
|
||||
const [reconciliationActive, setReconciliationActive] = useState(false);
|
||||
const [reconciliationEvents, setReconciliationEvents] = useState<
|
||||
ReconciliationEvent[]
|
||||
>([]);
|
||||
const reconciliationEventIdRef = useRef(0);
|
||||
const [agentConfigVersion, setAgentConfigVersion] = useState(0);
|
||||
const [agentStateVersion, setAgentStateVersion] = useState(0);
|
||||
const [needsOnboarding, setNeedsOnboarding] = useState(false);
|
||||
const [wizardState, setWizardState] = useState<WizardStateData | null>(null);
|
||||
const [sideQuestion, setSideQuestion] = useState<{
|
||||
question: string;
|
||||
response: string;
|
||||
loading: boolean;
|
||||
} | null>(null);
|
||||
const [serverLogs, setServerLogs] = useState<LogEntry[]>([]);
|
||||
const [storyTokenCosts, setStoryTokenCosts] = useState<Map<string, number>>(
|
||||
new Map(),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const ws = new ChatWebSocket();
|
||||
wsRef.current = ws;
|
||||
|
||||
ws.connect({
|
||||
onToken: (content) => {
|
||||
setStreamingContent((prev: string) => prev + content);
|
||||
},
|
||||
onThinkingToken: (content) => {
|
||||
setStreamingThinking((prev: string) => prev + content);
|
||||
},
|
||||
onUpdate: (history) => {
|
||||
setMessages(history);
|
||||
setStreamingContent("");
|
||||
setStreamingThinking("");
|
||||
const last = history[history.length - 1];
|
||||
if (last?.role === "assistant" && !last.tool_calls) {
|
||||
setLoading(false);
|
||||
setActivityStatus(null);
|
||||
if (queuedMessagesRef.current.length > 0) {
|
||||
const batch = queuedMessagesRef.current.map((item) => item.text);
|
||||
queuedMessagesRef.current = [];
|
||||
setQueuedMessages([]);
|
||||
setPendingAutoSendBatch(batch);
|
||||
}
|
||||
}
|
||||
},
|
||||
onSessionId: (sessionId) => {
|
||||
setClaudeSessionId(sessionId);
|
||||
},
|
||||
onError: (message) => {
|
||||
console.error("WebSocket error:", message);
|
||||
setLoading(false);
|
||||
setActivityStatus(null);
|
||||
const markdownMessage = message.replace(
|
||||
/(https?:\/\/[^\s]+)/g,
|
||||
"[$1]($1)",
|
||||
);
|
||||
setMessages((prev) => [
|
||||
...prev,
|
||||
{ role: "assistant", content: markdownMessage },
|
||||
]);
|
||||
if (queuedMessagesRef.current.length > 0) {
|
||||
const batch = queuedMessagesRef.current.map((item) => item.text);
|
||||
queuedMessagesRef.current = [];
|
||||
setQueuedMessages([]);
|
||||
setPendingAutoSendBatch(batch);
|
||||
}
|
||||
},
|
||||
onPipelineState: (state) => {
|
||||
setPipeline(state);
|
||||
setPipelineVersion((v) => v + 1);
|
||||
const allItems = [
|
||||
...state.backlog,
|
||||
...state.current,
|
||||
...state.qa,
|
||||
...state.merge,
|
||||
...state.done,
|
||||
];
|
||||
for (const item of allItems) {
|
||||
api
|
||||
.getTokenCost(item.story_id)
|
||||
.then((cost) => {
|
||||
if (cost.total_cost_usd > 0) {
|
||||
setStoryTokenCosts((prev) => {
|
||||
const next = new Map(prev);
|
||||
next.set(item.story_id, cost.total_cost_usd);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// Silently ignore — cost data may not exist yet.
|
||||
});
|
||||
}
|
||||
},
|
||||
onPermissionRequest: (requestId, toolName, toolInput) => {
|
||||
setPermissionQueue((prev) => [
|
||||
...prev,
|
||||
{ requestId, toolName, toolInput },
|
||||
]);
|
||||
},
|
||||
onActivity: (toolName) => {
|
||||
setActivityStatus(formatToolActivity(toolName));
|
||||
},
|
||||
onReconciliationProgress: (storyId, status, message) => {
|
||||
if (status === "done") {
|
||||
setReconciliationActive(false);
|
||||
} else {
|
||||
setReconciliationActive(true);
|
||||
setReconciliationEvents((prev) => {
|
||||
const id = String(reconciliationEventIdRef.current++);
|
||||
const next = [...prev, { id, storyId, status, message }];
|
||||
// Keep only the last 8 events to avoid the banner growing too tall.
|
||||
return next.slice(-8);
|
||||
});
|
||||
}
|
||||
},
|
||||
onAgentConfigChanged: () => {
|
||||
setAgentConfigVersion((v) => v + 1);
|
||||
},
|
||||
onAgentStateChanged: () => {
|
||||
setAgentStateVersion((v) => v + 1);
|
||||
},
|
||||
onOnboardingStatus: (onboarding: boolean) => {
|
||||
setNeedsOnboarding(onboarding);
|
||||
},
|
||||
onWizardState: (state: WizardStateData) => {
|
||||
setWizardState(state);
|
||||
},
|
||||
onSideQuestionToken: (content) => {
|
||||
setSideQuestion((prev) =>
|
||||
prev ? { ...prev, response: prev.response + content } : prev,
|
||||
);
|
||||
},
|
||||
onSideQuestionDone: (response) => {
|
||||
setSideQuestion((prev) =>
|
||||
prev ? { ...prev, response, loading: false } : prev,
|
||||
);
|
||||
},
|
||||
onLogEntry: (timestamp, level, message) => {
|
||||
setServerLogs((prev) => [...prev, { timestamp, level, message }]);
|
||||
},
|
||||
onConnected: () => {
|
||||
setWsConnected(true);
|
||||
},
|
||||
});
|
||||
|
||||
return () => {
|
||||
ws.close();
|
||||
wsRef.current = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
return {
|
||||
wsRef,
|
||||
wsConnected,
|
||||
streamingContent,
|
||||
setStreamingContent,
|
||||
streamingThinking,
|
||||
setStreamingThinking,
|
||||
activityStatus,
|
||||
setActivityStatus,
|
||||
permissionQueue,
|
||||
setPermissionQueue,
|
||||
pipeline,
|
||||
pipelineVersion,
|
||||
reconciliationActive,
|
||||
reconciliationEvents,
|
||||
agentConfigVersion,
|
||||
agentStateVersion,
|
||||
needsOnboarding,
|
||||
setNeedsOnboarding,
|
||||
wizardState,
|
||||
setWizardState,
|
||||
sideQuestion,
|
||||
setSideQuestion,
|
||||
serverLogs,
|
||||
storyTokenCosts,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
export function formatToolActivity(toolName: string): string {
|
||||
switch (toolName) {
|
||||
// Built-in provider tool names
|
||||
case "read_file":
|
||||
case "Read":
|
||||
return "Reading file...";
|
||||
case "write_file":
|
||||
case "Write":
|
||||
case "Edit":
|
||||
return "Writing file...";
|
||||
case "list_directory":
|
||||
case "Glob":
|
||||
return "Listing files...";
|
||||
case "search_files":
|
||||
case "Grep":
|
||||
return "Searching files...";
|
||||
case "exec_shell":
|
||||
case "Bash":
|
||||
return "Executing command...";
|
||||
// Claude Code additional tool names
|
||||
case "Task":
|
||||
return "Running task...";
|
||||
case "WebFetch":
|
||||
return "Fetching web content...";
|
||||
case "WebSearch":
|
||||
return "Searching the web...";
|
||||
case "NotebookEdit":
|
||||
return "Editing notebook...";
|
||||
case "TodoWrite":
|
||||
return "Updating tasks...";
|
||||
default:
|
||||
return `Using ${toolName}...`;
|
||||
}
|
||||
}
|
||||
|
||||
export const estimateTokens = (text: string): number =>
|
||||
Math.ceil(text.length / 4);
|
||||
|
||||
export const getContextWindowSize = (
|
||||
modelName: string,
|
||||
claudeContextWindows?: Map<string, number>,
|
||||
): number => {
|
||||
if (modelName.startsWith("claude-")) {
|
||||
return claudeContextWindows?.get(modelName) ?? 200000;
|
||||
}
|
||||
if (modelName.includes("llama3")) return 8192;
|
||||
if (modelName.includes("qwen2.5")) return 32768;
|
||||
if (modelName.includes("deepseek")) return 16384;
|
||||
return 8192;
|
||||
};
|
||||
Reference in New Issue
Block a user