From 6027e6dad5692634490eda67b31202754dbcdbb9 Mon Sep 17 00:00:00 2001
From: AlexTemirov <temiroff@gmail.com>
Date: Sun, 6 Sep 2026 11:54:34 -0700
Subject: [PATCH] Add visual Workflow App authoring and first-use guidance

---
 README.md                                   |  23 ++++-
 docs/operator-apps.md                       |  30 ++++++
 docs/walkthrough.md                         |  33 +++++--
 editor-server/server.py                     |  40 ++++++++
 editor/src/App.tsx                          |  18 +++-
 editor/src/api.ts                           |   2 +
 editor/src/appDesigner.test.ts              |  53 ++++++++++
 editor/src/appDesigner.ts                   | 101 ++++++++++++++++++++
 editor/src/components/AppDesignerDialog.css |  12 +++
 editor/src/components/AppDesignerDialog.tsx |  99 +++++++++++++++++++
 editor/src/components/NodePalette.tsx       |  16 ++--
 editor/src/components/PointCloudViewer.tsx  |  22 +++--
 editor/src/components/TemplateGallery.tsx   |  24 ++++-
 editor/src/store.ts                         |  13 +++
 tests/test_editor_app_designer.py           |  71 ++++++++++++++
 tests/test_editor_package_welcome.py        |  10 +-
 tests/test_editor_template_groups.py        |   4 +-
 17 files changed, 532 insertions(+), 39 deletions(-)
 create mode 100644 editor/src/appDesigner.test.ts
 create mode 100644 editor/src/appDesigner.ts
 create mode 100644 editor/src/components/AppDesignerDialog.css
 create mode 100644 editor/src/components/AppDesignerDialog.tsx
 create mode 100644 tests/test_editor_app_designer.py

diff --git a/README.md b/README.md
index bbbd069..267e726 100644
--- a/README.md
+++ b/README.md
@@ -56,7 +56,16 @@ cd Blacknode
 The launcher installs the local dependencies and opens
 `http://localhost:3000`.
 
-To try the graph first, follow the [Beginner Walkthrough](docs/walkthrough.md).
+In the welcome screen, choose **Open templates**, open **Text Pipeline**, and
+press **Run once** in the top bar. The **Output** node shows `Hello World`.
+Change a Text node's value and run again to see your own result.
+
+For a visual result, open **Generic Point Cloud Viewer** and press **Run once**
+to inspect the included colored point cloud in 3D. Both workflows run locally
+with the built-in nodes.
+
+Follow the [Beginner Walkthrough](docs/walkthrough.md) to save your work and
+choose the next task.
 
 ## Pair your first device
 
@@ -114,6 +123,18 @@ The optional robot-learning starter prepares collection, training, and
 simulation workflows as the Project gains the required data and artifacts. It
 never starts a physical or compute action automatically.
 
