openclaw-multi-auto 1.3.6 → 1.3.8

package/ui/src/ui/icons.ts

@@ -0,0 +1,256 @@
+import { html, type TemplateResult } from "lit";
+
+// Lucide-style SVG icons
+// All icons use currentColor for stroke
+
+export const icons = {
+  // Navigation icons
+  messageSquare: html`
+    <svg viewBox="0 0 24 24">
+      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+    </svg>
+  `,
+  barChart: html`
+    <svg viewBox="0 0 24 24">
+      <line x1="12" x2="12" y1="20" y2="10" />
+      <line x1="18" x2="18" y1="20" y2="4" />
+      <line x1="6" x2="6" y1="20" y2="16" />
+    </svg>
+  `,
+  link: html`
+    <svg viewBox="0 0 24 24">
+      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+    </svg>
+  `,
+  radio: html`
+    <svg viewBox="0 0 24 24">
+      <circle cx="12" cy="12" r="2" />
+      <path
+        d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"
+      />
+    </svg>
+  `,
+  fileText: html`
+    <svg viewBox="0 0 24 24">
+      <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
+      <polyline points="14 2 14 8 20 8" />
+      <line x1="16" x2="8" y1="13" y2="13" />
+      <line x1="16" x2="8" y1="17" y2="17" />
+      <line x1="10" x2="8" y1="9" y2="9" />
+    </svg>
+  `,
+  zap: html`
+    <svg viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" /></svg>
+  `,
+  monitor: html`
+    <svg viewBox="0 0 24 24">
+      <rect width="20" height="14" x="2" y="3" rx="2" />
+      <line x1="8" x2="16" y1="21" y2="21" />
+      <line x1="12" x2="12" y1="17" y2="21" />
+    </svg>
+  `,
+  settings: html`
+    <svg viewBox="0 0 24 24">
+      <path
+        d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
+      />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  `,
+  bug: html`
+    <svg viewBox="0 0 24 24">
+      <path d="m8 2 1.88 1.88" />
+      <path d="M14.12 3.88 16 2" />
+      <path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" />
+      <path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" />
+      <path d="M12 20v-9" />
+      <path d="M6.53 9C4.6 8.8 3 7.1 3 5" />
+      <path d="M6 13H2" />
+      <path d="M3 21c0-2.1 1.7-3.9 3.8-4" />
+      <path d="M20.97 5c0 2.1-1.6 3.8-3.5 4" />
+      <path d="M22 13h-4" />
+      <path d="M17.2 17c2.1.1 3.8 1.9 3.8 4" />
+    </svg>
+  `,
+  scrollText: html`
+    <svg viewBox="0 0 24 24">
+      <path d="M8 21h12a2 2 0 0 0 2-2v-2H10v2a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v3h4" />
+      <path d="M19 17V5a2 2 0 0 0-2-2H4" />
+      <path d="M15 8h-5" />
+      <path d="M15 12h-5" />
+    </svg>
+  `,
+  folder: html`
+    <svg viewBox="0 0 24 24">
+      <path
+        d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
+      />
+    </svg>
+  `,
+
+  // UI icons
+  menu: html`
+    <svg viewBox="0 0 24 24">
+      <line x1="4" x2="20" y1="12" y2="12" />
+      <line x1="4" x2="20" y1="6" y2="6" />
+      <line x1="4" x2="20" y1="18" y2="18" />
+    </svg>
+  `,
+  x: html`
+    <svg viewBox="0 0 24 24">
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  `,
+  check: html`
+    <svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5" /></svg>
+  `,
+  arrowDown: html`
+    <svg viewBox="0 0 24 24">
+      <path d="M12 5v14" />
+      <path d="m19 12-7 7-7-7" />
+    </svg>
+  `,
+  copy: html`
+    <svg viewBox="0 0 24 24">
+      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+    </svg>
+  `,
+  search: html`
+    <svg viewBox="0 0 24 24">
+      <circle cx="11" cy="11" r="8" />
+      <path d="m21 21-4.3-4.3" />
+    </svg>
+  `,
+  brain: html`
+    <svg viewBox="0 0 24 24">
+      <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" />
+      <path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z" />
+      <path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4" />
+      <path d="M17.599 6.5a3 3 0 0 0 .399-1.375" />
+      <path d="M6.003 5.125A3 3 0 0 0 6.401 6.5" />
+      <path d="M3.477 10.896a4 4 0 0 1 .585-.396" />
+      <path d="M19.938 10.5a4 4 0 0 1 .585.396" />
+      <path d="M6 18a4 4 0 0 1-1.967-.516" />
+      <path d="M19.967 17.484A4 4 0 0 1 18 18" />
+    </svg>
+  `,
+  book: html`
+    <svg viewBox="0 0 24 24">
+      <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
+    </svg>
+  `,
+  loader: html`
+    <svg viewBox="0 0 24 24">
+      <path d="M12 2v4" />
+      <path d="m16.2 7.8 2.9-2.9" />
+      <path d="M18 12h4" />
+      <path d="m16.2 16.2 2.9 2.9" />
+      <path d="M12 18v4" />
+      <path d="m4.9 19.1 2.9-2.9" />
+      <path d="M2 12h4" />
+      <path d="m4.9 4.9 2.9 2.9" />
+    </svg>
+  `,
+
+  // Tool icons
+  wrench: html`
+    <svg viewBox="0 0 24 24">
+      <path
+        d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
+      />
+    </svg>
+  `,
+  fileCode: html`
+    <svg viewBox="0 0 24 24">
+      <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
+      <polyline points="14 2 14 8 20 8" />
+      <path d="m10 13-2 2 2 2" />
+      <path d="m14 17 2-2-2-2" />
+    </svg>
+  `,
+  edit: html`
+    <svg viewBox="0 0 24 24">
+      <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+      <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+    </svg>
+  `,
+  penLine: html`
+    <svg viewBox="0 0 24 24">
+      <path d="M12 20h9" />
+      <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
+    </svg>
+  `,
+  paperclip: html`
+    <svg viewBox="0 0 24 24">
+      <path
+        d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"
+      />
+    </svg>
+  `,
+  globe: html`
+    <svg viewBox="0 0 24 24">
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
+      <path d="M2 12h20" />
+    </svg>
+  `,
+  image: html`
+    <svg viewBox="0 0 24 24">
+      <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+      <circle cx="9" cy="9" r="2" />
+      <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+    </svg>
+  `,
+  smartphone: html`
+    <svg viewBox="0 0 24 24">
+      <rect width="14" height="20" x="5" y="2" rx="2" ry="2" />
+      <path d="M12 18h.01" />
+    </svg>
+  `,
+  plug: html`
+    <svg viewBox="0 0 24 24">
+      <path d="M12 22v-5" />
+      <path d="M9 8V2" />
+      <path d="M15 8V2" />
+      <path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z" />
+    </svg>
+  `,
+  circle: html`
+    <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" /></svg>
+  `,
+  puzzle: html`
+    <svg viewBox="0 0 24 24">
+      <path
+        d="M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.706-1.704L4.23 8.77c.24-.24.581-.353.917-.303.515.076.874.54 1.02 1.02a2.5 2.5 0 1 0 3.237-3.237c-.48-.146-.944-.505-1.02-1.02a.98.98 0 0 1 .303-.917l1.526-1.526A2.402 2.402 0 0 1 11.998 2c.617 0 1.234.236 1.704.706l1.568 1.568c.23.23.556.338.877.29.493-.074.84-.504 1.02-.968a2.5 2.5 0 1 1 3.236 3.236c-.464.18-.894.527-.967 1.02Z"
+      />
+    </svg>
+  `,
+} as const;
+
+export type IconName = keyof typeof icons;
+
+export function icon(name: IconName): TemplateResult {
+  return icons[name];
+}
+
+export function renderIcon(name: IconName, className = "nav-item__icon"): TemplateResult {
+  return html`<span class=${className} aria-hidden="true">${icons[name]}</span>`;
+}
+
+// Legacy function for compatibility
+export function renderEmojiIcon(
+  iconContent: string | TemplateResult,
+  className: string,
+): TemplateResult {
+  return html`<span class=${className} aria-hidden="true">${iconContent}</span>`;
+}
+
+export function setEmojiIcon(target: HTMLElement | null, icon: string): void {
+  if (!target) {
+    return;
+  }
+  target.textContent = icon;
+}

