feat(apollo-react): add NodeManifestPanel with parameter form (Phase 1)

apps/storybook/.storybook/preview.tsx

@@ -196,6 +196,12 @@ const preview: Preview = {
               'Layout',
               'Nodes',
               'Panels',
+              [
+                'Node Property Panel',
+                'Node Manifest Panel',
+                'Node Flyout Panel',
+                '*',
+              ],
               'Primitives',
               '*',
             ],

packages/apollo-react/src/canvas/components/CollapseConfig/CollapseConfig.stories.tsx

@@ -61,7 +61,7 @@ const collapseConfigManifest = {
 };
 
 const meta: Meta = {
-  title: 'Components/Panels/CollapseConfig',
+  title: 'Components/Panels/Node Collapse Config',
   parameters: { layout: 'fullscreen' },
   decorators: [
     (Story) => (

packages/apollo-react/src/canvas/components/NodeManifestPanel/ExpressionField.tsx

@@ -0,0 +1,119 @@
+import { CodeBlock } from '@uipath/apollo-wind';
+import { ChevronDown, Maximize2, Redo2, Sparkles, Undo2 } from 'lucide-react';
+import type { ParameterDefinition } from './NodeManifestPanel.types';
+
+function toLabel(key: string): string {
+  return key.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+interface ExpressionFieldProps {
+  param: ParameterDefinition;
+}
+
+export function ExpressionField({ param }: ExpressionFieldProps) {
+  const label = param.label ?? toLabel(param.key);
+  const expression =
+    typeof param.value === 'string' ? param.value : (param.defaultExpression ?? '');
+  const mode = param.expressionMode ?? 'expr';
+
+  return (
+    <div className="flex flex-col gap-2">
+      {/* Label row: field name left, AI + Insert right */}
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-medium text-foreground-muted">{label}</span>
+        <div className="flex items-center gap-0.5">
+          <button
+            type="button"
+            className="grid size-7 place-items-center rounded-lg text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground"
+          >
+            <Sparkles size={12} />
+          </button>
+          <button
+            type="button"
+            className="flex h-7 items-center gap-1 rounded-lg px-2 text-[11px] text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground"
+          >
+            <span className="font-mono text-[10px]">{'{x}'}</span>
+            <span>Insert</span>
+            <ChevronDown size={9} />
+          </button>
+        </div>
+      </div>
+
+      {/* Editor block — surfaces use CSS vars so they adapt to active theme */}
+      <div className="overflow-hidden rounded-xl border border-border-subtle bg-surface-raised">
+        {/* Block header: result label + expand */}
+        <div className="flex items-center justify-between border-b border-border-subtle bg-surface px-3 py-2">
+          <span className="font-mono text-xs text-foreground-muted">result</span>
+          <button
+            type="button"
+            className="grid size-6 place-items-center rounded text-foreground-subtle transition hover:text-foreground"
+          >
+            <Maximize2 size={11} />
+          </button>
+        </div>
+
+        {/* Toolbar: undo / redo | expr json */}
+        <div className="flex items-center gap-1 border-b border-border-subtle bg-surface px-2.5 py-1.5">
+          <button
+            type="button"
+            className="grid size-6 place-items-center rounded text-foreground-subtle transition hover:text-foreground"
+          >
+            <Undo2 size={12} />
+          </button>
+          <button
+            type="button"
+            className="grid size-6 place-items-center rounded text-foreground-subtle transition hover:text-foreground"
+          >
+            <Redo2 size={12} />
+          </button>
+          <div className="mx-1 h-3 w-px shrink-0 bg-border-subtle" />
+          <button
+            type="button"
+            className="rounded px-2 py-0.5 text-[11px] transition"
+            style={{
+              color:
+                mode === 'expr' ? 'var(--foreground)' : 'var(--foreground-subtle)',
+              fontWeight: mode === 'expr' ? 600 : 400,
+            }}
+          >
+            expr
+          </button>
+          <button
+            type="button"
+            className="rounded px-2 py-0.5 text-[11px] transition"
+            style={{
+              color:
+                mode === 'json' ? 'var(--foreground)' : 'var(--foreground-subtle)',
+              fontWeight: mode === 'json' ? 600 : 400,
+            }}
+          >
+            json
+          </button>
+        </div>
+
+        {/* Code — CodeBlock auto-detects theme; its own header is hidden via CSS */}
+        <CodeBlock
+          language={mode === 'json' ? 'json' : 'javascript'}
+          showLineNumbers
+          showCopyButton={false}
+          className="rounded-none border-0 [&>div:first-child]:hidden"
+        >
+          {expression || '// Enter expression…'}
+        </CodeBlock>
+
+        {/* Footer: status + cursor position */}
+        <div className="flex items-center justify-between border-t border-border-subtle bg-surface px-3 py-1.5">
+          <div className="flex items-center gap-1.5">
+            <span className="size-1.5 shrink-0 rounded-full bg-green-500" />
+            <span className="text-[10px] text-foreground-subtle">No errors</span>
+          </div>
+          <span className="text-[10px] text-foreground-subtle">Ln 1, Col 1</span>
+        </div>
+      </div>
+
+      {param.description && (
+        <p className="text-[11px] leading-4 text-foreground-subtle">{param.description}</p>
+      )}
+    </div>
+  );
+}