feat(control-ui): personalize local user identity and tighten layouts

## Summary
- add browser-local operator identity in Control UI and route user name/avatar rendering through the shared chat/avatar path used by assistant and agent surfaces
- tighten Quick Settings, fallback chip, and mobile chat layout behavior so the personalized UI uses space better and avoids clipped controls
- guard oversized local avatar uploads before FileReader allocation, restore the fallback-chip keyboard focus ring, and add the changelog note for the user-visible Control UI work

## Testing
- pnpm test ui/src/ui/views/config-quick.test.ts ui/src/styles/components.test.ts
- pnpm check:changed

ui/src/styles/components.css

@@ -3411,6 +3411,51 @@ td.data-table-key-col {
   padding: 0;
 }
 
+.agent-chip-input .chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+}
+
+.agent-chip-input .chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: var(--muted);
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    background var(--duration-fast) var(--ease-out),
+    color var(--duration-fast) var(--ease-out),
+    opacity var(--duration-fast) var(--ease-out);
+}
+
+.agent-chip-input .chip-remove:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text);
+}
+
+.agent-chip-input .chip-remove:focus-visible:not(:disabled) {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text);
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.agent-chip-input .chip-remove:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
 .agent-model-meta {
   display: grid;
   gap: 6px;

ui/src/styles/components.test.ts

@@ -0,0 +1,16 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+describe("agent fallback chip styles", () => {
+  it("styles the chip remove control inside the agent model input", () => {
+    const css = readFileSync(new URL("./components.css", import.meta.url), "utf8");
+
+    expect(css).toContain(".agent-chip-input .chip {");
+    expect(css).toContain(".agent-chip-input .chip-remove {");
+    expect(css).toContain(".agent-chip-input .chip-remove:hover:not(:disabled)");
+    expect(css).toContain(".agent-chip-input .chip-remove:focus-visible:not(:disabled)");
+    expect(css).toContain("outline: 2px solid var(--accent);");
+    expect(css).toContain("outline-offset: 2px;");
+    expect(css).toContain(".agent-chip-input .chip-remove:disabled");
+  });
+});

ui/src/styles/config-quick.css

@@ -44,16 +44,22 @@
 
 .qs-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
-  align-items: stretch;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  align-items: start;
   gap: 14px;
 }
 
+.qs-stack {
+  display: grid;
+  align-content: start;
+  gap: 14px;
+  min-width: 0;
+}
+
 /* ── Card ── */
 
 .qs-card {
   min-width: 0;
-  height: 100%;
   background: var(--card);
   border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
   border-radius: var(--radius-lg);
@@ -180,6 +186,77 @@
   color: var(--accent);
 }
 
+.qs-field {
+  display: grid;
+  gap: 6px;
+  width: 100%;
+}
+
+.qs-field__input {
+  width: 100%;
+  min-width: 0;
+  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--bg) 80%, var(--bg-elevated) 20%);
+  color: var(--text);
+  font: inherit;
+  font-size: 0.8125rem;
+  padding: 8px 10px;
+}
+
+.qs-field__input::placeholder {
+  color: var(--muted);
+}
+
+.qs-personal-preview {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px 10px;
+}
+
+.qs-personal-preview__copy {
+  min-width: 0;
+}
+
+.qs-personal-preview__title {
+  font-size: 0.95rem;
+  font-weight: 650;
+  color: var(--text-strong);
+}
+
+.qs-user-avatar {
+  width: 40px;
+  height: 40px;
+  flex: 0 0 auto;
+  border-radius: var(--radius-md);
+  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+  object-fit: cover;
+  object-position: center;
+}
+
+.qs-user-avatar--text,
+.qs-user-avatar--default {
+  display: grid;
+  place-items: center;
+  background: var(--accent-subtle);
+  color: var(--accent);
+  font-size: 0.875rem;
+  font-weight: 650;
+}
+
+.qs-user-avatar--default svg {
+  width: 18px;
+  height: 18px;
+  fill: currentColor;
+}
+
+.qs-personal-actions {
+  display: flex;
+  gap: 8px;
+  padding: 10px 16px 16px;
+}
+
 .qs-row__chevron svg {
   width: 12px;
   height: 12px;
@@ -567,6 +644,24 @@
   color: var(--muted);
 }
 
+@media (max-width: 1380px) {
+  .qs-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 1100px) {
+  .qs-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 760px) {
+  .qs-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 @media (max-width: 480px) {
   .qs-container {
     padding: 20px 0 40px;

ui/src/styles/config-quick.test.ts

@@ -0,0 +1,20 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+describe("config-quick personal identity styles", () => {
+  it("includes the local user identity quick-settings styles", () => {
+    const css = readFileSync(new URL("./config-quick.css", import.meta.url), "utf8");
+
+    expect(css).toContain(".qs-personal-preview");
+    expect(css).toContain(".qs-user-avatar");
+    expect(css).toContain(".qs-personal-actions");
+  });
+
+  it("includes the stacked quick-settings density layout", () => {
+    const css = readFileSync(new URL("./config-quick.css", import.meta.url), "utf8");
+
+    expect(css).toContain(".qs-stack");
+    expect(css).toContain("grid-template-columns: repeat(4, minmax(0, 1fr));");
+    expect(css).toContain("@media (max-width: 1380px)");
+  });
+});

ui/src/styles/layout.mobile.css

@@ -2,6 +2,61 @@
    Mobile Layout
    =========================================== */
 
+@media (max-width: 1320px) {
+  .content--chat .content-header {
+    align-items: stretch;
+    gap: 12px;
+    row-gap: 10px;
+    max-height: 180px;
+    overflow: visible;
+  }
+
+  .content--chat .content-header > div:first-child {
+    flex: 1 1 100%;
+    min-width: 0;
+  }
+
+  .content--chat .page-meta {
+    width: 100%;
+    min-width: 0;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    row-gap: 8px;
+  }
+
+  .content--chat .chat-controls {
+    margin-left: auto;
+    justify-content: flex-end;
+    row-gap: 8px;
+  }
+
+  .chat-controls__session-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    align-items: start;
+    gap: 10px 12px;
+    width: 100%;
+  }
+
+  .chat-controls__thinking-select {
+    grid-column: 1 / -1;
+  }
+
+  .chat-controls__session,
+  .chat-controls__model,
+  .chat-controls__thinking-select {
+    min-width: 0;
+    max-width: none;
+  }
+
+  .chat-controls__session select,
+  .chat-controls__model select,
+  .chat-controls__thinking-select select {
+    width: 100%;
+    max-width: none;
+  }
+}
+
 /* Tablet and smaller: switch the left nav to a slide-over drawer. */
 @media (max-width: 1100px) {
   .shell,

ui/src/styles/layout.mobile.test.ts

@@ -0,0 +1,13 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+describe("chat header responsive mobile styles", () => {
+  it("keeps the chat header and session controls from clipping on narrow widths", () => {
+    const css = readFileSync(new URL("./layout.mobile.css", import.meta.url), "utf8");
+
+    expect(css).toContain("@media (max-width: 1320px)");
+    expect(css).toContain(".content--chat .content-header");
+    expect(css).toContain(".chat-controls__session-row");
+    expect(css).toContain(".chat-controls__thinking-select");
+  });
+});