feat(settings): Settings 패널 4-탭 카테고리 정리 (v2.2.206)

9개 섹션을 모델·연결 / 지식·기억 / 연동 / 동작·고급 4탭으로 그룹핑.
표현 계층만 추가(탭 네비 + show/hide) — ID/data-save/리스너/renderState/
provider 무수정. 좁은 사이드뷰 줄바꿈, 활성 탭 setState 기억.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

media/settings-panel.html

@@ -14,9 +14,16 @@
 
     <div id="bannerError" class="banner" hidden></div>
 
+    <nav class="tabs" id="settingsTabs">
+        <button type="button" class="tab" data-tab="model">모델·연결</button>
+        <button type="button" class="tab" data-tab="knowledge">지식·기억</button>
+        <button type="button" class="tab" data-tab="integrations">연동</button>
+        <button type="button" class="tab" data-tab="advanced">동작·고급</button>
+    </nav>
+
     <main id="root">
         <!-- Connection -->
-        <section class="section" data-section="connection">
+        <section class="section" data-section="connection" data-tab="model">
             <h2>연결</h2>
             <p class="hint">로컬 AI 엔진(Ollama 또는 LM Studio) 위치와 기본 모델을 설정합니다.</p>
             <div class="row">
@@ -46,7 +53,7 @@
         </section>
 
         <!-- Datacollect -->
-        <section class="section" data-section="datacollect">
+        <section class="section" data-section="datacollect" data-tab="integrations">
             <h2>Datacollect (slash 명령)</h2>
             <p class="hint">채팅에서 <code>/research</code> · <code>/benchmark</code> · <code>/youtube</code> 를 입력하면 Datacollect Bridge로 위임됩니다. <strong>타깃</strong>으로 로컬(<code>npm run bridge</code>) 또는 NAS의 경량 Bridge 중 어디를 호출할지 선택합니다.</p>
             <div class="row">
@@ -118,7 +125,7 @@
         </section>
 
         <!-- Memory -->
-        <section class="section" data-section="memory">
+        <section class="section" data-section="memory" data-tab="knowledge">
             <h2>메모리</h2>
             <p class="hint">대화 응답 전에 주입되는 단기/중기/장기 메모리의 양을 조정합니다.</p>
             <div class="row toggle">
@@ -148,7 +155,7 @@
         </section>
 
         <!-- Brain -->
-        <section class="section" data-section="brain">
+        <section class="section" data-section="brain" data-tab="knowledge">
             <h2>두뇌 (지식 폴더)</h2>
             <p class="hint">현재 활성 두뇌 프로필 정보입니다. 추가·수정은 사이드바의 [변경 ▾ → 두뇌] 또는 VS Code Settings에서 처리합니다.</p>
             <div class="row">
@@ -165,7 +172,7 @@
         </section>
 
         <!-- Telegram -->
-        <section class="section" data-section="telegram">
+        <section class="section" data-section="telegram" data-tab="integrations">
             <h2>Telegram 봇</h2>
             <p class="hint">텔레그램으로 Astra와 대화하고 싶다면 BotFather에서 봇을 만들고 토큰을 여기에 저장하세요. Astra의 다른 기능에는 영향이 없습니다.</p>
 
@@ -205,7 +212,7 @@
         </section>
 
         <!-- Google (Calendar + Sheets) -->
-        <section class="section" data-section="google">
+        <section class="section" data-section="google" data-tab="integrations">
             <h2>Google (Calendar · Sheets)</h2>
             <p class="hint">회의록·할일을 Google Calendar 에 자동 등록하고 Sheets 를 읽고 쓰려면 OAuth 가 필요합니다. <a href="https://console.cloud.google.com/apis/credentials" target="_blank">Google Cloud Console</a> 에서 Desktop OAuth Client 만들고 Client ID/Secret 을 아래에 붙여넣으세요.</p>
 
@@ -285,7 +292,7 @@
         </section>
 
         <!-- Cloud LLM Providers -->
-        <section class="section" data-section="providers">
+        <section class="section" data-section="providers" data-tab="model">
             <h2>Cloud LLM Providers</h2>
             <p class="hint">Ollama / LM Studio 로컬 외에 cloud API 를 붙여서 모델 선택지를 확장. API key 는 모두 Secret Storage 에 저장 (settings.json 침범 X). 사이드바 모델 dropdown 에서 활성 provider 의 모델이 함께 표시됩니다.</p>
 
@@ -357,7 +364,7 @@
         </section>
 
         <!-- Devil Agent (도현) -->
-        <section class="section" data-section="devilAgent">
+        <section class="section" data-section="devilAgent" data-tab="advanced">
             <h2>🎭 Devil's Advocate (도현)</h2>
             <p class="hint">매 답변 직후 별도 LLM 호출로 *비판적 sparring partner* 가 한 문단 반박. 사용자의 사고를 능동적 방어로 전환. 같은 모델 재사용 (~10-15% 추가 비용).</p>
             <div class="row toggle">
@@ -369,7 +376,7 @@
         </section>
 
         <!-- Advanced -->
-        <section class="section" data-section="advanced">
+        <section class="section" data-section="advanced" data-tab="advanced">
             <h2>고급</h2>
             <p class="hint">대부분의 사용자는 건드릴 필요 없습니다.</p>
             <div class="row toggle">