mirrors/hermes-agent
1
0
Fork 0
mirror of https://github.com/NousResearch/hermes-agent.git synced 2026-04-25 00:51:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): add Chat tab with xterm.js terminal + Sessions resume button

Browse source 
Wires the new /api/pty WebSocket into the dashboard as a top-level
Chat tab. Clicking Chat (or the ▶ play icon on any session row)
spawns a PTY running hermes --tui and renders its ANSI output with
xterm.js in the browser.

Frontend
--------

web/src/pages/ChatPage.tsx
  * @xterm/xterm v6 + @xterm/addon-webgl renderer (pixel-perfect cell
    grid — DOM and canvas renderers each have layout artifacts that
    break box-drawing glyph connectivity in a browser)
  * @xterm/addon-fit for container-driven resize
  * @xterm/addon-unicode11 for modern wide-char widths (matches Ink's
    string-width computation so kaomoji / CJK / emoji land on the
    same cell boundaries as the host expects)
  * @xterm/addon-web-links for URL auto-linking
  * Rounded dark-teal "terminal window" container with 12px internal
    padding + drop shadow for visual identity within the dashboard
  * Clipboard wiring:
      - Ctrl/Cmd+Shift+C copies xterm selection to system clipboard
      - Ctrl/Cmd+Shift+V pastes system clipboard into the PTY
      - OSC 52 handler writes terminal-emitted clipboard sequences
        (how Ink's own Ctrl+C and /copy command deliver copy events);
        decodes via TextDecoder so multi-byte UTF-8 codepoints
        (U+2265, emoji, CJK) round-trip correctly
      - Plain Ctrl+C still passes through as SIGINT to interrupt a
        running response
  * Floating "copy last response" button in the bottom-right corner.
    Triggers Ink's /copy slash by sending bytes in two frames with a
    100ms gap — Ink's tokenizer coalesces rapid adjacent bytes into
    a paste event (bypasses the slash dispatcher), so we deliberately
    split '/copy' and '\r' into separate packets to land them as
    individual keypresses.

web/src/App.tsx
  Chat nav entry (Terminal icon) at position 2 and <Route path="/chat">.

web/src/pages/SessionsPage.tsx
  Play-icon button per session row that navigates to /chat?resume=<id>;
  the PTY bridge forwards the resume param to hermes --tui --resume.

web/src/i18n/{en,zh,types}.ts
  nav.chat label + sessions.resumeInChat action label.

web/vite.config.ts
  /api proxy gains ws: true so WebSocket upgrades forward to :9119
  when running Vite dev mode against a separate hermes dashboard
  backend.

web/src/index.css + web/public/fonts-terminal/
  Bundles JetBrains Mono (Regular/Bold/Italic, Apache-2.0, ~280 KB
  total) as a local webfont. Fonts live outside web/public/fonts/
  because the sync-assets prebuild step wipes that directory from
  @nous-research/ui every build.

Package deps
------------

Net new: @xterm/xterm ^6.0.0, @xterm/addon-fit ^0.11.0,
         @xterm/addon-webgl ^0.19.0, @xterm/addon-unicode11 ^0.9.0,
         @xterm/addon-web-links ^0.12.0.

Bundle impact: +420 KB minified / +105 KB gzipped. Acceptable for a
feature that replaces what would otherwise be a rewrite of the entire
TUI surface in React.

Backend contract preserved
---------------------------

Every TUI affordance (slash popover, model picker, tool cards,
markdown streaming, clarify/sudo/approval prompts, skin engine, wide
chars, mouse tracking) lands in the browser unchanged because we are
running the real Ink binary. Adding a feature to the TUI surfaces in
the dashboard immediately. Do NOT add parallel React chat surfaces.
This commit is contained in:
emozilla 2026-04-21 02:10:13 -04:00
parent 29b337bca7
commit 3d21aee811
13 changed files with 590 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

82
web/package-lock.json generated
View file

@ -12,6 +12,11 @@
"@observablehq/plot": "^0.6.17",
"@react-three/fiber": "^9.6.0",
"@tailwindcss/vite": "^4.2.1",
"@xterm/addon-fit": "^0.11.0",
"@xterm/addon-unicode11": "^0.9.0",
"@xterm/addon-web-links": "^0.12.0",
"@xterm/addon-webgl": "^0.19.0",
"@xterm/xterm": "^6.0.0",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"gsap": "^3.15.0",
@ -39,6 +44,50 @@
"vite": "^7.3.1"
}
},
"../../../../../wterm/packages/@wterm/core": {
"version": "0.1.9",
"extraneous": true,
"license": "Apache-2.0",
"devDependencies": {
"@internal/ts": "workspace:*",
"typescript": "^6.0.2"
}
},
"../../../../../wterm/packages/@wterm/dom": {
"version": "0.1.9",
"extraneous": true,
"license": "Apache-2.0",
"dependencies": {
"@wterm/core": "workspace:*"
},
"devDependencies": {
"@internal/ts": "workspace:*",
"jsdom": "^29.0.2",
"typescript": "^6.0.2"
}
},
"../../../../../wterm/packages/@wterm/react": {
"version": "0.1.9",
"extraneous": true,
"license": "Apache-2.0",
"devDependencies": {
"@internal/ts": "workspace:*",
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.2",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@wterm/dom": "workspace:*",
"jsdom": "^29.0.2",
"react": "^19.2.5",
"react-dom": "^19.2.5",
"typescript": "^6.0.2"
},
"peerDependencies": {
"@wterm/dom": "workspace:*",
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
}
},
"node_modules/@babel/code-frame": {
"version": "7.29.0",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
@ -2861,6 +2910,39 @@
"vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
}
},
"node_modules/@xterm/addon-fit": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.11.0.tgz",
"integrity": "sha512-jYcgT6xtVYhnhgxh3QgYDnnNMYTcf8ElbxxFzX0IZo+vabQqSPAjC3c1wJrKB5E19VwQei89QCiZZP86DCPF7g==",
"license": "MIT"
},
"node_modules/@xterm/addon-unicode11": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/@xterm/addon-unicode11/-/addon-unicode11-0.9.0.tgz",
"integrity": "sha512-FxDnYcyuXhNl+XSqGZL/t0U9eiNb/q3EWT5rYkQT/zuig8Gz/VagnQANKHdDWFM2lTMk9ly0EFQxxxtZUoRetw==",
"license": "MIT"
},
"node_modules/@xterm/addon-web-links": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/@xterm/addon-web-links/-/addon-web-links-0.12.0.tgz",
"integrity": "sha512-4Smom3RPyVp7ZMYOYDoC/9eGJJJqYhnPLGGqJ6wOBfB8VxPViJNSKdgRYb8NpaM6YSelEKbA2SStD7lGyqaobw==",
"license": "MIT"
},
"node_modules/@xterm/addon-webgl": {
"version": "0.19.0",
"resolved": "https://registry.npmjs.org/@xterm/addon-webgl/-/addon-webgl-0.19.0.tgz",
"integrity": "sha512-b3fMOsyLVuCeNJWxolACEUED0vm7qC0cy4wRvf3oURSzDTYVQiGPhTnhWZwIHdvC48Y+oLhvYXnY4XDXPoJo6A==",
"license": "MIT"
},
"node_modules/@xterm/xterm": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-6.0.0.tgz",
"integrity": "sha512-TQwDdQGtwwDt+2cgKDLn0IRaSxYu1tSUjgKarSDkUM0ZNiSRXFpjxEsvc/Zgc5kq5omJ+V0a8/kIM2WD3sMOYg==",
"license": "MIT",
"workspaces": [
"addons/*"
]
},
"node_modules/acorn": {
"version": "8.16.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",

5
web/package.json
View file

@ -17,6 +17,11 @@
"@observablehq/plot": "^0.6.17",
"@react-three/fiber": "^9.6.0",
"@tailwindcss/vite": "^4.2.1",
"@xterm/addon-fit": "^0.11.0",
"@xterm/addon-unicode11": "^0.9.0",
"@xterm/addon-web-links": "^0.12.0",
"@xterm/addon-webgl": "^0.19.0",
"@xterm/xterm": "^6.0.0",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"gsap": "^3.15.0",

BIN
web/public/fonts-terminal/JetBrainsMono-Bold.woff2 Normal file
View file

Binary file not shown.

BIN
web/public/fonts-terminal/JetBrainsMono-Italic.woff2 Normal file
View file

Binary file not shown.

BIN
web/public/fonts-terminal/JetBrainsMono-Regular.woff2 Normal file
View file

Binary file not shown.

3
web/src/App.tsx
View file

@ -33,6 +33,7 @@ import LogsPage from "@/pages/LogsPage";
import AnalyticsPage from "@/pages/AnalyticsPage";
import CronPage from "@/pages/CronPage";
import SkillsPage from "@/pages/SkillsPage";
import ChatPage from "@/pages/ChatPage";
import { LanguageSwitcher } from "@/components/LanguageSwitcher";
import { ThemeSwitcher } from "@/components/ThemeSwitcher";
import { useI18n } from "@/i18n";
@ -41,6 +42,7 @@ import type { RegisteredPlugin } from "@/plugins";
const BUILTIN_NAV: NavItem[] = [
{ path: "/", labelKey: "status", label: "Status", icon: Activity },
{ path: "/chat", labelKey: "chat", label: "Chat", icon: Terminal },
{
path: "/sessions",
labelKey: "sessions",
@ -230,6 +232,7 @@ export default function App() {
<main className="relative z-2 mx-auto w-full max-w-[1600px] flex-1 px-3 sm:px-6 pt-16 sm:pt-20 pb-4 sm:pb-8">
<Routes>
<Route path="/" element={<StatusPage />} />
<Route path="/chat" element={<ChatPage />} />
<Route path="/sessions" element={<SessionsPage />} />
<Route path="/analytics" element={<AnalyticsPage />} />
<Route path="/logs" element={<LogsPage />} />

2
web/src/i18n/en.ts
View file

@ -54,6 +54,7 @@ export const en: Translations = {
},
nav: {
status: "Status",
chat: "Chat",
sessions: "Sessions",
analytics: "Analytics",
logs: "Logs",
@ -97,6 +98,7 @@ export const en: Translations = {
noMessages: "No messages",
untitledSession: "Untitled session",
deleteSession: "Delete session",
resumeInChat: "Resume in Chat",
previousPage: "Previous page",
nextPage: "Next page",
roles: {

2
web/src/i18n/types.ts
View file

@ -56,6 +56,7 @@ export interface Translations {
};
nav: {
status: string;
chat: string;
sessions: string;
analytics: string;
logs: string;
@ -101,6 +102,7 @@ export interface Translations {
noMessages: string;
untitledSession: string;
deleteSession: string;
resumeInChat: string;
previousPage: string;
nextPage: string;
roles: {

2
web/src/i18n/zh.ts
View file

@ -54,6 +54,7 @@ export const zh: Translations = {
},
nav: {
status: "状态",
chat: "对话",
sessions: "会话",
analytics: "分析",
logs: "日志",
@ -97,6 +98,7 @@ export const zh: Translations = {
noMessages: "暂无消息",
untitledSession: "无标题会话",
deleteSession: "删除会话",
resumeInChat: "在对话中继续",
previousPage: "上一页",
nextPage: "下一页",
roles: {

30
web/src/index.css
View file

@ -5,6 +5,36 @@
Tailwind's JIT purge. */
@source '../node_modules/@nous-research/ui/dist';
/* ------------------------------------------------------------------ */
/* JetBrains Mono — bundled for the embedded TUI (/chat tab). */
/* Gives the terminal a proper monospace font even on systems where */
/* the user doesn't have one installed locally; xterm.js picks it up */
/* via ChatPage's `fontFamily` option. */
/* Apache-2.0. */
/* ------------------------------------------------------------------ */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts-terminal/JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts-terminal/JetBrainsMono-Bold.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/fonts-terminal/JetBrainsMono-Italic.woff2') format('woff2');
}
/* ------------------------------------------------------------------ */
/* Hermes Agent — Nous DS with the LENS_0 (Hermes teal) lens applied */
/* statically. Mirrors nousnet-web/(hermes-agent)/layout.tsx so the */

444
web/src/pages/ChatPage.tsx Normal file
View file

@ -0,0 +1,444 @@
/**
* ChatPage — embeds `hermes --tui` inside the dashboard.
*
* <div host> (dashboard chrome) .
* └─ <div wrapper> (rounded, dark bg, padded — the "terminal window" .
* look that gives the page a distinct visual identity) .
* └─ @xterm/xterm Terminal (WebGL renderer, Unicode 11 widths) .
* │ onData keystrokes → WebSocket → PTY master .
* │ onResize terminal resize → `\x1b[RESIZE:cols;rows]` .
* │ write(data) PTY output bytes → VT100 parser .
* ▼ .
* WebSocket /api/pty?token=<session> .
* ▼ .
* FastAPI pty_ws (hermes_cli/web_server.py) .
* ▼ .
* POSIX PTY → `node ui-tui/dist/entry.js` → tui_gateway + AIAgent .
*/
import { useEffect, useRef, useState } from "react";
import { useSearchParams } from "react-router-dom";
import { Terminal } from "@xterm/xterm";
import { FitAddon } from "@xterm/addon-fit";
import { WebglAddon } from "@xterm/addon-webgl";
import { Unicode11Addon } from "@xterm/addon-unicode11";
import { WebLinksAddon } from "@xterm/addon-web-links";
import { Copy } from "lucide-react";
import "@xterm/xterm/css/xterm.css";
function buildWsUrl(token: string, resume: string | null): string {
const proto = window.location.protocol === "https:" ? "wss:" : "ws:";
const qs = new URLSearchParams({ token });
if (resume) qs.set("resume", resume);
return `${proto}//${window.location.host}/api/pty?${qs.toString()}`;
}
// Colors for the terminal body. Matches the dashboard's dark teal canvas
// with cream foreground — we intentionally don't pick monokai or a loud
// theme, because the TUI's skin engine already paints the content; the
// terminal chrome just needs to sit quietly inside the dashboard.
const TERMINAL_THEME = {
background: "#0d2626",
foreground: "#f0e6d2",
cursor: "#f0e6d2",
cursorAccent: "#0d2626",
selectionBackground: "#f0e6d244",
};
export default function ChatPage() {
const hostRef = useRef<HTMLDivElement | null>(null);
const termRef = useRef<Terminal | null>(null);
const fitRef = useRef<FitAddon | null>(null);
const wsRef = useRef<WebSocket | null>(null);
const [searchParams] = useSearchParams();
const [banner, setBanner] = useState<string | null>(null);
const [copyState, setCopyState] = useState<"idle" | "copied">("idle");
const copyResetRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const resumeRef = useRef<string | null>(searchParams.get("resume"));
const handleCopyLast = () => {
const ws = wsRef.current;
if (!ws || ws.readyState !== WebSocket.OPEN) return;
// Send the slash as a burst, wait long enough for Ink's tokenizer to
// emit a keypress event for each character (not coalesce them into a
// paste), then send Return as its own event. The timing here is
// empirical — 100ms is safely past Node's default stdin coalescing
// window and well inside UI responsiveness.
ws.send("/copy");
setTimeout(() => {
const s = wsRef.current;
if (s && s.readyState === WebSocket.OPEN) s.send("\r");
}, 100);
setCopyState("copied");
if (copyResetRef.current) clearTimeout(copyResetRef.current);
copyResetRef.current = setTimeout(() => setCopyState("idle"), 1500);
termRef.current?.focus();
};
useEffect(() => {
const host = hostRef.current;
if (!host) return;
const token = window.__HERMES_SESSION_TOKEN__;
if (!token) {
setBanner(
"Session token unavailable. Open this page through `hermes dashboard`, not directly.",
);
return;
}
const term = new Terminal({
allowProposedApi: true,
cursorBlink: true,
fontFamily:
"'JetBrains Mono', 'Cascadia Mono', 'Fira Code', 'MesloLGS NF', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace",
fontSize: 14,
lineHeight: 1.2,
macOptionIsMeta: true,
scrollback: 0,
theme: TERMINAL_THEME,
});
termRef.current = term;
// --- Clipboard integration ---------------------------------------
//
// Three independent paths all route to the system clipboard:
//
// 1. **Selection → Ctrl+C (or Cmd+C on macOS).** Ink's own handler
// in useInputHandlers.ts turns Ctrl+C into a copy when the
// terminal has a selection, then emits an OSC 52 escape. Our
// OSC 52 handler below decodes that escape and writes to the
// browser clipboard — so the flow works just like it does in
// `hermes --tui`.
//
// 2. **Ctrl/Cmd+Shift+C.** Belt-and-suspenders shortcut that
// operates directly on xterm's selection, useful if the TUI
// ever stops listening (e.g. overlays / pickers) or if the user
// has selected with the mouse outside of Ink's selection model.
//
// 3. **Ctrl/Cmd+Shift+V.** Reads the system clipboard and feeds
// it to the terminal as keyboard input. xterm's paste() wraps
// it with bracketed-paste if the host has that mode enabled.
//
// OSC 52 reads (terminal asking to read the clipboard) are not
// supported — that would let any content the TUI renders exfiltrate
// the user's clipboard.
term.parser.registerOscHandler(52, (data) => {
// Format: "<targets>;<base64 | '?'>"
const semi = data.indexOf(";");
if (semi < 0) return false;
const payload = data.slice(semi + 1);
if (payload === "?" || payload === "") return false; // read/clear — ignore
try {
// atob returns a binary string (one byte per char); we need UTF-8
// decode so multi-byte codepoints (≥, →, emoji, CJK) round-trip
// correctly. Without this step, the three UTF-8 bytes of `≥`
// would land in the clipboard as the three separate Latin-1
// characters `≥`.
const binary = atob(payload);
const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
const text = new TextDecoder("utf-8").decode(bytes);
navigator.clipboard.writeText(text).catch(() => {});
} catch {
// Malformed base64 — silently drop.
}
return true;
});
const isMac =
typeof navigator !== "undefined" && /Mac/i.test(navigator.platform);
term.attachCustomKeyEventHandler((ev) => {
if (ev.type !== "keydown") return true;
const copyModifier = isMac ? ev.metaKey : ev.ctrlKey && ev.shiftKey;
const pasteModifier = isMac ? ev.metaKey : ev.ctrlKey && ev.shiftKey;
if (copyModifier && ev.key.toLowerCase() === "c") {
const sel = term.getSelection();
if (sel) {
navigator.clipboard.writeText(sel).catch(() => {});
ev.preventDefault();
return false;
}
}
if (pasteModifier && ev.key.toLowerCase() === "v") {
navigator.clipboard
.readText()
.then((text) => {
if (text) term.paste(text);
})
.catch(() => {});
ev.preventDefault();
return false;
}
return true;
});
const fit = new FitAddon();
fitRef.current = fit;
term.loadAddon(fit);
const unicode11 = new Unicode11Addon();
term.loadAddon(unicode11);
term.unicode.activeVersion = "11";
term.loadAddon(new WebLinksAddon());
term.open(host);
// WebGL renderer: rasterizes glyphs to a GPU texture atlas, paints
// each cell at an integer-pixel position. Box-drawing glyphs connect
// cleanly between rows (no DOM baseline / line-height math). Falls
// back to the default DOM renderer if WebGL is unavailable.
try {
const webgl = new WebglAddon();
webgl.onContextLoss(() => webgl.dispose());
term.loadAddon(webgl);
} catch (err) {
console.warn(
"[hermes-chat] WebGL renderer unavailable; falling back to default",
err,
);
}
// Initial fit + resize observer. fit.fit() reads the container's
// current bounding box and resizes the terminal grid to match.
//
// The subtle bit: the dashboard has CSS transitions on the container
// (backdrop fade-in, rounded corners settling as fonts load). If we
// call fit() at mount time, the bounding box we measure is often 1-2
// cell widths off from the final size. ResizeObserver *does* fire
// when the container settles, but if the pixel delta happens to be
// smaller than one cell's width, fit() computes the same integer
// (cols, rows) as before and doesn't emit onResize — so the PTY
// never learns the final size. Users see truncated long lines until
// they resize the browser window.
//
// We force one extra fit + explicit RESIZE send after two animation
// frames. rAF→rAF guarantees one layout commit between the two
// callbacks, giving CSS transitions and font metrics time to finalize
// before we take the authoritative measurement.
let rafId = 0;
const scheduleFit = () => {
if (rafId) return;
rafId = requestAnimationFrame(() => {
rafId = 0;
try {
fit.fit();
} catch {
// Element was removed mid-resize; cleanup will handle it.
}
});
};
fit.fit();
const ro = new ResizeObserver(scheduleFit);
ro.observe(host);
// Double-rAF authoritative fit. On the second frame the layout has
// committed at least once since mount; fit.fit() then reads the
// stable container size. We always send a RESIZE escape afterwards
// (even if fit's cols/rows didn't change, so the PTY has the same
// dims registered as our JS state — prevents a drift where Ink
// thinks the terminal is one col bigger than what's on screen).
let settleRaf1 = 0;
let settleRaf2 = 0;
settleRaf1 = requestAnimationFrame(() => {
settleRaf1 = 0;
settleRaf2 = requestAnimationFrame(() => {
settleRaf2 = 0;
try {
fit.fit();
} catch {
return;
}
const sock = wsRef.current;
if (sock && sock.readyState === WebSocket.OPEN) {
sock.send(`\x1b[RESIZE:${term.cols};${term.rows}]`);
}
});
});
// WebSocket
const url = buildWsUrl(token, resumeRef.current);
const ws = new WebSocket(url);
ws.binaryType = "arraybuffer";
wsRef.current = ws;
ws.onopen = () => {
setBanner(null);
// Send the initial RESIZE immediately so Ink has *a* size to lay
// out against on its first paint. The double-rAF block above will
// follow up with the authoritative measurement — at worst Ink
// reflows once after the PTY boots, which is imperceptible.
ws.send(`\x1b[RESIZE:${term.cols};${term.rows}]`);
};
ws.onmessage = (ev) => {
if (typeof ev.data === "string") {
term.write(ev.data);
} else {
term.write(new Uint8Array(ev.data as ArrayBuffer));
}
};
ws.onclose = (ev) => {
wsRef.current = null;
if (ev.code === 4401) {
setBanner(
"Auth failed. Reload the page to refresh the session token.",
);
return;
}
if (ev.code === 4403) {
setBanner("Chat is only reachable from localhost.");
return;
}
if (ev.code === 1011) {
// Server already wrote an ANSI error frame.
return;
}
term.write("\r\n\x1b[90m[session ended]\x1b[0m\r\n");
};
// Keystrokes + mouse events → PTY, with cell-level dedup for motion.
//
// Ink enables `\x1b[?1003h` (any-motion tracking), which asks the
// terminal to report every mouse-move as an SGR mouse event even with
// no button held. xterm.js happily emits one report per pixel of
// mouse motion; without deduping, a casual mouse-over floods Ink with
// hundreds of redraw-triggering reports and the UI goes laggy
// (scrolling stutters, clicks land on stale positions by the time
// Ink finishes processing the motion backlog).
//
// We keep track of the last cell we reported a motion for. Press,
// release, and wheel events always pass through; motion events only
// pass through if the cell changed. Parsing is cheap — SGR reports
// are short literal strings.
const SGR_MOUSE_RE = /^\x1b\[<(\d+);(\d+);(\d+)([Mm])$/;
let lastMotionCell = { col: -1, row: -1 };
let lastMotionCb = -1;
const onDataDisposable = term.onData((data) => {
if (ws.readyState !== WebSocket.OPEN) return;
const m = SGR_MOUSE_RE.exec(data);
if (m) {
const cb = parseInt(m[1], 10);
const col = parseInt(m[2], 10);
const row = parseInt(m[3], 10);
const released = m[4] === "m";
// Motion events have bit 0x20 (32) set in the button code.
// Wheel events have bit 0x40 (64); always forward wheel.
const isMotion = (cb & 0x20) !== 0 && (cb & 0x40) === 0;
const isWheel = (cb & 0x40) !== 0;
if (isMotion && !isWheel && !released) {
if (
col === lastMotionCell.col &&
row === lastMotionCell.row &&
cb === lastMotionCb
) {
return; // same cell + same button state; skip redundant report
}
lastMotionCell = { col, row };
lastMotionCb = cb;
} else {
// Non-motion event (press, release, wheel) — reset dedup state
// so the next motion after this always reports.
lastMotionCell = { col: -1, row: -1 };
lastMotionCb = -1;
}
}
ws.send(data);
});
const onResizeDisposable = term.onResize(({ cols, rows }) => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(`\x1b[RESIZE:${cols};${rows}]`);
}
});
term.focus();
return () => {
onDataDisposable.dispose();
onResizeDisposable.dispose();
ro.disconnect();
if (rafId) cancelAnimationFrame(rafId);
if (settleRaf1) cancelAnimationFrame(settleRaf1);
if (settleRaf2) cancelAnimationFrame(settleRaf2);
ws.close();
wsRef.current = null;
term.dispose();
termRef.current = null;
fitRef.current = null;
if (copyResetRef.current) {
clearTimeout(copyResetRef.current);
copyResetRef.current = null;
}
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// Layout:
// outer flex column — sits inside the dashboard's content area
// terminal wrapper — rounded, dark, padded — the "terminal window"
// floating copy button — bottom-right corner, transparent with a
// subtle border; stays out of the way until hovered. Sends
// `/copy\n` to Ink, which emits OSC 52 → our clipboard handler.
//
// `normal-case` opts out of the dashboard's global `uppercase` rule on
// the root `<div>` in App.tsx — terminal output must preserve case.
return (
<div className="flex h-[calc(100vh-10rem)] flex-col gap-2 normal-case">
{banner && (
<div className="border border-warning/50 bg-warning/10 text-warning px-3 py-2 text-xs tracking-wide">
{banner}
</div>
)}
<div
className="relative flex-1 overflow-hidden rounded-lg"
style={{
backgroundColor: TERMINAL_THEME.background,
padding: "12px",
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
}}
>
<div ref={hostRef} className="h-full w-full" />
<button
type="button"
onClick={handleCopyLast}
title="Copy last assistant response as raw markdown"
aria-label="Copy last assistant response"
className={[
"absolute bottom-4 right-4 z-10",
"flex items-center gap-1.5",
"rounded border border-current/30",
"bg-black/20 backdrop-blur-sm",
"px-2.5 py-1.5 text-xs",
"opacity-60 hover:opacity-100 hover:border-current/60",
"transition-opacity duration-150",
"focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-current",
"cursor-pointer",
].join(" ")}
style={{ color: TERMINAL_THEME.foreground }}
>
<Copy className="h-3 w-3" />
<span className="tracking-wide">
{copyState === "copied" ? "copied" : "copy last response"}
</span>
</button>
</div>
</div>
);
}
declare global {
interface Window {
__HERMES_SESSION_TOKEN__?: string;
}
}

16
web/src/pages/SessionsPage.tsx
View file

@ -1,4 +1,5 @@
import { useEffect, useState, useCallback, useRef } from "react";
import { useNavigate } from "react-router-dom";
import {
ChevronDown,
ChevronLeft,
@ -12,6 +13,7 @@ import {
MessageCircle,
Hash,
X,
Play,
} from "lucide-react";
import { H2 } from "@nous-research/ui";
import { api } from "@/lib/api";
@ -250,6 +252,7 @@ function SessionRow({
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const { t } = useI18n();
const navigate = useNavigate();
useEffect(() => {
if (isExpanded && messages === null && !loading) {
@ -329,6 +332,19 @@ function SessionRow({
<Badge variant="outline" className="text-[10px]">
{session.source ?? "local"}
</Badge>
<Button
variant="ghost"
size="icon"
className="h-7 w-7 text-muted-foreground hover:text-success"
aria-label={t.sessions.resumeInChat}
title={t.sessions.resumeInChat}
onClick={(e) => {
e.stopPropagation();
navigate(`/chat?resume=${encodeURIComponent(session.id)}`);
}}
>
<Play className="h-3.5 w-3.5" />
</Button>
<Button
variant="ghost"
size="icon"

5
web/vite.config.ts
View file

@ -64,7 +64,10 @@ export default defineConfig({
},
server: {
proxy: {
"/api": BACKEND,
"/api": {
target: BACKEND,
ws: true,
},
},
},
});