fix(app): settings live-apply — font on open terminals, daemon uptime

- Font change now applies to already-open terminals: the WebGL renderer
  caches glyphs in a texture atlas keyed by the old font/size, so the live
  re-apply effect now calls webglAddon.clearTextureAtlas() (via a new ref)
  after updating fontFamily/fontSize, before refitting.
- Daemon uptime now reflects a restart: the Settings daemon section ticks
  every second for live uptime, and Stop/Restart trigger an onReload callback
  that re-fetches health/status in App so a restarted daemon's new
  started_at_ms is shown instead of the stale value.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-15 10:08:59 +07:00
parent b63ed2ea83
commit f8d3876c68
3 changed files with 20 additions and 6 deletions
+10 -4
View File
@@ -5,7 +5,7 @@ import type { ConfigView, DaemonHealth } from "./socketBridge";
const FONTS = ["JetBrains Mono", "Menlo", "Monaco", "SF Mono", "Fira Code", "Cascadia Code"];
export function Settings({ config, health, onClose }: { config: ConfigView; health: DaemonHealth | null; onClose: () => void }) {
export function Settings({ config, health, onClose, onReload }: { config: ConfigView; health: DaemonHealth | null; onClose: () => void; onReload: () => void }) {
const ref = useRef<HTMLDivElement>(null);
useEffect(() => { ref.current?.focus(); }, []);
@@ -57,7 +57,7 @@ export function Settings({ config, health, onClose }: { config: ConfigView; heal
<input value={shellLocal} onChange={(e) => setShellLocal(e.target.value)} onBlur={() => void setConfig({ default_shell: shellLocal })}
style={{ width: "100%", padding: 8, marginBottom: 18, background: COLORS.bgPanel, color: COLORS.textPrimary, border: `1px solid ${COLORS.borderStrong}`, borderRadius: 8 }} />
<DaemonSection health={health} />
<DaemonSection health={health} onReload={onReload} />
</div>
</div>
);
@@ -70,8 +70,14 @@ function fmtUptime(ms: number): string {
return `${Math.floor(s / 3600)}h ${Math.floor((s % 3600) / 60)}m`;
}
function DaemonSection({ health }: { health: DaemonHealth | null }) {
function DaemonSection({ health, onReload }: { health: DaemonHealth | null; onReload: () => void }) {
const [confirm, setConfirm] = useState<null | "stop" | "restart">(null);
// Tick so uptime counts up live while the modal is open.
const [, setTick] = useState(0);
useEffect(() => {
const t = setInterval(() => setTick((n) => n + 1), 1000);
return () => clearInterval(t);
}, []);
return (
<div style={{ marginTop: 8, paddingTop: 16, borderTop: `1px solid ${COLORS.borderSubtle}` }}>
<div style={{ fontSize: 12, color: COLORS.textSecondary, marginBottom: 8 }}>Daemon</div>
@@ -92,7 +98,7 @@ function DaemonSection({ health }: { health: DaemonHealth | null }) {
</div>
<div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
<button onClick={() => setConfirm(null)} style={{ padding: "5px 12px", background: COLORS.bgElevated, color: COLORS.textPrimary, border: `1px solid ${COLORS.borderStrong}`, borderRadius: 6, fontSize: 12 }}>Cancel</button>
<button onClick={() => { const c = confirm; setConfirm(null); void (c === "stop" ? shutdownDaemon() : restartDaemon()); }}
<button onClick={() => { const c = confirm; setConfirm(null); void (c === "stop" ? shutdownDaemon() : restartDaemon()).then(onReload); }}
style={{ padding: "5px 12px", background: COLORS.stError, color: "#fff", border: "none", borderRadius: 6, fontSize: 12, fontWeight: 600 }}>
{confirm === "stop" ? "Stop" : "Restart"}
</button>