diff --git a/docs/index.html b/docs/index.html
index dd2a814a7..4fbf5d448 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -459,6 +459,138 @@
   .fresh-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
   .fresh-action { width: 100%; }
 }
+
+/* ========== Settings View ========== */
+.settings-view {
+  display: none; flex: 1; min-height: 0; overflow-y: auto;
+  background: hsl(var(--background)); color: hsl(var(--foreground));
+}
+.settings-view.active { display: block; }
+.settings-shell { max-width: 720px; margin: 0 auto; padding: 24px; }
+.settings-page-header {
+  padding: 20px 24px; border-bottom: 1px solid hsl(var(--border) / .3);
+  display: flex; align-items: center; justify-content: space-between; gap: 16px;
+}
+.settings-page-header h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
+.settings-page-header p { margin-top: 4px; color: hsl(var(--muted-foreground)); font-size: 13px; }
+.settings-tabs {
+  display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid hsl(var(--border) / .35);
+  overflow: visible;
+}
+.settings-tab {
+  padding: 9px 12px; margin-bottom: -1px; border: none; border-bottom: 2px solid transparent;
+  border-radius: 6px 6px 0 0; background: transparent; color: hsl(var(--muted-foreground));
+  font-size: 13px; cursor: pointer; white-space: nowrap;
+}
+.settings-tab:hover { color: hsl(var(--foreground)); background: hsl(var(--muted) / .35); }
+.settings-tab.active {
+  color: hsl(var(--foreground)); border-bottom-color: hsl(var(--foreground)); font-weight: 500;
+}
+.settings-panel { display: none; padding: 22px 8px 0 0; }
+.settings-panel.active { display: block; }
+.settings-section { margin-top: 24px; }
+.settings-section:first-child { margin-top: 0; }
+.settings-section h2 { font-size: 14px; font-weight: 500; }
+.settings-section-desc { margin-top: 3px; color: hsl(var(--muted-foreground)); font-size: 12px; }
+.settings-list { margin-top: 16px; display: flex; flex-direction: column; gap: 15px; }
+.settings-row {
+  display: flex; align-items: center; justify-content: space-between; gap: 20px;
+}
+.settings-row.stack { align-items: stretch; flex-direction: column; gap: 8px; }
+.settings-label { min-width: 0; }
+.settings-label-title { color: hsl(var(--muted-foreground)); font-size: 13px; }
+.settings-label-desc { margin-top: 3px; color: hsl(var(--muted-foreground) / .65); font-size: 12px; line-height: 1.45; }
+.settings-control { flex: 0 0 auto; width: 248px; max-width: 100%; }
+.settings-control.wide { width: 100%; }
+.settings-select,
+.settings-input,
+.settings-textarea {
+  width: 100%; min-height: 32px; padding: 0 10px; border: none; border-radius: 6px;
+  background: hsl(var(--muted)); color: hsl(var(--foreground)); font: inherit; font-size: 13px;
+}
+.settings-select { padding-right: 32px; }
+.settings-textarea { min-height: 76px; padding: 9px 10px; resize: vertical; font-family: inherit; }
+.settings-segmented {
+  display: flex; width: 100%; gap: 2px; padding: 2px; border-radius: 7px; background: hsl(var(--muted));
+}
+.settings-segment {
+  flex: 1; min-height: 28px; padding: 4px 10px; border: none; border-radius: 5px;
+  background: transparent; color: hsl(var(--muted-foreground)); font-size: 12px; cursor: pointer;
+}
+.settings-segment.active { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: var(--shadow-sm); }
+.settings-switch {
+  position: relative; width: 36px; height: 20px; border: none; border-radius: 999px;
+  display: block; flex: 0 0 auto; padding: 0;
+  background: hsl(var(--muted)); cursor: pointer; transition: background .15s;
+}
+.settings-switch-wrap {
+  width: auto; min-height: 32px; display: flex; align-items: center; justify-content: flex-end;
+}
+.settings-switch::after {
+  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
+  border-radius: 50%; background: hsl(var(--muted-foreground)); transition: transform .15s, background .15s;
+}
+.settings-switch.on { background: hsl(var(--foreground)); }
+.settings-switch.on::after { transform: translateX(16px); background: hsl(var(--background)); }
+.settings-range { display: flex; align-items: center; gap: 10px; }
+.settings-range input { width: 145px; accent-color: hsl(var(--foreground)); }
+.settings-range span { width: 68px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
+.settings-preview-title {
+  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
+  color: hsl(var(--muted-foreground)); font-size: 12px;
+}
+.settings-terminal-preview {
+  width: min(100%, 40ch); height: 12.4em; overflow: hidden;
+  border: 1px solid hsl(var(--border) / .45); border-radius: 8px;
+  background: var(--t-bg); color: var(--t-fg); padding: 10px 12px;
+  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px; line-height: 1.55; white-space: pre; box-shadow: var(--shadow-sm);
+}
+.settings-shortcuts { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
+.settings-shortcut-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+.settings-shortcut-keys { white-space: nowrap; }
+.settings-shortcut-keys kbd {
+  display: inline-block; padding: 2px 6px; border-radius: 4px;
+  background: hsl(var(--muted)); font-family: 'JetBrains Mono', monospace; font-size: 11px;
+}
+.settings-note {
+  margin-top: 12px; padding: 10px 12px; border: 1px solid hsl(var(--border) / .45);
+  border-radius: 8px; color: hsl(var(--muted-foreground)); background: hsl(var(--muted) / .35);
+  font-size: 12px; line-height: 1.5;
+}
+.settings-empty-state {
+  margin-top: 16px; min-height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
+  border: 1px solid hsl(var(--border) / .35); border-radius: 8px; background: hsl(var(--muted) / .22);
+  color: hsl(var(--muted-foreground)); font-size: 13px;
+}
+.settings-agent-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
+.settings-agent-item {
+  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px;
+  min-height: 56px; padding: 10px 12px; border: 1px solid hsl(var(--border) / .42);
+  border-radius: 8px; background: hsl(var(--card));
+}
+.settings-agent-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.settings-agent-icon {
+  width: 32px; height: 32px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0; background: hsl(var(--muted)); color: hsl(var(--foreground));
+}
+.settings-agent-icon svg { width: 18px; height: 18px; }
+.settings-agent-name { min-width: 0; color: hsl(var(--foreground)); font-size: 14px; font-weight: 500; }
+@media (max-width: 767px) {
+  .sidebar {
+    position: fixed; inset: 0 auto 0 0; z-index: 60;
+    width: min(85vw, 288px); box-shadow: var(--shadow-md);
+  }
+  .content { width: 100%; }
+  .settings-shell { padding: 16px; }
+  .settings-page-header { padding: 16px 16px 16px 48px; }
+  .settings-row { align-items: stretch; flex-direction: column; gap: 8px; }
+  .settings-row:has(.settings-switch-wrap) { align-items: center; flex-direction: row; }
+  .settings-row:has(.settings-switch-wrap) .settings-label { flex: 1; }
+  .settings-row:has(.settings-switch-wrap) .settings-switch-wrap { width: auto; min-width: 36px; }
+  .settings-control { width: 100%; }
+  .settings-range input { width: 100%; }
+}
 </style>
 </head>
 <body>
@@ -687,7 +819,7 @@ <h2>Task Board</h2>
               <div class="fresh-composer">
                 <div class="fresh-thinking"><span></span></div>
                 <div class="fresh-input">Agent is working — sends queue for the next turn</div>
-                <div class="fresh-actions"><div class="fresh-action"><i data-lucide="paperclip" class="icon-xs"></i></div><div class="fresh-action"><i data-lucide="square" class="icon-xs"></i></div><div class="fresh-action"><i data-lucide="command" class="icon-xs"></i></div><div class="fresh-action send"><i data-lucide="send" class="icon-xs"></i></div></div>
+                <div class="fresh-actions"><div class="fresh-action"><i data-lucide="paperclip" class="icon-xs"></i></div><div class="fresh-action"><i data-lucide="square" class="icon-xs"></i></div><div class="fresh-action"><i data-lucide="list-start" class="icon-xs"></i></div><div class="fresh-action send"><i data-lucide="send" class="icon-xs"></i></div></div>
               </div>
             </div>
             <aside class="fresh-rail">
@@ -699,6 +831,394 @@ <h2>Task Board</h2>
           </div>
         </div>
       </div>
+
+      <!-- Settings -->
+      <section class="settings-view" id="settings-view" aria-label="Settings preview" aria-hidden="true">
+        <div class="settings-page-header">
+          <div>
+            <h1>Settings</h1>
+            <p>Configure your preferences</p>
+          </div>
+        </div>
+        <div class="settings-shell">
+          <div class="settings-tabs" role="tablist" aria-label="Settings sections">
+            <button class="settings-tab active" type="button" role="tab" aria-selected="true" data-settings-tab="appearance">Appearance</button>
+            <button class="settings-tab" type="button" role="tab" aria-selected="false" data-settings-tab="agents">Coding Agents</button>
+            <button class="settings-tab" type="button" role="tab" aria-selected="false" data-settings-tab="panes">Panes</button>
+            <button class="settings-tab" type="button" role="tab" aria-selected="false" data-settings-tab="workspace">Workspace</button>
+            <button class="settings-tab" type="button" role="tab" aria-selected="false" data-settings-tab="naming">Naming</button>
+            <button class="settings-tab" type="button" role="tab" aria-selected="false" data-settings-tab="network">Network</button>
+            <button class="settings-tab" type="button" role="tab" aria-selected="false" data-settings-tab="advanced">Advanced</button>
+          </div>
+
+          <div class="settings-panel active" id="settings-panel-appearance" role="tabpanel" aria-label="Appearance settings" aria-hidden="false">
+            <div class="settings-preview-title">
+              <span>Terminal preview</span>
+              <span>40x8</span>
+            </div>
+            <div class="settings-terminal-preview" aria-label="Terminal preview"><span class="t-dim">// terminal preview: syntax demo</span>
+<span class="t-blue">const</span> answer: <span class="t-magenta">number</span> = <span class="t-yellow">42</span>
+<span class="t-blue">type</span> User = { id: <span class="t-magenta">number</span> }
+<span class="t-blue">function</span> <span class="t-cyan">greet</span>(name: <span class="t-magenta">string</span>) {
+  <span class="t-blue">return</span> <span class="t-green">"hi, "</span> + name
+} <span class="t-dim">// end</span></div>
+
+            <div class="settings-section">
+              <h2>Appearance</h2>
+              <p class="settings-section-desc">Theme and visual preferences</p>
+              <div class="settings-list">
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Theme</div></div>
+                  <div class="settings-control">
+                    <div class="settings-segmented" data-segmented>
+                      <button class="settings-segment active" type="button">System</button>
+                      <button class="settings-segment" type="button">Light</button>
+                      <button class="settings-segment" type="button">Dark</button>
+                    </div>
+                  </div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">UI scale</div></div>
+                  <div class="settings-control">
+                    <div class="settings-range"><input type="range" min="0.75" max="1.5" step="0.05" value="1" aria-label="UI scale" data-format="percent"><span>100%</span></div>
+                  </div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Color scheme</div></div>
+                  <div class="settings-control">
+                    <select class="settings-select" aria-label="Color scheme">
+                      <option>Auto (follow app theme)</option>
+                      <option>Dracula</option>
+                      <option>One Dark</option>
+                      <option>Solarized Dark</option>
+                      <option>GitHub Dark</option>
+                      <option>One Light</option>
+                      <option>Solarized Light</option>
+                      <option>GitHub Light</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Font family</div></div>
+                  <div class="settings-control">
+                    <select class="settings-select" aria-label="Font family">
+                      <option>System monospace</option>
+                      <option>JetBrains Mono</option>
+                      <option>Cascadia Code</option>
+                      <option>Cascadia Mono</option>
+                      <option>Fira Code</option>
+                      <option>Meslo LG S</option>
+                      <option>Source Code Pro</option>
+                      <option>IBM Plex Mono</option>
+                      <option>Consolas</option>
+                      <option>Monaco</option>
+                      <option>Menlo</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Font size</div></div>
+                  <div class="settings-control">
+                    <div class="settings-range"><input type="range" min="12" max="32" step="1" value="16" aria-label="Font size" data-format="px-percent"><span>16px (100%)</span></div>
+                  </div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Line height</div></div>
+                  <div class="settings-control">
+                    <div class="settings-range"><input type="range" min="1" max="1.8" step="0.05" value="1" aria-label="Line height" data-format="fixed"><span>1.00</span></div>
+                  </div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Cursor blink</div></div>
+                  <div class="settings-control settings-switch-wrap">
+                    <button class="settings-switch on" type="button" role="switch" aria-checked="true" aria-label="Cursor blink"></button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="settings-panel" id="settings-panel-agents" role="tabpanel" aria-label="Coding agent settings" aria-hidden="true">
+            <div class="settings-agent-list">
+              <div class="settings-agent-item">
+                <div class="settings-agent-main">
+                  <span class="settings-agent-icon" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="75.73 64.08 872.25 872.25" fill="currentColor"><path d="M616.9,649.5h-209.7c0,0,0,104.7,0,104.7h-56.6c0,0,.2-104.5.2-104.5h-48.6s.2,104.5.2,104.5h-56.7c0,0,.2-104.4.2-104.4l-48.6-.7v-96.4c.1,0-104.8,0-104.8,0v-104.9s104.9,0,104.9,0v-201.6c0,0,628.9,0,628.9,0v201.6c0,0,104.9,0,104.9,0v104.9s-104.9,0-104.9,0v96.6c.1,0-56.5.4-56.5.4l.2,104.5h-48.6s.2-104.6.2-104.6h-56.6s.2,104.6.2,104.6h-48.6s.2-104.6.2-104.6ZM351.1,447.5l-.5-96.4h-48.4c0,0,0,96.6,0,96.6l48.8-.2ZM722,447.7l-.4-96.7h-56.5c0,0,0,96.8,0,96.8h56.9Z"/></svg>
+                  </span>
+                  <span class="settings-agent-name">Claude CLI</span>
+                </div>
+                <button class="settings-switch on" type="button" role="switch" aria-checked="true" aria-label="Enable Claude CLI"></button>
+              </div>
+              <div class="settings-agent-item">
+                <div class="settings-agent-main">
+                  <span class="settings-agent-icon" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path d="M853.1,283.1c94.2,0,170.6,76.4,170.6,170.6s-76.4,170.6-170.6,170.6v-341.3h0ZM170.6,283.1C76.4,283.1,0,359.5,0,453.8s76.4,170.6,170.6,170.6v-341.3h0ZM853.1,624.3H170.6c0-188.5,152.8-341.3,341.3-341.3s341.3,152.8,341.3,341.3h-.1ZM410.8,496.4c0-23.6-19-42.6-42.6-42.6s-42.6,19-42.6,42.6,19,42.6,42.6,42.6,42.6-19,42.6-42.6h0ZM698.2,496.4c0-23.6-19-42.6-42.6-42.6s-42.6,19-42.6,42.6,19,42.6,42.6,42.6,42.6-19,42.6-42.6h0ZM234.6,624.3c-35.4,0-64,28.7-64,64s28.7,64,64,64v-127.9h0ZM368.2,624.3c-35.4,0-64,28.7-64,64s28.7,64,64,64v-127.9h0ZM789.1,752.3c35.4,0,64-28.7,64-64s-28.7-64-64-64v127.9h0ZM655.5,752.3c35.4,0,64-28.7,64-64s-28.7-64-64-64v127.9h0Z"/></svg>
+                  </span>
+                  <span class="settings-agent-name">Freshclaude</span>
+                </div>
+                <button class="settings-switch on" type="button" role="switch" aria-checked="true" aria-label="Enable Freshclaude"></button>
+              </div>
+              <div class="settings-agent-item">
+                <div class="settings-agent-main">
+                  <span class="settings-agent-icon" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.27 -0.23 16.55 16.55" fill="currentColor"><path d="M14.949 6.547a3.94 3.94 0 0 0-.348-3.273 4.11 4.11 0 0 0-4.4-1.934A4.1 4.1 0 0 0 8.423.2 4.15 4.15 0 0 0 6.305.086a4.1 4.1 0 0 0-1.891.948 4.04 4.04 0 0 0-1.158 1.753 4.1 4.1 0 0 0-1.563.679A4 4 0 0 0 .554 4.72a3.99 3.99 0 0 0 .502 4.731 3.94 3.94 0 0 0 .346 3.274 4.11 4.11 0 0 0 4.402 1.933c.382.425.852.764 1.377.995.526.231 1.095.35 1.67.346 1.78.002 3.358-1.132 3.901-2.804a4.1 4.1 0 0 0 1.563-.68 4 4 0 0 0 1.14-1.253 3.99 3.99 0 0 0-.506-4.716m-6.097 8.406a3.05 3.05 0 0 1-1.945-.694l.096-.054 3.23-1.838a.53.53 0 0 0 .265-.455v-4.49l1.366.778q.02.011.025.035v3.722c-.003 1.653-1.361 2.992-3.037 2.996m-6.53-2.75a2.95 2.95 0 0 1-.36-2.01l.095.057L5.29 12.09a.53.53 0 0 0 .527 0l3.949-2.246v1.555a.05.05 0 0 1-.022.041L6.473 13.3c-1.454.826-3.311.335-4.15-1.098m-.85-6.94A3.02 3.02 0 0 1 3.07 3.949v3.785a.51.51 0 0 0 .262.451l3.93 2.237-1.366.779a.05.05 0 0 1-.048 0L2.585 9.342a2.98 2.98 0 0 1-1.113-4.094zm11.216 2.571L8.747 5.576l1.362-.776a.05.05 0 0 1 .048 0l3.265 1.86a3 3 0 0 1 1.173 1.207 2.96 2.96 0 0 1-.27 3.2 3.05 3.05 0 0 1-1.36.997V8.279a.52.52 0 0 0-.276-.445m1.36-2.015-.097-.057-3.226-1.855a.53.53 0 0 0-.53 0L6.249 6.153V4.598a.04.04 0 0 1 .019-.04L9.533 2.7a3.07 3.07 0 0 1 3.257.139c.474.325.843.778 1.066 1.303.223.526.289 1.103.191 1.664zM5.503 8.575 4.139 7.8a.05.05 0 0 1-.026-.037V4.049c0-.57.166-1.127.476-1.607s.752-.864 1.275-1.105a3.08 3.08 0 0 1 3.234.41l-.096.054-3.23 1.838a.53.53 0 0 0-.265.455zm.742-1.577 1.758-1 1.762 1v2l-1.755 1-1.762-1z"/></svg>
+                  </span>
+                  <span class="settings-agent-name">Codex CLI</span>
+                </div>
+                <button class="settings-switch on" type="button" role="switch" aria-checked="true" aria-label="Enable Codex CLI"></button>
+              </div>
+              <div class="settings-agent-item">
+                <div class="settings-agent-main">
+                  <span class="settings-agent-icon" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.27 -0.23 16.55 16.55" fill="currentColor"><path d="M14.949 6.547a3.94 3.94 0 0 0-.348-3.273 4.11 4.11 0 0 0-4.4-1.934A4.1 4.1 0 0 0 8.423.2 4.15 4.15 0 0 0 6.305.086a4.1 4.1 0 0 0-1.891.948 4.04 4.04 0 0 0-1.158 1.753 4.1 4.1 0 0 0-1.563.679A4 4 0 0 0 .554 4.72a3.99 3.99 0 0 0 .502 4.731 3.94 3.94 0 0 0 .346 3.274 4.11 4.11 0 0 0 4.402 1.933c.382.425.852.764 1.377.995.526.231 1.095.35 1.67.346 1.78.002 3.358-1.132 3.901-2.804a4.1 4.1 0 0 0 1.563-.68 4 4 0 0 0 1.14-1.253 3.99 3.99 0 0 0-.506-4.716m-6.097 8.406a3.05 3.05 0 0 1-1.945-.694l.096-.054 3.23-1.838a.53.53 0 0 0 .265-.455v-4.49l1.366.778q.02.011.025.035v3.722c-.003 1.653-1.361 2.992-3.037 2.996m-6.53-2.75a2.95 2.95 0 0 1-.36-2.01l.095.057L5.29 12.09a.53.53 0 0 0 .527 0l3.949-2.246v1.555a.05.05 0 0 1-.022.041L6.473 13.3c-1.454.826-3.311.335-4.15-1.098m-.85-6.94A3.02 3.02 0 0 1 3.07 3.949v3.785a.51.51 0 0 0 .262.451l3.93 2.237-1.366.779a.05.05 0 0 1-.048 0L2.585 9.342a2.98 2.98 0 0 1-1.113-4.094zm11.216 2.571L8.747 5.576l1.362-.776a.05.05 0 0 1 .048 0l3.265 1.86a3 3 0 0 1 1.173 1.207 2.96 2.96 0 0 1-.27 3.2 3.05 3.05 0 0 1-1.36.997V8.279a.52.52 0 0 0-.276-.445m1.36-2.015-.097-.057-3.226-1.855a.53.53 0 0 0-.53 0L6.249 6.153V4.598a.04.04 0 0 1 .019-.04L9.533 2.7a3.07 3.07 0 0 1 3.257.139c.474.325.843.778 1.066 1.303.223.526.289 1.103.191 1.664zM5.503 8.575 4.139 7.8a.05.05 0 0 1-.026-.037V4.049c0-.57.166-1.127.476-1.607s.752-.864 1.275-1.105a3.08 3.08 0 0 1 3.234.41l-.096.054-3.23 1.838a.53.53 0 0 0-.265.455zm.742-1.577 1.758-1 1.762 1v2l-1.755 1-1.762-1z"/></svg>
+                  </span>
+                  <span class="settings-agent-name">Freshcodex</span>
+                </div>
+                <button class="settings-switch on" type="button" role="switch" aria-checked="true" aria-label="Enable Freshcodex"></button>
+              </div>
+              <div class="settings-agent-item">
+                <div class="settings-agent-main">
+                  <span class="settings-agent-icon" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="444 174 312 312" fill="currentColor"><path d="M520,180h200v300h-240V180h40ZM540,300v120h120v-180h-120v60Z"/><path d="M660,300v120h-120v-120h120Z" fill-opacity="0.5"/></svg>
+                  </span>
+                  <span class="settings-agent-name">OpenCode</span>
+                </div>
+                <button class="settings-switch on" type="button" role="switch" aria-checked="true" aria-label="Enable OpenCode"></button>
+              </div>
+              <div class="settings-agent-item">
+                <div class="settings-agent-main">
+                  <span class="settings-agent-icon" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="444.00 174.00 312.00 312.00" fill="currentColor"><path d="M520,180h200v300h-240V180h40ZM540,300v120h120v-180h-120v60Z"/><path d="M660,300v120h-120v-120h120Z" fill-opacity="0.5"/></svg>
+                  </span>
+                  <span class="settings-agent-name">Freshopencode</span>
+                </div>
+                <button class="settings-switch on" type="button" role="switch" aria-checked="true" aria-label="Enable Freshopencode"></button>
+              </div>
+            </div>
+          </div>
+
+          <div class="settings-panel" id="settings-panel-panes" role="tabpanel" aria-label="Pane settings" aria-hidden="true">
+            <div class="settings-section">
+              <h2>Pane behavior</h2>
+              <p class="settings-section-desc">Layout, defaults, and completion indicators</p>
+              <div class="settings-list">
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Open sidebar session in</div><div class="settings-label-desc">Where to open a session when clicked in the sidebar.</div></div>
+                  <div class="settings-control">
+                    <div class="settings-segmented" data-segmented><button class="settings-segment active" type="button">New tab</button><button class="settings-segment" type="button">Split pane</button></div>
+                  </div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Default new pane</div></div>
+                  <div class="settings-control"><select class="settings-select" aria-label="Default new pane"><option>Ask</option><option>Shell</option><option>Browser</option><option>Editor</option></select></div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Snap distance</div></div>
+                  <div class="settings-control"><div class="settings-range"><input type="range" min="0" max="8" step="1" value="2" aria-label="Snap distance" data-format="snap"><span>2%</span></div></div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Icons on tabs</div></div>
+                  <div class="settings-control settings-switch-wrap"><button class="settings-switch on" type="button" role="switch" aria-checked="true" aria-label="Icons on tabs"></button></div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Multi-row tabs</div><div class="settings-label-desc">Show tabs in multiple rows instead of a single scrollable row.</div></div>
+                  <div class="settings-control settings-switch-wrap"><button class="settings-switch" type="button" role="switch" aria-checked="false" aria-label="Multi-row tabs"></button></div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Tab completion indicator</div></div>
+                  <div class="settings-control"><div class="settings-segmented" data-segmented><button class="settings-segment active" type="button">Highlight</button><button class="settings-segment" type="button">Pulse</button><button class="settings-segment" type="button">Darken</button><button class="settings-segment" type="button">None</button></div></div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Dismiss attention on</div></div>
+                  <div class="settings-control"><div class="settings-segmented" data-segmented><button class="settings-segment active" type="button">Tab click</button><button class="settings-segment" type="button">Typing</button></div></div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Sound on completion</div></div>
+                  <div class="settings-control settings-switch-wrap"><button class="settings-switch on" type="button" role="switch" aria-checked="true" aria-label="Sound on completion"></button></div>
+                </div>
+              </div>
+            </div>
+
+            <div class="settings-section">
+              <h2>Editor pane</h2>
+              <p class="settings-section-desc">External editor for file opening</p>
+              <div class="settings-list">
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">External editor</div><div class="settings-label-desc">Which editor to use when opening files from the editor pane.</div></div>
+                  <div class="settings-control"><select class="settings-select" aria-label="External editor"><option>Auto (system default)</option><option>Cursor</option><option>VS Code</option><option>Custom command</option></select></div>
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+          <div class="settings-panel" id="settings-panel-workspace" role="tabpanel" aria-label="Workspace settings" aria-hidden="true">
+            <div class="settings-section">
+              <h2>Sidebar</h2>
+              <p class="settings-section-desc">Session list and navigation</p>
+              <div class="settings-list">
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Sort mode</div></div>
+                  <div class="settings-control">
+                    <select class="settings-select" aria-label="Sort mode">
+                      <option>Activity (tabs first)</option>
+                      <option>Recency</option>
+                      <option>Recency (tabs first)</option>
+                      <option>Project</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Worktree grouping</div></div>
+                  <div class="settings-control"><select class="settings-select" aria-label="Worktree grouping"><option>Repository</option><option>Worktree</option></select></div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Show project badges</div></div>
+                  <div class="settings-control settings-switch-wrap"><button class="settings-switch on" type="button" role="switch" aria-checked="true" aria-label="Show project badges"></button></div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Show subagent sessions</div></div>
+                  <div class="settings-control settings-switch-wrap"><button class="settings-switch" type="button" role="switch" aria-checked="false" aria-label="Show subagent sessions"></button></div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Ignore Codex subagent sessions</div></div>
+                  <div class="settings-control settings-switch-wrap"><button class="settings-switch on" type="button" role="switch" aria-checked="true" aria-label="Ignore Codex subagent sessions"></button></div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Show non-interactive sessions</div></div>
+                  <div class="settings-control settings-switch-wrap"><button class="settings-switch" type="button" role="switch" aria-checked="false" aria-label="Show non-interactive sessions"></button></div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Hide empty sessions</div><div class="settings-label-desc">Hide sessions that have no messages yet.</div></div>
+                  <div class="settings-control settings-switch-wrap"><button class="settings-switch on" type="button" role="switch" aria-checked="true" aria-label="Hide empty sessions"></button></div>
+                </div>
+                <div class="settings-row stack">
+                  <div class="settings-label"><div class="settings-label-title">Hide sessions by first chat</div><div class="settings-label-desc">One substring per line. Matching sessions are hidden from the sidebar.</div></div>
+                  <div class="settings-control wide"><textarea class="settings-textarea" aria-label="Sidebar first chat exclusion substrings" placeholder="__AUTO__"></textarea></div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">First chat must start with match</div></div>
+                  <div class="settings-control settings-switch-wrap"><button class="settings-switch" type="button" role="switch" aria-checked="false" aria-label="Require first chat exclusion substring at start"></button></div>
+                </div>
+              </div>
+            </div>
+
+            <div class="settings-section">
+              <h2>Keyboard shortcuts</h2>
+              <p class="settings-section-desc">Navigation and terminal</p>
+              <div class="settings-shortcuts" aria-label="Keyboard shortcuts">
+                <div class="settings-shortcut-row"><span>New tab</span><span class="settings-shortcut-keys"><kbd>Alt</kbd> <kbd>T</kbd></span></div>
+                <div class="settings-shortcut-row"><span>Close tab</span><span class="settings-shortcut-keys"><kbd>Alt</kbd> <kbd>W</kbd></span></div>
+                <div class="settings-shortcut-row"><span>Reopen closed tab</span><span class="settings-shortcut-keys"><kbd>Alt</kbd> <kbd>H</kbd></span></div>
+                <div class="settings-shortcut-row"><span>Previous tab</span><span class="settings-shortcut-keys"><kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>[</kbd></span></div>
+                <div class="settings-shortcut-row"><span>Next tab</span><span class="settings-shortcut-keys"><kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>]</kbd></span></div>
+                <div class="settings-shortcut-row"><span>Copy selection</span><span class="settings-shortcut-keys"><kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>C</kbd></span></div>
+                <div class="settings-shortcut-row"><span>Paste</span><span class="settings-shortcut-keys"><kbd>Ctrl</kbd> <kbd>V</kbd></span></div>
+                <div class="settings-shortcut-row"><span>Search</span><span class="settings-shortcut-keys"><kbd>Ctrl</kbd> <kbd>F</kbd></span></div>
+              </div>
+            </div>
+          </div>
+
+          <div class="settings-panel" id="settings-panel-naming" role="tabpanel" aria-label="Naming settings" aria-hidden="true">
+            <div class="settings-section">
+              <h2>Naming</h2>
+              <p class="settings-section-desc">Automatic session names</p>
+              <div class="settings-list">
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Gemini API key</div><div class="settings-label-desc">Used for automatic session naming.</div></div>
+                  <div class="settings-control"><input class="settings-input" type="password" aria-label="Gemini API key" placeholder="Enter Gemini API key"></div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Auto-generate session titles</div><div class="settings-label-desc">Generate names for new coding sessions.</div></div>
+                  <div class="settings-control settings-switch-wrap"><button class="settings-switch on" type="button" role="switch" aria-checked="true" aria-label="Auto-generate session titles"></button></div>
+                </div>
+                <div class="settings-row stack">
+                  <div class="settings-label"><div class="settings-label-title">Naming prompt</div><div class="settings-label-desc">Instructions for generating session titles.</div></div>
+                  <div class="settings-control wide"><textarea class="settings-textarea" aria-label="Naming prompt" placeholder="Generate a short title (3-8 words) for a coding assistant conversation."></textarea></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="settings-panel" id="settings-panel-network" role="tabpanel" aria-label="Network settings" aria-hidden="true">
+            <div class="settings-section">
+              <h2>Network</h2>
+              <p class="settings-section-desc">Remote access from other devices</p>
+              <div class="settings-list">
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Remote access</div><div class="settings-label-desc">Allow connections from other devices on your network.</div></div>
+                  <div class="settings-control settings-switch-wrap"><button class="settings-switch" type="button" role="switch" aria-checked="false" aria-label="Remote access"></button></div>
+                </div>
+              </div>
+              <div class="settings-note">Firewall status and device links appear here only when remote access is enabled or needs attention.</div>
+            </div>
+          </div>
+
+          <div class="settings-panel" id="settings-panel-advanced" role="tabpanel" aria-label="Advanced settings" aria-hidden="true">
+            <div class="settings-section">
+              <h2>Advanced</h2>
+              <p class="settings-section-desc">Terminal internals and debugging</p>
+              <div class="settings-list">
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Scrollback lines</div></div>
+                  <div class="settings-control"><div class="settings-range"><input type="range" min="1000" max="20000" step="500" value="10000" aria-label="Scrollback lines" data-format="locale"><span>10,000</span></div></div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Warn on external links</div></div>
+                  <div class="settings-control settings-switch-wrap"><button class="settings-switch on" type="button" role="switch" aria-checked="true" aria-label="Warn on external links"></button></div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Debug logging</div></div>
+                  <div class="settings-control settings-switch-wrap"><button class="settings-switch" type="button" role="switch" aria-checked="false" aria-label="Debug logging"></button></div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Agent MCP server</div><div class="settings-label-desc">Expose Freshell as an MCP tool to coding agents.</div></div>
+                  <div class="settings-control settings-switch-wrap"><button class="settings-switch on" type="button" role="switch" aria-checked="true" aria-label="Agent MCP server"></button></div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">OSC52 clipboard access</div></div>
+                  <div class="settings-control"><div class="settings-segmented" data-segmented><button class="settings-segment active" type="button">Ask</button><button class="settings-segment" type="button">Always</button><button class="settings-segment" type="button">Never</button></div></div>
+                </div>
+              </div>
+            </div>
+
+            <div class="settings-section">
+              <h2>Runtime</h2>
+              <p class="settings-section-desc">Idle terminals and startup defaults</p>
+              <div class="settings-list">
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Auto-kill idle (minutes)</div></div>
+                  <div class="settings-control"><div class="settings-range"><input type="range" min="5" max="720" step="5" value="15" aria-label="Auto-kill idle minutes" data-format="plain"><span>15</span></div></div>
+                </div>
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">Default working directory</div></div>
+                  <div class="settings-control"><input class="settings-input" type="text" aria-label="Default working directory" placeholder="e.g. C:\Users\you\projects"></div>
+                </div>
+              </div>
+            </div>
+
+            <div class="settings-section">
+              <h2>Extensions</h2>
+              <p class="settings-section-desc">Developer extension controls</p>
+              <div class="settings-empty-state">
+                <i data-lucide="puzzle" class="icon"></i>
+                <span>No extensions installed</span>
+              </div>
+            </div>
+
+            <div class="settings-section">
+              <h2>Devices</h2>
+              <p class="settings-section-desc">Device names and local aliases</p>
+              <div class="settings-list">
+                <div class="settings-row">
+                  <div class="settings-label"><div class="settings-label-title">This machine</div><div class="settings-label-desc">Renaming this updates what other machines see.</div></div>
+                  <div class="settings-control"><input class="settings-input" type="text" aria-label="Device name for this machine" value="local-device"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
     </div>
   </div>
 </div>
@@ -745,16 +1265,62 @@ <h2>Task Board</h2>
 
 document.addEventListener('keydown', (event) => {
   if (event.key !== 'Escape') return
+  if (document.getElementById('settings-view')?.classList.contains('active')) return
   if (!sidebarVisible) return
   sidebarVisible = !sidebarVisible;
   updateSidebarVisibility();
 });
 
 // ========== Sidebar Nav ==========
+const settingsView = document.getElementById('settings-view');
+const tabbar = document.querySelector('.tabbar');
+const settingsNavButton = document.querySelector('.sb-nav-btn[title="Settings"]');
+const primaryNavButton = document.querySelector('.sb-nav-btn[title="Coding Agents"]');
+
+function restoreActiveTabPanel() {
+  const activeTab = document.querySelector('.tab.active[data-tab]') || document.querySelector('.tab[data-tab]');
+  if (!activeTab) return;
+  const id = activeTab.dataset.tab;
+  document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+  document.getElementById('panel-' + id)?.classList.add('active');
+}
+
+function hideSettingsView() {
+  if (!settingsView) return;
+  settingsView.classList.remove('active');
+  settingsView.setAttribute('aria-hidden', 'true');
+  if (tabbar) tabbar.style.display = '';
+  restoreActiveTabPanel();
+  if (window.innerWidth <= 768) {
+    sidebarVisible = false;
+    updateSidebarVisibility();
+  }
+}
+
+function showSettingsView() {
+  if (!settingsView) return;
+  cancelAnimations();
+  hideSnark();
+  document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+  if (tabbar) tabbar.style.display = 'none';
+  settingsView.classList.add('active');
+  settingsView.setAttribute('aria-hidden', 'false');
+  if (window.innerWidth <= 768) {
+    sidebarVisible = false;
+    updateSidebarVisibility();
+  }
+  lucide.createIcons();
+}
+
 document.querySelectorAll('.sb-nav-btn').forEach(btn => {
   btn.addEventListener('click', () => {
     document.querySelectorAll('.sb-nav-btn').forEach(b => b.classList.remove('active'));
     btn.classList.add('active');
+    if (btn === settingsNavButton) {
+      showSettingsView();
+      return;
+    }
+    hideSettingsView();
   });
 });
 
@@ -765,6 +1331,9 @@ <h2>Task Board</h2>
 
 allTabs.forEach(tab => {
   tab.addEventListener('click', () => {
+    hideSettingsView();
+    document.querySelectorAll('.sb-nav-btn').forEach(b => b.classList.remove('active'));
+    primaryNavButton?.classList.add('active');
     const id = tab.dataset.tab;
     allTabs.forEach(t => t.classList.remove('active'));
     tab.classList.add('active');
@@ -864,8 +1433,8 @@ <h2>Task Board</h2>
     { html: '  <span class="t-success">✓</span> Session history &amp; AI summaries', delay: 50 },
     { html: '  <span class="t-success">✓</span> Remote tab copies keep layout and reconnect safely on this machine', delay: 50 },
     { html: '  <span class="t-success">✓</span> Remote access with setup wizard &amp; QR code', delay: 50 },
-    { html: '  <span class="t-success">✓</span> Extension system for custom pane types', delay: 50 },
-    { html: '  <span class="t-success">✓</span> AI-powered session titles', delay: 50 },
+    { html: '  <span class="t-success">✓</span> Pane type system for custom panes', delay: 50 },
+    { html: '  <span class="t-success">✓</span> Automatic session titles', delay: 50 },
     { html: '  <span class="t-success">✓</span> Progressive sidebar search', delay: 50 },
     { html: '  <span class="t-success">✓</span> Keyboard shortcuts dialog (Alt+T, Alt+W, Alt+H)', delay: 50 },
     { html: '  <span class="t-success">✓</span> Personalized sidebar per device', delay: 50 },
@@ -1076,6 +1645,7 @@ <h2>Task Board</h2>
 
 // Trigger: keypress anywhere (someone trying to type)
 document.addEventListener('keydown', (e) => {
+  if (settingsView?.classList.contains('active')) return;
   if (e.ctrlKey || e.metaKey || e.altKey) return;
   if (e.key === 'Escape') { hideSnark(); return; }
   if (e.key === 'Tab') return; // let tab switching work
@@ -1110,6 +1680,87 @@ <h2>Task Board</h2>
     if (e.target.closest(sel)) { showSnark(); return; }
   }
 });
+
+// ========== Settings Preview Interactions ==========
+function activateSettingsTab(id) {
+  const tab = document.querySelector(`.settings-tab[data-settings-tab="${id}"]`);
+  if (!tab) return;
+  document.querySelectorAll('.settings-tab').forEach(item => {
+    const selected = item === tab;
+    item.classList.toggle('active', selected);
+    item.setAttribute('aria-selected', selected ? 'true' : 'false');
+  });
+  document.querySelectorAll('.settings-panel').forEach(panel => {
+    const selected = panel.id === 'settings-panel-' + id;
+    panel.classList.toggle('active', selected);
+    panel.setAttribute('aria-hidden', selected ? 'false' : 'true');
+  });
+}
+
+document.querySelectorAll('.settings-tab').forEach(tab => {
+  tab.addEventListener('click', () => {
+    activateSettingsTab(tab.dataset.settingsTab);
+  });
+});
+
+document.querySelectorAll('[data-segmented]').forEach(group => {
+  group.querySelectorAll('.settings-segment').forEach(button => {
+    button.addEventListener('click', () => {
+      group.querySelectorAll('.settings-segment').forEach(item => item.classList.remove('active'));
+      button.classList.add('active');
+    });
+  });
+});
+
+document.querySelectorAll('.settings-switch').forEach(button => {
+  button.addEventListener('click', () => {
+    const next = !button.classList.contains('on');
+    button.classList.toggle('on', next);
+    button.setAttribute('aria-checked', next ? 'true' : 'false');
+  });
+});
+
+function formatSettingsRange(input) {
+  const value = Number(input.value);
+  switch (input.dataset.format) {
+    case 'percent':
+      return Math.round(value * 100) + '%';
+    case 'px-percent':
+      return `${value}px (${Math.round(value / 16 * 100)}%)`;
+    case 'fixed':
+      return value.toFixed(2);
+    case 'snap':
+      return value === 0 ? 'Off' : value + '%';
+    case 'locale':
+      return value.toLocaleString();
+    default:
+      return String(value);
+  }
+}
+
+document.querySelectorAll('.settings-range input').forEach(input => {
+  const label = input.closest('.settings-range')?.querySelector('span');
+  const preview = document.querySelector('.settings-terminal-preview');
+  const update = () => {
+    if (label) label.textContent = formatSettingsRange(input);
+    if (preview && input.dataset.format === 'px-percent') {
+      preview.style.fontSize = input.value + 'px';
+    }
+    if (preview && input.dataset.format === 'fixed') {
+      preview.style.lineHeight = input.value;
+    }
+  };
+  input.addEventListener('input', update);
+  update();
+});
+
+document.addEventListener('keydown', (event) => {
+  if (event.key !== 'Escape') return;
+  if (!settingsView?.classList.contains('active')) return;
+  hideSettingsView();
+  document.querySelectorAll('.sb-nav-btn').forEach(b => b.classList.remove('active'));
+  primaryNavButton?.classList.add('active');
+});
 </script>
 </body>
 </html>
diff --git a/docs/superpowers/plans/2026-06-12-settings-ui-refactor.md b/docs/superpowers/plans/2026-06-12-settings-ui-refactor.md
new file mode 100644
index 000000000..a8c258184
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-12-settings-ui-refactor.md
@@ -0,0 +1,1250 @@
+# Settings UI Refactor Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Ship the new Settings information architecture: Coding Agents, Panes, Naming, Network, Workspace, Appearance, and Advanced, with concise coding-agent enablement and no user-facing Extensions or global Fresh-agent Settings section.
+
+**Architecture:** Keep the existing settings schema where possible, split the current large settings sections into focused React components, and wire section tabs from `SettingsView`. CLI agent switches continue to update `codingCli.enabledProviders`; Fresh-agent switches use the existing `freshAgent.enabled` gate plus per-session IDs in `extensions.disabled`, and the pane picker is updated to honor those per-session IDs.
+
+**Tech Stack:** React 18, Redux Toolkit, TypeScript, Vitest + Testing Library, Playwright for screenshot inspection, existing Freshell settings APIs.
+
+---
+
+## File Structure
+
+- Modify `src/components/SettingsView.tsx`: replace the old tab list and content switch with `Appearance`, `Coding Agents`, `Panes`, `Workspace`, `Naming`, `Network`, and `Advanced`; remove the visible Manage Extensions card.
+- Create `src/components/settings/CodingAgentsSettings.tsx`: render one compact row per coding-agent surface with monochrome SVG icon, name, and switch.
+- Create `src/components/settings/PanesSettings.tsx`: own pane behavior, tab completion, notifications, and editor settings, including the existing custom editor command conditional input.
+- Create `src/components/settings/NamingSettings.tsx`: replace `AISettings` in the shell with the auto-naming focused label and copy.
+- Create `src/components/settings/NetworkSettings.tsx`: move remote access, firewall repair, device link, and confirmation modal logic out of `SafetySettings`.
+- Create `src/components/settings/RuntimeSettings.tsx`: move auto-kill and default working directory validation into Advanced as "Runtime".
+- Create `src/components/settings/DevicesSettings.tsx`: move known-device rename/delete rows into Advanced.
+- Modify `src/components/settings/AdvancedSettings.tsx`: keep terminal internals/debugging and render Runtime and Devices below it.
+- Modify `src/components/settings/WorkspaceSettings.tsx`: leave only Sidebar and Keyboard shortcuts.
+- Modify `src/components/panes/PanePicker.tsx`: hide Fresh-agent picker entries when their session type is in `extensions.disabled`.
+- Modify `src/components/settings/settings-controls.tsx`: make rows and controls give dropdowns/segmented controls sufficient right-side breathing room and keep switches vertically aligned.
+- Modify tests under `test/unit/client/components/SettingsView*.test.tsx` and `test/unit/client/components/panes/PanePicker.test.tsx`: update expectations to the new tabs and moved sections.
+- Modify `test/e2e/network-setup.test.tsx`: update jsdom e2e navigation from removed `Safety` tab to `Network`.
+- Modify `test/e2e/settings-devices-flow.test.tsx`: update jsdom e2e navigation/assertions now that `Network` and `Devices` live on separate tabs.
+- Modify `test/unit/client/components/component-edge-cases.test.tsx`: update default-working-directory tests from removed `Safety` tab to `Advanced`.
+- Modify `test/e2e-browser/specs/settings.spec.ts`: update Playwright settings smoke coverage from old `AI`/`Safety` tabs to new `Naming`/`Network` tabs.
+- Modify `docs/index.html`: keep the static mock aligned with the shipped UI.
+
+---
+
+### Task 1: Lock the New Settings Shell With Failing Tests
+
+**Files:**
+- Modify: `test/unit/client/components/settings-view-test-utils.tsx`
+- Modify: `test/unit/client/components/SettingsView.core.test.tsx`
+
+- [ ] **Step 1: Update the settings tab helper type**
+
+Replace the old `SettingsTab` union in `test/unit/client/components/settings-view-test-utils.tsx` with:
+
+```ts
+export type SettingsTab =
+  | 'Appearance'
+  | 'Coding Agents'
+  | 'Panes'
+  | 'Workspace'
+  | 'Naming'
+  | 'Network'
+  | 'Advanced'
+```
+
+- [ ] **Step 2: Add failing shell tests**
+
+In `test/unit/client/components/SettingsView.core.test.tsx`, update `renders tab buttons for all sections` so it expects only these labels:
+
+```ts
+it('renders tab buttons for the shipped settings sections', () => {
+  const store = createSettingsViewStore()
+  renderSettingsView(store)
+
+  const tabs = screen.getAllByRole('tab').map((tab) => tab.textContent?.trim())
+  expect(tabs).toEqual([
+    'Appearance',
+    'Coding Agents',
+    'Panes',
+    'Workspace',
+    'Naming',
+    'Network',
+    'Advanced',
+  ])
+  expect(screen.queryByRole('button', { name: /manage extensions/i })).not.toBeInTheDocument()
+})
+```
+
+Update old tab-switching tests so they click and assert the new section homes:
+
+```ts
+it('switches to Coding Agents tab on click', () => {
+  const store = createSettingsViewStore()
+  renderSettingsView(store)
+
+  fireEvent.click(screen.getByRole('tab', { name: 'Coding Agents' }))
+
+  expect(screen.getByRole('heading', { name: 'Coding Agents' })).toBeInTheDocument()
+})
+
+it('switches to Panes tab on click', () => {
+  const store = createSettingsViewStore()
+  renderSettingsView(store)
+
+  fireEvent.click(screen.getByRole('tab', { name: 'Panes' }))
+
+  expect(screen.getByRole('heading', { name: 'Pane behavior' })).toBeInTheDocument()
+  expect(screen.getByText('Editor pane')).toBeInTheDocument()
+})
+
+it('switches to Naming tab on click', () => {
+  const store = createSettingsViewStore()
+  renderSettingsView(store)
+
+  fireEvent.click(screen.getByRole('tab', { name: 'Naming' }))
+
+  expect(screen.getByRole('heading', { name: 'Naming' })).toBeInTheDocument()
+  expect(screen.queryByRole('heading', { name: 'AI' })).not.toBeInTheDocument()
+})
+
+it('switches to Network tab on click', () => {
+  const store = createSettingsViewStore()
+  renderSettingsView(store)
+
+  fireEvent.click(screen.getByRole('tab', { name: 'Network' }))
+
+  expect(screen.getByRole('heading', { name: 'Network' })).toBeInTheDocument()
+  expect(screen.getByText(/remote access/i)).toBeInTheDocument()
+})
+
+it('switches to Advanced tab on click', () => {
+  const store = createSettingsViewStore()
+  renderSettingsView(store)
+
+  fireEvent.click(screen.getByRole('tab', { name: 'Advanced' }))
+
+  expect(screen.getByRole('heading', { name: 'Advanced' })).toBeInTheDocument()
+  expect(screen.queryByRole('heading', { name: 'Safety' })).not.toBeInTheDocument()
+})
+```
+
+Leave the existing Workspace tab switch test focused on the Sidebar and terminal preview removal during Task 1. Do not assert `Notifications` absence until Task 4, because the Notifications section still lives in Workspace until `PanesSettings` is implemented.
+
+```ts
+it('switches to Workspace tab on click', () => {
+  const store = createSettingsViewStore()
+  renderSettingsView(store)
+
+  fireEvent.click(screen.getByRole('tab', { name: 'Workspace' }))
+
+  expect(screen.getByRole('heading', { name: 'Sidebar' })).toBeInTheDocument()
+  expect(screen.getByText('Session list and navigation')).toBeInTheDocument()
+  expect(screen.queryByTestId('terminal-preview')).not.toBeInTheDocument()
+})
+```
+
+Leave the existing current-value test that reads auto-kill on `Safety` until Task 5 moves Runtime into Advanced. Do not change it in Task 1, because Advanced does not contain Runtime until later.
+
+```ts
+it('displays safety settings values', () => {
+  const store = createSettingsViewStore({ settings: { safety: { autoKillIdleMinutes: 120 } } })
+  renderSettingsView(store)
+  switchSettingsTab('Safety')
+
+  expect(screen.getByText('120')).toBeInTheDocument()
+})
+```
+
+- [ ] **Step 3: Run the failing shell tests**
+
+Run:
+
+```bash
+npm run test:vitest -- test/unit/client/components/SettingsView.core.test.tsx --run
+```
+
+Expected: fails because the production `SettingsView` still exposes the old tab labels and Manage Extensions card.
+
+---
+
+### Task 2: Implement the Settings Shell and Shared Row Polish
+
+**Files:**
+- Modify: `src/components/SettingsView.tsx`
+- Modify: `src/components/settings/settings-controls.tsx`
+- Create: `src/components/settings/CodingAgentsSettings.tsx`
+- Create: `src/components/settings/PanesSettings.tsx`
+- Create: `src/components/settings/NamingSettings.tsx`
+- Create: `src/components/settings/NetworkSettings.tsx`
+
+- [ ] **Step 1: Add temporary section stubs before rewiring**
+
+Create `src/components/settings/CodingAgentsSettings.tsx`:
+
+```tsx
+import type { SettingsSectionProps } from './settings-types'
+import { SettingsSection } from './settings-controls'
+
+export default function CodingAgentsSettings(_props: SettingsSectionProps) {
+  return <SettingsSection id="coding-agents" title="Coding Agents">Coming soon</SettingsSection>
+}
+```
+
+Create `src/components/settings/PanesSettings.tsx`:
+
+```tsx
+import type { SettingsSectionProps } from './settings-types'
+import { SettingsSection } from './settings-controls'
+
+export default function PanesSettings(_props: SettingsSectionProps) {
+  return (
+    <>
+      <SettingsSection id="panes" title="Pane behavior">Coming soon</SettingsSection>
+      <SettingsSection title="Editor pane">Coming soon</SettingsSection>
+    </>
+  )
+}
+```
+
+Create `src/components/settings/NamingSettings.tsx`:
+
+```tsx
+import type { SettingsSectionProps } from './settings-types'
+import { SettingsSection } from './settings-controls'
+
+export default function NamingSettings(_props: SettingsSectionProps) {
+  return <SettingsSection id="naming" title="Naming">Coming soon</SettingsSection>
+}
+```
+
+Create `src/components/settings/NetworkSettings.tsx`:
+
+```tsx
+import type { AppView } from '@/components/Sidebar'
+import type { SettingsSectionProps } from './settings-types'
+import { SettingsSection } from './settings-controls'
+
+export interface NetworkSettingsProps extends SettingsSectionProps {
+  onNavigate?: (view: AppView) => void
+  onFirewallTerminal?: (cmd: { tabId: string; command: string }) => void
+  onSharePanel?: () => void
+}
+
+export default function NetworkSettings(_props: NetworkSettingsProps) {
+  return <SettingsSection id="network" title="Network">Remote access</SettingsSection>
+}
+```
+
+These stubs are intentionally short-lived. They prevent Vite import-resolution failures while later tasks fill each section with real content.
+
+- [ ] **Step 2: Replace the section list and imports in `SettingsView`**
+
+Use these imports:
+
+```ts
+import AppearanceSettings from '@/components/settings/AppearanceSettings'
+import WorkspaceSettings from '@/components/settings/WorkspaceSettings'
+import AdvancedSettings from '@/components/settings/AdvancedSettings'
+import CodingAgentsSettings from '@/components/settings/CodingAgentsSettings'
+import PanesSettings from '@/components/settings/PanesSettings'
+import NamingSettings from '@/components/settings/NamingSettings'
+import NetworkSettings from '@/components/settings/NetworkSettings'
+```
+
+Remove these imports when deleting the Manage Extensions card:
+
+```ts
+import { Puzzle, ChevronRight } from 'lucide-react'
+import { useEnsureExtensionsRegistry } from '@/hooks/useEnsureExtensionsRegistry'
+```
+
+Also remove the now-dead hook call from the component body:
+
+```ts
+useEnsureExtensionsRegistry()
+```
+
+Use this section list:
+
+```ts
+const sections = [
+  { id: 'appearance', label: 'Appearance' },
+  { id: 'coding-agents', label: 'Coding Agents' },
+  { id: 'panes', label: 'Panes' },
+  { id: 'workspace', label: 'Workspace' },
+  { id: 'naming', label: 'Naming' },
+  { id: 'network', label: 'Network' },
+  { id: 'advanced', label: 'Advanced' },
+] as const
+```
+
+Remove the visible Manage Extensions button/card from `SettingsView`.
+
+- [ ] **Step 3: Replace the tab panel switch**
+
+Render the new panels:
+
+```tsx
+<div role="tabpanel" aria-label={`${activeSection} settings`}>
+  {activeSection === 'appearance' && <AppearanceSettings {...sectionProps} />}
+  {activeSection === 'coding-agents' && <CodingAgentsSettings {...sectionProps} />}
+  {activeSection === 'panes' && <PanesSettings {...sectionProps} />}
+  {activeSection === 'workspace' && <WorkspaceSettings {...sectionProps} />}
+  {activeSection === 'naming' && <NamingSettings {...sectionProps} />}
+  {activeSection === 'network' && (
+    <NetworkSettings
+      {...sectionProps}
+      onNavigate={onNavigate}
+      onFirewallTerminal={onFirewallTerminal}
+      onSharePanel={onSharePanel}
+    />
+  )}
+  {activeSection === 'advanced' && <AdvancedSettings {...sectionProps} />}
+</div>
+```
+
+- [ ] **Step 4: Polish shared controls**
+
+In `SettingsRow`, keep rows stable and give controls right padding:
+
+```tsx
+<div className="flex w-full flex-col items-start gap-2 md:flex-row md:items-center md:justify-between md:gap-6">
+  {description ? (
+    <div className="min-w-0 flex flex-col gap-0.5">
+      <span className="text-sm text-muted-foreground">{label}</span>
+      <span className="text-xs text-muted-foreground/60">{description}</span>
+    </div>
+  ) : (
+    <span className="min-w-0 text-sm text-muted-foreground">{label}</span>
+  )}
+  <div className="w-full pr-1 md:w-auto md:pr-2">{children}</div>
+</div>
+```
+
+In `Toggle`, add `inline-flex shrink-0 items-center` to the button class so switch thumbs align vertically with row text:
+
+```ts
+'relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors'
+```
+
+In `SegmentedControl`, add a minimum width and keep wrapping stable:
+
+```ts
+'flex w-full min-w-0 flex-wrap rounded-md bg-muted p-0.5 md:w-auto md:min-w-[12rem]'
+```
+
+- [ ] **Step 5: Run shell tests again**
+
+Run:
+
+```bash
+npm run test:vitest -- test/unit/client/components/SettingsView.core.test.tsx --run
+```
+
+Expected: shell tests pass because all imported section components now exist and render the headings the shell tests need.
+
+---
+
+### Task 3: Add Coding Agents Settings and Pane Picker Filtering
+
+**Files:**
+- Modify: `src/components/settings/CodingAgentsSettings.tsx`
+- Modify: `src/components/panes/PanePicker.tsx`
+- Modify: `test/unit/client/components/SettingsView.agent-chat.test.tsx`
+- Modify: `test/unit/client/components/panes/PanePicker.test.tsx`
+
+- [ ] **Step 1: Replace Fresh-agent settings tests with concise Coding Agents tests**
+
+Replace `SettingsView.agent-chat.test.tsx` with tests that assert:
+
+```ts
+describe('SettingsView coding agents settings', () => {
+  it('renders compact rows for CLI and Fresh coding agents', () => {
+    const store = createSettingsViewStore()
+    renderSettingsView(store)
+    switchSettingsTab('Coding Agents')
+
+    expect(screen.getByRole('heading', { name: 'Coding Agents' })).toBeInTheDocument()
+    for (const name of [
+      'Claude CLI',
+      'Freshclaude',
+      'Codex CLI',
+      'Freshcodex',
+      'OpenCode',
+      'Freshopencode',
+      'Gemini',
+      'Kimi',
+    ]) {
+      expect(screen.getByRole('switch', { name })).toBeInTheDocument()
+    }
+    expect(screen.queryByText('Show thinking')).not.toBeInTheDocument()
+    expect(screen.queryByText('Show tools')).not.toBeInTheDocument()
+    expect(screen.queryByText('Show timecodes & model')).not.toBeInTheDocument()
+    expect(screen.queryByText('Font size')).not.toBeInTheDocument()
+  })
+
+  it('toggles CLI agents through codingCli.enabledProviders', async () => {
+    const store = createSettingsViewStore({
+      settings: { codingCli: { enabledProviders: ['claude', 'codex'] } },
+    })
+    renderSettingsView(store)
+    switchSettingsTab('Coding Agents')
+
+    fireEvent.click(screen.getByRole('switch', { name: 'Codex CLI' }))
+
+    expect(store.getState().settings.settings.codingCli.enabledProviders).toEqual(['claude'])
+    await act(async () => {
+      await Promise.resolve()
+    })
+    expect(api.patch).toHaveBeenCalledWith('/api/settings', {
+      codingCli: { enabledProviders: ['claude'] },
+    })
+  })
+
+  it('toggles one Fresh agent independently through extensions.disabled', async () => {
+    const store = createSettingsViewStore({
+      settings: {
+        freshAgent: { enabled: true },
+        agentChat: { enabled: true },
+        extensions: { disabled: ['freshcodex'] },
+      },
+    })
+    renderSettingsView(store)
+    switchSettingsTab('Coding Agents')
+
+    expect(screen.getByRole('switch', { name: 'Freshcodex' })).not.toBeChecked()
+    fireEvent.click(screen.getByRole('switch', { name: 'Freshcodex' }))
+
+    expect(store.getState().settings.settings.extensions.disabled).not.toContain('freshcodex')
+    await act(async () => {
+      await Promise.resolve()
+    })
+    expect(api.patch).toHaveBeenCalledWith('/api/settings', {
+      freshAgent: { enabled: true },
+      agentChat: { enabled: true },
+      extensions: { disabled: [] },
+    })
+  })
+
+  it('turns on only the selected Fresh agent from the default all-off state', async () => {
+    const store = createSettingsViewStore()
+    renderSettingsView(store)
+    switchSettingsTab('Coding Agents')
+
+    fireEvent.click(screen.getByRole('switch', { name: 'Freshcodex' }))
+
+    expect(store.getState().settings.settings.freshAgent.enabled).toBe(true)
+    expect(store.getState().settings.settings.extensions.disabled).toEqual(
+      expect.arrayContaining(['freshclaude', 'freshopencode']),
+    )
+    expect(store.getState().settings.settings.extensions.disabled).not.toContain('freshcodex')
+    await act(async () => {
+      await Promise.resolve()
+    })
+    expect(api.patch).toHaveBeenCalledWith('/api/settings', {
+      freshAgent: { enabled: true },
+      agentChat: { enabled: true },
+      extensions: { disabled: ['freshclaude', 'freshopencode'] },
+    })
+  })
+})
+```
+
+- [ ] **Step 2: Implement `CodingAgentsSettings`**
+
+Create a compact component with this behavior:
+
+```tsx
+import { useMemo } from 'react'
+import { ClaudeIcon, CodexIcon, FreshclaudeIcon, GeminiIcon, KimiIcon, OpencodeIcon } from '@/components/icons/provider-icons'
+import type { CodingCliProviderName } from '@/lib/coding-cli-types'
+import type { SettingsSectionProps } from './settings-types'
+import { SettingsSection, Toggle } from './settings-controls'
+
+type AgentRow =
+  | { kind: 'cli'; id: CodingCliProviderName; label: string; icon: React.ComponentType<{ className?: string }> }
+  | { kind: 'fresh'; id: 'freshclaude' | 'freshcodex' | 'freshopencode'; label: string; icon: React.ComponentType<{ className?: string }> }
+
+const AGENT_ROWS: AgentRow[] = [
+  { kind: 'cli', id: 'claude', label: 'Claude CLI', icon: ClaudeIcon },
+  { kind: 'fresh', id: 'freshclaude', label: 'Freshclaude', icon: FreshclaudeIcon },
+  { kind: 'cli', id: 'codex', label: 'Codex CLI', icon: CodexIcon },
+  { kind: 'fresh', id: 'freshcodex', label: 'Freshcodex', icon: CodexIcon },
+  { kind: 'cli', id: 'opencode', label: 'OpenCode', icon: OpencodeIcon },
+  { kind: 'fresh', id: 'freshopencode', label: 'Freshopencode', icon: OpencodeIcon },
+  { kind: 'cli', id: 'gemini', label: 'Gemini', icon: GeminiIcon },
+  { kind: 'cli', id: 'kimi', label: 'Kimi', icon: KimiIcon },
+]
+
+export default function CodingAgentsSettings({ settings, applyServerSetting }: SettingsSectionProps) {
+  const enabledProviders = settings.codingCli?.enabledProviders ?? []
+  const disabledItems = settings.extensions?.disabled ?? []
+  const freshEnabled = settings.freshAgent?.enabled ?? settings.agentChat?.enabled ?? false
+  const freshIds = useMemo(
+    () => AGENT_ROWS.filter((row): row is Extract<AgentRow, { kind: 'fresh' }> => row.kind === 'fresh').map((row) => row.id),
+    [],
+  )
+
+  const setCliEnabled = (id: CodingCliProviderName, enabled: boolean) => {
+    const next = enabled
+      ? Array.from(new Set([...enabledProviders, id]))
+      : enabledProviders.filter((provider) => provider !== id)
+    applyServerSetting({ codingCli: { enabledProviders: next } })
+  }
+
+  const setFreshEnabled = (id: Extract<AgentRow, { kind: 'fresh' }>['id'], enabled: boolean) => {
+    const disabledSet = new Set(disabledItems)
+    if (enabled && !freshEnabled) {
+      for (const freshId of freshIds) {
+        if (freshId !== id) disabledSet.add(freshId)
+      }
+    }
+    if (enabled) {
+      disabledSet.delete(id)
+    } else {
+      disabledSet.add(id)
+    }
+    const nextDisabled = Array.from(disabledSet)
+    const anyFreshEnabled = freshIds.some((freshId) => !disabledSet.has(freshId))
+    applyServerSetting({
+      freshAgent: { enabled: anyFreshEnabled },
+      agentChat: { enabled: anyFreshEnabled },
+      extensions: { disabled: nextDisabled },
+    })
+  }
+
+  return (
+    <SettingsSection id="coding-agents" title="Coding Agents">
+      <div className="space-y-2">
+        {AGENT_ROWS.map((row) => {
+          const Icon = row.icon
+          const checked = row.kind === 'cli'
+            ? enabledProviders.includes(row.id)
+            : freshEnabled && !disabledItems.includes(row.id)
+          return (
+            <div key={`${row.kind}-${row.id}`} className="flex min-h-12 items-center justify-between gap-4 rounded-md border border-border/30 px-3 py-2">
+              <div className="flex min-w-0 items-center gap-3">
+                <Icon className="h-5 w-5 shrink-0 text-foreground" />
+                <span className="truncate text-sm font-medium">{row.label}</span>
+              </div>
+              <Toggle
+                checked={checked}
+                aria-label={row.label}
+                onChange={(next) => {
+                  if (row.kind === 'cli') setCliEnabled(row.id, next)
+                  else setFreshEnabled(row.id, next)
+                }}
+              />
+            </div>
+          )
+        })}
+      </div>
+    </SettingsSection>
+  )
+}
+```
+
+- [ ] **Step 3: Update PanePicker Fresh filtering**
+
+In `PanePicker`, add a helper:
+
+```ts
+function isFreshAgentSessionDisabled(sessionType: string, disabledItems: readonly string[]): boolean {
+  return disabledItems.includes(sessionType)
+}
+```
+
+Apply it to both Fresh-agent sources:
+
+```ts
+.filter((config) => !isFreshAgentSessionDisabled(config.name, disabledExtensions))
+```
+
+and:
+
+```ts
+.filter((entry) => !isFreshAgentSessionDisabled(entry.sessionType, disabledExtensions))
+```
+
+Keep the existing runtime provider filter:
+
+```ts
+.filter((entry) => availableClis[entry.runtimeProvider] && enabledProviders.includes(entry.runtimeProvider) && !disabledExtensions.includes(entry.runtimeProvider))
+```
+
+- [ ] **Step 4: Add PanePicker regression tests**
+
+Add tests to `PanePicker.test.tsx` that preload `extensions.disabled` through the test store and verify:
+
+```ts
+it('hides a Fresh-agent picker entry disabled by session type without hiding its CLI', () => {
+  renderPicker({
+    availableClis: { claude: true, codex: true },
+    enabledProviders: ['claude', 'codex'],
+    extensions: defaultCliExtensions,
+    freshClientsEnabled: true,
+    disabledExtensions: ['freshcodex'],
+  })
+
+  expect(screen.getByRole('button', { name: 'Freshclaude' })).toBeInTheDocument()
+  expect(screen.getByRole('button', { name: 'Codex CLI' })).toBeInTheDocument()
+  expect(screen.queryByRole('button', { name: 'Freshcodex' })).not.toBeInTheDocument()
+})
+```
+
+If `createStore` does not yet accept `disabledExtensions`, add it to the helper and preload:
+
+```ts
+settings: {
+  settings: {
+    ...
+    extensions: { disabled: overrides?.disabledExtensions ?? [] },
+  },
+  loaded: true,
+  lastSavedAt: null,
+},
+```
+
+- [ ] **Step 5: Run focused tests**
+
+Run:
+
+```bash
+npm run test:vitest -- test/unit/client/components/SettingsView.agent-chat.test.tsx test/unit/client/components/panes/PanePicker.test.tsx --run
+```
+
+Expected: pass.
+
+---
+
+### Task 4: Move Panes, Editor, Notifications, Workspace, and Naming
+
+**Files:**
+- Modify: `src/components/settings/PanesSettings.tsx`
+- Modify: `src/components/settings/NamingSettings.tsx`
+- Modify: `src/components/settings/WorkspaceSettings.tsx`
+- Delete: `src/components/settings/AISettings.tsx`
+- Create: `test/unit/client/components/SettingsView.naming.test.tsx`
+- Modify: `test/unit/client/components/SettingsView.panes.test.tsx`
+- Modify: `test/unit/client/components/SettingsView.editor.test.tsx`
+- Modify: `test/unit/client/components/SettingsView.behavior.test.tsx`
+
+- [ ] **Step 1: Create `PanesSettings`**
+
+Move the current `WorkspaceSettings` Panes section, Notifications section, and Editor section into `PanesSettings`. The component must accept `SettingsSectionProps`, keep the existing `Default new pane`, `Snap distance`, `Icons on tabs`, `Multi-row tabs`, `Tab completion indicator`, `Dismiss attention on`, `Sound on completion`, `External editor`, and conditional `Custom command` rows, and retain the existing `applyLocalSetting`, `applyServerSetting`, and `scheduleServerTextSettingSave` calls.
+
+The headings should be:
+
+```tsx
+<SettingsSection id="panes" title="Pane behavior">
+...
+<SettingsSection title="Editor pane">
+```
+
+- [ ] **Step 2: Trim `WorkspaceSettings`**
+
+Remove Panes, Notifications, Fresh agent, and Editor sections from `WorkspaceSettings`. Leave only:
+
+```tsx
+<SettingsSection id="workspace" title="Sidebar" description="Session list and navigation">
+...
+</SettingsSection>
+
+<SettingsSection title="Keyboard shortcuts" description="Navigation and terminal">
+...
+</SettingsSection>
+```
+
+Remove now-unused imports from `WorkspaceSettings`:
+
+```ts
+SessionOpenMode
+TabAttentionStyle
+AttentionDismiss
+FRESH_AGENT_FONT_SCALE_OPTIONS
+FRESH_AGENT_FONT_SCALE_DEFAULT
+SegmentedControl
+RangeSlider
+```
+
+- [ ] **Step 3: Create `NamingSettings`**
+
+Create a replacement for `AISettings` with naming-focused labels:
+
+```tsx
+import type { SettingsSectionProps } from './settings-types'
+import { SettingsSection, SettingsRow, Toggle } from './settings-controls'
+
+export default function NamingSettings({
+  settings,
+  applyServerSetting,
+  scheduleServerTextSettingSave,
+}: SettingsSectionProps) {
+  return (
+    <SettingsSection id="naming" title="Naming" description="Automatic session titles">
+      <SettingsRow label="Gemini API key" description="Used for automatic session titles.">
+        <input
+          type="password"
+          value={settings.ai?.geminiApiKey || ''}
+          placeholder="Enter Gemini API key"
+          onChange={(e) => {
+            const key = e.target.value || undefined
+            scheduleServerTextSettingSave('ai.geminiApiKey', { ai: { geminiApiKey: key } })
+          }}
+          className="h-10 w-full rounded-md border-0 bg-muted px-3 text-sm focus:outline-none focus:ring-1 focus:ring-border md:h-8"
+        />
+      </SettingsRow>
+      <SettingsRow label="Auto-generate session titles">
+        <Toggle
+          checked={settings.sidebar?.autoGenerateTitles ?? true}
+          onChange={(checked) => {
+            applyServerSetting({ sidebar: { autoGenerateTitles: checked } })
+          }}
+          aria-label="Auto-generate session titles"
+        />
+      </SettingsRow>
+      <SettingsRow label="Naming prompt" description="Instructions sent to Gemini for generated session titles.">
+        <textarea
+          value={settings.ai?.titlePrompt || ''}
+          placeholder={'Generate a short title (3-8 words) for a coding assistant conversation.\nThe title should describe the task or topic, not the tool being used.\nReturn ONLY the title text. No quotes, no markdown, no explanation.'}
+          onChange={(e) => {
+            const prompt = e.target.value || undefined
+            scheduleServerTextSettingSave('ai.titlePrompt', { ai: { titlePrompt: prompt } })
+          }}
+          rows={4}
+          className="w-full rounded-md border-0 bg-muted px-3 py-2 font-mono text-sm focus:outline-none focus:ring-1 focus:ring-border"
+        />
+      </SettingsRow>
+    </SettingsSection>
+  )
+}
+```
+
+- [ ] **Step 4: Update tests to use new homes**
+
+Update every `switchSettingsTab('Workspace')` that is testing pane/editor/notification behavior to `switchSettingsTab('Panes')`.
+
+Update `SettingsView.core.test.tsx`'s Workspace tab switch test after moving Notifications:
+
+```ts
+expect(screen.getByText('Keyboard shortcuts')).toBeInTheDocument()
+expect(screen.queryByText('Notifications')).not.toBeInTheDocument()
+```
+
+Update `SettingsView.panes.test.tsx`'s section-rendering assertion so it proves the section heading, not just the tab button:
+
+```ts
+expect(screen.getByRole('heading', { name: 'Pane behavior' })).toBeInTheDocument()
+```
+
+Update every `switchSettingsTab('Safety')` that is testing default working directory or auto-kill to `switchSettingsTab('Advanced')`.
+
+Update naming-related tests to use `switchSettingsTab('Naming')` and assert `Naming prompt` instead of `Title prompt`.
+
+Create `test/unit/client/components/SettingsView.naming.test.tsx` with direct behavior coverage:
+
+```ts
+import { describe, it, expect, vi } from 'vitest'
+import { act, fireEvent, screen } from '@testing-library/react'
+import {
+  createSettingsViewStore,
+  installSettingsViewHooks,
+  renderSettingsView,
+  switchSettingsTab,
+} from './settings-view-test-utils'
+
+vi.mock('@/lib/api', () => ({
+  api: {
+    patch: vi.fn().mockResolvedValue({}),
+    get: vi.fn().mockResolvedValue({}),
+    post: vi.fn().mockResolvedValue({}),
+    put: vi.fn().mockResolvedValue({}),
+    delete: vi.fn().mockResolvedValue({}),
+  },
+}))
+
+import { api } from '@/lib/api'
+
+installSettingsViewHooks({ fakeTimers: true, mockFonts: true })
+
+describe('SettingsView naming settings', () => {
+  it('renders naming controls without the old AI heading', () => {
+    const store = createSettingsViewStore()
+    renderSettingsView(store)
+    switchSettingsTab('Naming')
+
+    expect(screen.getByRole('heading', { name: 'Naming' })).toBeInTheDocument()
+    expect(screen.getByText('Gemini API key')).toBeInTheDocument()
+    expect(screen.getByText('Auto-generate session titles')).toBeInTheDocument()
+    expect(screen.getByText('Naming prompt')).toBeInTheDocument()
+    expect(screen.queryByRole('heading', { name: 'AI' })).not.toBeInTheDocument()
+  })
+
+  it('debounces Gemini API key saves', async () => {
+    const store = createSettingsViewStore()
+    renderSettingsView(store)
+    switchSettingsTab('Naming')
+
+    fireEvent.change(screen.getByPlaceholderText('Enter Gemini API key'), {
+      target: { value: 'gemini-key' },
+    })
+
+    expect(store.getState().settings.settings.ai.geminiApiKey).toBe('gemini-key')
+    await act(async () => {
+      vi.advanceTimersByTime(500)
+    })
+    expect(api.patch).toHaveBeenCalledWith('/api/settings', {
+      ai: { geminiApiKey: 'gemini-key' },
+    })
+  })
+
+  it('toggles automatic session titles through server settings', async () => {
+    const store = createSettingsViewStore({
+      settings: { sidebar: { autoGenerateTitles: true } },
+    })
+    renderSettingsView(store)
+    switchSettingsTab('Naming')
+
+    fireEvent.click(screen.getByRole('switch', { name: 'Auto-generate session titles' }))
+
+    expect(store.getState().settings.settings.sidebar.autoGenerateTitles).toBe(false)
+    await act(async () => {
+      await Promise.resolve()
+    })
+    expect(api.patch).toHaveBeenCalledWith('/api/settings', {
+      sidebar: { autoGenerateTitles: false },
+    })
+  })
+
+  it('debounces naming prompt saves', async () => {
+    const store = createSettingsViewStore()
+    renderSettingsView(store)
+    switchSettingsTab('Naming')
+
+    fireEvent.change(screen.getByPlaceholderText(/Generate a short title/), {
+      target: { value: 'Name this session tersely.' },
+    })
+
+    expect(store.getState().settings.settings.ai.titlePrompt).toBe('Name this session tersely.')
+    await act(async () => {
+      vi.advanceTimersByTime(500)
+    })
+    expect(api.patch).toHaveBeenCalledWith('/api/settings', {
+      ai: { titlePrompt: 'Name this session tersely.' },
+    })
+  })
+})
+```
+
+- [ ] **Step 5: Run focused tests**
+
+Run:
+
+```bash
+npm run test:vitest -- test/unit/client/components/SettingsView.panes.test.tsx test/unit/client/components/SettingsView.editor.test.tsx test/unit/client/components/SettingsView.behavior.test.tsx test/unit/client/components/SettingsView.naming.test.tsx --run
+```
+
+Expected: pass.
+
+---
+
+### Task 5: Split Network, Runtime, Devices, and Advanced
+
+**Files:**
+- Modify: `src/components/settings/NetworkSettings.tsx`
+- Create: `src/components/settings/RuntimeSettings.tsx`
+- Create: `src/components/settings/DevicesSettings.tsx`
+- Modify: `src/components/settings/AdvancedSettings.tsx`
+- Delete: `src/components/settings/SafetySettings.tsx`
+- Modify: `test/unit/client/components/SettingsView.network-access.test.tsx`
+- Modify: `test/unit/client/components/SettingsView.terminal-advanced.test.tsx`
+- Modify: `test/unit/client/components/SettingsView.behavior.test.tsx`
+- Modify: `test/e2e/network-setup.test.tsx`
+- Modify: `test/e2e/settings-devices-flow.test.tsx`
+- Modify: `test/unit/client/components/component-edge-cases.test.tsx`
+- Modify: `test/e2e-browser/specs/settings.spec.ts`
+
+- [ ] **Step 1: Create `NetworkSettings`**
+
+Move the network access logic from `SafetySettings` into `NetworkSettings`. Keep:
+
+```ts
+SETTINGS_FIREWALL_POLL_INTERVAL_MS
+SETTINGS_FIREWALL_POLL_MAX_ATTEMPTS
+getFirewallDescription
+isFirewallRefreshInProgress
+shouldShowFirewallFix
+getErrorMessage
+PendingConfirmation
+FirewallState
+```
+
+Keep these UI rows under:
+
+```tsx
+<SettingsSection id="network" title="Network" description="Remote access for this Freshell server">
+```
+
+Rows and behavior must remain:
+- `Remote access` switch.
+- Conditional `Firewall` row with `Fix` button.
+- Conditional `Device access` row with `Get link`.
+- Dev-mode restart warning.
+- Admin approval `ConfirmModal`.
+
+- [ ] **Step 2: Create `RuntimeSettings`**
+
+Move auto-kill and default working directory validation from `SafetySettings` into:
+
+```tsx
+<SettingsSection title="Runtime" description="Process lifetime and launch defaults">
+```
+
+Preserve the debounce and validation behavior:
+
+```ts
+api.post<{ valid: boolean }>('/api/files/validate-dir', { path: trimmed })
+```
+
+Preserve save calls:
+
+```ts
+applyServerSetting({ safety: { autoKillIdleMinutes: v } })
+applyServerSetting({ defaultCwd: nextValue })
+```
+
+- [ ] **Step 3: Create `DevicesSettings`**
+
+Move known-device alias/delete logic into:
+
+```tsx
+<SettingsSection title="Devices" description="Rename devices for the Tabs workspace. Remote device aliases apply only on this machine.">
+```
+
+Preserve `buildKnownDevices`, `persistOwnDeviceLabel`, `persistDeviceAliasesForDevices`, `dismissDeviceIds`, and the `Save`/`Delete` button behavior.
+
+- [ ] **Step 4: Update `AdvancedSettings`**
+
+Render Advanced as a fragment with three settings groups:
+
+```tsx
+<>
+  <SettingsSection id="advanced" title="Advanced" description="Terminal internals and debugging">
+    ...
+  </SettingsSection>
+  <RuntimeSettings settings={settings} applyLocalSetting={applyLocalSetting} applyServerSetting={applyServerSetting} scheduleServerTextSettingSave={scheduleServerTextSettingSave} />
+  <DevicesSettings settings={settings} applyLocalSetting={applyLocalSetting} applyServerSetting={applyServerSetting} scheduleServerTextSettingSave={scheduleServerTextSettingSave} />
+</>
+```
+
+Add `scheduleServerTextSettingSave` to the destructured props even though Runtime can use direct `applyServerSetting`; this keeps prop forwarding simple and type-consistent.
+
+- [ ] **Step 5: Update tests to use new tabs**
+
+In `SettingsView.network-access.test.tsx`, replace every:
+
+```ts
+switchSettingsTab('Safety')
+```
+
+with:
+
+```ts
+switchSettingsTab('Network')
+```
+
+In behavior tests for default cwd, auto-kill, and devices, switch to:
+
+```ts
+switchSettingsTab('Advanced')
+```
+
+Update `SettingsView.core.test.tsx`'s current-value test after moving Runtime:
+
+```ts
+it('displays runtime settings values', () => {
+  const store = createSettingsViewStore({ settings: { safety: { autoKillIdleMinutes: 120 } } })
+  renderSettingsView(store)
+  switchSettingsTab('Advanced')
+
+  expect(screen.getByText('120')).toBeInTheDocument()
+})
+```
+
+In `test/e2e/network-setup.test.tsx`, replace the helper that opens Safety:
+
+```ts
+fireEvent.click(screen.getByRole('tab', { name: /^network$/i }))
+```
+
+Then keep the remote-access assertions on the Network tab.
+
+In `test/e2e/settings-devices-flow.test.tsx`, split the old combined Safety assertions into two navigations and keep device textbox assertions multi-match safe:
+
+```ts
+fireEvent.click(screen.getByRole('tab', { name: /^network$/i }))
+expect(screen.getByRole('heading', { name: /^network$/i })).toBeInTheDocument()
+expect(screen.getByRole('switch', { name: /remote access/i })).toBeInTheDocument()
+
+fireEvent.click(screen.getByRole('tab', { name: /^advanced$/i }))
+expect(screen.getByRole('heading', { name: /^devices$/i })).toBeInTheDocument()
+expect(screen.getAllByLabelText(/device name/i).length).toBeGreaterThan(0)
+```
+
+In `test/unit/client/components/component-edge-cases.test.tsx`, replace every:
+
+```ts
+fireEvent.click(screen.getByRole('tab', { name: 'Safety' }))
+```
+
+with:
+
+```ts
+fireEvent.click(screen.getByRole('tab', { name: 'Advanced' }))
+```
+
+and keep the default-working-directory assertions unchanged.
+
+In `test/e2e-browser/specs/settings.spec.ts`, update the tab smoke assertions:
+
+```ts
+await expect(page.getByRole('tab', { name: /^Naming$/i })).toBeVisible()
+await expect(page.getByRole('tab', { name: /^Network$/i })).toBeVisible()
+await expect(page.getByRole('tab', { name: /^Safety$/i })).toHaveCount(0)
+await expect(page.getByRole('tab', { name: /^AI$/i })).toHaveCount(0)
+```
+
+Assert old labels are gone from the shell:
+
+```ts
+expect(screen.queryByRole('tab', { name: 'Safety' })).not.toBeInTheDocument()
+expect(screen.queryByRole('heading', { name: 'Safety' })).not.toBeInTheDocument()
+```
+
+- [ ] **Step 6: Run focused tests**
+
+Run:
+
+```bash
+npm run test:vitest -- test/unit/client/components/SettingsView.network-access.test.tsx test/unit/client/components/SettingsView.terminal-advanced.test.tsx test/unit/client/components/SettingsView.behavior.test.tsx --run
+```
+
+Expected: pass.
+
+- [ ] **Step 7: Run jsdom e2e settings consumers**
+
+Run:
+
+```bash
+npm run test:vitest -- test/e2e/network-setup.test.tsx test/e2e/settings-devices-flow.test.tsx --run
+```
+
+Expected: pass.
+
+- [ ] **Step 8: Run the additional settings edge-case unit file**
+
+Run:
+
+```bash
+npm run test:vitest -- test/unit/client/components/component-edge-cases.test.tsx --run
+```
+
+Expected: pass.
+
+---
+
+### Task 6: Keep Static Prototype Aligned
+
+**Files:**
+- Modify: `docs/index.html`
+
+- [ ] **Step 1: Verify the static mock still reflects production**
+
+Check that the static mock has the same tabs:
+
+```text
+Appearance
+Coding Agents
+Panes
+Workspace
+Naming
+Network
+Advanced
+```
+
+Check Coding Agents rows:
+
+```text
+Claude CLI
+Freshclaude
+Codex CLI
+Freshcodex
+OpenCode
+Freshopencode
+Gemini
+Kimi
+```
+
+Check there is no user-facing Settings text for:
+
+```text
+Extensions
+Manage Extensions
+Fresh agent
+Safety
+AI
+Built-in panes
+```
+
+- [ ] **Step 2: Update any drift**
+
+If the static mock differs from the production settings component names or grouping, update `docs/index.html` so it matches.
+
+- [ ] **Step 3: Run static checks**
+
+Run:
+
+```bash
+git diff --check
+```
+
+Expected: no whitespace errors.
+
+---
+
+### Task 7: Verification, Test Server, and Screenshot Inspection
+
+**Files:**
+- No source edits expected unless verification catches issues.
+
+- [ ] **Step 1: Run focused unit coverage**
+
+Run:
+
+```bash
+npm run test:vitest -- test/unit/client/components/SettingsView.core.test.tsx test/unit/client/components/SettingsView.agent-chat.test.tsx test/unit/client/components/SettingsView.panes.test.tsx test/unit/client/components/SettingsView.editor.test.tsx test/unit/client/components/SettingsView.network-access.test.tsx test/unit/client/components/SettingsView.terminal-advanced.test.tsx test/unit/client/components/SettingsView.behavior.test.tsx test/unit/client/components/SettingsView.naming.test.tsx test/unit/client/components/panes/PanePicker.test.tsx test/unit/client/components/component-edge-cases.test.tsx test/e2e/network-setup.test.tsx test/e2e/settings-devices-flow.test.tsx --run
+```
+
+Expected: pass.
+
+- [ ] **Step 2: Run typecheck**
+
+Run:
+
+```bash
+npm run typecheck
+```
+
+Expected: pass.
+
+- [ ] **Step 3: Run the Playwright settings smoke spec**
+
+Run:
+
+```bash
+npm run test:e2e:chromium -- test/e2e-browser/specs/settings.spec.ts
+```
+
+Expected: pass.
+
+- [ ] **Step 4: Build and start an isolated production test server**
+
+Use a unique port, build the worktree, and record the PID:
+
+```bash
+npm run build
+PORT=3379 npm start > /tmp/freshell-new-settings-ui-3379.log 2>&1 & echo $! > /tmp/freshell-new-settings-ui-3379.pid
+```
+
+Expected: build passes, `npm start` returns control immediately because it is backgrounded, and the PID file exists. Use `npm start`, not `node dist/server/index.js`, so `NODE_ENV=production` is set and the server serves the built client.
+
+- [ ] **Step 5: Inspect each settings subpage with Playwright without toggling controls**
+
+Use Playwright against `http://127.0.0.1:3379`. The production server serves the built client on this port. Open Settings, click each tab, take screenshots into `/tmp`, and for each tab run a separate DOM/layout assertion:
+
+```ts
+const expectedTabs = ['Appearance', 'Coding Agents', 'Panes', 'Workspace', 'Naming', 'Network', 'Advanced']
+const forbiddenSettingsText = ['Manage Extensions', 'Fresh agent', 'Safety', 'AI', 'Built-in panes']
+```
+
+Validate each tab separately:
+- Appearance: terminal preview visible, Cursor blink row switch center aligns with row midpoint within 6 px.
+- Coding Agents: exactly eight agent rows, each row has one SVG, one name, one switch, and no descriptions/settings density.
+- Panes: Pane behavior and Editor pane visible, no Built-in panes inventory, tab completion segmented control has at least 6 px right-side buffer.
+- Workspace: Sidebar and Keyboard shortcuts visible, no Panes, Fresh agent, Editor pane, Network, or Devices sections.
+- Naming: Gemini API key, Auto-generate session titles, Naming prompt visible; no `AI` heading.
+- Network: Remote access visible, Firewall/Get link rows are conditional only; no Devices section.
+- Advanced: Advanced, Runtime, and Devices visible; no Safety heading; Auto-kill slider displays a valid value.
+
+- [ ] **Step 6: Stop only the isolated test server**
+
+Before stopping, verify the PID belongs to this worktree:
+
+```bash
+ps -fp "$(cat /tmp/freshell-new-settings-ui-3379.pid)"
+```
+
+Then stop it:
+
+```bash
+kill "$(cat /tmp/freshell-new-settings-ui-3379.pid)" && rm -f /tmp/freshell-new-settings-ui-3379.pid
+```
+
+- [ ] **Step 7: Run broad verification if focused checks and screenshots pass**
+
+Inspect coordinator status:
+
+```bash
+npm run test:status
+```
+
+If the coordinator is available, run:
+
+```bash
+FRESHELL_TEST_SUMMARY="settings ui refactor verification" npm run check
+```
+
+Expected: pass.
+
+---
+
+### Task 8: Final Review Loop
+
+**Files:**
+- No source edits expected unless review catches issues.
+
+- [ ] **Step 1: Commit the completed implementation**
+
+Run:
+
+```bash
+git status --short
+git add src/components/SettingsView.tsx src/components/settings src/components/panes/PanePicker.tsx test/unit/client/components test/e2e/network-setup.test.tsx test/e2e/settings-devices-flow.test.tsx test/e2e-browser/specs/settings.spec.ts docs/index.html docs/superpowers/plans/2026-06-12-settings-ui-refactor.md
+git commit -m "refactor settings tabs and coding agent controls"
+```
+
+- [ ] **Step 2: Run Fresh Eyes up to five times**
+
+Use the `fresheyes` skill with this scope:
+
+```text
+Review the changes between origin/main and this branch using git diff origin/main...HEAD.
+```
+
+If the verdict fails, fix the blocking issues, rerun focused verification, commit the fix, and run Fresh Eyes again. Stop after the first pass or after five attempts, whichever comes first.
+
+- [ ] **Step 3: Report considerations requiring product attention**
+
+After fixes, report only remaining product decisions, such as whether per-agent Fresh switches should eventually move from `extensions.disabled` into a first-class `freshAgent.enabledSessionTypes` schema field.
+Also report that the shipped UI intentionally removes global Fresh-agent display controls from Settings, and that Coding Agents currently shows the product's fixed set of agent surfaces rather than deriving rows only from installed CLI extension registry entries.
+
+---
+
+## Self-Review
+
+**Spec coverage:** The plan covers the requested Settings refactor, Coding Agents as its own section, Panes as its own section, Naming replacing AI, Network as its own tab, Safety/Devices moved into Advanced, concise coding-agent rows, monochrome SVG icons, no static built-in pane inventory, dropdown/control buffer, cursor switch alignment, test-server screenshots, and Fresh Eyes review loops.
+
+**Placeholder scan:** No `TBD`, `TODO`, or "write tests for the above" placeholders remain. Each task names exact files, code snippets, commands, and expected results.
+
+**Type consistency:** Section ids match `SettingsView` tab ids. Test helper `SettingsTab` includes all tabs used by tests. Fresh session ids match `FRESH_AGENT_REGISTRY` visible rows: `freshclaude`, `freshcodex`, `freshopencode`.
diff --git a/server/fresh-agent/adapters/codex/normalize.ts b/server/fresh-agent/adapters/codex/normalize.ts
index 9fe5179a3..72983e551 100644
--- a/server/fresh-agent/adapters/codex/normalize.ts
+++ b/server/fresh-agent/adapters/codex/normalize.ts
@@ -500,6 +500,12 @@ export function classifyCodexItemRole(item: Record<string, unknown>): CodexDispl
   }
 }
 
+function readCodexRawItems(rawTurn: Record<string, unknown>): Record<string, unknown>[] {
+  return Array.isArray(rawTurn.items)
+    ? rawTurn.items.filter((item): item is Record<string, unknown> => !!item && typeof item === 'object' && !Array.isArray(item))
+    : []
+}
+
 function readCodexTurnError(rawTurn: Record<string, unknown>): string | undefined {
   const error = rawTurn.error
   if (!error) return undefined
diff --git a/src/components/ExtensionsView.tsx b/src/components/ExtensionsView.tsx
index 6fa71ae62..414f66835 100644
--- a/src/components/ExtensionsView.tsx
+++ b/src/components/ExtensionsView.tsx
@@ -20,6 +20,11 @@ interface ExtensionsViewProps {
   onNavigate: (view: AppView) => void
 }
 
+interface ExtensionsManagerProps {
+  className?: string
+  includeCli?: boolean
+}
+
 function categoryIcon(category: 'cli' | 'server' | 'client') {
   switch (category) {
     case 'server': return <Server className="w-4 h-4" />
@@ -260,7 +265,7 @@ function ExtensionCard({ item, expanded, onToggleExpand, onToggleEnabled, onConf
   )
 }
 
-export default function ExtensionsView({ onNavigate }: ExtensionsViewProps) {
+export function ExtensionsManager({ className, includeCli = true }: ExtensionsManagerProps = {}) {
   useEnsureExtensionsRegistry()
 
   const dispatch = useAppDispatch()
@@ -385,16 +390,65 @@ export default function ExtensionsView({ onNavigate }: ExtensionsViewProps) {
     }
   }, [dispatch, scheduleCwdValidation, scheduleTextSave])
 
+  const visibleItems = useMemo(
+    () => includeCli ? items : items.filter((item) => item.kind !== 'cli'),
+    [includeCli, items],
+  )
+
   const groups = useMemo(() => {
-    const cli = items.filter((i) => i.kind === 'cli')
-    const server = items.filter((i) => i.kind === 'server')
-    const client = items.filter((i) => i.kind === 'client')
+    const cli = visibleItems.filter((i) => i.kind === 'cli')
+    const server = visibleItems.filter((i) => i.kind === 'server')
+    const client = visibleItems.filter((i) => i.kind === 'client')
     return [
       { kind: 'cli' as const, items: cli },
       { kind: 'server' as const, items: server },
       { kind: 'client' as const, items: client },
     ].filter((g) => g.items.length > 0)
-  }, [items])
+  }, [visibleItems])
+
+  return (
+    <div className={cn('space-y-6', className)}>
+      {visibleItems.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+          <Puzzle className="w-12 h-12 mb-4 opacity-50" />
+          <p className="text-lg font-medium">No extensions installed</p>
+          {includeCli && (
+            <p className="text-sm mt-1">
+              Drop a directory with a <code className="rounded bg-muted px-1 py-0.5 text-xs">freshell.json</code> into <code className="rounded bg-muted px-1 py-0.5 text-xs">~/.freshell/extensions/</code> and restart.
+            </p>
+          )}
+        </div>
+      ) : (
+        groups.map((group) => (
+          <div key={group.kind}>
+            <h2 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">
+              {groupLabel(group.kind)}
+            </h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              {group.items.map((item) => (
+                <ExtensionCard
+                  key={item.id}
+                  item={item}
+                  expanded={expandedCards.has(item.id)}
+                  onToggleExpand={() => toggleExpand(item.id)}
+                  onToggleEnabled={handleToggleEnabled}
+                  onConfigChange={handleConfigChange}
+                  cwdDrafts={cwdDrafts}
+                  cwdErrors={cwdErrors}
+                />
+              ))}
+            </div>
+          </div>
+        ))
+      )}
+    </div>
+  )
+}
+
+export default function ExtensionsView({ onNavigate }: ExtensionsViewProps) {
+  useEnsureExtensionsRegistry()
+
+  const items = useAppSelector(selectManagedItems)
 
   return (
     <div className="h-full flex flex-col">
@@ -419,38 +473,8 @@ export default function ExtensionsView({ onNavigate }: ExtensionsViewProps) {
 
       {/* Content */}
       <div className="flex-1 overflow-y-auto">
-        <div className="mx-auto w-full max-w-3xl px-3 py-4 md:px-6 md:py-6 space-y-6">
-          {items.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
-              <Puzzle className="w-12 h-12 mb-4 opacity-50" />
-              <p className="text-lg font-medium">No extensions installed</p>
-              <p className="text-sm mt-1">
-                Drop a directory with a <code className="rounded bg-muted px-1 py-0.5 text-xs">freshell.json</code> into <code className="rounded bg-muted px-1 py-0.5 text-xs">~/.freshell/extensions/</code> and restart.
-              </p>
-            </div>
-          ) : (
-            groups.map((group) => (
-              <div key={group.kind}>
-                <h2 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">
-                  {groupLabel(group.kind)}
-                </h2>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                  {group.items.map((item) => (
-                    <ExtensionCard
-                      key={item.id}
-                      item={item}
-                      expanded={expandedCards.has(item.id)}
-                      onToggleExpand={() => toggleExpand(item.id)}
-                      onToggleEnabled={handleToggleEnabled}
-                      onConfigChange={handleConfigChange}
-                      cwdDrafts={cwdDrafts}
-                      cwdErrors={cwdErrors}
-                    />
-                  ))}
-                </div>
-              </div>
-            ))
-          )}
+        <div className="mx-auto w-full max-w-3xl px-3 py-4 md:px-6 md:py-6">
+          <ExtensionsManager />
         </div>
       </div>
     </div>
diff --git a/src/components/SettingsView.tsx b/src/components/SettingsView.tsx
index 90f324b58..abd658735 100644
--- a/src/components/SettingsView.tsx
+++ b/src/components/SettingsView.tsx
@@ -17,30 +17,30 @@ import type {
   ServerSettingsPatch,
 } from '@/store/types'
 import type { AppView } from '@/components/Sidebar'
-import { useEnsureExtensionsRegistry } from '@/hooks/useEnsureExtensionsRegistry'
-import { Puzzle, ChevronRight } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import AppearanceSettings from '@/components/settings/AppearanceSettings'
 import WorkspaceSettings from '@/components/settings/WorkspaceSettings'
-import SafetySettings from '@/components/settings/SafetySettings'
 import AdvancedSettings from '@/components/settings/AdvancedSettings'
-import AISettings from '@/components/settings/AISettings'
+import CodingAgentsSettings from '@/components/settings/CodingAgentsSettings'
+import PanesSettings from '@/components/settings/PanesSettings'
+import NamingSettings from '@/components/settings/NamingSettings'
+import NetworkSettings from '@/components/settings/NetworkSettings'
 
 const SERVER_TEXT_SETTINGS_DEBOUNCE_MS = 500
 
 const sections = [
   { id: 'appearance', label: 'Appearance' },
+  { id: 'coding-agents', label: 'Coding Agents' },
+  { id: 'panes', label: 'Panes' },
   { id: 'workspace', label: 'Workspace' },
-  { id: 'ai', label: 'AI' },
-  { id: 'safety', label: 'Safety' },
+  { id: 'naming', label: 'Naming' },
+  { id: 'network', label: 'Network' },
   { id: 'advanced', label: 'Advanced' },
 ] as const
 
 type SectionId = typeof sections[number]['id']
 
 export default function SettingsView({ onNavigate, onFirewallTerminal, onSharePanel }: { onNavigate?: (view: AppView) => void; onFirewallTerminal?: (cmd: { tabId: string; command: string }) => void; onSharePanel?: () => void } = {}) {
-  useEnsureExtensionsRegistry()
-
   const dispatch = useAppDispatch()
   const rawSettings = useAppSelector((s) => s.settings.settings)
   const settings = useMemo(
@@ -111,26 +111,9 @@ export default function SettingsView({ onNavigate, onFirewallTerminal, onSharePa
 
       {/* Content */}
       <div className="flex-1 overflow-y-auto">
-        <div className="mx-auto w-full max-w-2xl px-3 py-4 md:px-6 md:py-6 space-y-6">
-
-          {/* Manage Extensions — prominent, always visible */}
-          <button
-            onClick={() => onNavigate?.('extensions')}
-            className="w-full flex items-center justify-between rounded-lg border border-border/40 bg-card px-4 py-3 text-left hover:bg-muted/50 transition-colors"
-            aria-label="Manage extensions"
-          >
-            <div className="flex items-center gap-3">
-              <Puzzle className="w-5 h-5 text-muted-foreground" />
-              <div>
-                <div className="text-sm font-medium">Manage Extensions</div>
-                <div className="text-xs text-muted-foreground">View and configure installed extensions</div>
-              </div>
-            </div>
-            <ChevronRight className="w-4 h-4 text-muted-foreground" />
-          </button>
-
+        <div className="mx-auto w-full max-w-3xl px-3 py-4 md:px-6 md:py-6 space-y-6">
           {/* Tabs */}
-          <div className="flex gap-1 border-b border-border/30 -mx-1" role="tablist" aria-label="Settings sections">
+          <div className="flex flex-wrap gap-x-1 gap-y-1 border-b border-border/30 -mx-1" role="tablist" aria-label="Settings sections">
             {sections.map((section) => (
               <button
                 key={section.id}
@@ -150,12 +133,14 @@ export default function SettingsView({ onNavigate, onFirewallTerminal, onSharePa
           </div>
 
           {/* Tab content — only the active section renders */}
-          <div role="tabpanel" aria-label={`${activeSection} settings`}>
+          <div role="tabpanel" aria-label={`${activeSection} settings`} className="space-y-6">
             {activeSection === 'appearance' && <AppearanceSettings {...sectionProps} />}
+            {activeSection === 'coding-agents' && <CodingAgentsSettings {...sectionProps} />}
+            {activeSection === 'panes' && <PanesSettings {...sectionProps} />}
             {activeSection === 'workspace' && <WorkspaceSettings {...sectionProps} />}
-            {activeSection === 'ai' && <AISettings {...sectionProps} />}
-            {activeSection === 'safety' && (
-              <SafetySettings
+            {activeSection === 'naming' && <NamingSettings {...sectionProps} />}
+            {activeSection === 'network' && (
+              <NetworkSettings
                 {...sectionProps}
                 onNavigate={onNavigate}
                 onFirewallTerminal={onFirewallTerminal}
diff --git a/src/components/fresh-agent/FreshAgentComposer.tsx b/src/components/fresh-agent/FreshAgentComposer.tsx
index 68217ad77..82e7da9cf 100644
--- a/src/components/fresh-agent/FreshAgentComposer.tsx
+++ b/src/components/fresh-agent/FreshAgentComposer.tsx
@@ -8,11 +8,12 @@ import {
   useState,
   type KeyboardEvent,
 } from 'react'
-import { Command, File, Folder, Loader2, Paperclip, Send, Square, X } from 'lucide-react'
+import { File, Folder, ListStart, Loader2, Paperclip, Send, Square, X } from 'lucide-react'
 import { api } from '@/lib/api'
 import { getAuthToken } from '@/lib/auth'
 import { useCoarsePointer } from '@/lib/pointer'
 import { cn } from '@/lib/utils'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import type { FreshAgentSlashCommand } from '@shared/fresh-agent-slash-commands'
 
 export type FreshAgentAttachment = {
@@ -703,26 +704,38 @@ export const FreshAgentComposer = forwardRef<FreshAgentComposerHandle, FreshAgen
           >
             <Square className="h-4 w-4" />
           </button>
-          <button
-            type="button"
-            disabled={commands.length === 0}
-            className="fresh-agent-composer-action inline-flex h-11 w-11 items-center justify-center rounded-md border border-border/70 text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50 sm:h-9 sm:w-9"
-            aria-label="Slash commands"
-            onClick={() => {
-              setMenuMode((mode) => mode === 'browse' ? null : 'browse')
-              setFilter('')
-            }}
-          >
-            <Command className="h-4 w-4" />
-          </button>
-          <button
-            type="submit"
-            disabled={disabled}
-            className="fresh-agent-composer-action inline-flex h-11 w-11 items-center justify-center rounded-md bg-primary text-sm font-medium text-primary-foreground disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:w-10"
-            aria-label="Send"
-          >
-            <Send className="h-4 w-4" />
-          </button>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                disabled={commands.length === 0}
+                className="fresh-agent-composer-action inline-flex h-11 w-11 items-center justify-center rounded-md border border-border/70 text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50 sm:h-9 sm:w-9"
+                aria-label="Slash commands"
+                title="Slash commands"
+                onClick={() => {
+                  setMenuMode((mode) => mode === 'browse' ? null : 'browse')
+                  setFilter('')
+                }}
+              >
+                <ListStart className="h-4 w-4" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent align="end">Slash commands</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="submit"
+                disabled={disabled}
+                className="fresh-agent-composer-action inline-flex h-11 w-11 items-center justify-center rounded-md bg-primary text-sm font-medium text-primary-foreground disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:w-10"
+                aria-label="Send"
+                title="Send message"
+              >
+                <Send className="h-4 w-4" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent align="end">Send message</TooltipContent>
+          </Tooltip>
         </div>
         <input
           ref={fileInputRef}
diff --git a/src/components/fresh-agent/FreshAgentItemCard.tsx b/src/components/fresh-agent/FreshAgentItemCard.tsx
index 11b28ecfd..5d299d8c6 100644
--- a/src/components/fresh-agent/FreshAgentItemCard.tsx
+++ b/src/components/fresh-agent/FreshAgentItemCard.tsx
@@ -229,7 +229,7 @@ export function itemToToolDisplay(item: FreshAgentTranscriptItem): FreshAgentToo
 function renderText(text: string, markdown = false) {
   const visibleText = stripSystemReminders(text)
   if (!visibleText) return null
-  const plain = <p className="whitespace-pre-wrap break-words">{visibleText}</p>
+  const plain = <p className="whitespace-pre-wrap break-words leading-[inherit]">{visibleText}</p>
   if (!markdown) return plain
   return (
     <div
diff --git a/src/components/fresh-agent/FreshAgentTranscript.tsx b/src/components/fresh-agent/FreshAgentTranscript.tsx
index 8925e556c..e23f6f16a 100644
--- a/src/components/fresh-agent/FreshAgentTranscript.tsx
+++ b/src/components/fresh-agent/FreshAgentTranscript.tsx
@@ -496,7 +496,7 @@ function FreshAgentTurnArticle({
           }
           return <FreshAgentItemCard key={block.item.id} item={block.item} markdown={!isUser} />
         }) : isUser ? (
-          <p className="whitespace-pre-wrap break-words">{stripSystemReminders(turn.summary)}</p>
+          <p className="whitespace-pre-wrap break-words leading-[inherit]">{stripSystemReminders(turn.summary)}</p>
         ) : (
           // Summary-only agent turns went through the plain-text path and
           // showed literal backticks (live-test finding) — render markdown.
diff --git a/src/components/panes/PanePicker.tsx b/src/components/panes/PanePicker.tsx
index 5b99ac50b..ff8ab2998 100644
--- a/src/components/panes/PanePicker.tsx
+++ b/src/components/panes/PanePicker.tsx
@@ -85,6 +85,10 @@ function isWindowsLike(platform: string | null): boolean {
   return platform === 'win32' || platform === 'wsl'
 }
 
+function isFreshAgentSessionDisabled(sessionType: string, disabledItems: readonly string[]): boolean {
+  return disabledItems.includes(sessionType)
+}
+
 interface PanePickerProps {
   onSelect: (type: PanePickerType) => void
   onCancel: () => void
@@ -119,6 +123,7 @@ export default function PanePicker({ onSelect, onCancel, isOnlyPane, tabId, pane
     // Fresh-agent provider options: only show if underlying CLI is available, enabled, and not hidden by feature flag
     const visibleFreshAgentConfigs = freshClientsEnabled ? getVisibleFreshAgentConfigs(featureFlags) : []
     const freshAgentProviderOptions: PickerOption[] = visibleFreshAgentConfigs
+      .filter((config) => !isFreshAgentSessionDisabled(config.name, disabledExtensions))
       .filter((config) => availableClis[config.codingCliProvider] && enabledProviders.includes(config.codingCliProvider) && !disabledExtensions.includes(config.codingCliProvider))
       .map((config) => ({
         type: config.name as PanePickerType,
@@ -131,6 +136,7 @@ export default function PanePicker({ onSelect, onCancel, isOnlyPane, tabId, pane
       ? FRESH_AGENT_REGISTRY
           .filter((entry) => !visibleFreshAgentConfigs.some((config) => config.name === entry.sessionType))
           .filter((entry) => !entry.disabled)
+          .filter((entry) => !isFreshAgentSessionDisabled(entry.sessionType, disabledExtensions))
           .filter((entry) => !entry.hidden || featureFlags[entry.featureFlag ?? entry.sessionType] === true)
           .filter((entry) => availableClis[entry.runtimeProvider] && enabledProviders.includes(entry.runtimeProvider) && !disabledExtensions.includes(entry.runtimeProvider))
           .map((entry) => ({
diff --git a/src/components/settings/AISettings.tsx b/src/components/settings/AISettings.tsx
deleted file mode 100644
index b7228790c..000000000
--- a/src/components/settings/AISettings.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-// AI feature settings — Gemini API key, session title generation, and prompt customization.
-
-import type { SettingsSectionProps } from './settings-types'
-import { SettingsSection, SettingsRow, Toggle } from './settings-controls'
-
-export default function AISettings({
-  settings,
-  applyServerSetting,
-  scheduleServerTextSettingSave,
-}: SettingsSectionProps) {
-  return (
-    <>
-      <SettingsSection id="ai" title="AI" description="Gemini-powered features">
-        <SettingsRow
-          label="Gemini API key"
-          description="Required for AI features. Get a key from Google AI Studio."
-        >
-          <input
-            type="password"
-            value={settings.ai?.geminiApiKey || ''}
-            placeholder="Enter Gemini API key"
-            onChange={(e) => {
-              const key = e.target.value || undefined
-              scheduleServerTextSettingSave('ai.geminiApiKey', { ai: { geminiApiKey: key } })
-            }}
-            className="h-10 w-full px-3 text-sm bg-muted border-0 rounded-md focus:outline-none focus:ring-1 focus:ring-border md:h-8"
-          />
-        </SettingsRow>
-
-        <SettingsRow
-          label="Auto-generate session titles"
-          description="Use Gemini to generate titles for new coding sessions."
-        >
-          <Toggle
-            checked={settings.sidebar?.autoGenerateTitles ?? true}
-            onChange={(checked) => {
-              applyServerSetting({ sidebar: { autoGenerateTitles: checked } })
-            }}
-            aria-label="Auto-generate session titles"
-          />
-        </SettingsRow>
-
-        <SettingsRow
-          label="Title prompt"
-          description="Instructions sent to Gemini for generating session titles."
-        >
-          <textarea
-            value={settings.ai?.titlePrompt || ''}
-            placeholder={'Generate a short title (3-8 words) for a coding assistant conversation.\nThe title should describe the task or topic, not the tool being used.\nReturn ONLY the title text. No quotes, no markdown, no explanation.'}
-            onChange={(e) => {
-              const prompt = e.target.value || undefined
-              scheduleServerTextSettingSave('ai.titlePrompt', { ai: { titlePrompt: prompt } })
-            }}
-            rows={4}
-            className="w-full px-3 py-2 text-sm bg-muted border-0 rounded-md focus:outline-none focus:ring-1 focus:ring-border font-mono"
-          />
-        </SettingsRow>
-      </SettingsSection>
-    </>
-  )
-}
diff --git a/src/components/settings/AdvancedSettings.tsx b/src/components/settings/AdvancedSettings.tsx
index 029a81d63..6e8537469 100644
--- a/src/components/settings/AdvancedSettings.tsx
+++ b/src/components/settings/AdvancedSettings.tsx
@@ -2,6 +2,9 @@
 
 import { useId, useState } from 'react'
 import type { SettingsSectionProps } from './settings-types'
+import RuntimeSettings from './RuntimeSettings'
+import DevicesSettings from './DevicesSettings'
+import ExtensionsSettings from './ExtensionsSettings'
 import {
   SettingsSection,
   SettingsRow,
@@ -14,86 +17,100 @@ export default function AdvancedSettings({
   settings,
   applyLocalSetting,
   applyServerSetting,
+  scheduleServerTextSettingSave,
 }: SettingsSectionProps) {
   const [terminalAdvancedOpen, setTerminalAdvancedOpen] = useState(false)
   const terminalAdvancedId = useId()
 
-  return (
-    <SettingsSection id="advanced" title="Advanced" description="Terminal internals and debugging">
-      <SettingsRow label="Scrollback lines">
-        <RangeSlider
-          value={settings.terminal.scrollback}
-          min={1000}
-          max={20000}
-          step={500}
-          format={(v) => v.toLocaleString()}
-          onChange={(v) => {
-            applyServerSetting({ terminal: { scrollback: v } })
-          }}
-        />
-      </SettingsRow>
+  const sectionProps = {
+    settings,
+    applyLocalSetting,
+    applyServerSetting,
+    scheduleServerTextSettingSave,
+  }
 
-      <SettingsRow label="Warn on external links">
-        <Toggle
-          checked={settings.terminal.warnExternalLinks}
-          onChange={(checked) => {
-            applyLocalSetting({ terminal: { warnExternalLinks: checked } })
-          }}
-        />
-      </SettingsRow>
+  return (
+    <>
+      <SettingsSection id="advanced" title="Advanced" description="Terminal internals and debugging">
+        <SettingsRow label="Scrollback lines">
+          <RangeSlider
+            value={settings.terminal.scrollback}
+            min={1000}
+            max={20000}
+            step={500}
+            format={(v) => v.toLocaleString()}
+            onChange={(v) => {
+              applyServerSetting({ terminal: { scrollback: v } })
+            }}
+          />
+        </SettingsRow>
 
-      <SettingsRow label="Debug logging">
-        <Toggle
-          checked={settings.logging?.debug ?? false}
-          onChange={(checked) => {
-            applyServerSetting({ logging: { debug: checked } })
-          }}
-        />
-      </SettingsRow>
+        <SettingsRow label="Warn on external links">
+          <Toggle
+            checked={settings.terminal.warnExternalLinks}
+            onChange={(checked) => {
+              applyLocalSetting({ terminal: { warnExternalLinks: checked } })
+            }}
+          />
+        </SettingsRow>
 
-      <SettingsRow
-        label="Agent MCP server"
-        description="Expose Freshell as an MCP tool to coding agents. Agents can create tabs, send keys, take screenshots, and more."
-      >
-        <Toggle
-          checked={settings.codingCli?.mcpServer ?? true}
-          onChange={(checked) => {
-            applyServerSetting({ codingCli: { mcpServer: checked } })
-          }}
-          aria-label="Agent MCP server"
-        />
-      </SettingsRow>
+        <SettingsRow label="Debug logging">
+          <Toggle
+            checked={settings.logging?.debug ?? false}
+            onChange={(checked) => {
+              applyServerSetting({ logging: { debug: checked } })
+            }}
+          />
+        </SettingsRow>
 
-      <div className="pt-1 border-t border-border/40">
-        <button
-          type="button"
-          aria-expanded={terminalAdvancedOpen}
-          aria-controls={terminalAdvancedId}
-          className="h-10 w-full px-3 text-sm bg-muted rounded-md hover:bg-muted/80 focus:outline-none focus:ring-1 focus:ring-border md:h-8 md:w-auto"
-          onClick={() => setTerminalAdvancedOpen((open) => !open)}
-        >
-          OSC52 Clipboard
-        </button>
-        <div
-          id={terminalAdvancedId}
-          hidden={!terminalAdvancedOpen}
-          className="mt-3 space-y-4"
+        <SettingsRow
+          label="Agent MCP server"
+          description="Expose Freshell as an MCP tool to coding agents. Agents can create tabs, send keys, take screenshots, and more."
         >
-          <SettingsRow label="OSC52 clipboard access">
-            <SegmentedControl
-              value={settings.terminal.osc52Clipboard}
-              options={[
-                { value: 'ask', label: 'Ask' },
-                { value: 'always', label: 'Always' },
-                { value: 'never', label: 'Never' },
-              ]}
-              onChange={(v: string) => {
-                applyLocalSetting({ terminal: { osc52Clipboard: v as 'ask' | 'always' | 'never' } } as any)
-              }}
-            />
-          </SettingsRow>
+          <Toggle
+            checked={settings.codingCli?.mcpServer ?? true}
+            onChange={(checked) => {
+              applyServerSetting({ codingCli: { mcpServer: checked } })
+            }}
+            aria-label="Agent MCP server"
+          />
+        </SettingsRow>
+
+        <div className="pt-1 border-t border-border/40">
+          <button
+            type="button"
+            aria-expanded={terminalAdvancedOpen}
+            aria-controls={terminalAdvancedId}
+            className="h-10 w-full px-3 text-sm bg-muted rounded-md hover:bg-muted/80 focus:outline-none focus:ring-1 focus:ring-border md:h-8 md:w-auto"
+            onClick={() => setTerminalAdvancedOpen((open) => !open)}
+          >
+            OSC52 Clipboard
+          </button>
+          <div
+            id={terminalAdvancedId}
+            hidden={!terminalAdvancedOpen}
+            className="mt-3 space-y-4"
+          >
+            <SettingsRow label="OSC52 clipboard access">
+              <SegmentedControl
+                value={settings.terminal.osc52Clipboard}
+                options={[
+                  { value: 'ask', label: 'Ask' },
+                  { value: 'always', label: 'Always' },
+                  { value: 'never', label: 'Never' },
+                ]}
+                onChange={(v: string) => {
+                  applyLocalSetting({ terminal: { osc52Clipboard: v as 'ask' | 'always' | 'never' } })
+                }}
+              />
+            </SettingsRow>
+          </div>
         </div>
-      </div>
-    </SettingsSection>
+      </SettingsSection>
+
+      <RuntimeSettings {...sectionProps} />
+      <ExtensionsSettings />
+      <DevicesSettings {...sectionProps} />
+    </>
   )
 }
diff --git a/src/components/settings/AppearanceSettings.tsx b/src/components/settings/AppearanceSettings.tsx
index e86c4d1d6..3f6e308af 100644
--- a/src/components/settings/AppearanceSettings.tsx
+++ b/src/components/settings/AppearanceSettings.tsx
@@ -388,6 +388,7 @@ export default function AppearanceSettings({
         <SettingsRow label="Cursor blink">
           <Toggle
             checked={settings.terminal.cursorBlink}
+            aria-label="Cursor blink"
             onChange={(checked) => {
               applyLocalSetting({ terminal: { cursorBlink: checked } })
             }}
diff --git a/src/components/settings/CodingAgentsSettings.tsx b/src/components/settings/CodingAgentsSettings.tsx
new file mode 100644
index 000000000..0e87b7167
--- /dev/null
+++ b/src/components/settings/CodingAgentsSettings.tsx
@@ -0,0 +1,153 @@
+import type { ComponentType, SVGProps } from 'react'
+import {
+  ClaudeIcon,
+  CodexIcon,
+  FreshclaudeIcon,
+  GeminiIcon,
+  KimiIcon,
+  OpencodeIcon,
+} from '@/components/icons/provider-icons'
+import { useAppSelector } from '@/store/hooks'
+import type { CodingCliProviderName } from '@/lib/coding-cli-types'
+import type { ServerSettingsPatch } from '@/store/types'
+import type { SettingsSectionProps } from './settings-types'
+import { SettingsSection, Toggle } from './settings-controls'
+
+type IconComponent = ComponentType<SVGProps<SVGSVGElement>>
+
+type VisibleFreshAgentId = 'freshclaude' | 'freshcodex' | 'freshopencode'
+type FreshAgentId = VisibleFreshAgentId | 'kilroy'
+
+type AgentRow =
+  | { kind: 'cli'; id: CodingCliProviderName; label: string; icon: IconComponent }
+  | { kind: 'fresh'; id: VisibleFreshAgentId; label: string; icon: IconComponent }
+
+const AGENT_ROWS: AgentRow[] = [
+  { kind: 'cli', id: 'claude', label: 'Claude CLI', icon: ClaudeIcon },
+  { kind: 'fresh', id: 'freshclaude', label: 'Freshclaude', icon: FreshclaudeIcon },
+  { kind: 'cli', id: 'codex', label: 'Codex CLI', icon: CodexIcon },
+  { kind: 'fresh', id: 'freshcodex', label: 'Freshcodex', icon: CodexIcon },
+  { kind: 'cli', id: 'opencode', label: 'OpenCode', icon: OpencodeIcon },
+  { kind: 'fresh', id: 'freshopencode', label: 'Freshopencode', icon: OpencodeIcon },
+  { kind: 'cli', id: 'gemini', label: 'Gemini', icon: GeminiIcon },
+  { kind: 'cli', id: 'kimi', label: 'Kimi', icon: KimiIcon },
+]
+
+const FRESH_AGENT_RUNTIME_PROVIDER: Record<VisibleFreshAgentId, CodingCliProviderName> = {
+  freshclaude: 'claude',
+  freshcodex: 'codex',
+  freshopencode: 'opencode',
+}
+
+const VISIBLE_FRESH_AGENT_IDS: VisibleFreshAgentId[] = AGENT_ROWS
+  .filter((row): row is Extract<AgentRow, { kind: 'fresh' }> => row.kind === 'fresh')
+  .map((row) => row.id)
+const FRESH_AGENT_IDS: FreshAgentId[] = [...VISIBLE_FRESH_AGENT_IDS, 'kilroy']
+const EMPTY_AVAILABLE_CLIS: Record<string, boolean> = {}
+
+export default function CodingAgentsSettings({
+  settings,
+  applyServerSetting,
+}: SettingsSectionProps) {
+  const enabledProviders = settings.codingCli?.enabledProviders ?? []
+  const disabledItems = settings.extensions?.disabled ?? []
+  const freshEnabled = settings.freshAgent?.enabled ?? false
+  const availableClis = useAppSelector((s) => s.connection?.availableClis ?? EMPTY_AVAILABLE_CLIS)
+  const hasCliAvailability = Object.keys(availableClis).length > 0
+
+  const isCliAvailable = (id: CodingCliProviderName) => (
+    !hasCliAvailability || availableClis[id] === true
+  )
+
+  const isCliEnabledForFreshAgent = (id: CodingCliProviderName) => (
+    isCliAvailable(id) && enabledProviders.includes(id) && !disabledItems.includes(id)
+  )
+
+  const visibleRows = AGENT_ROWS.filter((row) => {
+    if (row.kind === 'cli') return isCliAvailable(row.id)
+    return isCliEnabledForFreshAgent(FRESH_AGENT_RUNTIME_PROVIDER[row.id])
+  })
+
+  const setCliEnabled = (id: CodingCliProviderName, enabled: boolean) => {
+    const next = enabled
+      ? Array.from(new Set([...enabledProviders, id]))
+      : enabledProviders.filter((provider) => provider !== id)
+    const patch: ServerSettingsPatch = { codingCli: { enabledProviders: next } }
+
+    if (enabled && disabledItems.includes(id)) {
+      patch.extensions = { disabled: disabledItems.filter((item) => item !== id) }
+    }
+
+    applyServerSetting(patch)
+  }
+
+  const setFreshEnabled = (id: VisibleFreshAgentId, enabled: boolean) => {
+    const disabledSet = new Set(disabledItems)
+
+    if (enabled && !freshEnabled) {
+      for (const freshId of FRESH_AGENT_IDS) {
+        if (freshId !== id) disabledSet.add(freshId)
+      }
+    }
+
+    if (enabled) {
+      disabledSet.delete(id)
+    } else {
+      disabledSet.add(id)
+    }
+
+    const anyVisibleFreshEnabled = VISIBLE_FRESH_AGENT_IDS.some((freshId) => !disabledSet.has(freshId))
+    if (!anyVisibleFreshEnabled) {
+      for (const freshId of FRESH_AGENT_IDS) {
+        disabledSet.add(freshId)
+      }
+    }
+
+    const nextDisabled = Array.from(disabledSet)
+    const anyFreshEnabled = FRESH_AGENT_IDS.some((freshId) => !disabledSet.has(freshId))
+    applyServerSetting({
+      freshAgent: { enabled: anyFreshEnabled },
+      extensions: { disabled: nextDisabled },
+    })
+  }
+
+  return (
+    <SettingsSection id="coding-agents" title="Coding Agents">
+      {visibleRows.length === 0 ? (
+        <p className="text-sm text-muted-foreground">No coding agents detected.</p>
+      ) : (
+        <div className="space-y-2">
+          {visibleRows.map((row) => {
+            const Icon = row.icon
+            const checked = row.kind === 'cli'
+              ? enabledProviders.includes(row.id) && !disabledItems.includes(row.id)
+              : freshEnabled && !disabledItems.includes(row.id)
+
+            return (
+              <div
+                key={`${row.kind}-${row.id}`}
+                className="flex min-h-12 items-center justify-between gap-4 rounded-md border border-border/30 px-3 py-2"
+              >
+                <div className="flex min-w-0 items-center gap-3">
+                  <Icon aria-hidden="true" className="h-5 w-5 shrink-0 text-foreground" />
+                  <span className="truncate text-sm font-medium">{row.label}</span>
+                </div>
+                <Toggle
+                  checked={checked}
+                  aria-label={row.label}
+                  onChange={(next) => {
+                    if (row.kind === 'cli') {
+                      setCliEnabled(row.id, next)
+                      return
+                    }
+                    setFreshEnabled(row.id, next)
+                  }}
+                />
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </SettingsSection>
+  )
+}
diff --git a/src/components/settings/DevicesSettings.tsx b/src/components/settings/DevicesSettings.tsx
new file mode 100644
index 000000000..8dde0b4b5
--- /dev/null
+++ b/src/components/settings/DevicesSettings.tsx
@@ -0,0 +1,137 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useAppDispatch, useAppSelector } from '@/store/hooks'
+import {
+  dismissDeviceIds,
+  persistDeviceAliasesForDevices,
+  persistOwnDeviceLabel,
+  setTabRegistryDeviceAliases,
+  setTabRegistryDismissedDeviceIds,
+  setTabRegistryDeviceLabel,
+} from '@/store/tabRegistrySlice'
+import { buildKnownDevices, type KnownDevice } from '@/lib/known-devices'
+import type { SettingsSectionProps } from './settings-types'
+import {
+  SettingsSection,
+  SettingsRow,
+} from './settings-controls'
+
+export default function DevicesSettings(_props: SettingsSectionProps) {
+  const dispatch = useAppDispatch()
+  const tabRegistryState = useAppSelector((s) => (s as any).tabRegistry)
+  const fallbackTabRegistry = useMemo(() => ({
+    deviceId: 'local-device',
+    deviceLabel: 'local-device',
+    deviceAliases: {} as Record<string, string>,
+    dismissedDeviceIds: [] as string[],
+    localOpen: [],
+    sameDeviceOpen: [],
+    remoteOpen: [],
+    closed: [],
+    devices: [],
+  }), [])
+  const tabRegistry = tabRegistryState ?? fallbackTabRegistry
+  const [deviceNameInputs, setDeviceNameInputs] = useState<Record<string, string>>({})
+
+  const knownDevices = useMemo(() => {
+    return buildKnownDevices({
+      ownDeviceId: tabRegistry.deviceId,
+      ownDeviceLabel: tabRegistry.deviceLabel,
+      deviceAliases: tabRegistry.deviceAliases,
+      dismissedDeviceIds: tabRegistry.dismissedDeviceIds,
+      localOpen: tabRegistry.localOpen,
+      sameDeviceOpen: tabRegistry.sameDeviceOpen,
+      remoteOpen: tabRegistry.remoteOpen,
+      closed: tabRegistry.closed,
+      devices: tabRegistry.devices,
+    })
+  }, [tabRegistry])
+
+  useEffect(() => {
+    setDeviceNameInputs((current) => {
+      const next: Record<string, string> = {}
+      for (const device of knownDevices) {
+        next[device.key] = current[device.key] ?? device.effectiveLabel
+      }
+      const changed =
+        Object.keys(current).length !== Object.keys(next).length ||
+        Object.entries(next).some(([key, value]) => current[key] !== value)
+      return changed ? next : current
+    })
+  }, [knownDevices])
+
+  const saveDeviceName = useCallback((device: KnownDevice) => {
+    const nextValue = (deviceNameInputs[device.key] || '').trim()
+    if (device.isOwn) {
+      const persisted = persistOwnDeviceLabel(nextValue || tabRegistry.deviceLabel)
+      dispatch(setTabRegistryDeviceLabel(persisted))
+      setDeviceNameInputs((current) => ({ ...current, [device.key]: persisted }))
+      return
+    }
+    const aliases = persistDeviceAliasesForDevices(device.deviceIds, nextValue || undefined)
+    dispatch(setTabRegistryDeviceAliases(aliases))
+    setDeviceNameInputs((current) => ({
+      ...current,
+      [device.key]: device.deviceIds.map((deviceId) => aliases[deviceId]).find(Boolean) || device.baseLabel,
+    }))
+  }, [deviceNameInputs, dispatch, tabRegistry.deviceLabel])
+
+  const deleteDevice = useCallback((device: KnownDevice) => {
+    if (device.isOwn) return
+
+    const aliases = persistDeviceAliasesForDevices(device.deviceIds, undefined)
+    const dismissedIds = dismissDeviceIds(device.deviceIds)
+    dispatch(setTabRegistryDeviceAliases(aliases))
+    dispatch(setTabRegistryDismissedDeviceIds(dismissedIds))
+    setDeviceNameInputs((current) => {
+      const next = { ...current }
+      delete next[device.key]
+      return next
+    })
+  }, [dispatch])
+
+  return (
+    <SettingsSection
+      title="Devices"
+      description="Rename devices for the Tabs workspace. Remote device aliases apply only on this machine."
+    >
+      {knownDevices.map((device) => (
+        <SettingsRow
+          key={device.key}
+          label={device.isOwn ? 'This machine' : device.baseLabel}
+          description={device.isOwn ? 'Renaming this updates what other machines see.' : 'Alias stored locally on this machine only.'}
+        >
+          <div className="flex w-full items-center gap-2 md:w-auto">
+            <input
+              type="text"
+              value={deviceNameInputs[device.key] ?? device.effectiveLabel}
+              onChange={(event) => setDeviceNameInputs((current) => ({
+                ...current,
+                [device.key]: event.target.value,
+              }))}
+              className="h-10 w-full min-w-[14rem] px-3 text-sm bg-muted border-0 rounded-md focus:outline-none focus:ring-1 focus:ring-border md:h-8 md:w-[20rem]"
+              aria-label={`Device name for ${device.effectiveLabel}`}
+              placeholder={device.baseLabel}
+            />
+            <button
+              type="button"
+              onClick={() => saveDeviceName(device)}
+              className="h-10 px-3 text-sm rounded-md border border-border hover:bg-muted md:h-8"
+            >
+              Save
+            </button>
+            {!device.isOwn ? (
+              <button
+                type="button"
+                onClick={() => deleteDevice(device)}
+                className="h-10 px-3 text-sm rounded-md border border-border hover:bg-muted md:h-8"
+                aria-label={`Delete device ${device.effectiveLabel}`}
+              >
+                Delete
+              </button>
+            ) : null}
+          </div>
+        </SettingsRow>
+      ))}
+    </SettingsSection>
+  )
+}
diff --git a/src/components/settings/ExtensionsSettings.tsx b/src/components/settings/ExtensionsSettings.tsx
new file mode 100644
index 000000000..6e5f79439
--- /dev/null
+++ b/src/components/settings/ExtensionsSettings.tsx
@@ -0,0 +1,14 @@
+import { ExtensionsManager } from '@/components/ExtensionsView'
+import { SettingsSection } from './settings-controls'
+
+export default function ExtensionsSettings() {
+  return (
+    <SettingsSection
+      id="extensions"
+      title="Extensions"
+      description="Developer extension controls"
+    >
+      <ExtensionsManager includeCli={false} />
+    </SettingsSection>
+  )
+}
diff --git a/src/components/settings/NamingSettings.tsx b/src/components/settings/NamingSettings.tsx
new file mode 100644
index 000000000..7de1d6cc0
--- /dev/null
+++ b/src/components/settings/NamingSettings.tsx
@@ -0,0 +1,54 @@
+import type { SettingsSectionProps } from './settings-types'
+import { SettingsSection, SettingsRow, Toggle } from './settings-controls'
+
+export default function NamingSettings({
+  settings,
+  applyServerSetting,
+  scheduleServerTextSettingSave,
+}: SettingsSectionProps) {
+  return (
+    <SettingsSection id="naming" title="Naming" description="Automatic session titles">
+      <SettingsRow
+        label="Gemini API key"
+        description="Used for automatic session titles."
+      >
+        <input
+          type="password"
+          value={settings.ai?.geminiApiKey || ''}
+          placeholder="Enter Gemini API key"
+          onChange={(e) => {
+            const key = e.target.value || undefined
+            scheduleServerTextSettingSave('ai.geminiApiKey', { ai: { geminiApiKey: key } })
+          }}
+          className="h-10 w-full px-3 text-sm bg-muted border-0 rounded-md focus:outline-none focus:ring-1 focus:ring-border md:h-8"
+        />
+      </SettingsRow>
+
+      <SettingsRow label="Auto-generate session titles">
+        <Toggle
+          checked={settings.sidebar?.autoGenerateTitles ?? true}
+          onChange={(checked) => {
+            applyServerSetting({ sidebar: { autoGenerateTitles: checked } })
+          }}
+          aria-label="Auto-generate session titles"
+        />
+      </SettingsRow>
+
+      <SettingsRow
+        label="Naming prompt"
+        description="Instructions sent to Gemini for generated session titles."
+      >
+        <textarea
+          value={settings.ai?.titlePrompt || ''}
+          placeholder={'Generate a short title (3-8 words) for a coding assistant conversation.\nThe title should describe the task or topic, not the tool being used.\nReturn ONLY the title text. No quotes, no markdown, no explanation.'}
+          onChange={(e) => {
+            const prompt = e.target.value || undefined
+            scheduleServerTextSettingSave('ai.titlePrompt', { ai: { titlePrompt: prompt } })
+          }}
+          rows={4}
+          className="w-full px-3 py-2 text-sm bg-muted border-0 rounded-md focus:outline-none focus:ring-1 focus:ring-border font-mono"
+        />
+      </SettingsRow>
+    </SettingsSection>
+  )
+}
diff --git a/src/components/settings/SafetySettings.tsx b/src/components/settings/NetworkSettings.tsx
similarity index 64%
rename from src/components/settings/SafetySettings.tsx
rename to src/components/settings/NetworkSettings.tsx
index 8cdc4e41f..69a474c33 100644
--- a/src/components/settings/SafetySettings.tsx
+++ b/src/components/settings/NetworkSettings.tsx
@@ -1,15 +1,5 @@
-// Safety, network access, and device management settings.
-
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useAppDispatch, useAppSelector } from '@/store/hooks'
-import {
-  dismissDeviceIds,
-  persistDeviceAliasesForDevices,
-  persistOwnDeviceLabel,
-  setTabRegistryDeviceAliases,
-  setTabRegistryDismissedDeviceIds,
-  setTabRegistryDeviceLabel,
-} from '@/store/tabRegistrySlice'
 import { api, type ApiError } from '@/lib/api'
 import { createLogger } from '@/lib/client-logger'
 import { configureNetwork, fetchNetworkStatus, type NetworkStatusResponse } from '@/store/networkSlice'
@@ -21,7 +11,6 @@ import {
 } from '@/lib/firewall-configure'
 import { nanoid } from '@reduxjs/toolkit'
 import type { AppView } from '@/components/Sidebar'
-import { buildKnownDevices, type KnownDevice } from '@/lib/known-devices'
 import { isRemoteAccessEnabledStatus } from '@/lib/share-utils'
 import { ConfirmModal } from '@/components/ui/confirm-modal'
 import type { SettingsSectionProps } from './settings-types'
@@ -29,12 +18,11 @@ import {
   SettingsSection,
   SettingsRow,
   Toggle,
-  RangeSlider,
 } from './settings-controls'
 
 const SETTINGS_FIREWALL_POLL_INTERVAL_MS = 2000
 const SETTINGS_FIREWALL_POLL_MAX_ATTEMPTS = 10
-const log = createLogger('SafetySettings')
+const log = createLogger('NetworkSettings')
 
 type FirewallConfirmation = Extract<ConfigureFirewallResult, { method: 'confirmation-required' }>
 type PendingConfirmation =
@@ -84,19 +72,17 @@ function getErrorMessage(error: unknown, fallback: string): string {
   return fallback
 }
 
-export interface SafetySettingsProps extends SettingsSectionProps {
+export interface NetworkSettingsProps extends SettingsSectionProps {
   onNavigate?: (view: AppView) => void
   onFirewallTerminal?: (cmd: { tabId: string; command: string }) => void
   onSharePanel?: () => void
 }
 
-export default function SafetySettings({
-  settings,
-  applyServerSetting,
+export default function NetworkSettings({
   onNavigate,
   onFirewallTerminal,
   onSharePanel,
-}: SafetySettingsProps) {
+}: NetworkSettingsProps) {
   const dispatch = useAppDispatch()
   const networkStatus = useAppSelector((s) => s.network.status)
   const configuring = useAppSelector((s) => s.network.configuring)
@@ -107,21 +93,7 @@ export default function SafetySettings({
     || networkStatus?.firewall?.platform === 'wsl2'
   )
   const remoteAccessToggleChecked = remoteAccessEnabled || remoteAccessRequested
-  const tabRegistryState = useAppSelector((s) => (s as any).tabRegistry)
-  const tabRegistry = tabRegistryState ?? {
-    deviceId: 'local-device',
-    deviceLabel: 'local-device',
-    deviceAliases: {} as Record<string, string>,
-    dismissedDeviceIds: [] as string[],
-    localOpen: [],
-    sameDeviceOpen: [],
-    remoteOpen: [],
-    closed: [],
-    devices: [],
-  }
 
-  const [defaultCwdInput, setDefaultCwdInput] = useState(settings.defaultCwd ?? '')
-  const [defaultCwdError, setDefaultCwdError] = useState<string | null>(null)
   const [pendingConfirmation, setPendingConfirmation] = useState<PendingConfirmation | null>(null)
   const [firewallRefreshDetail, setFirewallRefreshDetail] = useState<string | null>(null)
   const firewallRepairInProgress = networkStatus?.firewall
@@ -129,69 +101,18 @@ export default function SafetySettings({
     : false
   const [remoteAccessPending, setRemoteAccessPending] = useState(false)
   const [remoteAccessError, setRemoteAccessError] = useState<string | null>(null)
-  const [deviceNameInputs, setDeviceNameInputs] = useState<Record<string, string>>({})
   const firewallRefreshTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const firewallRefreshRequestRef = useRef(0)
   const remoteAccessRefreshTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const remoteAccessRefreshRequestRef = useRef(0)
-  const defaultCwdTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const defaultCwdValidationRef = useRef(0)
-  const lastSettingsDefaultCwdRef = useRef(settings.defaultCwd ?? '')
 
   useEffect(() => {
     return () => {
       if (firewallRefreshTimerRef.current) clearTimeout(firewallRefreshTimerRef.current)
       if (remoteAccessRefreshTimerRef.current) clearTimeout(remoteAccessRefreshTimerRef.current)
-      if (defaultCwdTimerRef.current) clearTimeout(defaultCwdTimerRef.current)
     }
   }, [])
 
-  useEffect(() => {
-    const next = settings.defaultCwd ?? ''
-    if (defaultCwdInput === lastSettingsDefaultCwdRef.current) {
-      setDefaultCwdInput(next)
-    }
-    lastSettingsDefaultCwdRef.current = next
-  }, [defaultCwdInput, settings.defaultCwd])
-
-  const commitDefaultCwd = useCallback((nextValue: string | undefined) => {
-    if (nextValue === settings.defaultCwd) return
-    applyServerSetting({ defaultCwd: nextValue })
-  }, [applyServerSetting, settings.defaultCwd])
-
-  const scheduleDefaultCwdValidation = useCallback((value: string) => {
-    defaultCwdValidationRef.current += 1
-    const validationId = defaultCwdValidationRef.current
-    if (defaultCwdTimerRef.current) clearTimeout(defaultCwdTimerRef.current)
-
-    defaultCwdTimerRef.current = setTimeout(() => {
-      if (defaultCwdValidationRef.current !== validationId) return
-      const trimmed = value.trim()
-      if (!trimmed) {
-        setDefaultCwdError(null)
-        commitDefaultCwd(undefined)
-        return
-      }
-
-      api.post<{ valid: boolean }>('/api/files/validate-dir', { path: trimmed })
-        .then((result) => {
-          if (defaultCwdValidationRef.current !== validationId) return
-          if (result.valid) {
-            setDefaultCwdError(null)
-            commitDefaultCwd(trimmed)
-            return
-          }
-          setDefaultCwdError('directory not found')
-          commitDefaultCwd(undefined)
-        })
-        .catch(() => {
-          if (defaultCwdValidationRef.current !== validationId) return
-          setDefaultCwdError('directory not found')
-          commitDefaultCwd(undefined)
-        })
-    }, 500)
-  }, [commitDefaultCwd])
-
   const refreshFirewallStatusAfterNoop = useCallback(async (message?: string) => {
     setFirewallRefreshDetail(message ?? 'Refreshing firewall status...')
     try {
@@ -433,108 +354,11 @@ export default function SafetySettings({
 
   const handleCancelPendingAction = useCallback(() => {
     setPendingConfirmation(null)
-  }, [pendingConfirmation])
-
-  const knownDevices = useMemo(() => {
-    return buildKnownDevices({
-      ownDeviceId: tabRegistry.deviceId,
-      ownDeviceLabel: tabRegistry.deviceLabel,
-      deviceAliases: tabRegistry.deviceAliases,
-      dismissedDeviceIds: tabRegistry.dismissedDeviceIds,
-      localOpen: tabRegistry.localOpen,
-      sameDeviceOpen: tabRegistry.sameDeviceOpen,
-      remoteOpen: tabRegistry.remoteOpen,
-      closed: tabRegistry.closed,
-      devices: tabRegistry.devices,
-    })
-  }, [tabRegistry])
-
-  useEffect(() => {
-    setDeviceNameInputs((current) => {
-      const next: Record<string, string> = {}
-      for (const device of knownDevices) {
-        next[device.key] = current[device.key] ?? device.effectiveLabel
-      }
-      const changed =
-        Object.keys(current).length !== Object.keys(next).length ||
-        Object.entries(next).some(([key, value]) => current[key] !== value)
-      return changed ? next : current
-    })
-  }, [knownDevices])
-
-  const saveDeviceName = useCallback((device: KnownDevice) => {
-    const nextValue = (deviceNameInputs[device.key] || '').trim()
-    if (device.isOwn) {
-      const persisted = persistOwnDeviceLabel(nextValue || tabRegistry.deviceLabel)
-      dispatch(setTabRegistryDeviceLabel(persisted))
-      setDeviceNameInputs((current) => ({ ...current, [device.key]: persisted }))
-      return
-    }
-    const aliases = persistDeviceAliasesForDevices(device.deviceIds, nextValue || undefined)
-    dispatch(setTabRegistryDeviceAliases(aliases))
-    setDeviceNameInputs((current) => ({
-      ...current,
-      [device.key]: device.deviceIds.map((deviceId) => aliases[deviceId]).find(Boolean) || device.baseLabel,
-    }))
-  }, [deviceNameInputs, dispatch, tabRegistry.deviceLabel])
-
-  const deleteDevice = useCallback((device: KnownDevice) => {
-    if (device.isOwn) return
-
-    const aliases = persistDeviceAliasesForDevices(device.deviceIds, undefined)
-    const dismissedIds = dismissDeviceIds(device.deviceIds)
-    dispatch(setTabRegistryDeviceAliases(aliases))
-    dispatch(setTabRegistryDismissedDeviceIds(dismissedIds))
-    setDeviceNameInputs((current) => {
-      const next = { ...current }
-      delete next[device.key]
-      return next
-    })
-  }, [dispatch])
+  }, [])
 
   return (
     <>
-      <SettingsSection id="safety" title="Safety" description="Auto-kill and idle terminal management">
-        <SettingsRow label="Auto-kill idle (minutes)">
-          <RangeSlider
-            value={settings.safety.autoKillIdleMinutes}
-            min={5}
-            max={720}
-            step={5}
-            format={(v) => String(v)}
-            onChange={(v) => {
-              applyServerSetting({ safety: { autoKillIdleMinutes: v } })
-            }}
-          />
-        </SettingsRow>
-
-        <SettingsRow label="Default working directory">
-          <div className="relative w-full md:max-w-xs">
-            <input
-              type="text"
-              value={defaultCwdInput}
-              placeholder="e.g. C:\Users\you\projects"
-              aria-invalid={defaultCwdError ? true : undefined}
-              onChange={(e) => {
-                const nextValue = e.target.value
-                setDefaultCwdInput(nextValue)
-                setDefaultCwdError(null)
-                scheduleDefaultCwdValidation(nextValue)
-              }}
-              className="h-10 w-full px-3 text-sm bg-muted border-0 rounded-md placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-border md:h-8"
-            />
-            {defaultCwdError && (
-              <span
-                className="pointer-events-none absolute right-2 -bottom-4 text-[10px] text-destructive"
-              >
-                {defaultCwdError}
-              </span>
-            )}
-          </div>
-        </SettingsRow>
-      </SettingsSection>
-
-      <SettingsSection title="Network Access" description="Control how Freshell is accessible on your network">
+      <SettingsSection id="network" title="Network" description="Remote access for this Freshell server">
         <SettingsRow
           label="Remote access"
           description={remoteAccessError ?? 'Allow connections from other devices on your network'}
@@ -614,50 +438,6 @@ export default function SafetySettings({
         )}
       </SettingsSection>
 
-      <SettingsSection
-        title="Devices"
-        description="Rename devices for the Tabs workspace. Remote device aliases apply only on this machine."
-      >
-        {knownDevices.map((device) => (
-          <SettingsRow
-            key={device.key}
-            label={device.isOwn ? 'This machine' : device.baseLabel}
-            description={device.isOwn ? 'Renaming this updates what other machines see.' : 'Alias stored locally on this machine only.'}
-          >
-            <div className="flex w-full items-center gap-2 md:w-auto">
-              <input
-                type="text"
-                value={deviceNameInputs[device.key] ?? device.effectiveLabel}
-                onChange={(event) => setDeviceNameInputs((current) => ({
-                  ...current,
-                  [device.key]: event.target.value,
-                }))}
-                className="h-10 w-full min-w-[14rem] px-3 text-sm bg-muted border-0 rounded-md focus:outline-none focus:ring-1 focus:ring-border md:h-8 md:w-[20rem]"
-                aria-label={`Device name for ${device.effectiveLabel}`}
-                placeholder={device.baseLabel}
-              />
-              <button
-                type="button"
-                onClick={() => saveDeviceName(device)}
-                className="h-10 px-3 text-sm rounded-md border border-border hover:bg-muted md:h-8"
-              >
-                Save
-              </button>
-              {!device.isOwn ? (
-                <button
-                  type="button"
-                  onClick={() => deleteDevice(device)}
-                  className="h-10 px-3 text-sm rounded-md border border-border hover:bg-muted md:h-8"
-                  aria-label={`Delete device ${device.effectiveLabel}`}
-                >
-                  Delete
-                </button>
-              ) : null}
-            </div>
-          </SettingsRow>
-        ))}
-      </SettingsSection>
-
       <ConfirmModal
         open={pendingConfirmation !== null}
         title={pendingConfirmation?.request.title ?? ''}
diff --git a/src/components/settings/PanesSettings.tsx b/src/components/settings/PanesSettings.tsx
new file mode 100644
index 000000000..6506b1903
--- /dev/null
+++ b/src/components/settings/PanesSettings.tsx
@@ -0,0 +1,166 @@
+import type {
+  AttentionDismiss,
+  SessionOpenMode,
+  TabAttentionStyle,
+} from '@/store/types'
+import type { SettingsSectionProps } from './settings-types'
+import {
+  SettingsSection,
+  SettingsRow,
+  SegmentedControl,
+  Toggle,
+  RangeSlider,
+} from './settings-controls'
+
+export default function PanesSettings({
+  settings,
+  applyLocalSetting,
+  applyServerSetting,
+  scheduleServerTextSettingSave,
+}: SettingsSectionProps) {
+  return (
+    <>
+      <SettingsSection id="panes" title="Pane behavior">
+        <SettingsRow
+          label="Open sidebar session in"
+          description="Where to open a coding agent session when clicked in the sidebar."
+        >
+          <SegmentedControl
+            value={settings.panes?.sessionOpenMode ?? 'tab'}
+            options={[
+              { value: 'tab', label: 'New tab' },
+              { value: 'split', label: 'Split pane' },
+            ]}
+            onChange={(v: string) => {
+              applyLocalSetting({ panes: { sessionOpenMode: v as SessionOpenMode } })
+            }}
+          />
+        </SettingsRow>
+
+        <SettingsRow label="Default new pane">
+          <select
+            aria-label="Default new pane"
+            value={settings.panes?.defaultNewPane || 'ask'}
+            onChange={(e) => {
+              const v = e.target.value as 'ask' | 'shell' | 'browser' | 'editor'
+              applyServerSetting({ panes: { defaultNewPane: v } })
+            }}
+            className="h-10 w-full px-3 pr-8 text-sm bg-muted border-0 rounded-md focus:outline-none focus:ring-1 focus:ring-border md:h-8 md:w-auto"
+          >
+            <option value="ask">Ask</option>
+            <option value="shell">Shell</option>
+            <option value="browser">Browser</option>
+            <option value="editor">Editor</option>
+          </select>
+        </SettingsRow>
+
+        <SettingsRow label="Snap distance">
+          <RangeSlider
+            value={settings.panes?.snapThreshold ?? 2}
+            min={0}
+            max={8}
+            step={1}
+            labelWidth="w-10"
+            format={(v) => v === 0 ? 'Off' : `${v}%`}
+            onChange={(v) => {
+              applyLocalSetting({ panes: { snapThreshold: v } })
+            }}
+          />
+        </SettingsRow>
+
+        <SettingsRow label="Icons on tabs">
+          <Toggle
+            checked={settings.panes?.iconsOnTabs ?? true}
+            onChange={(checked) => {
+              applyLocalSetting({ panes: { iconsOnTabs: checked } })
+            }}
+          />
+        </SettingsRow>
+
+        <SettingsRow label="Multi-row tabs" description="Show tabs in multiple rows instead of a single scrollable row.">
+          <Toggle
+            checked={settings.panes?.multirowTabs ?? false}
+            onChange={(checked) => {
+              applyLocalSetting({ panes: { multirowTabs: checked } })
+            }}
+          />
+        </SettingsRow>
+
+        <SettingsRow label="Tab completion indicator">
+          <SegmentedControl
+            value={settings.panes?.tabAttentionStyle ?? 'highlight'}
+            options={[
+              { value: 'highlight', label: 'Highlight' },
+              { value: 'pulse', label: 'Pulse' },
+              { value: 'darken', label: 'Darken' },
+              { value: 'none', label: 'None' },
+            ]}
+            onChange={(v: string) => {
+              const tabAttentionStyle = v as TabAttentionStyle
+              applyLocalSetting({ panes: { tabAttentionStyle } })
+            }}
+          />
+        </SettingsRow>
+
+        <SettingsRow label="Dismiss attention on">
+          <SegmentedControl
+            value={settings.panes?.attentionDismiss ?? 'click'}
+            options={[
+              { value: 'click', label: 'Tab click' },
+              { value: 'type', label: 'Typing' },
+            ]}
+            onChange={(v: string) => {
+              const attentionDismiss = v as AttentionDismiss
+              applyLocalSetting({ panes: { attentionDismiss } })
+            }}
+          />
+        </SettingsRow>
+
+        <SettingsRow label="Sound on completion">
+          <Toggle
+            checked={settings.notifications?.soundEnabled ?? true}
+            onChange={(checked) => {
+              applyLocalSetting({ notifications: { soundEnabled: checked } })
+            }}
+          />
+        </SettingsRow>
+      </SettingsSection>
+
+      <SettingsSection title="Editor pane" description="External editor for file opening">
+        <SettingsRow label="External editor" description="Which editor to use when opening files from the editor pane">
+          <select
+            value={settings.editor?.externalEditor ?? 'auto'}
+            onChange={(e) => {
+              const v = e.target.value as 'auto' | 'cursor' | 'code' | 'custom'
+              applyServerSetting({ editor: { externalEditor: v } })
+            }}
+            className="h-10 w-full px-3 pr-8 text-sm bg-muted border-0 rounded-md focus:outline-none focus:ring-1 focus:ring-border md:h-8 md:w-auto"
+          >
+            <option value="auto">Auto (system default)</option>
+            <option value="cursor">Cursor</option>
+            <option value="code">VS Code</option>
+            <option value="custom">Custom command</option>
+          </select>
+        </SettingsRow>
+        {settings.editor?.externalEditor === 'custom' && (
+          <SettingsRow
+            label="Custom command"
+            description="Command template. Use {file}, {line}, {col} as placeholders."
+          >
+            <input
+              type="text"
+              value={settings.editor?.customEditorCommand ?? ''}
+              placeholder="nvim +{line} {file}"
+              onChange={(e) => {
+                scheduleServerTextSettingSave('editor.customEditorCommand', {
+                  editor: { customEditorCommand: e.target.value },
+                })
+              }}
+              className="h-10 w-full px-3 text-sm bg-muted border-0 rounded-md placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-border md:h-8 md:max-w-xs"
+            />
+          </SettingsRow>
+        )}
+      </SettingsSection>
+    </>
+  )
+}
diff --git a/src/components/settings/RuntimeSettings.tsx b/src/components/settings/RuntimeSettings.tsx
new file mode 100644
index 000000000..d6c9a14f3
--- /dev/null
+++ b/src/components/settings/RuntimeSettings.tsx
@@ -0,0 +1,113 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { api } from '@/lib/api'
+import type { SettingsSectionProps } from './settings-types'
+import {
+  SettingsSection,
+  SettingsRow,
+  RangeSlider,
+} from './settings-controls'
+
+export default function RuntimeSettings({
+  settings,
+  applyServerSetting,
+}: SettingsSectionProps) {
+  const [defaultCwdInput, setDefaultCwdInput] = useState(settings.defaultCwd ?? '')
+  const [defaultCwdError, setDefaultCwdError] = useState<string | null>(null)
+  const defaultCwdTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const defaultCwdValidationRef = useRef(0)
+  const lastSettingsDefaultCwdRef = useRef(settings.defaultCwd ?? '')
+
+  useEffect(() => {
+    return () => {
+      if (defaultCwdTimerRef.current) clearTimeout(defaultCwdTimerRef.current)
+    }
+  }, [])
+
+  useEffect(() => {
+    const next = settings.defaultCwd ?? ''
+    if (defaultCwdInput === lastSettingsDefaultCwdRef.current) {
+      setDefaultCwdInput(next)
+    }
+    lastSettingsDefaultCwdRef.current = next
+  }, [defaultCwdInput, settings.defaultCwd])
+
+  const commitDefaultCwd = useCallback((nextValue: string | undefined) => {
+    if (nextValue === settings.defaultCwd) return
+    applyServerSetting({ defaultCwd: nextValue })
+  }, [applyServerSetting, settings.defaultCwd])
+
+  const scheduleDefaultCwdValidation = useCallback((value: string) => {
+    defaultCwdValidationRef.current += 1
+    const validationId = defaultCwdValidationRef.current
+    if (defaultCwdTimerRef.current) clearTimeout(defaultCwdTimerRef.current)
+
+    defaultCwdTimerRef.current = setTimeout(() => {
+      if (defaultCwdValidationRef.current !== validationId) return
+      const trimmed = value.trim()
+      if (!trimmed) {
+        setDefaultCwdError(null)
+        commitDefaultCwd(undefined)
+        return
+      }
+
+      api.post<{ valid: boolean }>('/api/files/validate-dir', { path: trimmed })
+        .then((result) => {
+          if (defaultCwdValidationRef.current !== validationId) return
+          if (result.valid) {
+            setDefaultCwdError(null)
+            commitDefaultCwd(trimmed)
+            return
+          }
+          setDefaultCwdError('directory not found')
+          commitDefaultCwd(undefined)
+        })
+        .catch(() => {
+          if (defaultCwdValidationRef.current !== validationId) return
+          setDefaultCwdError('directory not found')
+          commitDefaultCwd(undefined)
+        })
+    }, 500)
+  }, [commitDefaultCwd])
+
+  return (
+    <SettingsSection title="Runtime" description="Process lifetime and launch defaults">
+      <SettingsRow label="Auto-kill idle (minutes)">
+        <RangeSlider
+          value={settings.safety.autoKillIdleMinutes}
+          min={5}
+          max={720}
+          step={5}
+          format={(v) => String(v)}
+          onChange={(v) => {
+            applyServerSetting({ safety: { autoKillIdleMinutes: v } })
+          }}
+        />
+      </SettingsRow>
+
+      <SettingsRow label="Default working directory">
+        <div className="relative w-full md:max-w-xs">
+          <input
+            type="text"
+            value={defaultCwdInput}
+            placeholder="e.g. C:\Users\you\projects"
+            aria-invalid={defaultCwdError ? true : undefined}
+            onChange={(e) => {
+              const nextValue = e.target.value
+              setDefaultCwdInput(nextValue)
+              setDefaultCwdError(null)
+              scheduleDefaultCwdValidation(nextValue)
+            }}
+            className="h-10 w-full px-3 text-sm bg-muted border-0 rounded-md placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-border md:h-8"
+          />
+          {defaultCwdError && (
+            <span
+              className="pointer-events-none absolute right-2 -bottom-4 text-[10px] text-destructive"
+            >
+              {defaultCwdError}
+            </span>
+          )}
+        </div>
+      </SettingsRow>
+    </SettingsSection>
+  )
+}
diff --git a/src/components/settings/WorkspaceSettings.tsx b/src/components/settings/WorkspaceSettings.tsx
index 4b3a5f155..23a4f4c3b 100644
--- a/src/components/settings/WorkspaceSettings.tsx
+++ b/src/components/settings/WorkspaceSettings.tsx
@@ -1,23 +1,18 @@
-// Sidebar, panes, notifications, editor, and keyboard shortcut settings.
+// Sidebar and keyboard shortcut settings.
 
 import { useState, useEffect, useRef } from 'react'
 import { KEYBOARD_SHORTCUTS } from '@/lib/keyboard-shortcuts'
 import type {
   SidebarSortMode,
   WorktreeGrouping,
-  SessionOpenMode,
-  TabAttentionStyle,
-  AttentionDismiss,
 } from '@/store/types'
 import { parseNormalizedLineList } from '@shared/string-list'
 import type { SettingsSectionProps } from './settings-types'
 import {
   SettingsSection,
   SettingsRow,
-  SegmentedControl,
   Toggle,
   ShortcutRow,
-  RangeSlider,
 } from './settings-controls'
 
 export default function WorkspaceSettings({
@@ -154,197 +149,6 @@ export default function WorkspaceSettings({
         </SettingsRow>
       </SettingsSection>
 
-      <SettingsSection title="Panes" description="Pane layout and behavior">
-        <SettingsRow
-          label="Open sidebar session in"
-          description="Where to open a coding agent session when clicked in the sidebar."
-        >
-          <SegmentedControl
-            value={settings.panes?.sessionOpenMode ?? 'tab'}
-            options={[
-              { value: 'tab', label: 'New tab' },
-              { value: 'split', label: 'Split pane' },
-            ]}
-            onChange={(v: string) => {
-              applyLocalSetting({ panes: { sessionOpenMode: v as SessionOpenMode } })
-            }}
-          />
-        </SettingsRow>
-
-        <SettingsRow label="Default new pane">
-          <select
-            aria-label="Default new pane"
-            value={settings.panes?.defaultNewPane || 'ask'}
-            onChange={(e) => {
-              const v = e.target.value as 'ask' | 'shell' | 'browser' | 'editor'
-              applyServerSetting({ panes: { defaultNewPane: v } })
-            }}
-            className="h-10 w-full px-3 text-sm bg-muted border-0 rounded-md focus:outline-none focus:ring-1 focus:ring-border md:h-8 md:w-auto"
-          >
-            <option value="ask">Ask</option>
-            <option value="shell">Shell</option>
-            <option value="browser">Browser</option>
-            <option value="editor">Editor</option>
-          </select>
-        </SettingsRow>
-
-        <SettingsRow label="Snap distance">
-          <RangeSlider
-            value={settings.panes?.snapThreshold ?? 2}
-            min={0}
-            max={8}
-            step={1}
-            labelWidth="w-10"
-            format={(v) => v === 0 ? 'Off' : `${v}%`}
-            onChange={(v) => {
-              applyLocalSetting({ panes: { snapThreshold: v } })
-            }}
-          />
-        </SettingsRow>
-
-        <SettingsRow label="Icons on tabs">
-          <Toggle
-            checked={settings.panes?.iconsOnTabs ?? true}
-            onChange={(checked) => {
-              applyLocalSetting({ panes: { iconsOnTabs: checked } })
-            }}
-          />
-        </SettingsRow>
-
-        <SettingsRow label="Multi-row tabs" description="Show tabs in multiple rows instead of a single scrollable row.">
-          <Toggle
-            checked={settings.panes?.multirowTabs ?? false}
-            onChange={(checked) => {
-              applyLocalSetting({ panes: { multirowTabs: checked } })
-            }}
-          />
-        </SettingsRow>
-
-        <SettingsRow label="Tab completion indicator">
-          <SegmentedControl
-            value={settings.panes?.tabAttentionStyle ?? 'highlight'}
-            options={[
-              { value: 'highlight', label: 'Highlight' },
-              { value: 'pulse', label: 'Pulse' },
-              { value: 'darken', label: 'Darken' },
-              { value: 'none', label: 'None' },
-            ]}
-            onChange={(v: string) => {
-              const tabAttentionStyle = v as TabAttentionStyle
-              applyLocalSetting({ panes: { tabAttentionStyle } })
-            }}
-          />
-        </SettingsRow>
-
-        <SettingsRow label="Dismiss attention on">
-          <SegmentedControl
-            value={settings.panes?.attentionDismiss ?? 'click'}
-            options={[
-              { value: 'click', label: 'Tab click' },
-              { value: 'type', label: 'Typing' },
-            ]}
-            onChange={(v: string) => {
-              const attentionDismiss = v as AttentionDismiss
-              applyLocalSetting({ panes: { attentionDismiss } })
-            }}
-          />
-        </SettingsRow>
-      </SettingsSection>
-
-      <SettingsSection title="Notifications" description="Sound and alert preferences">
-        <SettingsRow label="Sound on completion">
-          <Toggle
-            checked={settings.notifications?.soundEnabled ?? true}
-            onChange={(checked) => {
-              applyLocalSetting({ notifications: { soundEnabled: checked } })
-            }}
-          />
-        </SettingsRow>
-      </SettingsSection>
-
-      <SettingsSection title="Fresh agent" description="Display settings for fresh-agent panes">
-        <SettingsRow
-          label="Enable fresh clients (experimental)"
-          description="Show Freshclaude, Freshcodex, Freshopencode, and feature-flagged fresh clients in the pane picker."
-        >
-          <Toggle
-            checked={settings.freshAgent?.enabled ?? false}
-            onChange={(checked) => {
-              applyServerSetting({
-                freshAgent: { enabled: checked },
-              })
-            }}
-            aria-label="Enable fresh clients (experimental)"
-          />
-        </SettingsRow>
-        <SettingsRow label="Show thinking">
-          <Toggle
-            checked={settings.freshAgent?.showThinking ?? false}
-            onChange={(checked) => {
-              applyLocalSetting({
-                freshAgent: { showThinking: checked },
-              })
-            }}
-          />
-        </SettingsRow>
-        <SettingsRow label="Show tools">
-          <Toggle
-            checked={settings.freshAgent?.showTools ?? false}
-            onChange={(checked) => {
-              applyLocalSetting({
-                freshAgent: { showTools: checked },
-              })
-            }}
-          />
-        </SettingsRow>
-        <SettingsRow label="Show timecodes &amp; model">
-          <Toggle
-            checked={settings.freshAgent?.showTimecodes ?? false}
-            onChange={(checked) => {
-              applyLocalSetting({
-                freshAgent: { showTimecodes: checked },
-              })
-            }}
-          />
-        </SettingsRow>
-      </SettingsSection>
-
-      <SettingsSection title="Editor" description="External editor for file opening">
-        <SettingsRow label="External editor" description="Which editor to use when opening files from the editor pane">
-          <select
-            value={settings.editor?.externalEditor ?? 'auto'}
-            onChange={(e) => {
-              const v = e.target.value as 'auto' | 'cursor' | 'code' | 'custom'
-              applyServerSetting({ editor: { externalEditor: v } })
-            }}
-            className="h-10 w-full px-3 text-sm bg-muted border-0 rounded-md focus:outline-none focus:ring-1 focus:ring-border md:h-8 md:w-auto"
-          >
-            <option value="auto">Auto (system default)</option>
-            <option value="cursor">Cursor</option>
-            <option value="code">VS Code</option>
-            <option value="custom">Custom command</option>
-          </select>
-        </SettingsRow>
-        {settings.editor?.externalEditor === 'custom' && (
-          <SettingsRow
-            label="Custom command"
-            description="Command template. Use {file}, {line}, {col} as placeholders."
-          >
-            <input
-              type="text"
-              value={settings.editor?.customEditorCommand ?? ''}
-              placeholder="nvim +{line} {file}"
-              onChange={(e) => {
-                scheduleServerTextSettingSave('editor.customEditorCommand', {
-                  editor: { customEditorCommand: e.target.value },
-                })
-              }}
-              className="h-10 w-full px-3 text-sm bg-muted border-0 rounded-md placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-border md:h-8 md:max-w-xs"
-            />
-          </SettingsRow>
-        )}
-      </SettingsSection>
-
       <SettingsSection title="Keyboard shortcuts" description="Navigation and terminal">
         <div className="space-y-2 text-sm">
           {KEYBOARD_SHORTCUTS.map((entry) => (
diff --git a/src/components/settings/settings-controls.tsx b/src/components/settings/settings-controls.tsx
index 4c149522a..8e15ddb6f 100644
--- a/src/components/settings/settings-controls.tsx
+++ b/src/components/settings/settings-controls.tsx
@@ -39,16 +39,16 @@ export function SettingsRow({
   children: React.ReactNode
 }) {
   return (
-    <div className="flex w-full flex-col items-start gap-2 md:flex-row md:items-center md:justify-between md:gap-4">
+    <div className="flex w-full flex-col items-start gap-2 md:flex-row md:items-center md:justify-between md:gap-6">
       {description ? (
-        <div className="flex flex-col gap-0.5">
+        <div className="min-w-0 flex flex-col gap-0.5">
           <span className="text-sm text-muted-foreground">{label}</span>
           <span className="text-xs text-muted-foreground/60">{description}</span>
         </div>
       ) : (
-        <span className="text-sm text-muted-foreground">{label}</span>
+        <span className="min-w-0 text-sm text-muted-foreground">{label}</span>
       )}
-      <div className="w-full md:w-auto">{children}</div>
+      <div className="flex w-full items-center pr-1 md:w-auto md:justify-end md:pr-2">{children}</div>
     </div>
   )
 }
@@ -63,7 +63,7 @@ export function SegmentedControl({
   onChange: (value: string) => void
 }) {
   return (
-    <div className="flex w-full flex-wrap bg-muted rounded-md p-0.5 md:w-auto">
+    <div className="flex w-full min-w-0 flex-wrap bg-muted rounded-md p-0.5 md:w-auto md:min-w-[12rem]">
       {options.map((opt) => (
         <button
           key={opt.value}
@@ -101,7 +101,7 @@ export function Toggle({
       aria-label={ariaLabel ?? (checked ? 'Toggle off' : 'Toggle on')}
       aria-checked={checked}
       className={cn(
-        'relative w-9 h-5 rounded-full transition-colors',
+        'relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors',
         checked ? 'bg-foreground' : 'bg-muted',
         disabled && 'opacity-50 cursor-not-allowed'
       )}
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index 4cb438370..3ace754e1 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -60,11 +60,13 @@ export function TooltipTrigger({
 export function TooltipContent({
   children,
   className,
+  align = 'start',
   side = 'top',
   sideOffset = 4,
 }: {
   children: React.ReactNode
   className?: string
+  align?: 'start' | 'center' | 'end'
   side?: 'top' | 'bottom'
   sideOffset?: number
 }) {
@@ -76,15 +78,21 @@ export function TooltipContent({
   React.useLayoutEffect(() => {
     if (ctx?.open && ctx.triggerRef.current) {
       const rect = ctx.triggerRef.current.getBoundingClientRect()
+      const contentWidth = contentRef.current?.offsetWidth || 0
       const contentHeight = contentRef.current?.offsetHeight || 24
+      const left = align === 'end'
+        ? rect.right - contentWidth
+        : align === 'center'
+          ? rect.left + (rect.width / 2) - (contentWidth / 2)
+          : rect.left
       setPosition({
         top: side === 'bottom'
           ? rect.bottom + sideOffset
           : rect.top - contentHeight - sideOffset,
-        left: rect.left,
+        left: Math.max(4, left),
       })
     }
-  }, [ctx?.open, ctx?.triggerRef, side, sideOffset])
+  }, [align, ctx?.open, ctx?.triggerRef, side, sideOffset])
 
   if (!ctx?.open) return null
 
diff --git a/src/index.css b/src/index.css
index f6553e9cd..6eb34abcd 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1188,6 +1188,11 @@ html {
   padding-right: max(env(safe-area-inset-right), 4.25rem);
 }
 
+.fresh-agent-composer-input {
+  font-size: var(--fresh-transcript-font-size);
+  line-height: 1.25;
+}
+
 .fresh-agent-composer-row {
   align-items: end;
   display: grid;
diff --git a/src/store/managed-items.ts b/src/store/managed-items.ts
index 51db37344..00b14ff4a 100644
--- a/src/store/managed-items.ts
+++ b/src/store/managed-items.ts
@@ -37,6 +37,8 @@ export interface ManagedItem {
   source: ClientExtensionEntry
 }
 
+const EMPTY_EXTENSION_ENTRIES: ClientExtensionEntry[] = []
+
 function buildCliConfig(
   ext: ClientExtensionEntry,
   providerSettings: Record<string, unknown> = {},
@@ -118,7 +120,7 @@ function buildContentSchemaConfig(
 }
 
 export const selectManagedItems = createSelector(
-  [(state: RootState) => state.extensions.entries,
+  [(state: RootState) => state.extensions?.entries ?? EMPTY_EXTENSION_ENTRIES,
    (state: RootState) => state.settings.settings],
   (entries, resolvedSettings): ManagedItem[] => {
     const enabledProviders = resolvedSettings?.codingCli?.enabledProviders ?? []
diff --git a/test/e2e-browser/specs/settings.spec.ts b/test/e2e-browser/specs/settings.spec.ts
index 1879d0c86..285c9c20c 100644
--- a/test/e2e-browser/specs/settings.spec.ts
+++ b/test/e2e-browser/specs/settings.spec.ts
@@ -22,10 +22,14 @@ test.describe('Settings', () => {
     await openSettings(page)
 
     await expect(page.getByRole('tab', { name: /^Appearance$/i })).toBeVisible()
+    await expect(page.getByRole('tab', { name: /^Coding Agents$/i })).toBeVisible()
+    await expect(page.getByRole('tab', { name: /^Panes$/i })).toBeVisible()
     await expect(page.getByRole('tab', { name: /^Workspace$/i })).toBeVisible()
-    await expect(page.getByRole('tab', { name: /^AI$/i })).toBeVisible()
-    await expect(page.getByRole('tab', { name: /^Safety$/i })).toBeVisible()
+    await expect(page.getByRole('tab', { name: /^Naming$/i })).toBeVisible()
+    await expect(page.getByRole('tab', { name: /^Network$/i })).toBeVisible()
     await expect(page.getByRole('tab', { name: /^Advanced$/i })).toBeVisible()
+    await expect(page.getByRole('tab', { name: /^AI$/i })).toHaveCount(0)
+    await expect(page.getByRole('tab', { name: /^Safety$/i })).toHaveCount(0)
   })
 
   test('terminal font size slider changes setting', async ({ freshellPage, page, harness }) => {
diff --git a/test/e2e/network-setup.test.tsx b/test/e2e/network-setup.test.tsx
index 515c23120..1850f1ea5 100644
--- a/test/e2e/network-setup.test.tsx
+++ b/test/e2e/network-setup.test.tsx
@@ -82,8 +82,8 @@ function createStore(networkStatus: NetworkStatusResponse | null = unconfiguredS
   })
 }
 
-async function openSafetySettings() {
-  fireEvent.click(screen.getByRole('tab', { name: /^safety$/i }))
+async function openNetworkSettings() {
+  fireEvent.click(screen.getByRole('tab', { name: /^network$/i }))
   return screen.findByRole('switch', { name: /remote access/i })
 }
 
@@ -306,7 +306,7 @@ describe('Settings network section (e2e)', () => {
       </Provider>,
     )
 
-    expect(await openSafetySettings()).toBeInTheDocument()
+    expect(await openNetworkSettings()).toBeInTheDocument()
   })
 
   it('toggles remote access on and dispatches configure', async () => {
@@ -319,7 +319,7 @@ describe('Settings network section (e2e)', () => {
       </Provider>,
     )
 
-    const toggle = await openSafetySettings()
+    const toggle = await openNetworkSettings()
     fireEvent.click(toggle)
 
     await waitFor(() => {
@@ -358,7 +358,7 @@ describe('Settings network section (e2e)', () => {
       </Provider>,
     )
 
-    await openSafetySettings()
+    await openNetworkSettings()
     fireEvent.click(screen.getByRole('button', { name: /fix firewall configuration/i }))
 
     const confirmationDialog = await screen.findByRole('dialog', { name: /administrator approval required/i })
diff --git a/test/e2e/settings-devices-flow.test.tsx b/test/e2e/settings-devices-flow.test.tsx
index f4a4ef043..e18e42da1 100644
--- a/test/e2e/settings-devices-flow.test.tsx
+++ b/test/e2e/settings-devices-flow.test.tsx
@@ -137,12 +137,13 @@ describe('settings devices management flow (e2e)', () => {
       </Provider>,
     )
 
-    fireEvent.click(screen.getByRole('tab', { name: /^safety$/i }))
-    expect(screen.getAllByLabelText('Device name for studio-mac')).toHaveLength(2)
+    fireEvent.click(screen.getByRole('tab', { name: /^network$/i }))
+    expect(screen.getByRole('heading', { name: /^network$/i })).toBeInTheDocument()
+    expect(screen.getByRole('switch', { name: /remote access/i })).toBeInTheDocument()
 
-    const devicesHeading = screen.getByText('Devices')
-    const networkHeading = screen.getByText('Network Access')
-    expect(devicesHeading.compareDocumentPosition(networkHeading) & Node.DOCUMENT_POSITION_PRECEDING).toBeTruthy()
+    fireEvent.click(screen.getByRole('tab', { name: /^advanced$/i }))
+    expect(screen.getAllByLabelText('Device name for studio-mac')).toHaveLength(2)
+    expect(screen.getByRole('heading', { name: 'Devices' })).toBeInTheDocument()
 
     fireEvent.click(screen.getAllByRole('button', { name: 'Delete device studio-mac' })[0])
 
diff --git a/test/unit/client/components/SettingsView.agent-chat.test.tsx b/test/unit/client/components/SettingsView.agent-chat.test.tsx
index 2930e852c..8bd57ce19 100644
--- a/test/unit/client/components/SettingsView.agent-chat.test.tsx
+++ b/test/unit/client/components/SettingsView.agent-chat.test.tsx
@@ -20,148 +20,206 @@ vi.mock('@/lib/api', () => ({
 
 installSettingsViewHooks({ fakeTimers: true, mockFonts: true })
 
-function getToggle(labelText: string) {
-  const label = screen.getByText(labelText)
-  let row: HTMLElement | null = label.parentElement
-  while (row && !row.querySelector('[role="switch"]')) {
-    row = row.parentElement
-  }
-  if (!row) throw new Error(`Row with label "${labelText}" not found`)
-  return row.querySelector('[role="switch"]') as HTMLElement
-}
-
-describe('SettingsView fresh agent settings', () => {
-  it('renders the Fresh agent section on the Workspace tab', () => {
+describe('SettingsView coding agents settings', () => {
+  it('renders compact rows for CLI and Fresh coding agents', () => {
     const store = createSettingsViewStore()
     renderSettingsView(store)
-    switchSettingsTab('Workspace')
-
-    expect(screen.getByRole('heading', { name: 'Fresh agent' })).toBeInTheDocument()
-    expect(screen.getByText('Display settings for fresh-agent panes')).toBeInTheDocument()
-  })
-
-  it('renders the enable switch, Show thinking, Show tools, and Show timecodes toggles', () => {
-    const store = createSettingsViewStore()
-    renderSettingsView(store)
-    switchSettingsTab('Workspace')
-
-    expect(getToggle('Enable fresh clients (experimental)')).toBeInTheDocument()
-    expect(getToggle('Show thinking')).toBeInTheDocument()
-    expect(getToggle('Show tools')).toBeInTheDocument()
-    expect(getToggle('Show timecodes & model')).toBeInTheDocument()
+    switchSettingsTab('Coding Agents')
+
+    expect(screen.getByRole('heading', { name: 'Coding Agents' })).toBeInTheDocument()
+    for (const name of [
+      'Claude CLI',
+      'Freshclaude',
+      'Codex CLI',
+      'Freshcodex',
+      'OpenCode',
+      'Freshopencode',
+      'Gemini',
+      'Kimi',
+    ]) {
+      expect(screen.getByRole('switch', { name })).toBeInTheDocument()
+    }
+    expect(screen.queryByText('Show thinking')).not.toBeInTheDocument()
+    expect(screen.queryByText('Show tools')).not.toBeInTheDocument()
+    expect(screen.queryByText('Show timecodes & model')).not.toBeInTheDocument()
+    expect(screen.queryByLabelText('Fresh agent font size')).not.toBeInTheDocument()
   })
 
-  it('all agent chat toggles default to unchecked (off)', () => {
-    const store = createSettingsViewStore()
+  it('hides unavailable CLI agents and their Fresh variants', () => {
+    const store = createSettingsViewStore({
+      settings: {
+        codingCli: { enabledProviders: ['claude', 'codex', 'opencode', 'gemini', 'kimi'] },
+        freshAgent: { enabled: true },
+      },
+      extraPreloadedState: {
+        connection: {
+          status: 'ready',
+          platform: 'linux',
+          availableClis: {
+            claude: true,
+            codex: false,
+            opencode: false,
+            gemini: false,
+            kimi: false,
+          },
+          featureFlags: {},
+        },
+      },
+    })
     renderSettingsView(store)
-    switchSettingsTab('Workspace')
-
-    expect(getToggle('Enable fresh clients (experimental)')).toHaveAttribute('aria-checked', 'false')
-    expect(getToggle('Show thinking')).toHaveAttribute('aria-checked', 'false')
-    expect(getToggle('Show tools')).toHaveAttribute('aria-checked', 'false')
-    expect(getToggle('Show timecodes & model')).toHaveAttribute('aria-checked', 'false')
+    switchSettingsTab('Coding Agents')
+
+    expect(screen.getByRole('switch', { name: 'Claude CLI' })).toBeInTheDocument()
+    expect(screen.getByRole('switch', { name: 'Freshclaude' })).toBeInTheDocument()
+    expect(screen.queryByRole('switch', { name: 'Codex CLI' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('switch', { name: 'Freshcodex' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('switch', { name: 'OpenCode' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('switch', { name: 'Freshopencode' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('switch', { name: 'Gemini' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('switch', { name: 'Kimi' })).not.toBeInTheDocument()
   })
 
-  it('reflects current freshAgent settings when preloaded', () => {
+  it('hides Fresh agent rows when the runtime CLI is disabled in settings', () => {
     const store = createSettingsViewStore({
-      settings: { freshAgent: { showThinking: true, showTools: true, showTimecodes: true } },
+      settings: {
+        codingCli: { enabledProviders: ['claude'] },
+        freshAgent: { enabled: true },
+      },
+      extraPreloadedState: {
+        connection: {
+          status: 'ready',
+          platform: 'linux',
+          availableClis: {
+            claude: true,
+            codex: true,
+            opencode: true,
+            gemini: true,
+            kimi: true,
+          },
+          featureFlags: {},
+        },
+      },
     })
     renderSettingsView(store)
-    switchSettingsTab('Workspace')
-
-    expect(getToggle('Show thinking')).toHaveAttribute('aria-checked', 'true')
-    expect(getToggle('Show tools')).toHaveAttribute('aria-checked', 'true')
-    expect(getToggle('Show timecodes & model')).toHaveAttribute('aria-checked', 'true')
+    switchSettingsTab('Coding Agents')
+
+    expect(screen.getByRole('switch', { name: 'Claude CLI' })).toBeInTheDocument()
+    expect(screen.getByRole('switch', { name: 'Freshclaude' })).toBeInTheDocument()
+    expect(screen.getByRole('switch', { name: 'Codex CLI' })).toBeInTheDocument()
+    expect(screen.queryByRole('switch', { name: 'Freshcodex' })).not.toBeInTheDocument()
+    expect(screen.getByRole('switch', { name: 'OpenCode' })).toBeInTheDocument()
+    expect(screen.queryByRole('switch', { name: 'Freshopencode' })).not.toBeInTheDocument()
   })
 
-  it('toggling Enable fresh clients updates server-backed settings', async () => {
-    const store = createSettingsViewStore()
+  it('toggles CLI agents through codingCli.enabledProviders', async () => {
+    const store = createSettingsViewStore({
+      settings: { codingCli: { enabledProviders: ['claude', 'codex'] } },
+    })
     renderSettingsView(store)
-    switchSettingsTab('Workspace')
-
-    fireEvent.click(getToggle('Enable fresh clients (experimental)'))
+    switchSettingsTab('Coding Agents')
 
-    expect(store.getState().settings.settings.freshAgent.enabled).toBe(true)
-    expect('agentChat' in store.getState().settings.settings).toBe(false)
+    fireEvent.click(screen.getByRole('switch', { name: 'Codex CLI' }))
 
+    expect(store.getState().settings.settings.codingCli.enabledProviders).toEqual(['claude'])
     await act(async () => {
       await Promise.resolve()
     })
-
     expect(api.patch).toHaveBeenCalledWith('/api/settings', {
-      freshAgent: { enabled: true },
+      codingCli: { enabledProviders: ['claude'] },
     })
   })
 
-  it('toggling Show thinking updates the store to true', () => {
-    const store = createSettingsViewStore()
+  it('renders stale extension-disabled CLI agents as off and clears the stale disablement when re-enabled', async () => {
+    const store = createSettingsViewStore({
+      settings: {
+        codingCli: { enabledProviders: ['claude', 'codex'] },
+        extensions: { disabled: ['codex', 'freshcodex'] },
+      },
+    })
     renderSettingsView(store)
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Coding Agents')
 
-    fireEvent.click(getToggle('Show thinking'))
+    expect(screen.getByRole('switch', { name: 'Codex CLI' })).not.toBeChecked()
+    fireEvent.click(screen.getByRole('switch', { name: 'Codex CLI' }))
 
-    expect(store.getState().settings.settings.freshAgent.showThinking).toBe(true)
-    expect('agentChat' in store.getState().settings.settings).toBe(false)
+    expect(store.getState().settings.settings.codingCli.enabledProviders).toEqual(['claude', 'codex'])
+    expect(store.getState().settings.settings.extensions.disabled).toEqual(['freshcodex'])
+    await act(async () => {
+      await Promise.resolve()
+    })
+    expect(api.patch).toHaveBeenCalledWith('/api/settings', {
+      codingCli: { enabledProviders: ['claude', 'codex'] },
+      extensions: { disabled: ['freshcodex'] },
+    })
   })
 
-  it('toggling Show tools updates the store to true', () => {
-    const store = createSettingsViewStore()
+  it('toggles one Fresh agent independently through extensions.disabled', async () => {
+    const store = createSettingsViewStore({
+      settings: {
+        freshAgent: { enabled: true },
+        extensions: { disabled: ['freshcodex'] },
+      },
+    })
     renderSettingsView(store)
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Coding Agents')
 
-    fireEvent.click(getToggle('Show tools'))
+    expect(screen.getByRole('switch', { name: 'Freshcodex' })).not.toBeChecked()
+    fireEvent.click(screen.getByRole('switch', { name: 'Freshcodex' }))
 
-    expect(store.getState().settings.settings.freshAgent.showTools).toBe(true)
-    expect('agentChat' in store.getState().settings.settings).toBe(false)
+    expect(store.getState().settings.settings.extensions.disabled).not.toContain('freshcodex')
+    await act(async () => {
+      await Promise.resolve()
+    })
+    expect(api.patch).toHaveBeenCalledWith('/api/settings', {
+      freshAgent: { enabled: true },
+      extensions: { disabled: [] },
+    })
   })
 
-  it('toggling Show timecodes updates the store to true', () => {
+  it('turns on only the selected Fresh agent from the default all-off state', async () => {
     const store = createSettingsViewStore()
     renderSettingsView(store)
-    switchSettingsTab('Workspace')
-
-    fireEvent.click(getToggle('Show timecodes & model'))
+    switchSettingsTab('Coding Agents')
 
-    expect(store.getState().settings.settings.freshAgent.showTimecodes).toBe(true)
-    expect('agentChat' in store.getState().settings.settings).toBe(false)
-  })
-
-  it('does not render a separate Fresh agent font size dropdown', () => {
-    const store = createSettingsViewStore()
-    renderSettingsView(store)
-    switchSettingsTab('Workspace')
+    fireEvent.click(screen.getByRole('switch', { name: 'Freshcodex' }))
 
-    expect(screen.queryByLabelText('Fresh agent font size')).not.toBeInTheDocument()
-    expect(screen.queryByText('Scale the text in fresh-agent panes (Freshclaude, Freshcodex, and friends).')).not.toBeInTheDocument()
+    expect(store.getState().settings.settings.freshAgent.enabled).toBe(true)
+    expect(store.getState().settings.settings.extensions.disabled).toEqual(
+      expect.arrayContaining(['freshclaude', 'freshopencode', 'kilroy']),
+    )
+    expect(store.getState().settings.settings.extensions.disabled).not.toContain('freshcodex')
+    await act(async () => {
+      await Promise.resolve()
+    })
+    expect(api.patch).toHaveBeenCalledWith('/api/settings', {
+      freshAgent: { enabled: true },
+      extensions: { disabled: ['freshclaude', 'freshopencode', 'kilroy'] },
+    })
   })
 
-  it('toggling off a previously-on setting sets it to false', () => {
+  it('turns off the global Fresh agent gate when disabling the last visible Fresh agent', async () => {
     const store = createSettingsViewStore({
-      settings: { freshAgent: { showThinking: true } },
+      settings: {
+        freshAgent: { enabled: true },
+        extensions: { disabled: ['freshclaude', 'freshopencode'] },
+      },
     })
     renderSettingsView(store)
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Coding Agents')
 
-    fireEvent.click(getToggle('Show thinking'))
+    fireEvent.click(screen.getByRole('switch', { name: 'Freshcodex' }))
 
-    expect(store.getState().settings.settings.freshAgent.showThinking).toBe(false)
+    expect(store.getState().settings.settings.freshAgent.enabled).toBe(false)
     expect('agentChat' in store.getState().settings.settings).toBe(false)
-  })
-
-  it('fresh agent setting changes are local-only (no api.patch call)', async () => {
-    const store = createSettingsViewStore()
-    renderSettingsView(store)
-    switchSettingsTab('Workspace')
-
-    fireEvent.click(getToggle('Show thinking'))
-    fireEvent.click(getToggle('Show tools'))
-    fireEvent.click(getToggle('Show timecodes & model'))
-
+    expect(store.getState().settings.settings.extensions.disabled).toEqual(
+      expect.arrayContaining(['freshclaude', 'freshcodex', 'freshopencode', 'kilroy']),
+    )
     await act(async () => {
-      vi.advanceTimersByTime(600)
+      await Promise.resolve()
+    })
+    expect(api.patch).toHaveBeenCalledWith('/api/settings', {
+      freshAgent: { enabled: false },
+      extensions: { disabled: ['freshclaude', 'freshopencode', 'freshcodex', 'kilroy'] },
     })
-
-    const { api } = await import('@/lib/api')
-    expect(api.patch).not.toHaveBeenCalled()
   })
 })
diff --git a/test/unit/client/components/SettingsView.behavior.test.tsx b/test/unit/client/components/SettingsView.behavior.test.tsx
index 90824299e..fccaec76c 100644
--- a/test/unit/client/components/SettingsView.behavior.test.tsx
+++ b/test/unit/client/components/SettingsView.behavior.test.tsx
@@ -190,7 +190,7 @@ describe('SettingsView behavior sections', () => {
         },
       })
       renderSettingsView(store)
-      switchSettingsTab('Workspace')
+      switchSettingsTab('Panes')
 
       const soundRow = screen.getByText('Sound on completion').closest('div')
       const soundToggle = within(soundRow!).getByRole('switch')
@@ -322,7 +322,7 @@ describe('SettingsView behavior sections', () => {
     it('updates auto-kill idle minutes slider', () => {
       const store = createSettingsViewStore()
       renderSettingsView(store)
-      switchSettingsTab('Safety')
+      switchSettingsTab('Advanced')
 
       const autoKillSlider = getSlider((slider) => {
         const min = slider.getAttribute('min')
@@ -340,7 +340,7 @@ describe('SettingsView behavior sections', () => {
       vi.mocked(api.post).mockResolvedValue({ valid: true })
       const store = createSettingsViewStore()
       renderSettingsView(store)
-      switchSettingsTab('Safety')
+      switchSettingsTab('Advanced')
 
       const cwdInput = screen.getByPlaceholderText('e.g. C:\\Users\\you\\projects')
       fireEvent.change(cwdInput, { target: { value: '/home/user/projects' } })
@@ -368,7 +368,7 @@ describe('SettingsView behavior sections', () => {
         settings: { defaultCwd: '/some/path' },
       })
       renderSettingsView(store)
-      switchSettingsTab('Safety')
+      switchSettingsTab('Advanced')
 
       const cwdInput = screen.getByDisplayValue('/some/path')
       fireEvent.change(cwdInput, { target: { value: '/missing/path' } })
@@ -396,7 +396,7 @@ describe('SettingsView behavior sections', () => {
         settings: { defaultCwd: '/some/path' },
       })
       renderSettingsView(store)
-      switchSettingsTab('Safety')
+      switchSettingsTab('Advanced')
 
       const cwdInput = screen.getByDisplayValue('/some/path')
       fireEvent.change(cwdInput, { target: { value: '' } })
@@ -474,7 +474,7 @@ describe('SettingsView behavior sections', () => {
         },
       })
       renderSettingsView(store)
-      switchSettingsTab('Safety')
+      switchSettingsTab('Advanced')
 
       expect(screen.getAllByLabelText('Device name for studio-mac')).toHaveLength(2)
 
diff --git a/test/unit/client/components/SettingsView.core.test.tsx b/test/unit/client/components/SettingsView.core.test.tsx
index 1bbdf1bb3..8606c34b5 100644
--- a/test/unit/client/components/SettingsView.core.test.tsx
+++ b/test/unit/client/components/SettingsView.core.test.tsx
@@ -47,14 +47,21 @@ describe('SettingsView core sections', () => {
       expect(headings[0]).toBeInTheDocument()
     })
 
-    it('renders tab buttons for all sections', () => {
+    it('renders tab buttons for the shipped settings sections', () => {
       const store = createSettingsViewStore()
       renderSettingsView(store)
 
-      expect(screen.getByRole('tab', { name: 'Appearance' })).toBeInTheDocument()
-      expect(screen.getByRole('tab', { name: 'Workspace' })).toBeInTheDocument()
-      expect(screen.getByRole('tab', { name: 'Safety' })).toBeInTheDocument()
-      expect(screen.getByRole('tab', { name: 'Advanced' })).toBeInTheDocument()
+      const tabs = screen.getAllByRole('tab').map((tab) => tab.textContent?.trim())
+      expect(tabs).toEqual([
+        'Appearance',
+        'Coding Agents',
+        'Panes',
+        'Workspace',
+        'Naming',
+        'Network',
+        'Advanced',
+      ])
+      expect(screen.queryByRole('button', { name: /manage extensions/i })).not.toBeInTheDocument()
     })
 
     it('shows Appearance tab content by default', () => {
@@ -77,19 +84,50 @@ describe('SettingsView core sections', () => {
 
       expect(screen.getByRole('heading', { name: 'Sidebar' })).toBeInTheDocument()
       expect(screen.getByText('Session list and navigation')).toBeInTheDocument()
-      expect(screen.getByText('Notifications')).toBeInTheDocument()
+      expect(screen.getByText('Keyboard shortcuts')).toBeInTheDocument()
+      expect(screen.queryByText('Notifications')).not.toBeInTheDocument()
       expect(screen.queryByTestId('terminal-preview')).not.toBeInTheDocument()
     })
 
-    it('switches to Safety tab on click', () => {
+    it('switches to Coding Agents tab on click', () => {
       const store = createSettingsViewStore()
       renderSettingsView(store)
 
-      fireEvent.click(screen.getByRole('tab', { name: 'Safety' }))
+      fireEvent.click(screen.getByRole('tab', { name: 'Coding Agents' }))
 
-      expect(screen.getByRole('heading', { name: 'Safety' })).toBeInTheDocument()
-      expect(screen.getByText('Network Access')).toBeInTheDocument()
-      expect(screen.getByText('Devices')).toBeInTheDocument()
+      expect(screen.getByRole('heading', { name: 'Coding Agents' })).toBeInTheDocument()
+      expect(screen.getByRole('switch', { name: 'Claude CLI' })).toBeInTheDocument()
+      expect(screen.getByRole('switch', { name: 'Freshclaude' })).toBeInTheDocument()
+    })
+
+    it('switches to Panes tab on click', () => {
+      const store = createSettingsViewStore()
+      renderSettingsView(store)
+
+      fireEvent.click(screen.getByRole('tab', { name: 'Panes' }))
+
+      expect(screen.getByRole('heading', { name: 'Pane behavior' })).toBeInTheDocument()
+      expect(screen.getByText('Editor pane')).toBeInTheDocument()
+    })
+
+    it('switches to Naming tab on click', () => {
+      const store = createSettingsViewStore()
+      renderSettingsView(store)
+
+      fireEvent.click(screen.getByRole('tab', { name: 'Naming' }))
+
+      expect(screen.getByRole('heading', { name: 'Naming' })).toBeInTheDocument()
+      expect(screen.queryByRole('heading', { name: 'AI' })).not.toBeInTheDocument()
+    })
+
+    it('switches to Network tab on click', () => {
+      const store = createSettingsViewStore()
+      renderSettingsView(store)
+
+      fireEvent.click(screen.getByRole('tab', { name: 'Network' }))
+
+      expect(screen.getByRole('heading', { name: 'Network' })).toBeInTheDocument()
+      expect(screen.getByRole('switch', { name: /remote access/i })).toBeInTheDocument()
     })
 
     it('switches to Advanced tab on click', () => {
@@ -100,6 +138,39 @@ describe('SettingsView core sections', () => {
 
       expect(screen.getByRole('heading', { name: 'Advanced' })).toBeInTheDocument()
       expect(screen.getByText('Terminal internals and debugging')).toBeInTheDocument()
+      expect(screen.getByText('Runtime')).toBeInTheDocument()
+      expect(screen.getByText('Devices')).toBeInTheDocument()
+      expect(screen.getByRole('heading', { name: 'Extensions' })).toBeInTheDocument()
+      expect(screen.getByText('Developer extension controls')).toBeInTheDocument()
+      expect(screen.getByText('No extensions installed')).toBeInTheDocument()
+      expect(screen.queryByText('CLI Agents')).not.toBeInTheDocument()
+      expect(screen.queryByRole('heading', { name: 'Safety' })).not.toBeInTheDocument()
+    })
+
+    it('shows non-CLI extensions in the Advanced extension manager', () => {
+      const store = createSettingsViewStore({
+        extraPreloadedState: {
+          extensions: {
+            entries: [{
+              name: 'my-server',
+              version: '1.0.0',
+              label: 'My Server',
+              description: 'Server extension',
+              category: 'server',
+              serverRunning: true,
+              serverPort: 8080,
+            }],
+          },
+        },
+      })
+      renderSettingsView(store)
+      switchSettingsTab('Advanced')
+
+      expect(screen.getByRole('heading', { name: 'Extensions' })).toBeInTheDocument()
+      expect(screen.getByText('Server Extensions')).toBeInTheDocument()
+      expect(screen.getByText('My Server')).toBeInTheDocument()
+      expect(screen.getByText('Running')).toBeInTheDocument()
+      expect(screen.queryByText('No extensions installed')).not.toBeInTheDocument()
     })
 
     it('renders Appearance tab setting labels', () => {
@@ -220,10 +291,10 @@ describe('SettingsView core sections', () => {
       expect(screen.getByDisplayValue('Recency')).toBeInTheDocument()
     })
 
-    it('displays safety settings values', () => {
+    it('displays runtime settings values', () => {
       const store = createSettingsViewStore({ settings: { safety: { autoKillIdleMinutes: 120 } } })
       renderSettingsView(store)
-      switchSettingsTab('Safety')
+      switchSettingsTab('Advanced')
 
       expect(screen.getByText('120')).toBeInTheDocument()
     })
diff --git a/test/unit/client/components/SettingsView.editor.test.tsx b/test/unit/client/components/SettingsView.editor.test.tsx
index dd2ec27a5..0a282834c 100644
--- a/test/unit/client/components/SettingsView.editor.test.tsx
+++ b/test/unit/client/components/SettingsView.editor.test.tsx
@@ -83,7 +83,7 @@ function createTestStore(settingsOverrides?: DeepPartial<AppSettings>) {
   })
 }
 
-describe('SettingsView Editor section', () => {
+describe('SettingsView Editor pane section', () => {
   beforeEach(() => {
     localStorage.clear()
     vi.useFakeTimers()
@@ -103,14 +103,9 @@ describe('SettingsView Editor section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
-    // "Editor" also appears as a Panes dropdown option, so find the heading specifically
-    const editorHeadings = screen.getAllByText('Editor')
-    const sectionHeading = editorHeadings.find(
-      (el) => el.tagName === 'H2'
-    )
-    expect(sectionHeading).toBeInTheDocument()
+    expect(screen.getByRole('heading', { name: 'Editor pane' })).toBeInTheDocument()
     expect(screen.getByText('External editor for file opening')).toBeInTheDocument()
   })
 
@@ -121,7 +116,7 @@ describe('SettingsView Editor section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     expect(screen.getByText('External editor')).toBeInTheDocument()
   })
@@ -133,7 +128,7 @@ describe('SettingsView Editor section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     const dropdown = screen.getByDisplayValue('Auto (system default)')
     const options = dropdown.querySelectorAll('option')
@@ -156,7 +151,7 @@ describe('SettingsView Editor section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     const dropdown = screen.getByDisplayValue('Cursor')
     expect(dropdown).toHaveValue('cursor')
@@ -169,7 +164,7 @@ describe('SettingsView Editor section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     const dropdown = screen.getByDisplayValue('Auto (system default)')
     fireEvent.change(dropdown, { target: { value: 'code' } })
@@ -195,7 +190,7 @@ describe('SettingsView Editor section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     // The custom command input (and its placeholder) should not be rendered
     expect(screen.queryByPlaceholderText('nvim +{line} {file}')).not.toBeInTheDocument()
@@ -208,7 +203,7 @@ describe('SettingsView Editor section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     expect(screen.queryByPlaceholderText('nvim +{line} {file}')).not.toBeInTheDocument()
   })
@@ -220,7 +215,7 @@ describe('SettingsView Editor section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     expect(screen.queryByPlaceholderText('nvim +{line} {file}')).not.toBeInTheDocument()
   })
@@ -232,7 +227,7 @@ describe('SettingsView Editor section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     // "Custom command" label appears both as a dropdown option and as the
     // settings row label; verify the input is present via its placeholder
@@ -250,7 +245,7 @@ describe('SettingsView Editor section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     expect(screen.queryByPlaceholderText('nvim +{line} {file}')).not.toBeInTheDocument()
 
@@ -267,7 +262,7 @@ describe('SettingsView Editor section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     expect(screen.getByPlaceholderText('nvim +{line} {file}')).toBeInTheDocument()
 
@@ -284,7 +279,7 @@ describe('SettingsView Editor section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     const input = screen.getByPlaceholderText('nvim +{line} {file}')
     fireEvent.change(input, { target: { value: 'vim +{line} {file}' } })
@@ -315,7 +310,7 @@ describe('SettingsView Editor section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     const input = screen.getByPlaceholderText('nvim +{line} {file}')
     fireEvent.change(input, { target: { value: 'vim' } })
@@ -353,7 +348,7 @@ describe('SettingsView Editor section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     const input = screen.getByPlaceholderText('nvim +{line} {file}')
     fireEvent.change(input, { target: { value: 'vim +{line} {file}' } })
@@ -375,7 +370,7 @@ describe('SettingsView Editor section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     const input = screen.getByPlaceholderText('nvim +{line} {file}')
     fireEvent.change(input, { target: { value: 'vim +{line} {file}' } })
@@ -404,7 +399,7 @@ describe('SettingsView Editor section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     const input = screen.getByPlaceholderText('nvim +{line} {file}')
     fireEvent.change(input, { target: { value: 'vim +{line} {file}' } })
@@ -437,7 +432,7 @@ describe('SettingsView Editor section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     const input = screen.getByPlaceholderText('nvim +{line} {file}')
     expect(input).toHaveValue('emacs +{line} {file}')
diff --git a/test/unit/client/components/SettingsView.naming.test.tsx b/test/unit/client/components/SettingsView.naming.test.tsx
new file mode 100644
index 000000000..3d141d60f
--- /dev/null
+++ b/test/unit/client/components/SettingsView.naming.test.tsx
@@ -0,0 +1,90 @@
+import { describe, it, expect, vi } from 'vitest'
+import { act, fireEvent, screen } from '@testing-library/react'
+import {
+  createSettingsViewStore,
+  installSettingsViewHooks,
+  renderSettingsView,
+  switchSettingsTab,
+} from './settings-view-test-utils'
+
+vi.mock('@/lib/api', () => ({
+  api: {
+    patch: vi.fn().mockResolvedValue({}),
+    get: vi.fn().mockResolvedValue({}),
+    post: vi.fn().mockResolvedValue({}),
+    put: vi.fn().mockResolvedValue({}),
+    delete: vi.fn().mockResolvedValue({}),
+  },
+}))
+
+import { api } from '@/lib/api'
+
+installSettingsViewHooks({ fakeTimers: true, mockFonts: true })
+
+describe('SettingsView naming settings', () => {
+  it('renders naming controls without the old AI heading', () => {
+    const store = createSettingsViewStore()
+    renderSettingsView(store)
+    switchSettingsTab('Naming')
+
+    expect(screen.getByRole('heading', { name: 'Naming' })).toBeInTheDocument()
+    expect(screen.getByText('Gemini API key')).toBeInTheDocument()
+    expect(screen.getByText('Auto-generate session titles')).toBeInTheDocument()
+    expect(screen.getByText('Naming prompt')).toBeInTheDocument()
+    expect(screen.queryByRole('heading', { name: 'AI' })).not.toBeInTheDocument()
+  })
+
+  it('debounces Gemini API key saves', async () => {
+    const store = createSettingsViewStore()
+    renderSettingsView(store)
+    switchSettingsTab('Naming')
+
+    fireEvent.change(screen.getByPlaceholderText('Enter Gemini API key'), {
+      target: { value: 'gemini-key' },
+    })
+
+    expect(store.getState().settings.settings.ai.geminiApiKey).toBe('gemini-key')
+    await act(async () => {
+      vi.advanceTimersByTime(500)
+    })
+    expect(api.patch).toHaveBeenCalledWith('/api/settings', {
+      ai: { geminiApiKey: 'gemini-key' },
+    })
+  })
+
+  it('toggles automatic session titles through server settings', async () => {
+    const store = createSettingsViewStore({
+      settings: { sidebar: { autoGenerateTitles: true } },
+    })
+    renderSettingsView(store)
+    switchSettingsTab('Naming')
+
+    fireEvent.click(screen.getByRole('switch', { name: 'Auto-generate session titles' }))
+
+    expect(store.getState().settings.settings.sidebar.autoGenerateTitles).toBe(false)
+    await act(async () => {
+      await Promise.resolve()
+    })
+    expect(api.patch).toHaveBeenCalledWith('/api/settings', {
+      sidebar: { autoGenerateTitles: false },
+    })
+  })
+
+  it('debounces naming prompt saves', async () => {
+    const store = createSettingsViewStore()
+    renderSettingsView(store)
+    switchSettingsTab('Naming')
+
+    fireEvent.change(screen.getByPlaceholderText(/Generate a short title/), {
+      target: { value: 'Name this session tersely.' },
+    })
+
+    expect(store.getState().settings.settings.ai.titlePrompt).toBe('Name this session tersely.')
+    await act(async () => {
+      vi.advanceTimersByTime(500)
+    })
+    expect(api.patch).toHaveBeenCalledWith('/api/settings', {
+      ai: { titlePrompt: 'Name this session tersely.' },
+    })
+  })
+})
diff --git a/test/unit/client/components/SettingsView.network-access.test.tsx b/test/unit/client/components/SettingsView.network-access.test.tsx
index ede06b25a..f98a686b7 100644
--- a/test/unit/client/components/SettingsView.network-access.test.tsx
+++ b/test/unit/client/components/SettingsView.network-access.test.tsx
@@ -35,9 +35,9 @@ describe('SettingsView network access section', () => {
   it('renders remote access toggle', () => {
     const store = createSettingsViewStore()
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
-    expect(screen.getByText(/remote access/i)).toBeInTheDocument()
+    expect(screen.getByRole('switch', { name: /remote access/i })).toBeInTheDocument()
   })
 
   it('shows firewall Fix button for WSL2 even with empty commands', () => {
@@ -51,7 +51,7 @@ describe('SettingsView network access section', () => {
       },
     })
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     expect(screen.getByRole('button', { name: /fix firewall/i })).toBeInTheDocument()
   })
@@ -67,7 +67,7 @@ describe('SettingsView network access section', () => {
       },
     })
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     expect(screen.getByText(/port may be blocked/i)).toBeInTheDocument()
     expect(screen.getByRole('button', { name: /fix firewall/i })).toBeInTheDocument()
@@ -87,7 +87,7 @@ describe('SettingsView network access section', () => {
     })
 
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     expect(screen.getByRole('switch', { name: /remote access/i })).not.toBeChecked()
     expect(screen.queryByRole('button', { name: /fix firewall/i })).not.toBeInTheDocument()
@@ -109,7 +109,7 @@ describe('SettingsView network access section', () => {
     })
 
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     expect(screen.getByRole('switch', { name: /remote access/i })).toBeChecked()
     expect(screen.getByRole('button', { name: /fix firewall/i })).toBeInTheDocument()
@@ -137,7 +137,7 @@ describe('SettingsView network access section', () => {
     })
 
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     expect(screen.getByRole('switch', { name: /remote access/i })).toBeChecked()
     expect(screen.getByRole('button', { name: /fix firewall/i })).toBeInTheDocument()
@@ -169,7 +169,7 @@ describe('SettingsView network access section', () => {
     })
 
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     fireEvent.click(screen.getByRole('switch', { name: /remote access/i }))
 
@@ -217,7 +217,7 @@ describe('SettingsView network access section', () => {
     })
 
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     fireEvent.click(screen.getByRole('switch', { name: /remote access/i }))
 
@@ -266,7 +266,7 @@ describe('SettingsView network access section', () => {
     })
 
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     fireEvent.click(screen.getByRole('switch', { name: /remote access/i }))
 
@@ -303,7 +303,7 @@ describe('SettingsView network access section', () => {
     })
 
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     fireEvent.click(screen.getByRole('switch', { name: /remote access/i }))
     const confirmationDialog = await screen.findByRole('dialog', { name: /administrator approval required/i })
@@ -337,7 +337,7 @@ describe('SettingsView network access section', () => {
     })
 
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     fireEvent.click(screen.getByRole('switch', { name: /remote access/i }))
 
@@ -364,7 +364,7 @@ describe('SettingsView network access section', () => {
     })
 
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     fireEvent.click(screen.getByRole('switch', { name: /remote access/i }))
 
@@ -400,7 +400,7 @@ describe('SettingsView network access section', () => {
     })
 
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     fireEvent.click(screen.getByRole('switch', { name: /remote access/i }))
 
@@ -452,7 +452,7 @@ describe('SettingsView network access section', () => {
     })
 
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     fireEvent.click(screen.getByRole('switch', { name: /remote access/i }))
 
@@ -495,7 +495,7 @@ describe('SettingsView network access section', () => {
     })
 
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     fireEvent.click(screen.getByRole('switch', { name: /remote access/i }))
 
@@ -538,7 +538,7 @@ describe('SettingsView network access section', () => {
     })
 
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     fireEvent.click(screen.getByRole('button', { name: /fix firewall/i }))
 
@@ -581,7 +581,7 @@ describe('SettingsView network access section', () => {
     })
 
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     fireEvent.click(screen.getByRole('button', { name: /fix firewall/i }))
     const confirmationDialog = await screen.findByRole('dialog', { name: /administrator approval required/i })
@@ -628,7 +628,7 @@ describe('SettingsView network access section', () => {
     }))
 
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     fireEvent.click(screen.getByRole('button', { name: /fix firewall/i }))
     await act(async () => {
@@ -670,7 +670,7 @@ describe('SettingsView network access section', () => {
     })
 
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     fireEvent.click(screen.getByRole('button', { name: /fix firewall/i }))
 
@@ -698,7 +698,7 @@ describe('SettingsView network access section', () => {
     })
 
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     expect(screen.getByText(/firewall configuration already in progress/i)).toBeInTheDocument()
     expect(screen.queryByRole('button', { name: /fix firewall/i })).not.toBeInTheDocument()
@@ -739,7 +739,7 @@ describe('SettingsView network access section', () => {
     }))
 
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     fireEvent.click(screen.getByRole('button', { name: /fix firewall/i }))
     await act(async () => {
@@ -796,7 +796,7 @@ describe('SettingsView network access section', () => {
     }))
 
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     fireEvent.click(screen.getByRole('button', { name: /fix firewall/i }))
 
@@ -836,7 +836,7 @@ describe('SettingsView network access section', () => {
     vi.mocked(api.get).mockRejectedValue(new Error('status refresh failed'))
 
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     fireEvent.click(screen.getByRole('button', { name: /fix firewall/i }))
 
@@ -858,7 +858,7 @@ describe('SettingsView network access section', () => {
       },
     })
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     expect(screen.getByRole('alert')).toBeInTheDocument()
     expect(screen.getByText(/dev mode/i)).toBeInTheDocument()
@@ -879,7 +879,7 @@ describe('SettingsView network access section', () => {
       },
     })
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     expect(screen.queryByRole('alert')).not.toBeInTheDocument()
   })
@@ -895,7 +895,7 @@ describe('SettingsView network access section', () => {
       },
     })
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     expect(screen.getByRole('switch', { name: /remote access/i })).not.toBeDisabled()
   })
@@ -910,7 +910,7 @@ describe('SettingsView network access section', () => {
       },
     })
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     expect(screen.getByRole('switch', { name: /remote access/i })).toBeDisabled()
   })
@@ -929,7 +929,7 @@ describe('SettingsView network access section', () => {
       },
     })
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     expect(screen.getByRole('switch', { name: /remote access/i })).toBeDisabled()
     expect(screen.queryByRole('button', { name: /fix firewall/i })).not.toBeInTheDocument()
@@ -944,7 +944,7 @@ describe('SettingsView network access section', () => {
       },
     })
     renderSettingsView(store, { onNavigate: vi.fn() })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     expect(screen.getByText('Get link')).toBeInTheDocument()
   })
@@ -959,7 +959,7 @@ describe('SettingsView network access section', () => {
       },
     })
     renderSettingsView(store, { onNavigate: vi.fn(), onSharePanel })
-    switchSettingsTab('Safety')
+    switchSettingsTab('Network')
 
     fireEvent.click(screen.getByText('Get link'))
     expect(onSharePanel).toHaveBeenCalledOnce()
diff --git a/test/unit/client/components/SettingsView.panes.test.tsx b/test/unit/client/components/SettingsView.panes.test.tsx
index ab9912c34..1fa3f7580 100644
--- a/test/unit/client/components/SettingsView.panes.test.tsx
+++ b/test/unit/client/components/SettingsView.panes.test.tsx
@@ -72,9 +72,9 @@ describe('SettingsView Panes section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
-    expect(screen.getByText('Panes')).toBeInTheDocument()
+    expect(screen.getByRole('heading', { name: 'Pane behavior' })).toBeInTheDocument()
   })
 
   it('renders Default new pane dropdown', () => {
@@ -84,7 +84,7 @@ describe('SettingsView Panes section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     expect(screen.getByText('Default new pane')).toBeInTheDocument()
   })
@@ -96,7 +96,7 @@ describe('SettingsView Panes section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     const dropdown = screen.getByRole('combobox', { name: /default new pane/i })
     expect(dropdown).toHaveValue('shell')
@@ -109,7 +109,7 @@ describe('SettingsView Panes section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     const dropdown = screen.getByRole('combobox', { name: /default new pane/i })
     const options = dropdown.querySelectorAll('option')
@@ -128,7 +128,7 @@ describe('SettingsView Panes section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     expect(screen.getByText('Snap distance')).toBeInTheDocument()
   })
@@ -140,7 +140,7 @@ describe('SettingsView Panes section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     // The slider should show "2%" for the default value
     expect(screen.getByText('2%')).toBeInTheDocument()
@@ -153,7 +153,7 @@ describe('SettingsView Panes section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     const snapSlider = screen.getAllByRole('slider').find((slider) => {
       return slider.getAttribute('min') === '0' && slider.getAttribute('max') === '8'
@@ -178,7 +178,7 @@ describe('SettingsView Panes section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     expect(screen.getByText('Open sidebar session in')).toBeInTheDocument()
     expect(screen.getByRole('button', { name: /new tab/i })).toBeInTheDocument()
@@ -192,7 +192,7 @@ describe('SettingsView Panes section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     const splitButton = screen.getByRole('button', { name: /split pane/i })
     fireEvent.click(splitButton)
@@ -213,7 +213,7 @@ describe('SettingsView Panes section', () => {
         <SettingsView />
       </Provider>
     )
-    switchSettingsTab('Workspace')
+    switchSettingsTab('Panes')
 
     const row = screen.getByText('Icons on tabs').closest('div')!
     const toggle = row.querySelector('button')!
diff --git a/test/unit/client/components/component-edge-cases.test.tsx b/test/unit/client/components/component-edge-cases.test.tsx
index 6d7b82778..8958030d7 100644
--- a/test/unit/client/components/component-edge-cases.test.tsx
+++ b/test/unit/client/components/component-edge-cases.test.tsx
@@ -774,7 +774,7 @@ describe('Component Edge Cases', () => {
         const store = createTestStore()
         renderWithStore(<SettingsView />, store)
 
-        fireEvent.click(screen.getByRole('tab', { name: 'Safety' }))
+        fireEvent.click(screen.getByRole('tab', { name: 'Advanced' }))
         const defaultCwdInput = screen.getByPlaceholderText('e.g. C:\\Users\\you\\projects')
         let finalPath = ''
 
@@ -882,7 +882,7 @@ describe('Component Edge Cases', () => {
 
         renderWithStore(<SettingsView />, store)
 
-        fireEvent.click(screen.getByRole('tab', { name: 'Safety' }))
+        fireEvent.click(screen.getByRole('tab', { name: 'Advanced' }))
         fireEvent.change(screen.getByPlaceholderText('e.g. C:\\Users\\you\\projects'), {
           target: { value: '/tmp/save-failure' },
         })
@@ -1057,7 +1057,7 @@ describe('Component Edge Cases', () => {
         const store = createTestStore()
         const { unmount } = renderWithStore(<SettingsView />, store)
 
-        fireEvent.click(screen.getByRole('tab', { name: 'Safety' }))
+        fireEvent.click(screen.getByRole('tab', { name: 'Advanced' }))
         // Trigger a save
         fireEvent.change(screen.getByPlaceholderText('e.g. C:\\Users\\you\\projects'), {
           target: { value: '/tmp/pending-save' },
diff --git a/test/unit/client/components/fresh-agent/FreshAgentComposer.test.tsx b/test/unit/client/components/fresh-agent/FreshAgentComposer.test.tsx
index e566411fc..9f9f1f590 100644
--- a/test/unit/client/components/fresh-agent/FreshAgentComposer.test.tsx
+++ b/test/unit/client/components/fresh-agent/FreshAgentComposer.test.tsx
@@ -186,6 +186,27 @@ describe('FreshAgentComposer', () => {
     expect(screen.getByTestId('fresh-agent-thinking-bar')).toHaveAttribute('data-state', 'active')
   })
 
+  it('matches message text sizing and labels the command and send buttons with tooltips', () => {
+    render(<FreshAgentComposer commands={COMMANDS} onSend={vi.fn()} />)
+
+    expect(getInput().className).toContain('fresh-agent-composer-input')
+    expect(getInput().className).toContain('text-base')
+    expect(getInput().className).toContain('sm:text-sm')
+
+    const commandButton = screen.getByRole('button', { name: 'Slash commands' })
+    expect(commandButton).toHaveAttribute('title', 'Slash commands')
+    expect(commandButton.querySelector('.lucide-list-start')).not.toBeNull()
+
+    fireEvent.mouseEnter(commandButton)
+    expect(screen.getByRole('tooltip')).toHaveTextContent('Slash commands')
+    fireEvent.mouseLeave(commandButton)
+
+    const sendButton = screen.getByRole('button', { name: 'Send' })
+    expect(sendButton).toHaveAttribute('title', 'Send message')
+    fireEvent.focus(sendButton)
+    expect(screen.getByRole('tooltip')).toHaveTextContent('Send message')
+  })
+
   describe('state-aware disabled behavior', () => {
     it('shows the provided placeholder instead of the generic read-only text', () => {
       render(
diff --git a/test/unit/client/components/fresh-agent/FreshAgentTranscript.test.tsx b/test/unit/client/components/fresh-agent/FreshAgentTranscript.test.tsx
index 5ab101fca..15d3d12c2 100644
--- a/test/unit/client/components/fresh-agent/FreshAgentTranscript.test.tsx
+++ b/test/unit/client/components/fresh-agent/FreshAgentTranscript.test.tsx
@@ -139,7 +139,9 @@ describe('FreshAgentTranscript', () => {
       />,
     )
 
-    expect(screen.getByText('**not bold** and # not a heading')).toBeInTheDocument()
+    const userMessage = screen.getByText('**not bold** and # not a heading')
+    expect(userMessage).toBeInTheDocument()
+    expect(userMessage.className).not.toContain('text-sm')
     expect(container.querySelector('strong')).toBeNull()
     expect(container.querySelector('h1')).toBeNull()
   })
diff --git a/test/unit/client/components/panes/PanePicker.test.tsx b/test/unit/client/components/panes/PanePicker.test.tsx
index f808fe2f1..7560c88fc 100644
--- a/test/unit/client/components/panes/PanePicker.test.tsx
+++ b/test/unit/client/components/panes/PanePicker.test.tsx
@@ -56,6 +56,7 @@ function createStore(overrides?: {
   serverInstanceId?: string
   availableClis?: Record<string, boolean>
   enabledProviders?: string[]
+  disabledExtensions?: string[]
   extensions?: ClientExtensionEntry[]
   featureFlags?: Record<string, boolean>
   freshClientsEnabled?: boolean
@@ -105,6 +106,9 @@ function createStore(overrides?: {
             enabled: overrides?.freshClientsEnabled ?? false,
           },
           logging: { debug: false },
+          extensions: {
+            disabled: overrides?.disabledExtensions ?? [],
+          },
         },
         loaded: true,
         lastSavedAt: null,
@@ -309,6 +313,20 @@ describe('PanePicker', () => {
       expect(document.body.textContent).not.toMatch(/agent[-\s]?chat/i)
     })
 
+    it('hides a Fresh-agent picker entry disabled by session type without hiding its CLI', () => {
+      renderPicker({
+        availableClis: { claude: true, codex: true },
+        enabledProviders: ['claude', 'codex'],
+        extensions: defaultCliExtensions,
+        freshClientsEnabled: true,
+        disabledExtensions: ['freshcodex'],
+      })
+
+      expect(screen.getByRole('button', { name: 'Freshclaude' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Codex CLI' })).toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'Freshcodex' })).not.toBeInTheDocument()
+    })
+
     it('shows only non-CLI options when no CLIs are available', () => {
       renderPicker({ availableClis: {} })
       expect(screen.queryByRole('button', { name: 'Claude CLI' })).not.toBeInTheDocument()
diff --git a/test/unit/client/components/settings-view-test-utils.tsx b/test/unit/client/components/settings-view-test-utils.tsx
index 63a075452..ba9cd8c21 100644
--- a/test/unit/client/components/settings-view-test-utils.tsx
+++ b/test/unit/client/components/settings-view-test-utils.tsx
@@ -213,7 +213,14 @@ export function renderSettingsView(store: SettingsViewStore, props: SettingsView
   )
 }
 
-export type SettingsTab = 'Appearance' | 'Workspace' | 'Safety' | 'Advanced'
+export type SettingsTab =
+  | 'Appearance'
+  | 'Coding Agents'
+  | 'Panes'
+  | 'Workspace'
+  | 'Naming'
+  | 'Network'
+  | 'Advanced'
 
 /** Click a tab button in the settings tabbed navigation to switch sections. */
 export function switchSettingsTab(tab: SettingsTab) {