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>
2026-06-08 10:29:03 +09:00
parent 681cfd2393
commit 116dafd3cf
5 changed files with 74 additions and 10 deletions
@@ -1,5 +1,11 @@
 # Astra Patch Notes

+## v2.2.206 (2026-06-08)
+### 🗂️ Settings 패널 카테고리 탭 정리
+- 길게 나열되던 9개 설정 섹션을 **4개 탭**으로 그룹핑 — **모델·연결**(연결+Cloud Providers) / **지식·기억**(메모리+두뇌) / **연동**(Datacollect+Telegram+Google) / **동작·고급**(Devil+고급).
+- 표현 계층만 추가(탭 네비 + show/hide) — 요소 ID·`data-save`·리스너·`renderState`·provider 전부 무수정이라 저장 동작 그대로. 좁은 사이드뷰 대응(탭 줄바꿈), 활성 탭 기억(setState).
+- 변경: [settings-panel.html](media/settings-panel.html) · [settings-panel.css](media/settings-panel.css) · [settings-panel.js](media/settings-panel.js).
+
 ## v2.2.205 (2026-06-05)
 ### 🧹 백엔드 분리 준비 — Bridge 타깃 토글(로컬/NAS) + /research 제거
 - **Datacollect Bridge 타깃 설정** 추가 — Astra Settings 패널에서 `로컬/NAS` 전환 + NAS URL/토큰(`x-bridge-token`). 기본 `로컬` = 현행 동작 그대로. ([bridgeClient.ts](src/features/datacollect/bridgeClient.ts) · [settings-panel](media/settings-panel.html) · [settingsPanelProvider.ts](src/features/settings/settingsPanelProvider.ts))
@@ -42,6 +42,38 @@ body {
    opacity: 0.7;
 }

+/* ─── Tabs (카테고리 네비) ─── */
+.tabs {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;          /* 좁은 사이드뷰에서 자동 줄바꿈 */
+    margin-bottom: 14px;
+}
+.tab {
+    padding: 6px 12px;
+    border-radius: 6px;
+    border: 1px solid var(--vscode-panel-border);
+    background: transparent;
+    color: var(--vscode-descriptionForeground);
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    white-space: nowrap;
+}
+.tab:hover {
+    color: var(--vscode-foreground);
+    background: var(--vscode-list-hoverBackground);
+}
+.tab.active {
+    background: var(--vscode-button-background);
+    color: var(--vscode-button-foreground);
+    border-color: var(--vscode-button-background);
+}
+/* 비활성 탭 섹션 숨김 — DOM 에는 그대로 두고 표시만 끈다(JS refs/state 무영향). */
+.section[hidden] {
+    display: none !important;
+}
+
 .hint {
    color: var(--vscode-descriptionForeground);
    font-size: 11px;
@@ -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">
@@ -482,5 +482,24 @@
        }
    }

+    // ---- Tabs (카테고리 네비) — 표현 계층만. 기존 refs/리스너/state 에 무영향 ----
+    (function initTabs() {
+        const tabButtons = Array.from(document.querySelectorAll('.tab'));
+        const sections = Array.from(document.querySelectorAll('.section'));
+        if (tabButtons.length === 0) return;
+        const valid = new Set(tabButtons.map((b) => b.dataset.tab));
+        function setActiveTab(tab) {
+            tabButtons.forEach((b) => b.classList.toggle('active', b.dataset.tab === tab));
+            // 숨김만(hidden) — DOM 제거 X. renderState 는 숨겨진 입력에도 값을 채운다.
+            sections.forEach((s) => { s.hidden = s.dataset.tab !== tab; });
+            try { const st = vscode.getState() || {}; vscode.setState({ ...st, activeTab: tab }); } catch (e) { /* noop */ }
+        }
+        tabButtons.forEach((b) => b.addEventListener('click', () => setActiveTab(b.dataset.tab)));
+        let initial = 'model';
+        try { const saved = (vscode.getState() || {}).activeTab; if (saved && valid.has(saved)) initial = saved; } catch (e) { /* noop */ }
+        if (!valid.has(initial)) initial = tabButtons[0].dataset.tab;
+        setActiveTab(initial);
+    })();
+
    vscode.postMessage({ type: 'ready' });
 })();
@@ -2,7 +2,7 @@
  "name": "astra",
  "displayName": "Astra",
  "description": "The personal intelligence layer for Antigravity and VS Code. A private cognitive partner for deep project context, memory, and proactive strategic decision-making.",
-  "version": "2.2.205",
+  "version": "2.2.206",
  "publisher": "g1nation",
  "license": "MIT",
  "icon": "assets/icon.png",