@nexus-ai-fs/tui 0.9.18

package/src/panels/agents/inbox-view.tsx

@@ -0,0 +1,96 @@
+/**
+ * IPC message view for an agent — inbox, processed, and dead_letter.
+ */
+
+import React from "react";
+import type { InboxMessage } from "../../stores/agents-store.js";
+import { LoadingIndicator } from "../../shared/components/loading-indicator.js";
+import { statusColor } from "../../shared/theme.js";
+import { textStyle } from "../../shared/text-style.js";
+
+interface InboxViewProps {
+  readonly messages: readonly InboxMessage[];
+  readonly count: number;
+  readonly processedMessages: readonly InboxMessage[];
+  readonly deadLetterMessages: readonly InboxMessage[];
+  readonly loading: boolean;
+  readonly selectedIndex?: number;
+  readonly previewContent?: string | null;
+}
+
+function parseFilename(filename: string): { label: string; ext: string } {
+  const lastDot = filename.lastIndexOf(".");
+  const ext = lastDot >= 0 ? filename.slice(lastDot + 1).toUpperCase() : "";
+  const base = lastDot >= 0 ? filename.slice(0, lastDot) : filename;
+  const label = base.replace(/[-_]/g, " ").slice(0, 40);
+  return { label, ext };
+}
+
+function MessageList({ messages, emptyText }: { messages: readonly InboxMessage[]; emptyText: string }): React.ReactNode {
+  if (messages.length === 0) {
+    return <text style={textStyle({ dim: true })}>{`  ${emptyText}`}</text>;
+  }
+  return (
+    <>
+      {messages.map((msg, i) => {
+        const { label, ext } = parseFilename(msg.filename);
+        const extTag = ext ? ` [${ext}]` : "";
+        return (
+          <box key={`msg-${i}`} height={1} width="100%">
+            <text>{`  ${i + 1}. ${label}${extTag}`}</text>
+          </box>
+        );
+      })}
+    </>
+  );
+}
+
+export function InboxView({ messages, count, processedMessages, deadLetterMessages, loading }: InboxViewProps): React.ReactNode {
+  if (loading) {
+    return <LoadingIndicator message="Loading messages..." />;
+  }
+
+  const totalAll = count + processedMessages.length + deadLetterMessages.length;
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      <scrollbox flexGrow={1} width="100%">
+        {/* Inbox section */}
+        <box height={1} width="100%">
+          <text>
+            <span style={textStyle({ fg: statusColor.info, bold: true })}>{`Inbox (${count})`}</span>
+            <span style={textStyle({ dim: true })}>{" — pending messages"}</span>
+          </text>
+        </box>
+        <MessageList messages={messages} emptyText="No pending messages" />
+
+        {/* Processed section */}
+        <text>{""}</text>
+        <box height={1} width="100%">
+          <text>
+            <span style={textStyle({ fg: statusColor.healthy, bold: true })}>{`Processed (${processedMessages.length})`}</span>
+            <span style={textStyle({ dim: true })}>{" — consumed by agent"}</span>
+          </text>
+        </box>
+        <MessageList messages={processedMessages} emptyText="No processed messages" />
+
+        {/* Dead letter section */}
+        <text>{""}</text>
+        <box height={1} width="100%">
+          <text>
+            <span style={textStyle({ fg: statusColor.error, bold: true })}>{`Dead Letter (${deadLetterMessages.length})`}</span>
+            <span style={textStyle({ dim: true })}>{" — expired or failed"}</span>
+          </text>
+        </box>
+        <MessageList messages={deadLetterMessages} emptyText="No dead letter messages" />
+
+        {totalAll === 0 && (
+          <>
+            <text>{""}</text>
+            <text style={textStyle({ dim: true })}>{"  No IPC messages. Send messages with POST /api/v2/ipc/send"}</text>
+          </>
+        )}
+      </scrollbox>
+    </box>
+  );
+}

package/src/panels/agents/trajectories-tab.tsx

