From 4070b0305307c99dc1055d8564a6837b568a890b Mon Sep 17 00:00:00 2001
From: Pavel <pabin@yandex.ru>
Date: Sun, 27 Sep 2026 21:31:01 +0400
Subject: [PATCH] Workflow revamp

---
 frontend/DESIGN.md                            |   98 +-
 frontend/src/agents/AgentPageHeader.test.tsx  |   48 +
 frontend/src/agents/AgentPageHeader.tsx       |  178 +-
 .../src/agents/workflow/CanvasControls.tsx    |   89 +
 .../src/agents/workflow/NodePalette.test.tsx  |   83 +
 frontend/src/agents/workflow/NodePalette.tsx  |  123 +
 .../src/agents/workflow/WorkflowBuilder.tsx   | 2114 +++--------------
 .../agents/workflow/WorkflowModelsContext.ts  |   25 +
 .../components/NodeDocumentsControl.tsx       |    4 +-
 .../workflow/components/PromptTextArea.tsx    |    7 +-
 .../components/WorkflowDetailsSheet.test.tsx  |  113 +
 .../components/WorkflowDetailsSheet.tsx       |  226 ++
 .../src/agents/workflow/nodeTones.test.ts     |   38 +
 frontend/src/agents/workflow/nodeTones.ts     |   71 +
 .../src/agents/workflow/nodes/BaseNode.tsx    |   48 +-
 .../src/agents/workflow/nodes/CodeNode.tsx    |   17 +-
 .../agents/workflow/nodes/ConditionNode.tsx   |   14 +-
 .../workflow/nodes/OutputVariableLine.tsx     |   25 +
 frontend/src/agents/workflow/nodes/index.tsx  |   51 +-
 .../workflow/panels/AgentPanel.test.tsx       |  138 ++
 .../src/agents/workflow/panels/AgentPanel.tsx |  403 ++++
 .../src/agents/workflow/panels/CodePanel.tsx  |  152 ++
 .../workflow/panels/ConditionPanel.test.tsx   |  107 +
 .../agents/workflow/panels/ConditionPanel.tsx |  291 +++
 .../agents/workflow/panels/NodePanel.test.tsx |  123 +
 .../src/agents/workflow/panels/NodePanel.tsx  |  151 ++
 .../src/agents/workflow/panels/NotePanel.tsx  |   31 +
 .../workflow/panels/StatePanel.test.tsx       |   92 +
 .../src/agents/workflow/panels/StatePanel.tsx |  132 +
 frontend/src/agents/workflow/panels/types.ts  |   12 +
 .../agents/workflow/workflowHelpers.test.ts   |   39 +
 .../src/agents/workflow/workflowHelpers.ts    |  204 ++
 frontend/src/components/FileUpload.tsx        |    4 +
 frontend/src/components/ui/dropzone.test.tsx  |   12 +
 frontend/src/components/ui/dropzone.tsx       |   27 +-
 frontend/src/design/DesignSystem.tsx          |   12 +
 frontend/src/locale/de.json                   |   38 +-
 frontend/src/locale/en.json                   |   39 +-
 frontend/src/locale/es.json                   |   38 +-
 frontend/src/locale/jp.json                   |   38 +-
 frontend/src/locale/ru.json                   |   38 +-
 frontend/src/locale/zh-TW.json                |   38 +-
 frontend/src/locale/zh.json                   |   38 +-
 43 files changed, 3559 insertions(+), 2010 deletions(-)
 create mode 100644 frontend/src/agents/workflow/CanvasControls.tsx
 create mode 100644 frontend/src/agents/workflow/NodePalette.test.tsx
 create mode 100644 frontend/src/agents/workflow/NodePalette.tsx
 create mode 100644 frontend/src/agents/workflow/WorkflowModelsContext.ts
 create mode 100644 frontend/src/agents/workflow/components/WorkflowDetailsSheet.test.tsx
 create mode 100644 frontend/src/agents/workflow/components/WorkflowDetailsSheet.tsx
 create mode 100644 frontend/src/agents/workflow/nodeTones.test.ts
 create mode 100644 frontend/src/agents/workflow/nodeTones.ts
 create mode 100644 frontend/src/agents/workflow/nodes/OutputVariableLine.tsx
 create mode 100644 frontend/src/agents/workflow/panels/AgentPanel.test.tsx
 create mode 100644 frontend/src/agents/workflow/panels/AgentPanel.tsx
 create mode 100644 frontend/src/agents/workflow/panels/CodePanel.tsx
 create mode 100644 frontend/src/agents/workflow/panels/ConditionPanel.test.tsx
 create mode 100644 frontend/src/agents/workflow/panels/ConditionPanel.tsx
 create mode 100644 frontend/src/agents/workflow/panels/NodePanel.test.tsx
 create mode 100644 frontend/src/agents/workflow/panels/NodePanel.tsx
 create mode 100644 frontend/src/agents/workflow/panels/NotePanel.tsx
 create mode 100644 frontend/src/agents/workflow/panels/StatePanel.test.tsx
 create mode 100644 frontend/src/agents/workflow/panels/StatePanel.tsx
 create mode 100644 frontend/src/agents/workflow/panels/types.ts
 create mode 100644 frontend/src/agents/workflow/workflowHelpers.test.ts
 create mode 100644 frontend/src/agents/workflow/workflowHelpers.ts

diff --git a/frontend/DESIGN.md b/frontend/DESIGN.md
index 289d9d97..078e4ed8 100644
--- a/frontend/DESIGN.md
+++ b/frontend/DESIGN.md
@@ -228,7 +228,8 @@ field pill`, and page-level actions go in the `ActionMenu` (`size="toolbar"`)
   row never holds more than three buttons and fits a phone, where the main
   one stretches across it (`flex-1 sm:flex-none`; `PageToolbar`'s action slot
   spans the stacked row below `sm`). The workflow builder's toolbar has no
-  title row and keeps its ⋯ at the row's end. The
+  title row and keeps its ⋯ at the row's end, holding Edit details, Access
+  details and Delete (see Workflow builder). The
   agent's Delete is in Overview's danger zone; only the workflow builder's
   toolbar has it in the ⋯ menu, as a `destructive` item. The row itself is
   `agents/components/AgentPageToolbar` (see Page chrome). A row's common
@@ -255,8 +256,9 @@ rounded-3xl`) are `variant="sidebar-item"`: left-aligned, full-radius, normal
   Padding-free tabs (a sub-nav with `gap-6`) add `size="inline"`, which keeps
   4px above the line; the row draws the 1px baseline, and `-mb-px` lays the
   underline over it. Its one use is `agents/AgentPageHeader.tsx`, the workflow
-  builder's fixed toolbar: a breadcrumb and the Overview / Logs / Schedules
-  tabs in a `<nav>`, the others `<Link>`s and the current one a `<span
+  builder's fixed toolbar: a breadcrumb, the status Badge and the Overview /
+  Logs / Schedules tabs in a `<nav>` (no tabs until the workflow has an
+  id), the others `<Link>`s and the current one a `<span
 aria-current="page">` with `data-active`. The
   agent section pages switch with the section sidebar (the phone menu below
   `lg`) and carry no pill row; the agent tile's ⋯ also opens Logs. Tabs that switch a panel in place are
@@ -556,8 +558,10 @@ controls in a row, a loading or error line in place of the field. Controls
 whose label sits beside them (Switch, Checkbox, radio) use `SettingRow` or
 an inline `Label`, not FormField. An editing surface that fills its area
 (the chat composer, the chunk and wiki editors, editing a sent question) and
-repeated rows in a list (workflow expressions) have no visible label and
-must have an `aria-label`. Never hand-build a label above a field, a
+bare repeated rows in a list have no visible label and must have an
+`aria-label`. A row box that is a small form (a workflow condition case or
+state assignment) is not a bare row: each of its fields has a floating
+label. Never hand-build a label above a field, a
 hand-positioned floating label, or a `div.flex-col` + `Label` + `<p>` stack.
 
 ### SettingRow (`ui/setting-row.tsx`)
@@ -707,7 +711,10 @@ from device, Import agent, Import API specification), `compact` (one row, a
 file field among other fields),
 `tile` (a square beside a form's fields, the agent's avatar: 64px and
 icon-only on a phone beside the Name field, 88px with a one-word title from
-`sm` beside Name and Description; no description). `FileUpload size="tile"` fills the tile
+`sm` beside Name and Description; no description). `tileSize="fixed"` keeps
+it 64px and icon-only at every width, for a tile in a narrow drawer (the
+workflow details sheet), where the breakpoint follows the window rather than
+the drawer. `FileUpload size="tile"` fills the tile
 with the picked image, or with `currentImage` (the saved one) until then.
 Props: `onDrop`, `accept`, `multiple`, `maxFiles`, `maxSize`, `disabled`,
 `title`, `description`, `icon`, `error`, `validator` (react-dropzone's
@@ -960,6 +967,74 @@ grid inside a Modal keeps its own column counts, because breakpoints follow
 the window, not the dialog.
 Skeleton mirrors follow the grid they stand in for.
 
+### Workflow builder (`agents/workflow/`)
+
+The toolbar is `AgentPageHeader` on `bg-background` with a `border-b`. Its
+current crumb is the agent's `Avatar` (circle, 20px image, the robot when
+there is none), the name (`truncate`, `max-w-[24ch]`) and a muted
+`ChevronDown` in a `ghost sm` Button, the phone top bar's title recipe; it
+opens the workflow details. The status Badge follows (`success` Published,
+`neutral` Draft until the first save), then the tabs. On the right: "Unsaved
+changes" as muted `text-sm` meta while there are any, Preview, Save, and the
+⋯ (`ActionMenu size="toolbar"`): Edit details first (the same drawer, for
+anyone who doesn't try the name), then Access details and Delete once the
+workflow is saved.
+
+The workflow details are a right `Sheet size="default"`
+(`components/WorkflowDetailsSheet.tsx`), built like AgentPreviewSheet (header,
+`Separator`, one scrolling body) with the classic Basics phone layout: a
+`subtle lg` Basics panel with `FileUpload size="tile" tileSize="fixed"` beside
+the Name pill and Description across the row, then an Advanced panel with the
+prompt-override `SettingRow`. Its footer is a `ghost lg pill` Cancel and a
+`default lg pill` Save after a `Separator`. The sheet edits a copy: Cancel,
+the X, Escape and the scrim drop the edits; Save is disabled until something
+changes, then saves the workflow and closes, or stays open with a destructive
+`Alert` listing the errors.
+
+The canvas is `bg-muted`; the node palette to its left is a `bg-background`
+rail with `border-r` (`NodePalette.tsx`), and each palette pill is a
+`<button>` that is also `draggable`: drag it onto the canvas, or click (or
+press Enter) to add the node beside the selected one, or in the middle of the
+view. Each pill's icon is a `size-8 rounded-md` tinted square, like the
+settings panel's header (the pill is round, its icon is not; the canvas
+nodes keep their `size-10` circles). Pills hover to `bg-accent` only, with
+the focus ring, and a muted `text-xs` line under the groups says so.
+
+- **One tone per node type**: `nodeTones.ts` (`NODE_TONES`, `nodeToneClass`)
+  is read by the palette, every canvas node and the settings panel's header.
+  Agent is the brand soft fill (`bg-secondary text-secondary-foreground`),
+  Start and End `success`, Note and If / Else `warning`, Set State and Code
+  `info`, each `bg-<tone>/10 text-<tone>`. End is never `destructive`.
+- **Selected node**: `border-primary ring-3 ring-ring/50`, the focus-ring
+  look, with no scale (the Note node: `border-warning ring-3
+ring-warning/50`). Node meta is translated and muted (the agent type · the
+  model's display name, from `WorkflowModelsContext`); an output variable is
+  an `ArrowRight` then the name in `font-mono`.
+- **Canvas controls**: one `bg-card border rounded-full p-1` strip at the
+  bottom left (`CanvasControls.tsx`, no shadow): Undo, Redo, a vertical
+  `Separator`, Zoom out, the zoom level, Zoom in and Fit view, each
+  `ghost-muted icon-sm pill` with a top tooltip. React Flow's own
+  `<Controls />` and attribution are not shown.
+- **Node settings** dock at the canvas's right edge (`panels/NodePanel.tsx`):
+  a `w-96 border-l bg-background` column at full height whose body is the one
+  scroller, with no shadow or `z-*`. The header holds the type's `size-8
+rounded-md` icon square, the node's title with a `neutral` type Badge (only
+  once the title differs from the type's name), the
+  id in `font-mono text-xs` with a `CopyButton`, an `ActionMenu
+size="toolbar"` (Duplicate, Delete node; none on Start) and the close
+  button. Start and End have no Title field: their body is one muted
+  `text-sm` line saying what the node does. The body is `flex flex-col gap-6
+p-4`, so its fields pass
+  `labelSurface="background"` and its row boxes (a condition case, a state
+  assignment) are `Card variant="subtle" padding="sm"`. The agent node's
+  fields are grouped by `SectionHeader size="xs" as="h3"` (Model, Prompt,
+  Knowledge, Output) with an Advanced settings `link sm` disclosure that
+  opens on its own when one of its settings is set. The column is narrow, so
+  every field stacks at full width (`flex flex-col gap-5`), Agent type and
+  Model included; no two-up grids. A row box's title is `SectionHeader
+size="xs" as="h4"`. In an If / Else case's Simple mode, the operator Select
+  and Value each carry a floating label (Operator, Value).
+
 ### Accordion (`ui/accordion.tsx`)
 
 `AccordionTrigger` carries its own inset and type (`px-4 py-3 text-sm
@@ -1205,7 +1280,8 @@ bubble) and `4xl` the answer's source cards and the landing page's model
 picker; app chrome stops at `2xl`. Skeleton bars: the default. Tinted icon squares:
 `rounded-md` at `size-7|8`, `rounded-xl` at `size-12|14`, `rounded-2xl` at
 `size-20`. `rounded-full` only for pills (`shape="pill"` controls and
-fields), avatars, status dots and the workflow palette pills.
+fields), avatars, status dots, the workflow palette pills (not their icon
+squares) and the canvas nodes' icon circles.
 
 ## Motion
 
@@ -1271,9 +1347,9 @@ shadow-lg` in both themes: the knob is white on any track, and a white knob
   `bg-input`. Accordions are
   panels and have none. Outside `ui/` the only shadows are: the workflow
   canvas nodes (`shadow-md`, `hover:shadow-lg`: a node lifts off the canvas
-  while you drag it); the workflow builder's node-settings panel and its
-  publish-error panel, which float over the canvas at popover elevation
-  (`shadow-md`, `z-20`); the chunk viewer's and file tree's search result
+  while you drag it); the workflow builder's publish-error panel, which
+  floats over the canvas at popover elevation (`shadow-md`, `z-20`); the
+  chunk viewer's and file tree's search result
   lists (`shadow-md`, in-page `z-20`, their results are `CommandItem`s inside
   the search frame); the sliding panel in `navigation/SidebarLevel.tsx`,
   which casts a horizontal shadow while it slides; and the Hero model
@@ -1320,7 +1396,7 @@ list stays reviewable.
 | `Hero.tsx`                                                          | `shadcn/no-restyle`             | The landing page's demo cards are `Button outline lg pill`, but each is a two-line pill (a title over a clamped 12px query), so it undoes lg's height, the base's one-row layout, weight and nowrap: `h-auto w-full flex-col items-start gap-0 py-3.5 text-left text-xs font-normal whitespace-normal`. One disable.                                                                                                                                                                            |
 | `Navigation.tsx`, `conversation/ConversationTile.tsx`               | `shadcn/no-restyle`             | A sidebar row whose link has sibling buttons (an agent's pin, a conversation's menu and rename Save / Cancel) keeps its fill while the pointer is on a sibling or the menu is open (`group-hover:bg-sidebar-accent`, `bg-sidebar-accent`), and `pr-10` keeps the label clear of the buttons. ConversationTile's `cn(...)` needs a `/* eslint-disable */` … `/* eslint-enable */` pair.                                                                                                          |
 | `admin/Usage.tsx`                                                   | `shadcn/no-restyle`             | The Top users id is a `link inline` Button inside a mono table cell; it keeps the cell's type and wraps (`font-mono text-xs font-normal whitespace-normal text-left`). One disable.                                                                                                                                                                                                                                                                                                             |
-| `agents/workflow/WorkflowBuilder.tsx`                               | `shadcn/no-restyle`             | The "Learn more" links in the Set state and Condition nodes' 12px hints keep the sentence's size and weight (`text-xs font-normal` on `link inline`). Two disables.                                                                                                                                                                                                                                                                                                                             |
+| `agents/workflow/panels/ConditionPanel.tsx`                         | `shadcn/no-restyle`             | The "Learn more" link in the Condition node's Advanced-mode 12px hint keeps the sentence's size and weight (`text-xs font-normal` on `link inline`). One disable; the Set state node's link sits in its `text-sm` intro and needs none.                                                                                                                                                                                                                                                         |
 | `components/MessageInput.tsx`                                       | `shadcn/no-restyle`             | The queued-send Cancel is a `link inline` inside the composer's 12px status line, so it takes the line's size (`text-xs`). One disable, beside the send button's.                                                                                                                                                                                                                                                                                                                               |
 | `settings/PersonalAccessTokens.tsx`                                 | `shadcn/no-restyle`             | Token scope chips are identifiers, so the `neutral` Badge is set in mono (`font-mono`). One disable.                                                                                                                                                                                                                                                                                                                                                                                            |
 | `agents/workflow/WorkflowPreview.tsx`                               | `shadcn/no-restyle`             | A step's state changes (keys and values the app serialised) are `neutral` Badges set in mono (`font-mono`), like token scopes. One disable.                                                                                                                                                                                                                                                                                                                                                     |
diff --git a/frontend/src/agents/AgentPageHeader.test.tsx b/frontend/src/agents/AgentPageHeader.test.tsx
index d3604a1d..32fc5b5d 100644
--- a/frontend/src/agents/AgentPageHeader.test.tsx
+++ b/frontend/src/agents/AgentPageHeader.test.tsx
@@ -53,4 +53,52 @@ describe('AgentPageHeader sub-nav', () => {
     expect(tabs[0].tagName).toBe('A');
     expect(tabs[0].getAttribute('data-active')).not.toBe('true');
   });
+
+  it('makes the current crumb a button with the avatar and a chevron that opens the details', () => {
+    const onNameClick = vi.fn();
+    act(() => {
+      root.render(
+        <MemoryRouter>
+          <AgentPageHeader
+            agentId="a1"
+            agentName="Helpdesk Triage"
+            currentPage="overview"
+            onNameClick={onNameClick}
+            status={<span data-testid="status">Published</span>}
+          />
+        </MemoryRouter>,
+      );
+    });
+    const crumb = container.querySelector(
+      'button[aria-haspopup="dialog"]',
+    ) as HTMLButtonElement;
+    expect(crumb).not.toBeNull();
+    expect(crumb.getAttribute('data-variant')).toBe('ghost');
+    expect(crumb.getAttribute('data-size')).toBe('sm');
+    expect(crumb.querySelector('img')).not.toBeNull();
+    expect(crumb.querySelector('.lucide-chevron-down')).not.toBeNull();
+    expect(crumb.textContent).toContain('Helpdesk Triage');
+    expect(container.querySelector('[data-testid="status"]')).not.toBeNull();
+    act(() => crumb.click());
+    expect(onNameClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('hides the tabs for a workflow that has no id yet', () => {
+    act(() => {
+      root.render(
+        <MemoryRouter>
+          <AgentPageHeader
+            agentName="New workflow"
+            currentPage="overview"
+            onNameClick={vi.fn()}
+          />
+        </MemoryRouter>,
+      );
+    });
+    expect(
+      container.querySelector(
+        'nav[aria-label="agents.pageHeader.subnavAriaLabel"]',
+      ),
+    ).toBeNull();
+  });
 });
diff --git a/frontend/src/agents/AgentPageHeader.tsx b/frontend/src/agents/AgentPageHeader.tsx
index 45139091..6bc6c23f 100644
--- a/frontend/src/agents/AgentPageHeader.tsx
+++ b/frontend/src/agents/AgentPageHeader.tsx
@@ -1,4 +1,5 @@
-import { useMemo } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { type ReactNode, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
@@ -10,6 +11,7 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb';
+import { Avatar } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 
@@ -36,14 +38,26 @@ type AgentPageHeaderProps = {
    * (e.g. the workflow builder's fixed toolbar) to avoid a double rule.
    */
   inline?: boolean;
+  /** The agent's avatar URL; the robot is drawn when it's empty. */
+  agentImage?: string;
+  /**
+   * Makes the current crumb a button (avatar, name, chevron) that opens the
+   * agent's details. Only with `currentPage="overview"`.
+   */
+  onNameClick?: () => void;
+  /** A status Badge placed after the crumbs. */
+  status?: ReactNode;
 };
 
 /**
  * The workflow builder's toolbar chrome: a Breadcrumb (`Agents > <agent
