lda.chat/lda-wf
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: polish assistant-ui chat surface and rename tools

Browse Source 
- Remove useExternalStoreRuntime (caused duplicate ID crashes on re-render)
- Render messages directly from projected data for read-only transcripts
- ToolCard open by default for single tools, collapsed inside ToolGroupCard
- Remove result bubble from ToolCard (was unstyled)
- Move run button below thread (chat-style layout)
- Add user/assistant visual distinction (right-aligned cyan bubble for user)
- Rename startPreparedReportRun -> startRun
- Add 3 workflow.run_once tool calls to Scene 2
- Add overflow handling with max-height + hidden overflow
- Update all tests for new behavior
This commit is contained in:
lda
2026-07-10 07:36:42 +07:00 Verified
parent 029da57f03
commit df026b553a
13 changed files with 137 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/apps/console/src/demo/agent/events.test.ts
+4 -4
View File
@@ -18,19 +18,19 @@ describe("agent events", () => {
});
it("creates tool call, tool result, and presentation action parts", () => {
expect(agentToolCallPart("c1", "startPreparedReportRun", { deploymentId: "lda_report_case_study.default" })).toEqual({
expect(agentToolCallPart("c1", "startRun", { deploymentId: "lda_report_case_study.default" })).toEqual({
type: "tool-call",
call: {
id: "c1",
name: "startPreparedReportRun",
name: "startRun",
input: { deploymentId: "lda_report_case_study.default" },
},
});
expect(agentToolResultPart("c1", "startPreparedReportRun", "success", { runId: "run_1" })).toEqual({
expect(agentToolResultPart("c1", "startRun", "success", { runId: "run_1" })).toEqual({
type: "tool-result",
result: {
callId: "c1",
name: "startPreparedReportRun",
name: "startRun",
status: "success",
output: { runId: "run_1" },
},
web/apps/console/src/demo/agent/preparedRecipeDriver.test.ts
+3 -3
View File
@@ -16,7 +16,7 @@ describe("prepared recipe driver", () => {
const messages = await collect(runPreparedRecipeReplay(recording, signal, async () => ({ approved: true, comment: "test" })));
expect(messages[0]?.role).toBe("user");
expect(messages.some((message) =>
message.parts.some((part) => part.type === "tool-call" && part.call.name === "startPreparedReportRun"),
message.parts.some((part) => part.type === "tool-call" && part.call.name === "startRun"),
)).toBe(true);
expect(messages.some((message) =>
message.parts.some((part) => part.type === "presentation-action" && part.action.type === "selectWorkflowNode"),
@@ -35,7 +35,7 @@ describe("prepared recipe driver", () => {
);
expect(toolNames).toEqual([
"inspectDeployment",
"startPreparedReportRun",
"startRun",
"selectWorkflowNode",
"resumeIssueReview",
"readRunTrace",
@@ -92,7 +92,7 @@ describe("prepared recipe driver", () => {
);
expect(toolCalls).toEqual([
"inspectDeployment",
"startPreparedReportRun",
"startRun",
"selectWorkflowNode",
"resumeIssueReview",
]);
web/apps/console/src/demo/agent/preparedRecipeDriver.ts
+1 -1
View File
@@ -58,7 +58,7 @@ export async function* runPreparedRecipeReplay(
case "inspectDeployment":
yield emitToolStep(step.id, step.toolName, { deploymentId }, { deploymentId });
break;
case "startPreparedReportRun":
case "startRun":
yield emitToolStep(step.id, step.toolName, { deploymentId }, {
runId,
eventId: runStart?.id ?? null,
web/apps/console/src/demo/agent/recipes.ts
+2 -2
View File
@@ -2,7 +2,7 @@ import { LDA_REPORT_DEPLOYMENT_ID } from "../ldaReportDemoConfig.js";
import type { PresentationToolName, WorkflowToolName } from "./tools.js";
export type RecipeTool =
| Extract<WorkflowToolName, "inspectDeployment" | "startPreparedReportRun" | "resumeIssueReview" | "readRunTrace">
| Extract<WorkflowToolName, "inspectDeployment" | "startRun" | "resumeIssueReview" | "readRunTrace">
| Extract<PresentationToolName, "selectWorkflowNode">;
type SelectWorkflowNodeStep = {
@@ -47,7 +47,7 @@ export const PREPARE_THESIS_REPORT_RECIPE: PreparedRecipe = {
{
id: "start-run",
narration: "I will start the prepared workflow run.",
toolName: "startPreparedReportRun",
toolName: "startRun",
},
{
id: "focus-interrupt",
web/apps/console/src/demo/agent/timelineAgent.ts
+1 -1
View File
@@ -96,7 +96,7 @@ export const useTimelineAgent = (
setMessages((current) => appendToolMessage(
current,
"timeline-agent-start",
"startPreparedReportRun",
"startRun",
{ mode: modeLabel },
{ phase: "started" },
));
web/apps/console/src/demo/agent/tools.test.ts
+1 -1
View File
@@ -4,7 +4,7 @@ import { AGENT_TOOLS, isAllowedAgentToolName } from "./tools.js";
describe("agent tools", () => {
it("separates workflow tools from presentation tools", () => {
expect(AGENT_TOOLS.inspectDeployment.kind).toBe("workflow");
expect(AGENT_TOOLS.startPreparedReportRun.kind).toBe("workflow");
expect(AGENT_TOOLS.startRun.kind).toBe("workflow");
expect(AGENT_TOOLS.resumeIssueReview.kind).toBe("workflow");
expect(AGENT_TOOLS.readRunTrace.kind).toBe("workflow");
expect(AGENT_TOOLS.selectWorkflowNode.kind).toBe("presentation");
web/apps/console/src/demo/agent/tools.ts
+3 -3
View File
@@ -1,6 +1,6 @@
export type WorkflowToolName =
| "inspectDeployment"
| "startPreparedReportRun"
| "startRun"
| "resumeIssueReview"
| "readRunTrace";
@@ -23,8 +23,8 @@ export const AGENT_TOOLS = {
kind: "workflow",
description: "Inspect the prepared report deployment.",
},
startPreparedReportRun: {
name: "startPreparedReportRun",
startRun: {
name: "startRun",
kind: "workflow",
description: "Start the prepared report workflow run.",
},
web/apps/console/src/presentation/OperatorChat.test.tsx
+8 -6
View File
@@ -77,7 +77,7 @@ describe("OperatorChat", () => {
expect(screen.getByRole("button", { name: /selectWorkflowNode/i })).toBeInTheDocument();
});
it("renders tool calls as collapsed tool cards", async () => {
it("renders tool calls as open tool cards", async () => {
const user = userEvent.setup();
const messages: ReadonlyArray<AgentMessage> = [
{
@@ -92,9 +92,10 @@ describe("OperatorChat", () => {
render(<OperatorChat state={initialPresentationState} messages={messages} />);
const tool = screen.getByRole("button", { name: /readRunTrace/i });
expect(screen.queryByText(/run_1/)).not.toBeInTheDocument();
await user.click(tool);
expect(tool).toHaveAttribute("aria-expanded", "true");
expect(screen.getByText(/run_1/)).toBeInTheDocument();
await user.click(tool);
expect(screen.queryByText(/run_1/)).not.toBeInTheDocument();
});
it("renders schema approval surface inside chat approval request", async () => {
@@ -157,8 +158,9 @@ describe("OperatorChat", () => {
const tool = screen.getByRole("button", { name: /resumeIssueReview/i });
expect(screen.queryByRole("button", { name: /Approve/i })).not.toBeInTheDocument();
expect(screen.queryByRole("button", { name: /Deny/i })).not.toBeInTheDocument();
await user.click(tool);
expect(screen.getByLabelText("tool input")).toBeInTheDocument();
await user.click(tool);
expect(screen.queryByLabelText("tool input")).not.toBeInTheDocument();
});
it("renders error and presentation action parts", () => {
@@ -256,7 +258,7 @@ describe("OperatorChat", () => {
parts: [
{
type: "tool-call",
call: { id: "call-1", name: "startPreparedReportRun", input: { deploymentId: "demo" } },
call: { id: "call-1", name: "startRun", input: { deploymentId: "demo" } },
},
],
},
@@ -264,7 +266,7 @@ describe("OperatorChat", () => {
render(<OperatorChat state={initialPresentationState} messages={messages} />);
expect(screen.getByRole("button", { name: /startPreparedReportRun/i })).toBeInTheDocument();
expect(screen.getByRole("button", { name: /startRun/i })).toBeInTheDocument();
});
it("disables schema approval buttons when approval actions are unavailable", () => {
web/apps/console/src/presentation/chat/AssistantOperatorThread.test.tsx
+4 -3
View File
@@ -7,7 +7,7 @@ import { AssistantOperatorThread } from "./AssistantOperatorThread.js";
afterEach(() => cleanup());
describe("AssistantOperatorThread", () => {
it("renders text interleaved with a collapsed tool call", async () => {
it("renders text interleaved with an open tool call", async () => {
const user = userEvent.setup();
const messages: ReadonlyArray<AgentMessage> = [
{
@@ -30,9 +30,10 @@ describe("AssistantOperatorThread", () => {
expect(screen.getByText("I will inspect the run.")).toBeInTheDocument();
expect(screen.getByText("The trace is inspectable.")).toBeInTheDocument();
const tool = screen.getByRole("button", { name: /readRunTrace/i });
expect(screen.queryByText(/run_1/)).not.toBeInTheDocument();
await user.click(tool);
expect(tool).toHaveAttribute("aria-expanded", "true");
expect(screen.getByText(/run_1/)).toBeInTheDocument();
await user.click(tool);
expect(screen.queryByText(/run_1/)).not.toBeInTheDocument();
});
it("renders grouped consecutive tool calls", () => {
web/apps/console/src/presentation/chat/AssistantOperatorThread.tsx
+67 -80
View File
@@ -1,11 +1,4 @@
import { useCallback, useMemo, useState } from "react";
import {
AssistantRuntimeProvider,
MessagePrimitive,
ThreadPrimitive,
useExternalStoreRuntime,
type AppendMessage,
} from "@assistant-ui/react";
import type { AgentMessage } from "../../demo/agent/events.js";
import { SchemaApprovalSurface } from "../approval/SchemaApprovalSurface.js";
import { projectAgentMessagesForAssistant, type AssistantProjectedMessage } from "./assistantRuntimeProjection.js";
@@ -31,15 +24,13 @@ const formatJson = (value: unknown): string => {
const ToolCard = ({
toolName,
args,
result,
isError,
defaultOpen = true,
}: {
readonly toolName: string;
readonly args?: unknown;
readonly result?: unknown;
readonly isError?: boolean;
readonly defaultOpen?: boolean;
}) => {
const [open, setOpen] = useState(false);
const [open, setOpen] = useState(defaultOpen);
return (
<div className="assistant-tool-card" data-open={open ? "true" : "false"}>
<button
@@ -48,19 +39,13 @@ const ToolCard = ({
aria-expanded={open}
onClick={() => setOpen((c) => !c)}
>
<span className="assistant-tool-card__label">Used tool: <b>{toolName}</b></span>
<span className="assistant-tool-card__label">{toolName}</span>
</button>
{open ? (
<div className="assistant-tool-card__body">
{args !== undefined ? (
<pre className="assistant-tool-card__io" aria-label="tool input">{formatJson(args)}</pre>
) : null}
{result !== undefined ? (
<div className="assistant-tool-card__result" data-error={isError ? "true" : undefined}>
<span>{isError ? "error" : "success"}</span>
<pre className="assistant-tool-card__io" aria-label="tool output">{formatJson(result)}</pre>
</div>
) : null}
</div>
) : null}
</div>
@@ -100,9 +85,10 @@ const renderContentPart = (
part: ContentPart,
submitApproval?: (() => void) | undefined,
cancelApproval?: (() => void) | undefined,
defaultOpen?: boolean,
): React.ReactNode => {
if (part.type === "text") {
return <MessagePrimitive.Content />;
return <p style={{ whiteSpace: "pre-line" }}>{part.text}</p>;
}
const toolName = part.toolName;
const args = part.args as Record<string, unknown> | undefined;
@@ -130,7 +116,7 @@ const renderContentPart = (
</div>
);
}
return <ToolCard toolName={toolName} args={part.args} result={part.result} isError={part.isError ?? false} />;
return <ToolCard toolName={toolName} args={part.args} {...(defaultOpen !== undefined ? { defaultOpen } : {})} />;
};
const AssistantMessageBody = ({
@@ -142,11 +128,16 @@ const AssistantMessageBody = ({
readonly submitApproval?: (() => void) | undefined;
readonly cancelApproval?: (() => void) | undefined;
}) => {
const textParts = parts.filter((p) => p.type === "text");
const toolParts = parts.filter((p) => p.type === "tool-call");
if (toolParts.length === 0) {
return <MessagePrimitive.Content />;
return (
<>
{parts.filter((p) => p.type === "text").map((p, i) => (
<p key={`text-${i}`} style={{ whiteSpace: "pre-line" }}>{p.text}</p>
))}
</>
);
}
if (toolParts.length === 1) {
@@ -164,54 +155,38 @@ const AssistantMessageBody = ({
}
const firstToolIndex = parts.findIndex((p) => p.type === "tool-call");
const lastToolIndex = parts.findLastIndex((p) => p.type === "tool-call");
const beforeText = parts.slice(0, firstToolIndex).filter((p) => p.type === "text");
const afterText = parts.slice(lastToolIndex + 1).filter((p) => p.type === "text");
return (
<>
{beforeText.map((p, i) => <p key={`before-${i}`} style={{ whiteSpace: "pre-line" }}>{p.text}</p>)}
<ToolGroupCard toolCount={toolParts.length}>
{toolParts.map((tool, i) => (
<div key={i}>
{renderContentPart(tool, submitApproval, cancelApproval)}
{renderContentPart(tool, submitApproval, cancelApproval, false)}
</div>
))}
</ToolGroupCard>
{afterText.map((p, i) => <p key={`after-${i}`} style={{ whiteSpace: "pre-line" }}>{p.text}</p>)}
</>
);
};
const ThreadBody = ({
submitApproval,
cancelApproval,
const MessageBubble = ({
role,
children,
}: {
readonly submitApproval?: (() => void) | undefined;
readonly cancelApproval?: (() => void) | undefined;
readonly role: "user" | "assistant";
readonly children: React.ReactNode;
}) => (
<ThreadPrimitive.Root className="assistant-thread">
<ThreadPrimitive.Viewport className="assistant-thread__viewport">
<ThreadPrimitive.Messages>
{({ message }) => {
const content = (message as unknown as { content?: unknown }).content;
const parts: ContentPart[] = Array.isArray(content)
? (content as ContentPart[])
: typeof content === "string"
? [{ type: "text" as const, text: content }]
: [];
return (
<MessagePrimitive.Root
className="assistant-message"
data-role={message.role}
>
<AssistantMessageBody
parts={parts}
submitApproval={submitApproval}
cancelApproval={cancelApproval}
/>
</MessagePrimitive.Root>
);
}}
</ThreadPrimitive.Messages>
</ThreadPrimitive.Viewport>
</ThreadPrimitive.Root>
<div className="assistant-message" data-role={role}>
{role === "user" ? (
<div className="assistant-message__user-bubble">{children}</div>
) : (
children
)}
</div>
);
export const AssistantOperatorThread = ({
@@ -223,41 +198,53 @@ export const AssistantOperatorThread = ({
ariaLabel = "operator conversation",
}: AssistantOperatorThreadProps) => {
const projected = useMemo(() => projectAgentMessagesForAssistant(messages), [messages]);
const [localMessages, setLocalMessages] = useState<AssistantProjectedMessage[]>([]);
const runtimeMessages = projected.length > 0 ? projected : localMessages;
const onNew = useCallback(async (message: AppendMessage) => {
const text = message.content.find((part) => part.type === "text")?.text ?? "";
setLocalMessages((current) => [
...current,
{
id: `local-${current.length + 1}`,
role: "user" as const,
content: [{ type: "text" as const, text }],
},
]);
}, []);
const runtime = useExternalStoreRuntime({
messages: runtimeMessages,
setMessages: (msgs) => setLocalMessages([...msgs]),
onNew,
convertMessage: (message) => message,
isRunning: false,
});
const handleRun = useCallback(() => {
if (!runAction || runAction.disabled) return;
runAction.run();
}, [runAction]);
return (
<section className="assistant-operator-thread" data-mode={mode} role="log" aria-label={ariaLabel}>
<div className="assistant-thread">
<div className="assistant-thread__viewport">
{projected.map((message) => {
const content = (message as unknown as { content?: unknown }).content;
const parts: ContentPart[] = Array.isArray(content)
? (content as ContentPart[])
: typeof content === "string"
? [{ type: "text" as const, text: content }]
: [];
if (message.role === "user") {
return (
<MessageBubble key={message.id} role="user">
{parts.filter((p) => p.type === "text").map((p, i) => (
<p key={`text-${i}`} style={{ whiteSpace: "pre-line" }}>{p.text}</p>
))}
</MessageBubble>
);
}
return (
<MessageBubble key={message.id} role="assistant">
<AssistantMessageBody
parts={parts}
submitApproval={submitApproval}
cancelApproval={cancelApproval}
/>
</MessageBubble>
);
})}
</div>
</div>
{runAction ? (
<div className="assistant-operator-thread__action">
<button type="button" disabled={runAction.disabled} onClick={runAction.run}>
<button type="button" disabled={runAction.disabled} onClick={handleRun}>
{runAction.label}
</button>
</div>
) : null}
<AssistantRuntimeProvider runtime={runtime}>
<ThreadBody submitApproval={submitApproval} cancelApproval={cancelApproval} />
</AssistantRuntimeProvider>
</section>
);
};
web/apps/console/src/presentation/opening/ProblemLoopScene.test.tsx
+3 -6
View File
@@ -10,17 +10,14 @@ afterEach(() => cleanup());
describe("ProblemLoopScene", () => {
it("uses the assistant transcript surface for the direct-action side", async () => {
const user = userEvent.setup();
render(<ProblemLoopScene scene={problemScene} beat={findBeat("problem", "direct-actions")!} />);
const transcript = screen.getByRole("log", { name: /one-off assistant transcript/i });
expect(transcript).toHaveClass("assistant-operator-thread");
expect(within(transcript).getByText("Can you finish this workspace task?")).toBeInTheDocument();
expect(within(transcript).getByRole("button", { name: /workspace.run_once/i })).toBeInTheDocument();
expect(within(transcript).getByText("Reports success, but leaves no reusable workflow behind.")).toBeInTheDocument();
await user.click(within(transcript).getByRole("button", { name: /workspace.run_once/i }));
expect(within(transcript).getByText(/ephemeral/i)).toBeInTheDocument();
const toolButtons = within(transcript).getAllByRole("button", { name: /workflow.run_once/i });
expect(toolButtons).toHaveLength(3);
expect(within(transcript).getByText("Done. But none of this is recorded in a durable workflow.")).toBeInTheDocument();
});
it("renders reusable automation as a durable workflow blueprint", () => {
web/apps/console/src/presentation/opening/ProblemLoopScene.tsx
+20 -4
View File
@@ -19,12 +19,28 @@ const oneOffToolLoopMessages: ReadonlyArray<AgentMessage> = [
{
type: "tool-call",
call: {
id: "scene-2-tool",
name: "workspace.run_once" as AgentToolName,
input: { persistence: "ephemeral", reusable_workflow: false },
id: "scene-2-tool-1",
name: "workflow.run_once" as AgentToolName,
input: { source: "api", endpoint: "/tasks" },
},
},
{ type: "text", text: "Reports success, but leaves no reusable workflow behind." },
{
type: "tool-call",
call: {
id: "scene-2-tool-2",
name: "workflow.run_once" as AgentToolName,
input: { format: "json", validate: true },
},
},
{
type: "tool-call",
call: {
id: "scene-2-tool-3",
name: "workflow.run_once" as AgentToolName,
input: { destination: "file", path: "/tmp/result.json" },
},
},
{ type: "text", text: "Done. But none of this is recorded in a durable workflow." },
],
},
];
web/apps/console/src/presentation/presentation.css
+20 -13
View File
@@ -1639,6 +1639,24 @@
margin-bottom: 0.65rem;
}
.assistant-message[data-role="user"] {
justify-items: end;
}
.assistant-message__user-bubble {
background: color-mix(in oklch, var(--accent-cyan) 14%, var(--stage-surface));
border: 1px solid color-mix(in oklch, var(--accent-cyan) 30%, var(--stage-line));
border-radius: 0.65rem;
padding: 0.55rem 0.75rem;
max-width: 80%;
color: var(--text-primary);
font: 0.82rem/1.5 var(--font-interface);
}
.assistant-message[data-role="assistant"] {
justify-items: start;
}
.assistant-tool-card {
border: 1px solid var(--stage-line);
border-radius: 0.65rem;
@@ -1680,19 +1698,6 @@
overflow-x: auto;
}
.assistant-tool-card__result {
margin-top: 0.35rem;
font: 600 0.7rem/1 var(--font-interface);
}
.assistant-tool-card__result span {
color: var(--accent-cyan);
}
.assistant-tool-card__result[data-error="true"] span {
color: var(--accent-error);
}
.assistant-tool-group {
border: 1px solid var(--stage-line);
border-radius: 0.65rem;
@@ -1723,6 +1728,8 @@
flex-direction: column;
gap: 0.35rem;
padding: 0 0.65rem 0.55rem;
max-height: 14rem;
overflow: hidden;
}
.assistant-tool-group__body .assistant-tool-card {