@@ -0,0 +1,40 @@
+/**
+ * Trajectories tab: simple list view of agent trajectories.
+ *
+ * Displays trace_id, agent_id, status, started_at, and step_count.
+ */
+
+import React from "react";
+import type { TrajectoryItem } from "../../stores/agents-store.js";
+import { StyledText } from "../../shared/components/styled-text.js";
+import { LoadingIndicator } from "../../shared/components/loading-indicator.js";
+
+interface TrajectoriesTabProps {
+  readonly trajectories: readonly TrajectoryItem[];
+  readonly loading: boolean;
+}
+
+export function TrajectoriesTab({ trajectories, loading }: TrajectoriesTabProps): React.ReactNode {
+  if (loading) return <LoadingIndicator message="Loading trajectories..." />;
+  if (trajectories.length === 0) return <text>No trajectories found.</text>;
+
+  return (
+    <scrollbox height="100%" width="100%">
+      {/* Header */}
+      <box height={1} width="100%">
+        <text>{"  TRACE_ID           AGENT_ID         STATUS      STARTED             STEPS"}</text>
+      </box>
+
+      {trajectories.map((traj) => {
+        const traceShort = traj.trace_id.slice(0, 16) + "...";
+        const agentShort = traj.agent_id.slice(0, 14);
+        const started = traj.started_at ? traj.started_at.slice(0, 19) : "n/a";
+        return (
+          <box key={traj.trace_id} height={1} width="100%">
+            <StyledText>{`  ${traceShort}  ${agentShort.padEnd(16)}  ${traj.status.padEnd(10)}  ${started}  ${traj.step_count}`}</StyledText>
+          </box>
+        );
+      })}
+    </scrollbox>
+  );
+}

package/src/panels/api-console/api-console-panel.tsx

