diff --git a/web/src/contexts/PageHeaderProvider.tsx b/web/src/contexts/PageHeaderProvider.tsx
index 8b8fbcd0c8..4184ecb3d9 100644
--- a/web/src/contexts/PageHeaderProvider.tsx
+++ b/web/src/contexts/PageHeaderProvider.tsx
@@ -34,6 +34,8 @@ export function PageHeaderProvider({
);
const displayTitle = titleOverride ?? defaultTitle;
+ const isChatRoute = pathname === "/chat" || pathname === "/chat/";
+
const value = useMemo(
() => ({
setAfterTitle,
@@ -59,8 +61,10 @@ export function PageHeaderProvider({
>
@@ -74,7 +78,12 @@ export function PageHeaderProvider({
{end ? (
-
+
{end}
) : null}
@@ -84,7 +93,9 @@ export function PageHeaderProvider({
{children}
diff --git a/web/src/i18n/en.ts b/web/src/i18n/en.ts
index c587bfc85d..5a50e1a289 100644
--- a/web/src/i18n/en.ts
+++ b/web/src/i18n/en.ts
@@ -53,6 +53,7 @@ export const en: Translations = {
brand: "Hermes Agent",
brandShort: "HA",
closeNavigation: "Close navigation",
+ closeModelTools: "Close model and tools",
footer: {
org: "Nous Research",
},
@@ -76,6 +77,8 @@ export const en: Translations = {
sessions: "Sessions",
skills: "Skills",
},
+ modelToolsSheetSubtitle: "& tools",
+ modelToolsSheetTitle: "Model",
navigation: "Navigation",
openDocumentation: "Open documentation in a new tab",
openNavigation: "Open navigation",
diff --git a/web/src/i18n/types.ts b/web/src/i18n/types.ts
index 9fe254115f..ab267933bb 100644
--- a/web/src/i18n/types.ts
+++ b/web/src/i18n/types.ts
@@ -53,6 +53,7 @@ export interface Translations {
brand: string;
brandShort: string;
closeNavigation: string;
+ closeModelTools: string;
footer: {
org: string;
};
@@ -76,6 +77,8 @@ export interface Translations {
sessions: string;
skills: string;
};
+ modelToolsSheetSubtitle: string;
+ modelToolsSheetTitle: string;
navigation: string;
openDocumentation: string;
openNavigation: string;
diff --git a/web/src/i18n/zh.ts b/web/src/i18n/zh.ts
index 58953ffb45..dc67cd8215 100644
--- a/web/src/i18n/zh.ts
+++ b/web/src/i18n/zh.ts
@@ -52,6 +52,7 @@ export const zh: Translations = {
brand: "Hermes Agent",
brandShort: "HA",
closeNavigation: "关闭导航",
+ closeModelTools: "关闭模型与工具",
footer: {
org: "Nous Research",
},
@@ -75,6 +76,8 @@ export const zh: Translations = {
sessions: "会话",
skills: "技能",
},
+ modelToolsSheetSubtitle: "与工具",
+ modelToolsSheetTitle: "模型",
navigation: "导航",
openDocumentation: "在新标签页中打开文档",
openNavigation: "打开导航",
diff --git a/web/src/lib/dashboard-flags.ts b/web/src/lib/dashboard-flags.ts
new file mode 100644
index 0000000000..0ce9e03be8
--- /dev/null
+++ b/web/src/lib/dashboard-flags.ts
@@ -0,0 +1,15 @@
+declare global {
+ interface Window {
+ /** Set true by the server only for `hermes dashboard --tui` (or HERMES_DASHBOARD_TUI=1). */
+ __HERMES_DASHBOARD_EMBEDDED_CHAT__?: boolean;
+ /** @deprecated Older injected name; treated as on when true. */
+ __HERMES_DASHBOARD_TUI__?: boolean;
+ }
+}
+
+/** True only when the dashboard was started with embedded TUI Chat (`hermes dashboard --tui`). */
+export function isDashboardEmbeddedChatEnabled(): boolean {
+ if (typeof window === "undefined") return false;
+ if (window.__HERMES_DASHBOARD_EMBEDDED_CHAT__ === true) return true;
+ return window.__HERMES_DASHBOARD_TUI__ === true;
+}
diff --git a/web/src/pages/ChatPage.tsx b/web/src/pages/ChatPage.tsx
index 32c780b3e8..2e46f1fb48 100644
--- a/web/src/pages/ChatPage.tsx
+++ b/web/src/pages/ChatPage.tsx
@@ -22,11 +22,16 @@ import { WebLinksAddon } from "@xterm/addon-web-links";
import { WebglAddon } from "@xterm/addon-webgl";
import { Terminal } from "@xterm/xterm";
import "@xterm/xterm/css/xterm.css";
-import { Copy } from "lucide-react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { Typography } from "@nous-research/ui";
+import { cn } from "@/lib/utils";
+import { Copy, PanelRight, X } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
import { useSearchParams } from "react-router-dom";
import { ChatSidebar } from "@/components/ChatSidebar";
+import { usePageHeader } from "@/contexts/usePageHeader";
+import { useI18n } from "@/i18n";
function buildWsUrl(
token: string,
@@ -62,6 +67,39 @@ const TERMINAL_THEME = {
selectionBackground: "#f0e6d244",
};
+/**
+ * CSS width for xterm font tiers.
+ *
+ * Prefer the terminal host's `clientWidth` — Chrome DevTools device mode often
+ * keeps `window.innerWidth` at the full desktop value while the *drawn* layout
+ * is phone-sized, which made us pick desktop font sizes (~14px) and look huge.
+ */
+function terminalTierWidthPx(host: HTMLElement | null): number {
+ if (typeof window === "undefined") return 1280;
+ const fromHost = host?.clientWidth ?? 0;
+ if (fromHost > 2) return Math.round(fromHost);
+ const doc = document.documentElement?.clientWidth ?? 0;
+ const vv = window.visualViewport;
+ const inner = window.innerWidth;
+ const vvw = vv?.width ?? inner;
+ const layout = Math.min(inner, vvw, doc > 0 ? doc : inner);
+ return Math.max(1, Math.round(layout));
+}
+
+function terminalFontSizeForWidth(layoutWidthPx: number): number {
+ if (layoutWidthPx < 300) return 7;
+ if (layoutWidthPx < 360) return 8;
+ if (layoutWidthPx < 420) return 9;
+ if (layoutWidthPx < 520) return 10;
+ if (layoutWidthPx < 720) return 11;
+ if (layoutWidthPx < 1024) return 12;
+ return 14;
+}
+
+function terminalLineHeightForWidth(layoutWidthPx: number): number {
+ return layoutWidthPx < 1024 ? 1.02 : 1.15;
+}
+
export default function ChatPage() {
const hostRef = useRef(null);
const termRef = useRef(null);
@@ -77,10 +115,83 @@ export default function ChatPage() {
);
const [copyState, setCopyState] = useState<"idle" | "copied">("idle");
const copyResetRef = useRef | null>(null);
+ const [mobilePanelOpen, setMobilePanelOpen] = useState(false);
+ const { setEnd } = usePageHeader();
+ const { t } = useI18n();
+ const closeMobilePanel = useCallback(() => setMobilePanelOpen(false), []);
+ const modelToolsLabel = useMemo(
+ () => `${t.app.modelToolsSheetTitle} ${t.app.modelToolsSheetSubtitle}`,
+ [t.app.modelToolsSheetSubtitle, t.app.modelToolsSheetTitle],
+ );
+ const [portalRoot] = useState(() =>
+ typeof document !== "undefined" ? document.body : null,
+ );
+ const [narrow, setNarrow] = useState(() =>
+ typeof window !== "undefined"
+ ? window.matchMedia("(max-width: 1023px)").matches
+ : false,
+ );
const resumeRef = useRef(searchParams.get("resume"));
const channel = useMemo(() => generateChannelId(), []);
+ useEffect(() => {
+ const mql = window.matchMedia("(max-width: 1023px)");
+ const sync = () => setNarrow(mql.matches);
+ sync();
+ mql.addEventListener("change", sync);
+ return () => mql.removeEventListener("change", sync);
+ }, []);
+
+ useEffect(() => {
+ if (!mobilePanelOpen) return;
+ const onKey = (e: KeyboardEvent) => {
+ if (e.key === "Escape") closeMobilePanel();
+ };
+ document.addEventListener("keydown", onKey);
+ const prevOverflow = document.body.style.overflow;
+ document.body.style.overflow = "hidden";
+ return () => {
+ document.removeEventListener("keydown", onKey);
+ document.body.style.overflow = prevOverflow;
+ };
+ }, [mobilePanelOpen, closeMobilePanel]);
+
+ useEffect(() => {
+ const mql = window.matchMedia("(min-width: 1024px)");
+ const onChange = (e: MediaQueryListEvent) => {
+ if (e.matches) setMobilePanelOpen(false);
+ };
+ mql.addEventListener("change", onChange);
+ return () => mql.removeEventListener("change", onChange);
+ }, []);
+
+ useEffect(() => {
+ if (!narrow) {
+ setEnd(null);
+ return;
+ }
+ setEnd(
+ ,
+ );
+ return () => setEnd(null);
+ }, [narrow, mobilePanelOpen, modelToolsLabel, setEnd]);
+
const handleCopyLast = () => {
const ws = wsRef.current;
if (!ws || ws.readyState !== WebSocket.OPEN) return;
@@ -110,13 +221,17 @@ export default function ChatPage() {
return;
}
+ const tierW0 = terminalTierWidthPx(host);
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,
+ fontSize: terminalFontSizeForWidth(tierW0),
+ lineHeight: terminalLineHeightForWidth(tierW0),
+ letterSpacing: 0,
+ fontWeight: "400",
+ fontWeightBold: "700",
macOptionIsMeta: true,
scrollback: 0,
theme: TERMINAL_THEME,
@@ -212,19 +327,23 @@ export default function ChatPage() {
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,
- );
+ // WebGL draws from a texture atlas sized with device pixels. On phones and
+ // in DevTools device mode that often produces *visually* much larger cells
+ // than `fontSize` suggests — users see "huge" text even at 7–9px settings.
+ // The canvas/DOM renderer tracks `fontSize` faithfully; use it for narrow
+ // hosts. Wide layouts still get WebGL for crisp box-drawing.
+ const useWebgl = terminalTierWidthPx(host) >= 768;
+ if (useWebgl) {
+ 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
@@ -244,22 +363,65 @@ export default function ChatPage() {
// 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.
- }
+ let hostSyncRaf = 0;
+ const scheduleHostSync = () => {
+ if (hostSyncRaf) return;
+ hostSyncRaf = requestAnimationFrame(() => {
+ hostSyncRaf = 0;
+ syncTerminalMetrics();
});
};
- fit.fit();
- const ro = new ResizeObserver(scheduleFit);
+
+ let metricsDebounce: ReturnType | null = null;
+ const syncTerminalMetrics = () => {
+ const w = terminalTierWidthPx(host);
+ const nextSize = terminalFontSizeForWidth(w);
+ const nextLh = terminalLineHeightForWidth(w);
+ const fontChanged =
+ term.options.fontSize !== nextSize ||
+ term.options.lineHeight !== nextLh;
+ if (fontChanged) {
+ term.options.fontSize = nextSize;
+ term.options.lineHeight = nextLh;
+ }
+ try {
+ fit.fit();
+ } catch {
+ return;
+ }
+ if (fontChanged && term.rows > 0) {
+ try {
+ term.refresh(0, term.rows - 1);
+ } catch {
+ /* ignore */
+ }
+ }
+ if (
+ fontChanged &&
+ wsRef.current &&
+ wsRef.current.readyState === WebSocket.OPEN
+ ) {
+ wsRef.current.send(`\x1b[RESIZE:${term.cols};${term.rows}]`);
+ }
+ };
+
+ const scheduleSyncTerminalMetrics = () => {
+ if (metricsDebounce) clearTimeout(metricsDebounce);
+ metricsDebounce = setTimeout(() => {
+ metricsDebounce = null;
+ syncTerminalMetrics();
+ }, 60);
+ };
+
+ const ro = new ResizeObserver(() => scheduleHostSync());
ro.observe(host);
+ window.addEventListener("resize", scheduleSyncTerminalMetrics);
+ window.visualViewport?.addEventListener("resize", scheduleSyncTerminalMetrics);
+ window.visualViewport?.addEventListener("scroll", scheduleSyncTerminalMetrics);
+ scheduleHostSync();
+ requestAnimationFrame(() => scheduleHostSync());
+
// 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
@@ -272,15 +434,7 @@ export default function ChatPage() {
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}]`);
- }
+ syncTerminalMetrics();
});
});
@@ -387,8 +541,18 @@ export default function ChatPage() {
return () => {
onDataDisposable.dispose();
onResizeDisposable.dispose();
+ if (metricsDebounce) clearTimeout(metricsDebounce);
+ window.removeEventListener("resize", scheduleSyncTerminalMetrics);
+ window.visualViewport?.removeEventListener(
+ "resize",
+ scheduleSyncTerminalMetrics,
+ );
+ window.visualViewport?.removeEventListener(
+ "scroll",
+ scheduleSyncTerminalMetrics,
+ );
ro.disconnect();
- if (rafId) cancelAnimationFrame(rafId);
+ if (hostSyncRaf) cancelAnimationFrame(hostSyncRaf);
if (settleRaf1) cancelAnimationFrame(settleRaf1);
if (settleRaf2) cancelAnimationFrame(settleRaf2);
ws.close();
@@ -416,52 +580,149 @@ export default function ChatPage() {
//
// `normal-case` opts out of the dashboard's global `uppercase` rule on
// the root `` in App.tsx — terminal output must preserve case.
+ //
+ // Mobile model/tools sheet is portaled to `document.body` so it stacks
+ // above the app sidebar (`z-50`) and mobile chrome (`z-40`). The main
+ // dashboard column uses `relative z-2`, which traps `position:fixed`
+ // descendants below those layers (see Toast.tsx).
+ const mobileModelToolsPortal =
+ narrow &&
+ portalRoot &&
+ createPortal(
+ <>
+ {mobilePanelOpen && (
+
+ )}
+
+
+
+
+ {t.app.modelToolsSheetTitle}
+
+ {t.app.modelToolsSheetSubtitle}
+
+
+
+
+
+
+
+
+
+ ,
+ portalRoot,
+ );
+
return (
-
+
+ {mobileModelToolsPortal}
+
{banner && (
{banner}
)}
-
+
+
-
+
-
-
-
+ {!narrow && (
+
+ )}
);
diff --git a/web/src/pages/DocsPage.tsx b/web/src/pages/DocsPage.tsx
index 83b0694ecd..5861aeccc1 100644
--- a/web/src/pages/DocsPage.tsx
+++ b/web/src/pages/DocsPage.tsx
@@ -35,7 +35,7 @@ export default function DocsPage() {