package/ui/src/ui/markdown.test.ts

@@ -0,0 +1,85 @@
+import { describe, expect, it } from "vitest";
+import { toSanitizedMarkdownHtml } from "./markdown.ts";
+
+describe("toSanitizedMarkdownHtml", () => {
+  it("renders basic markdown", () => {
+    const html = toSanitizedMarkdownHtml("Hello **world**");
+    expect(html).toContain("<strong>world</strong>");
+  });
+
+  it("strips scripts and unsafe links", () => {
+    const html = toSanitizedMarkdownHtml(
+      [
+        "<script>alert(1)</script>",
+        "",
+        "[x](javascript:alert(1))",
+        "",
+        "[ok](https://example.com)",
+      ].join("\n"),
+    );
+    expect(html).not.toContain("<script");
+    expect(html).not.toContain("javascript:");
+    expect(html).toContain("https://example.com");
+  });
+
+  it("renders fenced code blocks", () => {
+    const html = toSanitizedMarkdownHtml(["```ts", "console.log(1)", "```"].join("\n"));
+    expect(html).toContain("<pre>");
+    expect(html).toContain("<code");
+    expect(html).toContain("console.log(1)");
+  });
+
+  it("preserves img tags with src and alt from markdown images (#15437)", () => {
+    const html = toSanitizedMarkdownHtml("![Alt text](https://example.com/image.png)");
+    expect(html).toContain("<img");
+    expect(html).toContain('src="https://example.com/image.png"');
+    expect(html).toContain('alt="Alt text"');
+  });
+
+  it("preserves base64 data URI images (#15437)", () => {
+    const html = toSanitizedMarkdownHtml("![Chart](data:image/png;base64,iVBORw0KGgo=)");
+    expect(html).toContain("<img");
+    expect(html).toContain("data:image/png;base64,");
+  });
+
+  it("strips javascript image urls", () => {
+    const html = toSanitizedMarkdownHtml("![X](javascript:alert(1))");
+    expect(html).toContain("<img");
+    expect(html).not.toContain("javascript:");
+    expect(html).not.toContain("src=");
+  });
+
+  it("renders GFM markdown tables (#20410)", () => {
+    const md = [
+      "| Feature | Status |",
+      "|---------|--------|",
+      "| Tables  | ✅     |",
+      "| Borders | ✅     |",
+    ].join("\n");
+    const html = toSanitizedMarkdownHtml(md);
+    expect(html).toContain("<table");
+    expect(html).toContain("<thead");
+    expect(html).toContain("<th>");
+    expect(html).toContain("Feature");
+    expect(html).toContain("Tables");
+    expect(html).not.toContain("|---------|");
+  });
+
+  it("renders GFM tables surrounded by text (#20410)", () => {
+    const md = [
+      "Text before.",
+      "",
+      "| Col1 | Col2 |",
+      "|------|------|",
+      "| A    | B    |",
+      "",
+      "Text after.",
+    ].join("\n");
+    const html = toSanitizedMarkdownHtml(md);
+    expect(html).toContain("<table");
+    expect(html).toContain("Col1");
+    expect(html).toContain("Col2");
+    // Pipes from table delimiters must not appear as raw text
+    expect(html).not.toContain("|------|");
+  });
+});