@@ -0,0 +1,189 @@
+/**
+ * API Console panel: endpoint list + request builder + response viewer.
+ *
+ * Press ":" to enter command input mode.
+ * Supports CLI-like syntax (ls, cat, stat, rm, mkdir) and raw HTTP methods.
+ * Arrow up/down navigates command history in input mode.
+ */
+
+import React, { useEffect, useCallback } from "react";
+import { useApi } from "../../shared/hooks/use-api.js";
+import { useKeyboard } from "../../shared/hooks/use-keyboard.js";
+import { listNavigationBindings } from "../../shared/hooks/use-list-navigation.js";
+import { useTextInput } from "../../shared/hooks/use-text-input.js";
+import { useApiConsoleStore } from "../../stores/api-console-store.js";
+import { EndpointList } from "./endpoint-list.js";
+import { RequestBuilder } from "./request-builder.js";
+import { ResponseViewer } from "./response-viewer.js";
+import { CommandOutput } from "../../shared/components/command-output.js";
+import { useCommandRunnerStore, executeLocalCommand } from "../../services/command-runner.js";
+import { useUiStore } from "../../stores/ui-store.js";
+import { focusColor } from "../../shared/theme.js";
+import { Tooltip } from "../../shared/components/tooltip.js";
+
+export default function ApiConsolePanel(): React.ReactNode {
+  const client = useApi();
+  // Reactive subscription to command runner status (Codex finding 2)
+  const commandRunnerStatus = useCommandRunnerStore((s) => s.status);
+  const endpoints = useApiConsoleStore((s) => s.endpoints);
+  const filteredEndpoints = useApiConsoleStore((s) => s.filteredEndpoints);
+  const selectedEndpoint = useApiConsoleStore((s) => s.selectedEndpoint);
+  const selectEndpoint = useApiConsoleStore((s) => s.selectEndpoint);
+  const executeRequest = useApiConsoleStore((s) => s.executeRequest);
+  const executeCommand = useApiConsoleStore((s) => s.executeCommand);
+  const fetchOpenApiSpec = useApiConsoleStore((s) => s.fetchOpenApiSpec);
+  const commandHistory = useApiConsoleStore((s) => s.commandHistory);
+  const commandInputMode = useApiConsoleStore((s) => s.commandInputMode);
+  const commandInputBuffer = useApiConsoleStore((s) => s.commandInputBuffer);
+  const setCommandInputMode = useApiConsoleStore((s) => s.setCommandInputMode);
+  const setCommandInputBuffer = useApiConsoleStore((s) => s.setCommandInputBuffer);
+  const navigateHistory = useApiConsoleStore((s) => s.navigateHistory);
+
+  const setSearchQuery = useApiConsoleStore((s) => s.setSearchQuery);
+
+  // Focus pane (ui-store)
+  const uiFocusPane = useUiStore((s) => s.getFocusPane("console"));
+  const toggleFocus = useUiStore((s) => s.toggleFocusPane);
+  const overlayActive = useUiStore((s) => s.overlayActive);
+
+  // Auto-load endpoints from OpenAPI spec on mount
+  useEffect(() => {
+    if (client && endpoints.length === 0) {
+      fetchOpenApiSpec(client);
+    }
+  }, [client, endpoints.length, fetchOpenApiSpec]);
+
+  // Find current selection index
+  const selectedIdx = selectedEndpoint
+    ? filteredEndpoints.findIndex((ep) => ep.path === selectedEndpoint.path && ep.method === selectedEndpoint.method)
+    : -1;
+
+  // Shared list navigation (j/k/up/down/g/G)
+  const listNav = listNavigationBindings({
+    getIndex: () => selectedIdx,
+    setIndex: (i) => {
+      const ep = filteredEndpoints[i];
+      if (ep) selectEndpoint(ep);
+    },
+    getLength: () => filteredEndpoints.length,
+  });
+
+  // Endpoint filter input (replaces local endpointFilterMode/endpointFilter state)
+  const endpointFilter = useTextInput({
+    onSubmit: (val) => setSearchQuery(val.trim()),
+    onCancel: () => { setSearchQuery(""); },
+  });
+
+  // Handle printable characters in command input mode
+  const handleUnhandledKey = useCallback(
+    (keyName: string) => {
+      if (!commandInputMode) return;
+      if (keyName.length === 1) {
+        setCommandInputBuffer(commandInputBuffer + keyName);
+      } else if (keyName === "space") {
+        setCommandInputBuffer(commandInputBuffer + " ");
+      }
+    },
+    [commandInputMode, commandInputBuffer, setCommandInputBuffer],
+  );
+
+  useKeyboard(
+    overlayActive
+      ? {}
+      : endpointFilter.active
+      ? endpointFilter.inputBindings
+      : commandInputMode
+      ? {
+          return: () => {
+            setCommandInputMode(false);
+            if (client && commandInputBuffer.trim()) {
+              executeCommand(commandInputBuffer, client);
+            }
+          },
+          escape: () => {
+            setCommandInputMode(false);
+          },
+          backspace: () => {
+            setCommandInputBuffer(commandInputBuffer.slice(0, -1));
+          },
+          up: () => navigateHistory("up"),
+          down: () => navigateHistory("down"),
+        }
+      : {
+          ...listNav,
+          return: () => {
+            if (client) executeRequest(client);
+          },
+          "/": () => {
+            endpointFilter.activate(endpointFilter.buffer);
+          },
+          ":": () => {
+            setCommandInputMode(true);
+          },
+          // Issue #3078: Shift+B to run nexus build from Console
+          "shift+b": () => {
+            useCommandRunnerStore.getState().reset();
+            executeLocalCommand("build", []);
+          },
+          tab: () => toggleFocus("console"),
+        },
+    overlayActive
+      ? undefined
+      : endpointFilter.active
+      ? endpointFilter.onUnhandled
+      : handleUnhandledKey,
+  );
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      <Tooltip tooltipKey="api-console-panel" message="Tip: Press ? for keybinding help" />
+    <box flexGrow={1} width="100%" flexDirection="row">
+      {/* Left: Endpoint list (30%) */}
+      <box width="30%" height="100%" borderStyle="single" borderColor={uiFocusPane === "left" ? focusColor.activeBorder : focusColor.inactiveBorder} flexDirection="column">
+        <box height={1} width="100%">
+          <text>{`─── Endpoints ─── (history: ${commandHistory.length})`}</text>
+        </box>
+        <box height={1} width="100%">
+          <text>
+            {endpointFilter.active
+              ? `Filter: ${endpointFilter.buffer}\u2588`
+              : endpointFilter.buffer
+                ? `Filter: ${endpointFilter.buffer}  (Esc to clear)`
+                : "/:filter endpoints"}
+          </text>
+        </box>
+        <EndpointList />
+      </box>
+
+      {/* Right: Request + Response (70%) */}
+      <box width="70%" height="100%" borderStyle="single" borderColor={uiFocusPane === "right" ? focusColor.activeBorder : focusColor.inactiveBorder} flexDirection="column">
+        {/* Command input bar */}
+        <box height={1} width="100%">
+          <text>
+            {commandInputMode
+              ? `> ${commandInputBuffer}█`
+              : `Press ":" for command input | "!" prefix for local commands | Shift+B:build | history: ${commandHistory.length}`}
+          </text>
+        </box>
+
+        {/* Local command output (when running via !command or Shift+B) */}
+        {commandRunnerStatus !== "idle" && (
+          <box borderStyle="single" height={8} width="100%">
+            <CommandOutput />
+          </box>
+        )}
+
+        {/* Request builder (top 40%) */}
+        <box flexGrow={4} borderStyle="single">
+          <RequestBuilder />
+        </box>
+
+        {/* Response viewer (bottom 60%) */}
+        <box flexGrow={6} borderStyle="single">
+          <ResponseViewer />
+        </box>
+      </box>
+    </box>
+    </box>
+  );
+}

