feat(gateway): serve the non-chat families through the pipeline

apps/web/src/components/requests/detail.tsx

@@ -8,6 +8,7 @@ import type { PropsWithChildren, ReactNode } from 'react';
 import { contentTypeOf, EMPTY_BODY, renderBody, type RenderedBody } from './body-render';
 import { errorLabel, requestSeverity } from './format';
 import { isSensitiveHeader, redactHeaderValue } from './header-redact';
+import { renderRunEvents } from './run-render';
 import {
   detectCollectKind,
   renderStreamEvents,
@@ -194,14 +195,22 @@ export function RequestDetailPanel({ collected: loadedCollected, error: loadedEr
   }
   const { collected, error, record, recordId } = shown;
 
-  const requestBody = record ? renderBody(record.request.body, contentTypeOf(record.request.headers)) : EMPTY_BODY;
-  const responseBody = record?.response.body.type === 'bytes' ? renderBody(record.response.body.body, contentTypeOf(record.response.headers)) : EMPTY_BODY;
+  // The two shapes a record comes in. An endpoint served by the onion is
+  // recorded as its edges and draws the four sections below; a pipelined one is
+  // recorded as its whole run, and the run's event stream is the whole of it.
+  const edge = record?.shape === 'edge' ? record : null;
+  const requestBody = edge ? renderBody(edge.request.body, contentTypeOf(edge.request.headers)) : EMPTY_BODY;
+  const responseBody = edge?.response.body.type === 'bytes' ? renderBody(edge.response.body.body, contentTypeOf(edge.response.headers)) : EMPTY_BODY;
   const streamEvents = useMemo<DumpStreamEvent[]>(
-    () => record?.response.body.type === 'stream' ? record.response.body.events : [],
+    () => record?.shape === 'edge' && record.response.body.type === 'stream' ? record.response.body.events : [],
     [record],
   );
   const collectKind = record ? detectCollectKind(record.meta.path) : null;
   const renderedEvents = useMemo(() => renderStreamEvents(collectKind, streamEvents), [collectKind, streamEvents]);
+  const runEvents = useMemo(
+    () => record?.shape === 'run' ? renderRunEvents(record.events) : [],
+    [record],
+  );
 
   if (!recordId) return <div className="grid h-full place-items-center p-4"><EmptyStateLine>{t('dashboard.requests.selectPrompt')}</EmptyStateLine></div>;
   // This replaces every section rather than sitting in one, so it takes the
@@ -210,8 +219,40 @@ export function RequestDetailPanel({ collected: loadedCollected, error: loadedEr
   if (error) return <OutcomeMessageBar className="!m-4">{error}</OutcomeMessageBar>;
   if (!record) return null;
 
-  const severity = requestSeverity(record.response.status, record.meta.error);
+  const severity = requestSeverity(record.meta.status, record.meta.error);
   const responseError = errorLabel(record.meta.error);
+
+  if (record.shape === 'run') {
+    return (
+      <ScrollArea axes="vertical" className="h-full" contentClassName="min-h-full" noTabIndex>
+        <section>
+          <DetailSectionHeader
+            title={t('dashboard.requests.run')}
+            detail={<>
+              <HttpMethodBadge method={record.meta.method} />
+              <Text size={300} className="font-mono">{record.meta.path}</Text>
+              <HttpStatusBadge severity={severity}>{record.meta.status ?? t('dashboard.requests.noStatus')}</HttpStatusBadge>
+              {responseError && <Text size={200} className={dangerText}>{responseError}</Text>}
+            </>}
+            copyText={record.events || undefined}
+          />
+          <SectionBody>
+            {runEvents.length === 0 ? <EmptyStateLine className="p-4">{t('dashboard.requests.noRunEvents')}</EmptyStateLine> : runEvents.map((event, index) => (
+              <div className={s.section} key={index}>
+                <div className="flex items-center gap-2 px-4 pt-3">
+                  <Text size={100} className="font-mono mono-size-100 text-fui-fg2">{event.type || t('dashboard.requests.unlabeled')}</Text>
+                  {event.subject && <Text size={100} className="font-mono mono-size-100 text-fui-fg3">{event.subject}</Text>}
+                  {event.parseError && <Text size={100} className={dangerText}>{t('dashboard.requests.jsonParseFailed')}</Text>}
+                </div>
+                <CodeView body={{ text: event.text, copyText: event.text, decodeError: event.parseError, isJson: !event.parseError }} />
+              </div>
+            ))}
+          </SectionBody>
+        </section>
+      </ScrollArea>
+    );
+  }
+
   const requestHeadersCopy = record.request.headers.map(([name, value]) => `${name}: ${value}`).join('\n');
   const responseHeadersCopy = record.response.headers.map(([name, value]) => `${name}: ${value}`).join('\n');
   const collectedCopyText = collected?.result === null || collected?.result === undefined

apps/web/src/components/requests/run-render.ts

@@ -0,0 +1,46 @@
+import { errorMessage } from '../../lib/error-message';
+import type { DumpEvent } from '@floway-dev/gateway/dump-types';
+
+// A pipelined turn is recorded as its whole run: one NDJSON line per event, in
+// the order the run emitted them. A line is also one SSE `data:` payload, so
+// what this reads out of a stored record is what a live observer would be handed
+// frame by frame.
+
+export interface RenderedRunEvent {
+  /** The event's own kind — `stage.entered`, `object`, `stream.frame`, … */
+  type: string;
+  /** Which stage, object or stream it is about. Ids, not prose. */
+  subject: string | null;
+  text: string;
+  parseError: string | null;
+}
+
+// Only three of the six name a stage, and each of the other three names its own
+// namespace, so the subject is read off the event rather than looked up.
+const subjectOf = (event: DumpEvent): string | null => {
+  switch (event.type) {
+  case 'stage.entered': return event.name;
+  case 'stage.leaved':  return `#${event.stageId}`;
+  case 'stage.log':     return event.level;
+  case 'object':        return `#${event.fromObjectId}`;
+  case 'stream.frame':
+  case 'stream.end':    return `#${event.streamId}`;
+  }
+};
+
+// A line the gateway wrote and this cannot parse is shown as it was stored, with
+// the failure named: a record that renders as nothing would read as an empty run.
+export const renderRunEvents = (ndjson: string): RenderedRunEvent[] =>
+  ndjson.split('\n').filter(line => line.length > 0).map(line => {
+    try {
+      const event = JSON.parse(line) as DumpEvent;
+      return {
+        type: event.type,
+        subject: subjectOf(event),
+        text: JSON.stringify(event, null, 2),
+        parseError: null,
+      };
+    } catch (error) {
+      return { type: '', subject: null, text: line, parseError: errorMessage(error) };
+    }
+  });

apps/web/src/i18n/locales/en.ts

@@ -957,6 +957,8 @@ const en = {
         apiKeysLink: 'API Keys',
         request: 'Request',
         requestBody: 'Request body',
+        run: 'Run',
+        noRunEvents: 'This run recorded no events.',
         response: 'Response',
         responseBody: 'Response body',
         noRequestBody: 'No request body',

apps/web/src/i18n/locales/zh-Hans.ts

@@ -910,6 +910,8 @@ const zhHansCN = {
         apiKeysLink: 'API 密钥',
         request: '请求',
         requestBody: '请求体',
+        run: '运行过程',
+        noRunEvents: '这次运行没有记录到任何事件。',
         response: '响应',
         responseBody: '响应体',
         noRequestBody: '没有请求体',

apps/web/src/routes/dashboard-monitor-requests.tsx

@@ -66,7 +66,9 @@ export async function clientLoader({ request }: Route.ClientLoaderArgs): Promise
   ]);
   const record = recordResult?.data ?? null;
   const collectKind = record ? detectCollectKind(record.meta.path) : null;
-  const streamEvents = record?.response.body.type === 'stream' ? record.response.body.events : [];
+  // Only an edge-shaped record carries a captured frame log to collect; a run
+  // records its stream inside its own events and the detail panel reads it there.
+  const streamEvents = record?.shape === 'edge' && record.response.body.type === 'stream' ? record.response.body.events : [];
   const collected = collectKind && streamEvents.length ? await collectStream(collectKind, streamEvents) : null;
   return {
     collected,