From 3dfbd5e3043fc85f7e5b4293aac034ded2c11026 Mon Sep 17 00:00:00 2001 From: Evan Tahler Date: Tue, 17 Feb 2026 18:38:42 -0800 Subject: [PATCH] Add markdown rendering, horizontal/vertical scrolling, and performance optimizations Introduces prettier markdown rendering with tables, code blocks, bold/italic text using marked + marked-terminal. Adds Tab-based scroll mode with arrow keys for navigating large responses (both horizontal and vertical). Implements Ink's component for completed messages to remove them from the render tree, keeping the dynamic tree small so typing remains fast with large output. Includes tests for markdown rendering and horizontal scroll clipping. Updates agent system prompt to hint at markdown formatting and scroll mode availability. Co-Authored-By: Claude Haiku 4.5 --- agents/general.ts | 12 +++- bun.lock | 111 ++++++++++++++++++++++++++++++++++- components/App.tsx | 94 ++++++++++++++++++++++++++++-- components/InputBox.tsx | 48 ++++++++++++++-- components/Message.tsx | 34 ++++++++--- components/MessageArea.tsx | 115 ++++++++++++++++++++++++++++++------- conductor.json | 6 ++ package.json | 5 +- tests/markdown.test.ts | 64 +++++++++++++++++++++ utils/markdown.ts | 37 ++++++++++++ 10 files changed, 483 insertions(+), 43 deletions(-) create mode 100644 conductor.json create mode 100644 tests/markdown.test.ts create mode 100644 utils/markdown.ts diff --git a/agents/general.ts b/agents/general.ts index 8d651a7..87b3dec 100644 --- a/agents/general.ts +++ b/agents/general.ts @@ -11,8 +11,16 @@ export class GeneralAgent extends WrappedAgent { You are a general-purpose AI/LLM agent that can assist with a wide range of tasks. You can take many actions via the tools provided to you. ALWAYS prefer to call tools, but only when you are CERTAIN that you understand the user's request. Otherwise, ask clarifying questions. Do not rely on any pre-existing knowledge - only use the tools provided to you. -Unless otherwise specified, you should respond in Markdown, and in Table format when you have multiple items to list. -You are in a terminal window that is ${cols} columns wide and ${rows} rows tall. Keep your Markdown output (tables, ASCII art, code blocks, etc.) within ${cols} columns so it renders correctly without wrapping. + +## Response Formatting (IMPORTANT) +You MUST format ALL responses using Markdown. This is critical — your output is rendered through a Markdown engine in the terminal, so raw text without Markdown formatting will look plain and unhelpful. Specifically: +- Use **bold** and *italics* for emphasis +- Use \`inline code\` for commands, function names, file paths, and technical terms +- Use fenced code blocks (\`\`\`) with language tags for any code snippets or command output +- Use tables (GFM pipe syntax) whenever presenting structured or comparative data +- Use headings (##, ###) to organize longer responses into sections +- Use bullet/numbered lists instead of prose for steps or multiple items +- The terminal supports horizontal scrolling (Tab to enter scroll mode, ← → to pan), so do NOT truncate or abbreviate wide tables — render them at full width `; super("GeneralAgent", instructions, config, logger); } diff --git a/bun.lock b/bun.lock index e3ae952..39f0379 100644 --- a/bun.lock +++ b/bun.lock @@ -12,8 +12,11 @@ "ink": "^6.7.0", "ink-spinner": "^5.0.0", "ink-text-input": "^6.0.0", + "marked": "15", + "marked-terminal": "^7.3.0", "openai": "^6.20.0", "react": "^19.2.4", + "slice-ansi": "^8.0.0", }, "devDependencies": { "@types/bun": "latest", @@ -28,6 +31,8 @@ "packages": { "@alcalzone/ansi-tokenize": ["@alcalzone/ansi-tokenize@0.2.5", "", { "dependencies": { "ansi-styles": "^6.2.1", "is-fullwidth-code-point": "^5.0.0" } }, "sha512-3NX/MpTdroi0aKz134A6RC2Gb2iXVECN4QaAXnvCIxxIm3C3AVB1mkUe8NaaiyvOpDfsrqWhYtj+Q6a62RrTsw=="], + "@colors/colors": ["@colors/colors@1.5.0", "", {}, "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ=="], + "@commander-js/extra-typings": ["@commander-js/extra-typings@14.0.0", "", { "peerDependencies": { "commander": "~14.0.0" } }, "sha512-hIn0ncNaJRLkZrxBIp5AsW/eXEHNKYQBh0aPdoUqNgD+Io3NIykQqpKFyKcuasZhicGaEZJX/JBSIkZ4e5x8Dg=="], "@hono/node-server": ["@hono/node-server@1.19.9", "", { "peerDependencies": { "hono": "^4" } }, "sha512-vHL6w3ecZsky+8P5MD+eFfaGTyCeOHUIFYMGpQGbrBTSmNNoxv0if69rEZ5giu36weC5saFuznL411gRX7bJDw=="], @@ -42,6 +47,8 @@ "@openai/agents-realtime": ["@openai/agents-realtime@0.4.11", "", { "dependencies": { "@openai/agents-core": "0.4.11", "@types/ws": "^8.18.1", "debug": "^4.4.0", "ws": "^8.18.1" }, "peerDependencies": { "zod": "^4.0.0" } }, "sha512-/STO8yBCvaNxGoW4jwQtVg4+GSKlK7y1x9ybF50O+34syJSMhHAbE3YQqT5jx2ohAA3A3AuqrsBQMdfEDn4UsQ=="], + "@sindresorhus/is": ["@sindresorhus/is@4.6.0", "", {}, "sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw=="], + "@types/bun": ["@types/bun@1.2.19", "", { "dependencies": { "bun-types": "1.2.19" } }, "sha512-d9ZCmrH3CJ2uYKXQIUuZ/pUnTqIvLDS0SK7pFmbx8ma+ziH/FRMoAq5bYpRG7y+w1gl+HgyNZbtqgMq4W4e2Lg=="], "@types/node": ["@types/node@24.1.0", "", { "dependencies": { "undici-types": "~7.8.0" } }, "sha512-ut5FthK5moxFKH2T1CUOC6ctR67rQRvvHdFLCD2Ql6KXmMuCrjsSsRI9UsLCm9M18BMwClv4pn327UvB7eeO1w=="], @@ -62,6 +69,8 @@ "ansi-styles": ["ansi-styles@6.2.3", "", {}, "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg=="], + "any-promise": ["any-promise@1.3.0", "", {}, "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="], + "auto-bind": ["auto-bind@5.0.1", "", {}, "sha512-ooviqdwwgfIfNmDwo94wlshcdzfO64XV0Cg6oDsDYBJfITDz1EngD2z7DkbvCWn+XIMsIqW27sEVF6qcpJrRcg=="], "body-parser": ["body-parser@2.2.2", "", { "dependencies": { "bytes": "^3.1.2", "content-type": "^1.0.5", "debug": "^4.4.3", "http-errors": "^2.0.0", "iconv-lite": "^0.7.0", "on-finished": "^2.4.1", "qs": "^6.14.1", "raw-body": "^3.0.1", "type-is": "^2.0.1" } }, "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA=="], @@ -76,16 +85,28 @@ "chalk": ["chalk@5.4.1", "", {}, "sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w=="], + "char-regex": ["char-regex@1.0.2", "", {}, "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw=="], + "cli-boxes": ["cli-boxes@3.0.0", "", {}, "sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g=="], "cli-cursor": ["cli-cursor@4.0.0", "", { "dependencies": { "restore-cursor": "^4.0.0" } }, "sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg=="], + "cli-highlight": ["cli-highlight@2.1.11", "", { "dependencies": { "chalk": "^4.0.0", "highlight.js": "^10.7.1", "mz": "^2.4.0", "parse5": "^5.1.1", "parse5-htmlparser2-tree-adapter": "^6.0.0", "yargs": "^16.0.0" }, "bin": { "highlight": "bin/highlight" } }, "sha512-9KDcoEVwyUXrjcJNvHD0NFc/hiwe/WPVYIleQh2O1N2Zro5gWJZ/K+3DGn8w8P/F6FxOgzyC5bxDyHIgCSPhGg=="], + "cli-spinners": ["cli-spinners@2.9.2", "", {}, "sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg=="], + "cli-table3": ["cli-table3@0.6.5", "", { "dependencies": { "string-width": "^4.2.0" }, "optionalDependencies": { "@colors/colors": "1.5.0" } }, "sha512-+W/5efTR7y5HRD7gACw9yQjqMVvEMLBHmboM/kPWam+H+Hmyrgjh6YncVKK122YZkXrLudzTuAukUw9FnMf7IQ=="], + "cli-truncate": ["cli-truncate@5.1.1", "", { "dependencies": { "slice-ansi": "^7.1.0", "string-width": "^8.0.0" } }, "sha512-SroPvNHxUnk+vIW/dOSfNqdy1sPEFkrTk6TUtqLCnBlo3N7TNYYkzzN7uSD6+jVjrdO4+p8nH7JzH6cIvUem6A=="], + "cliui": ["cliui@7.0.4", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.0", "wrap-ansi": "^7.0.0" } }, "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ=="], + "code-excerpt": ["code-excerpt@4.0.0", "", { "dependencies": { "convert-to-spaces": "^2.0.1" } }, "sha512-xxodCmBen3iy2i0WtAK8FlFNrRzjUqjRsMfho58xT/wvZU1YTM3fCnRjcy1gJPMepaRlgm/0e6w8SpWHpn3/cA=="], + "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="], + + "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="], + "commander": ["commander@14.0.0", "", {}, "sha512-2uM9rYjPvyq39NwLRqaiLtWHyDC1FvryJDa2ATTVims5YAS4PupsEQsDvP14FqhFr0P49CYDugi59xaxJlTXRA=="], "content-disposition": ["content-disposition@1.0.0", "", { "dependencies": { "safe-buffer": "5.2.1" } }, "sha512-Au9nRL8VNUut/XSzbQA38+M78dzP4D+eqg3gfJHMIHHYa3bg067xj1KxMUWj+VULbiZMowKngFFbKczUrNJ1mg=="], @@ -114,6 +135,8 @@ "emoji-regex": ["emoji-regex@10.4.0", "", {}, "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw=="], + "emojilib": ["emojilib@2.4.0", "", {}, "sha512-5U0rVMU5Y2n2+ykNLQqMoqklN9ICBT/KsvC1Gz6vqHbz2AXXGkG+Pm5rMWk/8Vjrr/mY9985Hi8DYzn1F09Nyw=="], + "encodeurl": ["encodeurl@2.0.0", "", {}, "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg=="], "environment": ["environment@1.1.0", "", {}, "sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q=="], @@ -126,6 +149,8 @@ "es-toolkit": ["es-toolkit@1.44.0", "", {}, "sha512-6penXeZalaV88MM3cGkFZZfOoLGWshWWfdy0tWw/RlVVyhvMaWSBTOvXNeiW3e5FwdS5ePW0LGEu17zT139ktg=="], + "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="], + "escape-html": ["escape-html@1.0.3", "", {}, "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="], "escape-string-regexp": ["escape-string-regexp@2.0.0", "", {}, "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w=="], @@ -152,6 +177,8 @@ "function-bind": ["function-bind@1.1.2", "", {}, "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="], + "get-caller-file": ["get-caller-file@2.0.5", "", {}, "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="], + "get-east-asian-width": ["get-east-asian-width@1.4.0", "", {}, "sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q=="], "get-intrinsic": ["get-intrinsic@1.3.0", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.2", "es-define-property": "^1.0.1", "es-errors": "^1.3.0", "es-object-atoms": "^1.1.1", "function-bind": "^1.1.2", "get-proto": "^1.0.1", "gopd": "^1.2.0", "has-symbols": "^1.1.0", "hasown": "^2.0.2", "math-intrinsics": "^1.1.0" } }, "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ=="], @@ -160,10 +187,14 @@ "gopd": ["gopd@1.2.0", "", {}, "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg=="], + "has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="], + "has-symbols": ["has-symbols@1.1.0", "", {}, "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ=="], "hasown": ["hasown@2.0.2", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="], + "highlight.js": ["highlight.js@10.7.3", "", {}, "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A=="], + "hono": ["hono@4.11.9", "", {}, "sha512-Eaw2YTGM6WOxA6CXbckaEvslr2Ne4NFsKrvc0v97JD5awbmeBLO5w9Ho9L9kmKonrwF9RJlW6BxT1PVv/agBHQ=="], "http-errors": ["http-errors@2.0.0", "", { "dependencies": { "depd": "2.0.0", "inherits": "2.0.4", "setprototypeof": "1.2.0", "statuses": "2.0.1", "toidentifier": "1.0.1" } }, "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ=="], @@ -198,6 +229,10 @@ "json-schema-typed": ["json-schema-typed@8.0.2", "", {}, "sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA=="], + "marked": ["marked@15.0.12", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA=="], + + "marked-terminal": ["marked-terminal@7.3.0", "", { "dependencies": { "ansi-escapes": "^7.0.0", "ansi-regex": "^6.1.0", "chalk": "^5.4.1", "cli-highlight": "^2.1.11", "cli-table3": "^0.6.5", "node-emoji": "^2.2.0", "supports-hyperlinks": "^3.1.0" }, "peerDependencies": { "marked": ">=1 <16" } }, "sha512-t4rBvPsHc57uE/2nJOLmMbZCQ4tgAccAED3ngXQqW6g+TxA488JzJ+FK3lQkzBQOI1mRV/r/Kq+1ZlJ4D0owQw=="], + "math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="], "media-typer": ["media-typer@1.1.0", "", {}, "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw=="], @@ -212,8 +247,12 @@ "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="], + "mz": ["mz@2.7.0", "", { "dependencies": { "any-promise": "^1.0.0", "object-assign": "^4.0.1", "thenify-all": "^1.0.0" } }, "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q=="], + "negotiator": ["negotiator@1.0.0", "", {}, "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg=="], + "node-emoji": ["node-emoji@2.2.0", "", { "dependencies": { "@sindresorhus/is": "^4.6.0", "char-regex": "^1.0.2", "emojilib": "^2.4.0", "skin-tone": "^2.0.0" } }, "sha512-Z3lTE9pLaJF47NyMhd4ww1yFTAP8YhYI8SleJiHzM46Fgpm5cnNzSl9XfzFNqbaz+VlJrIj3fXQ4DeN1Rjm6cw=="], + "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="], "object-inspect": ["object-inspect@1.13.4", "", {}, "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew=="], @@ -226,6 +265,10 @@ "openai": ["openai@6.22.0", "", { "peerDependencies": { "ws": "^8.18.0", "zod": "^3.25 || ^4.0" }, "optionalPeers": ["ws", "zod"], "bin": { "openai": "bin/cli" } }, "sha512-7Yvy17F33Bi9RutWbsaYt5hJEEJ/krRPOrwan+f9aCPuMat1WVsb2VNSII5W1EksKT6fF69TG/xj4XzodK3JZw=="], + "parse5": ["parse5@5.1.1", "", {}, "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug=="], + + "parse5-htmlparser2-tree-adapter": ["parse5-htmlparser2-tree-adapter@6.0.1", "", { "dependencies": { "parse5": "^6.0.1" } }, "sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA=="], + "parseurl": ["parseurl@1.3.3", "", {}, "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="], "patch-console": ["patch-console@2.0.0", "", {}, "sha512-0YNdUceMdaQwoKce1gatDScmMo5pu/tfABfnzEqeG0gtTmd7mh/WcwgUjtAeOU7N8nFFlbQBnFK2gXW5fGvmMA=="], @@ -250,6 +293,8 @@ "react-reconciler": ["react-reconciler@0.33.0", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.0" } }, "sha512-KetWRytFv1epdpJc3J4G75I4WrplZE5jOL7Yq0p34+OVOKF4Se7WrdIdVC45XsSSmUTlht2FM/fM1FZb1mfQeA=="], + "require-directory": ["require-directory@2.1.1", "", {}, "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="], + "require-from-string": ["require-from-string@2.0.2", "", {}, "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="], "restore-cursor": ["restore-cursor@4.0.0", "", { "dependencies": { "onetime": "^5.1.0", "signal-exit": "^3.0.2" } }, "sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg=="], @@ -282,7 +327,9 @@ "signal-exit": ["signal-exit@3.0.7", "", {}, "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="], - "slice-ansi": ["slice-ansi@7.1.2", "", { "dependencies": { "ansi-styles": "^6.2.1", "is-fullwidth-code-point": "^5.0.0" } }, "sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w=="], + "skin-tone": ["skin-tone@2.0.0", "", { "dependencies": { "unicode-emoji-modifier-base": "^1.0.0" } }, "sha512-kUMbT1oBJCpgrnKoSr0o6wPtvRWT9W9UKvGLwfJYO2WuahZRHOpEyL1ckyMGgMWh0UdpmaoFqKKD29WTomNEGA=="], + + "slice-ansi": ["slice-ansi@8.0.0", "", { "dependencies": { "ansi-styles": "^6.2.3", "is-fullwidth-code-point": "^5.1.0" } }, "sha512-stxByr12oeeOyY2BlviTNQlYV5xOj47GirPr4yA1hE9JCtxfQN0+tVbkxwCtYDQWhEKWFHsEK48ORg5jrouCAg=="], "stack-utils": ["stack-utils@2.0.6", "", { "dependencies": { "escape-string-regexp": "^2.0.0" } }, "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ=="], @@ -292,10 +339,18 @@ "strip-ansi": ["strip-ansi@7.1.0", "", { "dependencies": { "ansi-regex": "^6.0.1" } }, "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ=="], + "supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="], + + "supports-hyperlinks": ["supports-hyperlinks@3.2.0", "", { "dependencies": { "has-flag": "^4.0.0", "supports-color": "^7.0.0" } }, "sha512-zFObLMyZeEwzAoKCyu1B91U79K2t7ApXuQfo8OuxwXLDgcKxuwM+YvcbIhm6QWqz7mHUH1TVytR1PwVVjEuMig=="], + "tagged-tag": ["tagged-tag@1.0.0", "", {}, "sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng=="], "terminal-size": ["terminal-size@4.0.1", "", {}, "sha512-avMLDQpUI9I5XFrklECw1ZEUPJhqzcwSWsyyI8blhRLT+8N1jLJWLWWYQpB2q2xthq8xDvjZPISVh53T/+CLYQ=="], + "thenify": ["thenify@3.3.1", "", { "dependencies": { "any-promise": "^1.0.0" } }, "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw=="], + + "thenify-all": ["thenify-all@1.6.0", "", { "dependencies": { "thenify": ">= 3.1.0 < 4" } }, "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA=="], + "toidentifier": ["toidentifier@1.0.1", "", {}, "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="], "type-fest": ["type-fest@5.4.4", "", { "dependencies": { "tagged-tag": "^1.0.0" } }, "sha512-JnTrzGu+zPV3aXIUhnyWJj4z/wigMsdYajGLIYakqyOW1nPllzXEJee0QQbHj+CTIQtXGlAjuK0UY+2xTyjVAw=="], @@ -306,6 +361,8 @@ "undici-types": ["undici-types@7.8.0", "", {}, "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw=="], + "unicode-emoji-modifier-base": ["unicode-emoji-modifier-base@1.0.0", "", {}, "sha512-yLSH4py7oFH3oG/9K+XWrz1pSi3dfUrWEnInbxMfArOfc1+33BlGPQtLsOYwvdMy11AwUBetYuaRxSPqgkq+8g=="], + "unpipe": ["unpipe@1.0.0", "", {}, "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ=="], "vary": ["vary@1.1.2", "", {}, "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="], @@ -320,6 +377,12 @@ "ws": ["ws@8.18.3", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg=="], + "y18n": ["y18n@5.0.8", "", {}, "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="], + + "yargs": ["yargs@16.2.0", "", { "dependencies": { "cliui": "^7.0.2", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "require-directory": "^2.1.1", "string-width": "^4.2.0", "y18n": "^5.0.5", "yargs-parser": "^20.2.2" } }, "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw=="], + + "yargs-parser": ["yargs-parser@20.2.9", "", {}, "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="], + "yoga-layout": ["yoga-layout@3.2.1", "", {}, "sha512-0LPOt3AxKqMdFBZA3HBAt/t/8vIKq7VaQYbuA8WxCgung+p9TVyKRYdpvCb80HcdTN2NkbIKbhNwKUfm3tQywQ=="], "zod": ["zod@3.25.67", "", {}, "sha512-idA2YXwpCdqUSKRCACDE6ItZD9TZzy3OZMtpfLoh6oPR47lipysRrJfjzMqFxQ3uJuUPyUeWe1r9vLH33xO/Qw=="], @@ -334,18 +397,64 @@ "body-parser/raw-body": ["raw-body@3.0.2", "", { "dependencies": { "bytes": "~3.1.2", "http-errors": "~2.0.1", "iconv-lite": "~0.7.0", "unpipe": "~1.0.0" } }, "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA=="], + "cli-highlight/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="], + + "cli-table3/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="], + + "cli-truncate/slice-ansi": ["slice-ansi@7.1.2", "", { "dependencies": { "ansi-styles": "^6.2.1", "is-fullwidth-code-point": "^5.0.0" } }, "sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w=="], + + "cliui/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="], + + "cliui/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="], + + "cliui/wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="], + "ink/chalk": ["chalk@5.6.2", "", {}, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="], + "ink/slice-ansi": ["slice-ansi@7.1.2", "", { "dependencies": { "ansi-styles": "^6.2.1", "is-fullwidth-code-point": "^5.0.0" } }, "sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w=="], + "ink-text-input/chalk": ["chalk@5.6.2", "", {}, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="], "ink-text-input/type-fest": ["type-fest@4.41.0", "", {}, "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA=="], + "marked-terminal/chalk": ["chalk@5.6.2", "", {}, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="], + + "parse5-htmlparser2-tree-adapter/parse5": ["parse5@6.0.1", "", {}, "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="], + "wrap-ansi/string-width": ["string-width@7.2.0", "", { "dependencies": { "emoji-regex": "^10.3.0", "get-east-asian-width": "^1.0.0", "strip-ansi": "^7.1.0" } }, "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ=="], + "yargs/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="], + "body-parser/raw-body/http-errors": ["http-errors@2.0.1", "", { "dependencies": { "depd": "~2.0.0", "inherits": "~2.0.4", "setprototypeof": "~1.2.0", "statuses": "~2.0.2", "toidentifier": "~1.0.1" } }, "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ=="], + "cli-highlight/chalk/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="], + + "cli-table3/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="], + + "cli-table3/string-width/is-fullwidth-code-point": ["is-fullwidth-code-point@3.0.0", "", {}, "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="], + + "cli-table3/string-width/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="], + + "cliui/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="], + + "cliui/string-width/is-fullwidth-code-point": ["is-fullwidth-code-point@3.0.0", "", {}, "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="], + + "cliui/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="], + + "cliui/wrap-ansi/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="], + "wrap-ansi/string-width/get-east-asian-width": ["get-east-asian-width@1.3.0", "", {}, "sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ=="], + "yargs/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="], + + "yargs/string-width/is-fullwidth-code-point": ["is-fullwidth-code-point@3.0.0", "", {}, "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="], + + "yargs/string-width/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="], + "body-parser/raw-body/http-errors/statuses": ["statuses@2.0.2", "", {}, "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw=="], + + "cli-table3/string-width/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="], + + "yargs/string-width/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="], } } diff --git a/components/App.tsx b/components/App.tsx index c253d7d..08f9048 100644 --- a/components/App.tsx +++ b/components/App.tsx @@ -1,13 +1,18 @@ -import { useState, useEffect, useCallback, useRef } from "react"; -import { Box, useApp } from "ink"; +import { useState, useEffect, useCallback, useRef, useMemo } from "react"; +import { Box, useApp, useStdout } from "ink"; import type { MCPServerStreamableHttp } from "@openai/agents"; import type { GeneralAgent } from "../agents/general.js"; import type { Logger, LogEvent } from "../classes/logger.js"; import type { Config } from "../classes/config.js"; +import { renderMarkdown } from "../utils/markdown.js"; import { MessageArea } from "./MessageArea.js"; import { InputBox } from "./InputBox.js"; import type { MessageData } from "./Message.js"; +type FocusArea = "input" | "messages"; + +const SCROLL_STEP = 4; + interface AppProps { agent: GeneralAgent; mcpServer: MCPServerStreamableHttp; @@ -26,7 +31,17 @@ export function App({ onExit, }: AppProps) { const { exit } = useApp(); - const [messages, setMessages] = useState([]); + const { stdout } = useStdout(); + const welcomeMsg = + "Ready! Type a message to chat. Press Tab to scroll wide content with ← →."; + const [messages, setMessages] = useState([ + { + role: "system", + content: welcomeMsg, + rendered: welcomeMsg, + timestamp: new Date().toLocaleTimeString(), + }, + ]); const [streamingText, setStreamingText] = useState(""); const [isStreaming, setIsStreaming] = useState(false); const [toolCallCount, setToolCallCount] = useState(0); @@ -35,6 +50,60 @@ export function App({ const queueRef = useRef([]); const [queueCount, setQueueCount] = useState(0); const initialProcessed = useRef(false); + const [focusArea, setFocusArea] = useState("input"); + const [scrollX, setScrollX] = useState(0); + const [scrollY, setScrollY] = useState(0); + + // Subtract 4 for MessageArea border (2) + paddingX (2) + const viewportWidth = (stdout?.columns || 80) - 4; + // Leave room for input box (~5 lines) + border (2) + padding (2) + const viewportHeight = (stdout?.rows || 24) - 9; + + // Derive the last assistant message's rendered content for scroll viewport + const lastAssistantRendered = useMemo(() => { + for (let i = messages.length - 1; i >= 0; i--) { + if (messages[i].role === "assistant") return messages[i].rendered; + } + return ""; + }, [messages]); + + const handleToggleFocus = useCallback(() => { + setFocusArea((prev) => { + if (prev === "input") { + setScrollX(0); + setScrollY(0); + return "messages"; + } + return "input"; + }); + }, []); + + const handleScroll = useCallback((direction: "left" | "right") => { + if (direction === "left") { + setScrollX((prev) => Math.max(0, prev - SCROLL_STEP)); + } else { + setScrollX((prev) => prev + SCROLL_STEP); + } + }, []); + + const handleScrollVertical = useCallback( + (direction: "up" | "down") => { + if (direction === "up") { + setScrollY((prev) => Math.max(0, prev - SCROLL_STEP)); + } else { + const maxY = Math.max( + 0, + lastAssistantRendered.split("\n").length - viewportHeight, + ); + setScrollY((prev) => Math.min(maxY, prev + SCROLL_STEP)); + } + }, + [lastAssistantRendered, viewportHeight], + ); + + const handleReturnToInput = useCallback(() => { + setFocusArea("input"); + }, []); // Subscribe to logger events useEffect(() => { @@ -44,6 +113,7 @@ export function App({ { role: "system", content: event.message, + rendered: event.message, timestamp: event.timestamp, }, ]); @@ -67,6 +137,7 @@ export function App({ { role: "user", content: input, + rendered: `?> ${input}`, timestamp: logger.getTimestamp(), }, ]); @@ -96,15 +167,18 @@ export function App({ { role: "assistant", content, + rendered: renderMarkdown(content), timestamp: logger.getTimestamp(), }, ]); } catch (err) { + const errMsg = `Error: ${err instanceof Error ? err.message : String(err)}`; setMessages((prev) => [ ...prev, { role: "system", - content: `Error: ${err instanceof Error ? err.message : String(err)}`, + content: errMsg, + rendered: errMsg, timestamp: logger.getTimestamp(), }, ]); @@ -155,6 +229,7 @@ export function App({ { role: "system", content: "Conversation history cleared!", + rendered: "Conversation history cleared!", timestamp: logger.getTimestamp(), }, ]); @@ -182,11 +257,22 @@ export function App({ isStreaming={isStreaming} toolCallCount={toolCallCount} startTime={startTime} + scrollX={scrollX} + scrollY={scrollY} + focused={focusArea === "messages"} + viewportWidth={viewportWidth} + viewportHeight={viewportHeight} + lastAssistantRendered={lastAssistantRendered} /> ); diff --git a/components/InputBox.tsx b/components/InputBox.tsx index bf6e565..51d1efb 100644 --- a/components/InputBox.tsx +++ b/components/InputBox.tsx @@ -8,6 +8,11 @@ interface InputBoxProps { onSubmit: (input: string) => void; contextDir: string; queueCount: number; + focus: boolean; + onToggleFocus: () => void; + onScroll: (direction: "left" | "right") => void; + onScrollVertical: (direction: "up" | "down") => void; + onReturnToInput: () => void; } const DELIM = "\0"; @@ -26,7 +31,16 @@ function saveToHistory(historyFile: string, entry: string) { fs.appendFileSync(historyFile, entry + DELIM); } -export function InputBox({ onSubmit, contextDir, queueCount }: InputBoxProps) { +export function InputBox({ + onSubmit, + contextDir, + queueCount, + focus, + onToggleFocus, + onScroll, + onScrollVertical, + onReturnToInput, +}: InputBoxProps) { const [value, setValue] = useState(""); const historyFile = path.join(contextDir, "chat_history.txt"); const historyRef = useRef(loadHistory(historyFile)); @@ -48,7 +62,29 @@ export function InputBox({ onSubmit, contextDir, queueCount }: InputBoxProps) { [onSubmit, historyFile], ); - useInput((_input, key) => { + useInput((input, key) => { + if (key.tab) { + onToggleFocus(); + return; + } + + if (!focus) { + // In scroll mode: arrows scroll, printable chars return to input + if (key.upArrow) { + onScrollVertical("up"); + } else if (key.downArrow) { + onScrollVertical("down"); + } else if (key.leftArrow) { + onScroll("left"); + } else if (key.rightArrow) { + onScroll("right"); + } else if (input && !key.ctrl && !key.meta) { + onReturnToInput(); + } + return; + } + + // In input mode: up/down for history const history = historyRef.current; if (key.upArrow && history.length > 0) { if (indexRef.current === -1) { @@ -72,12 +108,16 @@ export function InputBox({ onSubmit, contextDir, queueCount }: InputBoxProps) { return ( - + diff --git a/components/Message.tsx b/components/Message.tsx index 8b64082..93e1160 100644 --- a/components/Message.tsx +++ b/components/Message.tsx @@ -1,27 +1,43 @@ +import { memo } from "react"; import { Box, Text } from "ink"; +import { applyHorizontalScroll } from "../utils/markdown.js"; export type MessageRole = "user" | "assistant" | "system"; export interface MessageData { role: MessageRole; content: string; + rendered: string; timestamp: string; } -export function Message({ role, content, timestamp }: MessageData) { +interface MessageProps extends MessageData { + scrollX?: number; + viewportWidth?: number; +} + +export const Message = memo(function Message({ + role, + rendered, + timestamp, + scrollX = 0, + viewportWidth = Infinity, +}: MessageProps) { const color = role === "user" ? "green" : role === "system" ? "gray" : "white"; - const prefix = role === "user" ? "?> " : ""; + + const display = applyHorizontalScroll(rendered, scrollX, viewportWidth); return ( - - {timestamp} - - {prefix} - {content} - + + {applyHorizontalScroll(timestamp, scrollX, viewportWidth)} + {role === "assistant" ? ( + {display} + ) : ( + {display} + )} ); -} +}); diff --git a/components/MessageArea.tsx b/components/MessageArea.tsx index 7164ae5..cd4d2da 100644 --- a/components/MessageArea.tsx +++ b/components/MessageArea.tsx @@ -1,6 +1,19 @@ -import { Box, Text } from "ink"; +import { Box, Static, Text } from "ink"; +import type { BoxStyle } from "cli-boxes"; import Spinner from "ink-spinner"; -import { Message, type MessageData } from "./Message.js"; +import type { MessageData } from "./Message.js"; +import { renderMarkdown, applyHorizontalScroll } from "../utils/markdown.js"; + +const dashedBorder: BoxStyle = { + topLeft: "┌", + top: "╌", + topRight: "┐", + right: "╎", + bottomRight: "┘", + bottom: "╌", + bottomLeft: "└", + left: "╎", +}; interface MessageAreaProps { messages: MessageData[]; @@ -8,6 +21,12 @@ interface MessageAreaProps { isStreaming: boolean; toolCallCount: number; startTime: number | null; + scrollX: number; + scrollY: number; + focused: boolean; + viewportWidth: number; + viewportHeight: number; + lastAssistantRendered: string; } export function MessageArea({ @@ -16,30 +35,82 @@ export function MessageArea({ isStreaming, toolCallCount, startTime, + scrollX, + scrollY, + focused, + viewportWidth, + viewportHeight, + lastAssistantRendered, }: MessageAreaProps) { + // Build a clipped viewport of the last assistant message for scroll mode + let scrollViewport = ""; + if (focused && lastAssistantRendered) { + const lines = lastAssistantRendered.split("\n"); + const visibleLines = lines.slice(scrollY, scrollY + viewportHeight); + scrollViewport = applyHorizontalScroll( + visibleLines.join("\n"), + scrollX, + viewportWidth, + ); + } + + const showDynamicArea = focused || isStreaming; + return ( - - {messages.map((msg, i) => ( - - ))} - - {isStreaming && ( - - - - {" "} - - - Thinking... - {startTime && - ` 🕝 ${Math.round((Date.now() - startTime) / 1000)}s`} - {toolCallCount > 0 && - ` | 🛠️ ${toolCallCount} tool call${toolCallCount > 1 ? "s" : ""}`} - + <> + + {(msg, i) => ( + + {msg.timestamp} + {msg.role === "assistant" ? ( + {msg.rendered} + ) : ( + + {msg.rendered} + + )} - {streamingText && {streamingText}} + )} + + + {showDynamicArea && ( + + {focused && scrollViewport && {scrollViewport}} + + {isStreaming && ( + + + + {" "} + + + Thinking... + {startTime && + ` 🕝 ${Math.round((Date.now() - startTime) / 1000)}s`} + {toolCallCount > 0 && + ` | 🛠️ ${toolCallCount} tool call${toolCallCount > 1 ? "s" : ""}`} + + + {streamingText && {renderMarkdown(streamingText)}} + + )} + + {focused && ( + + ↑↓ ← → to scroll + {scrollX > 0 || scrollY > 0 + ? ` (x:${scrollX} y:${scrollY})` + : ""}{" "} + | Tab to return to input + + )} )} - + ); } diff --git a/conductor.json b/conductor.json new file mode 100644 index 0000000..97f6080 --- /dev/null +++ b/conductor.json @@ -0,0 +1,6 @@ +{ + "scripts": { + "setup": "cp \"$CONDUCTOR_ROOT_PATH/.env\" .env 2>/dev/null; bun install", + "run": "./agent.ts chat" + } +} diff --git a/package.json b/package.json index 8381dd9..0898613 100644 --- a/package.json +++ b/package.json @@ -26,8 +26,11 @@ "ink": "^6.7.0", "ink-spinner": "^5.0.0", "ink-text-input": "^6.0.0", + "marked": "15", + "marked-terminal": "^7.3.0", "openai": "^6.20.0", - "react": "^19.2.4" + "react": "^19.2.4", + "slice-ansi": "^8.0.0" }, "devDependencies": { "@types/bun": "latest", diff --git a/tests/markdown.test.ts b/tests/markdown.test.ts new file mode 100644 index 0000000..7350e33 --- /dev/null +++ b/tests/markdown.test.ts @@ -0,0 +1,64 @@ +import { describe, it, expect } from "bun:test"; +import { renderMarkdown, applyHorizontalScroll } from "../utils/markdown.js"; + +describe("renderMarkdown", () => { + it("renders bold text", () => { + const result = renderMarkdown("**bold**"); + expect(result).toContain("bold"); + expect(result).not.toContain("**"); + }); + + it("renders inline code", () => { + const result = renderMarkdown("use `console.log`"); + expect(result).toContain("console.log"); + }); + + it("renders code blocks", () => { + const result = renderMarkdown("```\nconst x = 1;\n```"); + expect(result).toContain("const x = 1"); + }); + + it("renders tables", () => { + const result = renderMarkdown("| A | B |\n|---|---|\n| 1 | 2 |"); + expect(result).toContain("A"); + expect(result).toContain("B"); + expect(result).toContain("1"); + expect(result).toContain("2"); + }); + + it("trims trailing newlines", () => { + const result = renderMarkdown("hello"); + expect(result).not.toMatch(/\n$/); + }); + + it("accepts a custom column width", () => { + const result = renderMarkdown("hello world", 40); + expect(result).toContain("hello world"); + }); +}); + +describe("applyHorizontalScroll", () => { + it("returns text unchanged when scrollX is 0 and viewport is Infinity", () => { + const text = "hello world"; + expect(applyHorizontalScroll(text, 0, Infinity)).toBe(text); + }); + + it("slices each line by scrollX", () => { + const text = "abcdefghij\n0123456789"; + const result = applyHorizontalScroll(text, 3, 4); + expect(result).toBe("defg\n3456"); + }); + + it("handles scrollX beyond line length", () => { + const result = applyHorizontalScroll("short", 10, 20); + expect(result).toBe(""); + }); + + it("handles multi-line text with varying lengths", () => { + const text = "long line here\nhi"; + const result = applyHorizontalScroll(text, 2, 5); + const lines = result.split("\n"); + expect(lines[0]).toBe("ng li"); + expect(lines[1]).toBe(""); + }); +}); diff --git a/utils/markdown.ts b/utils/markdown.ts new file mode 100644 index 0000000..047bbe7 --- /dev/null +++ b/utils/markdown.ts @@ -0,0 +1,37 @@ +import { Marked } from "marked"; +import { markedTerminal } from "marked-terminal"; +import sliceAnsi from "slice-ansi"; + +const marker = new Marked( + markedTerminal({ + width: 9999, + reflowText: false, + tab: 2, + }), +); + +export function renderMarkdown(text: string, columns?: number): string { + if (columns) { + const custom = new Marked( + markedTerminal({ + width: columns, + reflowText: true, + tab: 2, + }), + ); + return (custom.parse(text) as string).trimEnd(); + } + return (marker.parse(text) as string).trimEnd(); +} + +export function applyHorizontalScroll( + text: string, + scrollX: number, + viewportWidth: number, +): string { + if (scrollX === 0 && viewportWidth === Infinity) return text; + return text + .split("\n") + .map((line) => sliceAnsi(line, scrollX, scrollX + viewportWidth)) + .join("\n"); +}