feat: add code-executor, function-executor, request-port inspectors and enhanced workflow settings

- Create CodeExecutorInspector with implementation directive editor,
  input/output type fields, and directive help callout
- Create FunctionExecutorInspector with built-in function selector
  and key-value parameter editor
- Create RequestPortInspector with port ID, request/response type
  fields, prompt editor, and info callout
- Wire all three inspectors into WorkflowGraphInspector routing,
  keeping PlaceholderNodeInspector as fallback for unknown kinds
- Enhance WorkflowSettingsPanel with OpenTelemetry and sensitive
  data filtering toggles, and a state scopes editor with initial
  values support

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

src/renderer/components/WorkflowEditor.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useCallback, useMemo, useState } from 'react';
-import { AlertCircle, CheckCircle, ChevronLeft, ChevronRight, Info, Trash2 } from 'lucide-react';
+import { AlertCircle, CheckCircle, ChevronLeft, ChevronRight, Info, Plus, Trash2, X } from 'lucide-react';
 
 import type { ModelDefinition } from '@shared/domain/models';
 import type {
@@ -11,6 +11,7 @@ import type {
   WorkflowEdge,
   AgentNodeConfig,
   SubWorkflowConfig,
+  WorkflowStateScope,
 } from '@shared/domain/workflow';
 import { validateWorkflowDefinition } from '@shared/domain/workflow';
 import { createId } from '@shared/utils/ids';
@@ -514,6 +515,71 @@ export function WorkflowEditor({
 
 /* ── Settings panel below canvas ───────────────────────────── */
 
+function StateScopeInitialValues({
+  initialValues,
+  onChange,
+}: {
+  initialValues: Record<string, unknown>;
+  onChange: (values: Record<string, unknown>) => void;
+}) {
+  const entries = Object.entries(initialValues);
+
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between">
+        <span className="text-[11px] text-[var(--color-text-muted)]">Initial Values</span>
+        <button
+          className="flex size-5 items-center justify-center rounded-md text-[var(--color-text-muted)] transition-all duration-200 hover:bg-[var(--color-accent)]/10 hover:text-[var(--color-accent)]"
+          onClick={() => {
+            const key = `key${entries.length + 1}`;
+            onChange({ ...initialValues, [key]: '' });
+          }}
+          title="Add initial value"
+          type="button"
+        >
+          <Plus className="size-3" />
+        </button>
+      </div>
+      {entries.map(([key, value]) => (
+        <div className="flex items-center gap-1.5" key={key}>
+          <input
+            className="w-1/3 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] px-2 py-1 text-[11px] text-[var(--color-text-primary)] placeholder-[var(--color-text-muted)] outline-none transition focus:border-[var(--color-accent)]/50"
+            onChange={(e) => {
+              const next = { ...initialValues };
+              const val = next[key];
+              delete next[key];
+              next[e.target.value] = val;
+              onChange(next);
+            }}
+            placeholder="key"
+            value={key}
+          />
+          <input
+            className="flex-1 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] px-2 py-1 text-[11px] text-[var(--color-text-primary)] placeholder-[var(--color-text-muted)] outline-none transition focus:border-[var(--color-accent)]/50"
+            onChange={(e) => {
+              onChange({ ...initialValues, [key]: e.target.value });
+            }}
+            placeholder="value"
+            value={typeof value === 'string' ? value : JSON.stringify(value) ?? ''}
+          />
+          <button
+            className="flex size-5 shrink-0 items-center justify-center rounded-md text-[var(--color-text-muted)] transition-all duration-200 hover:bg-[var(--color-status-error)]/10 hover:text-[var(--color-status-error)]"
+            onClick={() => {
+              const next = { ...initialValues };
+              delete next[key];
+              onChange(next);
+            }}
+            title="Remove value"
+            type="button"
+          >
+            <X className="size-2.5" />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 function WorkflowSettingsPanel({
   workflow,
   onChange,
@@ -599,6 +665,126 @@ function WorkflowSettingsPanel({
             <ToggleSwitch enabled={workflow.settings.checkpointing.enabled} />
           </button>
         </div>
+
+        {/* Telemetry */}
+        <div className="col-span-2 flex items-center justify-between rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] px-4 py-3">
+          <div>
+            <div className="text-[13px] font-medium text-[var(--color-text-primary)]">OpenTelemetry</div>
+            <p className="text-[12px] text-[var(--color-text-muted)]">Export telemetry data via OpenTelemetry</p>
+          </div>
+          <button
+            className="cursor-pointer"
+            onClick={() =>
+              onChange({
+                ...workflow,
+                settings: {
+                  ...workflow.settings,
+                  telemetry: {
+                    ...workflow.settings.telemetry,
+                    openTelemetry: !workflow.settings.telemetry?.openTelemetry,
+                  },
+                },
+              })
+            }
+            type="button"
+          >
+            <ToggleSwitch enabled={workflow.settings.telemetry?.openTelemetry === true} />
+          </button>
+        </div>
+
+        <div className="col-span-2 flex items-center justify-between rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] px-4 py-3">
+          <div>
+            <div className="text-[13px] font-medium text-[var(--color-text-primary)]">Filter Sensitive Data</div>
+            <p className="text-[12px] text-[var(--color-text-muted)]">Redact sensitive information from telemetry</p>
+          </div>
+          <button
+            className="cursor-pointer"
+            onClick={() =>
+              onChange({
+                ...workflow,
+                settings: {
+                  ...workflow.settings,
+                  telemetry: {
+                    ...workflow.settings.telemetry,
+                    sensitiveData: !workflow.settings.telemetry?.sensitiveData,
+                  },
+                },
+              })
+            }
+            type="button"
+          >
+            <ToggleSwitch enabled={workflow.settings.telemetry?.sensitiveData === true} />
+          </button>
+        </div>
+
+        {/* State Scopes */}
+        <div className="col-span-2 space-y-3">
+          <div className="flex items-center justify-between">
+            <span className="text-[12px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
+              State Scopes
+            </span>
+            <button
+              className="flex size-6 items-center justify-center rounded-md text-[var(--color-text-muted)] transition-all duration-200 hover:bg-[var(--color-accent)]/10 hover:text-[var(--color-accent)]"
+              onClick={() => {
+                const scopes = [...(workflow.settings.stateScopes ?? []), { name: '', description: '', initialValues: {} }];
+                onChange({ ...workflow, settings: { ...workflow.settings, stateScopes: scopes } });
+              }}
+              title="Add state scope"
+              type="button"
+            >
+              <Plus className="size-3.5" />
+            </button>
+          </div>
+
+          {(workflow.settings.stateScopes ?? []).map((scope, idx) => (
+            <div
+              className="space-y-2 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] px-3 py-3"
+              key={idx}
+            >
+              <div className="flex items-center gap-2">
+                <input
+                  className="flex-1 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] px-2 py-1.5 text-[12px] text-[var(--color-text-primary)] placeholder-[var(--color-text-muted)] outline-none transition focus:border-[var(--color-accent)]/50"
+                  onChange={(e) => {
+                    const scopes = [...(workflow.settings.stateScopes ?? [])];
+                    scopes[idx] = { ...scopes[idx], name: e.target.value };
+                    onChange({ ...workflow, settings: { ...workflow.settings, stateScopes: scopes } });
+                  }}
+                  placeholder="Scope name"
+                  value={scope.name}
+                />
+                <button
+                  className="flex size-6 shrink-0 items-center justify-center rounded-md text-[var(--color-text-muted)] transition-all duration-200 hover:bg-[var(--color-status-error)]/10 hover:text-[var(--color-status-error)]"
+                  onClick={() => {
+                    const scopes = (workflow.settings.stateScopes ?? []).filter((_, i) => i !== idx);
+                    onChange({ ...workflow, settings: { ...workflow.settings, stateScopes: scopes } });
+                  }}
+                  title="Remove scope"
+                  type="button"
+                >
+                  <X className="size-3" />
+                </button>
+              </div>
+              <input
+                className="w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] px-2 py-1.5 text-[12px] text-[var(--color-text-primary)] placeholder-[var(--color-text-muted)] outline-none transition focus:border-[var(--color-accent)]/50"
+                onChange={(e) => {
+                  const scopes = [...(workflow.settings.stateScopes ?? [])];
+                  scopes[idx] = { ...scopes[idx], description: e.target.value };
+                  onChange({ ...workflow, settings: { ...workflow.settings, stateScopes: scopes } });
+                }}
+                placeholder="Description (optional)"
+                value={scope.description ?? ''}
+              />
+              <StateScopeInitialValues
+                initialValues={scope.initialValues ?? {}}
+                onChange={(initialValues) => {
+                  const scopes = [...(workflow.settings.stateScopes ?? [])];
+                  scopes[idx] = { ...scopes[idx], initialValues };
+                  onChange({ ...workflow, settings: { ...workflow.settings, stateScopes: scopes } });
+                }}
+              />
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );

src/renderer/components/workflow/CodeExecutorInspector.tsx

@@ -0,0 +1,174 @@
+import { useCallback } from 'react';
+import { AlertCircle, Code, Trash2 } from 'lucide-react';
+
+import type {
+  CodeExecutorConfig,
+  WorkflowNode,
+  WorkflowNodeConfig,
+  WorkflowValidationIssue,
+} from '@shared/domain/workflow';
+
+interface CodeExecutorInspectorProps {
+  node: WorkflowNode;
+  validationIssues?: WorkflowValidationIssue[];
+  onNodeChange: (nodeId: string, patch: Partial<WorkflowNode>) => void;
+  onNodeConfigChange: (nodeId: string, config: WorkflowNodeConfig) => void;
+  onNodeRemove: (nodeId: string) => void;
+}
+
+function InputField({
+  label,
+  value,
+  onChange,
+  multiline,
+  placeholder,
+}: {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  multiline?: boolean;
+  placeholder?: string;
+}) {
+  const base =
+    'w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] px-3 py-2 text-[13px] text-[var(--color-text-primary)] placeholder-[var(--color-text-muted)] outline-none transition focus:border-[var(--color-accent)]/50';
+  return (
+    <label className="block space-y-1.5">
+      <span className="text-[12px] font-medium text-[var(--color-text-secondary)]">{label}</span>
+      {multiline ? (
+        <textarea
+          className={`${base} min-h-20 resize-y`}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+          value={value}
+        />
+      ) : (
+        <input
+          className={base}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+          value={value}
+        />
+      )}
+    </label>
+  );
+}
+
+export function CodeExecutorInspector({
+  node,
+  validationIssues,
+  onNodeChange,
+  onNodeConfigChange,
+  onNodeRemove,
+}: CodeExecutorInspectorProps) {
+  const config = node.config as CodeExecutorConfig;
+  const nodeIssues = validationIssues?.filter((i) => i.nodeId === node.id) ?? [];
+
+  const patchConfig = useCallback(
+    (patch: Partial<CodeExecutorConfig>) => {
+      onNodeConfigChange(node.id, { ...config, ...patch });
+    },
+    [node.id, config, onNodeConfigChange],
+  );
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2.5">
+          <div className="flex size-8 items-center justify-center rounded-lg bg-sky-500/10">
+            <Code className="size-4 text-sky-400" />
+          </div>
+          <div className="text-[13px] font-semibold text-[var(--color-text-primary)]">
+            {node.label || 'Code Executor'}
+          </div>
+        </div>
+        <button
+          className="flex size-7 items-center justify-center rounded-lg text-[var(--color-text-muted)] transition-all duration-200 hover:bg-[var(--color-status-error)]/10 hover:text-[var(--color-status-error)]"
+          onClick={() => onNodeRemove(node.id)}
+          title="Remove node"
+          type="button"
+        >
+          <Trash2 className="size-3.5" />
+        </button>
+      </div>
+
+      {/* Label */}
+      <InputField
+        label="Label"
+        onChange={(v) => onNodeChange(node.id, { label: v })}
+        placeholder="Display label"
+        value={node.label}
+      />
+
+      {/* Implementation */}
+      <label className="block space-y-1.5">
+        <span className="text-[12px] font-medium text-[var(--color-text-secondary)]">
+          Implementation
+        </span>
+        <textarea
+          className="w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] px-3 py-2 font-mono text-[13px] text-[var(--color-text-primary)] placeholder-[var(--color-text-muted)] outline-none transition focus:border-[var(--color-accent)]/50 min-h-20 resize-y"
+          onChange={(e) => patchConfig({ implementation: e.target.value })}
+          placeholder="e.g. return-input, return-text:hello, state:set:scope:key:{&quot;value&quot;:1}"
+          value={config.implementation ?? ''}
+        />
+      </label>
+
+      {/* Directives help */}
+      <div className="rounded-lg border border-sky-500/20 bg-sky-500/5 px-3 py-2 text-[12px] text-sky-400">
+        <div className="mb-1.5 font-medium">Supported directives</div>
+        <ul className="space-y-0.5 text-[11px]">
+          <li>
+            <code className="font-mono">return-input</code> — Forward incoming payload
+          </li>
+          <li>
+            <code className="font-mono">return-text:&lt;text&gt;</code> — Emit literal text
+          </li>
+          <li>
+            <code className="font-mono">return-json:&lt;json&gt;</code> — Emit parsed JSON
+          </li>
+          <li>
+            <code className="font-mono">state:set:&lt;scope&gt;:&lt;key&gt;:&lt;json&gt;</code> — Set state value
+          </li>
+          <li>
+            <code className="font-mono">state:get:&lt;scope&gt;:&lt;key&gt;</code> — Read state value
+          </li>
+        </ul>
+      </div>
+
+      {/* Input Type */}
+      <InputField
+        label="Input Type"
+        onChange={(v) => patchConfig({ inputType: v || undefined })}
+        placeholder="Optional type annotation"
+        value={config.inputType ?? ''}
+      />
+
+      {/* Output Type */}
+      <InputField
+        label="Output Type"
+        onChange={(v) => patchConfig({ outputType: v || undefined })}
+        placeholder="Optional type annotation"
+        value={config.outputType ?? ''}
+      />
+
+      {/* Validation issues */}
+      {nodeIssues.length > 0 && (
+        <div className="space-y-1">
+          {nodeIssues.map((issue, i) => (
+            <div
+              className={`flex items-start gap-1.5 rounded-lg px-2.5 py-1.5 text-[11px] ${
+                issue.level === 'error'
+                  ? 'bg-[var(--color-status-error)]/10 text-[var(--color-status-error)]'
+                  : 'bg-[var(--color-status-warning)]/10 text-[var(--color-status-warning)]'
+              }`}
+              key={`${issue.field ?? 'v'}-${i}`}
+            >
+              <AlertCircle className="mt-0.5 size-3 shrink-0" />
+              <span>{issue.message}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/renderer/components/workflow/FunctionExecutorInspector.tsx

@@ -0,0 +1,219 @@
+import { useCallback, useState } from 'react';
+import { AlertCircle, FunctionSquare, Plus, Trash2, X } from 'lucide-react';
+
+import type {
+  FunctionExecutorConfig,
+  WorkflowNode,
+  WorkflowNodeConfig,
+  WorkflowValidationIssue,
+} from '@shared/domain/workflow';
+
+interface FunctionExecutorInspectorProps {
+  node: WorkflowNode;
+  validationIssues?: WorkflowValidationIssue[];
+  onNodeChange: (nodeId: string, patch: Partial<WorkflowNode>) => void;
+  onNodeConfigChange: (nodeId: string, config: WorkflowNodeConfig) => void;
+  onNodeRemove: (nodeId: string) => void;
+}
+
+function InputField({
+  label,
+  value,
+  onChange,
+  placeholder,
+}: {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}) {
+  const base =
+    'w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] px-3 py-2 text-[13px] text-[var(--color-text-primary)] placeholder-[var(--color-text-muted)] outline-none transition focus:border-[var(--color-accent)]/50';
+  return (
+    <label className="block space-y-1.5">
+      <span className="text-[12px] font-medium text-[var(--color-text-secondary)]">{label}</span>
+      <input
+        className={base}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        value={value}
+      />
+    </label>
+  );
+}
+
+const builtInFunctions = [
+  { value: 'identity', label: 'identity — Pass through input' },
+  { value: 'return-parameter', label: 'return-parameter — Return a parameter value' },
+  { value: 'concat-text', label: 'concat-text — Concatenate text values' },
+  { value: 'state:get', label: 'state:get — Read state value' },
+  { value: 'state:set', label: 'state:set — Set state value' },
+] as const;
+
+function stringifyValue(v: unknown): string {
+  if (typeof v === 'string') return v;
+  return JSON.stringify(v) ?? '';
+}
+
+export function FunctionExecutorInspector({
+  node,
+  validationIssues,
+  onNodeChange,
+  onNodeConfigChange,
+  onNodeRemove,
+}: FunctionExecutorInspectorProps) {
+  const config = node.config as FunctionExecutorConfig;
+  const nodeIssues = validationIssues?.filter((i) => i.nodeId === node.id) ?? [];
+  const parameters = config.parameters ?? {};
+  const paramEntries = Object.entries(parameters);
+
+  const [newKey, setNewKey] = useState('');
+
+  const patchConfig = useCallback(
+    (patch: Partial<FunctionExecutorConfig>) => {
+      onNodeConfigChange(node.id, { ...config, ...patch });
+    },
+    [node.id, config, onNodeConfigChange],
+  );
+
+  const handleParamChange = useCallback(
+    (oldKey: string, newParamKey: string, value: string) => {
+      const next = { ...parameters };
+      if (newParamKey !== oldKey) {
+        delete next[oldKey];
+      }
+      next[newParamKey] = value;
+      patchConfig({ parameters: next });
+    },
+    [parameters, patchConfig],
+  );
+
+  const handleParamRemove = useCallback(
+    (key: string) => {
+      const next = { ...parameters };
+      delete next[key];
+      patchConfig({ parameters: next });
+    },
+    [parameters, patchConfig],
+  );
+
+  const handleParamAdd = useCallback(() => {
+    const key = newKey.trim() || `param${paramEntries.length + 1}`;
+    patchConfig({ parameters: { ...parameters, [key]: '' } });
+    setNewKey('');
+  }, [newKey, paramEntries.length, parameters, patchConfig]);
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2.5">
+          <div className="flex size-8 items-center justify-center rounded-lg bg-violet-500/10">
+            <FunctionSquare className="size-4 text-violet-400" />
+          </div>
+          <div className="text-[13px] font-semibold text-[var(--color-text-primary)]">
+            {node.label || 'Function Executor'}
+          </div>
+        </div>
+        <button
+          className="flex size-7 items-center justify-center rounded-lg text-[var(--color-text-muted)] transition-all duration-200 hover:bg-[var(--color-status-error)]/10 hover:text-[var(--color-status-error)]"
+          onClick={() => onNodeRemove(node.id)}
+          title="Remove node"
+          type="button"
+        >
+          <Trash2 className="size-3.5" />
+        </button>
+      </div>
+
+      {/* Label */}
+      <InputField
+        label="Label"
+        onChange={(v) => onNodeChange(node.id, { label: v })}
+        placeholder="Display label"
+        value={node.label}
+      />
+
+      {/* Function reference */}
+      <label className="block space-y-1.5">
+        <span className="text-[12px] font-medium text-[var(--color-text-secondary)]">Function</span>
+        <select
+          className="w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] px-3 py-2 text-[13px] text-[var(--color-text-primary)] outline-none transition focus:border-[var(--color-accent)]/50"
+          onChange={(e) => patchConfig({ functionRef: e.target.value })}
+          value={config.functionRef}
+        >
+          <option value="">Select a function…</option>
+          {builtInFunctions.map((fn) => (
+            <option key={fn.value} value={fn.value}>
+              {fn.label}
+            </option>
+          ))}
+        </select>
+      </label>
+
+      {/* Parameters editor */}
+      <div className="space-y-1.5">
+        <div className="flex items-center justify-between">
+          <span className="text-[12px] font-medium text-[var(--color-text-secondary)]">
+            Parameters
+          </span>
+          <button
+            className="flex size-6 items-center justify-center rounded-md text-[var(--color-text-muted)] transition-all duration-200 hover:bg-[var(--color-accent)]/10 hover:text-[var(--color-accent)]"
+            onClick={handleParamAdd}
+            title="Add parameter"
+            type="button"
+          >
+            <Plus className="size-3.5" />
+          </button>
+        </div>
+
+        {paramEntries.length === 0 && (
+          <p className="text-[11px] text-[var(--color-text-muted)]">No parameters defined.</p>
+        )}
+
+        {paramEntries.map(([key, value]) => (
+          <div className="flex items-center gap-1.5" key={key}>
+            <input
+              className="w-1/3 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] px-2 py-1.5 text-[12px] text-[var(--color-text-primary)] placeholder-[var(--color-text-muted)] outline-none transition focus:border-[var(--color-accent)]/50"
+              onChange={(e) => handleParamChange(key, e.target.value, stringifyValue(value))}
+              placeholder="key"
+              value={key}
+            />
+            <input
+              className="flex-1 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] px-2 py-1.5 text-[12px] text-[var(--color-text-primary)] placeholder-[var(--color-text-muted)] outline-none transition focus:border-[var(--color-accent)]/50"
+              onChange={(e) => handleParamChange(key, key, e.target.value)}
+              placeholder="value"
+              value={stringifyValue(value)}
+            />
+            <button
+              className="flex size-6 shrink-0 items-center justify-center rounded-md text-[var(--color-text-muted)] transition-all duration-200 hover:bg-[var(--color-status-error)]/10 hover:text-[var(--color-status-error)]"
+              onClick={() => handleParamRemove(key)}
+              title="Remove parameter"
+              type="button"
+            >
+              <X className="size-3" />
+            </button>
+          </div>
+        ))}
+      </div>
+
+      {/* Validation issues */}
+      {nodeIssues.length > 0 && (
+        <div className="space-y-1">
+          {nodeIssues.map((issue, i) => (
+            <div
+              className={`flex items-start gap-1.5 rounded-lg px-2.5 py-1.5 text-[11px] ${
+                issue.level === 'error'
+                  ? 'bg-[var(--color-status-error)]/10 text-[var(--color-status-error)]'
+                  : 'bg-[var(--color-status-warning)]/10 text-[var(--color-status-warning)]'
+              }`}
+              key={`${issue.field ?? 'v'}-${i}`}
+            >
+              <AlertCircle className="mt-0.5 size-3 shrink-0" />
+              <span>{issue.message}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/renderer/components/workflow/RequestPortInspector.tsx

@@ -0,0 +1,172 @@
+import { useCallback } from 'react';
+import { AlertCircle, Radio, Trash2 } from 'lucide-react';
+
+import type {
+  RequestPortConfig,
+  WorkflowNode,
+  WorkflowNodeConfig,
+  WorkflowValidationIssue,
+} from '@shared/domain/workflow';
+
+interface RequestPortInspectorProps {
+  node: WorkflowNode;
+  validationIssues?: WorkflowValidationIssue[];
+  onNodeChange: (nodeId: string, patch: Partial<WorkflowNode>) => void;
+  onNodeConfigChange: (nodeId: string, config: WorkflowNodeConfig) => void;
+  onNodeRemove: (nodeId: string) => void;
+}
+
+function InputField({
+  label,
+  value,
+  onChange,
+  multiline,
+  placeholder,
+}: {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  multiline?: boolean;
+  placeholder?: string;
+}) {
+  const base =
+    'w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] px-3 py-2 text-[13px] text-[var(--color-text-primary)] placeholder-[var(--color-text-muted)] outline-none transition focus:border-[var(--color-accent)]/50';
+  return (
+    <label className="block space-y-1.5">
+      <span className="text-[12px] font-medium text-[var(--color-text-secondary)]">{label}</span>
+      {multiline ? (
+        <textarea
+          className={`${base} min-h-20 resize-y`}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+          value={value}
+        />
+      ) : (
+        <input
+          className={base}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+          value={value}
+        />
+      )}
+    </label>
+  );
+}
+
+export function RequestPortInspector({
+  node,
+  validationIssues,
+  onNodeChange,
+  onNodeConfigChange,
+  onNodeRemove,
+}: RequestPortInspectorProps) {
+  const config = node.config as RequestPortConfig;
+  const nodeIssues = validationIssues?.filter((i) => i.nodeId === node.id) ?? [];
+
+  const patchConfig = useCallback(
+    (patch: Partial<RequestPortConfig>) => {
+      onNodeConfigChange(node.id, { ...config, ...patch });
+    },
+    [node.id, config, onNodeConfigChange],
+  );
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2.5">
+          <div className="flex size-8 items-center justify-center rounded-lg bg-teal-500/10">
+            <Radio className="size-4 text-teal-400" />
+          </div>
+          <div className="text-[13px] font-semibold text-[var(--color-text-primary)]">
+            {node.label || 'Request Port'}
+          </div>
+        </div>
+        <button
+          className="flex size-7 items-center justify-center rounded-lg text-[var(--color-text-muted)] transition-all duration-200 hover:bg-[var(--color-status-error)]/10 hover:text-[var(--color-status-error)]"
+          onClick={() => onNodeRemove(node.id)}
+          title="Remove node"
+          type="button"
+        >
+          <Trash2 className="size-3.5" />
+        </button>
+      </div>
+
+      {/* Label */}
+      <InputField
+        label="Label"
+        onChange={(v) => onNodeChange(node.id, { label: v })}
+        placeholder="Display label"
+        value={node.label}
+      />
+
+      {/* Port ID */}
+      <InputField
+        label="Port ID"
+        onChange={(v) => patchConfig({ portId: v })}
+        placeholder="Unique port identifier"
+        value={config.portId}
+      />
+
+      {/* Request Type */}
+      <div className="space-y-1.5">
+        <InputField
+          label="Request Type"
+          onChange={(v) => patchConfig({ requestType: v })}
+          placeholder="e.g. string, boolean, number, json"
+          value={config.requestType}
+        />
+        <p className="text-[11px] text-[var(--color-text-muted)]">
+          Supported types: string, boolean, number, json
+        </p>
+      </div>
+
+      {/* Response Type */}
+      <div className="space-y-1.5">
+        <InputField
+          label="Response Type"
+          onChange={(v) => patchConfig({ responseType: v })}
+          placeholder="e.g. string, boolean, number, json"
+          value={config.responseType}
+        />
+        <p className="text-[11px] text-[var(--color-text-muted)]">
+          Supported types: string, boolean, number, json
+        </p>
+      </div>
+
+      {/* Prompt */}
+      <InputField
+        label="Prompt"
+        multiline
+        onChange={(v) => patchConfig({ prompt: v || undefined })}
+        placeholder="Optional question shown to the user"
+        value={config.prompt ?? ''}
+      />
+
+      {/* Info callout */}
+      <div className="rounded-lg border border-teal-500/20 bg-teal-500/5 px-3 py-2 text-[12px] text-teal-400">
+        This node pauses workflow execution and requests input from the user. The response is
+        coerced to the specified response type before continuing.
+      </div>
+
+      {/* Validation issues */}
+      {nodeIssues.length > 0 && (
+        <div className="space-y-1">
+          {nodeIssues.map((issue, i) => (
+            <div
+              className={`flex items-start gap-1.5 rounded-lg px-2.5 py-1.5 text-[11px] ${
+                issue.level === 'error'
+                  ? 'bg-[var(--color-status-error)]/10 text-[var(--color-status-error)]'
+                  : 'bg-[var(--color-status-warning)]/10 text-[var(--color-status-warning)]'
+              }`}
+              key={`${issue.field ?? 'v'}-${i}`}
+            >
+              <AlertCircle className="mt-0.5 size-3 shrink-0" />
+              <span>{issue.message}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/renderer/components/workflow/WorkflowGraphInspector.tsx

@@ -17,7 +17,10 @@ import type {
   AgentNodeConfig,
 } from '@shared/domain/workflow';
 import { ModelSelect, ReasoningEffortSelect } from '@renderer/components/AgentConfigFields';
+import { CodeExecutorInspector } from '@renderer/components/workflow/CodeExecutorInspector';
 import { ConditionEditor } from '@renderer/components/workflow/ConditionEditor';
+import { FunctionExecutorInspector } from '@renderer/components/workflow/FunctionExecutorInspector';
+import { RequestPortInspector } from '@renderer/components/workflow/RequestPortInspector';
 import { SubWorkflowInspector } from '@renderer/components/workflow/SubWorkflowInspector';
 
 interface WorkflowGraphInspectorProps {
@@ -457,6 +460,49 @@ export function WorkflowGraphInspector({
     );
   }
 
+  if (selectedNode.kind === 'code-executor') {
+    return (
+      <div className="p-4">
+        <CodeExecutorInspector
+          node={selectedNode}
+          validationIssues={validationIssues}
+          onNodeChange={onNodeChange}
+          onNodeConfigChange={onNodeConfigChange}
+          onNodeRemove={onNodeRemove}
+        />
+      </div>
+    );
+  }
+
+  if (selectedNode.kind === 'function-executor') {
+    return (
+      <div className="p-4">
+        <FunctionExecutorInspector
+          node={selectedNode}
+          validationIssues={validationIssues}
+          onNodeChange={onNodeChange}
+          onNodeConfigChange={onNodeConfigChange}
+          onNodeRemove={onNodeRemove}
+        />
+      </div>
+    );
+  }
+
+  if (selectedNode.kind === 'request-port') {
+    return (
+      <div className="p-4">
+        <RequestPortInspector
+          node={selectedNode}
+          validationIssues={validationIssues}
+          onNodeChange={onNodeChange}
+          onNodeConfigChange={onNodeConfigChange}
+          onNodeRemove={onNodeRemove}
+        />
+      </div>
+    );
+  }
+
+  // Fallback for any future unknown node kinds
   return (
     <div className="p-4">
       <PlaceholderNodeInspector