okengine 0.22.0 → 0.23.0

package/src/console/ui-next/src/features/flows/traces/trace-request-section.tsx

@@ -28,12 +28,16 @@ import { HighlightedJson } from "@/components/highlighted-json";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
+import type { RunHttpFrame } from "@/client.ts";
 import { httpMethodBadgeClass, httpMethodRailClass } from "./http-method.ts";
+import { RequestClientCard } from "./request-client-card.tsx";
+import { httpStatusRailClass, httpStatusReason, httpStatusTextClass } from "./http-status.ts";
 import {
   fieldCopyText,
   inputByteLabel,
   inputFieldRows,
   inputShapeHint,
+  payloadHasContent,
   type InputFieldKind,
   type InputFieldRow,
 } from "./request-input-view.ts";
@@ -50,6 +54,11 @@ export type TraceRequestSectionProps = {
   readonly input: unknown;
   /** Projected run output snapshot. */
   readonly output: unknown;
+  /**
+   * HTTP wire frame. `null` for non-HTTP runs and rows recorded before the
+   * frame existed — those still show the body only.
+   */
+  readonly http: RunHttpFrame | null;
   /** Declared / framework error code when the run failed. */
   readonly error: string | null;
   /** Optional human message paired with {@link error}. */
@@ -81,6 +90,7 @@ export function TraceRequestSection({
   headline,
   input,
   output,
+  http,
   error,
   errorMessage,
   inputOpen,
@@ -88,10 +98,19 @@ export function TraceRequestSection({
   outputOpen,
   onOutputOpenChange,
 }: TraceRequestSectionProps): JSX.Element {
-  const endpoint = method && path ? `${method} ${path}` : headline;
+  const shownMethod = http?.request.method ?? method;
+  const shownPath = http?.request.path ?? path;
+  const endpoint = shownMethod && shownPath ? `${shownMethod} ${shownPath}` : headline;
+  const query = http?.request.query ?? {};
+  const requestHeaders = http?.request.headers ?? {};
+  const hasQuery = Object.keys(query).length > 0;
+  const hasRequestHeaders = Object.keys(requestHeaders).length > 0;
+  const responseStatus = http?.response?.status;
+  const responseHeaders = http?.response?.headers ?? {};
+  const hasResponseHeaders = Object.keys(responseHeaders).length > 0;
   const failed = error !== null;
-  const hasInput = input !== null && input !== undefined;
-  const hasOutput = output !== null && output !== undefined;
+  const hasInput = payloadHasContent(input);
+  const hasOutput = payloadHasContent(output);
   const responseFills = outputOpen && !failed && hasOutput;
   const requestFills = inputOpen && hasInput && !responseFills;
 
@@ -119,22 +138,55 @@ export function TraceRequestSection({
 
         <div data-slot="trace-request-frame" className={requestFills ? FILL_COL_CLASS : undefined}>
           <div className={cn("flex min-w-0", requestFills && "min-h-0 flex-1")}>
-            <MethodRail method={method} />
+            <MethodRail method={shownMethod} />
             <div className={cn("flex min-w-0 flex-1 flex-col", requestFills && "min-h-0")}>
-              <RequestEndpoint method={method} path={path} headline={headline} />
-              <PayloadPanel
-                value={input}
-                open={inputOpen}
-                onOpenChange={onInputOpenChange}
-                label="Body"
-                empty="No stored input — replay uses an empty body when the ledger has none."
-                copyLabel="Copy body JSON"
-                copySlot="trace-request-copy-input"
-                toggleSlot="trace-input-toggle"
-                fieldsSlot="trace-request-fields"
-                jsonSlot="trace-input-json"
-                fill={requestFills}
-              />
+              <RequestEndpoint method={shownMethod} path={shownPath} headline={headline} />
+              {hasRequestHeaders ? <RequestClientCard headers={requestHeaders} /> : null}
+              {hasQuery ? (
+                <PayloadPanel
+                  value={query}
+                  open
+                  onOpenChange={() => undefined}
+                  label="Query"
+                  empty=""
+                  copyLabel="Copy query JSON"
+                  copySlot="trace-request-copy-query"
+                  toggleSlot="trace-request-query-toggle"
+                  fieldsSlot="trace-request-query"
+                  jsonSlot="trace-request-query-json"
+                  localOpen
+                />
+              ) : null}
+              {hasRequestHeaders ? (
+                <PayloadPanel
+                  value={requestHeaders}
+                  open
+                  onOpenChange={() => undefined}
+                  label="Headers"
+                  empty=""
+                  copyLabel="Copy request headers"
+                  copySlot="trace-request-copy-headers"
+                  toggleSlot="trace-request-headers-toggle"
+                  fieldsSlot="trace-request-headers"
+                  jsonSlot="trace-request-headers-json"
+                  localOpen
+                />
+              ) : null}
+              {hasInput ? (
+                <PayloadPanel
+                  value={input}
+                  open={inputOpen}
+                  onOpenChange={onInputOpenChange}
+                  label="Body"
+                  empty=""
+                  copyLabel="Copy body JSON"
+                  copySlot="trace-request-copy-input"
+                  toggleSlot="trace-input-toggle"
+                  fieldsSlot="trace-request-fields"
+                  jsonSlot="trace-input-json"
+                  fill={requestFills}
+                />
+              ) : null}
             </div>
           </div>
         </div>
@@ -150,7 +202,7 @@ export function TraceRequestSection({
         <div className={EXPLORER_STRIP_CLASS}>
           <h3 className={cn(SECTION_HEAD_CLASS, "flex items-center px-2")}>Response</h3>
           <div className="ml-auto flex h-full items-stretch">
-            {!failed && output !== null && output !== undefined ? (
+            {!failed && hasOutput ? (
               <CopyIconButton
                 label="Copy response JSON"
                 text={JSON.stringify(output, null, 2)}
@@ -167,33 +219,8 @@ export function TraceRequestSection({
           </div>
         </div>
 
-        {failed ? (
-          <div data-slot="trace-response-error" role="alert">
-            <div className="flex min-w-0">
-              <div
-                className="w-1 shrink-0 self-stretch bg-destructive"
-                aria-hidden
-                data-slot="trace-response-rail"
-              />
-              <div className="flex min-w-0 flex-1 flex-col gap-1 px-2.5 py-2.5">
-                <div className="flex items-center gap-1.5">
-                  <HugeiconsIcon
-                    icon={Alert02Icon}
-                    className="size-3.5 shrink-0 text-destructive"
-                    aria-hidden
-                  />
-                  <span className="font-mono text-xs font-semibold text-destructive">{error}</span>
-                </div>
-                {errorMessage ? (
-                  <p className="text-[11px] leading-snug text-destructive/90">{errorMessage}</p>
-                ) : (
-                  <p className="text-[11px] text-muted-foreground">
-                    Run failed with this error code — no return value was stored.
-                  </p>
-                )}
-              </div>
-            </div>
-          </div>
+        {failed && responseStatus === undefined ? (
+          <ResponseError error={error} errorMessage={errorMessage} />
         ) : (
           <div
             data-slot="trace-response-frame"
@@ -201,24 +228,49 @@ export function TraceRequestSection({
           >
             <div className={cn("flex min-w-0", responseFills && "min-h-0 flex-1")}>
               <div
-                className="w-1 shrink-0 self-stretch bg-emerald-500"
+                className={cn(
+                  "w-1 shrink-0 self-stretch",
+                  responseStatus !== undefined
+                    ? httpStatusRailClass(responseStatus)
+                    : "bg-emerald-500",
+                )}
                 aria-hidden
                 data-slot="trace-response-rail"
               />
               <div className={cn("flex min-w-0 flex-1 flex-col", responseFills && "min-h-0")}>
-                <PayloadPanel
-                  value={output}
-                  open={outputOpen}
-                  onOpenChange={onOutputOpenChange}
-                  label="Body"
-                  empty="No stored response — this run completed without a return value."
-                  copyLabel="Copy response JSON"
-                  copySlot="trace-response-copy-body"
-                  toggleSlot="trace-response-toggle"
-                  fieldsSlot="trace-response-fields"
-                  jsonSlot="trace-response-json"
-                  fill={responseFills}
-                />
+                {responseStatus !== undefined ? <ResponseStatus status={responseStatus} /> : null}
+                {hasResponseHeaders ? (
+                  <PayloadPanel
+                    value={responseHeaders}
+                    open
+                    onOpenChange={() => undefined}
+                    label="Headers"
+                    empty=""
+                    copyLabel="Copy response headers"
+                    copySlot="trace-response-copy-headers"
+                    toggleSlot="trace-response-headers-toggle"
+                    fieldsSlot="trace-response-headers"
+                    jsonSlot="trace-response-headers-json"
+                    localOpen
+                  />
+                ) : null}
+                {failed ? (
+                  <ResponseError error={error} errorMessage={errorMessage} bare />
+                ) : hasOutput ? (
+                  <PayloadPanel
+                    value={output}
+                    open={outputOpen}
+                    onOpenChange={onOutputOpenChange}
+                    label="Body"
+                    empty=""
+                    copyLabel="Copy response JSON"
+                    copySlot="trace-response-copy-body"
+                    toggleSlot="trace-response-toggle"
+                    fieldsSlot="trace-response-fields"
+                    jsonSlot="trace-response-json"
+                    fill={responseFills}
+                  />
+                ) : null}
               </div>
             </div>
           </div>
@@ -228,6 +280,82 @@ export function TraceRequestSection({
   );
 }
 
+/**
+ * Status line for an HTTP response frame.
+ *
+ * @param props - Status code
+ */
+function ResponseStatus({ status }: { readonly status: number }): JSX.Element {
+  const reason = httpStatusReason(status);
+  return (
+    <div className="flex min-w-0 items-center gap-2 px-2.5 py-2" data-slot="trace-response-status">
+      <span
+        className={cn(
+          "shrink-0 font-mono text-[10px] font-semibold tabular-nums",
+          httpStatusTextClass(status),
+        )}
+      >
+        {status}
+      </span>
+      {reason ? <span className="font-mono text-xs text-foreground">{reason}</span> : null}
+    </div>
+  );
+}
+
+/**
+ * Failed-run alert. `bare` sits inside a frame that already has a rail.
+ *
+ * @param props - Error code and optional message
+ */
+function ResponseError({
+  error,
+  errorMessage,
+  bare = false,
+}: {
+  readonly error: string | null;
+  readonly errorMessage: string | null;
+  readonly bare?: boolean;
+}): JSX.Element {
+  const body = (
+    <div className="flex min-w-0 flex-1 flex-col gap-1 px-2.5 py-2.5">
+      <div className="flex items-center gap-1.5">
+        <HugeiconsIcon
+          icon={Alert02Icon}
+          className="size-3.5 shrink-0 text-destructive"
+          aria-hidden
+        />
+        <span className="font-mono text-xs font-semibold text-destructive">{error}</span>
+      </div>
+      {errorMessage ? (
+        <p className="text-[11px] leading-snug text-destructive/90">{errorMessage}</p>
+      ) : (
+        <p className="text-[11px] text-muted-foreground">
+          Run failed with this error code — no return value was stored.
+        </p>
+      )}
+    </div>
+  );
+  if (bare) {
+    return (
+      <div data-slot="trace-response-error" role="alert" className="border-t border-border/60">
+        {body}
+      </div>
+    );
+  }
+  return (
+    <div data-slot="trace-response-error" role="alert">
+      <div className="flex min-w-0">
+        <div
+          className="w-1 shrink-0 self-stretch bg-destructive"
+          aria-hidden
+          data-slot="trace-response-rail"
+        />
+        {body}
+      </div>
+    </div>
+  );
+}
+
 /**
  * Collapsible Fields/Raw payload panel shared by Request and Output.
  *
@@ -245,6 +373,7 @@ function PayloadPanel({
   fieldsSlot,
   jsonSlot,
   fill = false,
+  localOpen = false,
 }: {
   readonly value: unknown;
   readonly open: boolean;
@@ -258,6 +387,8 @@ function PayloadPanel({
   readonly jsonSlot: string;
   /** Grow to fill leftover sheet height instead of capping at 14rem. */
   readonly fill?: boolean;
+  /** Own the open state, starting expanded. Used for query and headers. */
+  readonly localOpen?: boolean;
 }): JSX.Element {
   const hasValue = value !== null && value !== undefined;
   const json = useMemo(() => (hasValue ? JSON.stringify(value, null, 2) : ""), [hasValue, value]);
@@ -265,6 +396,9 @@ function PayloadPanel({
   const shapeHint = useMemo(() => (hasValue ? inputShapeHint(value) : null), [hasValue, value]);
   const byteLabel = useMemo(() => (hasValue ? inputByteLabel(json) : null), [hasValue, json]);
   const [view, setView] = useState<BodyView>(rows ? "fields" : "raw");
+  const [ownOpen, setOwnOpen] = useState(true);
+  const panelOpen = localOpen ? ownOpen : open;
+  const setPanelOpen = localOpen ? setOwnOpen : onOpenChange;
 
   useEffect(() => {
     setView(rows ? "fields" : "raw");
@@ -280,9 +414,9 @@ function PayloadPanel({
 
   return (
     <Collapsible
-      open={open}
-      onOpenChange={onOpenChange}
-      className={fill ? FILL_COL_CLASS : undefined}
+      open={panelOpen}
+      onOpenChange={setPanelOpen}
+      className={fill ? FILL_COL_CLASS : "shrink-0"}
     >
       <div className={cn(EXPLORER_STRIP_CLASS, "border-t")}>
         <CollapsibleTrigger
@@ -291,7 +425,7 @@ function PayloadPanel({
         >
           <HugeiconsIcon
             icon={ArrowDown01Icon}
-            className={cn(EXPLORER_CHEVRON_CLASS, !open && "-rotate-90")}
+            className={cn(EXPLORER_CHEVRON_CLASS, !panelOpen && "-rotate-90")}
           />
           <span>{label}</span>
           {shapeHint ? (
@@ -453,7 +587,7 @@ function ViewToggleButton({
 }
 
 /**
- * Interactive key / value table for flat object bodies.
+ * Interactive key / value tree. Objects and arrays expand into child fields.
  *
  * @param props - Projected field rows
  */
@@ -467,42 +601,87 @@ function FieldsTable({
   return (
     <ul data-slot={dataSlot}>
       {rows.map((row) => (
-        <li
-          key={row.key}
-          className={cn(EXPLORER_ROW_CLASS, "group/field items-start")}
-          data-slot="trace-payload-field"
-        >
-          <div className="flex min-w-0 flex-1 flex-col gap-0.5 sm:flex-row sm:items-baseline sm:gap-3">
-            <span className="w-[7.5rem] shrink-0 truncate font-mono text-[11px] font-medium text-sky-600 dark:text-sky-400">
-              {row.key}
-            </span>
-            <span
-              className={cn(
-                "min-w-0 flex-1 break-all font-mono text-[11px] leading-snug",
-                valueToneClass(row.kind),
-              )}
-              title={row.display}
-            >
-              {row.display}
-            </span>
-          </div>
-          <span className="mt-0.5 shrink-0 font-mono text-[9px] tracking-wide text-muted-foreground uppercase opacity-70">
-            {row.kind}
-          </span>
-          <div className="opacity-0 transition-opacity group-hover/field:opacity-100 group-focus-within/field:opacity-100">
-            <CopyIconButton
-              label={`Copy ${row.key}`}
-              text={fieldCopyText(row.value)}
-              dataSlot="trace-payload-copy-field"
-              bare
-            />
-          </div>
-        </li>
+        <PayloadFieldRow key={row.key} row={row} depth={0} />
       ))}
     </ul>
   );
 }
 
+/**
+ * One payload field. Containers toggle a nested field list.
+ *
+ * @param props - Row + indent depth
+ */
+function PayloadFieldRow({
+  row,
+  depth,
+}: {
+  readonly row: InputFieldRow;
+  readonly depth: number;
+}): JSX.Element {
+  const expandable = row.children !== null;
+  const [open, setOpen] = useState(false);
+
+  return (
+    <li data-slot="trace-payload-field" data-depth={depth}>
+      <div
+        className={cn(EXPLORER_ROW_CLASS, "group/field items-start")}
+        style={depth > 0 ? { paddingLeft: `${10 + depth * 14}px` } : undefined}
+      >
+        {expandable ? (
+          <button
+            type="button"
+            className="mt-0.5 flex size-3.5 shrink-0 items-center justify-center text-muted-foreground"
+            aria-expanded={open}
+            aria-label={`${open ? "Collapse" : "Expand"} ${row.key}`}
+            data-slot="trace-payload-expand"
+            onClick={() => setOpen((next) => !next)}
+          >
+            <HugeiconsIcon
+              icon={ArrowDown01Icon}
+              className={cn(EXPLORER_CHEVRON_CLASS, !open && "-rotate-90")}
+            />
+          </button>
+        ) : (
+          <span className="mt-0.5 size-3.5 shrink-0" aria-hidden />
+        )}
+        <div className="flex min-w-0 flex-1 flex-col gap-0.5 sm:flex-row sm:items-baseline sm:gap-3">
+          <span className="w-[7.5rem] shrink-0 truncate font-mono text-[11px] font-medium text-sky-600 dark:text-sky-400">
+            {row.key}
+          </span>
+          <span
+            className={cn(
+              "min-w-0 flex-1 break-all font-mono text-[11px] leading-snug",
+              valueToneClass(row.kind),
+            )}
+            title={row.display}
+          >
+            {row.display}
+          </span>
+        </div>
+        <span className="mt-0.5 shrink-0 font-mono text-[9px] tracking-wide text-muted-foreground uppercase opacity-70">
+          {row.kind}
+        </span>
+        <div className="opacity-0 transition-opacity group-hover/field:opacity-100 group-focus-within/field:opacity-100">
+          <CopyIconButton
+            label={`Copy ${row.key}`}
+            text={fieldCopyText(row.value)}
+            dataSlot="trace-payload-copy-field"
+            bare
+          />
+        </div>
+      </div>
+      {expandable && open ? (
+        <ul data-slot="trace-payload-children">
+          {row.children?.map((child) => (
+            <PayloadFieldRow key={child.key} row={child} depth={depth + 1} />
+          ))}
+        </ul>
+      ) : null}
+    </li>
+  );
+}
+
 function valueToneClass(kind: InputFieldKind): string {
   switch (kind) {
     case "string":

package/src/console/ui-next/src/features/flows/traces/traces-pane.tsx

@@ -2,7 +2,7 @@
  * Scoped Traces pane (start side of the Flow split-view).
  */
 
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Alert02Icon, FilterHorizontalIcon, Menu01Icon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 import type { Manifest } from "../../../../../../manifest/types.ts";
@@ -100,6 +100,11 @@ export function TracesPane({
     return filterRunsByGraph(base, graphFilter, manifest);
   }, [runs, filters, graphFilter, manifest]);
 
+  const navigationRuns = useMemo(() => {
+    if (!selectedRunId) return visible;
+    return visible.some((run) => run.id === selectedRunId) ? visible : runs;
+  }, [visible, runs, selectedRunId]);
+
   const selectedRun = useMemo(
     () =>
       selectedRunProp !== undefined
@@ -123,6 +128,13 @@ export function TracesPane({
     setFilters((prev) => ({ ...prev, advanced }));
   };
 
+  const listRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!selectedRunId || !listRef.current) return;
+    const row = listRef.current.querySelector(`[data-run-id="${CSS.escape(selectedRunId)}"]`);
+    if (row instanceof HTMLElement) row.scrollIntoView({ block: "nearest" });
+  }, [selectedRunId]);
+
   return (
     <div className="flex h-full min-h-0 flex-col overflow-hidden" data-slot="traces-pane">
       <div className="shrink-0 border-b border-border/60">
@@ -249,7 +261,7 @@ export function TracesPane({
         </AgentDisclosure>
       ) : null}
 
-      <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+      <div ref={listRef} className="flex min-h-0 flex-1 flex-col overflow-y-auto">
         {runs.length === 0 ? (
           <Empty className="border-none">
             <EmptyHeader>
@@ -290,6 +302,8 @@ export function TracesPane({
         onFocusEffectChange={onFocusEffectChange}
         playbackKey={playbackKey}
         onReplayStart={onReplayStart}
+        navigationRuns={navigationRuns}
+        onSelectRun={(id) => onSelect(id)}
       />
     </div>
   );