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

fix: address review findings for editorial presentation

Browse Source
This commit is contained in:
lda
2026-07-05 22:44:23 +07:00 Verified
parent 117a8ace83
commit 597370ffcd
8 changed files with 39 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/apps/console/src/presentation/PresentationRoute.test.tsx
-10
View File
@@ -53,16 +53,6 @@ describe("PresentationRoute", () => {
expect(await screen.findByText(/workflow.runs.resume/i)).toBeInTheDocument();
});
it("runs the prepared agent and applies the interrupt node action", async () => {
render(<PresentationRoute />);
await userEvent.click(screen.getByRole("button", { name: /run prepared agent/i }));
expect(await screen.findByText(/prepared workflow recipe/i)).toBeInTheDocument();
expect(screen.getAllByText(/selectWorkflowNode/i).length).toBeGreaterThanOrEqual(2);
expect(await screen.findByRole("dialog", { name: /issue review/i })).toBeInTheDocument();
});
it("opens a positioning branch via hash and returns to the parent scene first beat", async () => {
window.location.hash = "#discuss/hosted-automation";
render(<PresentationRoute />);
web/apps/console/src/presentation/PresentationRoute.tsx
-25
View File
@@ -11,7 +11,6 @@ import {
presentationReducer,
} from "./presentation-state.js";
import { hashForLocation } from "./storyboard-navigation.js";
import { findScene } from "./storyboard.js";
import type { PresentationLocation } from "./storyboard.js";
import "./presentation.css";
import "./styles/demo-workflow.css";
@@ -153,22 +152,6 @@ export const PresentationRoute = () => {
[],
);
const handleForceReplay = useCallback(() => {
demo.setMode("replay");
setEvidence(replayEvidence);
}, [demo, replayEvidence]);
const handleResetScene = useCallback(() => {
if (state.location.kind !== "main") return;
const scene = findScene(state.location.sceneId);
if (!scene || scene.beats.length === 0) return;
dispatch({ type: "jump", location: { kind: "main", sceneId: state.location.sceneId, beatId: scene.beats[0]!.id, focusPath: scene.beats[0]!.figure?.focusPath ?? [] } });
}, [state.location]);
const handleToggleMotion = useCallback(() => {
dispatch({ type: "toggle_motion" });
}, []);
return (
<main className="presentation-route" aria-label="lda.chat presentation" data-motion={state.motionDisabled ? "disabled" : "enabled"}>
<PresentationCanvas>
@@ -187,14 +170,6 @@ export const PresentationRoute = () => {
closeDiscussion={handleCloseDiscussion}
/>
</PresentationCanvas>
<button
type="button"
onClick={() => agent.startPreparedReplay()}
disabled={agent.phase === "running" || agent.phase === "awaiting-approval"}
className="presentation-route__agent-button"
>
Run prepared agent
</button>
</main>
);
};
web/apps/console/src/presentation/PresentationStage.tsx
+1 -1
View File
@@ -74,7 +74,7 @@ export const PresentationStage = ({
jump({ ...state.location, focusPath: path });
}
}}
motionDisabled={false}
motionDisabled={state.motionDisabled}
/>
)}
</section>
web/apps/console/src/presentation/figures/InteractiveFigure.tsx
+32 -4
View File
@@ -1,5 +1,5 @@
import { useCallback, useEffect, useMemo, useRef, useState, type KeyboardEvent } from "react";
import { ReactFlow, type Node, type Edge, type NodeTypes } from "@xyflow/react";
import { ReactFlow, ReactFlowProvider, useReactFlow, type Node, type Edge, type NodeTypes } from "@xyflow/react";
import "@xyflow/react/dist/style.css";
import type { FigureCatalogDefinition, FigureNodeKind } from "./model.js";
import { layoutFigure, NODE_WIDTH, NODE_HEIGHT, type PositionedFigure } from "./layout.js";
@@ -45,6 +45,7 @@ const FigureFlowNode = ({ data }: { data: FigureNodeData }) => {
data-expandable={expandable}
data-testid={`figure-node-${data.nodeId}`}
aria-label={accessibleName}
tabIndex={-1}
onClick={() => {
data.onActivate(data.nodeId);
if (expandable) data.onExpand(data.nodeId);
@@ -69,7 +70,15 @@ const nodeTypes: NodeTypes = {
figure: FigureFlowNode,
};
export const InteractiveFigure = ({
const FitViewOnLayoutChange = ({ layoutVersion }: { layoutVersion: number }) => {
const { fitView } = useReactFlow();
useEffect(() => {
void fitView({ padding: 0.15, duration: 0 });
}, [fitView, layoutVersion]);
return null;
};
const InteractiveFigureInner = ({
catalog,
focusPath,
activeNodeId,
@@ -82,7 +91,7 @@ export const InteractiveFigure = ({
activeNodeId ?? focus.figure.nodes[0]?.id ?? "",
);
const containerRef = useRef<HTMLDivElement>(null);
const prevFigureIdRef = useState(focus.figure.id);
const [layoutVersion, setLayoutVersion] = useState(0);
useEffect(() => {
if (activeNodeId) setFocusedNodeId(activeNodeId);
@@ -91,6 +100,7 @@ export const InteractiveFigure = ({
useEffect(() => {
const firstNode = focus.figure.nodes[0];
if (firstNode) setFocusedNodeId(firstNode.id);
setLayoutVersion((v) => v + 1);
}, [focus.figure.id]);
const handleExpand = useCallback(
@@ -177,6 +187,15 @@ export const InteractiveFigure = ({
[layout.edges],
);
const handleNodeClick = useCallback(
(_event: React.MouseEvent, node: Node) => {
const data = node.data as FigureNodeData;
setFocusedNodeId(data.nodeId);
if (data.isExpandable) handleExpand(data.nodeId);
},
[handleExpand],
);
return (
<div
className="interactive-figure"
@@ -205,8 +224,17 @@ export const InteractiveFigure = ({
zoomOnPinch={false}
zoomOnDoubleClick={false}
preventScrolling={false}
/>
onNodeClick={handleNodeClick}
>
<FitViewOnLayoutChange layoutVersion={layoutVersion} />
</ReactFlow>
</div>
</div>
);
};
export const InteractiveFigure = (props: InteractiveFigureProps) => (
<ReactFlowProvider>
<InteractiveFigureInner {...props} />
</ReactFlowProvider>
);
web/apps/console/src/presentation/figures/architecture-catalog.ts
+1 -1
View File
@@ -91,7 +91,7 @@ export const architectureCatalog: FigureCatalogDefinition = defineFigureCatalog(
label: "WorkflowServer",
summary: "wf_server composition",
kind: "runtime",
evidencePointer: "src/wf_server/server.py",
evidencePointer: "src/wf_server/context.py",
},
{
id: "workflow-api",
web/apps/console/src/presentation/figures/interactive-figure.css
+4
View File
@@ -11,6 +11,10 @@
min-height: 0;
}
.interactive-figure .react-flow__pane {
pointer-events: none;
}
.interactive-figure .react-flow__node {
cursor: default;
}
web/apps/console/src/presentation/presentation.css
-13
View File
@@ -417,19 +417,6 @@
font-weight: 600;
}
.presentation-route__agent-button {
position: fixed;
bottom: 0.75rem;
right: 0.75rem;
padding: 0.45rem 0.75rem;
border: 1px solid oklch(0.4 0.05 250);
background: oklch(0.18 0.025 250);
color: inherit;
border-radius: 0.4rem;
font-size: 0.8rem;
z-index: 25;
}
.chat-tool-part {
display: flex;
align-items: center;
web/apps/console/src/presentation/storyboard.ts
+1 -1
View File
@@ -140,7 +140,7 @@ export const mainScenes = defineScenes([
sceneBeat("client", "Client operations", "Human and agent clients use the same public lifecycle surface.", { figure: { catalogId: "system-architecture", focusPath: [], activeNodeId: "client-operations" } }),
sceneBeat("api", "Transport and API", "JSON-RPC reaches WorkflowApi without owning domain behavior.", { figure: { catalogId: "system-architecture", focusPath: [], activeNodeId: "application-lifecycle" } }),
sceneBeat("runtime", "Runtime and providers", "The runtime resolves provider-neutral capabilities and stores lifecycle records.", { figure: { catalogId: "system-architecture", focusPath: ["runtime-providers"], activeNodeId: "configured-providers" } }),
sceneBeat("node-use", "NodeUse", "One callable node validates input, invokes a capability, and reduces output into state.", { evidenceMode: "peek", figure: { catalogId: "system-architecture", focusPath: [], activeNodeId: "node-use" } }),
sceneBeat("node-use", "NodeUse", "One callable node validates input, invokes a capability, and reduces output into state.", { evidenceMode: "peek", figure: { catalogId: "system-architecture", focusPath: ["node-use"], activeNodeId: "node-use" } }),
],
},
{