feat: Agent Mode improvements — approval tiers, auto-apply edits, enhanced prompts

- Approval tiers in Settings: Ask All / Auto-Approve Edits / Full Autonomy
- Auto-apply respects approval tier (not just agent mode/full access)
- Richer agent mode prompt: autonomous, summarizes changes, self-fixes errors
- Agent Autonomy section in Settings with radio-style selector
- Context indicator already wired to ChatHeader (ops count + files changed)

Author: BunsDev

app/globals.css

@@ -1118,11 +1118,11 @@ body {
 
 .shell-utility-button {
   display: flex;
-  height: 36px;
-  width: 36px;
+  height: 30px;
+  width: 30px;
   align-items: center;
   justify-content: center;
-  border-radius: 14px;
+  border-radius: 10px;
   border: 1px solid transparent;
   background: color-mix(in srgb, var(--shell-chip-bg) 88%, transparent);
   color: var(--text-disabled);
@@ -2638,8 +2638,8 @@ p {
 .folder-tab {
   position: relative;
   z-index: 1;
-  padding: 7px 18px 8px;
-  font-size: 13px;
+  padding: 5px 14px 6px;
+  font-size: 12px;
   font-weight: 600;
   border: none;
   background: transparent;
@@ -2812,8 +2812,8 @@ p {
 .shell-mode-button {
   position: relative;
   display: flex;
-  height: 28px;
-  width: 28px;
+  height: 24px;
+  width: 24px;
   align-items: center;
   justify-content: center;
   border: none;
@@ -2849,7 +2849,7 @@ p {
 [data-theme='supreme'] .folder-tab-strip {
   align-items: center;
   gap: 2px;
-  padding: 6px;
+  padding: 4px;
   border: 1px solid var(--shell-pill-border);
   border-radius: 999px;
   background: linear-gradient(
@@ -2866,7 +2866,7 @@ p {
 }
 
 [data-theme='supreme'] .folder-tab {
-  padding: 8px 14px;
+  padding: 5px 12px;
   border-radius: 999px;
   color: var(--shell-icon-muted);
 }
@@ -2920,7 +2920,7 @@ p {
 [data-theme='supreme'] .shell-mode-switcher {
   position: relative;
   gap: 0;
-  padding: 6px;
+  padding: 3px;
   border: 1px solid var(--shell-pill-border);
   background: linear-gradient(
     180deg,
@@ -2932,9 +2932,9 @@ p {
 }
 
 [data-theme='supreme'] .shell-mode-button {
-  height: 42px;
-  width: 42px;
-  border-radius: 16px;
+  height: 32px;
+  width: 32px;
+  border-radius: 12px;
   color: var(--shell-icon-muted);
 }
 

app/page.tsx

@@ -484,7 +484,7 @@ export default function EditorLayout() {
   return (
     <div
       className={`app-shell flex h-full w-full overflow-hidden bg-[var(--bg)] text-[var(--text-primary)] ${
-        isMobile ? 'gap-0 p-0' : 'gap-1.5 p-1.5'
+        isMobile ? 'gap-0 p-0' : 'gap-1 p-1'
       }`}
       style={keyboardOffset > 0 ? { height: `calc(100% - ${keyboardOffset}px)` } : undefined}
     >
@@ -579,7 +579,7 @@ export default function EditorLayout() {
         ) : (
           <div
             data-tauri-drag-region
-            className={`shell-topbar flex items-center h-12 shrink-0 px-4 gap-2 tauri-drag-region ${isMacTauri && sidebarCollapsed ? 'pl-20' : ''}`}
+            className={`shell-topbar flex items-center h-10 shrink-0 px-4 gap-2 tauri-drag-region ${isMacTauri && sidebarCollapsed ? 'pl-20' : ''}`}
           >
             {/* Folder-style tab strip — hidden in TUI mode */}
             {!modeSpec.hideTabs && (
@@ -606,8 +606,8 @@ export default function EditorLayout() {
                       <span className="flex items-center gap-2">
                         <Icon
                           icon={VIEW_ICONS[v].icon}
-                          width={17}
-                          height={17}
+                          width={14}
+                          height={14}
                           className="folder-tab__icon"
                         />
                         <span className="hidden sm:inline">{VIEW_ICONS[v].label}</span>
@@ -670,7 +670,7 @@ export default function EditorLayout() {
                   className={`shell-mode-button ${mode === m.id ? 'shell-mode-button--active' : ''}`}
                   title={`${m.label} mode (⌘⇧${index + 1})`}
                 >
-                  <Icon icon={m.icon} width={15} height={15} />
+                  <Icon icon={m.icon} width={13} height={13} />
                 </button>
               ))}
             </div>
@@ -693,7 +693,7 @@ export default function EditorLayout() {
               className="shell-utility-button tauri-no-drag"
               title="Settings"
             >
-              <Icon icon="lucide:settings" width={18} height={18} className="animate-gear-sway" />
+              <Icon icon="lucide:settings" width={15} height={15} className="animate-gear-sway" />
             </button>
           </div>
         )}

components/agent-panel.tsx

@@ -4,7 +4,6 @@ import { useState, useRef, useEffect, useCallback, useMemo, type DragEvent } fro
 import { Icon } from '@iconify/react'
 import { ModeSelector } from '@/components/mode-selector'
 import { ChatHome } from '@/components/chat-home'
-import { KnotLogo } from '@/components/knot-logo'
 import { ChatHeader } from '@/components/chat-header'
 import type { AgentMode } from '@/components/mode-selector'
 import { usePermissions } from '@/components/permissions-toggle'
@@ -50,6 +49,7 @@ import {
   CODE_EDITOR_SYSTEM_PROMPT,
   buildEditorContext,
   getEffectiveSystemPrompt,
+  getAgentConfig,
 } from '@/lib/agent-session'
 import {
   SKILL_FIRST_OVERRIDE_TOKEN,
@@ -1829,10 +1829,14 @@ export function AgentPanel() {
     setActiveDiff(null)
   }, [activeDiff, appendMessage])
 
-  // ─── Auto-apply when full access is enabled ──────────────────
+  // ─── Auto-apply when full access or approval tier allows ──────
   const autoAppliedRef = useRef(new Set<string>())
+  const currentApprovalTier = useMemo(() => {
+    try { return getAgentConfig()?.approvalTier ?? 'ask-all' } catch { return 'ask-all' as const }
+  }, [messages.length]) // re-check when messages change
   useEffect(() => {
-    if (permissions !== 'full' && agentMode !== 'agent') return
+    const tierAllows = currentApprovalTier === 'auto-edits' || currentApprovalTier === 'auto-all'
+    if (permissions !== 'full' && agentMode !== 'agent' && !tierAllows) return
     const last = messages[messages.length - 1]
     if (!last || last.role !== 'assistant' || !last.editProposals?.length) return
     if (autoAppliedRef.current.has(last.id)) return
@@ -1850,7 +1854,7 @@ export function AgentPanel() {
       id: crypto.randomUUID(),
       role: 'system',
       type: 'tool',
-      content: `Auto-applied edits to ${fileNames}${agentMode === 'agent' ? ' (agent mode)' : ' (full access mode)'}.`,
+      content: `Auto-applied edits to ${fileNames}.`,
       timestamp: Date.now(),
     })
   }, [messages, permissions, agentMode, getFile, updateFileContent, openFile, appendMessage])
@@ -2061,7 +2065,7 @@ export function AgentPanel() {
         filesChanged={agentActivities.filter(a => a.type === 'edit' || a.type === 'write' || a.type === 'create').reduce((acc, a) => { if (a.file) acc.add(a.file); return acc }, new Set<string>()).size}
       />
       {messages.length > 0 && (
-        <div className="flex items-center justify-between border-b border-[var(--border)] bg-[var(--bg-elevated)] px-2.5 py-1 shrink-0">
+        <div className="flex items-center justify-between border-b border-[var(--border)] bg-[var(--bg-elevated)] px-2.5 py-0.5 shrink-0">
           <div className="flex min-w-0 items-center gap-1.5">
             {/* Font size controls */}
             <div className="inline-flex items-center gap-0.5">
@@ -2198,14 +2202,6 @@ export function AgentPanel() {
         />
       )}
 
-      {/* Branded footer — hidden on mobile to save space */}
-      <div className="shrink-0 hidden sm:flex items-center justify-center gap-1.5 px-3 py-0.5 border-t border-[var(--border)] bg-[var(--bg-elevated)]">
-        <KnotLogo size={9} className="opacity-40" />
-        <span className="text-[8px] text-[var(--text-disabled)] font-medium tracking-wide">
-          KnotCode
-        </span>
-        <span className="text-[7px] text-[var(--text-disabled)] opacity-50">v1.4.0</span>
-      </div>
     </div>
   )
 }

components/chat-header.tsx

@@ -42,7 +42,7 @@ export function ChatHeader({
 
   return (
     <div className="shrink-0">
-      <div className="flex items-center justify-between h-10 px-3 border-b border-[var(--border)] bg-[var(--bg-elevated)]">
+      <div className="flex items-center justify-between h-9 px-3 border-b border-[var(--border)] bg-[var(--bg-elevated)]">
         <div className="flex flex-1 min-w-0 items-center gap-2">
           {/* Streaming status indicator */}
           {isStreaming ? (

components/code-editor.tsx

@@ -918,7 +918,7 @@ export function CodeEditor() {
   return (
     <div ref={containerRef} tabIndex={-1} className="flex-1 flex flex-col min-h-0 outline-none">
       {/* Breadcrumb navigation */}
-      <div className="flex items-center justify-between gap-2 px-3 py-1 border-b border-[var(--border)] bg-[var(--bg)] shrink-0">
+      <div className="flex items-center justify-between gap-2 px-3 py-0.5 border-b border-[var(--border)] bg-[var(--bg)] shrink-0">
         <div className="flex items-center gap-0.5 overflow-x-auto no-scrollbar min-w-0">
           <Icon
             icon={fileIcon}

components/settings-panel.tsx

@@ -15,6 +15,7 @@ import {
   getRecents, addRecent, type SavedRepo,
 } from '@/lib/github-repos-store'
 import { THEME_PRESETS, useTheme, type ThemeMode, type ThemePreset } from '@/context/theme-context'
+import { getAgentConfig, saveAgentConfig, APPROVAL_TIERS, type ApprovalTier } from '@/lib/agent-session'
 
 type SettingsTab = 'connect' | 'general'
 
@@ -68,6 +69,17 @@ export function SettingsPanel({
   const [repoSearch, setRepoSearch] = useState('')
   const [showGatewayUrl, setShowGatewayUrl] = useState(false)
   const [connectExpanded, setConnectExpanded] = useState(false)
+  const [approvalTier, setApprovalTierState] = useState<ApprovalTier>(() => {
+    try { return getAgentConfig()?.approvalTier ?? 'ask-all' } catch { return 'ask-all' }
+  })
+
+  const updateApprovalTier = useCallback((tier: ApprovalTier) => {
+    setApprovalTierState(tier)
+    try {
+      const cfg = getAgentConfig() ?? { persona: '', systemPrompt: '', behaviors: {}, modelPreference: '' }
+      saveAgentConfig({ ...cfg, approvalTier: tier })
+    } catch {}
+  }, [])
 
   // Fetch GitHub user on token change
   const ghTokenRef = useRef(ghToken)
@@ -410,6 +422,48 @@ export function SettingsPanel({
                       <CaffeinateToggle />
                     </section>
 
+                    {/* Agent Autonomy */}
+                    <section className="rounded-[24px] border border-[var(--glass-border)] bg-[color-mix(in_srgb,var(--bg-elevated)_88%,transparent)] p-4 shadow-[var(--shadow-sm)]">
+                      <div className="mb-3 flex items-center gap-2">
+                        <span className="flex h-8 w-8 items-center justify-center rounded-2xl bg-[color-mix(in_srgb,var(--brand)_12%,transparent)] text-[var(--brand)]">
+                          <Icon icon="lucide:shield-check" width={14} />
+                        </span>
+                        <div>
+                          <h3 className="text-sm font-medium text-[var(--text-primary)]">Agent Autonomy</h3>
+                          <p className="text-[11px] text-[var(--text-secondary)]">
+                            Control what the agent can do without asking.
+                          </p>
+                        </div>
+                      </div>
+                      <div className="space-y-1.5">
+                        {APPROVAL_TIERS.map(tier => (
+                          <button
+                            key={tier.id}
+                            onClick={() => updateApprovalTier(tier.id)}
+                            className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl border text-left transition-all cursor-pointer ${
+                              approvalTier === tier.id
+                                ? 'border-[color-mix(in_srgb,var(--brand)_40%,var(--border))] bg-[color-mix(in_srgb,var(--brand)_8%,transparent)]'
+                                : 'border-transparent hover:bg-[color-mix(in_srgb,var(--text-primary)_4%,transparent)]'
+                            }`}
+                          >
+                            <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center shrink-0 ${
+                              approvalTier === tier.id
+                                ? 'border-[var(--brand)]'
+                                : 'border-[var(--text-disabled)]'
+                            }`}>
+                              {approvalTier === tier.id && <div className="w-2 h-2 rounded-full bg-[var(--brand)]" />}
+                            </div>
+                            <div>
+                              <p className={`text-[12px] font-medium ${approvalTier === tier.id ? 'text-[var(--text-primary)]' : 'text-[var(--text-secondary)]'}`}>
+                                {tier.label}
+                              </p>
+                              <p className="text-[10px] text-[var(--text-disabled)]">{tier.description}</p>
+                            </div>
+                          </button>
+                        ))}
+                      </div>
+                    </section>
+
                     {/* GitHub Account */}
                     <section className="rounded-[24px] border border-[var(--glass-border)] bg-[color-mix(in_srgb,var(--bg-elevated)_88%,transparent)] p-4 shadow-[var(--shadow-sm)]">
                       <div className="mb-3 flex items-center gap-2">