- * name> > <current page>`) and underline tab links to the agent's Overview,
- * Logs and Schedules. The builder is full-screen with no sidebar, so it needs
- * its own way between them. Section pages use `components/AgentPageToolbar`
- * and the sidebar (or `SectionPills` on a phone) instead.
+ * name> > <current page>`), an optional status Badge, and underline tab links
+ * to the agent's Overview, Logs and Schedules (hidden until the agent has an
+ * id). The builder is full-screen with no sidebar, so it needs its own way
+ * between them. With `onNameClick` the current crumb is the agent's avatar,
+ * name and a chevron in a `ghost sm` Button that opens the details, like the
+ * phone top bar's chat title. Section pages use
+ * `components/AgentPageToolbar` and the sidebar instead.
  */
 export default function AgentPageHeader({
   agentId,
@@ -52,6 +66,9 @@ export default function AgentPageHeader({
   currentPage,
   className,
   inline = false,
+  agentImage,
+  onNameClick,
+  status,
 }: AgentPageHeaderProps) {
   const { t } = useTranslation();
 
@@ -86,83 +103,116 @@ export default function AgentPageHeader({
   return (
     <div
       className={cn(
-        'flex flex-col gap-3 md:flex-row md:items-baseline md:gap-6',
+        // The builder only renders from lg, so one row.
+        'flex min-w-0 items-center gap-6',
         className,
       )}
     >
-      <Breadcrumb className="shrink-0">
-        <BreadcrumbList className="flex-nowrap">
-          <BreadcrumbItem>
-            <BreadcrumbLink asChild>
-              <Link to={AGENTS_MANAGE_ROOT}>
-                {t('agents.pageHeader.crumbs.agents')}
-              </Link>
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-          <BreadcrumbSeparator />
-          <BreadcrumbItem>
-            {currentPage === 'overview' ? (
-              <BreadcrumbPage title={displayName} className="w-[16ch]">
-                {displayName}
-              </BreadcrumbPage>
-            ) : (
+      <div className="flex min-w-0 items-center gap-2">
+        <Breadcrumb className="min-w-0">
+          <BreadcrumbList className="flex-nowrap">
+            <BreadcrumbItem>
               <BreadcrumbLink asChild>
-                <Link to={editPath} className="max-w-[40ch] truncate">
-                  {displayName}
+                <Link to={AGENTS_MANAGE_ROOT}>
+                  {t('agents.pageHeader.crumbs.agents')}
                 </Link>
               </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              {currentPage === 'overview' && onNameClick ? (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  aria-haspopup="dialog"
+                  onClick={onNameClick}
+                  // Button is shrink-0; shrink lets a long name truncate.
+                  className="min-w-0 shrink"
+                >
+                  <Avatar
+                    src={agentImage}
+                    alt=""
+                    shape="circle"
+                    className="shrink-0 overflow-hidden"
+                    imgClassName="size-5 object-contain"
+                  />
+                  {/* The list's muted colour would reach the name; the current crumb
+                    is foreground, like BreadcrumbPage. */}
+                  <span
+                    className="text-foreground max-w-[24ch] truncate"
+                    title={displayName}
+                  >
+                    {displayName}
+                  </span>
+                  <ChevronDown className="text-muted-foreground" aria-hidden />
+                </Button>
+              ) : currentPage === 'overview' ? (
+                <BreadcrumbPage title={displayName} className="w-[16ch]">
+                  {displayName}
+                </BreadcrumbPage>
+              ) : (
+                <BreadcrumbLink asChild>
+                  <Link to={editPath} className="max-w-[40ch] truncate">
+                    {displayName}
+                  </Link>
+                </BreadcrumbLink>
+              )}
+            </BreadcrumbItem>
+            {currentPage !== 'overview' && (
+              <>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>{currentTabLabel}</BreadcrumbPage>
+                </BreadcrumbItem>
+              </>
             )}
-          </BreadcrumbItem>
-          {currentPage !== 'overview' && (
-            <>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbPage>{currentTabLabel}</BreadcrumbPage>
-              </BreadcrumbItem>
-            </>
-          )}
-        </BreadcrumbList>
-      </Breadcrumb>
+          </BreadcrumbList>
+        </Breadcrumb>
+        {status}
+      </div>
 
-      <nav
-        aria-label={t('agents.pageHeader.subnavAriaLabel')}
-        className={cn(
-          'flex items-center gap-6',
-          // 1px baseline rule under the whole row; the active tab's 2px
-          // primary underline sits on top of it for the GitHub-style look.
-          !inline && 'border-border border-b',
-        )}
-      >
-        {tabs.map((tab) => {
-          const isActive = tab.id === currentPage;
-          // -mb-px lays the tab's 2px underline over the nav's 1px baseline.
-          if (isActive) {
+      {agentId && (
+        <nav
+          aria-label={t('agents.pageHeader.subnavAriaLabel')}
+          className={cn(
+            'flex items-center gap-6',
+            // 1px baseline rule under the whole row; the active tab's 2px
+            // primary underline sits on top of it for the GitHub-style look.
+            !inline && 'border-border border-b',
+          )}
+        >
+          {tabs.map((tab) => {
+            const isActive = tab.id === currentPage;
+            // -mb-px lays the tab's 2px underline over the nav's 1px baseline.
+            if (isActive) {
+              return (
+                <Button
+                  key={tab.id}
+                  asChild
+                  variant="tab"
+                  size="inline"
+                  data-active
+                  className="-mb-px"
+                >
+                  <span aria-current="page">{tab.label}</span>
+                </Button>
+              );
+            }
             return (
               <Button
                 key={tab.id}
                 asChild
                 variant="tab"
                 size="inline"
-                data-active
                 className="-mb-px"
               >
-                <span aria-current="page">{tab.label}</span>
+                <Link to={tab.href}>{tab.label}</Link>
               </Button>
             );
-          }
-          return (
-            <Button
-              key={tab.id}
-              asChild
-              variant="tab"
-              size="inline"
-              className="-mb-px"
-            >
-              <Link to={tab.href}>{tab.label}</Link>
-            </Button>
-          );
-        })}
-      </nav>
+          })}
+        </nav>
+      )}
     </div>
   );
 }
diff --git a/frontend/src/agents/workflow/CanvasControls.tsx b/frontend/src/agents/workflow/CanvasControls.tsx
new file mode 100644
index 00000000..54835a86
--- /dev/null
+++ b/frontend/src/agents/workflow/CanvasControls.tsx
@@ -0,0 +1,89 @@
+import { Maximize, Minus, Plus, Redo2, Undo2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Panel, useReactFlow, useStore } from 'reactflow';
+
+import { IconButton } from '@/components/ui/icon-button';
+import { Separator } from '@/components/ui/separator';
+
+interface CanvasControlsProps {
+  onUndo: () => void;
+  onRedo: () => void;
+  canUndo: boolean;
+  canRedo: boolean;
+}
+
+const ZOOM_DURATION_MS = 200;
+
+/**
+ * The canvas's one control strip, bottom left: undo and redo, then zoom out,
+ * the zoom level, zoom in and fit view. Replaces React Flow's own
+ * `<Controls />`, whose buttons ignore the theme. Render inside `<ReactFlow>`.
+ */
+export default function CanvasControls({
+  onUndo,
+  onRedo,
+  canUndo,
+  canRedo,
+}: CanvasControlsProps) {
+  const { t } = useTranslation();
+  const { zoomIn, zoomOut, fitView } = useReactFlow();
+  const zoom = useStore((state) => state.transform[2]);
+
+  return (
+    <Panel
+      position="bottom-left"
+      className="bg-card border-border flex items-center gap-0.5 rounded-full border p-1"
+    >
+      <IconButton
+        variant="ghost-muted"
+        size="icon-sm"
+        shape="pill"
+        onClick={onUndo}
+        disabled={!canUndo}
+        label={t('agents.workflow.undo')}
+        hint={t('agents.workflow.undoHint')}
+        icon={Undo2}
+      />
+      <IconButton
+        variant="ghost-muted"
+        size="icon-sm"
+        shape="pill"
+        onClick={onRedo}
+        disabled={!canRedo}
+        label={t('agents.workflow.redo')}
+        hint={t('agents.workflow.redoHint')}
+        icon={Redo2}
+      />
+      <Separator orientation="vertical" className="mx-1 h-5" />
+      <IconButton
+        variant="ghost-muted"
+        size="icon-sm"
+        shape="pill"
+        onClick={() => zoomOut({ duration: ZOOM_DURATION_MS })}
+        label={t('agents.workflow.zoomOut')}
+        icon={Minus}
+      />
+      <span className="text-foreground w-11 text-center text-xs tabular-nums">
+        {Math.round(zoom * 100)}%
+      </span>
+      <IconButton
+        variant="ghost-muted"
+        size="icon-sm"
+        shape="pill"
+        onClick={() => zoomIn({ duration: ZOOM_DURATION_MS })}
+        label={t('agents.workflow.zoomIn')}
+        icon={Plus}
+      />
+      <IconButton
+        variant="ghost-muted"
+        size="icon-sm"
+        shape="pill"
+        onClick={() =>
+          fitView({ padding: 0.2, maxZoom: 0.8, duration: ZOOM_DURATION_MS })
+        }
+        label={t('agents.workflow.fitView')}
+        icon={Maximize}
+      />
+    </Panel>
+  );
+}
diff --git a/frontend/src/agents/workflow/NodePalette.test.tsx b/frontend/src/agents/workflow/NodePalette.test.tsx
new file mode 100644
index 00000000..53c164f5
--- /dev/null
+++ b/frontend/src/agents/workflow/NodePalette.test.tsx
@@ -0,0 +1,83 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+import NodePalette from './NodePalette';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+describe('NodePalette', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  const render = (onAdd = vi.fn(), onDragStart = vi.fn()) => {
+    act(() => {
+      root.render(<NodePalette onAdd={onAdd} onDragStart={onDragStart} />);
+    });
+    return { onAdd, onDragStart };
+  };
+
+  const pill = (labelKey: string) =>
+    Array.from(container.querySelectorAll('button')).find((b) =>
+      b.textContent?.includes(labelKey),
+    ) as HTMLButtonElement;
+
+  it('renders each node type as a draggable button', () => {
+    render();
+    const buttons = container.querySelectorAll('button');
+    expect(buttons).toHaveLength(6);
+    buttons.forEach((button) => {
+      expect(button.getAttribute('type')).toBe('button');
+      expect(button.getAttribute('draggable')).toBe('true');
+    });
+  });
+
+  it('adds a node of the pill type on click', () => {
+    const { onAdd } = render();
+    act(() => pill('agents.workflow.nodes.condition').click());
+    expect(onAdd).toHaveBeenCalledWith('condition');
+    act(() => pill('agents.workflow.builder.aiAgent').click());
+    expect(onAdd).toHaveBeenLastCalledWith('agent');
+  });
+
+  it('starts a drag with the pill type', () => {
+    const { onDragStart } = render();
+    const button = pill('agents.workflow.nodes.code');
+    act(() => {
+      button.dispatchEvent(new Event('dragstart', { bubbles: true }));
+    });
+    expect(onDragStart).toHaveBeenCalledWith(expect.anything(), 'code');
+  });
+
+  it('shows the shared tone on the icon square, with no hover swap', () => {
+    render();
+    const square = pill('agents.workflow.nodes.end').querySelector(
+      'span',
+    ) as HTMLElement;
+    expect(square.className).toContain('bg-success/10');
+    // Radius by role: a tinted icon square at size-8 is rounded-md.
+    expect(square.className).toContain('rounded-md');
+    expect(container.innerHTML).not.toContain('group-hover:');
+  });
+
+  it('explains click-to-add under the groups', () => {
+    render();
+    expect(container.textContent).toContain(
+      'agents.workflow.builder.paletteHint',
+    );
+  });
+});
diff --git a/frontend/src/agents/workflow/NodePalette.tsx b/frontend/src/agents/workflow/NodePalette.tsx
new file mode 100644
index 00000000..76864338
--- /dev/null
+++ b/frontend/src/agents/workflow/NodePalette.tsx
@@ -0,0 +1,123 @@
+import { type DragEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { SectionHeader } from '@/components/ui/section-header';
+import { cn, focusRing } from '@/lib/utils';
+
+import { NODE_META, nodeToneClass, type WorkflowNodeType } from './nodeTones';
+
+interface PaletteEntry {
+  type: WorkflowNodeType;
+  group: 'core' | 'logic';
+  hintKey?: string;
+}
+
+const PALETTE: PaletteEntry[] = [
+  { type: 'agent', group: 'core' },
+  { type: 'end', group: 'core' },
+  { type: 'note', group: 'core' },
+  {
+    type: 'state',
+    group: 'logic',
+    hintKey: 'agents.workflow.builder.setStateHint',
+  },
+  {
+    type: 'condition',
+    group: 'logic',
+    hintKey: 'agents.workflow.builder.conditionHint',
+  },
+  { type: 'code', group: 'logic', hintKey: 'agents.workflow.builder.codeHint' },
+];
+
+const GROUPS: { group: PaletteEntry['group']; titleKey: string }[] = [
+  { group: 'core', titleKey: 'agents.workflow.builder.coreNodes' },
+  { group: 'logic', titleKey: 'agents.workflow.builder.logicNodes' },
+];
+
+interface NodePaletteItemProps {
+  entry: PaletteEntry;
+  onAdd: (nodeType: WorkflowNodeType) => void;
+  onDragStart: (e: DragEvent, nodeType: string) => void;
+}
+
+/**
+ * A palette pill: drag it onto the canvas, or click (or press Enter) to add
+ * the node without dragging.
+ *
+ * Args:
+ *   entry: The palette entry to render.
+ *   onAdd: Adds a node of the entry's type beside the selection.
+ *   onDragStart: Starts dragging a node of the entry's type onto the canvas.
+ */
+function NodePaletteItem({ entry, onAdd, onDragStart }: NodePaletteItemProps) {
+  const { t } = useTranslation();
+  const { icon: Icon, labelKey } = NODE_META[entry.type];
+  const label = (
+    <span className="text-foreground text-sm font-medium">{t(labelKey)}</span>
+  );
+  return (
+    <button
+      type="button"
+      draggable
+      onDragStart={(e) => onDragStart(e, entry.type)}
+      onClick={() => onAdd(entry.type)}
+      className={cn(
+        'border-border bg-card hover:bg-accent flex cursor-grab items-center gap-3 rounded-full border px-4 py-2.5 text-left transition-colors outline-none',
+        focusRing,
+      )}
+    >
+      <span
+        className={cn(
+          'flex size-8 shrink-0 items-center justify-center rounded-md',
+          nodeToneClass(entry.type),
+        )}
+      >
+        <Icon className="size-4.5" aria-hidden="true" />
+      </span>
+      {entry.hintKey ? (
+        <span className="flex flex-col">
+          {label}
+          <span className="text-muted-foreground text-xs">
+            {t(entry.hintKey)}
+          </span>
+        </span>
+      ) : (
+        label
+      )}
+    </button>
+  );
+}
+
+interface NodePaletteProps {
+  /** Adds a node of the given type without dragging (click or Enter). */
+  onAdd: (nodeType: WorkflowNodeType) => void;
+  /** Starts dragging a node of the given type onto the canvas. */
+  onDragStart: (e: DragEvent, nodeType: string) => void;
+}
+
+/** The builder's left rail of node types, grouped Core and Logic. */
+export default function NodePalette({ onAdd, onDragStart }: NodePaletteProps) {
+  const { t } = useTranslation();
+  return (
+    <div className="border-border bg-background flex w-64 shrink-0 flex-col gap-6 overflow-y-auto border-r p-4">
+      {GROUPS.map(({ group, titleKey }) => (
+        <div key={group} className="flex flex-col gap-3">
+          <SectionHeader as="h3" size="sm" title={t(titleKey)} />
+          <div className="flex flex-col gap-2">
+            {PALETTE.filter((entry) => entry.group === group).map((entry) => (
+              <NodePaletteItem
+                key={entry.type}
+                entry={entry}
+                onAdd={onAdd}
+                onDragStart={onDragStart}
+              />
+            ))}
+          </div>
+        </div>
+      ))}
+      <p className="text-muted-foreground text-xs">
+        {t('agents.workflow.builder.paletteHint')}
+      </p>
+    </div>
+  );
+}
diff --git a/frontend/src/agents/workflow/WorkflowBuilder.tsx b/frontend/src/agents/workflow/WorkflowBuilder.tsx
index 09be651d..bd94b8ee 100644
--- a/frontend/src/agents/workflow/WorkflowBuilder.tsx
+++ b/frontend/src/agents/workflow/WorkflowBuilder.tsx
@@ -1,33 +1,8 @@
 import 'reactflow/dist/style.css';
 
-import {
-  Bot,
-  CircleAlert,
-  CodeXml,
-  Database,
-  Flag,
-  GitBranch,
-  Link,
-  Pencil,
-  Play,
-  Plus,
-  Redo2,
-  StickyNote,
-  Trash2,
-  Undo2,
-  X,
-  type LucideIcon,
-} from 'lucide-react';
-import {
-  type DragEvent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { type TFunction } from 'i18next';
-import { Trans, useTranslation } from 'react-i18next';
+import { CircleAlert, Link, Pencil, Play, Trash2, X } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import ReactFlow, {
@@ -36,49 +11,23 @@ import ReactFlow, {
   applyNodeChanges,
   Background,
   Connection,
-  Controls,
   Edge,
   EdgeChange,
   Node,
   NodeChange,
   NodeTypes,
-  Panel,
   ReactFlowProvider,
   useReactFlow,
+  XYPosition,
 } from 'reactflow';
 
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
-import { Avatar } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Card } from '@/components/ui/card';
-import { Checkbox } from '@/components/ui/checkbox';
 import { IconButton } from '@/components/ui/icon-button';
-import { FormField } from '@/components/ui/form-field';
-import { Input } from '@/components/ui/input';
-import { MultiSelect } from '@/components/ui/multi-select';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover';
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { SectionHeader } from '@/components/ui/section-header';
-import { SettingRow } from '@/components/ui/setting-row';
-import { Switch } from '@/components/ui/switch';
-import { Textarea } from '@/components/ui/textarea';
-import { cn } from '@/lib/utils';
 
 import modelService from '../../api/services/modelService';
 import userService from '../../api/services/userService';
-import { FileUpload } from '../../components/FileUpload';
 import AgentDetailsModal from '../../modals/AgentDetailsModal';
 import ConfirmationModal from '../../modals/ConfirmationModal';
 import { ActiveState } from '../../models/misc';
@@ -86,11 +35,13 @@ import {
   selectSourceDocs,
   selectToken,
 } from '../../preferences/preferenceSlice';
-import { getToolDisplayName } from '../../utils/toolUtils';
 import { agentEditPath, agentsListPath } from '../paths';
 import { ActionMenu } from '@/components/ui/dropdown-menu';
 import AgentPageHeader from '../AgentPageHeader';
 import AgentPreviewSheet from '../components/AgentPreviewSheet';
+import WorkflowDetailsSheet, {
+  type WorkflowDetailsSave,
+} from './components/WorkflowDetailsSheet';
 import { Agent } from '../types';
 import { ConditionCase, WorkflowNode } from '../types/workflow';
 import {
@@ -101,17 +52,9 @@ import {
   validateCodeJsonSchema,
 } from './codeNodeConfig';
 import MobileBlocker from './components/MobileBlocker';
-import { buildSimpleCel, parseSimpleCel } from './simpleCel';
-import NodeDocumentsControl from './components/NodeDocumentsControl';
-import PromptTextArea, {
-  extractUpstreamVariables,
-} from './components/PromptTextArea';
-import {
-  FILE_PASSING_OPTIONS,
-  FilePassing,
-  normalizeFilePassing,
-  toDocumentVariableOptions,
-} from './documentConfig';
+import { parseSimpleCel } from './simpleCel';
+import { extractUpstreamVariables } from './components/PromptTextArea';
+import { toDocumentVariableOptions } from './documentConfig';
 import { useUndoRedo, WorkflowSnapshot } from './hooks/useUndoRedo';
 import {
   AgentNode,
@@ -122,200 +65,38 @@ import {
   SetStateNode,
   StartNode,
 } from './nodes';
+import CanvasControls from './CanvasControls';
+import NodePalette from './NodePalette';
+import NodePanel from './panels/NodePanel';
+import { WorkflowModelsContext } from './WorkflowModelsContext';
+import AgentPanel from './panels/AgentPanel';
+import CodePanel from './panels/CodePanel';
+import ConditionPanel from './panels/ConditionPanel';
+import NotePanel from './panels/NotePanel';
+import StatePanel from './panels/StatePanel';
 import WorkflowPreview from './WorkflowPreview';
+import {
+  type AgentNodeConfig,
+  findFreePosition,
+  NO_ESCAPE,
+  normalizeConditionCases,
+  schemaErrorText,
+  type UserTool,
+  validateJsonSchemaConfig,
+} from './workflowHelpers';
 import { selectWorkflowPreviewStatus } from './workflowPreviewSlice';
 
 import type { Model } from '../../models/types';
 
 const PRIMARY_ACTION_SPINNER_DELAY_MS = 180;
-
-type PaletteTone = 'primary' | 'success' | 'warning' | 'info';
-
-// Whole class strings per tone so Tailwind sees them.
-const PALETTE_TONE_CLASSES: Record<PaletteTone, string> = {
-  primary:
-    'bg-secondary text-secondary-foreground group-hover:bg-primary group-hover:text-primary-foreground',
-  success:
-    'bg-success/10 text-success group-hover:bg-success group-hover:text-success-foreground',
-  warning:
-    'bg-warning/10 text-warning group-hover:bg-warning group-hover:text-warning-foreground',
-  info: 'bg-info/10 text-info group-hover:bg-info group-hover:text-info-foreground',
-};
-
-interface PaletteEntry {
-  type: string;
-  group: 'core' | 'logic';
-  icon: LucideIcon;
-  tone: PaletteTone;
-  labelKey: string;
-  hintKey?: string;
-}
-
-const PALETTE: PaletteEntry[] = [
-  {
-    type: 'agent',
-    group: 'core',
-    icon: Bot,
-    tone: 'primary',
-    labelKey: 'agents.workflow.builder.aiAgent',
-  },
-  {
-    type: 'end',
-    group: 'core',
-    icon: Flag,
-    tone: 'success',
-    labelKey: 'agents.workflow.nodes.end',
-  },
-  {
-    type: 'note',
-    group: 'core',
-    icon: StickyNote,
-    tone: 'warning',
-    labelKey: 'agents.workflow.nodes.note',
-  },
-  {
-    type: 'state',
-    group: 'logic',
-    icon: Database,
-    tone: 'info',
-    labelKey: 'agents.workflow.nodes.setState',
-    hintKey: 'agents.workflow.builder.setStateHint',
-  },
-  {
-    type: 'condition',
-    group: 'logic',
-    icon: GitBranch,
-    tone: 'warning',
-    labelKey: 'agents.workflow.nodes.condition',
-    hintKey: 'agents.workflow.builder.conditionHint',
-  },
-  {
-    type: 'code',
-    group: 'logic',
-    icon: CodeXml,
-    tone: 'info',
-    labelKey: 'agents.workflow.nodes.code',
-    hintKey: 'agents.workflow.builder.codeHint',
-  },
-];
-
-/**
- * A draggable pill in the builder's node palette.
- *
- * Args:
- *   entry: The palette entry to render.
- *   onDragStart: Starts dragging a node of the entry's type onto the canvas.
- */
-function NodePaletteItem({
-  entry,
-  onDragStart,
-}: {
-  entry: PaletteEntry;
-  onDragStart: (e: DragEvent, nodeType: string) => void;
-}) {
-  const { t } = useTranslation();
-  const Icon = entry.icon;
-  const label = (
-    <span className="text-foreground text-sm font-medium">
-      {t(entry.labelKey)}
-    </span>
-  );
-  return (
-    <div
-      className="group border-border bg-card hover:border-primary/40 flex cursor-move items-center gap-3 rounded-full border px-4 py-3 transition-colors"
-      draggable
-      onDragStart={(e) => onDragStart(e, entry.type)}
-    >
-      <div
-        className={cn(
-          'flex size-8 shrink-0 items-center justify-center rounded-full transition-colors',
-          PALETTE_TONE_CLASSES[entry.tone],
-        )}
-      >
-        <Icon className="size-4.5" />
-      </div>
-      {entry.hintKey ? (
-        <div className="flex flex-col">
-          {label}
-          <span className="text-muted-foreground text-xs">
-            {t(entry.hintKey)}
-          </span>
-        </div>
-      ) : (
-        label
-      )}
-    </div>
-  );
-}
-
-interface AgentNodeConfig {
-  agent_type: 'classic' | 'research';
-  llm_name?: string;
-  model_id?: string;
-  system_prompt: string;
-  prompt_template: string;
-  output_variable?: string;
-  stream_to_user: boolean;
-  sources: string[];
-  tools: string[];
-  chunks?: string;
-  retriever?: string;
-  json_schema?: Record<string, unknown>;
-  input_documents?: string[];
-  file_passing?: FilePassing;
-}
-
-interface UserTool {
-  id: string;
-  name: string;
-  displayName: string;
-  customName?: string;
-  // Workflow-only builtins (e.g. read_document) are kept here; the classic
-  // agent picker filters them out.
-  workflow_only?: boolean;
-}
-
-function validateJsonSchemaConfig(schema: unknown): string | null {
-  if (schema === undefined || schema === null) return null;
-  if (typeof schema !== 'object' || Array.isArray(schema)) {
-    return 'must be a valid JSON object';
-  }
-
-  const schemaObject = schema as Record<string, unknown>;
-  if (!('schema' in schemaObject) && !('type' in schemaObject)) {
-    return 'must include either a "type" or "schema" field';
-  }
-
-  return null;
-}
-
-// The schema validators return short English fragments (tests and the
-// validation list key off them); these map each to its locale key.
-// Names and handles are the user's own text: React escapes on render, so
-// i18next must not escape them first.
-const NO_ESCAPE = { interpolation: { escapeValue: false } } as const;
-
-const SCHEMA_ERROR_KEYS: Record<string, string> = {
-  'must be a valid JSON object': 'agents.workflow.schema.notObject',
-  'must include either a "type" or "schema" field':
-    'agents.workflow.schema.missingType',
-  'must be valid JSON': 'agents.workflow.schema.invalidJson',
-};
-
-/**
- * Translate a JSON schema validation fragment.
- *
- * Args:
- *   t: The i18next translate function.
- *   fragment: The fragment a schema validator returned.
- *
- * Returns:
- *   The translated fragment, or the fragment itself when it is unknown.
- */
-function schemaErrorText(t: TFunction, fragment: string): string {
-  const key = SCHEMA_ERROR_KEYS[fragment];
-  return key ? t(key) : fragment;
-}
+// A node added from the palette while one is selected lands this far right
+// of it (then moves down until it covers nothing).
+const ADD_BESIDE_GAP_X = 80;
+// Roughly half a node's size, to centre a new node in the view.
+const NEW_NODE_HALF_WIDTH = 100;
+const NEW_NODE_HALF_HEIGHT = 32;
+// A duplicate sits this far down and right of its original.
+const DUPLICATE_OFFSET = 40;
 
 function isEditableTarget(target: EventTarget | null): boolean {
   if (!(target instanceof HTMLElement)) return false;
@@ -355,52 +136,6 @@ function canReachEnd(
     .some((e) => canReachEnd(e.target, edges, nodeIds, endIds, visited));
 }
 
-function normalizeConditionCases(cases: ConditionCase[]): ConditionCase[] {
-  const usedHandles = new Set<string>();
-  let nextIndex = 0;
-
-  return cases.map((conditionCase) => {
-    const candidate = (conditionCase.sourceHandle || '').trim();
-    if (candidate && !usedHandles.has(candidate)) {
-      usedHandles.add(candidate);
-      const match = candidate.match(/^case_(\d+)$/);
-      if (match) {
-        nextIndex = Math.max(nextIndex, Number(match[1]) + 1);
-      }
-      return conditionCase;
-    }
-
-    while (usedHandles.has(`case_${nextIndex}`)) {
-      nextIndex += 1;
-    }
-    const generatedHandle = `case_${nextIndex}`;
-    usedHandles.add(generatedHandle);
-    nextIndex += 1;
-
-    return {
-      ...conditionCase,
-      sourceHandle: generatedHandle,
-    };
-  });
-}
-
-function getNextConditionHandle(cases: ConditionCase[]): string {
-  const usedHandles = new Set(
-    cases.map((conditionCase) => conditionCase.sourceHandle).filter(Boolean),
-  );
-  const usedIndices = Array.from(usedHandles)
-    .map((handle) => handle.match(/^case_(\d+)$/))
-    .filter((match): match is RegExpMatchArray => Boolean(match))
-    .map((match) => Number(match[1]));
-
-  let nextIndex = usedIndices.length > 0 ? Math.max(...usedIndices) + 1 : 0;
-  while (usedHandles.has(`case_${nextIndex}`)) {
-    nextIndex += 1;
-  }
-
-  return `case_${nextIndex}`;
-}
-
 function createWorkflowPayload(
   name: string,
   description: string,
@@ -467,7 +202,11 @@ function WorkflowBuilderInner() {
   const [selectedNode, setSelectedNode] = useState<Node | null>(null);
   const [workflowName, setWorkflowName] = useState('New Workflow');
   const [workflowDescription, setWorkflowDescription] = useState('');
-  const [showWorkflowSettings, setShowWorkflowSettings] = useState(false);
+  const [showDetails, setShowDetails] = useState(false);
+  // A save asked for by the details sheet runs after its values reach state.
+  const [detailsSaveRequested, setDetailsSaveRequested] = useState(false);
+  const [detailsSaving, setDetailsSaving] = useState(false);
+  const [detailsSaveFailed, setDetailsSaveFailed] = useState(false);
   const [isPublishing, setIsPublishing] = useState(false);
   const [showPrimaryActionSpinner, setShowPrimaryActionSpinner] =
     useState(false);
@@ -489,6 +228,13 @@ function WorkflowBuilderInner() {
     string | null
   >(null);
   const [availableModels, setAvailableModels] = useState<Model[]>([]);
+  const modelNames = useMemo(
+    () =>
+      Object.fromEntries(
+        availableModels.map((model) => [model.id, model.display_name]),
+      ),
+    [availableModels],
+  );
   const [defaultAgentModelId, setDefaultAgentModelId] = useState('');
   const [availableTools, setAvailableTools] = useState<UserTool[]>([]);
   const sourceOptions = useMemo(
@@ -635,20 +381,14 @@ function WorkflowBuilderInner() {
     event.dataTransfer.dropEffect = 'move';
   }, []);
 
-  const onDrop = useCallback(
-    (event: React.DragEvent) => {
-      event.preventDefault();
-
-      const type = event.dataTransfer.getData('application/reactflow');
-      if (!type) return;
-
+  /**
+   * Add a node of a palette type at a flow position, with its default config.
+   * Takes an undo snapshot first; the selection is left as it was.
+   */
+  const createNode = useCallback(
+    (type: string, position: XYPosition) => {
       takeSnapshot();
 
-      const position = reactFlowInstance.screenToFlowPosition({
-        x: event.clientX,
-        y: event.clientY,
-      });
-
       const baseNode: Node = {
         id: `${type}_${Date.now()}`,
         type,
@@ -696,7 +436,61 @@ function WorkflowBuilderInner() {
 
       setNodes((nds) => nds.concat(baseNode));
     },
-    [reactFlowInstance, availableModels, defaultAgentModelId, takeSnapshot],
+    [availableModels, defaultAgentModelId, takeSnapshot],
+  );
+
+  const onDrop = useCallback(
+    (event: React.DragEvent) => {
+      event.preventDefault();
+
+      const type = event.dataTransfer.getData('application/reactflow');
+      if (!type) return;
+
+      createNode(
+        type,
+        reactFlowInstance.screenToFlowPosition({
+          x: event.clientX,
+          y: event.clientY,
+        }),
+      );
+    },
+    [reactFlowInstance, createNode],
+  );
+
+  // Click or Enter on a palette pill: beside the selected node, else in the
+  // middle of what the canvas shows.
+  const handleAddNodeFromPalette = useCallback(
+    (type: string) => {
+      const anchor = selectedNode
+        ? nodes.find((n) => n.id === selectedNode.id)
+        : undefined;
+      if (anchor) {
+        createNode(
+          type,
+          findFreePosition(nodes, {
+            x: anchor.position.x + (anchor.width ?? 0) + ADD_BESIDE_GAP_X,
+            y: anchor.position.y,
+          }),
+        );
+        return;
+      }
+      const rect = reactFlowWrapper.current?.getBoundingClientRect();
+      const center = rect
+        ? reactFlowInstance.screenToFlowPosition({
+            x: rect.left + rect.width / 2,
+            y: rect.top + rect.height / 2,
+          })
+        : { x: 0, y: 0 };
+      // Positions are a node's top-left corner; centre a typical node.
+      createNode(
+        type,
+        findFreePosition(nodes, {
+          x: center.x - NEW_NODE_HALF_WIDTH,
+          y: center.y - NEW_NODE_HALF_HEIGHT,
+        }),
+      );
+    },
+    [selectedNode, nodes, createNode, reactFlowInstance],
   );
 
   const handleNodeClick = useCallback(
@@ -751,6 +545,43 @@ function WorkflowBuilderInner() {
     deleteNodesAndEdges([selectedNode], []);
   }, [selectedNode, deleteNodesAndEdges]);
 
+  // Clone the open node beside itself and open the copy.
+  const handleDuplicateNode = useCallback(() => {
+    if (!selectedNode || selectedNode.type === 'start') return;
+    const original = nodes.find((n) => n.id === selectedNode.id);
+    if (!original) return;
+    takeSnapshot();
+    const copy: Node = {
+      id: `${original.type}_${Date.now()}`,
+      type: original.type,
+      position: {
+        x: original.position.x + DUPLICATE_OFFSET,
+        y: original.position.y + DUPLICATE_OFFSET,
+      },
+      data: structuredClone(original.data),
+      selected: true,
+    };
+    setNodes((nds) =>
+      nds.map((n) => (n.selected ? { ...n, selected: false } : n)).concat(copy),
+    );
+    setSelectedNode(copy);
+    setShowNodeConfig(true);
+  }, [selectedNode, nodes, takeSnapshot]);
+
+  const handleRemoveConditionBranch = useCallback(
+    (sourceHandle: string) => {
+      if (!selectedNode) return;
+      const nodeId = selectedNode.id;
+      setEdges((eds) =>
+        eds.filter(
+          (edge) =>
+            !(edge.source === nodeId && edge.sourceHandle === sourceHandle),
+        ),
+      );
+    },
+    [selectedNode],
+  );
+
   const handleUpdateNodeData = useCallback(
     (data: Record<string, unknown>, options?: { snapshot?: boolean }) => {
       if (!selectedNode) return;
@@ -834,12 +665,6 @@ function WorkflowBuilderInner() {
     [handleUpdateNodeData, selectedNode],
   );
 
-  const handleUpload = useCallback((files: File[]) => {
-    if (files && files.length > 0) {
-      setImageFile(files[0]);
-    }
-  }, []);
-
   const navigateBackToAgents = useCallback(() => {
     navigate(agentsListPath(folderId));
   }, [navigate, folderId]);
@@ -890,7 +715,10 @@ function WorkflowBuilderInner() {
     // behind it), or once another handler has already consumed the event. Kept
     // in one place so the branches can't drift apart.
     const shouldIgnoreShortcut = (e: KeyboardEvent): boolean =>
-      e.defaultPrevented || showPreview || isEditableTarget(e.target);
+      e.defaultPrevented ||
+      showPreview ||
+      showDetails ||
+      isEditableTarget(e.target);
 
     const handleKeyDown = (e: KeyboardEvent) => {
       if (shouldIgnoreShortcut(e)) return;
@@ -931,12 +759,12 @@ function WorkflowBuilderInner() {
     undo,
     redo,
     showPreview,
+    showDetails,
   ]);
 
   const handlePaneClick = useCallback(() => {
     setShowNodeConfig(false);
     setSelectedNode(null);
-    setShowWorkflowSettings(false);
   }, []);
 
   useEffect(() => {
@@ -1652,17 +1480,42 @@ function WorkflowBuilderInner() {
       workflowName,
       workflowDescription,
       imageFile,
+      currentAgent.allow_system_prompt_override,
       folderId,
       navigateBackToAgents,
       t,
     ],
   );
 
-  const handleWorkflowSettingsDone = useCallback(() => {
-    setShowWorkflowSettings(false);
-    if (!canManageAgent || !hasSavableChanges || isPublishing) return;
-    void persistWorkflow(false);
-  }, [canManageAgent, hasSavableChanges, isPublishing, persistWorkflow]);
+  const openDetails = useCallback(() => {
+    setDetailsSaveFailed(false);
+    setShowDetails(true);
+  }, []);
+
+  // Save from the details sheet: put its values into the builder, then save
+  // once they are in state (the effect below), so the request carries them.
+  const handleDetailsSave = useCallback((values: WorkflowDetailsSave) => {
+    setWorkflowName(values.name);
+    setWorkflowDescription(values.description);
+    setCurrentAgent((prev) => ({
+      ...prev,
+      allow_system_prompt_override: values.allowPromptOverride,
+    }));
+    if (values.imageFile) setImageFile(values.imageFile);
+    setDetailsSaveRequested(true);
+  }, []);
+
+  useEffect(() => {
+    if (!detailsSaveRequested) return;
+    setDetailsSaveRequested(false);
+    setDetailsSaving(true);
+    setDetailsSaveFailed(false);
+    void persistWorkflow(false).then((ok) => {
+      setDetailsSaving(false);
+      if (ok) setShowDetails(false);
+      else setDetailsSaveFailed(true);
+    });
+  }, [detailsSaveRequested, persistWorkflow]);
 
   const isPrimaryActionDisabled =
     isPublishing || (canManageAgent && !hasSavableChanges);
@@ -1782,157 +1635,31 @@ function WorkflowBuilderInner() {
     <>
       <MobileBlocker />
       <div className="bg-background fixed inset-0 z-50 hidden h-dvh w-full flex-col lg:flex">
-        <div className="border-border bg-card flex items-center justify-between border-b px-6 py-4">
-          <div className="flex items-center gap-4">
-            {canManageAgent ? (
-              <AgentPageHeader
-                agentId={effectiveAgentId}
-                agentName={workflowName}
-                agentEditPath={agentEditPath(effectiveAgentId, true)}
-                currentPage="overview"
-                inline
-              />
-            ) : (
-              <Button
-                type="button"
-                variant="outline"
-                size="field"
-                shape="pill"
-                onClick={navigateBackToAgents}
-              >
-                {t('agents.backToAll')}
-              </Button>
+        <div className="border-border bg-background flex items-center justify-between gap-4 border-b px-6 py-4">
+          <AgentPageHeader
+            agentId={canManageAgent ? effectiveAgentId : undefined}
+            agentName={workflowName || t('agents.workflow.builder.newWorkflow')}
+            agentEditPath={agentEditPath(effectiveAgentId, true)}
+            agentImage={currentAgentImage}
+            currentPage="overview"
+            onNameClick={openDetails}
+            status={
+              canManageAgent && currentAgent.status !== 'draft' ? (
+                <Badge variant="success">
+                  {t('agents.form.status.published')}
+                </Badge>
+              ) : (
+                <Badge variant="neutral">{t('agents.card.draft')}</Badge>
+              )
+            }
+            inline
+          />
+          <div className="flex shrink-0 items-center gap-2">
+            {(!canManageAgent || hasSavableChanges) && (
+              <span className="text-muted-foreground mr-2 text-sm">
+                {t('agents.workflow.builder.unsavedChanges')}
+              </span>
             )}
-            {!canManageAgent && (
-              <div className="min-w-0">
-                <div
-                  className="text-foreground max-w-xs truncate text-xl leading-tight font-semibold"
-                  title={
-                    workflowName || t('agents.workflow.builder.newWorkflow')
-                  }
-                >
-                  {workflowName || t('agents.workflow.builder.newWorkflow')}
-                </div>
-                {workflowDescription && (
-                  <div
-                    className="text-muted-foreground max-w-xs truncate text-xs"
-                    title={workflowDescription}
-                  >
-                    {workflowDescription}
-                  </div>
-                )}
-              </div>
-            )}
-            <Popover
-              open={showWorkflowSettings}
-              onOpenChange={setShowWorkflowSettings}
-            >
-              <PopoverTrigger asChild>
-                <IconButton
-                  variant="ghost-muted"
-                  size="icon-xs"
-                  side="bottom"
-                  label={t('agents.workflow.builder.editDetails')}
-                  hint={
-                    workflowDescription
-                      ? `${workflowName || t('agents.workflow.builder.newWorkflow')} — ${workflowDescription}`
-                      : undefined
-                  }
-                  icon={Pencil}
-                />
-              </PopoverTrigger>
-              <PopoverContent align="start" className="w-80">
-                <div className="flex flex-col gap-5">
-                  <FormField label={t('agents.workflow.builder.workflowName')}>
-                    <Input
-                      type="text"
-                      value={workflowName}
-                      onChange={(e) => setWorkflowName(e.target.value)}
-                      placeholder={t(
-                        'agents.workflow.builder.workflowNamePlaceholder',
-                      )}
-                    />
-                  </FormField>
-                  <FormField label={t('agents.form.labels.description')}>
-                    <Textarea
-                      value={workflowDescription}
-                      onChange={(e) => setWorkflowDescription(e.target.value)}
-                      rows={3}
-                      placeholder={t(
-                        'agents.workflow.builder.workflowDescriptionPlaceholder',
-                      )}
-                    />
-                  </FormField>
-                  {currentAgentImage && !imageFile && (
-                    <div className="flex items-center gap-2">
-                      <Avatar
-                        src={currentAgentImage}
-                        alt={t('agents.workflow.builder.agentImageAlt')}
-                        size="lg"
-                        shape="circle"
-                        imgClassName="size-full object-cover"
-                      />
-                      <span className="text-muted-foreground text-xs">
-                        {t('agents.workflow.builder.currentImage')}
-                      </span>
-                    </div>
-                  )}
-                  <FormField
-                    label={t('agents.workflow.builder.agentImage')}
-                    hint={t('agents.workflow.builder.agentImageHint')}
-                  >
-                    <FileUpload
-                      showPreview
-                      maxFiles={1}
-                      previewSize={56}
-                      size="compact"
-                      onUpload={handleUpload}
-                      onRemove={() => setImageFile(null)}
-                      uploadText={[
-                        {
-                          text: t('agents.form.upload.clickToUpload'),
-                          highlight: true,
-                        },
-                        {
-                          text: t('agents.form.upload.dragAndDrop'),
-                        },
-                      ]}
-                    />
-                  </FormField>
-                  <SettingRow
-                    label={t('agents.form.advanced.systemPromptOverride')}
-                    description={t(
-                      'agents.form.advanced.systemPromptOverrideDescription',
-                    )}
-                    htmlFor="workflow-system-prompt-override"
-                  >
-                    <Switch
-                      id="workflow-system-prompt-override"
-                      checked={Boolean(
-                        currentAgent.allow_system_prompt_override,
-                      )}
-                      onCheckedChange={() =>
-                        setCurrentAgent((prev) => ({
-                          ...prev,
-                          allow_system_prompt_override:
-                            !prev.allow_system_prompt_override,
-                        }))
-                      }
-                    />
-                  </SettingRow>
-                  <Button
-                    type="button"
-                    onClick={handleWorkflowSettingsDone}
-                    disabled={isPublishing}
-                    className="w-full"
-                  >
-                    {t('agents.workflow.builder.done')}
-                  </Button>
-                </div>
-              </PopoverContent>
-            </Popover>
-          </div>
-          <div className="flex items-center gap-2">
             <Button
               type="button"
               variant="outline"
@@ -1961,30 +1688,37 @@ function WorkflowBuilderInner() {
             >
               {primaryActionLabel}
             </Button>
-            {canManageAgent && (
-              <ActionMenu
-                size="toolbar"
-                triggerLabel={t('agents.form.buttons.moreActions')}
-                options={[
-                  {
-                    label: t('agents.form.buttons.accessDetails'),
-                    icon: Link,
-                    onClick: () => setAgentDetails('ACTIVE'),
-                  },
-                  {
-                    label: t('agents.form.buttons.delete'),
-                    icon: Trash2,
-                    variant: 'destructive',
-                    disabled: isDeletingAgent,
-                    onClick: () => setDeleteConfirmation('ACTIVE'),
-                  },
-                ]}
-              />
-            )}
+            <ActionMenu
+              size="toolbar"
+              triggerLabel={t('agents.form.buttons.moreActions')}
+              options={[
+                {
+                  label: t('agents.workflow.builder.editDetailsMenu'),
+                  icon: Pencil,
+                  onClick: openDetails,
+                },
+                ...(canManageAgent
+                  ? [
+                      {
+                        label: t('agents.form.buttons.accessDetails'),
+                        icon: Link,
+                        onClick: () => setAgentDetails('ACTIVE'),
+                      },
+                      {
+                        label: t('agents.form.buttons.delete'),
+                        icon: Trash2,
+                        variant: 'destructive' as const,
+                        disabled: isDeletingAgent,
+                        onClick: () => setDeleteConfirmation('ACTIVE'),
+                      },
+                    ]
+                  : []),
+              ]}
+            />
           </div>
         </div>
 
-        {publishErrors.length > 0 && (
+        {publishErrors.length > 0 && !showDetails && (
           <div className="pointer-events-none absolute top-20 right-0 left-0 z-20 flex justify-center px-4">
             <div className="bg-card pointer-events-auto w-full max-w-md rounded-xl shadow-md">
               <Alert
@@ -2021,1286 +1755,122 @@ function WorkflowBuilderInner() {
           </div>
         )}
 
-        <div className="flex flex-1 overflow-hidden">
-          <div className="border-border bg-muted flex w-64 flex-col gap-6 border-r p-4">
-            <div className="flex flex-col gap-3">
-              <SectionHeader
-                as="h3"
-                size="sm"
-                title={t('agents.workflow.builder.coreNodes')}
-              />
-              <div className="flex flex-col gap-2">
-                {PALETTE.filter((entry) => entry.group === 'core').map(
-                  (entry) => (
-                    <NodePaletteItem
-                      key={entry.type}
-                      entry={entry}
-                      onDragStart={handleNodeDragStart}
-                    />
-                  ),
-                )}
-              </div>
-            </div>
+        <div className="flex min-h-0 flex-1 overflow-hidden">
+          <NodePalette
+            onAdd={handleAddNodeFromPalette}
+            onDragStart={handleNodeDragStart}
+          />
 
-            <div className="flex flex-col gap-3">
-              <SectionHeader
-                as="h3"
-                size="sm"
-                title={t('agents.workflow.builder.logicNodes')}
-              />
-              <div className="flex flex-col gap-2">
-                {PALETTE.filter((entry) => entry.group === 'logic').map(
-                  (entry) => (
-                    <NodePaletteItem
-                      key={entry.type}
-                      entry={entry}
-                      onDragStart={handleNodeDragStart}
-                    />
-                  ),
-                )}
-              </div>
-            </div>
+          <div
+            ref={reactFlowWrapper}
+            className="bg-muted relative min-w-0 flex-1"
+          >
+            <WorkflowModelsContext.Provider value={modelNames}>
+              <ReactFlow
+                nodes={nodes}
+                edges={edges}
+                onNodesChange={onNodesChange}
+                onEdgesChange={onEdgesChange}
+                onConnect={onConnect}
+                onEdgeClick={onEdgeClick}
+                onDrop={onDrop}
+                onDragOver={onDragOver}
+                onNodeClick={handleNodeClick}
+                onPaneClick={handlePaneClick}
+                onNodeDragStart={snapshotBeforeCanvasChange}
+                onSelectionDragStart={snapshotBeforeCanvasChange}
+                nodeTypes={nodeTypes}
+                nodeDragThreshold={1}
+                deleteKeyCode={null}
+                proOptions={{ hideAttribution: true }}
+                fitView
+              >
+                <Background />
+                <CanvasControls
+                  onUndo={undo}
+                  onRedo={redo}
+                  canUndo={canUndo}
+                  canRedo={canRedo}
+                />
+              </ReactFlow>
+            </WorkflowModelsContext.Provider>
           </div>
 
-          <div ref={reactFlowWrapper} className="bg-muted relative flex-1">
-            <ReactFlow
-              nodes={nodes}
-              edges={edges}
-              onNodesChange={onNodesChange}
-              onEdgesChange={onEdgesChange}
-              onConnect={onConnect}
-              onEdgeClick={onEdgeClick}
-              onDrop={onDrop}
-              onDragOver={onDragOver}
-              onNodeClick={handleNodeClick}
-              onPaneClick={handlePaneClick}
-              onNodeDragStart={snapshotBeforeCanvasChange}
-              onSelectionDragStart={snapshotBeforeCanvasChange}
-              nodeTypes={nodeTypes}
-              nodeDragThreshold={1}
-              deleteKeyCode={null}
-              fitView
+          {showNodeConfig && selectedNode && (
+            <NodePanel
+              key={selectedNode.id}
+              node={selectedNode}
+              onClose={() => setShowNodeConfig(false)}
+              onDuplicate={handleDuplicateNode}
+              onDelete={handleDeleteNode}
+              onUpdate={handleUpdateNodeData}
             >
-              <Background />
-              <Controls />
-              <Panel position="top-left" className="flex gap-1.5">
-                <IconButton
-                  variant="outline"
-                  size="icon-sm"
-                  side="bottom"
-                  onClick={undo}
-                  disabled={!canUndo}
-                  label={t('agents.workflow.undo')}
-                  hint={t('agents.workflow.undoHint')}
-                  icon={Undo2}
+              {selectedNode.type === 'agent' && (
+                <AgentPanel
+                  node={selectedNode}
+                  onUpdate={handleUpdateNodeData}
+                  nodes={nodes}
+                  edges={edges}
+                  availableModels={availableModels}
+                  availableTools={availableTools}
+                  sourceOptions={sourceOptions}
+                  documentOptions={selectedAgentDocumentOptions}
+                  jsonSchemaText={selectedAgentJsonSchemaText}
+                  jsonSchemaError={selectedAgentJsonSchemaError}
+                  modelSupportsStructuredOutput={
+                    selectedAgentModelSupportsStructuredOutput
+                  }
+                  onJsonSchemaChange={handleAgentJsonSchemaChange}
                 />
-                <IconButton
-                  variant="outline"
-                  size="icon-sm"
-                  side="bottom"
-                  onClick={redo}
-                  disabled={!canRedo}
-                  label={t('agents.workflow.redo')}
-                  hint={t('agents.workflow.redoHint')}
-                  icon={Redo2}
+              )}
+              {selectedNode.type === 'note' && (
+                <NotePanel
+                  node={selectedNode}
+                  onUpdate={handleUpdateNodeData}
                 />
-              </Panel>
-            </ReactFlow>
-
-            {showNodeConfig && selectedNode && (
-              <>
-                <div className="border-border bg-card absolute top-4 right-4 z-20 w-96 rounded-2xl border shadow-md">
-                  <div className="border-border flex items-center justify-between border-b p-4">
-                    <h3 className="text-foreground text-sm font-semibold">
-                      {selectedNode.type === 'start' &&
-                        t('agents.workflow.builder.startNode')}
-                      {selectedNode.type === 'end' &&
-                        t('agents.workflow.builder.endNode')}
-                      {selectedNode.type === 'agent' &&
-                        t('agents.workflow.builder.aiAgent')}
-                      {selectedNode.type === 'note' &&
-                        t('agents.workflow.nodes.note')}
-                      {selectedNode.type === 'state' &&
-                        t('agents.workflow.builder.stateTitle')}
-                      {selectedNode.type === 'condition' &&
-                        t('agents.workflow.nodes.condition')}
-                      {selectedNode.type === 'code' &&
-                        t('agents.workflow.nodes.code')}
-                    </h3>
-                    <IconButton
-                      variant="ghost-muted"
-                      size="icon-xs"
-                      side="bottom"
-                      onClick={() => setShowNodeConfig(false)}
-                      label={t('agents.close')}
-                    >
-                      <X className="size-5" aria-hidden />
-                    </IconButton>
-                  </div>
-
-                  <div className="max-h-[calc(100dvh-200px)] overflow-y-auto p-4">
-                    <div className="mb-4 flex flex-col gap-5">
-                      <div className="bg-muted rounded-lg p-3">
-                        <div className="text-muted-foreground mb-1 text-xs">
-                          {t('agents.workflow.builder.nodeId')}
-                        </div>
-                        <div className="text-foreground truncate font-mono text-xs">
-                          {selectedNode.id}
-                        </div>
-                      </div>
-
-                      {selectedNode.type !== 'start' &&
-                        selectedNode.type !== 'end' && (
-                          <>
-                            <FormField
-                              label={t('agents.workflow.builder.title')}
-                            >
-                              <Input
-                                type="text"
-                                value={
-                                  selectedNode.data.title ||
-                                  selectedNode.data.label ||
-                                  ''
-                                }
-                                onChange={(e) =>
-                                  handleUpdateNodeData({
-                                    title: e.target.value,
-                                    label: e.target.value,
-                                  })
-                                }
-                                placeholder={t(
-                                  'agents.workflow.builder.titlePlaceholder',
-                                )}
-                              />
-                            </FormField>
-
-                            {selectedNode.type === 'agent' && (
-                              <>
-                                <FormField
-                                  label={t('agents.workflow.builder.agentType')}
-                                >
-                                  <Select
-                                    value={
-                                      selectedNode.data.config?.agent_type ||
-                                      'classic'
-                                    }
-                                    onValueChange={(value) =>
-                                      handleUpdateNodeData({
-                                        config: {
-                                          ...(selectedNode.data.config || {}),
-                                          agent_type: value,
-                                        },
-                                      })
-                                    }
-                                  >
-                                    <SelectTrigger
-                                      size="field"
-                                      className="w-full"
-                                    >
-                                      <SelectValue
-                                        placeholder={t(
-                                          'agents.workflow.builder.agentTypePlaceholder',
-                                        )}
-                                      />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                      <SelectItem value="classic">
-                                        {t('agents.form.agentTypes.classic')}
-                                      </SelectItem>
-                                      <SelectItem value="research">
-                                        {t('agents.form.agentTypes.research')}
-                                      </SelectItem>
-                                    </SelectContent>
-                                  </Select>
-                                </FormField>
-                                <FormField
-                                  label={t('agents.workflow.builder.model')}
-                                >
-                                  <Select
-                                    value={
-                                      selectedNode.data.config?.model_id || ''
-                                    }
-                                    onValueChange={(value) => {
-                                      const selectedModel =
-                                        availableModels.find(
-                                          (m) => m.id === value,
-                                        );
-                                      handleUpdateNodeData({
-                                        config: {
-                                          ...(selectedNode.data.config || {}),
-                                          model_id: value,
-                                          llm_name:
-                                            selectedModel?.provider || '',
-                                        },
-                                      });
-                                    }}
-                                  >
-                                    <SelectTrigger
-                                      size="field"
-                                      className="w-full"
-                                    >
-                                      <SelectValue
-                                        placeholder={t(
-                                          'agents.workflow.builder.modelPlaceholder',
-                                        )}
-                                      />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                      {(() => {
-                                        const builtin = availableModels.filter(
-                                          (m) => m.source !== 'user',
-                                        );
-                                        const user = availableModels.filter(
-                                          (m) => m.source === 'user',
-                                        );
-                                        return (
-                                          <>
-                                            {builtin.length > 0 && (
-                                              <SelectGroup>
-                                                <SelectLabel>
-                                                  {t(
-                                                    'settings.customModels.modelsGroup.builtin',
-                                                  )}
-                                                </SelectLabel>
-                                                {builtin.map((model) => (
-                                                  <SelectItem
-                                                    key={model.id}
-                                                    value={model.id}
-                                                  >
-                                                    {model.display_name} ·{' '}
-                                                    {model.provider}
-                                                  </SelectItem>
-                                                ))}
-                                              </SelectGroup>
-                                            )}
-                                            {user.length > 0 && (
-                                              <SelectGroup>
-                                                <SelectLabel>
-                                                  {t(
-                                                    'settings.customModels.modelsGroup.user',
-                                                  )}
-                                                </SelectLabel>
-                                                {user.map((model) => (
-                                                  <SelectItem
-                                                    key={model.id}
-                                                    value={model.id}
-                                                  >
-                                                    {model.display_name} ·{' '}
-                                                    {model.provider}
-                                                  </SelectItem>
-                                                ))}
-                                              </SelectGroup>
-                                            )}
-                                          </>
-                                        );
-                                      })()}
-                                    </SelectContent>
-                                  </Select>
-                                </FormField>
-                                <FormField
-                                  label={t(
-                                    'agents.workflow.builder.systemPrompt',
-                                  )}
-                                >
-                                  <Textarea
-                                    value={
-                                      selectedNode.data.config?.system_prompt ??
-                                      ''
-                                    }
-                                    onChange={(e) =>
-                                      handleUpdateNodeData({
-                                        config: {
-                                          ...(selectedNode.data.config || {}),
-                                          system_prompt: e.target.value,
-                                        },
-                                      })
-                                    }
-                                    rows={3}
-                                    placeholder={t(
-                                      'agents.workflow.builder.systemPromptPlaceholder',
-                                    )}
-                                  />
-                                </FormField>
-                                <PromptTextArea
-                                  label={t(
-                                    'agents.workflow.builder.promptTemplate',
-                                  )}
-                                  value={
-                                    selectedNode.data.config?.prompt_template ||
-                                    ''
-                                  }
-                                  onChange={(val) =>
-                                    handleUpdateNodeData({
-                                      config: {
-                                        ...(selectedNode.data.config || {}),
-                                        prompt_template: val,
-                                      },
-                                    })
-                                  }
-                                  nodes={nodes}
-                                  edges={edges}
-                                  selectedNodeId={selectedNode.id}
-                                  placeholder={t(
-                                    'agents.workflow.builder.promptTemplatePlaceholder',
-                                    {
-                                      ...NO_ESCAPE,
-                                      example: '{{ agent.variable }}',
-                                    },
-                                  )}
-                                />
-                                <FormField
-                                  label={t(
-                                    'agents.workflow.builder.outputVariable',
-                                  )}
-                                >
-                                  <Input
-                                    type="text"
-                                    value={
-                                      selectedNode.data.config
-                                        ?.output_variable || ''
-                                    }
-                                    onChange={(e) => {
-                                      const nextOutputVariable = e.target.value;
-                                      handleUpdateNodeData({
-                                        config: {
-                                          ...(selectedNode.data.config || {}),
-                                          output_variable: nextOutputVariable,
-                                        },
-                                      });
-                                    }}
-                                    placeholder={t(
-                                      'agents.workflow.builder.outputVariablePlaceholder',
-                                    )}
-                                  />
-                                </FormField>
-                                <div className="flex items-center gap-2">
-                                  <Checkbox
-                                    id="stream_to_user"
-                                    checked={
-                                      selectedNode.data.config
-                                        ?.stream_to_user ?? true
-                                    }
-                                    onCheckedChange={(checked) =>
-                                      handleUpdateNodeData({
-                                        config: {
-                                          ...(selectedNode.data.config || {}),
-                                          stream_to_user: checked === true,
-                                        },
-                                      })
-                                    }
-                                  />
-                                  <label
-                                    htmlFor="stream_to_user"
-                                    className="text-foreground text-sm"
-                                  >
-                                    {t('agents.workflow.builder.streamToUser')}
-                                  </label>
-                                </div>{' '}
-                                <FormField
-                                  label={t('agents.form.sections.tools')}
-                                >
-                                  <MultiSelect
-                                    options={availableTools.map((tool) => ({
-                                      value: tool.id,
-                                      label: getToolDisplayName(tool),
-                                    }))}
-                                    selected={
-                                      selectedNode.data.config?.tools || []
-                                    }
-                                    onChange={(newTools) =>
-                                      handleUpdateNodeData({
-                                        config: {
-                                          ...(selectedNode.data.config || {}),
-                                          tools: newTools,
-                                        },
-                                      })
-                                    }
-                                    placeholder={t(
-                                      'agents.form.placeholders.selectTools',
-                                    )}
-                                    searchPlaceholder={t(
-                                      'agents.form.toolsPopup.searchPlaceholder',
-                                    )}
-                                    emptyText={t(
-                                      'agents.form.toolsPopup.noOptionsMessage',
-                                    )}
-                                  />
-                                </FormField>
-                                <FormField
-                                  label={t('agents.workflow.builder.sources')}
-                                >
-                                  <MultiSelect
-                                    options={sourceOptions}
-                                    selected={
-                                      selectedNode.data.config?.sources || []
-                                    }
-                                    onChange={(newSources) =>
-                                      handleUpdateNodeData({
-                                        config: {
-                                          ...(selectedNode.data.config || {}),
-                                          sources: newSources,
-                                        },
-                                      })
-                                    }
-                                    placeholder={t(
-                                      'agents.form.placeholders.selectSources',
-                                    )}
-                                    searchPlaceholder={t(
-                                      'agents.form.sourcePopup.searchPlaceholder',
-                                    )}
-                                    emptyText={t(
-                                      'agents.form.sourcePopup.noOptionsMessage',
-                                    )}
-                                  />
-                                </FormField>
-                                <NodeDocumentsControl
-                                  key={selectedNode.id}
-                                  value={
-                                    selectedNode.data.config?.input_documents ??
-                                    []
-                                  }
-                                  onChange={(nextInputDocuments) =>
-                                    handleUpdateNodeData({
-                                      config: {
-                                        ...(selectedNode.data.config || {}),
-                                        input_documents: nextInputDocuments,
-                                      },
-                                    })
-                                  }
-                                  options={selectedAgentDocumentOptions}
-                                  label={t('agents.workflow.builder.documents')}
-                                  helpText={t(
-                                    'agents.workflow.builder.documentsHint',
-                                  )}
-                                />
-                                <FormField
-                                  label={t(
-                                    'agents.workflow.builder.filePassing',
-                                  )}
-                                  hint={t(
-                                    'agents.workflow.builder.filePassingHint',
-                                  )}
-                                >
-                                  <Select
-                                    value={normalizeFilePassing(
-                                      selectedNode.data.config?.file_passing,
-                                    )}
-                                    onValueChange={(value) =>
-                                      handleUpdateNodeData({
-                                        config: {
-                                          ...(selectedNode.data.config || {}),
-                                          file_passing: value as FilePassing,
-                                        },
-                                      })
-                                    }
-                                  >
-                                    <SelectTrigger
-                                      size="field"
-                                      className="w-full"
-                                    >
-                                      <SelectValue />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                      {FILE_PASSING_OPTIONS.map((option) => (
-                                        <SelectItem
-                                          key={option.value}
-                                          value={option.value}
-                                        >
-                                          {t(
-                                            `agents.workflow.filePassing.${option.value}`,
-                                            { defaultValue: option.label },
-                                          )}
-                                        </SelectItem>
-                                      ))}
-                                    </SelectContent>
-                                  </Select>
-                                </FormField>
-                                <FormField
-                                  label={t(
-                                    'agents.workflow.builder.structuredOutput',
-                                  )}
-                                  hint={
-                                    [
-                                      !selectedAgentModelSupportsStructuredOutput
-                                        ? t(
-                                            'agents.workflow.builder.modelNoStructuredOutput',
-                                          )
-                                        : null,
-                                      selectedAgentJsonSchemaText.trim() !==
-                                        '' && !selectedAgentJsonSchemaError
-                                        ? t(
-                                            'agents.workflow.builder.validSchema',
-                                          )
-                                        : null,
-                                    ]
-                                      .filter(Boolean)
-                                      .join(' ') || undefined
-                                  }
-                                  error={
-                                    selectedAgentJsonSchemaText.trim() !== '' &&
-                                    selectedAgentJsonSchemaError
-                                      ? t(
-                                          'agents.workflow.builder.invalidSchema',
-                                          {
-                                            ...NO_ESCAPE,
-                                            error: schemaErrorText(
-                                              t,
-                                              selectedAgentJsonSchemaError,
-                                            ),
-                                          },
-                                        )
-                                      : undefined
-                                  }
-                                >
-                                  <Textarea
-                                    value={selectedAgentJsonSchemaText}
-                                    onChange={(e) =>
-                                      handleAgentJsonSchemaChange(
-                                        e.target.value,
-                                      )
-                                    }
-                                    className="font-mono"
-                                    rows={8}
-                                    placeholder={`{
-  "type": "object",
-  "properties": {
-    "summary": { "type": "string" }
-  },
-  "required": ["summary"]
-}`}
-                                  />
-                                </FormField>
-                              </>
-                            )}
-
-                            {selectedNode.type === 'note' && (
-                              <FormField
-                                label={t('agents.workflow.builder.noteContent')}
-                              >
-                                <Textarea
-                                  value={selectedNode.data.content || ''}
-                                  onChange={(e) =>
-                                    handleUpdateNodeData({
-                                      content: e.target.value,
-                                    })
-                                  }
-                                  rows={4}
-                                  placeholder={t(
-                                    'agents.workflow.builder.noteContentPlaceholder',
-                                  )}
-                                />
-                              </FormField>
-                            )}
-
-                            {selectedNode.type === 'state' && (
-                              <>
-                                <p className="text-muted-foreground text-xs">
-                                  {t('agents.workflow.builder.stateIntro')}
-                                </p>
-                                {(
-                                  selectedNode.data.config?.operations || []
-                                ).map(
-                                  (
-                                    op: {
-                                      expression: string;
-                                      target_variable: string;
-                                    },
-                                    idx: number,
-                                  ) => (
-                                    <Card
-                                      key={idx}
-                                      padding="sm"
-                                      className="gap-2"
-                                    >
-                                      <div className="flex items-center justify-between">
-                                        <span className="text-foreground text-sm font-medium">
-                                          {t(
-                                            'agents.workflow.builder.assignValue',
-                                          )}
-                                        </span>
-                                        {(
-                                          selectedNode.data.config
-                                            ?.operations || []
-                                        ).length > 1 && (
-                                          <IconButton
-                                            variant="ghost-destructive"
-                                            size="icon-xs"
-                                            label={t(
-                                              'agents.workflow.removeAssignment',
-                                              { index: idx + 1 },
-                                            )}
-                                            icon={Trash2}
-                                            onClick={() => {
-                                              const ops = [
-                                                ...(selectedNode.data.config
-                                                  ?.operations || []),
-                                              ];
-                                              ops.splice(idx, 1);
-                                              handleUpdateNodeData({
-                                                config: {
-                                                  ...(selectedNode.data
-                                                    .config || {}),
-                                                  operations: ops,
-                                                },
-                                              });
-                                            }}
-                                          />
-                                        )}
-                                      </div>
-                                      <div className="flex flex-col gap-5">
-                                        <div className="flex flex-col gap-1">
-                                          <Textarea
-                                            value={op.expression}
-                                            onChange={(e) => {
-                                              const ops = [
-                                                ...(selectedNode.data.config
-                                                  ?.operations || []),
-                                              ];
-                                              ops[idx] = {
-                                                ...ops[idx],
-                                                expression: e.target.value,
-                                              };
-                                              handleUpdateNodeData({
-                                                config: {
-                                                  ...(selectedNode.data
-                                                    .config || {}),
-                                                  operations: ops,
-                                                },
-                                              });
-                                            }}
-                                            rows={2}
-                                            placeholder="query"
-                                            aria-label={t(
-                                              'agents.workflow.expressionRow',
-                                              { index: idx + 1 },
-                                            )}
-                                          />
-                                          <p className="text-muted-foreground text-xs">
-                                            <Trans
-                                              i18nKey="agents.workflow.builder.celHint"
-                                              components={{ code: <code /> }}
-                                              values={{ braced: '{{query}}' }}
-                                            />{' '}
-                                            <Button
-                                              variant="link"
-                                              size="inline"
-                                              asChild
-                                              // eslint-disable-next-line shadcn/no-restyle -- a link in a 12px hint keeps the sentence's size and weight
-                                              className="text-xs font-normal"
-                                            >
-                                              <a
-                                                href="https://cel.dev/"
-                                                target="_blank"
-                                                rel="noreferrer"
-                                              >
-                                                {t(
-                                                  'agents.workflow.builder.learnMore',
-                                                )}
-                                              </a>
-                                            </Button>
-                                          </p>
-                                        </div>
-                                        <FormField
-                                          label={t(
-                                            'agents.workflow.builder.toVariable',
-                                          )}
-                                        >
-                                          <Input
-                                            type="text"
-                                            value={op.target_variable}
-                                            onChange={(e) => {
-                                              const ops = [
-                                                ...(selectedNode.data.config
-                                                  ?.operations || []),
-                                              ];
-                                              ops[idx] = {
-                                                ...ops[idx],
-                                                target_variable: e.target.value,
-                                              };
-                                              handleUpdateNodeData({
-                                                config: {
-                                                  ...(selectedNode.data
-                                                    .config || {}),
-                                                  operations: ops,
-                                                },
-                                              });
-                                            }}
-                                            placeholder="variable_name"
-                                          />
-                                        </FormField>
-                                      </div>
-                                    </Card>
-                                  ),
-                                )}
-                                <Button
-                                  type="button"
-                                  variant="ghost-muted"
-                                  size="sm"
-                                  onClick={() => {
-                                    const ops = [
-                                      ...(selectedNode.data.config
-                                        ?.operations || []),
-                                      { expression: '', target_variable: '' },
-                                    ];
-                                    handleUpdateNodeData({
-                                      config: {
-                                        ...(selectedNode.data.config || {}),
-                                        operations: ops,
-                                      },
-                                    });
-                                  }}
-                                  className="self-start"
-                                >
-                                  <Plus className="size-3.5" />
-                                  {t('agents.form.buttons.add')}
-                                </Button>
-                              </>
-                            )}
-
-                            {selectedNode.type === 'condition' && (
-                              <>
-                                <p className="text-muted-foreground text-xs">
-                                  {t('agents.workflow.builder.conditionIntro')}
-                                </p>
-                                <div className="border-border bg-card flex gap-1 rounded-xl border p-1">
-                                  <Button
-                                    type="button"
-                                    variant={
-                                      (selectedNode.data.config?.mode ||
-                                        'simple') === 'simple'
-                                        ? 'outline'
-                                        : 'ghost-muted'
-                                    }
-                                    size="xs"
-                                    onClick={() =>
-                                      handleUpdateNodeData({
-                                        config: {
-                                          ...(selectedNode.data.config || {}),
-                                          mode: 'simple',
-                                        },
-                                      })
-                                    }
-                                    className="flex-1"
-                                  >
-                                    {t('agents.workflow.builder.modeSimple')}
-                                  </Button>
-                                  <Button
-                                    type="button"
-                                    variant={
-                                      selectedNode.data.config?.mode ===
-                                      'advanced'
-                                        ? 'outline'
-                                        : 'ghost-muted'
-                                    }
-                                    size="xs"
-                                    onClick={() =>
-                                      handleUpdateNodeData({
-                                        config: {
-                                          ...(selectedNode.data.config || {}),
-                                          mode: 'advanced',
-                                        },
-                                      })
-                                    }
-                                    className="flex-1"
-                                  >
-                                    {t('agents.workflow.builder.modeAdvanced')}
-                                  </Button>
-                                </div>
-
-                                {(selectedNode.data.config?.cases || []).map(
-                                  (c: ConditionCase, idx: number) => (
-                                    <Card
-                                      key={c.sourceHandle}
-                                      padding="sm"
-                                      className="gap-2"
-                                    >
-                                      <div className="flex items-center justify-between">
-                                        <span className="text-warning text-sm font-semibold">
-                                          {idx === 0
-                                            ? t('agents.workflow.nodes.if')
-                                            : t('agents.workflow.nodes.elseIf')}
-                                        </span>
-                                        {(selectedNode.data.config?.cases || [])
-                                          .length > 1 && (
-                                          <IconButton
-                                            variant="ghost-destructive"
-                                            size="icon-xs"
-                                            label={t(
-                                              'agents.workflow.removeCondition',
-                                              { index: idx + 1 },
-                                            )}
-                                            icon={Trash2}
-                                            onClick={() => {
-                                              const cases =
-                                                normalizeConditionCases([
-                                                  ...(selectedNode.data.config
-                                                    ?.cases || []),
-                                                ]);
-                                              const removedHandle =
-                                                cases[idx]?.sourceHandle;
-                                              cases.splice(idx, 1);
-                                              handleUpdateNodeData({
-                                                config: {
-                                                  ...(selectedNode.data
-                                                    .config || {}),
-                                                  cases,
-                                                },
-                                              });
-                                              if (removedHandle) {
-                                                setEdges((eds) =>
-                                                  eds.filter(
-                                                    (edge) =>
-                                                      !(
-                                                        edge.source ===
-                                                          selectedNode.id &&
-                                                        edge.sourceHandle ===
-                                                          removedHandle
-                                                      ),
-                                                  ),
-                                                );
-                                              }
-                                            }}
-                                          />
-                                        )}
-                                      </div>
-                                      <Input
-                                        type="text"
-                                        value={c.name || ''}
-                                        onChange={(e) => {
-                                          const cases = [
-                                            ...(selectedNode.data.config
-                                              ?.cases || []),
-                                          ];
-                                          cases[idx] = {
-                                            ...cases[idx],
-                                            name: e.target.value,
-                                          };
-                                          handleUpdateNodeData({
-                                            config: {
-                                              ...(selectedNode.data.config ||
-                                                {}),
-                                              cases,
-                                            },
-                                          });
-                                        }}
-                                        placeholder={t(
-                                          'agents.workflow.builder.caseNamePlaceholder',
-                                        )}
-                                        aria-label={t(
-                                          'agents.workflow.conditionNameRow',
-                                          { index: idx + 1 },
-                                        )}
-                                      />
-                                      {(selectedNode.data.config?.mode ||
-                                        'simple') === 'simple' ? (
-                                        <div className="flex items-center gap-2">
-                                          <Input
-                                            type="text"
-                                            value={
-                                              parseSimpleCel(c.expression)
-                                                .variable
-                                            }
-                                            onChange={(e) => {
-                                              const parsed = parseSimpleCel(
-                                                c.expression,
-                                              );
-                                              const cases = [
-                                                ...(selectedNode.data.config
-                                                  ?.cases || []),
-                                              ];
-                                              cases[idx] = {
-                                                ...cases[idx],
-                                                expression: buildSimpleCel(
-                                                  e.target.value,
-                                                  parsed.operator,
-                                                  parsed.value,
-                                                ),
-                                              };
-                                              handleUpdateNodeData({
-                                                config: {
-                                                  ...(selectedNode.data
-                                                    .config || {}),
-                                                  cases,
-                                                },
-                                              });
-                                            }}
-                                            placeholder={t(
-                                              'agents.workflow.builder.variablePlaceholder',
-                                            )}
-                                            aria-label={t(
-                                              'agents.workflow.conditionVariableRow',
-                                              { index: idx + 1 },
-                                            )}
-                                          />
-                                          <Select
-                                            value={
-                                              parseSimpleCel(c.expression)
-                                                .operator
-                                            }
-                                            onValueChange={(op) => {
-                                              const parsed = parseSimpleCel(
-                                                c.expression,
-                                              );
-                                              const cases = [
-                                                ...(selectedNode.data.config
-                                                  ?.cases || []),
-                                              ];
-                                              cases[idx] = {
-                                                ...cases[idx],
-                                                expression: buildSimpleCel(
-                                                  parsed.variable,
-                                                  op,
-                                                  parsed.value,
-                                                ),
-                                              };
-                                              handleUpdateNodeData({
-                                                config: {
-                                                  ...(selectedNode.data
-                                                    .config || {}),
-                                                  cases,
-                                                },
-                                              });
-                                            }}
-                                          >
-                                            <SelectTrigger
-                                              size="field"
-                                              className="w-24 shrink-0"
-                                              aria-label={t(
-                                                'agents.workflow.conditionOperatorRow',
-                                                { index: idx + 1 },
-                                              )}
-                                            >
-                                              <SelectValue />
-                                            </SelectTrigger>
-                                            <SelectContent>
-                                              <SelectItem value="==">
-                                                =
-                                              </SelectItem>
-                                              <SelectItem value="!=">
-                                                !=
-                                              </SelectItem>
-                                              <SelectItem value=">">
-                                                &gt;
-                                              </SelectItem>
-                                              <SelectItem value="<">
-                                                &lt;
-                                              </SelectItem>
-                                              <SelectItem value=">=">
-                                                &gt;=
-                                              </SelectItem>
-                                              <SelectItem value="<=">
-                                                &lt;=
-                                              </SelectItem>
-                                              <SelectItem value="contains">
-                                                {t(
-                                                  'agents.workflow.builder.opContains',
-                                                )}
-                                              </SelectItem>
-                                              <SelectItem value="startsWith">
-                                                {t(
-                                                  'agents.workflow.builder.opStartsWith',
-                                                )}
-                                              </SelectItem>
-                                            </SelectContent>
-                                          </Select>
-                                          <Input
-                                            type="text"
-                                            value={
-                                              parseSimpleCel(c.expression).value
-                                            }
-                                            onChange={(e) => {
-                                              const parsed = parseSimpleCel(
-                                                c.expression,
-                                              );
-                                              const cases = [
-                                                ...(selectedNode.data.config
-                                                  ?.cases || []),
-                                              ];
-                                              cases[idx] = {
-                                                ...cases[idx],
-                                                expression: buildSimpleCel(
-                                                  parsed.variable,
-                                                  parsed.operator,
-                                                  e.target.value,
-                                                ),
-                                              };
-                                              handleUpdateNodeData({
-                                                config: {
-                                                  ...(selectedNode.data
-                                                    .config || {}),
-                                                  cases,
-                                                },
-                                              });
-                                            }}
-                                            placeholder={t(
-                                              'agents.workflow.builder.valuePlaceholder',
-                                            )}
-                                            aria-label={t(
-                                              'agents.workflow.conditionValueRow',
-                                              { index: idx + 1 },
-                                            )}
-                                          />
-                                        </div>
-                                      ) : (
-                                        <FormField
-                                          label={t(
-                                            'agents.workflow.conditionRow',
-                                            { index: idx + 1 },
-                                          )}
-                                          hint={
-                                            <>
-                                              <Trans
-                                                i18nKey="agents.workflow.builder.celHint"
-                                                components={{ code: <code /> }}
-                                                values={{ braced: '{{query}}' }}
-                                              />{' '}
-                                              <Button
-                                                variant="link"
-                                                size="inline"
-                                                asChild
-                                                // eslint-disable-next-line shadcn/no-restyle -- a link in a 12px hint keeps the sentence's size and weight
-                                                className="text-xs font-normal"
-                                              >
-                                                <a
-                                                  href="https://cel.dev/"
-                                                  target="_blank"
-                                                  rel="noreferrer"
-                                                >
-                                                  {t(
-                                                    'agents.workflow.builder.learnMore',
-                                                  )}
-                                                </a>
-                                              </Button>
-                                            </>
-                                          }
-                                        >
-                                          <Textarea
-                                            value={c.expression}
-                                            onChange={(e) => {
-                                              const cases = [
-                                                ...(selectedNode.data.config
-                                                  ?.cases || []),
-                                              ];
-                                              cases[idx] = {
-                                                ...cases[idx],
-                                                expression: e.target.value,
-                                              };
-                                              handleUpdateNodeData({
-                                                config: {
-                                                  ...(selectedNode.data
-                                                    .config || {}),
-                                                  cases,
-                                                },
-                                              });
-                                            }}
-                                            rows={2}
-                                            placeholder={t(
-                                              'agents.workflow.builder.conditionPlaceholder',
-                                            )}
-                                          />
-                                        </FormField>
-                                      )}
-                                    </Card>
-                                  ),
-                                )}
-
-                                <Button
-                                  type="button"
-                                  variant="ghost-muted"
-                                  size="sm"
-                                  onClick={() => {
-                                    const cases = normalizeConditionCases([
-                                      ...(selectedNode.data.config?.cases ||
-                                        []),
-                                    ]);
-                                    const nextHandle =
-                                      getNextConditionHandle(cases);
-                                    cases.push({
-                                      name: '',
-                                      expression: '',
-                                      sourceHandle: nextHandle,
-                                    });
-                                    handleUpdateNodeData({
-                                      config: {
-                                        ...(selectedNode.data.config || {}),
-                                        cases,
-                                      },
-                                    });
-                                  }}
-                                  className="self-start"
-                                >
-                                  <Plus className="size-3.5" />
-                                  {t('agents.form.buttons.add')}
-                                </Button>
-                              </>
-                            )}
-
-                            {selectedNode.type === 'code' && (
-                              <>
-                                <p className="text-muted-foreground text-xs">
-                                  {t('agents.workflow.builder.codeIntro')}
-                                </p>
-                                <FormField
-                                  label={t('agents.workflow.nodes.code')}
-                                >
-                                  <Textarea
-                                    value={selectedNode.data.config?.code ?? ''}
-                                    onChange={(e) =>
-                                      handleUpdateNodeData({
-                                        config: {
-                                          ...(selectedNode.data.config || {}),
-                                          code: e.target.value,
-                                        },
-                                      })
-                                    }
-                                    className="font-mono"
-                                    rows={10}
-                                    spellCheck={false}
-                                    placeholder={'print("hello world")'}
-                                  />
-                                </FormField>
-                                <NodeDocumentsControl
-                                  key={selectedNode.id}
-                                  value={selectedNode.data.config?.inputs ?? []}
-                                  onChange={(nextInputs) =>
-                                    handleUpdateNodeData({
-                                      config: {
-                                        ...(selectedNode.data.config || {}),
-                                        inputs: nextInputs,
-                                      },
-                                    })
-                                  }
-                                  options={selectedCodeDocumentOptions}
-                                  label={t(
-                                    'agents.workflow.builder.inputFiles',
-                                  )}
-                                  helpText={t(
-                                    'agents.workflow.builder.inputFilesHint',
-                                  )}
-                                />
-                                <FormField
-                                  label={t(
-                                    'agents.workflow.builder.outputVariable',
-                                  )}
-                                >
-                                  <Input
-                                    type="text"
-                                    value={
-                                      selectedNode.data.config
-                                        ?.output_variable || ''
-                                    }
-                                    onChange={(e) =>
-                                      handleUpdateNodeData({
-                                        config: {
-                                          ...(selectedNode.data.config || {}),
-                                          output_variable: e.target.value,
-                                        },
-                                      })
-                                    }
-                                    placeholder={t(
-                                      'agents.workflow.builder.outputVariablePlaceholder',
-                                    )}
-                                  />
-                                </FormField>
-                                <FormField
-                                  label={t('agents.workflow.builder.timeout')}
-                                >
-                                  <Input
-                                    type="number"
-                                    min={1}
-                                    value={
-                                      selectedNode.data.config?.timeout ?? ''
-                                    }
-                                    onChange={(e) => {
-                                      const raw = e.target.value;
-                                      const parsed =
-                                        raw.trim() === ''
-                                          ? undefined
-                                          : Number.parseInt(raw, 10);
-                                      handleUpdateNodeData({
-                                        config: {
-                                          ...(selectedNode.data.config || {}),
-                                          timeout:
-                                            parsed !== undefined &&
-                                            Number.isFinite(parsed)
-                                              ? parsed
-                                              : undefined,
-                                        },
-                                      });
-                                    }}
-                                    placeholder={t(
-                                      'agents.workflow.builder.optional',
-                                    )}
-                                  />
-                                </FormField>
-                                <FormField
-                                  label={t(
-                                    'agents.workflow.builder.structuredOutput',
-                                  )}
-                                  hint={
-                                    selectedCodeJsonSchemaText.trim() !== '' &&
-                                    !selectedCodeJsonSchemaError
-                                      ? t('agents.workflow.builder.validSchema')
-                                      : undefined
-                                  }
-                                  error={
-                                    selectedCodeJsonSchemaText.trim() !== '' &&
-                                    selectedCodeJsonSchemaError
-                                      ? t(
-                                          'agents.workflow.builder.invalidSchema',
-                                          {
-                                            ...NO_ESCAPE,
-                                            error: schemaErrorText(
-                                              t,
-                                              selectedCodeJsonSchemaError,
-                                            ),
-                                          },
-                                        )
-                                      : undefined
-                                  }
-                                >
-                                  <Textarea
-                                    value={selectedCodeJsonSchemaText}
-                                    onChange={(e) =>
-                                      handleCodeJsonSchemaChange(e.target.value)
-                                    }
-                                    className="font-mono"
-                                    rows={6}
-                                    placeholder={`{
-  "type": "object",
-  "properties": {
-    "result": { "type": "string" }
-  },
-  "required": ["result"]
-}`}
-                                  />
-                                </FormField>
-                              </>
-                            )}
-                          </>
-                        )}
-                    </div>
-
-                    <Button
-                      type="button"
-                      variant="destructive-outline"
-                      onClick={handleDeleteNode}
-                      disabled={selectedNode?.type === 'start'}
-                      shape="pill"
-                      className="w-full"
-                    >
-                      <Trash2 />
-                      {selectedNode?.type === 'start'
-                        ? t('agents.workflow.builder.cannotDeleteStart')
-                        : t('agents.workflow.builder.deleteNode')}
-                    </Button>
-                  </div>
-                </div>
-              </>
-            )}
-          </div>
+              )}
+              {selectedNode.type === 'state' && (
+                <StatePanel
+                  node={selectedNode}
+                  onUpdate={handleUpdateNodeData}
+                />
+              )}
+              {selectedNode.type === 'condition' && (
+                <ConditionPanel
+                  node={selectedNode}
+                  onUpdate={handleUpdateNodeData}
+                  onRemoveBranch={handleRemoveConditionBranch}
+                />
+              )}
+              {selectedNode.type === 'code' && (
+                <CodePanel
+                  node={selectedNode}
+                  onUpdate={handleUpdateNodeData}
+                  documentOptions={selectedCodeDocumentOptions}
+                  jsonSchemaText={selectedCodeJsonSchemaText}
+                  jsonSchemaError={selectedCodeJsonSchemaError}
+                  onJsonSchemaChange={handleCodeJsonSchemaChange}
+                />
+              )}
+            </NodePanel>
+          )}
         </div>
 
+        <WorkflowDetailsSheet
+          open={showDetails}
+          onOpenChange={setShowDetails}
+          details={{
+            name: workflowName,
+            description: workflowDescription,
+            allowPromptOverride: Boolean(
+              currentAgent.allow_system_prompt_override,
+            ),
+          }}
+          currentImage={currentAgentImage}
+          saving={detailsSaving}
+          errors={detailsSaveFailed ? publishErrors : []}
+          onSave={handleDetailsSave}
+        />
         <AgentPreviewSheet
           open={showPreview}
           onOpenChange={setShowPreview}
diff --git a/frontend/src/agents/workflow/WorkflowModelsContext.ts b/frontend/src/agents/workflow/WorkflowModelsContext.ts
new file mode 100644
index 00000000..eb6a6eb9
--- /dev/null
+++ b/frontend/src/agents/workflow/WorkflowModelsContext.ts
@@ -0,0 +1,25 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * Model display names by model id, provided by the builder so the canvas
+ * nodes (rendered by React Flow, out of reach of props) can name a model.
+ */
+export const WorkflowModelsContext = createContext<Record<string, string>>({});
+
+/**
+ * A model's display name.
+ *
+ * Args:
+ *   modelId: The model id stored on the node.
+ *
+ * Returns:
+ *   The display name, the id itself when the model is unknown, or undefined
+ *   when no id is set.
+ */
+export function useModelDisplayName(
+  modelId: string | undefined,
+): string | undefined {
+  const names = useContext(WorkflowModelsContext);
+  if (!modelId) return undefined;
+  return names[modelId] || modelId;
+}
diff --git a/frontend/src/agents/workflow/components/NodeDocumentsControl.tsx b/frontend/src/agents/workflow/components/NodeDocumentsControl.tsx
index 4ffc4876..658e0a96 100644
--- a/frontend/src/agents/workflow/components/NodeDocumentsControl.tsx
+++ b/frontend/src/agents/workflow/components/NodeDocumentsControl.tsx
@@ -66,7 +66,7 @@ export default function NodeDocumentsControl({
   return (
     <FormField label={label} hint={helpText} id={fieldId} float={false}>
       {/* The track is a plain wrapper: ToggleGroup takes layout only. */}
-      <div className="border-border bg-card rounded-xl border p-1">
+      <div className="bg-muted rounded-full p-1">
         <ToggleGroup
           id={fieldId}
           type="single"
@@ -121,7 +121,7 @@ export default function NodeDocumentsControl({
               onClick={addRef}
               className="shrink-0"
             >
-              <Plus className="size-3.5" />
+              <Plus />
               {t('agents.form.buttons.add')}
             </Button>
           </div>
diff --git a/frontend/src/agents/workflow/components/PromptTextArea.tsx b/frontend/src/agents/workflow/components/PromptTextArea.tsx
index 880d705f..7cb56c8e 100644
--- a/frontend/src/agents/workflow/components/PromptTextArea.tsx
+++ b/frontend/src/agents/workflow/components/PromptTextArea.tsx
@@ -337,6 +337,8 @@ interface PromptTextAreaProps {
   placeholder?: string;
   rows?: number;
   label?: string;
+  /** Surface behind the field, for the floating label's notch. */
+  labelSurface?: 'card' | 'background' | 'muted';
 }
 
 export default function PromptTextArea({
@@ -348,6 +350,7 @@ export default function PromptTextArea({
   placeholder,
   rows = 4,
   label,
+  labelSurface = 'card',
 }: PromptTextAreaProps) {
   const { t } = useTranslation();
   const textareaId = useId();
@@ -442,7 +445,7 @@ export default function PromptTextArea({
   // so typing keeps filtering it.
   const field = (
     <PopoverAnchor asChild>
-      <div className="border-border focus-within:border-ring focus-within:ring-ring/50 bg-card relative rounded-xl border transition-shadow focus-within:ring-3">
+      <div className="border-border focus-within:border-ring focus-within:ring-ring/50 relative rounded-xl border transition-shadow focus-within:ring-3">
         <div
           ref={overlayRef}
           aria-hidden
@@ -525,7 +528,7 @@ export default function PromptTextArea({
       }}
     >
       {label ? (
-        <FormField label={label} id={textareaId}>
+        <FormField label={label} id={textareaId} labelSurface={labelSurface}>
           {field}
         </FormField>
       ) : (
diff --git a/frontend/src/agents/workflow/components/WorkflowDetailsSheet.test.tsx b/frontend/src/agents/workflow/components/WorkflowDetailsSheet.test.tsx
new file mode 100644
index 00000000..61089e4e
--- /dev/null
+++ b/frontend/src/agents/workflow/components/WorkflowDetailsSheet.test.tsx
@@ -0,0 +1,113 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+import WorkflowDetailsSheet from './WorkflowDetailsSheet';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const details = {
+  name: 'Helpdesk Triage',
+  description: 'Routes internal requests',
+  allowPromptOverride: false,
+};
+
+describe('WorkflowDetailsSheet', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    document.body.innerHTML = '';
+  });
+
+  const render = (props: { errors?: string[]; saving?: boolean } = {}) => {
+    const handlers = { onOpenChange: vi.fn(), onSave: vi.fn() };
+    act(() => {
+      root.render(
+        <WorkflowDetailsSheet
+          open
+          details={details}
+          currentImage=""
+          saving={props.saving ?? false}
+          errors={props.errors ?? []}
+          {...handlers}
+        />,
+      );
+    });
+    return handlers;
+  };
+
+  const button = (name: string) =>
+    Array.from(document.querySelectorAll('button')).find(
+      (b) => b.textContent === name,
+    ) as HTMLButtonElement;
+
+  const nameInput = () =>
+    document.querySelector('input[type="text"]') as HTMLInputElement;
+
+  const type = (input: HTMLInputElement, value: string) => {
+    const setter = Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      'value',
+    )?.set;
+    act(() => {
+      setter?.call(input, value);
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+  };
+
+  it('opens with the workflow details filled in', () => {
+    render();
+    expect(document.body.textContent).toContain(
+      'agents.workflow.builder.detailsTitle',
+    );
+    expect(nameInput().value).toBe('Helpdesk Triage');
+    expect(document.querySelector('textarea')?.value).toBe(
+      'Routes internal requests',
+    );
+    expect(document.querySelector('[role="switch"]')).not.toBeNull();
+  });
+
+  it('keeps Save disabled until something changes, then saves the edits', () => {
+    const { onSave } = render();
+    const save = button('agents.form.buttons.save');
+    expect(save.disabled).toBe(true);
+
+    type(nameInput(), 'Helpdesk Router');
+    expect(save.disabled).toBe(false);
+
+    act(() => save.click());
+    expect(onSave).toHaveBeenCalledWith({
+      name: 'Helpdesk Router',
+      description: 'Routes internal requests',
+      allowPromptOverride: false,
+      imageFile: null,
+    });
+  });
+
+  it('closes on Cancel without saving', () => {
+    const { onOpenChange, onSave } = render();
+    type(nameInput(), 'Something else');
+    act(() => button('agents.form.buttons.cancel').click());
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
+  it('lists save errors in an alert inside the sheet', () => {
+    render({ errors: ['Workflow must have an end node'] });
+    const alert = document.querySelector('[role="alert"]');
+    expect(alert?.textContent).toContain('agents.workflow.builder.unableSave');
+    expect(alert?.textContent).toContain('Workflow must have an end node');
+  });
+});
diff --git a/frontend/src/agents/workflow/components/WorkflowDetailsSheet.tsx b/frontend/src/agents/workflow/components/WorkflowDetailsSheet.tsx
new file mode 100644
index 00000000..84dc9e67
--- /dev/null
+++ b/frontend/src/agents/workflow/components/WorkflowDetailsSheet.tsx
@@ -0,0 +1,226 @@
+import { CircleX } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { FormField } from '@/components/ui/form-field';
+import { Input } from '@/components/ui/input';
+import { SectionHeader } from '@/components/ui/section-header';
+import { Separator } from '@/components/ui/separator';
+import { SettingRow } from '@/components/ui/setting-row';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+
+import { FileUpload } from '../../../components/FileUpload';
+
+export interface WorkflowDetailsValues {
+  name: string;
+  description: string;
+  allowPromptOverride: boolean;
+}
+
+export interface WorkflowDetailsSave extends WorkflowDetailsValues {
+  /** A newly picked avatar, or null to keep the current one. */
+  imageFile: File | null;
+}
+
+interface WorkflowDetailsSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** The builder's current values; the sheet edits a copy of them. */
+  details: WorkflowDetailsValues;
+  /** The saved avatar's URL, shown in the tile until a new one is picked. */
+  currentImage: string;
+  saving: boolean;
+  /** Errors from the last save started here, shown at the top of the body. */
+  errors: string[];
+  onSave: (values: WorkflowDetailsSave) => void;
+}
+
+/**
+ * The workflow's name, description, avatar and prompt-override setting, in a
+ * right drawer laid out like the classic agent's Basics on a phone.
+ *
+ * The sheet edits a copy: Cancel, the X, Escape and the scrim drop the edits,
+ * and Save hands them to the builder, which saves the workflow.
+ *
+ * Args:
+ *   open: Whether the sheet is open.
+ *   onOpenChange: Opens or closes the sheet.
+ *   details: The values to start from each time it opens.
+ *   currentImage: The saved avatar's URL.
+ *   saving: Whether a save started here is running.
+ *   errors: Errors from that save.
+ *   onSave: Receives the edited values.
+ */
+export default function WorkflowDetailsSheet({
+  open,
+  onOpenChange,
+  details,
+  currentImage,
+  saving,
+  errors,
+  onSave,
+}: WorkflowDetailsSheetProps) {
+  const { t } = useTranslation();
+  const [draft, setDraft] = useState<WorkflowDetailsValues>(details);
+  const [imageFile, setImageFile] = useState<File | null>(null);
+
+  // Start from the builder's values every time the sheet opens.
+  useEffect(() => {
+    if (!open) return;
+    setDraft(details);
+    setImageFile(null);
+    // Only on open: later changes to `details` come from this sheet's own save.
+  }, [open]);
+
+  const dirty =
+    imageFile !== null ||
+    draft.name !== details.name ||
+    draft.description !== details.description ||
+    draft.allowPromptOverride !== details.allowPromptOverride;
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        size="default"
+        className="p-0"
+        closeLabel={t('agents.close')}
+      >
+        <div className="flex min-h-0 flex-1 flex-col">
+          {/* pr-12 keeps the header clear of the close X at top-2 right-2. */}
+          <div className="flex flex-col gap-1 px-6 pt-6 pr-12 pb-4">
+            <SheetTitle>{t('agents.workflow.builder.detailsTitle')}</SheetTitle>
+            <SheetDescription>
+              {t('agents.workflow.builder.detailsDescription')}
+            </SheetDescription>
+          </div>
+          <Separator />
+          <div className="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto px-6 py-6">
+            {errors.length > 0 && (
+              <Alert variant="destructive">
+                <CircleX />
+                <AlertTitle>
+                  {t('agents.workflow.builder.unableSave')}
+                </AlertTitle>
+                <AlertDescription>
+                  <ul className="flex list-inside list-disc flex-col gap-1 wrap-break-word">
+                    {errors.map((error, index) => (
+                      <li key={index}>{error}</li>
+                    ))}
+                  </ul>
+                </AlertDescription>
+              </Alert>
+            )}
+            <Card variant="subtle" padding="lg" className="gap-5">
+              <SectionHeader
+                as="h3"
+                size="xs"
+                title={t('agents.form.sections.basics')}
+              />
+              {/* The phone layout of classic Basics: the avatar beside Name,
+                Description across the row. */}
+              <div className="grid grid-cols-[auto_1fr] items-center gap-x-4 gap-y-5">
+                <FileUpload
+                  showPreview
+                  size="tile"
+                  tileSize="fixed"
+                  currentImage={currentImage || undefined}
+                  onUpload={(files) => setImageFile(files[0] ?? null)}
+                  onRemove={() => setImageFile(null)}
+                  uploadText={t('agents.form.labels.avatar')}
+                />
+                <FormField
+                  labelSurface="background"
+                  label={t('agents.form.labels.name')}
+                >
+                  <Input
+                    shape="pill"
+                    type="text"
+                    value={draft.name}
+                    placeholder={t(
+                      'agents.workflow.builder.workflowNamePlaceholder',
+                    )}
+                    onChange={(e) =>
+                      setDraft({ ...draft, name: e.target.value })
+                    }
+                  />
+                </FormField>
+                <FormField
+                  labelSurface="background"
+                  label={t('agents.form.labels.description')}
+                  className="col-span-2"
+                >
+                  <Textarea
+                    size="lg"
+                    className="h-32"
+                    placeholder={t(
+                      'agents.workflow.builder.workflowDescriptionPlaceholder',
+                    )}
+                    value={draft.description}
+                    onChange={(e) =>
+                      setDraft({ ...draft, description: e.target.value })
+                    }
+                  />
+                </FormField>
+              </div>
+            </Card>
+            <Card variant="subtle" padding="lg" className="gap-5">
+              <SectionHeader
+                as="h3"
+                size="xs"
+                title={t('agents.form.sections.advanced')}
+              />
+              <SettingRow
+                label={t('agents.form.advanced.systemPromptOverride')}
+                description={t(
+                  'agents.form.advanced.systemPromptOverrideDescription',
+                )}
+                htmlFor="workflow-system-prompt-override"
+              >
+                <Switch
+                  id="workflow-system-prompt-override"
+                  checked={draft.allowPromptOverride}
+                  onCheckedChange={(checked) =>
+                    setDraft({ ...draft, allowPromptOverride: checked })
+                  }
+                />
+              </SettingRow>
+            </Card>
+          </div>
+          <Separator />
+          <div className="flex justify-end gap-3 px-6 py-4">
+            <Button
+              type="button"
+              variant="ghost"
+              size="lg"
+              shape="pill"
+              onClick={() => onOpenChange(false)}
+            >
+              {t('agents.form.buttons.cancel')}
+            </Button>
+            <Button
+              type="button"
+              size="lg"
+              shape="pill"
+              disabled={!dirty}
+              loading={saving}
+              onClick={() => onSave({ ...draft, imageFile })}
+            >
+              {t('agents.form.buttons.save')}
+            </Button>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/frontend/src/agents/workflow/nodeTones.test.ts b/frontend/src/agents/workflow/nodeTones.test.ts
new file mode 100644
index 00000000..940259ce
--- /dev/null
+++ b/frontend/src/agents/workflow/nodeTones.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest';
+
+import { NODE_TONES, nodeToneClass, TONE_CLASSES } from './nodeTones';
+
+describe('nodeTones', () => {
+  it('maps every node type to one tone', () => {
+    expect(NODE_TONES).toEqual({
+      start: 'success',
+      agent: 'primary',
+      end: 'success',
+      note: 'warning',
+      state: 'info',
+      condition: 'warning',
+      code: 'info',
+    });
+  });
+
+  it('never paints End red', () => {
+    expect(nodeToneClass('end')).not.toMatch(/destructive/);
+    expect(nodeToneClass('end')).toBe('bg-success/10 text-success');
+  });
+
+  it('uses the brand soft fill for primary, not bg-primary/10', () => {
+    expect(TONE_CLASSES.primary).toBe('bg-secondary text-secondary-foreground');
+    expect(nodeToneClass('agent')).toBe(TONE_CLASSES.primary);
+  });
+
+  it('gives status tones their /10 fill and text', () => {
+    expect(TONE_CLASSES.info).toBe('bg-info/10 text-info');
+    expect(TONE_CLASSES.warning).toBe('bg-warning/10 text-warning');
+  });
+
+  it('falls back to a neutral tint for an unknown type', () => {
+    expect(nodeToneClass('mystery')).toBe(
+      'bg-muted-foreground/15 text-muted-foreground',
+    );
+  });
+});
diff --git a/frontend/src/agents/workflow/nodeTones.ts b/frontend/src/agents/workflow/nodeTones.ts
new file mode 100644
index 00000000..c5f91234
--- /dev/null
+++ b/frontend/src/agents/workflow/nodeTones.ts
@@ -0,0 +1,71 @@
+import {
+  Bot,
+  CodeXml,
+  Database,
+  Flag,
+  GitBranch,
+  Play,
+  StickyNote,
+  type LucideIcon,
+} from 'lucide-react';
+
+/** The node types the builder draws. */
+export type WorkflowNodeType =
+  'start' | 'agent' | 'end' | 'note' | 'state' | 'condition' | 'code';
+
+/** A node's colour role: the brand tint or one status tint. */
+export type NodeTone = 'primary' | 'success' | 'warning' | 'info';
+
+/**
+ * One colour per node type, read by the palette, every canvas node and the
+ * settings panel's header. Start and End share `success` as the two ends of
+ * the flow; `destructive` is kept for errors, so End is never red.
+ */
+export const NODE_TONES: Record<WorkflowNodeType, NodeTone> = {
+  start: 'success',
+  agent: 'primary',
+  end: 'success',
+  note: 'warning',
+  state: 'info',
+  condition: 'warning',
+  code: 'info',
+};
+
+// Whole class strings per tone so Tailwind sees them. Brand is the soft
+// `secondary` fill (never bg-primary/10); status tones are the /10 fill.
+export const TONE_CLASSES: Record<NodeTone, string> = {
+  primary: 'bg-secondary text-secondary-foreground',
+  success: 'bg-success/10 text-success',
+  warning: 'bg-warning/10 text-warning',
+  info: 'bg-info/10 text-info',
+};
+
+const NEUTRAL_TONE_CLASS = 'bg-muted-foreground/15 text-muted-foreground';
+
+/**
+ * The icon-square classes for a node type.
+ *
+ * Args:
+ *   type: The node's type.
+ *
+ * Returns:
+ *   The tone's fill and text classes, or a neutral tint for an unknown type.
+ */
+export function nodeToneClass(type: string | undefined): string {
+  const tone = NODE_TONES[type as WorkflowNodeType];
+  return tone ? TONE_CLASSES[tone] : NEUTRAL_TONE_CLASS;
+}
+
+/** Each node type's icon and its name's locale key. */
+export const NODE_META: Record<
+  WorkflowNodeType,
+  { icon: LucideIcon; labelKey: string }
+> = {
+  start: { icon: Play, labelKey: 'agents.workflow.nodes.start' },
+  agent: { icon: Bot, labelKey: 'agents.workflow.builder.aiAgent' },
+  end: { icon: Flag, labelKey: 'agents.workflow.nodes.end' },
+  note: { icon: StickyNote, labelKey: 'agents.workflow.nodes.note' },
+  state: { icon: Database, labelKey: 'agents.workflow.nodes.setState' },
+  condition: { icon: GitBranch, labelKey: 'agents.workflow.nodes.condition' },
+  code: { icon: CodeXml, labelKey: 'agents.workflow.nodes.code' },
+};
diff --git a/frontend/src/agents/workflow/nodes/BaseNode.tsx b/frontend/src/agents/workflow/nodes/BaseNode.tsx
index e24ecf3f..7f832213 100644
--- a/frontend/src/agents/workflow/nodes/BaseNode.tsx
+++ b/frontend/src/agents/workflow/nodes/BaseNode.tsx
@@ -3,11 +3,14 @@ import { Handle, Position } from 'reactflow';
 
 import { cn } from '@/lib/utils';
 
+import { nodeToneClass, type WorkflowNodeType } from '../nodeTones';
+
 interface BaseNodeProps {
   title: string;
   children?: ReactNode;
   selected?: boolean;
-  type?: 'start' | 'end' | 'default' | 'state' | 'agent' | 'condition' | 'code';
+  /** The node type; picks the icon square's tone from the shared map. */
+  type: WorkflowNodeType;
   icon?: ReactNode;
   handles?: {
     source?: boolean;
@@ -15,47 +18,25 @@ interface BaseNodeProps {
   };
 }
 
+/**
+ * The pill every canvas node but Note and If / Else is drawn as: a tinted
+ * icon, the title, a muted meta block and the handles. Selected is the focus
+ * ring look (`border-primary ring-3 ring-ring/50`), with no scale, so the
+ * node stays put under the pointer.
+ */
 export const BaseNode: React.FC<BaseNodeProps> = ({
   title,
   children,
   selected,
-  type = 'default',
+  type,
   icon,
   handles = { source: true, target: true },
 }) => {
-  let bgColor = 'bg-card';
-  let borderColor = 'border-border';
-  let iconBg = 'bg-muted';
-  let iconColor = 'text-muted-foreground';
-
-  if (selected) {
-    borderColor = 'border-primary ring-2 ring-primary';
-  }
-
-  if (type === 'start') {
-    iconBg = 'bg-success/10';
-    iconColor = 'text-success';
-  } else if (type === 'end') {
-    iconBg = 'bg-destructive/10';
-    iconColor = 'text-destructive';
-  } else if (type === 'state') {
-    iconBg = 'bg-muted';
-    iconColor = 'text-muted-foreground';
-  } else if (type === 'condition') {
-    iconBg = 'bg-warning/10';
-    iconColor = 'text-warning';
-  } else if (type === 'code') {
-    iconBg = 'bg-info/10';
-    iconColor = 'text-info';
-  }
-
   return (
     <div
       className={cn(
-        'rounded-full border shadow-md transition hover:shadow-lg',
-        bgColor,
-        borderColor,
-        selected && 'scale-105',
+        'bg-card rounded-full border shadow-md transition hover:shadow-lg',
+        selected ? 'border-primary ring-ring/50 ring-3' : 'border-border',
         'max-w-[250px] min-w-[180px]',
       )}
     >
@@ -72,8 +53,7 @@ export const BaseNode: React.FC<BaseNodeProps> = ({
         <div
           className={cn(
             'flex size-10 shrink-0 items-center justify-center rounded-full',
-            iconBg,
-            iconColor,
+            nodeToneClass(type),
           )}
         >
           {icon}
diff --git a/frontend/src/agents/workflow/nodes/CodeNode.tsx b/frontend/src/agents/workflow/nodes/CodeNode.tsx
index edb4731f..259b95cf 100644
--- a/frontend/src/agents/workflow/nodes/CodeNode.tsx
+++ b/frontend/src/agents/workflow/nodes/CodeNode.tsx
@@ -5,9 +5,7 @@ import { NodeProps } from 'reactflow';
 
 import { CodeNodeConfig } from '../../types/workflow';
 import { BaseNode } from './BaseNode';
-
-// Variable names are the user's own text: React escapes on render.
-const NO_ESCAPE = { interpolation: { escapeValue: false } } as const;
+import OutputVariableLine from './OutputVariableLine';
 
 type CodeNodeData = {
   title?: string;
@@ -46,18 +44,7 @@ const CodeNode = ({ data, selected }: NodeProps<CodeNodeData>) => {
           </div>
         )}
         {config.output_variable && (
-          <div
-            className="text-muted-foreground truncate text-xs"
-            title={t('agents.workflow.nodes.output', {
-              ...NO_ESCAPE,
-              variable: config.output_variable,
-            })}
-          >
-            {t('agents.workflow.nodes.output', {
-              ...NO_ESCAPE,
-              variable: config.output_variable,
-            })}
-          </div>
+          <OutputVariableLine variable={config.output_variable} />
         )}
       </div>
     </BaseNode>
diff --git a/frontend/src/agents/workflow/nodes/ConditionNode.tsx b/frontend/src/agents/workflow/nodes/ConditionNode.tsx
index cdbabeac..e73a5a12 100644
--- a/frontend/src/agents/workflow/nodes/ConditionNode.tsx
+++ b/frontend/src/agents/workflow/nodes/ConditionNode.tsx
@@ -6,6 +6,7 @@ import { Handle, NodeProps, Position } from 'reactflow';
 import { cn } from '@/lib/utils';
 
 import { ConditionCase } from '../../types/workflow';
+import { nodeToneClass } from '../nodeTones';
 
 type ConditionNodeData = {
   label?: string;
@@ -44,7 +45,7 @@ const ConditionNode = ({ data, selected }: NodeProps<ConditionNodeData>) => {
       className={cn(
         'bg-card relative rounded-2xl border shadow-md transition',
         selected
-          ? 'border-primary ring-primary scale-105 ring-2'
+          ? 'border-primary ring-ring/50 ring-3'
           : 'border-border hover:shadow-lg',
       )}
       style={{ minWidth: 180, maxWidth: 220, height }}
@@ -57,7 +58,12 @@ const ConditionNode = ({ data, selected }: NodeProps<ConditionNodeData>) => {
       />
 
       <div className="flex items-center gap-3 px-3 py-2">
-        <div className="bg-warning/10 text-warning flex size-9 shrink-0 items-center justify-center rounded-full">
+        <div
+          className={cn(
+            'flex size-9 shrink-0 items-center justify-center rounded-full',
+            nodeToneClass('condition'),
+          )}
+        >
           <GitBranch className="size-3.5" />
         </div>
         <div className="min-w-0 flex-1 pr-2">
@@ -69,8 +75,8 @@ const ConditionNode = ({ data, selected }: NodeProps<ConditionNodeData>) => {
           </div>
           <div className="text-muted-foreground text-xs">
             {data.config?.mode === 'advanced'
-              ? t('agents.workflow.nodes.modeAdvanced')
-              : t('agents.workflow.nodes.modeSimple')}
+              ? t('agents.workflow.builder.modeAdvanced')
+              : t('agents.workflow.builder.modeSimple')}
           </div>
         </div>
       </div>
diff --git a/frontend/src/agents/workflow/nodes/OutputVariableLine.tsx b/frontend/src/agents/workflow/nodes/OutputVariableLine.tsx
new file mode 100644
index 00000000..e6bc4ece
--- /dev/null
+++ b/frontend/src/agents/workflow/nodes/OutputVariableLine.tsx
@@ -0,0 +1,25 @@
+import { ArrowRight } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+// Variable names are the user's own text: React escapes on render.
+const NO_ESCAPE = { interpolation: { escapeValue: false } } as const;
+
+/**
+ * A node's output variable on the canvas: an arrow, then the name in mono,
+ * because it is what the next node reads.
+ *
+ * Args:
+ *   variable: The output variable's name.
+ */
+export default function OutputVariableLine({ variable }: { variable: string }) {
+  const { t } = useTranslation();
+  return (
+    <div
+      className="text-muted-foreground flex min-w-0 items-center gap-1 text-xs"
+      title={t('agents.workflow.nodes.output', { ...NO_ESCAPE, variable })}
+    >
+      <ArrowRight className="size-3 shrink-0" aria-hidden="true" />
+      <span className="truncate font-mono">{variable}</span>
+    </div>
+  );
+}
diff --git a/frontend/src/agents/workflow/nodes/index.tsx b/frontend/src/agents/workflow/nodes/index.tsx
index d1a8c10c..fa16fcd2 100644
--- a/frontend/src/agents/workflow/nodes/index.tsx
+++ b/frontend/src/agents/workflow/nodes/index.tsx
@@ -4,14 +4,14 @@ import { useTranslation } from 'react-i18next';
 
 import { cn } from '@/lib/utils';
 
+import { nodeToneClass } from '../nodeTones';
+import { useModelDisplayName } from '../WorkflowModelsContext';
 import { BaseNode } from './BaseNode';
+import OutputVariableLine from './OutputVariableLine';
 import CodeNode from './CodeNode';
 import ConditionNode from './ConditionNode';
 import SetStateNode from './SetStateNode';
 
-// Variable names are the user's own text: React escapes on render.
-const NO_ESCAPE = { interpolation: { escapeValue: false } } as const;
-
 export const StartNode = memo(function StartNode({
   selected,
 }: {
@@ -73,6 +73,12 @@ export const AgentNode = memo(function AgentNode({
   const { t } = useTranslation();
   const title = data.title || data.label || t('agents.workflow.nodes.agent');
   const config = data.config || {};
+  const modelName = useModelDisplayName(config.model_id);
+  const agentType =
+    config.agent_type === 'research' || config.agent_type === 'classic'
+      ? t(`agents.form.agentTypes.${config.agent_type}`)
+      : config.agent_type;
+  const meta = [agentType, modelName].filter(Boolean).join(' · ');
   return (
     <BaseNode
       title={title}
@@ -81,35 +87,13 @@ export const AgentNode = memo(function AgentNode({
       icon={<Bot className="size-4" />}
     >
       <div className="flex flex-col gap-1">
-        {config.agent_type && (
-          <div
-            className="text-muted-foreground truncate text-xs"
-            title={config.agent_type}
-          >
-            {config.agent_type}
-          </div>
-        )}
-        {config.model_id && (
-          <div
-            className="text-primary truncate text-xs"
-            title={config.model_id}
-          >
-            {config.model_id}
+        {meta && (
+          <div className="text-muted-foreground truncate text-xs" title={meta}>
+            {meta}
           </div>
         )}
         {config.output_variable && (
-          <div
-            className="text-muted-foreground truncate text-xs"
-            title={t('agents.workflow.nodes.output', {
-              ...NO_ESCAPE,
-              variable: config.output_variable,
-            })}
-          >
-            {t('agents.workflow.nodes.output', {
-              ...NO_ESCAPE,
-              variable: config.output_variable,
-            })}
-          </div>
+          <OutputVariableLine variable={config.output_variable} />
         )}
       </div>
     </BaseNode>
@@ -138,12 +122,17 @@ export const NoteNode = memo(function NoteNode({
         // over it as a flat gradient, so the canvas grid doesn't show through.
         'bg-card from-warning/10 to-warning/10 max-w-[250px] rounded-3xl border bg-linear-to-b px-5 py-3 shadow-md transition',
         selected
-          ? 'border-warning ring-warning scale-105 ring-2'
+          ? 'border-warning ring-warning/50 ring-3'
           : 'border-warning/50 hover:shadow-lg',
       )}
     >
       <div className="flex items-start gap-3">
-        <div className="bg-warning/15 text-warning flex size-10 shrink-0 items-center justify-center rounded-full">
+        <div
+          className={cn(
+            'flex size-10 shrink-0 items-center justify-center rounded-full',
+            nodeToneClass('note'),
+          )}
+        >
           <StickyNote className="size-4.5" />
         </div>
         <div className="min-w-0 flex-1">
diff --git a/frontend/src/agents/workflow/panels/AgentPanel.test.tsx b/frontend/src/agents/workflow/panels/AgentPanel.test.tsx
new file mode 100644
index 00000000..2d63f351
--- /dev/null
+++ b/frontend/src/agents/workflow/panels/AgentPanel.test.tsx
@@ -0,0 +1,138 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { type Node } from 'reactflow';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+import AgentPanel from './AgentPanel';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const makeNode = (config: Record<string, unknown> = {}): Node => ({
+  id: 'agent_1',
+  type: 'agent',
+  position: { x: 0, y: 0 },
+  data: {
+    title: 'Classify',
+    config: {
+      agent_type: 'classic',
+      system_prompt: '',
+      prompt_template: '',
+      stream_to_user: true,
+      sources: [],
+      tools: [],
+      ...config,
+    },
+  },
+});
+
+describe('AgentPanel', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    document.body.innerHTML = '';
+  });
+
+  const render = (node: Node, jsonSchemaText = '') => {
+    const onUpdate = vi.fn();
+    act(() => {
+      root.render(
+        <AgentPanel
+          node={node}
+          onUpdate={onUpdate}
+          nodes={[node]}
+          edges={[]}
+          availableModels={[]}
+          availableTools={[]}
+          sourceOptions={[]}
+          documentOptions={[]}
+          jsonSchemaText={jsonSchemaText}
+          jsonSchemaError={null}
+          modelSupportsStructuredOutput
+          onJsonSchemaChange={vi.fn()}
+        />,
+      );
+    });
+    return { onUpdate };
+  };
+
+  const advancedToggle = () =>
+    Array.from(container.querySelectorAll('button')).find((b) =>
+      b.textContent?.includes('agents.workflow.builder.advancedSettings'),
+    ) as HTMLButtonElement;
+
+  it('groups the fields under Model, Prompt, Knowledge and Output', () => {
+    render(makeNode());
+    const headings = Array.from(container.querySelectorAll('h3')).map(
+      (h) => h.textContent,
+    );
+    expect(headings).toEqual([
+      'agents.form.sections.model',
+      'agents.form.sections.prompt',
+      'agents.workflow.builder.knowledge',
+      'agents.workflow.builder.output',
+    ]);
+  });
+
+  it('stacks Agent type and Model at full width in the narrow panel', () => {
+    render(makeNode());
+    const modelSection = container.querySelector('section')!;
+    expect(modelSection.querySelector('.grid')).toBeNull();
+    const triggers = modelSection.querySelectorAll('[role="combobox"]');
+    expect(triggers).toHaveLength(2);
+    triggers.forEach((trigger) =>
+      expect(trigger.className).toContain('w-full'),
+    );
+  });
+
+  it('streams through a Switch with a description, not a Checkbox', () => {
+    const { onUpdate } = render(makeNode());
+    expect(container.querySelector('[role="checkbox"]')).toBeNull();
+    const toggle = container.querySelector(
+      '[role="switch"]',
+    ) as HTMLButtonElement;
+    expect(toggle.getAttribute('aria-checked')).toBe('true');
+    expect(container.textContent).toContain(
+      'agents.workflow.builder.streamToUserDescription',
+    );
+    act(() => toggle.click());
+    expect(onUpdate).toHaveBeenCalledWith({
+      config: expect.objectContaining({ stream_to_user: false }),
+    });
+  });
+
+  it('keeps advanced settings closed when none is set', () => {
+    render(makeNode());
+    const toggle = advancedToggle();
+    expect(toggle.getAttribute('aria-expanded')).toBe('false');
+    expect(container.textContent).not.toContain(
+      'agents.workflow.builder.filePassing',
+    );
+    act(() => toggle.click());
+    expect(toggle.getAttribute('aria-expanded')).toBe('true');
+    expect(container.textContent).toContain(
+      'agents.workflow.builder.filePassing',
+    );
+  });
+
+  it('opens advanced settings when one of them is set', () => {
+    render(makeNode({ file_passing: 'native' }));
+    expect(advancedToggle().getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('opens advanced settings when a schema is present', () => {
+    render(makeNode({ json_schema: { type: 'object' } }), '{"type":"object"}');
+    expect(advancedToggle().getAttribute('aria-expanded')).toBe('true');
+  });
+});
diff --git a/frontend/src/agents/workflow/panels/AgentPanel.tsx b/frontend/src/agents/workflow/panels/AgentPanel.tsx
new file mode 100644
index 00000000..b7ddfc89
--- /dev/null
+++ b/frontend/src/agents/workflow/panels/AgentPanel.tsx
@@ -0,0 +1,403 @@
+import { ChevronRight } from 'lucide-react';
+import { useId, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { type Edge, type Node } from 'reactflow';
+
+import { Button } from '@/components/ui/button';
+import { FormField } from '@/components/ui/form-field';
+import { Input } from '@/components/ui/input';
+import { MultiSelect } from '@/components/ui/multi-select';
+import { SectionHeader } from '@/components/ui/section-header';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { SettingRow, SettingRows } from '@/components/ui/setting-row';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { cn } from '@/lib/utils';
+
+import { getToolDisplayName } from '../../../utils/toolUtils';
+import NodeDocumentsControl from '../components/NodeDocumentsControl';
+import PromptTextArea from '../components/PromptTextArea';
+import {
+  DEFAULT_FILE_PASSING,
+  FILE_PASSING_OPTIONS,
+  FilePassing,
+  normalizeFilePassing,
+} from '../documentConfig';
+import { NO_ESCAPE, schemaErrorText, type UserTool } from '../workflowHelpers';
+import { type NodePanelBodyProps } from './types';
+
+import type { Model } from '../../../models/types';
+
+interface AgentPanelProps extends NodePanelBodyProps {
+  nodes: Node[];
+  edges: Edge[];
+  availableModels: Model[];
+  availableTools: UserTool[];
+  sourceOptions: { value: string; label: string }[];
+  /** Upstream file variables the agent can read. */
+  documentOptions: { value: string; label: string }[];
+  /** The structured-output schema as typed. */
+  jsonSchemaText: string;
+  /** The schema's validation fragment, or null. */
+  jsonSchemaError: string | null;
+  /** False when the picked model can't return structured output. */
+  modelSupportsStructuredOutput: boolean;
+  onJsonSchemaChange: (text: string) => void;
+}
+
+const SCHEMA_PLACEHOLDER = `{
+  "type": "object",
+  "properties": {
+    "summary": { "type": "string" }
+  },
+  "required": ["summary"]
+}`;
+
+/**
+ * Whether any advanced setting (documents, file passing, structured output)
+ * differs from its default, so the disclosure opens on its own.
+ *
+ * Args:
+ *   config: The agent node's config.
+ *   jsonSchemaText: The schema as typed.
+ *   jsonSchemaError: The schema's validation fragment, or null.
+ *
+ * Returns:
+ *   True when the advanced settings should start open.
+ */
+export function hasAdvancedAgentSettings(
+  config: Record<string, unknown> | undefined,
+  jsonSchemaText: string,
+  jsonSchemaError: string | null,
+): boolean {
+  const inputDocuments = config?.input_documents;
+  return (
+    (Array.isArray(inputDocuments) && inputDocuments.length > 0) ||
+    normalizeFilePassing(config?.file_passing) !== DEFAULT_FILE_PASSING ||
+    (config?.json_schema !== undefined && config?.json_schema !== null) ||
+    jsonSchemaText.trim() !== '' ||
+    Boolean(jsonSchemaError)
+  );
+}
+
+/**
+ * Settings for an AI Agent node, grouped Model, Prompt, Knowledge and Output
+ * like classic Overview, with documents, file passing and structured output
+ * under an Advanced settings disclosure.
+ */
+export default function AgentPanel({
+  node,
+  onUpdate,
+  nodes,
+  edges,
+  availableModels,
+  availableTools,
+  sourceOptions,
+  documentOptions,
+  jsonSchemaText,
+  jsonSchemaError,
+  modelSupportsStructuredOutput,
+  onJsonSchemaChange,
+}: AgentPanelProps) {
+  const { t } = useTranslation();
+  const streamId = useId();
+  const config = node.data.config || {};
+  const [advancedOpen, setAdvancedOpen] = useState(() =>
+    hasAdvancedAgentSettings(config, jsonSchemaText, jsonSchemaError),
+  );
+
+  const updateConfig = (patch: Record<string, unknown>) =>
+    onUpdate({ config: { ...(node.data.config || {}), ...patch } });
+
+  const builtinModels = availableModels.filter((m) => m.source !== 'user');
+  const userModels = availableModels.filter((m) => m.source === 'user');
+  const schemaInvalid = jsonSchemaText.trim() !== '' && jsonSchemaError;
+
+  return (
+    <div className="flex flex-col gap-6">
+      <section className="flex flex-col gap-5">
+        <SectionHeader
+          as="h3"
+          size="xs"
+          title={t('agents.form.sections.model')}
+        />
+        <div className="flex flex-col gap-5">
+          <FormField
+            label={t('agents.workflow.builder.agentType')}
+            labelSurface="background"
+          >
+            <Select
+              value={config.agent_type || 'classic'}
+              onValueChange={(value) => updateConfig({ agent_type: value })}
+            >
+              <SelectTrigger size="field" className="w-full">
+                <SelectValue
+                  placeholder={t(
+                    'agents.workflow.builder.agentTypePlaceholder',
+                  )}
+                />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="classic">
+                  {t('agents.form.agentTypes.classic')}
+                </SelectItem>
+                <SelectItem value="research">
+                  {t('agents.form.agentTypes.research')}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </FormField>
+          <FormField
+            label={t('agents.workflow.builder.model')}
+            labelSurface="background"
+          >
+            <Select
+              value={config.model_id || ''}
+              onValueChange={(value) =>
+                updateConfig({
+                  model_id: value,
+                  llm_name:
+                    availableModels.find((m) => m.id === value)?.provider || '',
+                })
+              }
+            >
+              <SelectTrigger size="field" className="w-full">
+                <SelectValue
+                  placeholder={t('agents.workflow.builder.modelPlaceholder')}
+                />
+              </SelectTrigger>
+              <SelectContent>
+                {builtinModels.length > 0 && (
+                  <SelectGroup>
+                    <SelectLabel>
+                      {t('settings.customModels.modelsGroup.builtin')}
+                    </SelectLabel>
+                    {builtinModels.map((model) => (
+                      <SelectItem key={model.id} value={model.id}>
+                        {model.display_name} · {model.provider}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                )}
+                {userModels.length > 0 && (
+                  <SelectGroup>
+                    <SelectLabel>
+                      {t('settings.customModels.modelsGroup.user')}
+                    </SelectLabel>
+                    {userModels.map((model) => (
+                      <SelectItem key={model.id} value={model.id}>
+                        {model.display_name} · {model.provider}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                )}
+              </SelectContent>
+            </Select>
+          </FormField>
+        </div>
+      </section>
+
+      <section className="flex flex-col gap-5">
+        <SectionHeader
+          as="h3"
+          size="xs"
+          title={t('agents.form.sections.prompt')}
+        />
+        <FormField
+          label={t('agents.workflow.builder.systemPrompt')}
+          labelSurface="background"
+        >
+          <Textarea
+            value={config.system_prompt ?? ''}
+            onChange={(e) => updateConfig({ system_prompt: e.target.value })}
+            rows={3}
+            placeholder={t('agents.workflow.builder.systemPromptPlaceholder')}
+          />
+        </FormField>
+        <PromptTextArea
+          label={t('agents.workflow.builder.promptTemplate')}
+          labelSurface="background"
+          value={config.prompt_template || ''}
+          onChange={(val) => updateConfig({ prompt_template: val })}
+          nodes={nodes}
+          edges={edges}
+          selectedNodeId={node.id}
+          placeholder={t('agents.workflow.builder.promptTemplatePlaceholder', {
+            ...NO_ESCAPE,
+            example: '{{ agent.variable }}',
+          })}
+        />
+      </section>
+
+      <section className="flex flex-col gap-5">
+        <SectionHeader
+          as="h3"
+          size="xs"
+          title={t('agents.workflow.builder.knowledge')}
+        />
+        <FormField
+          label={t('agents.workflow.builder.sources')}
+          labelSurface="background"
+        >
+          <MultiSelect
+            options={sourceOptions}
+            selected={config.sources || []}
+            onChange={(newSources) => updateConfig({ sources: newSources })}
+            placeholder={t('agents.form.placeholders.selectSources')}
+            searchPlaceholder={t('agents.form.sourcePopup.searchPlaceholder')}
+            emptyText={t('agents.form.sourcePopup.noOptionsMessage')}
+          />
+        </FormField>
+        <FormField
+          label={t('agents.form.sections.tools')}
+          labelSurface="background"
+        >
+          <MultiSelect
+            options={availableTools.map((tool) => ({
+              value: tool.id,
+              label: getToolDisplayName(tool),
+            }))}
+            selected={config.tools || []}
+            onChange={(newTools) => updateConfig({ tools: newTools })}
+            placeholder={t('agents.form.placeholders.selectTools')}
+            searchPlaceholder={t('agents.form.toolsPopup.searchPlaceholder')}
+            emptyText={t('agents.form.toolsPopup.noOptionsMessage')}
+          />
+        </FormField>
+      </section>
+
+      <section className="flex flex-col gap-5">
+        <SectionHeader
+          as="h3"
+          size="xs"
+          title={t('agents.workflow.builder.output')}
+        />
+        <FormField
+          label={t('agents.workflow.builder.outputVariable')}
+          labelSurface="background"
+        >
+          <Input
+            type="text"
+            value={config.output_variable || ''}
+            onChange={(e) => updateConfig({ output_variable: e.target.value })}
+            placeholder={t('agents.workflow.builder.outputVariablePlaceholder')}
+          />
+        </FormField>
+        <SettingRows>
+          <SettingRow
+            label={t('agents.workflow.builder.streamToUser')}
+            description={t('agents.workflow.builder.streamToUserDescription')}
+            htmlFor={streamId}
+          >
+            <Switch
+              id={streamId}
+              checked={config.stream_to_user ?? true}
+              onCheckedChange={(checked) =>
+                updateConfig({ stream_to_user: checked })
+              }
+            />
+          </SettingRow>
+        </SettingRows>
+      </section>
+
+      <div className="flex flex-col gap-5">
+        <Button
+          type="button"
+          variant="link"
+          size="sm"
+          aria-expanded={advancedOpen}
+          onClick={() => setAdvancedOpen((open) => !open)}
+          className="-ml-3 w-fit justify-start"
+        >
+          <ChevronRight
+            aria-hidden="true"
+            className={cn(
+              'transition-transform duration-200',
+              advancedOpen && 'rotate-90',
+            )}
+          />
+          {t('agents.workflow.builder.advancedSettings')}
+        </Button>
+        {advancedOpen && (
+          <div className="flex flex-col gap-5">
+            <NodeDocumentsControl
+              key={node.id}
+              value={config.input_documents ?? []}
+              onChange={(nextInputDocuments) =>
+                updateConfig({ input_documents: nextInputDocuments })
+              }
+              options={documentOptions}
+              label={t('agents.workflow.builder.documents')}
+              helpText={t('agents.workflow.builder.documentsHint')}
+            />
+            <FormField
+              label={t('agents.workflow.builder.filePassing')}
+              hint={t('agents.workflow.builder.filePassingHint')}
+              labelSurface="background"
+            >
+              <Select
+                value={normalizeFilePassing(config.file_passing)}
+                onValueChange={(value) =>
+                  updateConfig({ file_passing: value as FilePassing })
+                }
+              >
+                <SelectTrigger size="field" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {FILE_PASSING_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {t(`agents.workflow.filePassing.${option.value}`, {
+                        defaultValue: option.label,
+                      })}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </FormField>
+            <FormField
+              label={t('agents.workflow.builder.structuredOutput')}
+              labelSurface="background"
+              hint={
+                [
+                  !modelSupportsStructuredOutput
+                    ? t('agents.workflow.builder.modelNoStructuredOutput')
+                    : null,
+                  jsonSchemaText.trim() !== '' && !jsonSchemaError
+                    ? t('agents.workflow.builder.validSchema')
+                    : null,
+                ]
+                  .filter(Boolean)
+                  .join(' ') || undefined
+              }
+              error={
+                schemaInvalid
+                  ? t('agents.workflow.builder.invalidSchema', {
+                      ...NO_ESCAPE,
+                      error: schemaErrorText(t, jsonSchemaError),
+                    })
+                  : undefined
+              }
+            >
+              <Textarea
+                value={jsonSchemaText}
+                onChange={(e) => onJsonSchemaChange(e.target.value)}
+                className="font-mono"
+                rows={4}
+                placeholder={SCHEMA_PLACEHOLDER}
+              />
+            </FormField>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/agents/workflow/panels/CodePanel.tsx b/frontend/src/agents/workflow/panels/CodePanel.tsx
new file mode 100644
index 00000000..6b36b9e8
--- /dev/null
+++ b/frontend/src/agents/workflow/panels/CodePanel.tsx
@@ -0,0 +1,152 @@
+import { useTranslation } from 'react-i18next';
+
+import { FormField } from '@/components/ui/form-field';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+
+import NodeDocumentsControl from '../components/NodeDocumentsControl';
+import { NO_ESCAPE, schemaErrorText } from '../workflowHelpers';
+import { type NodePanelBodyProps } from './types';
+
+interface CodePanelProps extends NodePanelBodyProps {
+  /** Upstream file variables the code can take as inputs. */
+  documentOptions: { value: string; label: string }[];
+  /** The structured-output schema as typed. */
+  jsonSchemaText: string;
+  /** The schema's validation fragment, or null. */
+  jsonSchemaError: string | null;
+  onJsonSchemaChange: (text: string) => void;
+}
+
+/** Settings for a Code node: code, inputs, output and schema. */
+export default function CodePanel({
+  node: selectedNode,
+  onUpdate: handleUpdateNodeData,
+  documentOptions: selectedCodeDocumentOptions,
+  jsonSchemaText: selectedCodeJsonSchemaText,
+  jsonSchemaError: selectedCodeJsonSchemaError,
+  onJsonSchemaChange: handleCodeJsonSchemaChange,
+}: CodePanelProps) {
+  const { t } = useTranslation();
+  return (
+    <div className="flex flex-col gap-5">
+      <p className="text-muted-foreground text-sm">
+        {t('agents.workflow.builder.codeIntro')}
+      </p>
+      <FormField
+        labelSurface="background"
+        label={t('agents.workflow.nodes.code')}
+      >
+        <Textarea
+          value={selectedNode.data.config?.code ?? ''}
+          onChange={(e) =>
+            handleUpdateNodeData({
+              config: {
+                ...(selectedNode.data.config || {}),
+                code: e.target.value,
+              },
+            })
+          }
+          className="font-mono"
+          rows={10}
+          spellCheck={false}
+          placeholder={t('agents.workflow.builder.examplePlaceholder', {
+            ...NO_ESCAPE,
+            example: 'print("hello world")',
+          })}
+        />
+      </FormField>
+      <NodeDocumentsControl
+        key={selectedNode.id}
+        value={selectedNode.data.config?.inputs ?? []}
+        onChange={(nextInputs) =>
+          handleUpdateNodeData({
+            config: {
+              ...(selectedNode.data.config || {}),
+              inputs: nextInputs,
+            },
+          })
+        }
+        options={selectedCodeDocumentOptions}
+        label={t('agents.workflow.builder.inputFiles')}
+        helpText={t('agents.workflow.builder.inputFilesHint')}
+      />
+      <FormField
+        labelSurface="background"
+        label={t('agents.workflow.builder.outputVariable')}
+      >
+        <Input
+          type="text"
+          value={selectedNode.data.config?.output_variable || ''}
+          onChange={(e) =>
+            handleUpdateNodeData({
+              config: {
+                ...(selectedNode.data.config || {}),
+                output_variable: e.target.value,
+              },
+            })
+          }
+          placeholder={t('agents.workflow.builder.outputVariablePlaceholder')}
+        />
+      </FormField>
+      <FormField
+        labelSurface="background"
+        label={t('agents.workflow.builder.timeout')}
+      >
+        <Input
+          type="number"
+          min={1}
+          value={selectedNode.data.config?.timeout ?? ''}
+          onChange={(e) => {
+            const raw = e.target.value;
+            const parsed =
+              raw.trim() === '' ? undefined : Number.parseInt(raw, 10);
+            handleUpdateNodeData({
+              config: {
+                ...(selectedNode.data.config || {}),
+                timeout:
+                  parsed !== undefined && Number.isFinite(parsed)
+                    ? parsed
+                    : undefined,
+              },
+            });
+          }}
+          placeholder={t('agents.workflow.builder.optional')}
+        />
+      </FormField>
+      <FormField
+        labelSurface="background"
+        label={t('agents.workflow.builder.structuredOutput')}
+        hint={
+          selectedCodeJsonSchemaText.trim() !== '' &&
+          !selectedCodeJsonSchemaError
+            ? t('agents.workflow.builder.validSchema')
+            : undefined
+        }
+        error={
+          selectedCodeJsonSchemaText.trim() !== '' &&
+          selectedCodeJsonSchemaError
+            ? t('agents.workflow.builder.invalidSchema', {
+                ...NO_ESCAPE,
+                error: schemaErrorText(t, selectedCodeJsonSchemaError),
+              })
+            : undefined
+        }
+      >
+        <Textarea
+          value={selectedCodeJsonSchemaText}
+          onChange={(e) => handleCodeJsonSchemaChange(e.target.value)}
+          className="font-mono"
+          rows={6}
+          placeholder={`{
+  "type": "object",
+  "properties": {
+    "result": { "type": "string" }
+  },
+  "required": ["result"]
+}`}
+        />
+      </FormField>
+    </div>
+  );
+}
diff --git a/frontend/src/agents/workflow/panels/ConditionPanel.test.tsx b/frontend/src/agents/workflow/panels/ConditionPanel.test.tsx
new file mode 100644
index 00000000..022f01d4
--- /dev/null
+++ b/frontend/src/agents/workflow/panels/ConditionPanel.test.tsx
@@ -0,0 +1,107 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { type Node } from 'reactflow';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+  Trans: ({ i18nKey }: { i18nKey: string }) => i18nKey,
+}));
+
+import ConditionPanel from './ConditionPanel';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const node: Node = {
+  id: 'condition_1',
+  type: 'condition',
+  position: { x: 0, y: 0 },
+  data: {
+    title: 'Route',
+    config: {
+      mode: 'simple',
+      cases: [
+        {
+          name: 'People Ops',
+          expression: 'category.contains("people")',
+          sourceHandle: 'case_0',
+        },
+      ],
+    },
+  },
+};
+
+describe('ConditionPanel', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  const render = () => {
+    const onUpdate = vi.fn();
+    act(() => {
+      root.render(
+        <ConditionPanel
+          node={node}
+          onUpdate={onUpdate}
+          onRemoveBranch={vi.fn()}
+        />,
+      );
+    });
+    return { onUpdate };
+  };
+
+  it('picks the mode with a ToggleGroup in the muted track', () => {
+    const { onUpdate } = render();
+    const group = container.querySelector('[role="radiogroup"]')!;
+    expect(group.parentElement!.className).toContain('bg-muted');
+    const advanced = Array.from(group.querySelectorAll('button')).find(
+      (b) => b.textContent === 'agents.workflow.builder.modeAdvanced',
+    )!;
+    act(() => advanced.click());
+    expect(onUpdate).toHaveBeenCalledWith({
+      config: expect.objectContaining({ mode: 'advanced' }),
+    });
+  });
+
+  it('labels the branch name, variable, operator and value fields', () => {
+    render();
+    const labels = Array.from(
+      container.querySelectorAll('[data-slot="form-field-label"]'),
+    ).map((l) => l.textContent);
+    expect(labels).toEqual([
+      'agents.workflow.builder.branchName',
+      'agents.workflow.builder.variable',
+      'agents.workflow.builder.operator',
+      'agents.workflow.builder.value',
+    ]);
+  });
+
+  it('wires the operator label to its select, with no aria-label', () => {
+    render();
+    const trigger = container.querySelector('[role="combobox"]')!;
+    expect(trigger.hasAttribute('aria-label')).toBe(false);
+    const label = container.querySelector(`label[for="${trigger.id}"]`);
+    expect(label?.textContent).toBe('agents.workflow.builder.operator');
+  });
+
+  it('adds a condition with an outline pill button', () => {
+    const { onUpdate } = render();
+    const add = Array.from(container.querySelectorAll('button')).find((b) =>
+      b.textContent?.includes('agents.workflow.builder.addCondition'),
+    )!;
+    expect(add.getAttribute('data-variant')).toBe('outline');
+    act(() => add.click());
+    const cases = onUpdate.mock.calls[0][0].config.cases;
+    expect(cases).toHaveLength(2);
+    expect(cases[1].sourceHandle).toBe('case_1');
+  });
+});
diff --git a/frontend/src/agents/workflow/panels/ConditionPanel.tsx b/frontend/src/agents/workflow/panels/ConditionPanel.tsx
new file mode 100644
index 00000000..bffa53b2
--- /dev/null
+++ b/frontend/src/agents/workflow/panels/ConditionPanel.tsx
@@ -0,0 +1,291 @@
+import { Plus, Trash2 } from 'lucide-react';
+import { Trans, useTranslation } from 'react-i18next';
+
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { FormField } from '@/components/ui/form-field';
+import { IconButton } from '@/components/ui/icon-button';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { SectionHeader } from '@/components/ui/section-header';
+import { Textarea } from '@/components/ui/textarea';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+
+import { ConditionCase } from '../../types/workflow';
+import { buildSimpleCel, parseSimpleCel } from '../simpleCel';
+import {
+  getNextConditionHandle,
+  normalizeConditionCases,
+} from '../workflowHelpers';
+import { type NodePanelBodyProps } from './types';
+
+interface ConditionPanelProps extends NodePanelBodyProps {
+  /** Drop the edges leaving the node from a removed case's handle. */
+  onRemoveBranch: (sourceHandle: string) => void;
+}
+
+type ConditionMode = 'simple' | 'advanced';
+
+/**
+ * Settings for an If / Else node: Simple or Advanced mode, then one row box
+ * per case (If, Else if, …) and Add condition.
+ */
+export default function ConditionPanel({
+  node,
+  onUpdate,
+  onRemoveBranch,
+}: ConditionPanelProps) {
+  const { t } = useTranslation();
+  const config = node.data.config || {};
+  const mode: ConditionMode =
+    config.mode === 'advanced' ? 'advanced' : 'simple';
+  const cases: ConditionCase[] = config.cases || [];
+
+  const updateConfig = (patch: Record<string, unknown>) =>
+    onUpdate({ config: { ...(node.data.config || {}), ...patch } });
+
+  const updateCase = (idx: number, patch: Partial<ConditionCase>) => {
+    const next = [...cases];
+    next[idx] = { ...next[idx], ...patch };
+    updateConfig({ cases: next });
+  };
+
+  const removeCase = (idx: number) => {
+    const next = normalizeConditionCases([...cases]);
+    const removedHandle = next[idx]?.sourceHandle;
+    next.splice(idx, 1);
+    updateConfig({ cases: next });
+    if (removedHandle) onRemoveBranch(removedHandle);
+  };
+
+  const addCase = () => {
+    const next = normalizeConditionCases([...cases]);
+    next.push({
+      name: '',
+      expression: '',
+      sourceHandle: getNextConditionHandle(next),
+    });
+    updateConfig({ cases: next });
+  };
+
+  return (
+    <div className="flex flex-col gap-5">
+      <p className="text-muted-foreground text-sm">
+        {t('agents.workflow.builder.conditionIntro')}
+      </p>
+      {/* The track is a plain wrapper: ToggleGroup takes layout only. */}
+      <div className="bg-muted rounded-full p-1">
+        <ToggleGroup
+          type="single"
+          size="xs"
+          value={mode}
+          onValueChange={(next) => next && updateConfig({ mode: next })}
+          aria-label={t('agents.workflow.builder.conditionMode')}
+          className="flex-nowrap"
+        >
+          <ToggleGroupItem value="simple" className="flex-1">
+            {t('agents.workflow.builder.modeSimple')}
+          </ToggleGroupItem>
+          <ToggleGroupItem value="advanced" className="flex-1">
+            {t('agents.workflow.builder.modeAdvanced')}
+          </ToggleGroupItem>
+        </ToggleGroup>
+      </div>
+
+      {cases.map((c, idx) => {
+        const parsed = parseSimpleCel(c.expression);
+        return (
+          <Card
+            key={c.sourceHandle}
+            variant="subtle"
+            padding="sm"
+            className="gap-4"
+          >
+            <div className="flex items-center gap-2">
+              <span
+                aria-hidden="true"
+                className="bg-warning size-2 shrink-0 rounded-full"
+              />
+              <SectionHeader
+                as="h4"
+                size="xs"
+                className="flex-1"
+                title={
+                  idx === 0
+                    ? t('agents.workflow.nodes.if')
+                    : t('agents.workflow.nodes.elseIf')
+                }
+              />
+              {cases.length > 1 && (
+                <IconButton
+                  variant="ghost-destructive"
+                  size="icon-xs"
+                  label={t('agents.workflow.removeCondition', {
+                    index: idx + 1,
+                  })}
+                  icon={Trash2}
+                  onClick={() => removeCase(idx)}
+                />
+              )}
+            </div>
+            <FormField
+              label={t('agents.workflow.builder.branchName')}
+              labelSurface="background"
+            >
+              <Input
+                type="text"
+                value={c.name || ''}
+                onChange={(e) => updateCase(idx, { name: e.target.value })}
+                placeholder={t('agents.workflow.builder.caseNamePlaceholder')}
+              />
+            </FormField>
+            {mode === 'simple' ? (
+              <>
+                <FormField
+                  label={t('agents.workflow.builder.variable')}
+                  labelSurface="background"
+                >
+                  <Input
+                    type="text"
+                    className="font-mono"
+                    value={parsed.variable}
+                    onChange={(e) =>
+                      updateCase(idx, {
+                        expression: buildSimpleCel(
+                          e.target.value,
+                          parsed.operator,
+                          parsed.value,
+                        ),
+                      })
+                    }
+                    placeholder={t(
+                      'agents.workflow.builder.variablePlaceholder',
+                    )}
+                  />
+                </FormField>
+                <div className="flex gap-2">
+                  <FormField
+                    label={t('agents.workflow.builder.operator')}
+                    labelSurface="background"
+                    className="w-32 shrink-0"
+                  >
+                    <Select
+                      value={parsed.operator}
+                      onValueChange={(op) =>
+                        updateCase(idx, {
+                          expression: buildSimpleCel(
+                            parsed.variable,
+                            op,
+                            parsed.value,
+                          ),
+                        })
+                      }
+                    >
+                      <SelectTrigger size="field" className="w-full">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="==">=</SelectItem>
+                        <SelectItem value="!=">!=</SelectItem>
+                        <SelectItem value=">">&gt;</SelectItem>
+                        <SelectItem value="<">&lt;</SelectItem>
+                        <SelectItem value=">=">&gt;=</SelectItem>
+                        <SelectItem value="<=">&lt;=</SelectItem>
+                        <SelectItem value="contains">
+                          {t('agents.workflow.builder.opContains')}
+                        </SelectItem>
+                        <SelectItem value="startsWith">
+                          {t('agents.workflow.builder.opStartsWith')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </FormField>
+                  <FormField
+                    label={t('agents.workflow.builder.value')}
+                    labelSurface="background"
+                    className="min-w-0 flex-1"
+                  >
+                    <Input
+                      type="text"
+                      value={parsed.value}
+                      onChange={(e) =>
+                        updateCase(idx, {
+                          expression: buildSimpleCel(
+                            parsed.variable,
+                            parsed.operator,
+                            e.target.value,
+                          ),
+                        })
+                      }
+                      placeholder={t(
+                        'agents.workflow.builder.valuePlaceholder',
+                      )}
+                    />
+                  </FormField>
+                </div>
+              </>
+            ) : (
+              <FormField
+                label={t('agents.workflow.conditionRow', { index: idx + 1 })}
+                labelSurface="background"
+                hint={
+                  <>
+                    <Trans
+                      i18nKey="agents.workflow.builder.celHint"
+                      components={{ code: <code /> }}
+                      values={{ braced: '{{query}}' }}
+                    />{' '}
+                    <Button
+                      variant="link"
+                      size="inline"
+                      asChild
+                      // eslint-disable-next-line shadcn/no-restyle -- a link in a 12px hint keeps the sentence's size and weight
+                      className="text-xs font-normal"
+                    >
+                      <a
+                        href="https://cel.dev/"
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        {t('agents.workflow.builder.learnMore')}
+                      </a>
+                    </Button>
+                  </>
+                }
+              >
+                <Textarea
+                  value={c.expression}
+                  onChange={(e) =>
+                    updateCase(idx, { expression: e.target.value })
+                  }
+                  rows={2}
+                  placeholder={t(
+                    'agents.workflow.builder.conditionPlaceholder',
+                  )}
+                />
+              </FormField>
+            )}
+          </Card>
+        );
+      })}
+
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        shape="pill"
+        onClick={addCase}
+        className="self-start"
+      >
+        <Plus />
+        {t('agents.workflow.builder.addCondition')}
+      </Button>
+    </div>
+  );
+}
diff --git a/frontend/src/agents/workflow/panels/NodePanel.test.tsx b/frontend/src/agents/workflow/panels/NodePanel.test.tsx
new file mode 100644
index 00000000..9f4ac8d5
--- /dev/null
+++ b/frontend/src/agents/workflow/panels/NodePanel.test.tsx
@@ -0,0 +1,123 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { type Node } from 'reactflow';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+import NodePanel from './NodePanel';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const agentNode: Node = {
+  id: 'classify',
+  type: 'agent',
+  position: { x: 0, y: 0 },
+  data: { title: 'Classify request' },
+};
+
+const startNode: Node = {
+  id: 'start',
+  type: 'start',
+  position: { x: 0, y: 0 },
+  data: { label: 'Start' },
+};
+
+describe('NodePanel', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    document.body.innerHTML = '';
+  });
+
+  const render = (node: Node) => {
+    const handlers = {
+      onClose: vi.fn(),
+      onDuplicate: vi.fn(),
+      onDelete: vi.fn(),
+      onUpdate: vi.fn(),
+    };
+    act(() => {
+      root.render(
+        <NodePanel node={node} {...handlers}>
+          <div data-testid="body">body</div>
+        </NodePanel>,
+      );
+    });
+    return handlers;
+  };
+
+  const menuTrigger = () =>
+    container.querySelector(
+      '[aria-label="agents.workflow.builder.nodeActions"]',
+    ) as HTMLButtonElement | null;
+
+  it('shows the icon, own title, type badge and id', () => {
+    render(agentNode);
+    const header = container.querySelector('header')!;
+    expect(header.textContent).toContain('Classify request');
+    const badge = header.querySelector('[data-slot="badge"]')!;
+    expect(badge.textContent).toBe('agents.workflow.builder.aiAgent');
+    expect(badge.getAttribute('data-variant')).toBe('neutral');
+    expect(header.textContent).toContain('classify');
+    expect(header.querySelector('.bg-secondary')).not.toBeNull();
+  });
+
+  it('offers Duplicate and Delete node in the node menu', () => {
+    const { onDuplicate, onDelete } = render(agentNode);
+    const trigger = menuTrigger();
+    expect(trigger).not.toBeNull();
+    act(() => {
+      trigger!.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }),
+      );
+    });
+    const items = Array.from(
+      document.querySelectorAll('[role="menuitem"]'),
+    ) as HTMLElement[];
+    expect(items.map((i) => i.textContent)).toEqual([
+      'agents.workflow.builder.duplicateNode',
+      'agents.workflow.builder.deleteNode',
+    ]);
+    expect(items[1].getAttribute('data-variant')).toBe('destructive');
+    act(() => items[0].click());
+    expect(onDuplicate).toHaveBeenCalled();
+    expect(onDelete).not.toHaveBeenCalled();
+  });
+
+  it('has no node menu and no title field for the start node', () => {
+    render(startNode);
+    expect(menuTrigger()).toBeNull();
+    expect(container.querySelector('input')).toBeNull();
+    expect(container.textContent).not.toContain('cannotDeleteStart');
+  });
+
+  it('closes from the header', () => {
+    const { onClose } = render(agentNode);
+    const close = container.querySelector(
+      '[aria-label="agents.close"]',
+    ) as HTMLButtonElement;
+    act(() => close.click());
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('edits the title on the background surface and renders the body', () => {
+    const { onUpdate } = render(agentNode);
+    const label = container.querySelector(
+      '[data-slot="form-field-label"]',
+    ) as HTMLElement;
+    expect(label.className).toContain('bg-background');
+    expect(container.querySelector('[data-testid="body"]')).not.toBeNull();
+    expect(onUpdate).not.toHaveBeenCalled();
+  });
+});
diff --git a/frontend/src/agents/workflow/panels/NodePanel.tsx b/frontend/src/agents/workflow/panels/NodePanel.tsx
new file mode 100644
index 00000000..3143894a
--- /dev/null
+++ b/frontend/src/agents/workflow/panels/NodePanel.tsx
@@ -0,0 +1,151 @@
+import { Copy, Trash2, X } from 'lucide-react';
+import { type ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { type Node } from 'reactflow';
+
+import { Badge } from '@/components/ui/badge';
+import { ActionMenu } from '@/components/ui/dropdown-menu';
+import { FormField } from '@/components/ui/form-field';
+import { IconButton } from '@/components/ui/icon-button';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+
+import CopyButton from '../../../components/CopyButton';
+import { NODE_META, nodeToneClass, type WorkflowNodeType } from '../nodeTones';
+
+interface NodePanelProps {
+  /** The node being edited. */
+  node: Node;
+  onClose: () => void;
+  onDuplicate: () => void;
+  onDelete: () => void;
+  /** Merge fields into the node's data (used by the title field). */
+  onUpdate: (data: Record<string, unknown>) => void;
+  /** The type's own settings (AgentPanel, ConditionPanel, …). */
+  children?: ReactNode;
+}
+
+// Start and End have fixed names and no settings of their own.
+const FIXED_TYPES = new Set(['start', 'end']);
+
+const FIXED_HINT_KEYS: Record<string, string> = {
+  start: 'agents.workflow.nodes.startHint',
+  end: 'agents.workflow.nodes.endHint',
+};
+
+/**
+ * The node settings column docked at the canvas's right edge: a header with
+ * the type's icon, the node's title, its type and id, a ⋯ menu (Duplicate,
+ * Delete node; none for Start) and close, then the one scrolling body.
+ */
+export default function NodePanel({
+  node,
+  onClose,
+  onDuplicate,
+  onDelete,
+  onUpdate,
+  children,
+}: NodePanelProps) {
+  const { t } = useTranslation();
+  const meta = NODE_META[node.type as WorkflowNodeType];
+  const Icon = meta?.icon;
+  const typeLabel = meta ? t(meta.labelKey) : (node.type ?? '');
+  const fixed = FIXED_TYPES.has(node.type ?? '');
+  const title = fixed
+    ? typeLabel
+    : node.data.title || node.data.label || typeLabel;
+
+  return (
+    <aside className="bg-background border-border flex w-96 shrink-0 flex-col border-l">
+      <header className="border-border flex items-start gap-3 border-b px-4 py-3">
+        <span
+          className={cn(
+            'flex size-8 shrink-0 items-center justify-center rounded-md',
+            nodeToneClass(node.type),
+          )}
+        >
+          {Icon && <Icon className="size-4" aria-hidden="true" />}
+        </span>
+        <div className="flex min-w-0 flex-1 flex-col">
+          <div className="flex min-w-0 items-center gap-2">
+            <h2
+              className="text-foreground truncate text-sm font-semibold"
+              title={title}
+            >
+              {title}
+            </h2>
+            {title !== typeLabel && (
+              <Badge variant="neutral">{typeLabel}</Badge>
+            )}
+          </div>
+          <div className="flex min-w-0 items-center gap-1">
+            <span
+              className="text-muted-foreground truncate font-mono text-xs"
+              title={node.id}
+            >
+              {node.id}
+            </span>
+            <CopyButton
+              textToCopy={node.id}
+              size="xs"
+              copyLabel={t('agents.workflow.builder.copyNodeId')}
+              side="bottom"
+            />
+          </div>
+        </div>
+        {node.type !== 'start' && (
+          <ActionMenu
+            size="toolbar"
+            triggerLabel={t('agents.workflow.builder.nodeActions')}
+            options={[
+              {
+                label: t('agents.workflow.builder.duplicateNode'),
+                icon: Copy,
+                onClick: onDuplicate,
+              },
+              {
+                label: t('agents.workflow.builder.deleteNode'),
+                icon: Trash2,
+                variant: 'destructive',
+                onClick: onDelete,
+              },
+            ]}
+          />
+        )}
+        <IconButton
+          variant="ghost-muted"
+          size="icon-sm"
+          side="bottom"
+          onClick={onClose}
+          label={t('agents.close')}
+          icon={X}
+        />
+      </header>
+
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        <div className="flex flex-col gap-6 p-4">
+          {fixed ? (
+            <p className="text-muted-foreground text-sm">
+              {t(FIXED_HINT_KEYS[node.type ?? ''])}
+            </p>
+          ) : (
+            <FormField
+              label={t('agents.workflow.builder.title')}
+              labelSurface="background"
+            >
+              <Input
+                type="text"
+                value={node.data.title || node.data.label || ''}
+                onChange={(e) =>
+                  onUpdate({ title: e.target.value, label: e.target.value })
+                }
+                placeholder={t('agents.workflow.builder.titlePlaceholder')}
+              />
+            </FormField>
+          )}
+          {children}
+        </div>
+      </div>
+    </aside>
+  );
+}
diff --git a/frontend/src/agents/workflow/panels/NotePanel.tsx b/frontend/src/agents/workflow/panels/NotePanel.tsx
new file mode 100644
index 00000000..f4115c85
--- /dev/null
+++ b/frontend/src/agents/workflow/panels/NotePanel.tsx
@@ -0,0 +1,31 @@
+import { useTranslation } from 'react-i18next';
+
+import { FormField } from '@/components/ui/form-field';
+import { Textarea } from '@/components/ui/textarea';
+
+import { type NodePanelBodyProps } from './types';
+
+/** Settings for a note node: its text. */
+export default function NotePanel({
+  node: selectedNode,
+  onUpdate: handleUpdateNodeData,
+}: NodePanelBodyProps) {
+  const { t } = useTranslation();
+  return (
+    <FormField
+      labelSurface="background"
+      label={t('agents.workflow.builder.noteContent')}
+    >
+      <Textarea
+        value={selectedNode.data.content || ''}
+        onChange={(e) =>
+          handleUpdateNodeData({
+            content: e.target.value,
+          })
+        }
+        rows={4}
+        placeholder={t('agents.workflow.builder.noteContentPlaceholder')}
+      />
+    </FormField>
+  );
+}
diff --git a/frontend/src/agents/workflow/panels/StatePanel.test.tsx b/frontend/src/agents/workflow/panels/StatePanel.test.tsx
new file mode 100644
index 00000000..c3cf0094
--- /dev/null
+++ b/frontend/src/agents/workflow/panels/StatePanel.test.tsx
@@ -0,0 +1,92 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { type Node } from 'reactflow';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, opts?: { index?: number }) =>
+      opts?.index !== undefined ? `${key}:${opts.index}` : key,
+  }),
+  Trans: ({ i18nKey }: { i18nKey: string }) => i18nKey,
+}));
+
+import StatePanel from './StatePanel';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const node: Node = {
+  id: 'state_1',
+  type: 'state',
+  position: { x: 0, y: 0 },
+  data: {
+    title: 'Set priority',
+    config: {
+      operations: [
+        { expression: '"P1"', target_variable: 'priority' },
+        { expression: '"4h"', target_variable: 'sla' },
+      ],
+    },
+  },
+};
+
+describe('StatePanel', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  const render = () => {
+    const onUpdate = vi.fn();
+    act(() => {
+      root.render(<StatePanel node={node} onUpdate={onUpdate} />);
+    });
+    return { onUpdate };
+  };
+
+  it('explains CEL once, in the intro', () => {
+    render();
+    const matches = container.textContent!.match(
+      /agents\.workflow\.builder\.celHint/g,
+    );
+    expect(matches).toHaveLength(1);
+    expect(
+      container.querySelectorAll('a[href="https://cel.dev/"]'),
+    ).toHaveLength(1);
+  });
+
+  it('numbers each assignment and puts the variable before the value', () => {
+    render();
+    expect(container.textContent).toContain(
+      'agents.workflow.builder.assignment:1',
+    );
+    expect(container.textContent).toContain(
+      'agents.workflow.builder.assignment:2',
+    );
+    const labels = Array.from(
+      container.querySelectorAll('[data-slot="form-field-label"]'),
+    ).map((l) => l.textContent);
+    expect(labels.slice(0, 2)).toEqual([
+      'agents.workflow.builder.variable',
+      'agents.workflow.builder.valueCel',
+    ]);
+  });
+
+  it('adds an assignment with an outline pill button', () => {
+    const { onUpdate } = render();
+    const add = Array.from(container.querySelectorAll('button')).find((b) =>
+      b.textContent?.includes('agents.workflow.builder.addAssignment'),
+    )!;
+    expect(add.getAttribute('data-variant')).toBe('outline');
+    act(() => add.click());
+    expect(onUpdate.mock.calls[0][0].config.operations).toHaveLength(3);
+  });
+});
diff --git a/frontend/src/agents/workflow/panels/StatePanel.tsx b/frontend/src/agents/workflow/panels/StatePanel.tsx
new file mode 100644
index 00000000..597cef82
--- /dev/null
+++ b/frontend/src/agents/workflow/panels/StatePanel.tsx
@@ -0,0 +1,132 @@
+import { Plus, Trash2 } from 'lucide-react';
+import { Trans, useTranslation } from 'react-i18next';
+
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { FormField } from '@/components/ui/form-field';
+import { IconButton } from '@/components/ui/icon-button';
+import { Input } from '@/components/ui/input';
+import { SectionHeader } from '@/components/ui/section-header';
+import { Textarea } from '@/components/ui/textarea';
+
+import { StateOperationConfig } from '../../types/workflow';
+import { NO_ESCAPE } from '../workflowHelpers';
+import { type NodePanelBodyProps } from './types';
+
+/**
+ * Settings for a Set State node: an intro that explains CEL once, then one
+ * numbered row box per assignment (variable, then its CEL value).
+ */
+export default function StatePanel({ node, onUpdate }: NodePanelBodyProps) {
+  const { t } = useTranslation();
+  const operations: StateOperationConfig[] = node.data.config?.operations || [];
+
+  const setOperations = (next: StateOperationConfig[]) =>
+    onUpdate({ config: { ...(node.data.config || {}), operations: next } });
+
+  const updateOperation = (
+    idx: number,
+    patch: Partial<StateOperationConfig>,
+  ) => {
+    const next = [...operations];
+    next[idx] = { ...next[idx], ...patch };
+    setOperations(next);
+  };
+
+  return (
+    <div className="flex flex-col gap-5">
+      <p className="text-muted-foreground text-sm">
+        {t('agents.workflow.builder.stateIntro')}{' '}
+        <Trans
+          i18nKey="agents.workflow.builder.celHint"
+          components={{ code: <code /> }}
+          values={{ braced: '{{query}}' }}
+        />{' '}
+        <Button variant="link" size="inline" asChild>
+          <a href="https://cel.dev/" target="_blank" rel="noreferrer">
+            {t('agents.workflow.builder.learnMore')}
+          </a>
+        </Button>
+      </p>
+
+      {operations.map((op, idx) => (
+        <Card key={idx} variant="subtle" padding="sm" className="gap-4">
+          <div className="flex items-center gap-2">
+            <SectionHeader
+              as="h4"
+              size="xs"
+              className="flex-1"
+              title={t('agents.workflow.builder.assignment', {
+                index: idx + 1,
+              })}
+            />
+            {operations.length > 1 && (
+              <IconButton
+                variant="ghost-destructive"
+                size="icon-xs"
+                label={t('agents.workflow.removeAssignment', {
+                  index: idx + 1,
+                })}
+                icon={Trash2}
+                onClick={() =>
+                  setOperations(operations.filter((_, i) => i !== idx))
+                }
+              />
+            )}
+          </div>
+          <FormField
+            label={t('agents.workflow.builder.variable')}
+            labelSurface="background"
+          >
+            <Input
+              type="text"
+              className="font-mono"
+              value={op.target_variable}
+              onChange={(e) =>
+                updateOperation(idx, { target_variable: e.target.value })
+              }
+              placeholder={t('agents.workflow.builder.examplePlaceholder', {
+                ...NO_ESCAPE,
+                example: 'variable_name',
+              })}
+            />
+          </FormField>
+          <FormField
+            label={t('agents.workflow.builder.valueCel')}
+            labelSurface="background"
+          >
+            <Textarea
+              className="font-mono"
+              value={op.expression}
+              onChange={(e) =>
+                updateOperation(idx, { expression: e.target.value })
+              }
+              rows={2}
+              placeholder={t('agents.workflow.builder.examplePlaceholder', {
+                ...NO_ESCAPE,
+                example: 'query',
+              })}
+            />
+          </FormField>
+        </Card>
+      ))}
+
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        shape="pill"
+        onClick={() =>
+          setOperations([
+            ...operations,
+            { expression: '', target_variable: '' },
+          ])
+        }
+        className="self-start"
+      >
+        <Plus />
+        {t('agents.workflow.builder.addAssignment')}
+      </Button>
+    </div>
+  );
+}
diff --git a/frontend/src/agents/workflow/panels/types.ts b/frontend/src/agents/workflow/panels/types.ts
new file mode 100644
index 00000000..7eb26680
--- /dev/null
+++ b/frontend/src/agents/workflow/panels/types.ts
@@ -0,0 +1,12 @@
+import { type Node } from 'reactflow';
+
+/** Props every node settings panel body takes. */
+export interface NodePanelBodyProps {
+  /** The node being edited. */
+  node: Node;
+  /** Merge fields into the node's data (a snapshot first unless disabled). */
+  onUpdate: (
+    data: Record<string, unknown>,
+    options?: { snapshot?: boolean },
+  ) => void;
+}
diff --git a/frontend/src/agents/workflow/workflowHelpers.test.ts b/frontend/src/agents/workflow/workflowHelpers.test.ts
new file mode 100644
index 00000000..a882a777
--- /dev/null
+++ b/frontend/src/agents/workflow/workflowHelpers.test.ts
@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest';
+
+import { findFreePosition } from './workflowHelpers';
+
+const box = (id: string, x: number, y: number, width = 200, height = 60) => ({
+  id,
+  position: { x, y },
+  width,
+  height,
+});
+
+describe('findFreePosition', () => {
+  it('keeps the wanted spot when nothing is there', () => {
+    expect(findFreePosition([box('a', 0, 0)], { x: 400, y: 0 })).toEqual({
+      x: 400,
+      y: 0,
+    });
+  });
+
+  it('moves down past a node that covers the spot', () => {
+    const spot = findFreePosition([box('a', 380, 0)], { x: 400, y: 0 });
+    expect(spot.x).toBe(400);
+    expect(spot.y).toBeGreaterThanOrEqual(60 + 24);
+  });
+
+  it('keeps moving down past a column of nodes', () => {
+    const nodes = [box('a', 400, 0), box('b', 400, 84), box('c', 400, 168)];
+    const spot = findFreePosition(nodes, { x: 400, y: 0 });
+    expect(spot.y).toBeGreaterThanOrEqual(168 + 60 + 24);
+  });
+
+  it('uses a default size for nodes React Flow has not measured yet', () => {
+    const spot = findFreePosition([{ id: 'a', position: { x: 400, y: 0 } }], {
+      x: 450,
+      y: 10,
+    });
+    expect(spot.y).toBeGreaterThan(10);
+  });
+});
diff --git a/frontend/src/agents/workflow/workflowHelpers.ts b/frontend/src/agents/workflow/workflowHelpers.ts
new file mode 100644
index 00000000..16c1f459
--- /dev/null
+++ b/frontend/src/agents/workflow/workflowHelpers.ts
@@ -0,0 +1,204 @@
+import { type TFunction } from 'i18next';
+
+import { ConditionCase } from '../types/workflow';
+import { FilePassing } from './documentConfig';
+
+// Names and handles are the user's own text: React escapes on render, so
+// i18next must not escape them first.
+export const NO_ESCAPE = { interpolation: { escapeValue: false } } as const;
+
+export interface AgentNodeConfig {
+  agent_type: 'classic' | 'research';
+  llm_name?: string;
+  model_id?: string;
+  system_prompt: string;
+  prompt_template: string;
+  output_variable?: string;
+  stream_to_user: boolean;
+  sources: string[];
+  tools: string[];
+  chunks?: string;
+  retriever?: string;
+  json_schema?: Record<string, unknown>;
+  input_documents?: string[];
+  file_passing?: FilePassing;
+}
+
+export interface UserTool {
+  id: string;
+  name: string;
+  displayName: string;
+  customName?: string;
+  // Workflow-only builtins (e.g. read_document) are kept here; the classic
+  // agent picker filters them out.
+  workflow_only?: boolean;
+}
+
+/**
+ * Check an agent node's structured-output schema.
+ *
+ * Args:
+ *   schema: The parsed schema, or undefined when none is set.
+ *
+ * Returns:
+ *   A short English error fragment, or null when the schema is usable.
+ */
+export function validateJsonSchemaConfig(schema: unknown): string | null {
+  if (schema === undefined || schema === null) return null;
+  if (typeof schema !== 'object' || Array.isArray(schema)) {
+    return 'must be a valid JSON object';
+  }
+
+  const schemaObject = schema as Record<string, unknown>;
+  if (!('schema' in schemaObject) && !('type' in schemaObject)) {
+    return 'must include either a "type" or "schema" field';
+  }
+
+  return null;
+}
+
+// The schema validators return short English fragments (tests and the
+// validation list key off them); these map each to its locale key.
+const SCHEMA_ERROR_KEYS: Record<string, string> = {
+  'must be a valid JSON object': 'agents.workflow.schema.notObject',
+  'must include either a "type" or "schema" field':
+    'agents.workflow.schema.missingType',
+  'must be valid JSON': 'agents.workflow.schema.invalidJson',
+};
+
+/**
+ * Translate a JSON schema validation fragment.
+ *
+ * Args:
+ *   t: The i18next translate function.
+ *   fragment: The fragment a schema validator returned.
+ *
+ * Returns:
+ *   The translated fragment, or the fragment itself when it is unknown.
+ */
+export function schemaErrorText(t: TFunction, fragment: string): string {
+  const key = SCHEMA_ERROR_KEYS[fragment];
+  return key ? t(key) : fragment;
+}
+
+/**
+ * Give every condition case a unique `case_N` source handle.
+ *
+ * Args:
+ *   cases: The cases as stored.
+ *
+ * Returns:
+ *   The cases, with missing or duplicate handles replaced.
+ */
+export function normalizeConditionCases(
+  cases: ConditionCase[],
+): ConditionCase[] {
+  const usedHandles = new Set<string>();
+  let nextIndex = 0;
+
+  return cases.map((conditionCase) => {
+    const candidate = (conditionCase.sourceHandle || '').trim();
+    if (candidate && !usedHandles.has(candidate)) {
+      usedHandles.add(candidate);
+      const match = candidate.match(/^case_(\d+)$/);
+      if (match) {
+        nextIndex = Math.max(nextIndex, Number(match[1]) + 1);
+      }
+      return conditionCase;
+    }
+
+    while (usedHandles.has(`case_${nextIndex}`)) {
+      nextIndex += 1;
+    }
+    const generatedHandle = `case_${nextIndex}`;
+    usedHandles.add(generatedHandle);
+    nextIndex += 1;
+
+    return {
+      ...conditionCase,
+      sourceHandle: generatedHandle,
+    };
+  });
+}
+
+/**
+ * The next free `case_N` handle for a new condition case.
+ *
+ * Args:
+ *   cases: The existing cases.
+ *
+ * Returns:
+ *   An unused handle.
+ */
+export function getNextConditionHandle(cases: ConditionCase[]): string {
+  const usedHandles = new Set(
+    cases.map((conditionCase) => conditionCase.sourceHandle).filter(Boolean),
+  );
+  const usedIndices = Array.from(usedHandles)
+    .map((handle) => handle.match(/^case_(\d+)$/))
+    .filter((match): match is RegExpMatchArray => Boolean(match))
+    .map((match) => Number(match[1]));
+
+  let nextIndex = usedIndices.length > 0 ? Math.max(...usedIndices) + 1 : 0;
+  while (usedHandles.has(`case_${nextIndex}`)) {
+    nextIndex += 1;
+  }
+
+  return `case_${nextIndex}`;
+}
+
+interface PlacedNode {
+  id: string;
+  position: { x: number; y: number };
+  width?: number | null;
+  height?: number | null;
+}
+
+// Nodes React Flow hasn't measured yet count as a typical node.
+const DEFAULT_NODE_WIDTH = 200;
+const DEFAULT_NODE_HEIGHT = 64;
+const NODE_GAP = 24;
+const MAX_PLACEMENT_STEPS = 50;
+
+/**
+ * Find a spot for a new node that doesn't cover an existing one.
+ *
+ * Starts at `wanted` (the new node's top-left corner) and steps straight down
+ * until the new node's box, with a gap around it, clears every other node.
+ *
+ * Args:
+ *   nodes: The nodes already on the canvas.
+ *   wanted: Where the new node would ideally go.
+ *   size: The new node's expected size.
+ *
+ * Returns:
+ *   The first free top-left position at or below `wanted`.
+ */
+export function findFreePosition(
+  nodes: PlacedNode[],
+  wanted: { x: number; y: number },
+  size: { width: number; height: number } = {
+    width: DEFAULT_NODE_WIDTH,
+    height: DEFAULT_NODE_HEIGHT,
+  },
+): { x: number; y: number } {
+  const overlapping = (y: number) =>
+    nodes.find((node) => {
+      const width = node.width ?? DEFAULT_NODE_WIDTH;
+      const height = node.height ?? DEFAULT_NODE_HEIGHT;
+      return (
+        wanted.x < node.position.x + width + NODE_GAP &&
+        wanted.x + size.width + NODE_GAP > node.position.x &&
+        y < node.position.y + height + NODE_GAP &&
+        y + size.height + NODE_GAP > node.position.y
+      );
+    });
+
+  let y = wanted.y;
+  for (let step = 0; step < MAX_PLACEMENT_STEPS; step += 1) {
+    const blocker = overlapping(y);
+    if (!blocker) break;
+    y = blocker.position.y + (blocker.height ?? DEFAULT_NODE_HEIGHT) + NODE_GAP;
+  }
+  return { x: wanted.x, y };
+}
diff --git a/frontend/src/components/FileUpload.tsx b/frontend/src/components/FileUpload.tsx
index f9d65ae8..8caa8541 100644
--- a/frontend/src/components/FileUpload.tsx
+++ b/frontend/src/components/FileUpload.tsx
@@ -22,6 +22,8 @@ interface FileUploadProps {
   previewSize?: number;
   /** `compact` is a one-row target for forms and panels. */
   size?: 'default' | 'compact' | 'tile';
+  /** A tile's width; `fixed` keeps it 64px in a narrow drawer. */
+  tileSize?: 'responsive' | 'fixed';
   /** An image already saved (an agent's avatar), shown in a tile until a new one is picked. */
   currentImage?: string;
 
@@ -55,6 +57,7 @@ export const FileUpload = ({
   showPreview = false,
   previewSize = 80,
   size = 'default',
+  tileSize,
   currentImage,
   children,
   className,
@@ -256,6 +259,7 @@ export const FileUpload = ({
       maxSize={maxSize}
       disabled={disabled}
       size={size}
+      tileSize={tileSize}
       title={title}
       description={description}
       icon={<ImageUp />}
diff --git a/frontend/src/components/ui/dropzone.test.tsx b/frontend/src/components/ui/dropzone.test.tsx
index d8457a23..b440107b 100644
--- a/frontend/src/components/ui/dropzone.test.tsx
+++ b/frontend/src/components/ui/dropzone.test.tsx
@@ -56,6 +56,18 @@ describe('Dropzone', () => {
     expect(html).not.toContain('hidden</span>');
   });
 
+  it('keeps a fixed tile at 64px and icon-only at every width', () => {
+    const html = renderToStaticMarkup(
+      <Dropzone onDrop={vi.fn()} size="tile" tileSize="fixed" title="Avatar" />,
+    );
+    expect(html).toContain('data-tile-size="fixed"');
+    expect(html).toContain('size-16');
+    expect(html).not.toContain('sm:size-22');
+    expect(html).not.toContain('sm:not-sr-only');
+    // The word is still the target's accessible name.
+    expect(html).toMatch(/class="[^"]*\bsr-only\b[^"]*">Avatar/);
+  });
+
   it('never uses raw palette colours', () => {
     const html = renderToStaticMarkup(<Dropzone onDrop={vi.fn()} />);
     expect(html).not.toMatch(/\b(bg|text|border)-(gray|red|green|blue)-\d+/);
diff --git a/frontend/src/components/ui/dropzone.tsx b/frontend/src/components/ui/dropzone.tsx
index 656be88b..8bd46590 100644
--- a/frontend/src/components/ui/dropzone.tsx
+++ b/frontend/src/components/ui/dropzone.tsx
@@ -22,10 +22,17 @@ const dropzoneVariants = cva(
         // An 88px square beside a form's fields (an agent's avatar): the icon
         // and a one-word label, or the picked image filling it.
         // 64px and icon-only on a phone (beside the Name field), 88px from sm.
-        tile: 'size-16 shrink-0 gap-1 rounded-2xl p-2 sm:size-22',
+        tile: 'size-16 shrink-0 gap-1 rounded-2xl p-2',
       },
+      // Only for size tile. responsive grows to 88px from sm; fixed stays
+      // 64px at every width, for a tile in a narrow drawer, where the
+      // breakpoint follows the window, not the drawer.
+      tileSize: { responsive: '', fixed: '' },
     },
-    defaultVariants: { size: 'default' },
+    compoundVariants: [
+      { size: 'tile', tileSize: 'responsive', class: 'sm:size-22' },
+    ],
+    defaultVariants: { size: 'default', tileSize: 'responsive' },
   },
 );
 
@@ -57,6 +64,11 @@ type DropzoneProps = {
    * tile is an 88px square that shows only the icon and the title.
    */
   size?: 'default' | 'compact' | 'tile';
+  /**
+   * A tile's width: `responsive` (64px on a phone, 88px with its title from
+   * sm) or `fixed` (64px and icon-only everywhere, for a narrow drawer).
+   */
+  tileSize?: 'responsive' | 'fixed';
   /** Main line. Defaults to the generic upload prompt. */
   title?: React.ReactNode;
   /** Secondary line for accepted types and limits, e.g. ".yaml, up to 5 MB". */
@@ -84,6 +96,7 @@ function Dropzone({
   maxSize,
   disabled = false,
   size = 'default',
+  tileSize = 'responsive',
   title = 'Click to upload or drag and drop',
   description,
   icon,
@@ -116,10 +129,11 @@ function Dropzone({
         aria-describedby={field['aria-describedby']}
         data-slot="dropzone"
         data-size={size}
+        data-tile-size={size === 'tile' ? tileSize : undefined}
         data-disabled={disabled || undefined}
         data-drag-active={isDragActive || undefined}
         data-drag-reject={isDragReject || undefined}
-        className={cn(dropzoneVariants({ size }))}
+        className={cn(dropzoneVariants({ size, tileSize }))}
       >
         <input {...getInputProps({ id: field.id })} />
         {children ??
@@ -128,7 +142,12 @@ function Dropzone({
               <span className={dropzoneIconVariants({ size })}>
                 {icon ?? <CloudUpload />}
               </span>
-              <span className="text-muted-foreground sr-only text-xs sm:not-sr-only">
+              <span
+                className={cn(
+                  'text-muted-foreground sr-only text-xs',
+                  tileSize === 'responsive' && 'sm:not-sr-only',
+                )}
+              >
                 {title}
               </span>
             </>
diff --git a/frontend/src/design/DesignSystem.tsx b/frontend/src/design/DesignSystem.tsx
index 742a4ac4..5c8d72eb 100644
--- a/frontend/src/design/DesignSystem.tsx
+++ b/frontend/src/design/DesignSystem.tsx
@@ -2172,6 +2172,18 @@ export default function DesignSystem() {
                     name and description.
                   </span>
                 </div>
+                <div className="flex items-center gap-3">
+                  <Dropzone
+                    size="tile"
+                    tileSize="fixed"
+                    onDrop={(files) => setDropped(files.map((f) => f.name))}
+                    title="Avatar"
+                  />
+                  <span className="text-muted-foreground text-xs">
+                    tileSize=&quot;fixed&quot;: 64px and icon-only at every
+                    width, for a narrow drawer.
+                  </span>
+                </div>
                 <p className="text-muted-foreground text-xs">
                   Last drop:{' '}
                   {dropped.length ? dropped.join(', ') : 'nothing yet'}
diff --git a/frontend/src/locale/de.json b/frontend/src/locale/de.json
index 0e11563d..84d1bb0e 100644
--- a/frontend/src/locale/de.json
+++ b/frontend/src/locale/de.json
@@ -1963,15 +1963,8 @@
         "saveFailed": "Workflow konnte nicht gespeichert werden",
         "defaultDescription": "Workflow-Agent: {{name}}",
         "newWorkflow": "Neuer Workflow",
-        "editDetails": "Workflow-Details bearbeiten",
-        "workflowName": "Workflow-Name",
         "workflowNamePlaceholder": "Workflow-Namen eingeben",
         "workflowDescriptionPlaceholder": "Beschreibe, was dieser Workflow macht",
-        "agentImageAlt": "Agentenbild",
-        "currentImage": "Aktuelles Bild",
-        "agentImage": "Agentenbild",
-        "agentImageHint": "Bildänderungen werden beim nächsten Speichern übernommen.",
-        "done": "Fertig",
         "unablePreview": "Workflow-Vorschau nicht möglich",
         "unableSave": "Workflow kann nicht gespeichert werden",
         "unablePublish": "Workflow kann nicht veröffentlicht werden",
@@ -1981,6 +1974,22 @@
         "setStateHint": "Workflow-Variablen ändern",
         "conditionHint": "Bedingte Verzweigung",
         "codeHint": "Code in einer Sandbox ausführen",
+        "paletteHint": "Auf die Arbeitsfläche ziehen oder zum Hinzufügen klicken.",
+        "nodeActions": "Knotenaktionen",
+        "duplicateNode": "Duplizieren",
+        "copyNodeId": "Knoten-ID kopieren",
+        "knowledge": "Wissen",
+        "output": "Ausgabe",
+        "streamToUserDescription": "Die Antwort dieses Knotens beim Schreiben im Chat anzeigen",
+        "advancedSettings": "Erweiterte Einstellungen",
+        "conditionMode": "Bedingungsmodus",
+        "branchName": "Name des Zweigs",
+        "variable": "Variable",
+        "value": "Wert",
+        "valueCel": "Wert (CEL)",
+        "addCondition": "Bedingung hinzufügen",
+        "assignment": "Zuweisung {{index}}",
+        "addAssignment": "Zuweisung hinzufügen",
         "startNode": "Startknoten",
         "endNode": "Endknoten",
         "stateTitle": "Globale Variablen setzen",
@@ -2009,7 +2018,7 @@
         "invalidSchema": "Ungültiges JSON-Schema: {{error}}",
         "noteContent": "Notizinhalt",
         "noteContentPlaceholder": "Notizinhalt eingeben",
-        "stateIntro": "Den Zustandsvariablen des Workflows Werte zuweisen",
+        "stateIntro": "Den Zustandsvariablen des Workflows Werte zuweisen.",
         "assignValue": "Wert zuweisen",
         "celHint": "Erstelle mit der Common Expression Language einen eigenen Ausdruck. Verweise auf den Zustand mit dem reinen Namen (<code>query</code>), nicht <code>{{braced}}</code>.",
         "learnMore": "Mehr erfahren",
@@ -2020,6 +2029,8 @@
         "caseNamePlaceholder": "Fallname (optional)",
         "variablePlaceholder": "Variable",
         "valuePlaceholder": "Wert",
+        "operator": "Operator",
+        "examplePlaceholder": "z. B. {{example}}",
         "opContains": "enthält",
         "opStartsWith": "beginnt",
         "conditionPlaceholder": "Bedingung eingeben, z. B. query.contains(\"refund\")",
@@ -2031,7 +2042,11 @@
         "cannotDeleteStart": "Startknoten kann nicht gelöscht werden",
         "deleteNode": "Knoten löschen",
         "deleteConfirm": "Möchtest du „{{name}}“ wirklich löschen?",
-        "deleteConfirmUnnamed": "Möchtest du diesen Workflow-Agenten wirklich löschen?"
+        "deleteConfirmUnnamed": "Möchtest du diesen Workflow-Agenten wirklich löschen?",
+        "detailsTitle": "Workflow-Details",
+        "detailsDescription": "Name, Beschreibung und Bild, die auf der Agentenkarte angezeigt werden.",
+        "unsavedChanges": "Nicht gespeicherte Änderungen",
+        "editDetailsMenu": "Details bearbeiten"
       },
       "validation": {
         "nameRequired": "Workflow-Name ist erforderlich",
@@ -2124,7 +2139,10 @@
         "searchPlaceholder": "Variablen suchen...",
         "empty": "Keine Variablen gefunden",
         "addContext": "Kontext hinzufügen"
-      }
+      },
+      "zoomIn": "Vergrößern",
+      "zoomOut": "Verkleinern",
+      "fitView": "Ansicht anpassen"
     },
     "typeModal": {
       "title": "Neuen Agenten erstellen",
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index 00448e40..355ffcfc 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -1969,12 +1969,14 @@
       "conditionRow": "Condition {{index}}",
       "conditionNameRow": "Condition {{index}} name",
       "conditionVariableRow": "Condition {{index}} variable",
-      "conditionOperatorRow": "Condition {{index}} operator",
       "conditionValueRow": "Condition {{index}} value",
       "undo": "Undo",
       "undoHint": "Undo (Ctrl+Z)",
       "redo": "Redo",
       "redoHint": "Redo (Ctrl+Shift+Z)",
+      "zoomIn": "Zoom in",
+      "zoomOut": "Zoom out",
+      "fitView": "Fit view",
       "removeAssignment": "Remove assignment {{index}}",
       "removeCondition": "Remove condition {{index}}",
       "artifacts": {
@@ -1997,15 +1999,8 @@
         "saveFailed": "Failed to save workflow",
         "defaultDescription": "Workflow agent: {{name}}",
         "newWorkflow": "New Workflow",
-        "editDetails": "Edit workflow details",
-        "workflowName": "Workflow Name",
         "workflowNamePlaceholder": "Enter workflow name",
         "workflowDescriptionPlaceholder": "Describe what this workflow does",
-        "agentImageAlt": "Agent image",
-        "currentImage": "Current image",
-        "agentImage": "Agent Image",
-        "agentImageHint": "Image updates are included the next time you save.",
-        "done": "Done",
         "unablePreview": "Unable to preview workflow",
         "unableSave": "Unable to save workflow",
         "unablePublish": "Unable to publish workflow",
@@ -2015,6 +2010,22 @@
         "setStateHint": "Modify workflow variables",
         "conditionHint": "Conditional branching",
         "codeHint": "Run code in a sandbox",
+        "paletteHint": "Drag onto the canvas, or click to add.",
+        "nodeActions": "Node actions",
+        "duplicateNode": "Duplicate",
+        "copyNodeId": "Copy node ID",
+        "knowledge": "Knowledge",
+        "output": "Output",
+        "streamToUserDescription": "Show this node's answer in the chat as it's written",
+        "advancedSettings": "Advanced settings",
+        "conditionMode": "Condition mode",
+        "branchName": "Branch name",
+        "variable": "Variable",
+        "value": "Value",
+        "valueCel": "Value (CEL)",
+        "addCondition": "Add condition",
+        "assignment": "Assignment {{index}}",
+        "addAssignment": "Add assignment",
         "startNode": "Start Node",
         "endNode": "End Node",
         "stateTitle": "Set global variables",
@@ -2043,7 +2054,7 @@
         "invalidSchema": "Invalid JSON schema: {{error}}",
         "noteContent": "Note Content",
         "noteContentPlaceholder": "Enter note content",
-        "stateIntro": "Assign values to workflow's state variables",
+        "stateIntro": "Assign values to the workflow's state variables.",
         "assignValue": "Assign value",
         "celHint": "Use Common Expression Language to create a custom expression. Reference state by bare name (<code>query</code>), not <code>{{braced}}</code>.",
         "learnMore": "Learn more",
@@ -2054,6 +2065,8 @@
         "caseNamePlaceholder": "Case name (optional)",
         "variablePlaceholder": "Variable",
         "valuePlaceholder": "Value",
+        "operator": "Operator",
+        "examplePlaceholder": "e.g. {{example}}",
         "opContains": "contains",
         "opStartsWith": "starts",
         "conditionPlaceholder": "Enter condition, e.g. query.contains(\"refund\")",
@@ -2063,9 +2076,13 @@
         "timeout": "Timeout (seconds)",
         "optional": "Optional",
         "cannotDeleteStart": "Cannot Delete Start Node",
-        "deleteNode": "Delete Node",
+        "deleteNode": "Delete node",
         "deleteConfirm": "Are you sure you want to delete \"{{name}}\"?",
-        "deleteConfirmUnnamed": "Are you sure you want to delete \"this workflow agent\"?"
+        "deleteConfirmUnnamed": "Are you sure you want to delete \"this workflow agent\"?",
+        "detailsTitle": "Workflow details",
+        "detailsDescription": "Name, description and image shown on the agent card.",
+        "unsavedChanges": "Unsaved changes",
+        "editDetailsMenu": "Edit details"
       },
       "validation": {
         "nameRequired": "Workflow name is required",
diff --git a/frontend/src/locale/es.json b/frontend/src/locale/es.json
index fc0cdc10..40c4703c 100644
--- a/frontend/src/locale/es.json
+++ b/frontend/src/locale/es.json
@@ -1963,15 +1963,8 @@
         "saveFailed": "No se pudo guardar el flujo de trabajo",
         "defaultDescription": "Agente de flujo de trabajo: {{name}}",
         "newWorkflow": "Nuevo flujo de trabajo",
-        "editDetails": "Editar detalles del flujo de trabajo",
-        "workflowName": "Nombre del flujo de trabajo",
         "workflowNamePlaceholder": "Introduce el nombre del flujo de trabajo",
         "workflowDescriptionPlaceholder": "Describe qué hace este flujo de trabajo",
-        "agentImageAlt": "Imagen del agente",
-        "currentImage": "Imagen actual",
-        "agentImage": "Imagen del agente",
-        "agentImageHint": "Los cambios de imagen se incluyen la próxima vez que guardes.",
-        "done": "Listo",
         "unablePreview": "No se puede previsualizar el flujo de trabajo",
         "unableSave": "No se puede guardar el flujo de trabajo",
         "unablePublish": "No se puede publicar el flujo de trabajo",
@@ -1981,6 +1974,22 @@
         "setStateHint": "Modifica las variables del flujo de trabajo",
         "conditionHint": "Ramificación condicional",
         "codeHint": "Ejecuta código en un entorno aislado",
+        "paletteHint": "Arrástralo al lienzo o haz clic para añadirlo.",
+        "nodeActions": "Acciones del nodo",
+        "duplicateNode": "Duplicar",
+        "copyNodeId": "Copiar ID del nodo",
+        "knowledge": "Conocimiento",
+        "output": "Salida",
+        "streamToUserDescription": "Muestra la respuesta de este nodo en el chat mientras se escribe",
+        "advancedSettings": "Configuración avanzada",
+        "conditionMode": "Modo de condición",
+        "branchName": "Nombre de la rama",
+        "variable": "Variable",
+        "value": "Valor",
+        "valueCel": "Valor (CEL)",
+        "addCondition": "Añadir condición",
+        "assignment": "Asignación {{index}}",
+        "addAssignment": "Añadir asignación",
         "startNode": "Nodo de inicio",
         "endNode": "Nodo final",
         "stateTitle": "Establecer variables globales",
@@ -2009,7 +2018,7 @@
         "invalidSchema": "Esquema JSON no válido: {{error}}",
         "noteContent": "Contenido de la nota",
         "noteContentPlaceholder": "Introduce el contenido de la nota",
-        "stateIntro": "Asigna valores a las variables de estado del flujo de trabajo",
+        "stateIntro": "Asigna valores a las variables de estado del flujo de trabajo.",
         "assignValue": "Asignar valor",
         "celHint": "Usa Common Expression Language para crear una expresión personalizada. Haz referencia al estado por su nombre sin llaves (<code>query</code>), no <code>{{braced}}</code>.",
         "learnMore": "Más información",
@@ -2020,6 +2029,8 @@
         "caseNamePlaceholder": "Nombre del caso (opcional)",
         "variablePlaceholder": "Variable",
         "valuePlaceholder": "Valor",
+        "operator": "Operador",
+        "examplePlaceholder": "p. ej. {{example}}",
         "opContains": "contiene",
         "opStartsWith": "empieza",
         "conditionPlaceholder": "Introduce una condición, p. ej. query.contains(\"refund\")",
@@ -2031,7 +2042,11 @@
         "cannotDeleteStart": "No se puede eliminar el nodo de inicio",
         "deleteNode": "Eliminar nodo",
         "deleteConfirm": "¿Seguro que quieres eliminar «{{name}}»?",
-        "deleteConfirmUnnamed": "¿Seguro que quieres eliminar este agente de flujo de trabajo?"
+        "deleteConfirmUnnamed": "¿Seguro que quieres eliminar este agente de flujo de trabajo?",
+        "detailsTitle": "Detalles del flujo de trabajo",
+        "detailsDescription": "Nombre, descripción e imagen que se muestran en la tarjeta del agente.",
+        "unsavedChanges": "Cambios sin guardar",
+        "editDetailsMenu": "Editar detalles"
       },
       "validation": {
         "nameRequired": "El nombre del flujo de trabajo es obligatorio",
@@ -2124,7 +2139,10 @@
         "searchPlaceholder": "Buscar variables...",
         "empty": "No se encontraron variables",
         "addContext": "Añadir contexto"
-      }
+      },
+      "zoomIn": "Acercar",
+      "zoomOut": "Alejar",
+      "fitView": "Ajustar vista"
     },
     "typeModal": {
       "title": "Crear un agente nuevo",
diff --git a/frontend/src/locale/jp.json b/frontend/src/locale/jp.json
index 76ddede1..90386da1 100644
--- a/frontend/src/locale/jp.json
+++ b/frontend/src/locale/jp.json
@@ -1958,15 +1958,8 @@
         "saveFailed": "ワークフローを保存できませんでした",
         "defaultDescription": "ワークフローエージェント: {{name}}",
         "newWorkflow": "新しいワークフロー",
-        "editDetails": "ワークフローの詳細を編集",
-        "workflowName": "ワークフロー名",
         "workflowNamePlaceholder": "ワークフロー名を入力",
         "workflowDescriptionPlaceholder": "このワークフローの内容を説明してください",
-        "agentImageAlt": "エージェント画像",
-        "currentImage": "現在の画像",
-        "agentImage": "エージェント画像",
-        "agentImageHint": "画像の変更は次回の保存時に反映されます。",
-        "done": "完了",
         "unablePreview": "ワークフローをプレビューできません",
         "unableSave": "ワークフローを保存できません",
         "unablePublish": "ワークフローを公開できません",
@@ -1976,6 +1969,22 @@
         "setStateHint": "ワークフロー変数を変更",
         "conditionHint": "条件分岐",
         "codeHint": "サンドボックスでコードを実行",
+        "paletteHint": "キャンバスにドラッグするか、クリックして追加します。",
+        "nodeActions": "ノードの操作",
+        "duplicateNode": "複製",
+        "copyNodeId": "ノード ID をコピー",
+        "knowledge": "ナレッジ",
+        "output": "出力",
+        "streamToUserDescription": "このノードの回答を生成中にチャットへ表示します",
+        "advancedSettings": "詳細設定",
+        "conditionMode": "条件モード",
+        "branchName": "分岐名",
+        "variable": "変数",
+        "value": "値",
+        "valueCel": "値 (CEL)",
+        "addCondition": "条件を追加",
+        "assignment": "割り当て {{index}}",
+        "addAssignment": "割り当てを追加",
         "startNode": "開始ノード",
         "endNode": "終了ノード",
         "stateTitle": "グローバル変数を設定",
@@ -2004,7 +2013,7 @@
         "invalidSchema": "無効な JSON スキーマ: {{error}}",
         "noteContent": "メモの内容",
         "noteContentPlaceholder": "メモの内容を入力",
-        "stateIntro": "ワークフローの状態変数に値を割り当てます",
+        "stateIntro": "ワークフローの状態変数に値を割り当てます。",
         "assignValue": "値を割り当て",
         "celHint": "Common Expression Language でカスタム式を作成します。状態は名前だけで参照します（<code>query</code>）。<code>{{braced}}</code> ではありません。",
         "learnMore": "詳細",
@@ -2015,6 +2024,8 @@
         "caseNamePlaceholder": "ケース名（任意）",
         "variablePlaceholder": "変数",
         "valuePlaceholder": "値",
+        "operator": "演算子",
+        "examplePlaceholder": "例: {{example}}",
         "opContains": "含む",
         "opStartsWith": "で始まる",
         "conditionPlaceholder": "条件を入力（例: query.contains(\"refund\")）",
@@ -2026,7 +2037,11 @@
         "cannotDeleteStart": "開始ノードは削除できません",
         "deleteNode": "ノードを削除",
         "deleteConfirm": "「{{name}}」を削除してもよろしいですか？",
-        "deleteConfirmUnnamed": "このワークフローエージェントを削除してもよろしいですか？"
+        "deleteConfirmUnnamed": "このワークフローエージェントを削除してもよろしいですか？",
+        "detailsTitle": "ワークフローの詳細",
+        "detailsDescription": "エージェントカードに表示される名前、説明、画像です。",
+        "unsavedChanges": "未保存の変更",
+        "editDetailsMenu": "詳細を編集"
       },
       "validation": {
         "nameRequired": "ワークフロー名は必須です",
@@ -2119,7 +2134,10 @@
         "searchPlaceholder": "変数を検索...",
         "empty": "変数が見つかりません",
         "addContext": "コンテキストを追加"
-      }
+      },
+      "zoomIn": "拡大",
+      "zoomOut": "縮小",
+      "fitView": "全体を表示"
     },
     "typeModal": {
       "title": "新しいエージェントを作成",
diff --git a/frontend/src/locale/ru.json b/frontend/src/locale/ru.json
index 556a85d3..9ce855e9 100644
--- a/frontend/src/locale/ru.json
+++ b/frontend/src/locale/ru.json
@@ -2017,15 +2017,8 @@
         "saveFailed": "Не удалось сохранить рабочий процесс",
         "defaultDescription": "Агент рабочего процесса: {{name}}",
         "newWorkflow": "Новый рабочий процесс",
-        "editDetails": "Изменить сведения о рабочем процессе",
-        "workflowName": "Название рабочего процесса",
         "workflowNamePlaceholder": "Введите название рабочего процесса",
         "workflowDescriptionPlaceholder": "Опишите, что делает этот рабочий процесс",
-        "agentImageAlt": "Изображение агента",
-        "currentImage": "Текущее изображение",
-        "agentImage": "Изображение агента",
-        "agentImageHint": "Изменения изображения применятся при следующем сохранении.",
-        "done": "Готово",
         "unablePreview": "Не удалось запустить предпросмотр рабочего процесса",
         "unableSave": "Не удалось сохранить рабочий процесс",
         "unablePublish": "Не удалось опубликовать рабочий процесс",
@@ -2035,6 +2028,22 @@
         "setStateHint": "Изменение переменных рабочего процесса",
         "conditionHint": "Условное ветвление",
         "codeHint": "Запуск кода в песочнице",
+        "paletteHint": "Перетащите на холст или нажмите, чтобы добавить.",
+        "nodeActions": "Действия с узлом",
+        "duplicateNode": "Дублировать",
+        "copyNodeId": "Копировать ID узла",
+        "knowledge": "Знания",
+        "output": "Вывод",
+        "streamToUserDescription": "Показывать ответ этого узла в чате по мере написания",
+        "advancedSettings": "Дополнительные настройки",
+        "conditionMode": "Режим условия",
+        "branchName": "Название ветки",
+        "variable": "Переменная",
+        "value": "Значение",
+        "valueCel": "Значение (CEL)",
+        "addCondition": "Добавить условие",
+        "assignment": "Присваивание {{index}}",
+        "addAssignment": "Добавить присваивание",
         "startNode": "Начальный узел",
         "endNode": "Конечный узел",
         "stateTitle": "Задать глобальные переменные",
@@ -2063,7 +2072,7 @@
         "invalidSchema": "Некорректная JSON-схема: {{error}}",
         "noteContent": "Текст заметки",
         "noteContentPlaceholder": "Введите текст заметки",
-        "stateIntro": "Присвойте значения переменным состояния рабочего процесса",
+        "stateIntro": "Присвойте значения переменным состояния рабочего процесса.",
         "assignValue": "Присвоить значение",
         "celHint": "Используйте Common Expression Language, чтобы создать собственное выражение. Ссылайтесь на состояние по имени (<code>query</code>), а не <code>{{braced}}</code>.",
         "learnMore": "Подробнее",
@@ -2074,6 +2083,8 @@
         "caseNamePlaceholder": "Название варианта (необязательно)",
         "variablePlaceholder": "Переменная",
         "valuePlaceholder": "Значение",
+        "operator": "Оператор",
+        "examplePlaceholder": "напр. {{example}}",
         "opContains": "содержит",
         "opStartsWith": "начинается",
         "conditionPlaceholder": "Введите условие, например query.contains(\"refund\")",
@@ -2085,7 +2096,11 @@
         "cannotDeleteStart": "Начальный узел нельзя удалить",
         "deleteNode": "Удалить узел",
         "deleteConfirm": "Вы уверены, что хотите удалить «{{name}}»?",
-        "deleteConfirmUnnamed": "Вы уверены, что хотите удалить этого агента рабочего процесса?"
+        "deleteConfirmUnnamed": "Вы уверены, что хотите удалить этого агента рабочего процесса?",
+        "detailsTitle": "Сведения о рабочем процессе",
+        "detailsDescription": "Название, описание и изображение, которые показываются на карточке агента.",
+        "unsavedChanges": "Несохранённые изменения",
+        "editDetailsMenu": "Изменить сведения"
       },
       "validation": {
         "nameRequired": "Укажите название рабочего процесса",
@@ -2184,7 +2199,10 @@
         "searchPlaceholder": "Поиск переменных...",
         "empty": "Переменные не найдены",
         "addContext": "Добавить контекст"
-      }
+      },
+      "zoomIn": "Увеличить",
+      "zoomOut": "Уменьшить",
+      "fitView": "Уместить на экране"
     },
     "typeModal": {
       "title": "Создать нового агента",
diff --git a/frontend/src/locale/zh-TW.json b/frontend/src/locale/zh-TW.json
index 4b9a5170..c39b2240 100644
--- a/frontend/src/locale/zh-TW.json
+++ b/frontend/src/locale/zh-TW.json
@@ -1958,15 +1958,8 @@
         "saveFailed": "無法儲存工作流程",
         "defaultDescription": "工作流程代理：{{name}}",
         "newWorkflow": "新增工作流程",
-        "editDetails": "編輯工作流程詳細資料",
-        "workflowName": "工作流程名稱",
         "workflowNamePlaceholder": "輸入工作流程名稱",
         "workflowDescriptionPlaceholder": "描述此工作流程的用途",
-        "agentImageAlt": "代理圖片",
-        "currentImage": "目前圖片",
-        "agentImage": "代理圖片",
-        "agentImageHint": "圖片更新將於下次儲存時生效。",
-        "done": "完成",
         "unablePreview": "無法預覽工作流程",
         "unableSave": "無法儲存工作流程",
         "unablePublish": "無法發佈工作流程",
@@ -1976,6 +1969,22 @@
         "setStateHint": "修改工作流程變數",
         "conditionHint": "條件分支",
         "codeHint": "在沙箱中執行程式碼",
+        "paletteHint": "拖曳到畫布上，或點擊新增。",
+        "nodeActions": "節點操作",
+        "duplicateNode": "複製",
+        "copyNodeId": "複製節點 ID",
+        "knowledge": "知識",
+        "output": "輸出",
+        "streamToUserDescription": "在生成過程中將此節點的回答顯示在聊天中",
+        "advancedSettings": "進階設定",
+        "conditionMode": "條件模式",
+        "branchName": "分支名稱",
+        "variable": "變數",
+        "value": "值",
+        "valueCel": "值 (CEL)",
+        "addCondition": "新增條件",
+        "assignment": "指定 {{index}}",
+        "addAssignment": "新增指定",
         "startNode": "開始節點",
         "endNode": "結束節點",
         "stateTitle": "設定全域變數",
@@ -2004,7 +2013,7 @@
         "invalidSchema": "JSON Schema 無效：{{error}}",
         "noteContent": "備註內容",
         "noteContentPlaceholder": "輸入備註內容",
-        "stateIntro": "為工作流程的狀態變數指定值",
+        "stateIntro": "為工作流程的狀態變數指定值。",
         "assignValue": "指定值",
         "celHint": "使用 Common Expression Language 撰寫自訂運算式。直接以名稱參照狀態（<code>query</code>），而非 <code>{{braced}}</code>。",
         "learnMore": "瞭解更多",
@@ -2015,6 +2024,8 @@
         "caseNamePlaceholder": "分支名稱（選填）",
         "variablePlaceholder": "變數",
         "valuePlaceholder": "值",
+        "operator": "運算子",
+        "examplePlaceholder": "例如 {{example}}",
         "opContains": "包含",
         "opStartsWith": "開頭為",
         "conditionPlaceholder": "輸入條件，例如 query.contains(\"refund\")",
@@ -2026,7 +2037,11 @@
         "cannotDeleteStart": "無法刪除開始節點",
         "deleteNode": "刪除節點",
         "deleteConfirm": "確定要刪除「{{name}}」嗎？",
-        "deleteConfirmUnnamed": "確定要刪除此工作流程代理嗎？"
+        "deleteConfirmUnnamed": "確定要刪除此工作流程代理嗎？",
+        "detailsTitle": "工作流程詳細資料",
+        "detailsDescription": "顯示在代理卡片上的名稱、說明和圖片。",
+        "unsavedChanges": "未儲存的變更",
+        "editDetailsMenu": "編輯詳細資料"
       },
       "validation": {
         "nameRequired": "工作流程名稱為必填",
@@ -2119,7 +2134,10 @@
         "searchPlaceholder": "搜尋變數...",
         "empty": "找不到變數",
         "addContext": "新增內容"
-      }
+      },
+      "zoomIn": "放大",
+      "zoomOut": "縮小",
+      "fitView": "符合檢視"
     },
     "typeModal": {
       "title": "建立新代理",
diff --git a/frontend/src/locale/zh.json b/frontend/src/locale/zh.json
index ce9a846f..983f7019 100644
--- a/frontend/src/locale/zh.json
+++ b/frontend/src/locale/zh.json
@@ -1958,15 +1958,8 @@
         "saveFailed": "无法保存工作流",
         "defaultDescription": "工作流智能体：{{name}}",
         "newWorkflow": "新建工作流",
-        "editDetails": "编辑工作流详情",
-        "workflowName": "工作流名称",
         "workflowNamePlaceholder": "输入工作流名称",
         "workflowDescriptionPlaceholder": "描述此工作流的用途",
-        "agentImageAlt": "智能体图片",
-        "currentImage": "当前图片",
-        "agentImage": "智能体图片",
-        "agentImageHint": "图片更新将在下次保存时生效。",
-        "done": "完成",
         "unablePreview": "无法预览工作流",
         "unableSave": "无法保存工作流",
         "unablePublish": "无法发布工作流",
@@ -1976,6 +1969,22 @@
         "setStateHint": "修改工作流变量",
         "conditionHint": "条件分支",
         "codeHint": "在沙箱中运行代码",
+        "paletteHint": "拖到画布上，或点击添加。",
+        "nodeActions": "节点操作",
+        "duplicateNode": "复制",
+        "copyNodeId": "复制节点 ID",
+        "knowledge": "知识",
+        "output": "输出",
+        "streamToUserDescription": "在生成过程中将此节点的回答显示在聊天中",
+        "advancedSettings": "高级设置",
+        "conditionMode": "条件模式",
+        "branchName": "分支名称",
+        "variable": "变量",
+        "value": "值",
+        "valueCel": "值 (CEL)",
+        "addCondition": "添加条件",
+        "assignment": "赋值 {{index}}",
+        "addAssignment": "添加赋值",
         "startNode": "开始节点",
         "endNode": "结束节点",
         "stateTitle": "设置全局变量",
@@ -2004,7 +2013,7 @@
         "invalidSchema": "JSON Schema 无效：{{error}}",
         "noteContent": "备注内容",
         "noteContentPlaceholder": "输入备注内容",
-        "stateIntro": "为工作流的状态变量赋值",
+        "stateIntro": "为工作流的状态变量赋值。",
         "assignValue": "赋值",
         "celHint": "使用 Common Expression Language 编写自定义表达式。直接用名称引用状态（<code>query</code>），而不是 <code>{{braced}}</code>。",
         "learnMore": "了解更多",
@@ -2015,6 +2024,8 @@
         "caseNamePlaceholder": "分支名称（可选）",
         "variablePlaceholder": "变量",
         "valuePlaceholder": "值",
+        "operator": "运算符",
+        "examplePlaceholder": "例如 {{example}}",
         "opContains": "包含",
         "opStartsWith": "开头为",
         "conditionPlaceholder": "输入条件，例如 query.contains(\"refund\")",
@@ -2026,7 +2037,11 @@
         "cannotDeleteStart": "无法删除开始节点",
         "deleteNode": "删除节点",
         "deleteConfirm": "确定要删除“{{name}}”吗？",
-        "deleteConfirmUnnamed": "确定要删除此工作流智能体吗？"
+        "deleteConfirmUnnamed": "确定要删除此工作流智能体吗？",
+        "detailsTitle": "工作流详情",
+        "detailsDescription": "显示在代理卡片上的名称、描述和图片。",
+        "unsavedChanges": "未保存的更改",
+        "editDetailsMenu": "编辑详情"
       },
       "validation": {
         "nameRequired": "工作流名称为必填项",
@@ -2119,7 +2134,10 @@
         "searchPlaceholder": "搜索变量...",
         "empty": "未找到变量",
         "addContext": "添加上下文"
-      }
+      },
+      "zoomIn": "放大",
+      "zoomOut": "缩小",
+      "fitView": "适应视图"
     },
     "typeModal": {
       "title": "创建新智能体",