fix(OMN-11658): widen SEA stream and show prompt feedback

src/components/dashboard/control-plane/ControlPlanePage.test.tsx

@@ -106,8 +106,65 @@ describe('ControlPlanePage', () => {
     fireEvent.change(input, { target: { value: 'Classify sentiment' } });
     fireEvent.click(screen.getByRole('button', { name: /generate/i }));
     await waitFor(() => {
-      expect(screen.getByText(/classify sentiment/i)).toBeInTheDocument();
+      expect(screen.getAllByText(/classify sentiment/i).length).toBeGreaterThan(0);
     });
+    expect(screen.getByRole('status')).toHaveTextContent(/demo request queued/i);
+  });
+
+  it('shows immediate feedback while a live prompt request is pending', async () => {
+    vi.stubEnv('VITE_DATA_SOURCE', 'http');
+    vi.stubEnv('VITE_HTTP_DATA_SOURCE_URL', 'http://backend.test');
+    const source: ProtocolSnapshotSource = {
+      async *readAll() {
+        yield* [];
+      },
+    };
+    vi.stubGlobal('fetch', vi.fn().mockReturnValue(new Promise(() => undefined)));
+
+    render(
+      <DataSourceTestProvider client={qc} source={source}>
+        <ControlPlanePage config={{}} />
+      </DataSourceTestProvider>,
+    );
+
+    const input = await screen.findByPlaceholderText(/describe the node/i);
+    fireEvent.change(input, { target: { value: 'Classify sentiment' } });
+    fireEvent.click(screen.getByRole('button', { name: /generate/i }));
+
+    expect(screen.getByRole('button', { name: /generate/i })).toHaveTextContent(/submitting/i);
+    expect(screen.getByRole('status')).toHaveTextContent(/submitting generation request/i);
+    expect(screen.getByText(/submitted generation request: classify sentiment/i)).toBeInTheDocument();
+  });
+
+  it('shows accepted feedback when a live prompt request returns a correlation', async () => {
+    vi.stubEnv('VITE_DATA_SOURCE', 'http');
+    vi.stubEnv('VITE_HTTP_DATA_SOURCE_URL', 'http://backend.test');
+    const source: ProtocolSnapshotSource = {
+      async *readAll() {
+        yield* [];
+      },
+    };
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      statusText: 'OK',
+      json: async () => ({ correlation_id: 'corr-live-123' }),
+    }));
+
+    render(
+      <DataSourceTestProvider client={qc} source={source}>
+        <ControlPlanePage config={{}} />
+      </DataSourceTestProvider>,
+    );
+
+    const input = await screen.findByPlaceholderText(/describe the node/i);
+    fireEvent.change(input, { target: { value: 'Classify sentiment' } });
+    fireEvent.click(screen.getByRole('button', { name: /generate/i }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('status')).toHaveTextContent(/corr-live-123/i);
+    });
+    expect(screen.getByText(/generation request accepted by backend: corr-live-123/i)).toBeInTheDocument();
   });
 
   it('renders an error event when submit returns a non-2xx response', async () => {

src/components/dashboard/control-plane/ControlPlanePage.tsx

@@ -10,6 +10,12 @@ import { DelegationTriggerPanel } from '@/components/dashboard/delegation-contro
 
 import { DATA_SOURCE_DEFAULT_MODE } from '@/config/generated/data-source-defaults';
 
+type PromptSubmitState =
+  | { phase: 'idle'; message?: string }
+  | { phase: 'submitting'; message: string }
+  | { phase: 'accepted'; message: string }
+  | { phase: 'error'; message: string };
+
 function getDataSourceMode(): string {
   try {
     return import.meta.env.VITE_DATA_SOURCE ?? DATA_SOURCE_DEFAULT_MODE;
@@ -30,6 +36,7 @@ export default function ControlPlanePage({
   });
 
   const [localEvents, setLocalEvents] = useState<PipelineEvent[]>([]);
+  const [submitState, setSubmitState] = useState<PromptSubmitState>({ phase: 'idle' });
 
   const allEvents = useMemo(() => {
     const projected = data ?? [];
@@ -45,6 +52,7 @@ export default function ControlPlanePage({
       const now = new Date().toISOString();
       const correlationId = `demo-${Date.now()}`;
       const base = Date.now();
+      setSubmitState({ phase: 'accepted', message: `Demo request queued: ${prompt}` });
       setLocalEvents((prev) => [
         ...prev,
         {
@@ -80,6 +88,20 @@ export default function ControlPlanePage({
         import.meta.env.VITE_HTTP_DATA_SOURCE_URL ??
         import.meta.env.VITE_SQLITE_DATA_SOURCE_URL ??
         '';
+      const now = Date.now();
+      const pendingCorrelationId = `pending-${now}`;
+      setSubmitState({ phase: 'submitting', message: `Submitting generation request: ${prompt}` });
+      setLocalEvents((prev) => [
+        ...prev,
+        {
+          id: `submit-${now}`,
+          type: 'request' as const,
+          timestamp: new Date(now).toISOString(),
+          source: 'control-plane',
+          message: `Submitted generation request: ${prompt}`,
+          correlationId: pendingCorrelationId,
+        },
+      ]);
       void (async () => {
         try {
           if (!baseUrl) throw new Error('Missing data source base URL');
@@ -93,9 +115,26 @@ export default function ControlPlanePage({
             const detail = body ? `: ${body}` : '';
             throw new Error(`HTTP ${response.status} ${response.statusText}${detail}`);
           }
+          const body = await response.json().catch(() => ({})) as { correlation_id?: string };
+          const correlationId = body.correlation_id ?? pendingCorrelationId;
+          setSubmitState({
+            phase: 'accepted',
+            message: `Generation request accepted. Correlation: ${correlationId}`,
+          });
+          setLocalEvents((prev) => [
+            ...prev,
+            {
+              id: `accepted-${now}`,
+              type: 'success' as const,
+              timestamp: new Date().toISOString(),
+              source: 'control-plane',
+              message: `Generation request accepted by backend: ${correlationId}`,
+              correlationId,
+            },
+          ]);
         } catch (err: unknown) {
           console.warn('[ControlPlanePage] POST failed:', err);
-          const now = Date.now();
+          setSubmitState({ phase: 'error', message: `Submit failed: ${String(err)}` });
           setLocalEvents((prev) => [
             ...prev,
             {
@@ -145,11 +184,20 @@ export default function ControlPlanePage({
           mcp={serviceStatus}
         />
 
-        <PromptInput onSubmit={handlePromptSubmit} />
+        <PromptInput
+          onSubmit={handlePromptSubmit}
+          status={submitState.phase}
+          feedback={submitState.message}
+        />
         {isLive && <DelegationTriggerPanel />}
 
-        <div>
-          <div className="eyebrow" style={{ marginBottom: 6 }}>
+        <div
+          style={{
+            marginInline: -12,
+            width: 'calc(100% + 24px)',
+          }}
+        >
+          <div className="eyebrow" style={{ marginBottom: 6, paddingInline: 12 }}>
             <Text as="span" size="xs" weight="bold" color="tertiary" className="text-tracked text-upper">
               Pipeline Events
             </Text>

src/components/dashboard/control-plane/PipelineLogStream.tsx

@@ -45,6 +45,8 @@ export function PipelineLogStream({ events }: { events: PipelineEvent[] }) {
         border: '1px solid var(--line)',
         borderRadius: 6,
         padding: 0,
+        width: '100%',
+        minHeight: events.length === 0 ? 112 : 0,
         maxHeight: 320,
         overflowY: 'auto',
       }}

src/components/dashboard/control-plane/PromptInput.tsx

@@ -1,13 +1,22 @@
 import { useState, useCallback, type FormEvent } from 'react';
+import { Text } from '@/components/ui/typography';
 import './control-plane.css';
 
 interface PromptInputProps {
   onSubmit: (prompt: string) => void;
   disabled?: boolean;
+  status?: 'idle' | 'submitting' | 'accepted' | 'error';
+  feedback?: string;
 }
 
-export function PromptInput({ onSubmit, disabled }: PromptInputProps) {
+export function PromptInput({
+  onSubmit,
+  disabled,
+  status = 'idle',
+  feedback,
+}: PromptInputProps) {
   const [value, setValue] = useState('');
+  const isSubmitting = status === 'submitting';
 
   const handleSubmit = useCallback(
     (e: FormEvent) => {
@@ -21,30 +30,44 @@ export function PromptInput({ onSubmit, disabled }: PromptInputProps) {
   );
 
   return (
-    <form
-      onSubmit={handleSubmit}
-      style={{
-        display: 'flex',
-        gap: 8,
-        padding: '12px 0',
-      }}
-    >
-      <input
-        type="text"
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        placeholder="Describe the node to generate..."
-        disabled={disabled}
-        className="control-plane-prompt-input"
-      />
-      <button
-        type="submit"
-        disabled={disabled || !value.trim()}
-        className="btn primary"
-        aria-label="Generate"
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+      <form
+        onSubmit={handleSubmit}
+        style={{
+          display: 'flex',
+          gap: 8,
+          padding: '12px 0 4px',
+        }}
       >
-        Generate
-      </button>
-    </form>
+        <input
+          type="text"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder="Describe the node to generate..."
+          disabled={disabled || isSubmitting}
+          className="control-plane-prompt-input"
+        />
+        <button
+          type="submit"
+          disabled={disabled || isSubmitting || !value.trim()}
+          className="btn primary"
+          aria-label="Generate"
+        >
+          {isSubmitting ? 'Submitting...' : 'Generate'}
+        </button>
+      </form>
+      {feedback && (
+        <Text
+          as="div"
+          size="xs"
+          color={status === 'error' ? 'bad' : status === 'accepted' ? 'ok' : 'secondary'}
+          role="status"
+          aria-live="polite"
+          className="control-plane-submit-feedback"
+        >
+          {feedback}
+        </Text>
+      )}
+    </div>
   );
 }