refactor(webui): adopt semantic workspace actions

pyproject.toml

@@ -4,15 +4,15 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "govoplan-workflow"
-version = "0.1.15"
+version = "0.1.18"
 description = "Optional visual authoring and inspection workspace for GovOPlaN Workflow Engine."
 readme = "README.md"
 requires-python = ">=3.12"
 license = "AGPL-3.0-or-later"
 authors = [{ name = "GovOPlaN" }]
 dependencies = [
-  "govoplan-core>=0.1.15",
-  "govoplan-workflow-engine>=0.1.15",
+  "govoplan-core>=0.1.18",
+  "govoplan-workflow-engine>=0.1.18",
 ]
 
 [tool.setuptools.packages.find]

src/govoplan_workflow/__init__.py

@@ -1,3 +1,3 @@
 """Optional GovOPlaN Workflow editor and compatibility package."""
 
-__version__ = "0.1.15"
+__version__ = "0.1.18"

src/govoplan_workflow/backend/manifest.py

@@ -9,6 +9,7 @@ from govoplan_core.core.modules import (
     ModuleInterfaceRequirement,
     ModuleManifest,
     NavItem,
+    ProductAreaContribution,
     ViewSurface,
 )
 from govoplan_core.core.provider_governance import declared_module_architecture
@@ -24,7 +25,7 @@ from govoplan_workflow_engine.backend.manifest import (
 
 MODULE_ID = "workflow"
 MODULE_NAME = "Workflow"
-MODULE_VERSION = "0.1.15"
+MODULE_VERSION = "0.1.18"
 
 
 manifest = ModuleManifest(
@@ -81,6 +82,17 @@ manifest = ModuleManifest(
                 order=74,
             ),
         ),
+        product_areas=(
+            ProductAreaContribution(
+                id="work",
+                module_id=MODULE_ID,
+                label="i18n:govoplan-core.product_area.work",
+                icon="list-checks",
+                description="i18n:govoplan-core.product_area.work_description",
+                surface_ids=("workflow.nav.workflow", "workflow.route.workflow"),
+                order=10,
+            ),
+        ),
         view_surfaces=(
             ViewSurface(
                 id="workflow.widget.open-work",

webui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govoplan/workflow-webui",
-  "version": "0.1.15",
+  "version": "0.1.18",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
@@ -17,7 +17,7 @@
     "test:interface-pattern": "node scripts/test-interface-pattern.mjs"
   },
   "peerDependencies": {
-    "@govoplan/core-webui": "^0.1.15",
+    "@govoplan/core-webui": "^0.1.18",
     "@xyflow/react": "^12.11.2",
     "lucide-react": "^1.23.0",
     "react": ">=19.2.7 <20",

webui/src/features/workflow/WorkflowCanvas.tsx

@@ -15,6 +15,7 @@ import {
   type Edge,
   type ReactFlowInstance
 } from "@xyflow/react";
+import { StatePanel } from "@govoplan/core-webui";
 import { definitionConnectionError } from "@govoplan/core-webui/definition-graph";
 import type {
   WorkflowDiagnostic,
@@ -211,7 +212,7 @@ export default function WorkflowCanvas({
 
   return (
     <div
-      className="workflow-canvas"
+      className="definition-graph-canvas workflow-canvas"
       onDragOver={(event) => {
         if (
           event.dataTransfer.types.includes(
@@ -320,7 +321,7 @@ export default function WorkflowCanvas({
         <Controls showInteractive={false} />
       </ReactFlow>
       {!graph.nodes.length ? (
-        <div className="workflow-canvas-empty">Drop a start node here</div>
+        <StatePanel className="definition-graph-canvas-empty" size="fill" description="Drop a start node here" />
       ) : null}
     </div>
   );

webui/src/features/workflow/WorkflowInspector.tsx

@@ -1,10 +1,12 @@
 import { useEffect, useMemo, useState } from "react";
 import { Trash2 } from "lucide-react";
 import {
+  ActionToolbar,
   Button,
   DismissibleAlert,
   FormField,
   ReferenceMultiSelect,
+  StatePanel,
   useViewSurfaces,
   type ReferenceOptionProvider
 } from "@govoplan/core-webui";
@@ -87,7 +89,7 @@ export default function WorkflowInspector({
     };
     return (
       <aside className="workflow-inspector" aria-label="Flow inspector">
-        <div className="workflow-panel-heading">
+        <ActionToolbar surface="section-header" className="workflow-panel-heading">
           <span>
             <strong>Flow</strong>
             <small>{edge.type.replace(/^bpmn\./, "")}</small>
@@ -102,7 +104,7 @@ export default function WorkflowInspector({
           >
             <Trash2 size={16} />
           </Button>
-        </div>
+        </ActionToolbar>
         <div className="workflow-inspector-fields">
           <FormField label="Flow type">
             <select
@@ -184,8 +186,8 @@ export default function WorkflowInspector({
   if (!node) {
     return (
       <aside className="workflow-inspector" aria-label="Node inspector">
-        <div className="workflow-panel-heading"><strong>Inspector</strong></div>
-        <div className="workflow-inspector-empty">No node selected</div>
+        <ActionToolbar surface="section-header" className="workflow-panel-heading"><strong>Inspector</strong></ActionToolbar>
+        <StatePanel size="compact" description="No node selected" />
       </aside>
     );
   }
@@ -200,7 +202,7 @@ export default function WorkflowInspector({
 
   return (
     <aside className="workflow-inspector" aria-label="Node inspector">
-      <div className="workflow-panel-heading">
+      <ActionToolbar surface="section-header" className="workflow-panel-heading">
         <span>
           <strong>Inspector</strong>
           <small>{definition?.label ?? node.type}</small>
@@ -215,7 +217,7 @@ export default function WorkflowInspector({
         >
           <Trash2 size={16} />
         </Button>
-      </div>
+      </ActionToolbar>
       <div className="workflow-inspector-fields">
         {error ? (
           <DismissibleAlert tone="danger" resetKey={error}>

webui/src/features/workflow/WorkflowNode.tsx

@@ -48,6 +48,7 @@ import {
   type Node,
   type NodeProps
 } from "@xyflow/react";
+import { DefinitionNodeIcon } from "@govoplan/core-webui";
 import type { WorkflowNodeType } from "../../api/workflow";
 
 export type WorkflowFlowNodeData = {
@@ -127,13 +128,13 @@ export default function WorkflowNode({
           id={port.id}
           type="target"
           position={Position.Left}
-          className="workflow-node-handle"
+          className="definition-node-handle"
           style={{ top: portPosition(index, inputPorts.length) }}
           isConnectable={isConnectable}
           title={port.label}
         />
       ))}
-      <span className="workflow-node-icon"><Icon size={17} /></span>
+      <DefinitionNodeIcon className="workflow-node-icon"><Icon size={17} /></DefinitionNodeIcon>
       <span className="workflow-node-copy">
         <strong>{data.label}</strong>
         <small>{data.definition.label}</small>
@@ -144,7 +145,7 @@ export default function WorkflowNode({
           id={port.id}
           type="source"
           position={Position.Right}
-          className="workflow-node-handle"
+          className="definition-node-handle"
           style={{ top: portPosition(index, outputPorts.length) }}
           isConnectable={isConnectable}
           title={port.label}

webui/src/features/workflow/WorkflowPage.tsx

@@ -14,7 +14,6 @@ import {
   GitFork,
   ListChecks,
   Plus,
-  RefreshCw,
   RotateCcw,
   Save,
   Settings2,
@@ -23,18 +22,32 @@ import {
 } from "lucide-react";
 import { ReactFlowProvider } from "@xyflow/react";
 import { useSearchParams } from "react-router";
-import {
+import { ActionToolbar,
   Button,
   ConfirmDialog,
+  ContentGrid,
+  ContentSection,
   Dialog,
   DocumentationHelpLink,
   DismissibleAlert,
+  DefinitionPalette,
+  DefinitionPaletteGroup,
+  DefinitionPaletteItem,
+  FilterBar,
+  FloatingStatus,
   FormField,
   IconButton,
   LoadingFrame,
   ReferenceSelect,
+  SelectionList,
+  SelectionListItem,
+  SelectionListItemContent,
+  StatePanel,
   StatusBadge,
   ToggleSwitch,
+  WorkspaceActionBar,
+  WorkspaceFrame,
+  WorkspaceLayout,
   hasScope,
   isApiError,
   useUnsavedChanges,
@@ -98,7 +111,7 @@ export default function WorkflowPage({
   settings: ApiSettings;
   auth: AuthInfo;
 }) {
-  const { requestNavigation } = useUnsavedChanges();
+  const { requestDiscard, requestNavigation } = useUnsavedChanges();
   const [searchParams, setSearchParams] = useSearchParams();
   const requestedDefinitionId = searchParams.get("definition");
   const requestedRunId = searchParams.get("run");
@@ -582,23 +595,24 @@ export default function WorkflowPage({
   };
 
   return (
-    <main className="workflow-page">
-      <div className="workflow-shell">
-        <aside className="workflow-definition-panel">
-          <div className="workflow-panel-toolbar">
+    <WorkspaceFrame as="main" height="viewport" surface="plain" className="workflow-page" label="Workflow workspace">
+      <WorkspaceLayout
+        variant="split"
+        primarySize="compact"
+        surface="contained"
+        primaryScrollable={false}
+        contentScrollable={false}
+        primaryLabel="Workflows"
+        contentLabel="Workflow editor"
+        contentClassName="workflow-workspace"
+        primary={<>
+          <WorkspaceActionBar
+            scope="collection-pane"
+            variant="collection"
+            refreshable
+            reloadAction={{ onReload: () => void reload(draft?.id), loading: loading || working }}
+            contextActions={<>
               <strong>Workflows</strong>
-            <span className="workflow-toolbar-actions">
-              <DocumentationHelpLink
-                reference={{ topicId: "workflow.editor", documentationType: "user" }}
-                label="Open Workflow documentation"
-              />
-              <IconButton
-                label="Refresh"
-                icon={<RefreshCw size={16} />}
-                variant="ghost"
-                onClick={() => void reload(draft?.id)}
-                disabled={loading || working}
-              />
               {hasScope(auth, "workflow:instance:admin") ? (
                 <IconButton
                   label="Reconcile module standards"
@@ -608,17 +622,21 @@ export default function WorkflowPage({
                   disabled={loading || working}
                 />
               ) : null}
-              <IconButton
+            </>}
+            helpAction={<DocumentationHelpLink
+                reference={{ topicId: "workflow.editor", documentationType: "user" }}
+                label="Open Workflow documentation"
+            />}
+            createAction={<IconButton
                 label="New workflow"
                 icon={<Plus size={17} />}
                 variant="primary"
                 onClick={createNew}
                 disabled={!canWrite}
                 disabledReason={!canWrite ? "Workflow definition write permission is required." : undefined}
+            />}
           />
-            </span>
-          </div>
-          <div className="workflow-definition-search">
+          <FilterBar surface="panel">
             <input
               type="search"
               value={search}
@@ -626,53 +644,48 @@ export default function WorkflowPage({
               placeholder="Search workflows"
               aria-label="Search workflows"
             />
-          </div>
+          </FilterBar>
           <LoadingFrame loading={loading} className="workflow-definition-list-frame">
-            <div className="workflow-definition-list">
+            <SelectionList variant="navigation" label="Workflows">
               {visibleDefinitions.map((definition) => (
-                <button
+                <SelectionListItem
                   key={definition.id}
-                  type="button"
-                  className={definition.id === draft?.id ? "is-selected" : ""}
+                  selected={definition.id === draft?.id}
                   onClick={() => selectDefinition(definition)}
                 >
-                  <span>
-                    <strong>{definition.name}</strong>
-                    <small>
-                      {definition.key} · revision {definition.current_revision}
-                    </small>
-                    <small>
-                      {definition.governance.scope_type} · {definition.governance.definition_kind}
-                    </small>
-                    {definition.standard ? (
-                      <small>
-                        {definition.standard.kind === "baseline"
-                          ? `Standard · ${definition.standard.origin_module_id}`
-                          : `Override · ${definition.standard.origin_module_id}`}
-                        {definition.standard.update_available ? " · update available" : ""}
-                      </small>
-                    ) : null}
-                  </span>
+                  <SelectionListItemContent
+                    title={definition.name}
+                    description={[
+                      definition.key,
+                      `revision ${definition.current_revision}`,
+                      definition.governance.scope_type,
+                      definition.governance.definition_kind,
+                      definition.standard
+                        ? `${definition.standard.kind === "baseline" ? "Standard" : "Override"} · ${definition.standard.origin_module_id}${definition.standard.update_available ? " · update available" : ""}`
+                        : ""
+                    ].filter(Boolean).join(" · ")}
+                  />
                   <StatusBadge
                     status={definition.status}
                     label={definition.status}
                   />
-                </button>
+                </SelectionListItem>
               ))}
               {!visibleDefinitions.length ? (
-                <div className="workflow-definition-empty">
-                  No workflow definitions
-                </div>
+                <StatePanel size="compact" description="No workflow definitions" />
               ) : null}
-            </div>
+            </SelectionList>
           </LoadingFrame>
-        </aside>
-
-        <section className="workflow-workspace">
+        </>}
+      >
           {draft && displayedGraph ? (
             <>
-              <div className="workflow-workspace-toolbar">
-                <span className="workflow-identity-fields">
+              <WorkspaceActionBar
+                scope="editor-pane"
+                variant="editor"
+                state={working ? "saving" : dirty && !draft.name.trim() ? "invalid" : dirty ? "dirty" : "clean"}
+                className="workflow-workspace-toolbar"
+                contextActions={<span className="workflow-identity-fields">
                   <input
                     className="workflow-name-input"
                     value={draft.name}
@@ -694,8 +707,8 @@ export default function WorkflowPage({
                     placeholder="Description"
                     aria-label="Workflow description"
                   />
-                </span>
-                <span className="workflow-command-bar">
+                </span>}
+                primaryActions={<span className="workflow-command-bar">
                   {draft.id ? (
                     <select
                       className="workflow-revision-select"
@@ -839,16 +852,8 @@ export default function WorkflowPage({
                       <CheckCircle2 size={16} /> Activate
                     </Button>
                   ) : null}
-                  <Button
-                    variant="primary"
-                    onClick={() => void saveDraft()}
-                    disabled={
-                      !canEdit || !dirty || working || readOnly
-                    }
-                  >
-                    <Save size={16} /> Save
-                  </Button>
-                  {draft.id && draft.standard?.kind !== "baseline" ? (
+                </span>}
+                destructiveActions={draft.id && draft.standard?.kind !== "baseline" ? (
                   <IconButton
                     label="Delete workflow"
                     icon={<Trash2 size={16} />}
@@ -856,9 +861,17 @@ export default function WorkflowPage({
                     onClick={() => setDeleteOpen(true)}
                     disabled={!canEdit || working}
                   />
-                  ) : null}
-                </span>
-              </div>
+                ) : undefined}
+                discardAction={{
+                  label: <><RotateCcw size={16} /> Discard</>,
+                  onClick: () => requestDiscard(() => void reload(draft.id))
+                }}
+                saveAction={{
+                  label: <><Save size={16} /> Save</>,
+                  onClick: () => void saveDraft(),
+                  disabled: !canEdit || readOnly
+                }}
+              />
               <div className="workflow-alerts">
                 {error ? (
                   <DismissibleAlert tone="danger" resetKey={error}>
@@ -872,21 +885,14 @@ export default function WorkflowPage({
                 ) : null}
               </div>
               <div className="workflow-editor">
-                  <aside className="workflow-palette">
-                    <div className="workflow-panel-heading">
-                      <span>
-                        <strong>Node library</strong>
-                        <small>Drag nodes onto the canvas</small>
-                      </span>
-                    </div>
-                    <div className="workflow-palette-items">
+                  <DefinitionPalette label="Node library" description="Drag nodes onto the canvas">
                       {paletteGroups.map((group) => (
-                        <section key={group.category} className="workflow-palette-group">
-                          <h3>{group.label}</h3>
+                        <DefinitionPaletteGroup key={group.category} label={group.label}>
                           {group.nodes.map((nodeType) => (
-                            <button
+                            <DefinitionPaletteItem
                               key={nodeType.type}
-                              type="button"
+                              icon={<GitFork size={16} />}
+                              label={nodeType.label}
                               draggable={!graphReadOnly}
                               disabled={graphReadOnly}
                               onDragStart={(event) =>
@@ -894,17 +900,12 @@ export default function WorkflowPage({
                               }
                               onClick={() => addNodeFromPalette(nodeType.type)}
                               title={nodeType.description}
-                            >
-                              <GitFork size={16} />
-                              <span>{nodeType.label}</span>
-                              <Plus size={13} className="workflow-palette-add" />
-                            </button>
+                            />
                           ))}
-                        </section>
+                        </DefinitionPaletteGroup>
                       ))}
-                    </div>
-                  </aside>
-                  <div className="workflow-editor-surface">
+                  </DefinitionPalette>
+                  <div className="definition-editor-surface workflow-editor-surface">
                     <ReactFlowProvider>
                       <WorkflowCanvas
                         graph={displayedGraph}
@@ -936,7 +937,7 @@ export default function WorkflowPage({
                     />
                     {diagnostics.length ? (
                       <div className="workflow-diagnostics">
-                        <div className="workflow-panel-heading">
+                        <ActionToolbar surface="section-header" className="workflow-panel-heading">
                           <strong>Diagnostics</strong>
                           <StatusBadge
                             status={
@@ -946,7 +947,7 @@ export default function WorkflowPage({
                             }
                             label={String(diagnostics.length)}
                           />
-                        </div>
+                        </ActionToolbar>
                         <div>
                           {diagnostics.map((item, index) => (
                             <button
@@ -965,25 +966,21 @@ export default function WorkflowPage({
                     ) : null}
                   </div>
                 </div>
-              {working ? (
-                <div className="workflow-working-indicator" role="status">
-                  Working...
-                </div>
-              ) : null}
+              {working ? <FloatingStatus>Working...</FloatingStatus> : null}
             </>
           ) : (
-            <div className="workflow-workspace-empty">
-              <GitFork size={34} />
-              <strong>No workflow selected</strong>
-              {canWrite ? (
+            <StatePanel
+              size="fill"
+              icon={<GitFork size={34} />}
+              title="No workflow selected"
+              actions={canWrite ? (
                 <Button variant="primary" onClick={createNew}>
                   <Plus size={16} /> New workflow
                 </Button>
-              ) : null}
-            </div>
+              ) : undefined}
+            />
           )}
-        </section>
-      </div>
+      </WorkspaceLayout>
       <ConfirmDialog
         open={deleteOpen}
         title="Delete workflow"
@@ -1052,7 +1049,7 @@ export default function WorkflowPage({
           }
         }}
       />
-    </main>
+    </WorkspaceFrame>
   );
 }
 
@@ -1336,7 +1333,7 @@ function WorkflowDefinitionSettingsDialog({
               ))}
             </select>
           </FormField>
-          <div className="workflow-definition-toggles">
+          <ContentGrid columns={2} gap="default" collapseAt="narrow">
             <ToggleSwitch
               label="Visible to lower scopes"
               checked={draft.inheritToLowerScopes}
@@ -1361,7 +1358,7 @@ function WorkflowDefinitionSettingsDialog({
               disabled={!editable || draft.executionMode === "guided"}
               onChange={(value) => onChange({ allowAutomation: value })}
             />
-          </div>
+          </ContentGrid>
           {draft.governance?.automation_runtime_reason ? (
             <DismissibleAlert
               tone="warning"
@@ -1371,7 +1368,7 @@ function WorkflowDefinitionSettingsDialog({
             </DismissibleAlert>
           ) : null}
           {draft.governance?.derived_from_definition_id ? (
-            <section className="workflow-provenance">
+            <ContentSection spacing="none" surface="subtle" density="compact" layout="stack" className="workflow-provenance">
               <strong>Derived from</strong>
               <span>
                 {draft.governance.derived_from_definition_id}
@@ -1379,10 +1376,10 @@ function WorkflowDefinitionSettingsDialog({
                 {draft.governance.derived_from_revision}
               </span>
               <code>{draft.governance.derived_from_hash}</code>
-            </section>
+            </ContentSection>
           ) : null}
           {provenance.length ? (
-            <section className="workflow-provenance">
+            <ContentSection spacing="none" surface="subtle" density="compact" layout="stack" className="workflow-provenance">
               <strong>Effective Policy path</strong>
               {provenance.map((item, index) => (
                 <span key={`${String(item.path ?? item.scope_type)}-${index}`}>
@@ -1392,7 +1389,7 @@ function WorkflowDefinitionSettingsDialog({
               {!editable && draft.governance?.actions.edit?.reason ? (
                 <small>{draft.governance.actions.edit.reason}</small>
               ) : null}
-            </section>
+            </ContentSection>
           ) : null}
         </div>
       ) : null}

webui/src/features/workflow/WorkflowRunsDialog.tsx

@@ -15,11 +15,12 @@ import {
   RotateCcw,
   XCircle
 } from "lucide-react";
-import {
+import { ActionToolbar,
   Button,
   ConfirmDialog,
   Dialog,
   DismissibleAlert,
+  ContentGrid,
   FormField,
   IconButton,
   LoadingFrame,
@@ -299,7 +300,7 @@ export default function WorkflowRunsDialog({
         onClose={close}
         footer={<Button onClick={close}>Close</Button>}
       >
-        <div className="workflow-runs-toolbar">
+        <ActionToolbar className="workflow-runs-toolbar">
           <span>
             <strong>Workflow instances</strong>
             <small>Revision-pinned runs and human handoffs</small>
@@ -325,7 +326,7 @@ export default function WorkflowRunsDialog({
               <Play size={16} /> Start
             </Button>
           </span>
-        </div>
+        </ActionToolbar>
         {error ? (
           <DismissibleAlert tone="danger" resetKey={error}>
             {error}
@@ -422,7 +423,7 @@ export default function WorkflowRunsDialog({
                         </a>
                       ) : null}
                       {allowedActions.some((action) => action !== "cancel") ? (
-                        <div className="workflow-run-action-form">
+                        <ContentGrid columns={2} gap="compact" collapseAt="narrow" className="workflow-run-action-form">
                           <FormField label="Comment">
                             <textarea
                               value={comment}
@@ -466,7 +467,7 @@ export default function WorkflowRunsDialog({
                                 </Button>
                               ))}
                           </div>
-                        </div>
+                        </ContentGrid>
                       ) : null}
                     </section>
                   ) : null}

webui/src/styles/workflow.css

@@ -1,14 +1,3 @@
-.workflow-page {
-  position: relative;
-  height: calc(100vh - 115px);
-  min-width: 0;
-  min-height: 0;
-  padding: 0;
-  overflow: hidden;
-  color: var(--text);
-  background: var(--bg);
-}
-
 .workflow-definition-dialog {
   width: min(620px, calc(100vw - 32px));
 }
@@ -109,21 +98,6 @@
   width: 100%;
 }
 
-.workflow-definition-toggles {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px 18px;
-}
-
-.workflow-provenance {
-  display: grid;
-  gap: 6px;
-  padding: 10px;
-  border: var(--border-line);
-  border-radius: var(--radius-sm);
-  background: var(--panel-soft);
-}
-
 .workflow-provenance span,
 .workflow-provenance small {
   color: var(--muted);
@@ -136,34 +110,8 @@
   text-overflow: ellipsis;
 }
 
-@media (max-width: 640px) {
-  .workflow-definition-toggles {
-    grid-template-columns: 1fr;
-  }
-}
-
-.workflow-page *,
-.workflow-page *::before,
-.workflow-page *::after {
-  box-sizing: border-box;
-}
-
-.workflow-shell {
-  display: grid;
-  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-  border: var(--border-line);
-  background: var(--panel);
-}
-
-.workflow-definition-panel,
 .workflow-workspace,
 .workflow-editor,
-.workflow-editor-surface,
 .workflow-canvas,
 .workflow-definition-list-frame,
 .workflow-inspector-column {
@@ -171,31 +119,6 @@
   min-height: 0;
 }
 
-.workflow-definition-panel {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  border-right: var(--border-line);
-  background: var(--panel-soft);
-}
-
-.workflow-panel-toolbar,
-.workflow-workspace-toolbar,
-.workflow-panel-heading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  flex: 0 0 auto;
-  border-bottom: var(--border-line);
-  background: var(--panel-header);
-}
-
-.workflow-panel-toolbar {
-  min-height: 52px;
-  padding: 8px 10px 8px 14px;
-}
-
 .workflow-toolbar-actions,
 .workflow-command-bar,
 .workflow-identity-fields {
@@ -204,98 +127,12 @@
   gap: 7px;
 }
 
-.workflow-definition-search {
-  padding: 10px;
-  border-bottom: var(--border-line);
-}
-
-.workflow-definition-search input {
-  min-height: 34px;
-  padding: 7px 9px;
-}
-
 .workflow-definition-list-frame {
   flex: 1 1 auto;
   overflow: hidden;
 }
-
-.workflow-definition-list {
-  height: 100%;
-  overflow: auto;
-  padding: 6px;
-}
-
-.workflow-definition-list > button {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  min-height: 56px;
-  border: 0;
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--text);
-  cursor: pointer;
-  padding: 8px 9px;
-  text-align: left;
-}
-
-.workflow-definition-list > button:hover,
-.workflow-definition-list > button:focus-visible {
-  background: var(--primary-soft);
-  outline: none;
-}
-
-.workflow-definition-list > button.is-selected {
-  background: var(--primary-soft-strong);
-  box-shadow: inset 3px 0 0 var(--accent);
-}
-
-.workflow-definition-list > button > span:first-child {
-  min-width: 0;
-}
-
-.workflow-definition-list strong,
-.workflow-definition-list small {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.workflow-definition-list strong {
-  color: var(--text-strong);
-  font-size: 13px;
-}
-
-.workflow-definition-list small {
-  margin-top: 4px;
-  color: var(--muted);
-  font-size: 11px;
-}
-
-.workflow-definition-empty,
-.workflow-inspector-empty {
-  display: grid;
-  min-height: 100px;
-  place-items: center;
-  color: var(--muted);
-  font-size: 13px;
-  text-align: center;
-}
-
-.workflow-workspace {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: var(--bg);
-}
-
 .workflow-workspace-toolbar {
-  min-height: 58px;
-  padding: 8px 10px;
+  min-width: 0;
 }
 
 .workflow-identity-fields {
@@ -364,17 +201,12 @@
   display: none;
 }
 
-.workflow-palette,
 .workflow-inspector,
 .workflow-inspector-column {
   overflow: hidden;
   background: var(--panel-soft);
 }
 
-.workflow-palette {
-  border-right: var(--border-line);
-}
-
 .workflow-inspector-column {
   display: flex;
   flex-direction: column;
@@ -388,11 +220,6 @@
   flex-direction: column;
 }
 
-.workflow-panel-heading {
-  min-height: 44px;
-  padding: 8px 10px 8px 12px;
-}
-
 .workflow-panel-heading > span {
   min-width: 0;
 }
@@ -416,132 +243,6 @@
   white-space: nowrap;
 }
 
-.workflow-palette-items {
-  display: grid;
-  grid-auto-rows: max-content;
-  align-content: start;
-  height: calc(100% - 44px);
-  gap: 4px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  padding: 8px;
-  scrollbar-gutter: stable;
-}
-
-.workflow-palette-group {
-  display: grid;
-  grid-auto-rows: max-content;
-  align-content: start;
-  gap: 2px;
-}
-
-.workflow-palette-group + .workflow-palette-group {
-  margin-top: 6px;
-  padding-top: 8px;
-  border-top: var(--border-line);
-}
-
-.workflow-palette-group h3 {
-  margin: 0;
-  color: var(--muted);
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0;
-  padding: 3px 8px;
-  text-transform: uppercase;
-}
-
-.workflow-palette-items button {
-  display: grid;
-  grid-template-columns: 18px minmax(0, 1fr) 14px;
-  align-items: center;
-  gap: 7px;
-  min-height: 38px;
-  border: 0;
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--text);
-  cursor: grab;
-  font: inherit;
-  font-size: 12px;
-  padding: 7px 8px;
-  text-align: left;
-}
-
-.workflow-palette-items button:hover:not(:disabled),
-.workflow-palette-items button:focus-visible:not(:disabled) {
-  background: var(--primary-soft);
-  color: var(--text-strong);
-  outline: none;
-}
-
-.workflow-palette-items button:disabled {
-  cursor: default;
-  opacity: .42;
-}
-
-.workflow-palette-add {
-  color: var(--accent);
-}
-
-.workflow-editor-surface {
-  position: relative;
-  overflow: hidden;
-  background: var(--bg);
-}
-
-.workflow-canvas {
-  position: absolute;
-  inset: 0;
-}
-
-.workflow-canvas .react-flow {
-  background: var(--bg);
-}
-
-.workflow-canvas .react-flow__background {
-  color: var(--line-dark);
-}
-
-.workflow-canvas .react-flow__controls,
-.workflow-canvas .react-flow__minimap {
-  overflow: hidden;
-  border: var(--border-line);
-  border-radius: var(--radius-sm);
-  background: var(--panel);
-  box-shadow: var(--shadow-xs);
-}
-
-.workflow-canvas .react-flow__controls-button {
-  border-bottom: var(--border-line);
-  background: var(--panel);
-  color: var(--text);
-}
-
-.workflow-canvas .react-flow__minimap-mask {
-  fill: color-mix(in srgb, var(--bg) 76%, transparent);
-}
-
-.workflow-canvas .react-flow__edge-path {
-  stroke: var(--line-dark);
-  stroke-width: 2;
-}
-
-.workflow-canvas .react-flow__edge.selected .react-flow__edge-path,
-.workflow-canvas .react-flow__edge:hover .react-flow__edge-path {
-  stroke: var(--accent);
-  stroke-width: 3;
-}
-
-.workflow-canvas-empty {
-  position: absolute;
-  inset: 0;
-  display: grid;
-  place-items: center;
-  color: var(--muted);
-  pointer-events: none;
-}
-
 .workflow-node {
   position: relative;
   display: flex;
@@ -552,7 +253,7 @@
   min-height: 56px;
   box-sizing: border-box;
   border: 1px solid var(--line-dark);
-  border-radius: 6px;
+  border-radius: var(--radius-compact);
   background: var(--panel);
   box-shadow: var(--shadow-xs);
   padding: 8px 10px;
@@ -606,7 +307,7 @@
   height: 42px;
   flex-basis: 42px;
   border: 2px solid var(--text-strong);
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   background: var(--panel);
 }
 
@@ -628,7 +329,7 @@
   height: 42px;
   flex-basis: 42px;
   border: 2px solid var(--text-strong);
-  border-radius: 2px;
+  border-radius: var(--radius-hairline);
   background: var(--panel);
   transform: rotate(45deg);
 }
@@ -671,17 +372,6 @@
   border-color: var(--danger-text);
 }
 
-.workflow-node-icon {
-  display: grid;
-  width: 28px;
-  height: 28px;
-  flex: 0 0 28px;
-  place-items: center;
-  border-radius: 5px;
-  background: var(--panel-soft);
-  color: var(--text-strong);
-}
-
 .workflow-node-copy {
   min-width: 0;
   flex: 1 1 auto;
@@ -706,21 +396,6 @@
   font-size: 10px;
 }
 
-.workflow-node-handle {
-  width: 13px;
-  height: 13px;
-  border: 3px solid var(--panel);
-  background: var(--line-dark);
-}
-
-.workflow-node-handle:hover,
-.workflow-node-handle.connectingto,
-.workflow-node-handle.valid {
-  width: 17px;
-  height: 17px;
-  background: var(--accent);
-}
-
 .workflow-edge-bpmn-messageFlow .react-flow__edge-path,
 .workflow-edge-bpmn-association .react-flow__edge-path,
 .workflow-edge-bpmn-conversationLink .react-flow__edge-path {
@@ -821,39 +496,6 @@
   font-size: 9px;
 }
 
-.workflow-workspace-empty {
-  display: grid;
-  height: 100%;
-  place-content: center;
-  justify-items: center;
-  gap: 12px;
-  color: var(--muted);
-}
-
-.workflow-workspace-empty strong {
-  color: var(--text-strong);
-}
-
-.workflow-workspace-empty .btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.workflow-working-indicator {
-  position: absolute;
-  z-index: 20;
-  right: 12px;
-  bottom: 10px;
-  border: var(--border-line-dark);
-  border-radius: var(--radius-sm);
-  background: var(--panel);
-  box-shadow: var(--shadow-popover);
-  color: var(--text-strong);
-  font-size: 12px;
-  padding: 7px 10px;
-}
-
 .workflow-runs-dialog {
   width: min(1120px, calc(100vw - 32px));
   height: min(760px, calc(100vh - 32px));
@@ -1041,12 +683,6 @@
   font-size: 12px;
 }
 
-.workflow-run-action-form {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
-}
-
 .workflow-run-action-form textarea {
   width: 100%;
   resize: vertical;
@@ -1106,11 +742,7 @@
   text-align: center;
 }
 
-@media (max-width: 1180px) {
-  .workflow-shell {
-    grid-template-columns: 240px minmax(0, 1fr);
-  }
-
+@media (max-width: 1280px) {
   .workflow-workspace-toolbar {
     align-items: stretch;
     flex-direction: column;
@@ -1127,10 +759,6 @@
 }
 
 @media (max-width: 900px) {
-  .workflow-shell {
-    grid-template-columns: 210px minmax(0, 1fr);
-  }
-
   .workflow-editor {
     grid-template-columns: 140px minmax(0, 1fr);
     grid-template-rows: minmax(0, 1fr) minmax(180px, 34%);
@@ -1149,16 +777,6 @@
     height: calc(100vh - 94px);
   }
 
-  .workflow-shell {
-    grid-template-columns: 1fr;
-    grid-template-rows: minmax(150px, 24%) minmax(0, 1fr);
-  }
-
-  .workflow-definition-panel {
-    border-right: 0;
-    border-bottom: var(--border-line);
-  }
-
   .workflow-identity-fields,
   .workflow-command-bar {
     flex-wrap: wrap;
@@ -1175,33 +793,6 @@
     grid-template-rows: auto minmax(0, 1fr) minmax(180px, 32%);
   }
 
-  .workflow-palette {
-    border-right: 0;
-    border-bottom: var(--border-line);
-  }
-
-  .workflow-palette .workflow-panel-heading {
-    display: none;
-  }
-
-  .workflow-palette-items {
-    display: flex;
-    overflow-x: auto;
-  }
-
-  .workflow-palette-group {
-    display: flex;
-    flex: 0 0 auto;
-  }
-
-  .workflow-palette-group h3 {
-    display: none;
-  }
-
-  .workflow-palette-items button {
-    min-width: 128px;
-  }
-
   .workflow-runs-layout {
     grid-template-columns: 1fr;
     grid-template-rows: minmax(120px, 28%) minmax(0, 1fr);
@@ -1212,10 +803,6 @@
     border-bottom: var(--border-line);
   }
 
-  .workflow-run-action-form {
-    grid-template-columns: 1fr;
-  }
-
   .workflow-run-history > div > span,
   .workflow-run-events > div > span {
     grid-template-columns: minmax(0, 1fr) auto;