package/src/panels/api-console/codegen-viewer.tsx

@@ -0,0 +1,36 @@
+/**
+ * Code generation panel showing request as curl/fetch/python snippets.
+ */
+
+import React, { useState } from "react";
+import { useApiConsoleStore } from "../../stores/api-console-store.js";
+import { useGlobalStore } from "../../stores/global-store.js";
+import { generateCode, type CodegenLanguage } from "./codegen.js";
+import { defaultSyntaxStyle } from "../../shared/syntax-style.js";
+
+const LANGUAGES: readonly CodegenLanguage[] = ["curl", "fetch", "python"];
+
+export function CodegenViewer(): React.ReactNode {
+  const [lang, setLang] = useState<CodegenLanguage>("curl");
+  const request = useApiConsoleStore((s) => s.request);
+  const baseUrl = useGlobalStore((s) => s.config.baseUrl ?? "http://localhost:2026");
+
+  const code = generateCode(lang, request, baseUrl);
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      {/* Language selector */}
+      <box height={1} width="100%" flexDirection="row">
+        {LANGUAGES.map((l) => {
+          const active = l === lang ? "▸ " : "  ";
+          return <text key={l}>{`${active}${l}`}</text>;
+        })}
+      </box>
+
+      {/* Code output */}
+      <scrollbox flexGrow={1} width="100%">
+        <code content={code} filetype={lang === "curl" ? "bash" : lang === "fetch" ? "javascript" : "python"} syntaxStyle={defaultSyntaxStyle} />
+      </scrollbox>
+    </box>
+  );
+}

package/src/panels/api-console/codegen.ts