package/ui/src/ui/markdown.ts

@@ -0,0 +1,139 @@
+import DOMPurify from "dompurify";
+import { marked } from "marked";
+import { truncateText } from "./format.ts";
+
+const allowedTags = [
+  "a",
+  "b",
+  "blockquote",
+  "br",
+  "code",
+  "del",
+  "em",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "hr",
+  "i",
+  "li",
+  "ol",
+  "p",
+  "pre",
+  "strong",
+  "table",
+  "tbody",
+  "td",
+  "th",
+  "thead",
+  "tr",
+  "ul",
+  "img",
+];
+
+const allowedAttrs = ["class", "href", "rel", "target", "title", "start", "src", "alt"];
+const sanitizeOptions = {
+  ALLOWED_TAGS: allowedTags,
+  ALLOWED_ATTR: allowedAttrs,
+  ADD_DATA_URI_TAGS: ["img"],
+};
+
+let hooksInstalled = false;
+const MARKDOWN_CHAR_LIMIT = 140_000;
+const MARKDOWN_PARSE_LIMIT = 40_000;
+const MARKDOWN_CACHE_LIMIT = 200;
+const MARKDOWN_CACHE_MAX_CHARS = 50_000;
+const markdownCache = new Map<string, string>();
+
+function getCachedMarkdown(key: string): string | null {
+  const cached = markdownCache.get(key);
+  if (cached === undefined) {
+    return null;
+  }
+  markdownCache.delete(key);
+  markdownCache.set(key, cached);
+  return cached;
+}
+
+function setCachedMarkdown(key: string, value: string) {
+  markdownCache.set(key, value);
+  if (markdownCache.size <= MARKDOWN_CACHE_LIMIT) {
+    return;
+  }
+  const oldest = markdownCache.keys().next().value;
+  if (oldest) {
+    markdownCache.delete(oldest);
+  }
+}
+
+function installHooks() {
+  if (hooksInstalled) {
+    return;
+  }
+  hooksInstalled = true;
+
+  DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+    if (!(node instanceof HTMLAnchorElement)) {
+      return;
+    }
+    const href = node.getAttribute("href");
+    if (!href) {
+      return;
+    }
+    node.setAttribute("rel", "noreferrer noopener");
+    node.setAttribute("target", "_blank");
+  });
+}
+
+export function toSanitizedMarkdownHtml(markdown: string): string {
+  const input = markdown.trim();
+  if (!input) {
+    return "";
+  }
+  installHooks();
+  if (input.length <= MARKDOWN_CACHE_MAX_CHARS) {
+    const cached = getCachedMarkdown(input);
+    if (cached !== null) {
+      return cached;
+    }
+  }
+  const truncated = truncateText(input, MARKDOWN_CHAR_LIMIT);
+  const suffix = truncated.truncated
+    ? `\n\n… truncated (${truncated.total} chars, showing first ${truncated.text.length}).`
+    : "";
+  if (truncated.text.length > MARKDOWN_PARSE_LIMIT) {
+    const escaped = escapeHtml(`${truncated.text}${suffix}`);
+    const html = `<pre class="code-block">${escaped}</pre>`;
+    const sanitized = DOMPurify.sanitize(html, sanitizeOptions);
+    if (input.length <= MARKDOWN_CACHE_MAX_CHARS) {
+      setCachedMarkdown(input, sanitized);
+    }
+    return sanitized;
+  }
+  const rendered = marked.parse(`${truncated.text}${suffix}`, {
+    renderer: htmlEscapeRenderer,
+    gfm: true,
+    breaks: true,
+  }) as string;
+  const sanitized = DOMPurify.sanitize(rendered, sanitizeOptions);
+  if (input.length <= MARKDOWN_CACHE_MAX_CHARS) {
+    setCachedMarkdown(input, sanitized);
+  }
+  return sanitized;
+}
+
+// Prevent raw HTML in chat messages from being rendered as formatted HTML.
+// Display it as escaped text so users see the literal markup.
+// Security is handled by DOMPurify, but rendering pasted HTML (e.g. error
+// pages) as formatted output is confusing UX (#13937).
+const htmlEscapeRenderer = new marked.Renderer();
+htmlEscapeRenderer.html = ({ text }: { text: string }) => escapeHtml(text);
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}

