@docyrus/docyrus 0.0.8 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docyrus/docyrus",
-  "version": "0.0.8",
+  "version": "0.0.11",
   "private": false,
   "description": "Docyrus API CLI",
   "main": "./main.js",

package/tui.mjs

@@ -3,6 +3,7 @@ import { createCliRenderer } from "@opentui/core";
 import { createRoot } from "@opentui/react";
 
 // src/tui/opentui/DocyrusOpenTuiApp.tsx
+import { RGBA as RGBA2 } from "@opentui/core";
 import { useKeyboard as useKeyboard2, useRenderer } from "@opentui/react";
 import { useCallback as useCallback2, useEffect, useMemo, useRef, useState as useState2 } from "react";
 
@@ -259,12 +260,14 @@ function useCommandInput(options) {
     }
     const keyName = keyEvent.name;
     const hotkeysEnabled = options.hotkeysEnabled !== false;
+    const sectionTabEnabled = hotkeysEnabled && options.sectionTabEnabled !== false;
+    const inputUpHistoryEnabled = options.inputUpHistoryEnabled !== false;
     if (keyEvent.ctrl && keyName === "l") {
       preventDefault(keyEvent);
       options.onClear();
       return;
     }
-    if (hotkeysEnabled && keyName === "tab") {
+    if (sectionTabEnabled && keyName === "tab") {
       preventDefault(keyEvent);
       if (keyEvent.shift) {
         options.onPreviousSection();
@@ -283,7 +286,7 @@ function useCommandInput(options) {
       options.onNextSection();
       return;
     }
-    if (options.isInputFocused && keyName === "up") {
+    if (inputUpHistoryEnabled && options.isInputFocused && keyName === "up") {
       preventDefault(keyEvent);
       recallHistory("up");
       return;
@@ -539,6 +542,10 @@ function serializeResultDocument(document) {
 
 // src/tui/opentui/renderResult.tsx
 import { jsx, jsxs } from "@opentui/react/jsx-runtime";
+var RESULT_VIEW_OPTIONS = [
+  { name: "PRETTY", description: "Markdown view", value: "pretty" },
+  { name: "JSON", description: "Raw JSON view", value: "json" }
+];
 var jsonSyntaxStyle = null;
 function getJsonSyntaxStyle() {
   if (jsonSyntaxStyle) {
@@ -572,26 +579,227 @@ function getJsonSyntaxStyle() {
   });
   return jsonSyntaxStyle;
 }
+function isRecord2(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function escapeMd(value) {
+  return value.replace(/\\/g, "\\\\").replace(/\|/g, "\\|").replace(/\n/g, "<br/>");
+}
+function inlineValue(value) {
+  if (value === null) {
+    return "`null`";
+  }
+  if (value === void 0) {
+    return "`undefined`";
+  }
+  if (typeof value === "string") {
+    return escapeMd(value);
+  }
+  if (typeof value === "number" || typeof value === "boolean") {
+    return `\`${String(value)}\``;
+  }
+  if (Array.isArray(value)) {
+    return `\`[${value.length} items]\``;
+  }
+  if (isRecord2(value)) {
+    return `\`{${Object.keys(value).length} keys}\``;
+  }
+  return escapeMd(String(value));
+}
+function headingForDepth(depth) {
+  const safeDepth = Math.min(6, Math.max(2, depth + 2));
+  return "#".repeat(safeDepth);
+}
+function renderObjectMarkdown(record, depth, sectionTitle) {
+  const entries = Object.entries(record);
+  if (entries.length === 0) {
+    return `${headingForDepth(depth)} ${sectionTitle}
+
+_Empty object_
+`;
+  }
+  const lines = [];
+  lines.push(`${headingForDepth(depth)} ${sectionTitle}`);
+  lines.push("");
+  lines.push("| Key | Value |");
+  lines.push("| --- | --- |");
+  const nestedSections = [];
+  for (const [key, value] of entries) {
+    const escapedKey = escapeMd(key);
+    if (Array.isArray(value) || isRecord2(value)) {
+      lines.push(`| ${escapedKey} | ${inlineValue(value)} |`);
+      nestedSections.push(renderAnyMarkdown(value, depth + 1, key));
+      continue;
+    }
+    lines.push(`| ${escapedKey} | ${inlineValue(value)} |`);
+  }
+  if (nestedSections.length > 0) {
+    lines.push("");
+    lines.push(...nestedSections);
+  }
+  return `${lines.join("\n")}
+`;
+}
+function renderArrayMarkdown(values, depth, sectionTitle) {
+  const lines = [];
+  lines.push(`${headingForDepth(depth)} ${sectionTitle}`);
+  lines.push("");
+  if (values.length === 0) {
+    lines.push("_Empty array_");
+    return `${lines.join("\n")}
+`;
+  }
+  const firstItem = values[0];
+  if (isRecord2(firstItem)) {
+    const headers = Object.keys(firstItem);
+    lines.push(`| ${headers.map(escapeMd).join(" | ")} |`);
+    lines.push(`| ${headers.map(() => "---").join(" | ")} |`);
+    const nestedSections2 = [];
+    values.forEach((item, index) => {
+      if (!isRecord2(item)) {
+        lines.push(`| ${escapeMd(String(item))} |`);
+        return;
+      }
+      const rowCells = headers.map((header) => {
+        const cellValue = item[header];
+        if (Array.isArray(cellValue) || isRecord2(cellValue)) {
+          nestedSections2.push(renderAnyMarkdown(cellValue, depth + 1, `${sectionTitle}[${index}].${header}`));
+        }
+        return inlineValue(cellValue);
+      });
+      lines.push(`| ${rowCells.join(" | ")} |`);
+    });
+    if (nestedSections2.length > 0) {
+      lines.push("");
+      lines.push(...nestedSections2);
+    }
+    return `${lines.join("\n")}
+`;
+  }
+  lines.push("| Index | Value |");
+  lines.push("| --- | --- |");
+  const nestedSections = [];
+  values.forEach((value, index) => {
+    if (Array.isArray(value) || isRecord2(value)) {
+      lines.push(`| ${index} | ${inlineValue(value)} |`);
+      nestedSections.push(renderAnyMarkdown(value, depth + 1, `${sectionTitle}[${index}]`));
+      return;
+    }
+    lines.push(`| ${index} | ${inlineValue(value)} |`);
+  });
+  if (nestedSections.length > 0) {
+    lines.push("");
+    lines.push(...nestedSections);
+  }
+  return `${lines.join("\n")}
+`;
+}
+function renderAnyMarkdown(value, depth, sectionTitle) {
+  if (Array.isArray(value)) {
+    return renderArrayMarkdown(value, depth, sectionTitle);
+  }
+  if (isRecord2(value)) {
+    return renderObjectMarkdown(value, depth, sectionTitle);
+  }
+  return `${headingForDepth(depth)} ${sectionTitle}
+
+${inlineValue(value)}
+`;
+}
+function resolvePrettyPayload(document) {
+  const payload = document.payload;
+  if (!isRecord2(payload)) {
+    return payload;
+  }
+  const status = typeof payload.status === "number" ? payload.status : void 0;
+  const success = typeof payload.success === "boolean" ? payload.success : void 0;
+  if (typeof status === "number") {
+    if (status >= 400) {
+      if ("error" in payload) {
+        return payload.error;
+      }
+      if (isRecord2(payload.data) && "error" in payload.data) {
+        return payload.data.error;
+      }
+      return payload;
+    }
+    if ("data" in payload) {
+      return payload.data;
+    }
+    return payload;
+  }
+  if (success === true) {
+    if ("data" in payload) {
+      return payload.data;
+    }
+    return payload;
+  }
+  if (success === false) {
+    if ("error" in payload) {
+      return payload.error;
+    }
+    return payload;
+  }
+  if (document.ok && "data" in payload) {
+    return payload.data;
+  }
+  if (!document.ok && "error" in payload) {
+    return payload.error;
+  }
+  return payload;
+}
+function buildPrettyMarkdown(document) {
+  const payload = resolvePrettyPayload(document);
+  return renderAnyMarkdown(payload, 0, document.ok ? "Data" : "Error");
+}
 function renderResult(params) {
   const {
     entry,
-    isFocused
+    isFocused,
+    viewMode,
+    onViewModeChange,
+    resultScrollRef
   } = params;
   if (!entry) {
     return /* @__PURE__ */ jsx("text", { fg: "yellow", children: "No command executed yet." });
   }
   const document = buildResultDocument(entry);
   const json = serializeResultDocument(document);
+  const markdown = buildPrettyMarkdown(document);
+  const viewOptions = viewMode === "pretty" ? RESULT_VIEW_OPTIONS : [RESULT_VIEW_OPTIONS[1], RESULT_VIEW_OPTIONS[0]];
   return /* @__PURE__ */ jsxs("box", { flexDirection: "column", width: "100%", height: "100%", children: [
-    /* @__PURE__ */ jsx("box", { paddingBottom: 1, children: /* @__PURE__ */ jsxs("text", { fg: document.ok ? "green" : "red", children: [
-      document.ok ? "OK" : "ERR",
-      " ",
-      document.command,
-      " [",
-      document.durationMs,
-      "ms]"
-    ] }) }),
-    /* @__PURE__ */ jsx("box", { flexGrow: 1, width: "100%", height: "100%", children: /* @__PURE__ */ jsx("scrollbox", { focused: isFocused, style: { height: "100%" }, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs("box", { paddingBottom: 1, flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs("text", { fg: document.ok ? "green" : "red", children: [
+        document.ok ? "OK" : "ERR",
+        " ",
+        document.command,
+        " [",
+        document.durationMs,
+        "ms]"
+      ] }),
+      /* @__PURE__ */ jsx(
+        "tab-select",
+        {
+          options: viewOptions,
+          onChange: (_index, option) => {
+            if (option?.value === "json") {
+              onViewModeChange("json");
+              return;
+            }
+            onViewModeChange("pretty");
+          },
+          onSelect: (_index, option) => {
+            if (option?.value === "json") {
+              onViewModeChange("json");
+              return;
+            }
+            onViewModeChange("pretty");
+          },
+          focused: false
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("box", { flexGrow: 1, width: "100%", height: "100%", children: /* @__PURE__ */ jsx("scrollbox", { ref: resultScrollRef, focused: isFocused, scrollX: true, scrollY: true, style: { height: "100%" }, children: viewMode === "json" ? /* @__PURE__ */ jsx(
       "code",
       {
         width: "100%",
@@ -601,6 +809,18 @@ function renderResult(params) {
         streaming: false,
         conceal: false
       }
+    ) : /* @__PURE__ */ jsx(
+      "markdown",
+      {
+        content: markdown,
+        syntaxStyle: getJsonSyntaxStyle(),
+        streaming: false,
+        tableOptions: {
+          widthMode: "content",
+          wrapMode: "none",
+          borders: true
+        }
+      }
     ) }) })
   ] });
 }
@@ -642,23 +862,23 @@ var SHORTCUTS = [
 var SECTION_ORDER = ["shortcuts", "datasources", "history", "messages", "help"];
 var FOCUS_ORDER = ["input", "left", "result"];
 var ESC_ARM_TIMEOUT_MS = 1400;
-function isRecord2(value) {
+function isRecord3(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 function extractMetadata(payload) {
-  if (!isRecord2(payload)) {
+  if (!isRecord3(payload)) {
     return {};
   }
   const environmentValue = payload.environment;
   const contextValue = payload.context;
-  const environment = isRecord2(environmentValue) && typeof environmentValue.id === "string" && typeof environmentValue.name === "string" ? { id: environmentValue.id, name: environmentValue.name } : void 0;
+  const environment = isRecord3(environmentValue) && typeof environmentValue.id === "string" && typeof environmentValue.name === "string" ? { id: environmentValue.id, name: environmentValue.name } : void 0;
   if (contextValue === null) {
     return {
       environment,
       context: null
     };
   }
-  const context = isRecord2(contextValue) && typeof contextValue.email === "string" && typeof contextValue.tenantDisplay === "string" ? {
+  const context = isRecord3(contextValue) && typeof contextValue.email === "string" && typeof contextValue.tenantDisplay === "string" ? {
     email: contextValue.email,
     tenantDisplay: contextValue.tenantDisplay
   } : void 0;
@@ -706,6 +926,17 @@ function toCatalogErrorMessage(command, result) {
   const message = result.error?.message || "Command failed.";
   return `${command} failed: ${message}`;
 }
+function isScrollAtBottom(scrollBox) {
+  if (!scrollBox) {
+    return true;
+  }
+  const viewportHeight = scrollBox.viewport.height;
+  const maxScrollTop = Math.max(0, scrollBox.scrollHeight - viewportHeight);
+  if (maxScrollTop <= 0) {
+    return true;
+  }
+  return scrollBox.scrollTop >= maxScrollTop - 1;
+}
 function DocyrusOpenTuiApp(props) {
   const renderer = useRenderer();
   const [input, setInput] = useState2("");
@@ -722,6 +953,7 @@ function DocyrusOpenTuiApp(props) {
   const [selectedHistoryIndex, setSelectedHistoryIndex] = useState2(0);
   const [isExitConfirmOpen, setIsExitConfirmOpen] = useState2(false);
   const [isEscArmed, setIsEscArmed] = useState2(false);
+  const [resultViewMode, setResultViewMode] = useState2("pretty");
   const [dataSourceSearch, setDataSourceSearch] = useState2("");
   const [dataSourcePanelFocus, setDataSourcePanelFocus] = useState2("tree");
   const [selectedDataSourceRowIndex, setSelectedDataSourceRowIndex] = useState2(0);
@@ -732,6 +964,9 @@ function DocyrusOpenTuiApp(props) {
   const [catalogError, setCatalogError] = useState2(null);
   const [catalogLoadedAt, setCatalogLoadedAt] = useState2(null);
   const catalogScopeRef = useRef("");
+  const resultScrollRef = useRef(null);
+  const leftScrollRef = useRef(null);
+  const commandInputRef = useRef(null);
   const executor = useMemo(() => {
     return createTuiProcessExecutor({
       executionConfig: props.executionConfig
@@ -980,6 +1215,7 @@ function DocyrusOpenTuiApp(props) {
     isInputFocused: focusedPanel === "input",
     isModalOpen: isExitConfirmOpen,
     hotkeysEnabled: !isRunning && !isDataSourceSearchFocused,
+    sectionTabEnabled: focusedPanel !== "result",
     setInput,
     onSubmit: executeLine,
     onClear: () => {
@@ -1024,9 +1260,44 @@ function DocyrusOpenTuiApp(props) {
       renderer.destroy();
       return;
     }
+    if (focusedPanel === "result" && keyName === "tab" && !isRunning && !isCatalogLoading) {
+      preventDefault2(keyEvent);
+      setResultViewMode((previous) => previous === "pretty" ? "json" : "pretty");
+      return;
+    }
     if (isRunning) {
       return;
     }
+    if (keyName === "down") {
+      if (focusedPanel === "result") {
+        if (isScrollAtBottom(resultScrollRef.current)) {
+          preventDefault2(keyEvent);
+          setIsEscArmed(false);
+          setFocusedPanel("input");
+        }
+        return;
+      }
+      if (focusedPanel === "left") {
+        let shouldSwitchToInput = false;
+        if (activeSection === "shortcuts") {
+          shouldSwitchToInput = shortcutOptions.length === 0 || selectedShortcutIndex >= shortcutOptions.length - 1;
+        } else if (activeSection === "history") {
+          shouldSwitchToInput = historyOptions.length === 0 || selectedHistoryIndex >= historyOptions.length - 1;
+        } else if (activeSection === "datasources") {
+          if (dataSourcePanelFocus === "tree") {
+            shouldSwitchToInput = dataSourceOptions.length === 0 || selectedDataSourceRowIndex >= dataSourceOptions.length - 1;
+          }
+        } else if (activeSection === "messages" || activeSection === "help") {
+          shouldSwitchToInput = isScrollAtBottom(leftScrollRef.current);
+        }
+        if (shouldSwitchToInput) {
+          preventDefault2(keyEvent);
+          setIsEscArmed(false);
+          setFocusedPanel("input");
+          return;
+        }
+      }
+    }
     if (isEscapeKey(keyName)) {
       preventDefault2(keyEvent);
       if (focusedPanel !== "input") {
@@ -1049,7 +1320,44 @@ function DocyrusOpenTuiApp(props) {
       return;
     }
     if (keyName === "left" || keyName === "right") {
-      if (focusedPanel === "input" && input.length > 0) {
+      if (focusedPanel === "input") {
+        const cursorOffset = commandInputRef.current?.cursorOffset ?? input.length;
+        const inputLength = input.length;
+        const atStart = cursorOffset <= 0;
+        const atEnd = cursorOffset >= inputLength;
+        if (keyName === "left" && atStart) {
+          preventDefault2(keyEvent);
+          setIsEscArmed(false);
+          setFocusedPanel("left");
+          return;
+        }
+        if (keyName === "right" && atEnd) {
+          preventDefault2(keyEvent);
+          setIsEscArmed(false);
+          setFocusedPanel("result");
+          return;
+        }
+        return;
+      }
+      if (focusedPanel === "result") {
+        const resultScroll = resultScrollRef.current;
+        if (!resultScroll) {
+          preventDefault2(keyEvent);
+          setIsEscArmed(false);
+          setFocusedPanel(keyName === "left" ? "left" : "input");
+          return;
+        }
+        const viewportWidth = resultScroll.viewport.width;
+        const maxScrollLeft = Math.max(0, resultScroll.scrollWidth - viewportWidth);
+        const hasHorizontalScroll = maxScrollLeft > 0;
+        const isAtStart = resultScroll.scrollLeft <= 0;
+        const isAtEnd = resultScroll.scrollLeft >= maxScrollLeft - 1;
+        if (!hasHorizontalScroll || keyName === "left" && isAtStart || keyName === "right" && isAtEnd) {
+          preventDefault2(keyEvent);
+          setIsEscArmed(false);
+          setFocusedPanel(keyName === "left" ? "left" : "input");
+          return;
+        }
         return;
       }
       preventDefault2(keyEvent);
@@ -1302,35 +1610,105 @@ function DocyrusOpenTuiApp(props) {
       ] });
     }
     if (activeSection === "messages") {
-      return /* @__PURE__ */ jsxs2("scrollbox", { focused: focusedPanel === "left" && !isExitConfirmOpen && !isRunning, style: { height: "100%" }, children: [
-        systemMessages.length === 0 && /* @__PURE__ */ jsx2("text", { fg: "gray", children: "No messages yet." }),
-        systemMessages.map((line, index) => /* @__PURE__ */ jsx2("text", { children: line }, `message-${index}`))
-      ] });
+      return /* @__PURE__ */ jsxs2(
+        "scrollbox",
+        {
+          ref: leftScrollRef,
+          focused: focusedPanel === "left" && !isExitConfirmOpen && !isRunning,
+          style: { height: "100%" },
+          children: [
+            systemMessages.length === 0 && /* @__PURE__ */ jsx2("text", { fg: "gray", children: "No messages yet." }),
+            systemMessages.map((line, index) => /* @__PURE__ */ jsx2("text", { children: line }, `message-${index}`))
+          ]
+        }
+      );
     }
-    return /* @__PURE__ */ jsxs2("scrollbox", { focused: focusedPanel === "left" && !isExitConfirmOpen && !isRunning, style: { height: "100%" }, children: [
-      /* @__PURE__ */ jsx2("text", { fg: "cyan", children: "Key Bindings" }),
-      /* @__PURE__ */ jsx2("text", { children: "Left/Right: switch focused panel" }),
-      /* @__PURE__ */ jsx2("text", { children: "Up/Down in left lists: selection" }),
-      /* @__PURE__ */ jsx2("text", { children: "Up/Down in result: scroll" }),
-      /* @__PURE__ */ jsx2("text", { children: "Enter: run command" }),
-      /* @__PURE__ */ jsx2("text", { children: "Up/Down in input: command history" }),
-      /* @__PURE__ */ jsx2("text", { children: "Tab / Shift+Tab: next/prev left section" }),
-      /* @__PURE__ */ jsx2("text", { children: "[ / ]: next/prev left section" }),
-      /* @__PURE__ */ jsx2("text", { children: "1..6: run shortcut" }),
-      /* @__PURE__ */ jsx2("text", { children: "/ in DataSources: focus search" }),
-      /* @__PURE__ */ jsx2("text", { children: "Esc in DataSources search: return to tree" }),
-      /* @__PURE__ */ jsx2("text", { children: "Space in DataSources tree: toggle app folder" }),
-      /* @__PURE__ */ jsx2("text", { children: "Enter in DataSources tree: run ds get or toggle app" }),
-      /* @__PURE__ */ jsx2("text", { children: "Ctrl+L: clear command and message history" }),
-      /* @__PURE__ */ jsx2("text", { children: "Esc (other panel): focus command input" }),
-      /* @__PURE__ */ jsx2("text", { children: "Esc then Esc: open exit confirmation" }),
-      /* @__PURE__ */ jsx2("text", { children: "Enter (confirm): exit, Esc (confirm): cancel" }),
-      /* @__PURE__ */ jsx2("text", { children: "Ctrl+C: force quit" })
-    ] });
+    return /* @__PURE__ */ jsxs2(
+      "scrollbox",
+      {
+        ref: leftScrollRef,
+        focused: focusedPanel === "left" && !isExitConfirmOpen && !isRunning,
+        style: { height: "100%" },
+        children: [
+          /* @__PURE__ */ jsx2("text", { fg: "cyan", children: "Key Bindings" }),
+          /* @__PURE__ */ jsx2("text", { children: "Input Left/Right: caret move, edge switches panel" }),
+          /* @__PURE__ */ jsx2("text", { children: "Left/Right (non-input/result): switch focused panel" }),
+          /* @__PURE__ */ jsx2("text", { children: "Up/Down in left lists: selection" }),
+          /* @__PURE__ */ jsx2("text", { children: "Up/Down in result: vertical scroll" }),
+          /* @__PURE__ */ jsx2("text", { children: "Left/Right in result: horizontal scroll (edge switches panel)" }),
+          /* @__PURE__ */ jsx2("text", { children: "Down at bottom in left/result: focus command input" }),
+          /* @__PURE__ */ jsx2("text", { children: "Enter: run command" }),
+          /* @__PURE__ */ jsx2("text", { children: "Up/Down in input: command history" }),
+          /* @__PURE__ */ jsx2("text", { children: "Tab in result panel: toggle PRETTY/JSON" }),
+          /* @__PURE__ */ jsx2("text", { children: "Tab / Shift+Tab (outside result): next/prev left section" }),
+          /* @__PURE__ */ jsx2("text", { children: "[ / ]: next/prev left section" }),
+          /* @__PURE__ */ jsx2("text", { children: "1..6: run shortcut" }),
+          /* @__PURE__ */ jsx2("text", { children: "/ in DataSources: focus search" }),
+          /* @__PURE__ */ jsx2("text", { children: "Esc in DataSources search: return to tree" }),
+          /* @__PURE__ */ jsx2("text", { children: "Space in DataSources tree: toggle app folder" }),
+          /* @__PURE__ */ jsx2("text", { children: "Enter in DataSources tree: run ds get or toggle app" }),
+          /* @__PURE__ */ jsx2("text", { children: "Ctrl+L: clear command and message history" }),
+          /* @__PURE__ */ jsx2("text", { children: "Esc (other panel): focus command input" }),
+          /* @__PURE__ */ jsx2("text", { children: "Esc then Esc: open exit confirmation" }),
+          /* @__PURE__ */ jsx2("text", { children: "Enter (confirm): exit, Esc (confirm): cancel" }),
+          /* @__PURE__ */ jsx2("text", { children: "Ctrl+C: force quit" })
+        ]
+      }
+    );
   };
   return /* @__PURE__ */ jsxs2("box", { flexDirection: "column", width: "100%", height: "100%", padding: 1, children: [
     /* @__PURE__ */ jsxs2("box", { flexDirection: "row", justifyContent: "space-between", marginBottom: 1, paddingX: 1, children: [
-      /* @__PURE__ */ jsx2("ascii-font", { text: "DOCYRUS", font: "tiny", color: "#7aa2f7" }),
+      /* @__PURE__ */ jsxs2(
+        "box",
+        {
+          style: {
+            position: "relative",
+            width: 50,
+            height: 6
+          },
+          children: [
+            /* @__PURE__ */ jsx2(
+              "box",
+              {
+                style: {
+                  position: "absolute",
+                  left: 1,
+                  top: 0
+                },
+                children: /* @__PURE__ */ jsx2(
+                  "ascii-font",
+                  {
+                    text: "DOCYRUS",
+                    font: "block",
+                    color: RGBA2.fromHex("#3f4bff")
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "box",
+              {
+                style: {
+                  position: "absolute",
+                  left: 0,
+                  top: 0
+                },
+                children: /* @__PURE__ */ jsx2(
+                  "ascii-font",
+                  {
+                    text: "DOCYRUS",
+                    font: "block",
+                    color: [
+                      RGBA2.fromHex("#ef4444"),
+                      RGBA2.fromHex("#ef4444")
+                    ]
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
       /* @__PURE__ */ jsxs2("box", { flexDirection: "column", alignItems: "flex-end", justifyContent: "center", children: [
         /* @__PURE__ */ jsxs2("text", { children: [
           "env: ",
@@ -1392,7 +1770,10 @@ function DocyrusOpenTuiApp(props) {
             /* @__PURE__ */ jsx2("text", { fg: "gray", children: "Running command..." })
           ] }) : renderResult({
             entry: activeEntry,
-            isFocused: focusedPanel === "result" && !isExitConfirmOpen
+            isFocused: focusedPanel === "result" && !isExitConfirmOpen,
+            viewMode: resultViewMode,
+            onViewModeChange: setResultViewMode,
+            resultScrollRef
           })
         }
       )
@@ -1410,6 +1791,7 @@ function DocyrusOpenTuiApp(props) {
           /* @__PURE__ */ jsx2(
             "input",
             {
+              ref: commandInputRef,
               style: { flexGrow: 1 },
               value: input,
               placeholder: "Type a command...",