+## Develop your own App
+
+Build or customize a node workflow, press **Create App**, and choose the
+parameters, results, and run buttons your team needs. **Save & open App** turns
+that workflow into an operator interface. Switch back with **Edit workflow**
+to change its behavior, or use **File → Package App…** to share it.
+
+Projects organize your application alongside its robots, datasets, training
+runs, policies, and deployments. Start with a working workflow and extend it
+for your own task. See [Create your own App](docs/operator-apps.md#create-your-own-app)
+and [Guided Projects](docs/guided-projects.md).
+
 ## Add capabilities
 
 Blacknode core owns the graph, editor, runtime, replay, exports, package system,
diff --git a/docs/operator-apps.md b/docs/operator-apps.md
index 3df986b..1a4cb9e 100644
--- a/docs/operator-apps.md
+++ b/docs/operator-apps.md
@@ -8,6 +8,36 @@ Pressing a shortcut for a workflow with `metadata.operator_view` opens its App
 surface. **Edit workflow** reveals the nodes and connections, and the **App**
 control in the workflow tab bar returns to the operator surface.
 
+## Create your own App
+
+1. Build a workflow or open a template and run it to check its result.
+2. Press **Create App** beside the workflow tabs, or choose **File → Create App…**.
+3. Give the App a name. Use **+ Parameter** to expose a text or numeric task
+   setting, **+ Result** to display a workflow output, and **+ Run button** to
+   cook a chosen output. Choose each target from the workflow's available nodes.
+4. Give the controls labels your operators understand. Results can display
+   text, metrics, status, images, or a web viewer. A run button can run once or
+   start a live service; add a confirmation message when the action requires it.
+5. Press **Save & open App**. Configure the task and press your run button to
+   see the result. Saving and opening the App does not execute the workflow.
+6. Use **Edit workflow** to change the nodes and **App** to return to the
+   controls. Press **Save** after changing parameters. **Edit App** reopens
+   the designer to change the name or controls you added.
+7. Reopen the saved workflow from **Workflows** and select **App**, or use
+   **File → Package App…** to share an installable ZIP.
+
+Parameters connected to other nodes are configured by those upstream nodes;
+the designer offers unconnected text and numeric parameters. Credential fields
+stay in the existing credential configuration. Existing App sections, primary
+run targets, settings, and safety controls are retained when adding controls.
+Advanced field types and direct service actions use the operator-view contract
+below.
+
+For a robot-learning application, link the saved workflow to a Project. Expose
+its task, dataset, and training settings, then display its progress, results,
+and viewer outputs. [Guided Projects](guided-projects.md) describes the existing
+dataset, training, and policy workflow handoffs.
+
 ## Operator view contract
 
 An operator view is declared inside workflow metadata:
diff --git a/docs/walkthrough.md b/docs/walkthrough.md
index 76eaeff..e43ac69 100644
--- a/docs/walkthrough.md
+++ b/docs/walkthrough.md
@@ -1,8 +1,25 @@
 # Blacknode Beginner Walkthrough
 
-This is the click-by-click path for trying every main Blacknode feature. Start
-with the no-key steps first, then add NVIDIA NIM, MCP, or Docker when the local
-workflow is working.
+Start with a visible result, then choose the capabilities your task needs.
+
+## Your first result
+
+1. Run `.\start.bat` on Windows or `./start.sh` on macOS/Linux. The launcher
+   installs dependencies and opens the editor.
+2. Choose **Open templates** in the welcome screen.
+3. Open **Text Pipeline** under **Core**.
+4. Press **Run once** in the top bar. The **Output** node displays `Hello World`.
+5. Select a **Text** node, change its `value` in **Properties**, and press
+   **Run once** again. Your changed text appears in the result.
+
+For a 3D result, open **Generic Point Cloud Viewer** and press **Run once**.
+The viewer displays the included colored point cloud; right-drag to orbit and scroll
+to zoom. Both starting workflows use built-in nodes on your computer.
+
+Open **Workflows** to name and save your graph, or **Runs** to inspect a previous
+result. For a real robot, continue with [Pair your first device](../README.md#pair-your-first-device).
+For simulation, install the Newton package from **Packages** and open one of
+its templates. The sections below cover the rest of the editor as you need it.
 
 ## What You Need
 
@@ -59,12 +76,10 @@ What this does:
 First-run time depends on network speed and whether pip/npm packages are already
 cached. Later starts normally complete in less than one minute.
 
-On the first launch of this Blacknode workspace, a welcome message opens the
-**Packages** tab. Use it to install the official packages needed by robotics,
-ROS 2, vision, CUDA, dataset, and training templates. Choose **Continue with
-core graph** when you want to begin with built-in nodes. Blacknode records the
-choice in `.blacknode/onboarding.json`; Packages stays available in the left
-sidebar.
+On the first launch, choose **Open templates** to start with built-in nodes.
+Choose **Explore packages** when you already know which robotics, ROS 2, vision,
+CUDA, dataset, or training capabilities you need. Blacknode records the choice
+in `.blacknode/onboarding.json`; Packages stays available in the left sidebar.
 
 The welcome message opens only after the backend confirms that onboarding has
 not been completed. A backend startup or connectivity error keeps the current
diff --git a/editor-server/server.py b/editor-server/server.py
index 869ee87..c83a303 100644
--- a/editor-server/server.py
+++ b/editor-server/server.py
@@ -38,6 +38,7 @@
 from blacknode.learned import registry as learned_registry
 from blacknode.mcp import tools as mcp_tools
 from blacknode.node import _NODE_REGISTRY
+from blacknode.operator_views import OperatorViewValidationError, validate_operator_view
 from blacknode.nodes import ai as ai_nodes
 import blacknode.package_index as bn_package_index
 from blacknode.packages import MANIFEST_NAME as BN_MANIFEST_NAME
@@ -2757,6 +2758,45 @@ def update_workflow_requirements(req: UpdateWorkflowRequirementsReq):
     return {"metadata": dict(metadata)}
 
 
+@app.patch("/graph/operator-view")
+def update_workflow_operator_view(view: dict[str, Any]):
+    try:
+        validate_operator_view(view)
+    except OperatorViewValidationError as exc:
+        raise HTTPException(400, str(exc)) from exc
+    if not re.fullmatch(r"[a-z][a-z0-9_-]{0,63}", str(view.get("id") or "")):
+        raise HTTPException(400, "App ID must start with a lowercase letter and use letters, numbers, hyphens, or underscores.")
+    nodes = {node["id"]: node for node in get_graph()["nodes"]}
+
+    def check_references(value):
+        if isinstance(value, list):
+            for item in value:
+                check_references(item)
+        elif isinstance(value, dict):
+            if "node_id" in value:
+                node = nodes.get(value["node_id"])
+                if node is None:
+                    raise HTTPException(400, f"App references missing node: {value['node_id']}")
+                outputs = {"value"} if node["type"] == "Output" else set(node["outputs"])
+                if "port" in value and value["port"] not in outputs:
+                    raise HTTPException(400, f"App references missing output: {value['node_id']}.{value['port']}")
+                if "param" in value:
+                    definition = _NODE_REGISTRY.get(node["type"])
+                    inputs = (set(node["inputs"]) | set(node.get("params", {}))
+                              | set(getattr(definition, "_bn_inputs", []))
+                              | set(getattr(definition, "_bn_input_defaults", {})))
+                    if value["param"] not in inputs:
+                        raise HTTPException(400, f"App references missing parameter: {value['node_id']}.{value['param']}")
+            for key, item in value.items():
+                if key not in {"value", "payload"}:
+                    check_references(item)
+
+    check_references(view)
+    _session.metadata = {**_session.metadata, "operator_view": copy.deepcopy(view)}
+    _save()
+    return {"metadata": dict(_session.metadata)}
+
+
 @app.post("/nodes")
 def add_node(req: AddNodeReq):
     if req.type_name in _SUBGRAPH_NODE_TYPES:
diff --git a/editor/src/App.tsx b/editor/src/App.tsx
index 820cd5b..d779da3 100644
--- a/editor/src/App.tsx
+++ b/editor/src/App.tsx
@@ -41,6 +41,7 @@ const LocalFilePicker = lazy(() => import('./components/LocalFilePicker'))
 const WorkflowOperatorView = lazy(() => import('./components/WorkflowOperatorView'))
 const CustomerAppShell = lazy(() => import('./components/CustomerAppShell'))
 const AppPackageDialog = lazy(() => import('./components/AppPackageDialog'))
+const AppDesignerDialog = lazy(() => import('./components/AppDesignerDialog'))
 
 const NODE_TYPES = {
   blacknode: BlackNode,
@@ -273,7 +274,7 @@ function WorkspaceApp() {
     beginAltDragCopy, finishAltDragCopy, undoGraph,
     checkServer, reset, newTab, insertTab, switchTab, closeTab, duplicateTab,
     openGraphAsTab, openWorkflowAsTab, setActiveTabSurface, renameTab, saveActiveWorkflow,
-    diveIntoSubnet, exitSubnet, collapseToSubnet, organizeNodes, cookNode, stopCook, stopRuntimeServices, dismissCookStatus, applyRunReplay,
+    subnetStack, diveIntoSubnet, exitSubnet, collapseToSubnet, organizeNodes, cookNode, stopCook, stopRuntimeServices, dismissCookStatus, applyRunReplay,
     handleLearnedNodeEvent, updateParam,
   } = useStore()
 
@@ -321,6 +322,7 @@ function WorkspaceApp() {
   const [simulationViewerHeight, setSimulationViewerHeight] = useState(loadSimulationViewerHeight)
   const [fileMenuOpen, setFileMenuOpen] = useState(false)
   const [appPackageDialogOpen, setAppPackageDialogOpen] = useState(false)
+  const [appDesignerOpen, setAppDesignerOpen] = useState(false)
   const [openingAppPackageDialog, setOpeningAppPackageDialog] = useState(false)
   const [fileMenuPosition, setFileMenuPosition] = useState({ top: 0, left: 0 })
   const [simulationViewerMenuOpen, setSimulationViewerMenuOpen] = useState(false)
@@ -2065,6 +2067,13 @@ function WorkspaceApp() {
                     <span>Import workflow…</span>
                     <small>JSON or Python</small>
                   </button>
+                  {!hostedPreview && (
+                    <button type="button" role="menuitem" disabled={!serverOk || nodes.length === 0 || subnetStack.length > 0}
+                      onClick={() => { setFileMenuOpen(false); setAppDesignerOpen(true) }}>
+                      <span>{operatorView ? 'Edit App…' : 'Create App…'}</span>
+                      <small>Parameters, results & buttons</small>
+                    </button>
+                  )}
                   {!hostedPreview && (
                     <button
                       type="button"
@@ -2583,6 +2592,12 @@ function WorkspaceApp() {
             +
           </button>
 
+          {!hostedPreview && subnetStack.length === 0 && (
+            <button type="button" className="bn-workflow-surface-toggle" disabled={!serverOk || nodes.length === 0}
+              onClick={() => setAppDesignerOpen(true)}>
+              {operatorView ? 'Edit App' : 'Create App'}
+            </button>
+          )}
           {operatorView && (
             <button
               type="button"
@@ -2730,6 +2745,7 @@ function WorkspaceApp() {
           currentAppId={operatorView?.id}
           onClose={() => setAppPackageDialogOpen(false)}
         />
+        {appDesignerOpen && <AppDesignerDialog key={activeTabId} onClose={() => setAppDesignerOpen(false)} />}
 
         {pendingXacroEnvironment && (
           <div
diff --git a/editor/src/api.ts b/editor/src/api.ts
index 2b0c4a4..f104908 100644
--- a/editor/src/api.ts
+++ b/editor/src/api.ts
@@ -1954,6 +1954,8 @@ export const api = {
     required_capabilities: requiredCapabilities,
     device_calibration: deviceCalibration,
   }, 10000),
+  updateWorkflowOperatorView: (view: import('./operatorView').WorkflowOperatorView) =>
+    req<{ metadata: WorkflowMetadata }>('PATCH', '/graph/operator-view', view, 10000),
   listGraphCalibrations: () =>
     req<{
       profiles: DeviceRobotProfile[]
diff --git a/editor/src/appDesigner.test.ts b/editor/src/appDesigner.test.ts
new file mode 100644
index 0000000..50dadbc
--- /dev/null
+++ b/editor/src/appDesigner.test.ts
@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest'
+import { appTargets, buildAppView, designerControls, type AppControl } from './appDesigner'
+import { isWorkflowOperatorView, type WorkflowOperatorView } from './operatorView'
+import type { BnNodeMeta } from './types'
+
+const node: BnNodeMeta = { id: 'task', type: 'Task', pos: [0, 0], params: {},
+  inputs: ['task', 'steps', 'api_key', 'dataset'], outputs: ['result', 'viewer_url'],
+  input_types: { task: 'Text', steps: 'Int', api_key: 'Text', dataset: 'Text' },
+  output_types: { result: 'Text', viewer_url: 'Text' }, input_defaults: {} }
+const targets = appTargets([node], {}, new Set([JSON.stringify(['task', 'dataset'])]))
+const controls: AppControl[] = [
+  { id: 'task-input', kind: 'setting', target: JSON.stringify(['task', 'task']), label: 'Task' },
+  { id: 'steps-input', kind: 'setting', target: JSON.stringify(['task', 'steps']), label: 'Steps' },
+  { id: 'run', kind: 'action', target: JSON.stringify(['task', 'result']), label: 'Train', mode: 'live', confirm: 'Start training?' },
+  { id: 'result', kind: 'result', target: JSON.stringify(['task', 'result']), label: 'Result', display: 'text' },
+  { id: 'viewer', kind: 'result', target: JSON.stringify(['task', 'viewer_url']), label: 'Preview', display: 'viewer' },
+]
+
+describe('App designer', () => {
+  it('offers unconnected typed parameters and excludes credentials', () => {
+    expect(targets.settings.map(item => item.port)).toEqual(['task', 'steps'])
+  })
+  it('includes saved value-node parameters even when the node has no input ports', () => {
+    const value = { ...node, type: 'Text', inputs: [], input_types: {}, params: { value: 'Hello', _label: 'Greeting' } }
+    expect(appTargets([value], {}, new Set()).settings.map(item => item.port)).toEqual(['value'])
+  })
+  it('offers the cooked value of terminal Output nodes', () => {
+    expect(appTargets([{ ...node, type: 'Output', outputs: [] }], {}, new Set()).outputs[0].port).toBe('value')
+  })
+  it('builds a valid App with numeric fields, confirmed live actions, and visible outputs', () => {
+    const view = buildAppView('My task', 'my-task', controls, targets, null)
+    expect(isWorkflowOperatorView(view)).toBe(true)
+    expect(view.sections[1].widgets[1]).toMatchObject({ type: 'fields', items: [{ input: 'number' }] })
+    expect(view.sections[0].widgets[0]).toMatchObject({ type: 'actions', items: [{ confirm: 'Start training?', cook_target: { mode: 'live' } }] })
+    expect(designerControls(view)).toEqual([controls[2], controls[3], controls[4], controls[0], controls[1]])
+  })
+  it('preserves existing safety controls, settings, and primary run targets when adding controls', () => {
+    const existing: WorkflowOperatorView = { schema_version: 1, id: 'robot', title: 'Robot',
+      run_target: { node_id: 'task', port: 'result', confirm: 'Authorize?', mode: 'once' },
+      settings: { groups: [{ id: 'connection', title: 'Connection', items: [{ node_id: 'task', param: 'task', label: 'Task' }] }] },
+      sections: [{ id: 'safety', widgets: [{ type: 'actions', id: 'arm', items: [{ id: 'arm', label: 'Arm', confirm: 'Arm robot?', control: { node_id: 'task', action: 'arm' } }] }] }] }
+    const original = structuredClone(existing)
+    const view = buildAppView('Custom robot', 'robot', controls, targets, existing)
+    expect(view.sections[0]).toEqual(original.sections[0])
+    expect(view.run_target).toEqual(original.run_target)
+    expect(view.settings).toEqual(original.settings)
+    expect(existing).toEqual(original)
+  })
+  it('rejects missing references and empty apps before saving', () => {
+    expect(() => buildAppView('App', 'app', [{ ...controls[0], target: 'missing' }], targets, null)).toThrow('available workflow parameter')
+    expect(() => buildAppView('App', 'app', [], targets, null)).toThrow('Add a parameter')
+  })
+})
diff --git a/editor/src/appDesigner.ts b/editor/src/appDesigner.ts
new file mode 100644
index 0000000..c542edc
--- /dev/null
+++ b/editor/src/appDesigner.ts
@@ -0,0 +1,101 @@
+import type { BnNodeDef, BnNodeMeta } from './types'
+import type { OperatorWidget, WorkflowOperatorView } from './operatorView'
+
+export const DESIGNER_SECTION = 'app-designer'
+export const DESIGNER_SETTINGS = 'app-designer-settings'
+export interface AppControl {
+  id: string
+  kind: 'setting' | 'result' | 'action'
+  target: string
+  label: string
+  display?: 'text' | 'number' | 'status' | 'image' | 'viewer'
+  mode?: 'once' | 'live'
+  confirm?: string
+}
+export interface AppTarget {
+  key: string
+  node_id: string
+  port: string
+  label: string
+  type: string
+}
+
+export function appTargets(nodes: BnNodeMeta[], definitions: Record<string, BnNodeDef>, connected: Set<string>) {
+  const settings: AppTarget[] = []
+  const outputs: AppTarget[] = []
+  for (const node of nodes) {
+    const definition = definitions[node.type]
+    const name = String(node.params._label || `${node.type} (${node.id.slice(0, 8)})`)
+    const types = { ...definition?.input_types, ...node.input_types }
+    const inputs = new Set([...Object.keys(definition?.input_defaults ?? {}), ...(definition?.inputs ?? []), ...node.inputs, ...Object.keys(node.params)])
+    for (const port of inputs) {
+      const key = JSON.stringify([node.id, port])
+      if (connected.has(key) || port.startsWith('_') || /api[_-]?key|token|secret|password|credential/i.test(port)) continue
+      const value = node.params[port]
+      const type = types[port] ?? (typeof value === 'string' ? 'Text' : typeof value === 'number' ? 'Number' : '')
+      if (!['Text', 'Int', 'Float', 'Number', 'Enum'].includes(type)) continue
+      settings.push({ key, node_id: node.id, port, label: `${name} · ${port}`, type })
+    }
+    // Terminal Output nodes expose their cooked value without an output handle.
+    for (const port of node.type === 'Output' ? ['value'] : node.outputs) {
+      outputs.push({ key: JSON.stringify([node.id, port]), node_id: node.id, port,
+        label: `${name} · ${port}`, type: node.output_types[port] ?? definition?.output_types[port] ?? 'Any' })
+    }
+  }
+  return { settings, outputs }
+}
+
+export function designerControls(view: WorkflowOperatorView | null): AppControl[] {
+  return (view?.sections ?? [])
+    .filter(section => [DESIGNER_SECTION, DESIGNER_SETTINGS].includes(section.id))
+    .flatMap(section => section.widgets.map(widget => {
+      if (widget.type === 'image' || widget.type === 'viewer') {
+        return { id: widget.id, kind: 'result' as const, target: JSON.stringify([widget.source.node_id, widget.source.port]), label: widget.title, display: widget.type }
+      }
+      const item = widget.items[0]
+      if (widget.type === 'fields') {
+        const field = widget.items[0]
+        return { id: widget.id, kind: 'setting' as const, target: JSON.stringify([field.node_id, field.param]), label: field.label }
+      }
+      if (widget.type === 'actions') {
+        const action = widget.items[0]
+        return { id: widget.id, kind: 'action' as const, target: JSON.stringify([action.cook_target?.node_id, action.cook_target?.port]), label: action.label, mode: action.cook_target?.mode ?? 'once', confirm: action.confirm }
+      }
+      const source = widget.items[0]
+      return { id: widget.id, kind: 'result' as const, target: JSON.stringify([source.node_id, source.port]), label: item.label,
+        display: widget.type === 'status' ? 'status' as const : widget.items[0].format === 'number' ? 'number' as const : 'text' as const }
+    }))
+}
+
+export function buildAppView(title: string, id: string, controls: AppControl[], targets: ReturnType<typeof appTargets>, existing: WorkflowOperatorView | null): WorkflowOperatorView {
+  if (!title.trim()) throw new Error('Give your App a name.')
+  if (!/^[a-z][a-z0-9_-]{0,63}$/.test(id)) throw new Error('App ID must start with a lowercase letter and use letters, numbers, hyphens, or underscores.')
+  const fields: OperatorWidget[] = []
+  const widgets: OperatorWidget[] = []
+  for (const control of controls) {
+    const target = (control.kind === 'setting' ? targets.settings : targets.outputs).find(item => item.key === control.target)
+    if (!target) throw new Error(`Choose an available workflow ${control.kind === 'setting' ? 'parameter' : 'output'} for ${control.label || 'each control'}.`)
+    if (!control.label.trim()) throw new Error('Give each App control a label.')
+    const label = control.label.trim()
+    const source = { node_id: target.node_id, port: target.port }
+    if (control.kind === 'setting') {
+      fields.push({ type: 'fields', id: control.id, items: [{ node_id: target.node_id, param: target.port, label,
+        input: ['Int', 'Float', 'Number'].includes(target.type) ? 'number' : 'text' }] })
+    } else if (control.kind === 'action') {
+      widgets.push({ type: 'actions', id: control.id, items: [{ id: control.id, label, tone: 'primary',
+        ...(control.confirm?.trim() ? { confirm: control.confirm.trim() } : {}),
+        cook_target: { ...source, mode: control.mode ?? 'once' } }] })
+    } else if (control.display === 'image' || control.display === 'viewer') {
+      widgets.push({ type: control.display, id: control.id, title: label, source })
+    } else if (control.display === 'status') {
+      widgets.push({ type: 'status', id: control.id, items: [{ ...source, label }] })
+    } else {
+      widgets.push({ type: 'metrics', id: control.id, items: [{ ...source, label, format: control.display === 'number' ? 'number' : 'text' }] })
+    }
+  }
+  const sections = (existing?.sections ?? []).filter(section => ![DESIGNER_SECTION, DESIGNER_SETTINGS].includes(section.id))
+  if (widgets.length) sections.push({ id: DESIGNER_SECTION, layout: 'stack', widgets })
+  if (fields.length) sections.push({ id: DESIGNER_SETTINGS, title: 'Parameters', region: 'parameters', widgets: fields })
+  if (!sections.length) throw new Error('Add a parameter, result, or run button to your App.')
+  return { ...existing, schema_version: 1, id, title: title.trim(), icon: existing?.icon ?? 'workflow', sections }
+}
diff --git a/editor/src/components/AppDesignerDialog.css b/editor/src/components/AppDesignerDialog.css
new file mode 100644
index 0000000..da4c7fc
--- /dev/null
+++ b/editor/src/components/AppDesignerDialog.css
@@ -0,0 +1,12 @@
+.bn-app-designer { width: min(760px, calc(100vw - 32px)); display: flex; flex-direction: column; overflow: hidden; }
+.bn-app-designer fieldset { border: 0; padding: 0 4px 0 0; margin: 0; min-width: 0; min-height: 0; overflow: auto; }
+.bn-app-designer > header, .bn-app-designer > footer { flex-shrink: 0; }
+.bn-app-designer-add { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
+.bn-app-designer button { border: 1px solid var(--line2); border-radius: 6px; padding: 7px 10px; background: var(--lift); color: var(--tx1); font: inherit; }
+.bn-app-designer-controls { display: grid; gap: 12px; }
+.bn-app-designer-control { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 1px solid var(--line2); border-radius: 8px; padding: 12px; }
+.bn-app-designer-control > header { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
+.bn-app-designer-control label { display: flex; flex-direction: column; gap: 5px; color: var(--tx2); font-size: 13px; min-width: 0; }
+.bn-app-designer-control input, .bn-app-designer-control select { width: 100%; min-width: 0; box-sizing: border-box; padding: 8px; border: 1px solid var(--line2); border-radius: 6px; color: var(--tx1); background: var(--lift); font: inherit; }
+.bn-app-designer-hint { font-size: 13px; line-height: 1.5; color: var(--tx2); }
+@media (max-width: 600px) { .bn-app-designer-control { grid-template-columns: 1fr; } }
diff --git a/editor/src/components/AppDesignerDialog.tsx b/editor/src/components/AppDesignerDialog.tsx
new file mode 100644
index 0000000..e5617dd
--- /dev/null
+++ b/editor/src/components/AppDesignerDialog.tsx
@@ -0,0 +1,99 @@
+import { useMemo, useState, type FormEvent } from 'react'
+import { useStore } from '../store'
+import { appTargets, buildAppView, designerControls, type AppControl } from '../appDesigner'
+import { isWorkflowOperatorView } from '../operatorView'
+import './AppDesignerDialog.css'
+
+export default function AppDesignerDialog({ onClose }: { onClose: () => void }) {
+  const { nodes, edges, nodeDefs, workflowMetadata, tabs, activeTabId,
+    setWorkflowOperatorView, saveActiveWorkflow, setActiveTabSurface } = useStore()
+  const existing = isWorkflowOperatorView(workflowMetadata.operator_view) ? workflowMetadata.operator_view : null
+  const activeTab = tabs.find(tab => tab.id === activeTabId)
+  const [title, setTitle] = useState(existing?.title ?? activeTab?.name ?? 'My App')
+  const [id, setId] = useState(existing?.id ?? `app-${crypto.randomUUID().slice(0, 8)}`)
+  const [controls, setControls] = useState<AppControl[]>(() => designerControls(existing))
+  const [error, setError] = useState('')
+  const [saving, setSaving] = useState(false)
+  const targets = useMemo(() => appTargets(nodes.map(node => node.data), nodeDefs,
+    new Set(edges.map(edge => JSON.stringify([edge.target, edge.targetHandle])))), [nodes, nodeDefs, edges])
+  const update = (id: string, patch: Partial<AppControl>) => setControls(items => items.map(item => item.id === id ? { ...item, ...patch } : item))
+  const add = (kind: AppControl['kind']) => {
+    const choices = kind === 'setting' ? targets.settings : targets.outputs
+    const preferred = kind === 'action'
+      ? choices.find(item => item.node_id === useStore.getState().workflowEntrypoint?.node_id && item.port === useStore.getState().workflowEntrypoint?.port)
+      : undefined
+    setControls(items => [...items, { id: `control-${crypto.randomUUID().slice(0, 8)}`, kind,
+      target: preferred?.key ?? '', label: kind === 'action' ? 'Run' : '', display: 'text', mode: 'once' }])
+  }
+  const submit = async (event: FormEvent) => {
+    event.preventDefault()
+    setError('')
+    setSaving(true)
+    try {
+      const view = buildAppView(title, id, controls, targets, existing)
+      await setWorkflowOperatorView(view)
+      await saveActiveWorkflow(activeTab?.slug ? activeTab.name : title.trim())
+      setActiveTabSurface('app')
+      onClose()
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause))
+    } finally { setSaving(false) }
+  }
+  return (
+    <div className="bn-app-package-backdrop" role="dialog" aria-modal="true" aria-labelledby="bn-app-designer-title">
+      <form className="bn-app-package-dialog bn-app-designer" onSubmit={submit}>
+        <header><div><span>Build</span><h2 id="bn-app-designer-title">{existing ? 'Edit App' : 'Create App'}</h2></div>
+          <button type="button" onClick={onClose} disabled={saving} aria-label="Close App designer">×</button></header>
+        <p>Choose the parameters, results, and buttons people will use. Your workflow runs the App.</p>
+        <fieldset disabled={saving}>
+          <div className="bn-app-package-fields">
+            <label>App name<input value={title} onChange={event => setTitle(event.target.value)} required autoFocus /></label>
+            <label>App ID<input value={id} onChange={event => setId(event.target.value)} required /></label>
+          </div>
+          <div className="bn-app-designer-add">
+            <button type="button" onClick={() => add('setting')}>+ Parameter</button>
+            <button type="button" onClick={() => add('result')}>+ Result</button>
+            <button type="button" onClick={() => add('action')}>+ Run button</button>
+          </div>
+          {existing && <p className="bn-app-designer-hint">Existing App sections and safety controls are retained. Controls added here can be edited below.</p>}
+          {!controls.length && <p className="bn-app-designer-hint">Add a parameter to configure the task, a result to see its output, and a button to run it.</p>}
+          <div className="bn-app-designer-controls">
+            {controls.map((control, index) => {
+              const choices = control.kind === 'setting' ? targets.settings : targets.outputs
+              return <section className="bn-app-designer-control" key={control.id} aria-label={`Control ${index + 1}`}>
+                <header><strong>{control.kind === 'setting' ? 'Parameter' : control.kind === 'action' ? 'Run button' : 'Result'}</strong>
+                  <button type="button" onClick={() => setControls(items => items.filter(item => item.id !== control.id))} aria-label={`Remove control ${index + 1}`}>Remove</button></header>
+                <label>Workflow {control.kind === 'setting' ? 'parameter' : 'output'}
+                  <select value={control.target} onChange={event => {
+                    const selected = choices.find(item => item.key === event.target.value)
+                    update(control.id, { target: event.target.value, label: control.label || selected?.port.replace(/_/g, ' ') || '',
+                      ...(control.kind === 'result' ? { display: selected?.type === 'Image' ? 'image' : selected?.port === 'viewer_url' ? 'viewer' : selected?.type === 'Bool' ? 'status' : 'text' } : {}) })
+                  }} required>
+                    <option value="">Choose {control.kind === 'setting' ? 'a parameter' : 'an output'}…</option>
+                    {control.target && !choices.some(item => item.key === control.target) && <option value={control.target}>Unavailable — choose another</option>}
+                    {choices.map(item => <option value={item.key} key={item.key}>{item.label}</option>)}
+                  </select>
+                </label>
+                <label>Label<input value={control.label} onChange={event => update(control.id, { label: event.target.value })} required /></label>
+                {control.kind === 'result' && <label>Show as<select value={control.display} onChange={event => update(control.id, { display: event.target.value as AppControl['display'] })}>
+                  <option value="text">Text</option><option value="number">Metric</option><option value="status">Status</option><option value="image">Image</option><option value="viewer">Web viewer</option>
+                </select></label>}
+                {control.kind === 'action' && <>
+                  <label>Run mode<select value={control.mode} onChange={event => update(control.id, { mode: event.target.value as 'once' | 'live' })}>
+                    <option value="once">Run once</option><option value="live">Start live service</option>
+                  </select></label>
+                  <label>Confirmation message<input value={control.confirm ?? ''} onChange={event => update(control.id, { confirm: event.target.value })} placeholder="For actions needing operator confirmation" /></label>
+                </>}
+              </section>
+            })}
+          </div>
+        </fieldset>
+        {error && <p className="bn-app-package-error" role="alert">{error}</p>}
+        <footer><span>Save, then try your App. Use Edit workflow to change its nodes.</span><div>
+          <button type="button" onClick={onClose} disabled={saving}>Cancel</button>
+          <button type="submit" className="is-primary" disabled={saving}>{saving ? 'Saving…' : 'Save & open App'}</button>
+        </div></footer>
+      </form>
+    </div>
+  )
+}
diff --git a/editor/src/components/NodePalette.tsx b/editor/src/components/NodePalette.tsx
index a6d5ef4..ec366d8 100644
--- a/editor/src/components/NodePalette.tsx
+++ b/editor/src/components/NodePalette.tsx
@@ -267,7 +267,7 @@ export default function NodePalette() {
     api.getOnboarding()
       .then(state => {
         if (active && !state.package_welcome_seen) {
-          setActiveTab('packages')
+          setActiveTab('templates')
           setShowPackageWelcome(true)
         }
       })
@@ -576,28 +576,28 @@ export default function NodePalette() {
               Welcome to Blacknode
             </div>
             <h1 id="package-welcome-title" style={{ margin: '8px 0 10px', fontSize: 24, lineHeight: 1.2 }}>
-              Prepare your robotics workspace
+              Run your first workflow
             </h1>
             <p style={{ margin: 0, color: 'var(--tx2)', fontSize: 15, lineHeight: 1.6 }}>
-              Start in Packages and install the official Blacknode capabilities for robot hardware, ROS 2, vision, CUDA, datasets, and training. Package-backed templates need their listed packages before they can run.
+              Open Text Pipeline, press Run once, and see “Hello World” on the Output node. Change the text and run it again to make it yours.
             </p>
             <p style={{ margin: '10px 0 0', color: 'var(--tx3)', fontSize: 14, lineHeight: 1.5 }}>
-              Core graph workflows are ready immediately. You can return to Packages at any time from the left sidebar.
+              This first workflow runs on your computer. Add robot hardware, simulation, vision, and AI through Packages when you are ready.
             </p>
             <div style={{ marginTop: 20, display: 'flex', gap: 10, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
               <button
                 type="button"
-                onClick={() => finishPackageWelcome('templates')}
+                onClick={() => finishPackageWelcome('packages')}
                 style={welcomeButtonStyle}
               >
-                Explore core templates
+                Explore packages
               </button>
               <button
                 type="button"
-                onClick={() => finishPackageWelcome('packages')}
+                onClick={() => finishPackageWelcome('templates')}
                 style={{ ...welcomeButtonStyle, padding: '7px 14px', color: 'var(--action-ink)', background: 'var(--action)', borderColor: 'var(--action)', fontWeight: 700 }}
               >
-                Explore essential packages
+                Open templates
               </button>
             </div>
           </div>
diff --git a/editor/src/components/PointCloudViewer.tsx b/editor/src/components/PointCloudViewer.tsx
index 42b66f8..87bef3a 100644
--- a/editor/src/components/PointCloudViewer.tsx
+++ b/editor/src/components/PointCloudViewer.tsx
@@ -1970,8 +1970,10 @@ export default function PointCloudViewer({
           border: '1px solid rgba(86, 217, 145, 0.38)', color: '#8df0b5',
           fontFamily: 'var(--font-mono)', fontSize: 11, pointerEvents: 'none',
         }}>
-          <span style={{ width: 7, height: 7, borderRadius: '50%', background: hasCurrentPoints ? '#56d991' : '#71808d' }} />
-          {hasCurrentPoints
+          <span style={{ width: 7, height: 7, borderRadius: '50%', background: (hasCurrentPoints || (viewerRole === 'generic' && pointCount > 0)) ? '#56d991' : '#71808d' }} />
+          {viewerRole === 'generic'
+            ? pointCount > 0 ? `POINT CLOUD · ${pointCount.toLocaleString()} POINTS` : 'WAITING FOR POINTS'
+            : hasCurrentPoints
             ? parsed.sensor_fusion?.backend === 'warp-hash-grid'
               ? `SENSOR FUSION · ${Number(parsed.sensor_fusion.matched_points ?? 0).toLocaleString()} ALIGNED`
               : parsed.reconstruction?.integration?.backend === 'warp'
@@ -2054,7 +2056,9 @@ export default function PointCloudViewer({
       }}>
         <span>
           {pointCount > 0
-            ? parsed.sensor_fusion?.backend === 'warp-hash-grid'
+            ? viewerRole === 'generic'
+              ? `${pointCount.toLocaleString()} points`
+              : parsed.sensor_fusion?.backend === 'warp-hash-grid'
               ? `${pointCount.toLocaleString()} fused sensor points`
               : parsed.reconstruction?.extraction?.backend === 'warp'
               ? `${pointCount.toLocaleString()} reconstructed surface voxels`
@@ -2064,7 +2068,7 @@ export default function PointCloudViewer({
             : currentPoints.length ? 'Live scan; map is empty' : 'Waiting for points'}
         </span>
         {currentPointCount > 0 && <span>{currentPointCount.toLocaleString()} current</span>}
-        {accumulatedScanCount > 0 && (!parsed.depth_projection || parsed.reconstruction) && <span>{accumulatedScanCount.toLocaleString()} {parsed.reconstruction ? 'RGB-D frames' : 'scans'}</span>}
+        {viewerRole !== 'generic' && accumulatedScanCount > 0 && (!parsed.depth_projection || parsed.reconstruction) && <span>{accumulatedScanCount.toLocaleString()} {parsed.reconstruction ? 'RGB-D frames' : 'scans'}</span>}
         {displayCount > 0 && displayCount !== pointCount && <span>{displayCount.toLocaleString()} displayed</span>}
         {kernelMs > 0 && <span>{kernelMs.toFixed(3)} ms Warp</span>}
         {parsed.occupancy?.backend === 'warp' && (
@@ -2120,8 +2124,8 @@ export default function PointCloudViewer({
             {finite(parsed.trajectory_evaluation.speedup) > 0 ? ` · ${finite(parsed.trajectory_evaluation.speedup).toFixed(1)}× CPU` : ''}
           </span>
         )}
-        {!parsed.depth_projection && <span>{scanCoverageDeg >= 359.5 ? `360° scan · ${clockwiseScan ? 'CW' : 'CCW'} paced replay` : `${scanCoverageDeg.toFixed(1)}° scan · ${clockwiseScan ? 'CW' : 'CCW'} paced replay`}</span>}
-        <span>{parsed.sensor_fusion ? '3D orbit · synchronized LiDAR and colorized depth alignment' : parsed.reconstruction ? '3D orbit · persistent pose-registered RGB-D surface' : parsed.depth_projection ? '3D orbit · calibrated metric surface' : '3D orbit · LaserScan lies on XY plane'}</span>
+        {viewerRole !== 'generic' && !parsed.depth_projection && <span>{scanCoverageDeg >= 359.5 ? `360° scan · ${clockwiseScan ? 'CW' : 'CCW'} paced replay` : `${scanCoverageDeg.toFixed(1)}° scan · ${clockwiseScan ? 'CW' : 'CCW'} paced replay`}</span>}
+        <span>{viewerRole === 'generic' ? '3D orbit · point cloud' : parsed.sensor_fusion ? '3D orbit · synchronized LiDAR and colorized depth alignment' : parsed.reconstruction ? '3D orbit · persistent pose-registered RGB-D surface' : parsed.depth_projection ? '3D orbit · calibrated metric surface' : '3D orbit · LaserScan lies on XY plane'}</span>
       </div>
       <div data-bn-viewer-legend style={{
         display: 'flex', alignItems: 'center', gap: 11, flexWrap: 'nowrap',
@@ -2129,9 +2133,9 @@ export default function PointCloudViewer({
         color: 'var(--tx3)', fontFamily: 'var(--font-mono)', fontSize: 11,
       }}>
         {showRobot && <span style={{ color: '#7cf4ff' }}>B robot {Math.round(finite(parsed.robot?.length_m, 0.25) * 100)}×{Math.round(finite(parsed.robot?.width_m, 0.22) * 100)} cm</span>}
-        {!parsed.depth_projection && <span style={{ color: '#72ff9d' }}>— active beam</span>}
-        {!parsed.depth_projection && !fullCircleScan && <span style={{ color: '#85a2b8' }}>┄ scan limits</span>}
-        <span style={{ color: '#32d8ef' }}>{parsed.sensor_fusion ? '● LiDAR cyan · RGB-D green aligned / red residual' : parsed.reconstruction ? '● reconstructed surface · aligned RGB when available' : parsed.depth_projection?.color_applied === 'rgb' ? '● projected depth · aligned RGB color' : parsed.depth_projection?.color_applied === 'ir' ? '● projected depth · aligned IR intensity' : parsed.depth_projection ? '● projected depth · distance and surface confidence color' : '● filtered laser returns'}</span>
+        {viewerRole !== 'generic' && !parsed.depth_projection && <span style={{ color: '#72ff9d' }}>— active beam</span>}
+        {viewerRole !== 'generic' && !parsed.depth_projection && !fullCircleScan && <span style={{ color: '#85a2b8' }}>┄ scan limits</span>}
+        <span style={{ color: '#32d8ef' }}>{viewerRole === 'generic' ? '● point cloud colors' : parsed.sensor_fusion ? '● LiDAR cyan · RGB-D green aligned / red residual' : parsed.reconstruction ? '● reconstructed surface · aligned RGB when available' : parsed.depth_projection?.color_applied === 'rgb' ? '● projected depth · aligned RGB color' : parsed.depth_projection?.color_applied === 'ir' ? '● projected depth · aligned IR intensity' : parsed.depth_projection ? '● projected depth · distance and surface confidence color' : '● filtered laser returns'}</span>
         {parsed.sensor_fusion && <span style={{ color: '#91f4ff' }}>calibration Δ {finite(parsed.sensor_fusion.correction?.x_m).toFixed(3)} m X · {finite(parsed.sensor_fusion.correction?.y_m).toFixed(3)} m Y · {finite(parsed.sensor_fusion.correction?.yaw_deg).toFixed(2)}° yaw</span>}
         {mapFeatures && parsed.occupancy?.fixed_origin === true && <span style={{ color: '#486070' }}>■ unknown map extent</span>}
         {mapFeatures && parsed.map_render_mode === 'occupancy-texture' && <span style={{ color: '#74e7a5' }}>GPU map texture · all cells</span>}
diff --git a/editor/src/components/TemplateGallery.tsx b/editor/src/components/TemplateGallery.tsx
index c515b5f..234897c 100644
--- a/editor/src/components/TemplateGallery.tsx
+++ b/editor/src/components/TemplateGallery.tsx
@@ -55,7 +55,7 @@ export default function TemplateGallery({
   const [enabling, setEnabling] = useState<{ slug: string; label: string } | null>(null)
   const [missing, setMissing] = useState<Record<string, TemplateDependencyError>>({})
   const [error, setError] = useState<string | null>(null)
-  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(() => new Set())
+  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(() => new Set(['Core']))
   const [query, setQuery] = useState(initialQuery)
 
   useEffect(() => {
@@ -103,7 +103,12 @@ export default function TemplateGallery({
   const refreshTemplates = async () => {
     try {
       setError(null)
-      setTemplates(await api.listTemplates())
+      const starters = ['text-pipeline', 'generic-viewer']
+      const rank = (template: TemplateMeta) => {
+        const index = starters.indexOf(template.slug)
+        return index < 0 ? starters.length : index
+      }
+      setTemplates((await api.listTemplates()).sort((a, b) => rank(a) - rank(b)))
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err))
     }
@@ -154,7 +159,7 @@ export default function TemplateGallery({
           detail: {
             kind: 'info',
             title: `${template.name} opened`,
-            message: 'The deployment workflow remains available in its original tab.',
+            message: 'Choose Run once in the top bar to see the result. Your previous workflow remains in its own tab.',
           },
         }))
       }
@@ -266,7 +271,7 @@ export default function TemplateGallery({
         lineHeight: 1.5,
       }}>
         {openInNewTab
-          ? 'Browse reusable workflow setups. Each one opens in its own workflow tab.'
+          ? 'Open a template, then press Run once in the top bar. Start with Text Pipeline to see a local result immediately.'
           : 'Reusable workflow components, organized by capability.'}
       </div>
 
@@ -394,6 +399,17 @@ export default function TemplateGallery({
                 (e.currentTarget as HTMLElement).style.borderColor = dependencyError ? 'var(--warn)' : group.color
               }
             }}
+            role="button"
+            tabIndex={isBusy ? -1 : 0}
+            aria-label={`Open ${template.name}`}
+            aria-disabled={isBusy}
+            onKeyDown={event => {
+              if (event.target !== event.currentTarget) return
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault()
+                if (!isBusy) void loadTemplate(template)
+              }
+            }}
             onClick={() => !isBusy && loadTemplate(template)}
           >
             <div className="bn-template-card-header" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginBottom: 4 }}>
diff --git a/editor/src/store.ts b/editor/src/store.ts
index be7a172..d74cf64 100644
--- a/editor/src/store.ts
+++ b/editor/src/store.ts
@@ -289,6 +289,7 @@ interface Store {
   duplicateSavedWorkflow: (slug: string) => Promise<{ name: string; slug: string }>
   deleteWorkflow: (slug: string) => Promise<void>
   saveActiveTabSnapshot: () => Promise<GraphSnapshot | null>
+  setWorkflowOperatorView: (view: import('./operatorView').WorkflowOperatorView) => Promise<void>
   setWorkflowRequirements: (
     requiredCapabilities: string[],
     deviceCalibration: { profile_id: string; hardware_id: string } | null,
@@ -2086,6 +2087,18 @@ export const useStore = create<Store>((set, get) => ({
     }))
   },
 
+  setWorkflowOperatorView: async (view) => {
+    const tabId = get().activeTabId
+    const result = await api.updateWorkflowOperatorView(view)
+    set(s => ({
+      ...(s.activeTabId === tabId ? { workflowMetadata: result.metadata } : {}),
+      tabs: s.tabs.map(tab => tab.id === tabId ? {
+        ...tab, dirty: true,
+        graph: tab.graph ? { ...tab.graph, metadata: cloneDeep(result.metadata) } : tab.graph,
+      } : tab),
+    }))
+  },
+
   newTab: async (name) => {
     await get().saveActiveTabSnapshot()
     const id = makeTabId()
diff --git a/tests/test_editor_app_designer.py b/tests/test_editor_app_designer.py
new file mode 100644
index 0000000..ecc0880
--- /dev/null
+++ b/tests/test_editor_app_designer.py
@@ -0,0 +1,71 @@
+from __future__ import annotations
+
+import copy
+import json
+from pathlib import Path
+import sys
+import tempfile
+import unittest
+from unittest.mock import patch
+
+from fastapi.testclient import TestClient
+
+ROOT = Path(__file__).resolve().parents[1]
+sys.path.insert(0, str(ROOT / 'editor-server'))
+import server
+
+
+class AppDesignerTests(unittest.TestCase):
+    def setUp(self):
+        self.session = server.Session()
+        self.temp = tempfile.TemporaryDirectory()
+        self.addCleanup(self.temp.cleanup)
+        self.enterContext(patch.object(server, '_session', self.session))
+        self.enterContext(patch.object(server, '_save', lambda *args, **kwargs: None))
+        self.enterContext(patch.object(server, '_WORKFLOWS_DIR', self.temp.name))
+        self.client = TestClient(server.app)
+        workflow = json.loads((ROOT / 'templates' / 'text-pipeline.json').read_text())
+        response = self.client.post('/graph', json={
+            'nodes': list(workflow['node_meta'].values()), 'edges': workflow['edges'],
+            'metadata': {'project_id': 'my-project'}, 'entrypoint': workflow['entrypoint'],
+        })
+        self.assertEqual(response.status_code, 200, response.text)
+        self.view = {
+            'schema_version': 1, 'id': 'my-app', 'title': 'My App',
+            'sections': [{'id': 'main', 'widgets': [
+                {'id': 'text', 'type': 'fields', 'items': [{'node_id': 'a', 'param': 'value', 'label': 'Message', 'input': 'text'}]},
+                {'id': 'result', 'type': 'metrics', 'items': [{'node_id': 'out', 'port': 'value', 'label': 'Result', 'format': 'text'}]},
+                {'id': 'run', 'type': 'actions', 'items': [{'id': 'run', 'label': 'Run', 'cook_target': {'node_id': 'out', 'port': 'value', 'mode': 'once'}}]},
+            ]}],
+        }
+
+    def test_design_preserves_graph_state_and_saves_with_workflow(self):
+        graph = self.session.graph
+        graph._cache[('a', 'value')] = 'cached'
+        response = self.client.patch('/graph/operator-view', json=self.view)
+        self.assertEqual(response.status_code, 200, response.text)
+        self.assertIs(self.session.graph, graph)
+        self.assertEqual(graph._cache[('a', 'value')], 'cached')
+        self.assertEqual(response.json()['metadata']['project_id'], 'my-project')
+        self.assertEqual(response.json()['metadata']['operator_view'], self.view)
+        saved = self.client.post('/workflows', json={'name': 'My App'})
+        self.assertEqual(saved.status_code, 200, saved.text)
+        payload = json.loads(next(Path(self.temp.name).glob('*.json')).read_text())
+        self.assertEqual(payload['metadata']['operator_view'], self.view)
+
+    def test_invalid_reference_does_not_replace_previous_app(self):
+        self.session.metadata['operator_view'] = copy.deepcopy(self.view)
+        for key, bad_value in [('node_id', 'deleted'), ('param', 'invented')]:
+            view = copy.deepcopy(self.view)
+            view['sections'][0]['widgets'][0]['items'][0][key] = bad_value
+            result = self.client.patch('/graph/operator-view', json=view)
+            self.assertEqual(result.status_code, 400, result.text)
+            self.assertEqual(self.session.metadata['operator_view'], self.view)
+        view = copy.deepcopy(self.view)
+        view['sections'][0]['widgets'][1]['items'][0]['port'] = 'invented'
+        self.assertEqual(self.client.patch('/graph/operator-view', json=view).status_code, 400)
+
+    def test_customer_app_cannot_change_its_operator_permissions(self):
+        with patch.object(server, '_APP_DEPLOYMENT', {'apps': []}):
+            response = self.client.patch('/graph/operator-view', json=self.view)
+        self.assertEqual(response.status_code, 403)
diff --git a/tests/test_editor_package_welcome.py b/tests/test_editor_package_welcome.py
index 52debd0..eab7017 100644
--- a/tests/test_editor_package_welcome.py
+++ b/tests/test_editor_package_welcome.py
@@ -4,17 +4,17 @@
 ROOT = Path(__file__).resolve().parents[1]
 
 
-def test_editor_starts_in_nodes_and_first_visit_opens_packages_with_welcome():
+def test_editor_first_visit_leads_to_a_local_workflow_result():
     source = (ROOT / "editor" / "src" / "components" / "NodePalette.tsx").read_text(encoding="utf-8")
 
     assert "api.getOnboarding()" in source
     assert "!state.package_welcome_seen" in source
-    assert "setActiveTab('packages')" in source
+    assert "setActiveTab('templates')" in source
     assert "await api.setOnboarding(true)" in source
     assert "localStorage" not in source
-    assert "Prepare your robotics workspace" in source
-    assert "Explore essential packages" in source
-    assert "Explore core templates" in source
+    assert "Run your first workflow" in source
+    assert "Explore packages" in source
+    assert "Open templates" in source
     assert "useState<Tab | null>('nodes')" in source
     assert "finishPackageWelcome('templates')" in source
 
diff --git a/tests/test_editor_template_groups.py b/tests/test_editor_template_groups.py
index 3e0315e..a4452de 100644
--- a/tests/test_editor_template_groups.py
+++ b/tests/test_editor_template_groups.py
@@ -4,12 +4,12 @@
 ROOT = Path(__file__).resolve().parents[1]
 
 
-def test_template_gallery_groups_are_collapsed_by_default():
+def test_template_gallery_shows_core_templates_by_default():
     source = (
         ROOT / "editor" / "src" / "components" / "TemplateGallery.tsx"
     ).read_text(encoding="utf-8")
 
-    assert "useState<Set<string>>(() => new Set())" in source
+    assert "useState<Set<string>>(() => new Set(['Core']))" in source
     assert "new Set([templateGroups[0].name])" not in source
     assert "template.group || 'Core'" in source
     assert "aria-expanded={isExpanded}" in source