### Changes

- Control UI: add a browser-local Text size setting in Appearance and Quick Settings, scaling chat and dense UI text while keeping inputs above the mobile Safari focus-zoom threshold. Fixes #8547. Thanks @BunsDev.

- Docs: add a dedicated ds4 provider page with local DeepSeek V4 Flash config, on-demand startup, context sizing, and live verification steps.

- Release validation: add a package-installed Docker user-journey lane that verifies onboarding, mocked model setup, external plugin install/uninstall, ClickClack outbound/inbound messaging, Gateway restart survival, and doctor.

- Release validation: add package-installed Docker lanes for real TTY onboarding, media and memory persistence, published-package upgrade journeys, and local marketplace plugin install/update/uninstall coverage.

The Appearance panel keeps the built-in Claw, Knot, and Dash themes, plus one browser-local tweakcn import slot. To import a theme, open [tweakcn editor](https://tweakcn.com/editor/theme), choose or create a theme, click **Share**, and paste the copied theme link into Appearance. The importer also accepts `https://tweakcn.com/r/themes/<id>` registry URLs, editor URLs like `https://tweakcn.com/editor/theme?theme=amethyst-haze`, relative `/themes/<id>` paths, raw theme IDs, and default theme names such as `amethyst-haze`.

Appearance also includes a browser-local Text size setting. The setting is stored with the rest of Control UI preferences, applies to chat text, composer text, tool cards, and chat sidebars, and keeps text inputs at least 16px so mobile Safari does not auto-zoom on focus.

Imported themes are stored only in the current browser profile. They are not written to gateway config and do not sync across devices. Replacing the imported theme updates the one local slot; clearing it switches the active theme back to Claw if the imported theme was selected.

## What it can do (today)

"JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;

--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

--font-display: var(--font-body);

--control-ui-text-scale: 1;

--control-ui-text-xs: calc(11px * var(--control-ui-text-scale));

--control-ui-text-sm: calc(12px * var(--control-ui-text-scale));

--control-ui-text-md: calc(14px * var(--control-ui-text-scale));

--control-ui-text-lg: calc(16px * var(--control-ui-text-scale));

--control-ui-input-text-size: max(16px, calc(14px * var(--control-ui-text-scale)));

--chat-text-size: var(--control-ui-text-md);

/* Shadows - Subtle, layered depth */

--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);

resize: none;

white-space: pre-wrap;

font-family: var(--font-body);

font-size: 14px;

font-size: var(--control-ui-input-text-size);

line-height: 1.45;

}

border: none;

background: transparent;

color: var(--text);

font-size: 0.92rem;

font-size: var(--control-ui-input-text-size);

font-family: inherit;

line-height: 1.4;

outline: none;

.agent-chat__stt-interim {

padding: 10px 14px 0;

color: var(--muted);

font-size: 0.82rem;

font-size: var(--control-ui-text-sm);

line-height: 1.35;

overflow-wrap: anywhere;

}

expect(css).toContain("font-size: 20px;");

expect(css).toContain("place-items: center;");

});

it("keeps composer text scale-driven while preserving mobile input zoom safety", () => {

const css = readLayoutCss();

expect(css).toContain("font-size: var(--control-ui-input-text-size);");

expect(css).toContain(".agent-chat__composer-combobox > textarea");

expect(css).toContain(".chat-compose .chat-compose__field textarea");

});

});

.sidebar-title {

font-weight: 600;

font-size: 14px;

font-size: var(--control-ui-text-md);

}

.sidebar-content {

}

.sidebar-markdown {

font-size: 14px;

font-size: var(--control-ui-text-md);

line-height: 1.6;

color: var(--text);

}

.sidebar-markdown-shell__hint {

color: var(--muted);

font-size: 12px;

font-size: var(--control-ui-text-sm);

line-height: 1.45;

}

}

.sidebar-markdown-reader.sidebar-markdown {

font-size: 14.5px;

font-size: calc(14.5px * var(--control-ui-text-scale));

line-height: 1.72;

}

border: 1px dashed rgba(255, 255, 255, 0.18);

background: rgba(255, 255, 255, 0.04);

color: var(--muted);

font-size: 12px;

font-size: var(--control-ui-text-sm);

line-height: 1.4;

}

}

.chat-text {

font-size: 14px;

font-size: var(--chat-text-size);

line-height: 1.5;

word-wrap: break-word;

overflow-wrap: break-word;

import { describe, expect, it } from "vitest";

import { readStyleSheet } from "../../../../test/helpers/ui-style-fixtures.js";

function readTextCss(): string {

return readStyleSheet("ui/src/styles/chat/text.css");

}

describe("chat text styles", () => {

it("uses browser-local text scale variables for message text", () => {

const css = readTextCss();

expect(css).toContain("font-size: var(--chat-text-size);");

expect(css).toContain("font-size: var(--control-ui-text-sm);");

});

});

align-items: center;

gap: 6px;

font-weight: 600;

font-size: 14px;

font-size: var(--control-ui-text-md);

line-height: 1.2;

min-width: 0;

}

}

.chat-tool-card__status-text {

font-size: 11px;

font-size: var(--control-ui-text-xs);

margin-top: 10px;

}

.chat-tool-card__detail {

font-size: 12px;

font-size: var(--control-ui-text-sm);

color: var(--muted);

margin-top: 6px;

}

color: var(--accent);

}

.settings-text-scale {

display: grid;

gap: 8px;

}

.settings-text-scale__options {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));

gap: 8px;

}

.settings-text-scale__btn {

display: grid;

gap: 4px;

justify-items: start;

min-height: 58px;

padding: 10px 12px;

border: 1px solid var(--border);

border-radius: var(--radius-md);

background: var(--card);

color: var(--text);

cursor: pointer;

text-align: left;

transition:

border-color var(--duration-fast) ease,

background var(--duration-fast) ease,

transform var(--duration-fast) ease;

}

.settings-text-scale__btn:hover {

border-color: var(--border-strong);

background: var(--bg-elevated);

transform: translateY(-1px);

}

.settings-text-scale__btn.active {

border-color: var(--accent);

background: var(--accent-subtle);

}

.settings-text-scale__sample {

font-weight: 650;

font-size: 13px;

line-height: 1.2;

}

.settings-text-scale__label {

color: var(--muted);

font-size: 11px;

line-height: 1.2;

}

.settings-text-scale__btn.active .settings-text-scale__label {

color: var(--accent);

}

.settings-info-grid {

display: grid;

gap: 10px;