@@ -0,0 +1,112 @@
+/**
+ * Pure functions for generating code snippets from a RequestState.
+ */
+
+import type { RequestState } from "../../stores/api-console-store.js";
+
+export type CodegenLanguage = "curl" | "fetch" | "python";
+
+export function generateCode(
+  lang: CodegenLanguage,
+  request: RequestState,
+  baseUrl: string,
+): string {
+  switch (lang) {
+    case "curl":
+      return generateCurl(request, baseUrl);
+    case "fetch":
+      return generateFetch(request, baseUrl);
+    case "python":
+      return generatePython(request, baseUrl);
+  }
+}
+
+export function generateCurl(request: RequestState, baseUrl: string): string {
+  const url = buildUrl(request, baseUrl);
+  const parts = [`curl -X ${request.method} '${url}'`];
+
+  for (const [key, value] of Object.entries(request.headers)) {
+    parts.push(`  -H '${key}: ${value}'`);
+  }
+
+  if (request.body && request.method !== "GET" && request.method !== "HEAD") {
+    parts.push(`  -H 'Content-Type: application/json'`);
+    parts.push(`  -d '${request.body}'`);
+  }
+
+  return parts.join(" \\\n");
+}
+
+export function generateFetch(request: RequestState, baseUrl: string): string {
+  const url = buildUrl(request, baseUrl);
+  const lines: string[] = [];
+
+  lines.push(`const response = await fetch('${url}', {`);
+  lines.push(`  method: '${request.method}',`);
+
+  const headers = { ...request.headers };
+  if (request.body && request.method !== "GET" && request.method !== "HEAD") {
+    headers["Content-Type"] = "application/json";
+  }
+
+  if (Object.keys(headers).length > 0) {
+    lines.push("  headers: {");
+    for (const [key, value] of Object.entries(headers)) {
+      lines.push(`    '${key}': '${value}',`);
+    }
+    lines.push("  },");
+  }
+
+  if (request.body && request.method !== "GET" && request.method !== "HEAD") {
+    lines.push(`  body: JSON.stringify(${request.body}),`);
+  }
+
+  lines.push("});");
+  lines.push("");
+  lines.push("const data = await response.json();");
+  lines.push("console.log(data);");
+
+  return lines.join("\n");
+}
+
+export function generatePython(request: RequestState, baseUrl: string): string {
+  const url = buildUrl(request, baseUrl);
+  const lines: string[] = [];
+
+  lines.push("import httpx");
+  lines.push("");
+
+  if (Object.keys(request.headers).length > 0) {
+    lines.push("headers = {");
+    for (const [key, value] of Object.entries(request.headers)) {
+      lines.push(`    "${key}": "${value}",`);
+    }
+    lines.push("}");
+    lines.push("");
+  }
+
+  const method = request.method.toLowerCase();
+  const hasBody = request.body && request.method !== "GET" && request.method !== "HEAD";
+  const headerArg = Object.keys(request.headers).length > 0 ? ", headers=headers" : "";
+  const bodyArg = hasBody ? `, json=${request.body}` : "";
+
+  lines.push(`response = httpx.${method}("${url}"${headerArg}${bodyArg})`);
+  lines.push("print(response.json())");
+
+  return lines.join("\n");
+}
+
+function buildUrl(request: RequestState, baseUrl: string): string {
+  let path = request.path;
+  for (const [key, value] of Object.entries(request.pathParams)) {
+    path = path.replace(`{${key}}`, encodeURIComponent(value));
+  }
+
+  const queryEntries = Object.entries(request.queryParams).filter(([, v]) => v !== "");
+  if (queryEntries.length > 0) {
+    const params = new URLSearchParams(queryEntries);
+    path += `?${params.toString()}`;
+  }
+
+  return `${baseUrl}${path}`;
+}

package/src/panels/api-console/endpoint-list.tsx

@@ -0,0 +1,57 @@
+/**
+ * Searchable, filterable list of all API endpoints.
+ */
+
+import React from "react";
+import { useApiConsoleStore, type EndpointInfo } from "../../stores/api-console-store.js";
+import { EmptyState } from "../../shared/components/empty-state.js";
+
+const METHOD_BADGE: Record<string, string> = {
+  GET: "GET   ",
+  POST: "POST  ",
+  PUT: "PUT   ",
+  DELETE: "DELETE",
+  PATCH: "PATCH ",
+  HEAD: "HEAD  ",
+  OPTIONS: "OPT   ",
+};
+
+export function EndpointList(): React.ReactNode {
+  const endpoints = useApiConsoleStore((s) => s.filteredEndpoints);
+  const selectedEndpoint = useApiConsoleStore((s) => s.selectedEndpoint);
+  const searchQuery = useApiConsoleStore((s) => s.searchQuery);
+
+  if (endpoints.length === 0) {
+    return searchQuery
+      ? <EmptyState message="No endpoints match your search." />
+      : <EmptyState message="No endpoints available." hint="Check server connection." />;
+  }
+
+  return (
+    <scrollbox height="100%" width="100%">
+      {endpoints.map((ep) => {
+        const isSelected = selectedEndpoint?.path === ep.path && selectedEndpoint?.method === ep.method;
+        return (
+          <EndpointRow key={`${ep.method}:${ep.path}`} endpoint={ep} selected={isSelected} />
+        );
+      })}
+    </scrollbox>
+  );
+}
+
+function EndpointRow({
+  endpoint,
+  selected,
+}: {
+  endpoint: EndpointInfo;
+  selected: boolean;
+}): React.ReactNode {
+  const prefix = selected ? "▸ " : "  ";
+  const badge = METHOD_BADGE[endpoint.method] ?? endpoint.method;
+
+  return (
+    <box height={1} width="100%" flexDirection="row">
+      <text>{`${prefix}${badge} ${endpoint.path}`}</text>
+    </box>
+  );
+}