package/ui/src/ui/navigation.browser.test.ts

@@ -0,0 +1,188 @@
+import { describe, expect, it } from "vitest";
+import "../styles.css";
+import { mountApp as mountTestApp, registerAppMountHooks } from "./test-helpers/app-mount.ts";
+
+registerAppMountHooks();
+
+function mountApp(pathname: string) {
+  return mountTestApp(pathname);
+}
+
+function nextFrame() {
+  return new Promise<void>((resolve) => {
+    requestAnimationFrame(() => resolve());
+  });
+}
+
+describe("control UI routing", () => {
+  it("hydrates the tab from the location", async () => {
+    const app = mountApp("/sessions");
+    await app.updateComplete;
+
+    expect(app.tab).toBe("sessions");
+    expect(window.location.pathname).toBe("/sessions");
+  });
+
+  it("respects /ui base paths", async () => {
+    const app = mountApp("/ui/cron");
+    await app.updateComplete;
+
+    expect(app.basePath).toBe("/ui");
+    expect(app.tab).toBe("cron");
+    expect(window.location.pathname).toBe("/ui/cron");
+  });
+
+  it("infers nested base paths", async () => {
+    const app = mountApp("/apps/openclaw/cron");
+    await app.updateComplete;
+
+    expect(app.basePath).toBe("/apps/openclaw");
+    expect(app.tab).toBe("cron");
+    expect(window.location.pathname).toBe("/apps/openclaw/cron");
+  });
+
+  it("honors explicit base path overrides", async () => {
+    window.__OPENCLAW_CONTROL_UI_BASE_PATH__ = "/openclaw";
+    const app = mountApp("/openclaw/sessions");
+    await app.updateComplete;
+
+    expect(app.basePath).toBe("/openclaw");
+    expect(app.tab).toBe("sessions");
+    expect(window.location.pathname).toBe("/openclaw/sessions");
+  });
+
+  it("updates the URL when clicking nav items", async () => {
+    const app = mountApp("/chat");
+    await app.updateComplete;
+
+    const link = app.querySelector<HTMLAnchorElement>('a.nav-item[href="/channels"]');
+    expect(link).not.toBeNull();
+    link?.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, button: 0 }));
+
+    await app.updateComplete;
+    expect(app.tab).toBe("channels");
+    expect(window.location.pathname).toBe("/channels");
+  });
+
+  it("resets to the main session when opening chat from sidebar navigation", async () => {
+    const app = mountApp("/sessions?session=agent:main:subagent:task-123");
+    await app.updateComplete;
+
+    const link = app.querySelector<HTMLAnchorElement>('a.nav-item[href="/chat"]');
+    expect(link).not.toBeNull();
+    link?.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, button: 0 }));
+
+    await app.updateComplete;
+    expect(app.tab).toBe("chat");
+    expect(app.sessionKey).toBe("main");
+    expect(window.location.pathname).toBe("/chat");
+    expect(window.location.search).toBe("?session=main");
+  });
+
+  it("keeps chat and nav usable on narrow viewports", async () => {
+    const app = mountApp("/chat");
+    await app.updateComplete;
+
+    expect(window.matchMedia("(max-width: 768px)").matches).toBe(true);
+
+    const split = app.querySelector(".chat-split-container");
+    expect(split).not.toBeNull();
+    if (split) {
+      expect(getComputedStyle(split).position).not.toBe("fixed");
+    }
+
+    const chatMain = app.querySelector(".chat-main");
+    expect(chatMain).not.toBeNull();
+    if (chatMain) {
+      expect(getComputedStyle(chatMain).display).not.toBe("none");
+    }
+
+    if (split) {
+      split.classList.add("chat-split-container--open");
+      await app.updateComplete;
+      expect(getComputedStyle(split).position).toBe("fixed");
+    }
+    if (chatMain) {
+      expect(getComputedStyle(chatMain).display).toBe("none");
+    }
+  });
+
+  it("auto-scrolls chat history to the latest message", async () => {
+    const app = mountApp("/chat");
+    await app.updateComplete;
+
+    const initialContainer: HTMLElement | null = app.querySelector(".chat-thread");
+    expect(initialContainer).not.toBeNull();
+    if (!initialContainer) {
+      return;
+    }
+    initialContainer.style.maxHeight = "180px";
+    initialContainer.style.overflow = "auto";
+
+    app.chatMessages = Array.from({ length: 60 }, (_, index) => ({
+      role: "assistant",
+      content: `Line ${index} - ${"x".repeat(200)}`,
+      timestamp: Date.now() + index,
+    }));
+
+    await app.updateComplete;
+    for (let i = 0; i < 6; i++) {
+      await nextFrame();
+    }
+
+    const container = app.querySelector(".chat-thread");
+    expect(container).not.toBeNull();
+    if (!container) {
+      return;
+    }
+    const maxScroll = container.scrollHeight - container.clientHeight;
+    expect(maxScroll).toBeGreaterThan(0);
+    for (let i = 0; i < 10; i++) {
+      if (container.scrollTop === maxScroll) {
+        break;
+      }
+      await nextFrame();
+    }
+    expect(container.scrollTop).toBe(maxScroll);
+  });
+
+  it("hydrates token from URL params and strips it", async () => {
+    const app = mountApp("/ui/overview?token=abc123");
+    await app.updateComplete;
+
+    expect(app.settings.token).toBe("abc123");
+    expect(window.location.pathname).toBe("/ui/overview");
+    expect(window.location.search).toBe("");
+  });
+
+  it("strips password URL params without importing them", async () => {
+    const app = mountApp("/ui/overview?password=sekret");
+    await app.updateComplete;
+
+    expect(app.password).toBe("");
+    expect(window.location.pathname).toBe("/ui/overview");
+    expect(window.location.search).toBe("");
+  });
+
+  it("hydrates token from URL params even when settings already set", async () => {
+    localStorage.setItem(
+      "openclaw.control.settings.v1",
+      JSON.stringify({ token: "existing-token" }),
+    );
+    const app = mountApp("/ui/overview?token=abc123");
+    await app.updateComplete;
+
+    expect(app.settings.token).toBe("abc123");
+    expect(window.location.pathname).toBe("/ui/overview");
+    expect(window.location.search).toBe("");
+  });
+
+  it("hydrates token from URL hash and strips it", async () => {
+    const app = mountApp("/ui/overview#token=abc123");
+    await app.updateComplete;
+
+    expect(app.settings.token).toBe("abc123");
+    expect(window.location.pathname).toBe("/ui/overview");
+    expect(window.location.hash).toBe("");
+  });
+});