package/src/panels/api-console/request-builder.tsx

@@ -0,0 +1,69 @@
+/**
+ * Dynamic form for building API requests.
+ */
+
+import React from "react";
+import { useApiConsoleStore } from "../../stores/api-console-store.js";
+import { Spinner } from "../../shared/components/spinner.js";
+
+export function RequestBuilder(): React.ReactNode {
+  const request = useApiConsoleStore((s) => s.request);
+  const selectedEndpoint = useApiConsoleStore((s) => s.selectedEndpoint);
+  const isLoading = useApiConsoleStore((s) => s.isLoading);
+
+  if (!selectedEndpoint) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text>Select an endpoint from the list</text>
+      </box>
+    );
+  }
+
+  // Extract path parameters (e.g., {id}, {name})
+  const pathParamNames = [...request.path.matchAll(/\{(\w+)\}/g)].map((m) => m[1]!);
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      {/* Method + Path */}
+      <box height={1} width="100%">
+        <text>{`${request.method} ${request.path}`}</text>
+      </box>
+
+      {/* Summary */}
+      {selectedEndpoint.summary && (
+        <box height={1} width="100%">
+          <text>{selectedEndpoint.summary}</text>
+        </box>
+      )}
+
+      {/* Path Parameters */}
+      {pathParamNames.length > 0 && (
+        <box flexDirection="column">
+          <text>{"─── Path Parameters ───"}</text>
+          {pathParamNames.map((name) => (
+            <box key={name} height={1} width="100%">
+              <text>{`  ${name}: ${request.pathParams[name] ?? ""}`}</text>
+            </box>
+          ))}
+        </box>
+      )}
+
+      {/* Request Body */}
+      {request.method !== "GET" && request.method !== "HEAD" && (
+        <box flexDirection="column" flexGrow={1}>
+          <text>{"─── Request Body (JSON) ───"}</text>
+          <text>{request.body || "{}"}</text>
+        </box>
+      )}
+
+      {/* Send button area */}
+      <box height={1} width="100%">
+        {isLoading ? (
+          <Spinner label="Sending..." />
+        ) : (
+          <text>{"Enter to send request"}</text>
+        )}
+      </box>
+    </box>
+  );
+}

package/src/panels/api-console/response-viewer.tsx

@@ -0,0 +1,54 @@
+/**
+ * Displays the API response with syntax highlighting and status info.
+ */
+
+import React from "react";
+import { useApiConsoleStore } from "../../stores/api-console-store.js";
+import { httpStatusColor } from "../../shared/theme.js";
+import { StyledText } from "../../shared/components/styled-text.js";
+import { textStyle } from "../../shared/text-style.js";
+import { defaultSyntaxStyle } from "../../shared/syntax-style.js";
+
+export function ResponseViewer(): React.ReactNode {
+  const response = useApiConsoleStore((s) => s.response);
+
+  if (!response) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text>No response yet</text>
+      </box>
+    );
+  }
+
+  if (response.error) {
+    return (
+      <box height="100%" width="100%" flexDirection="column">
+        <text>{`Error: ${response.error}`}</text>
+        <text>{`Time: ${response.timeMs.toFixed(0)}ms`}</text>
+      </box>
+    );
+  }
+
+  const statusCategory = Math.floor(response.status / 100);
+  const statusPrefix = statusCategory === 2 ? "✓" : statusCategory === 4 ? "✗" : "!";
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      {/* Status line */}
+      <box height={1} width="100%">
+        <text>{`${statusPrefix} `}</text>
+        <text style={textStyle({ fg: httpStatusColor(response.status) })}>{`${response.status}`}</text>
+        <text>{` ${response.statusText} — ${response.timeMs.toFixed(0)}ms`}</text>
+      </box>
+
+      {/* Response body with syntax highlighting (ANSI-aware) */}
+      <scrollbox flexGrow={1} width="100%">
+        {response.body.includes("\x1b[") ? (
+          <StyledText>{response.body}</StyledText>
+        ) : (
+          <code content={response.body} filetype="json" syntaxStyle={defaultSyntaxStyle} />
+        )}
+      </scrollbox>
+    </box>
+  );
+}