noteconnection 1.7.0 → 1.8.0

package/dist/src/frontend/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' data: https://fonts.gstatic.com; img-src 'self' data: blob:; connect-src 'self' http://127.0.0.1:* http://localhost:* ws://127.0.0.1:* ws://localhost:* tauri://localhost http://tauri.localhost https://tauri.localhost; worker-src 'self' blob:; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; form-action 'self';"
+      content="default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' data: https://fonts.gstatic.com; img-src 'self' data: blob:; connect-src 'self' ipc: http://127.0.0.1:* http://localhost:* http://ipc.localhost https://ipc.localhost ws://127.0.0.1:* ws://localhost:* tauri://localhost http://tauri.localhost https://tauri.localhost; worker-src 'self' blob:; object-src 'none'; base-uri 'self'; form-action 'self';"
     />
     <title>NoteConnection Knowledge Graph</title>
     <link
@@ -123,6 +123,20 @@
         >
           NoteMD
         </button>
+        <button
+          id="btn-open-agent-workspace"
+          style="
+            background: #744210;
+            color: #fff8e1;
+            border: 1px solid #a16207;
+            padding: 2px 8px;
+            cursor: pointer;
+          "
+          data-i18n="agentWorkspace.actions.openWorkspace"
+          title="Open Knowledge Workspace"
+        >
+          Knowledge Workspace
+        </button>
         <span
           id="kb-current-path"
           style="
@@ -140,6 +154,131 @@
         ></span>
       </div>
 
+      <div id="agent-workspace-backdrop" class="agent-workspace-backdrop" hidden></div>
+      <aside
+        id="agent-workspace-drawer"
+        class="agent-workspace-drawer"
+        aria-hidden="true"
+        data-open="false"
+      >
+        <div class="agent-workspace-drawer-frame">
+          <div class="agent-workspace-drawer-toolbar">
+            <div class="agent-workspace-drawer-heading">
+              <span class="agent-workspace-drawer-title" data-i18n="agentWorkspace.title">Knowledge Workspace</span>
+              <span class="agent-workspace-drawer-subtitle" data-i18n="agentWorkspace.subtitle">Grounded conversation, knowledge search, and guided learning</span>
+            </div>
+            <button
+              id="btn-close-agent-workspace"
+              type="button"
+              class="agent-workspace-drawer-close"
+              data-i18n="agentWorkspace.actions.closeWorkspace"
+            >
+              Close
+            </button>
+          </div>
+
+          <div id="agent-workspace-shell" class="agent-workspace-shell">
+            <section id="agent-chat-pane" class="agent-chat-pane">
+              <div class="agent-pane-header">
+                <h3 data-i18n="agentWorkspace.conversationTitle">Grounded Conversation</h3>
+                <span class="agent-pane-subtitle" data-i18n="agentWorkspace.conversationSubtitle">Scoped knowledge, citations, and guided learning actions</span>
+              </div>
+              <div class="agent-scope-control agent-scope-control--workspace">
+                <label for="agent-workspace-scope-select" data-i18n="agentWorkspace.scope.label">Knowledge Scope</label>
+                <select id="agent-workspace-scope-select" aria-describedby="agent-workspace-scope-summary"></select>
+                <div
+                  id="agent-workspace-scope-summary"
+                  class="agent-scope-summary"
+                  data-i18n="agentWorkspace.scope.summaryAll"
+                >All folders</div>
+              </div>
+              <div class="agent-pane-field">
+                <label for="agent-workspace-user-id" data-i18n="agentWorkspace.userId">Learner ID</label>
+                <input id="agent-workspace-user-id" type="text" value="path_user_default" />
+              </div>
+              <div id="agent-workspace-chat-messages" class="agent-chat-messages"></div>
+              <div id="agent-workspace-knowledge-points" class="agent-knowledge-points">
+                <div class="agent-knowledge-empty" data-i18n="agentWorkspace.knowledge.emptyInitial">No scoped knowledge matches yet.</div>
+              </div>
+              <div class="agent-pane-field agent-chat-input-field">
+                <label for="agent-workspace-chat-input" data-i18n="agentWorkspace.inputLabel">Ask the scoped knowledge corpus</label>
+                <textarea
+                  id="agent-workspace-chat-input"
+                  rows="3"
+                  placeholder="Ask about a concept, citation, prerequisite, or study step..."
+                  data-i18n-placeholder="agentWorkspace.inputPlaceholder"
+                ></textarea>
+              </div>
+              <div class="agent-pane-actions">
+                <button id="btn-agent-workspace-send" type="button" data-i18n="agentWorkspace.actions.send">Send</button>
+              </div>
+              <div
+                id="agent-workspace-api-status"
+                class="agent-api-status"
+                data-api-state="idle"
+                aria-live="polite"
+              ></div>
+            </section>
+
+            <div id="agent-side-work-area" class="agent-side-work-area">
+              <section
+                id="agent-graph-focus-pane"
+                class="agent-workspace-pane"
+                data-open="false"
+                data-fullscreen="false"
+              >
+                <div class="agent-workspace-pane-header">
+                  <h4 data-i18n="agentWorkspace.graphFocus.title">Knowledge Focus</h4>
+                  <div class="agent-pane-controls">
+                    <button id="btn-agent-graph-focus-fullscreen" type="button" data-i18n="agentWorkspace.actions.fullscreen">Fullscreen</button>
+                    <button id="btn-agent-graph-focus-close" class="agent-pane-close-button" type="button" aria-label="Close pane">&times;</button>
+                  </div>
+                </div>
+                <div id="agent-graph-focus-body" class="agent-workspace-pane-body">
+                  <div class="agent-pane-empty" data-i18n="agentWorkspace.graphFocus.emptyIdle">Graph focus pane is idle.</div>
+                </div>
+              </section>
+
+              <section
+                id="agent-evidence-pane"
+                class="agent-workspace-pane"
+                data-open="false"
+                data-fullscreen="false"
+              >
+                <div class="agent-workspace-pane-header">
+                  <h4 data-i18n="agentWorkspace.evidence.title">Evidence Inspector</h4>
+                  <div class="agent-pane-controls">
+                    <button id="btn-agent-evidence-fullscreen" type="button" data-i18n="agentWorkspace.actions.fullscreen">Fullscreen</button>
+                    <button id="btn-agent-evidence-close" class="agent-pane-close-button" type="button" aria-label="Close pane">&times;</button>
+                  </div>
+                </div>
+                <div id="agent-evidence-body" class="agent-workspace-pane-body">
+                  <div class="agent-pane-empty" data-i18n="agentWorkspace.evidence.emptyIdle">Evidence pane is idle.</div>
+                </div>
+              </section>
+
+              <section
+                id="agent-learning-path-pane"
+                class="agent-workspace-pane"
+                data-open="false"
+                data-fullscreen="false"
+              >
+                <div class="agent-workspace-pane-header">
+                  <h4 data-i18n="agentWorkspace.learningPath.title">Guided Learning</h4>
+                  <div class="agent-pane-controls">
+                    <button id="btn-agent-learning-path-fullscreen" type="button" data-i18n="agentWorkspace.actions.fullscreen">Fullscreen</button>
+                    <button id="btn-agent-learning-path-close" class="agent-pane-close-button" type="button" aria-label="Close pane">&times;</button>
+                  </div>
+                </div>
+                <div id="agent-learning-path-body" class="agent-workspace-pane-body">
+                  <div class="agent-pane-empty" data-i18n="agentWorkspace.learningPath.emptyIdle">Learning path pane is idle.</div>
+                </div>
+              </section>
+            </div>
+          </div>
+        </div>
+      </aside>
+
       <div id="controls">
         <h3
           style="
@@ -828,304 +967,420 @@
             </button>
           </div>
         </div>
-        <div id="reading-body" class="reading-body locked">
-          <!-- Content injected here -->
+        <div class="reading-layout">
+          <div class="reading-main">
+            <div id="reading-diagnostics" class="reading-diagnostics">
+              <span class="reading-diagnostics-item" data-i18n="reader_loading">Reader loading...</span>
+            </div>
+            <div id="reading-body" class="reading-body locked">
+              <!-- Content injected here -->
+            </div>
+          </div>
+          <aside id="reading-outline" class="reading-outline" aria-label="Document outline">
+            <div class="reading-outline-header" data-i18n="reader_outline_title">Outline</div>
+            <div id="reading-outline-body" class="reading-outline-body">
+              <div class="reading-outline-empty" data-i18n="reader_outline_empty">No headings available.</div>
+            </div>
+          </aside>
         </div>
       </div>
     </div>
 
     <!-- Settings Modal -->
-    <div id="settings-modal" class="modal-overlay" style="display: none">
-      <div class="modal-content">
+    <div
+      id="settings-modal"
+      class="modal-overlay settings-modal-overlay"
+      style="display: none"
+    >
+      <div class="modal-content modal-content-settings">
         <div class="modal-header">
-          <h2 data-i18n="settings_title">Settings</h2>
-          <button class="modal-close">&times;</button>
-        </div>
-        <div class="modal-body">
-          <div class="settings-group">
-            <h3 data-i18n="grp_general">General</h3>
-            <div class="setting-item">
-              <label data-i18n="lbl_language">Language</label>
-              <select
-                id="set-language"
-                style="
-                  background: #444;
-                  color: white;
-                  border: 1px solid #555;
-                  padding: 2px;
-                "
-              >
-                <option value="en">English</option>
-                <option value="zh">中文</option>
-              </select>
-            </div>
-          </div>
-
-          <div class="settings-group">
-            <h3 data-i18n="grp_physics">Physics</h3>
-            <div class="setting-item">
-              <label data-i18n="lbl_repulsion">Repulsion Strength</label>
-              <input
-                type="range"
-                id="set-charge"
-                min="-1000"
-                max="-50"
-                step="50"
-              />
-              <span class="value-display" id="val-charge"></span>
-            </div>
-            <div class="setting-item">
-              <label data-i18n="lbl_distance">Link Distance</label>
-              <input
-                type="range"
-                id="set-distance"
-                min="20"
-                max="900"
-                step="10"
-              />
-              <span class="value-display" id="val-distance"></span>
-            </div>
-            <div class="setting-item">
-              <label data-i18n="lbl_collision">Collision Radius</label>
-              <input
-                type="range"
-                id="set-collision"
-                min="5"
-                max="100"
-                step="5"
-              />
-              <span class="value-display" id="val-collision"></span>
-            </div>
+          <div class="modal-header-copy">
+            <h2 data-i18n="settings_title">Visualization Settings</h2>
+            <p class="settings-modal-subtitle" data-i18n="settings_subtitle">
+              Keep graph, reading, and performance controls compact. Agent
+              provider setup lives on its own page.
+            </p>
           </div>
-
-          <div class="settings-group">
-            <div class="setting-item">
-              <label
-                ><span data-i18n="lbl_inbound_count"
-                  >Inbound Count:</span
-                ></label
-              >
-              <select
-                id="set-degree-mode"
-                style="
-                  background: #444;
-                  color: white;
-                  border: 1px solid #555;
-                  padding: 2px;
-                "
-              >
-                <option value="visible" data-i18n="opt_visible">
-                  Visible Nodes (Default)
-                </option>
-                <option value="total" data-i18n="opt_total">
-                  Total Statistical
-                </option>
-              </select>
-            </div>
-
-            <h3 data-i18n="grp_performance">Performance</h3>
-            <div class="setting-item">
-              <label data-i18n="lbl_max_workers">Max Workers (Memory)</label>
-              <div style="display: flex; gap: 10px; align-items: center">
-                <input
-                  type="range"
-                  id="set-workers-slider"
-                  min="1"
-                  max="32"
-                  value="4"
-                  style="flex: 1"
-                />
-                <input
-                  type="number"
-                  id="set-workers-input"
-                  min="1"
-                  max="128"
-                  value="4"
-                  style="
-                    width: 50px;
-                    background: #333;
-                    color: white;
-                    border: 1px solid #555;
-                  "
-                />
-              </div>
-              <div
-                style="font-size: 0.75rem; color: #888; margin-top: 2px"
-                data-i18n="desc_workers"
-              >
-                Lower this if Node.js runs out of memory.
+          <button class="modal-close" data-settings-close="main">&times;</button>
+        </div>
+        <div class="modal-body settings-modal-body">
+          <div class="settings-page-grid">
+            <section class="settings-card">
+              <div class="settings-group">
+                <h3 data-i18n="grp_general">General</h3>
+                <div class="setting-item">
+                  <label data-i18n="lbl_language">Language</label>
+                  <select id="set-language" class="settings-select">
+                    <option value="en">English</option>
+                    <option value="zh">中文</option>
+                  </select>
+                </div>
               </div>
-            </div>
+            </section>
 
-            <div class="setting-item">
-              <label
-                style="display: flex; align-items: center; cursor: pointer"
-              >
-                <input type="checkbox" id="set-gpu" checked />
-                <span style="margin-left: 10px" data-i18n="lbl_gpu"
-                  >Enable GPU Acceleration</span
-                >
-              </label>
-              <div
-                style="font-size: 0.75rem; color: #888; margin-top: 2px"
-                data-i18n="desc_gpu"
-              >
-                Use GPU for similarity calculation (Requires page reload).
+            <section class="settings-card">
+              <div class="settings-group">
+                <h3 data-i18n="grp_visuals">Visuals</h3>
+                <div class="setting-item">
+                  <label data-i18n="lbl_opacity">Edge Opacity</label>
+                  <input
+                    type="range"
+                    id="set-opacity"
+                    min="0.1"
+                    max="1.0"
+                    step="0.1"
+                  />
+                  <span class="value-display" id="val-opacity"></span>
+                </div>
+                <div class="setting-item">
+                  <label><span data-i18n="lbl_inbound_count">Inbound Count:</span></label>
+                  <select id="set-degree-mode" class="settings-select">
+                    <option value="visible" data-i18n="opt_visible">
+                      Visible Nodes (Default)
+                    </option>
+                    <option value="total" data-i18n="opt_total">
+                      Total Statistical
+                    </option>
+                  </select>
+                </div>
               </div>
-            </div>
+            </section>
 
-            <div class="setting-item">
-              <label
-                style="display: flex; align-items: center; cursor: pointer"
-              >
-                <input type="checkbox" id="set-memory-saving" />
-                <span style="margin-left: 10px" data-i18n="lbl_memory_saving"
-                  >Large File Memory Saving Strategy</span
-                >
-              </label>
-              <div
-                style="font-size: 0.75rem; color: #888; margin-top: 2px"
-                data-i18n="desc_memory_saving"
-              >
-                Use lower precision strategies to prevent OOM on large files.
+            <section class="settings-card">
+              <div class="settings-group">
+                <h3 data-i18n="grp_physics">Physics</h3>
+                <div class="setting-item">
+                  <label data-i18n="lbl_repulsion">Repulsion Strength</label>
+                  <input
+                    type="range"
+                    id="set-charge"
+                    min="-1000"
+                    max="-50"
+                    step="50"
+                  />
+                  <span class="value-display" id="val-charge"></span>
+                </div>
+                <div class="setting-item">
+                  <label data-i18n="lbl_distance">Link Distance</label>
+                  <input
+                    type="range"
+                    id="set-distance"
+                    min="20"
+                    max="900"
+                    step="10"
+                  />
+                  <span class="value-display" id="val-distance"></span>
+                </div>
+                <div class="setting-item">
+                  <label data-i18n="lbl_collision">Collision Radius</label>
+                  <input
+                    type="range"
+                    id="set-collision"
+                    min="5"
+                    max="100"
+                    step="5"
+                  />
+                  <span class="value-display" id="val-collision"></span>
+                </div>
               </div>
-            </div>
+            </section>
 
-            <div class="setting-item">
-              <label
-                style="display: flex; align-items: center; cursor: pointer"
-              >
-                <input type="checkbox" id="set-compact-mode" />
-                <span style="margin-left: 10px" data-i18n="lbl_compact_mode"
-                  >Compact Mode (Hide Edges)</span
-                >
-              </label>
-              <div
-                style="font-size: 0.75rem; color: #888; margin-top: 2px"
-                data-i18n="desc_compact_mode"
-              >
-                Don't load/render edges by default to improve performance for
-                >5k nodes.
+            <section class="settings-card">
+              <div class="settings-group">
+                <h3 data-i18n="grp_performance">Performance</h3>
+                <div class="setting-item setting-item-stack">
+                  <label data-i18n="lbl_max_workers">Max Workers (Memory)</label>
+                  <div class="settings-inline-row">
+                    <input
+                      type="range"
+                      id="set-workers-slider"
+                      min="1"
+                      max="32"
+                      value="4"
+                      style="flex: 1"
+                    />
+                    <input
+                      type="number"
+                      id="set-workers-input"
+                      min="1"
+                      max="128"
+                      value="4"
+                      class="settings-number"
+                    />
+                  </div>
+                  <div class="settings-helper-block" data-i18n="desc_workers">
+                    Lower this if Node.js runs out of memory.
+                  </div>
+                </div>
+
+                <div class="setting-item setting-item-stack">
+                  <label class="settings-toggle">
+                    <input type="checkbox" id="set-gpu" checked />
+                    <span data-i18n="lbl_gpu">Enable GPU Acceleration</span>
+                  </label>
+                  <div class="settings-helper-block" data-i18n="desc_gpu">
+                    Use GPU for similarity calculation (Requires page reload).
+                  </div>
+                </div>
+
+                <div class="setting-item setting-item-stack">
+                  <label class="settings-toggle">
+                    <input type="checkbox" id="set-memory-saving" />
+                    <span data-i18n="lbl_memory_saving">Large File Memory Saving Strategy</span>
+                  </label>
+                  <div class="settings-helper-block" data-i18n="desc_memory_saving">
+                    Use lower precision strategies to prevent OOM on large files.
+                  </div>
+                </div>
+
+                <div class="setting-item setting-item-stack">
+                  <label class="settings-toggle">
+                    <input type="checkbox" id="set-compact-mode" />
+                    <span data-i18n="lbl_compact_mode">Compact Mode (Hide Edges)</span>
+                  </label>
+                  <div class="settings-helper-block" data-i18n="desc_compact_mode">
+                    Don't load/render edges by default to improve performance for >5k nodes.
+                  </div>
+                </div>
+
+                <div class="setting-item setting-item-stack">
+                  <label class="settings-toggle">
+                    <input type="checkbox" id="set-static-mode" />
+                    <span data-i18n="lbl_static_mode">Static Mode</span>
+                  </label>
+                  <div class="settings-helper-block" data-i18n="desc_static_mode">
+                    Stop simulation after 2 seconds. Recommended for large graphs.
+                  </div>
+                </div>
+
+                <div class="setting-item setting-item-stack">
+                  <label class="settings-toggle">
+                    <input type="checkbox" id="set-gpu-rendering" />
+                    <span data-i18n="lbl_gpu_rendering">GPU Optimised Rendering</span>
+                  </label>
+                  <div class="settings-helper-block" data-i18n="desc_gpu_rendering">
+                    Enable AMDGPU acceleration for loading and positioning.
+                  </div>
+                </div>
+
+                <div class="setting-item setting-item-stack">
+                  <label class="settings-toggle">
+                    <input type="checkbox" id="set-deep-debug" />
+                    <span data-i18n="lbl_deep_debug">Developer Mode</span>
+                  </label>
+                  <div class="settings-helper-block" data-i18n="desc_deep_debug">
+                    Show backend diagnostics and relation details in advanced workspace panes.
+                  </div>
+                </div>
               </div>
-            </div>
+            </section>
 
-            <div class="setting-item">
-              <label
-                style="display: flex; align-items: center; cursor: pointer"
-              >
-                <input type="checkbox" id="set-static-mode" />
-                <span style="margin-left: 10px" data-i18n="lbl_static_mode"
-                  >Static Mode</span
-                >
-              </label>
-              <div
-                style="font-size: 0.75rem; color: #888; margin-top: 2px"
-                data-i18n="desc_static_mode"
-              >
-                Stop simulation after 2 seconds. Recommended for large graphs.
+            <section class="settings-card">
+              <div class="settings-group">
+                <h3 data-i18n="grp_reading">Reading</h3>
+                <div class="setting-item">
+                  <label data-i18n="lbl_reading_mode">Open Mode</label>
+                  <select id="set-reading-mode" class="settings-select">
+                    <option value="window" data-i18n="opt_window">Window</option>
+                    <option value="fullscreen" data-i18n="opt_fullscreen">
+                      Full Screen
+                    </option>
+                  </select>
+                </div>
               </div>
-            </div>
 
-            <div class="setting-item">
-              <label
-                style="display: flex; align-items: center; cursor: pointer"
-              >
-                <input type="checkbox" id="set-gpu-rendering" />
-                <span style="margin-left: 10px" data-i18n="lbl_gpu_rendering"
-                  >GPU Optimised Rendering</span
-                >
-              </label>
-              <div
-                style="font-size: 0.75rem; color: #888; margin-top: 2px"
-                data-i18n="desc_gpu_rendering"
-              >
-                Enable AMDGPU acceleration for loading and positioning.
+              <div class="settings-group">
+                <h3 data-i18n="grp_path_mode">Path Mode</h3>
+                <div class="setting-item setting-item-stack">
+                  <label class="settings-toggle">
+                    <input type="checkbox" id="set-retain-history" checked />
+                    <span data-i18n="lbl_retain_history">Retain Learning History</span>
+                  </label>
+                  <div class="settings-helper-block" data-i18n="desc_retain_history">
+                    Keep learned nodes state across sessions.
+                  </div>
+                </div>
               </div>
-            </div>
+            </section>
 
-            <div class="setting-item">
-              <label
-                style="display: flex; align-items: center; cursor: pointer"
-              >
-                <input type="checkbox" id="set-deep-debug" />
-                <span style="margin-left: 10px" data-i18n="lbl_deep_debug"
-                  >Deep Debug</span
+            <section class="settings-card settings-card-accent">
+              <div class="settings-card-callout">
+                <span class="settings-card-kicker" data-i18n="grp_ai_provider">AI Provider</span>
+                <h3 class="settings-card-title" data-i18n="settings_agent_title">
+                  Agent Settings
+                </h3>
+                <p class="settings-card-copy" data-i18n="settings_agent_description">
+                  Provider presets, API keys, models, and TOML template actions are isolated on a dedicated page.
+                </p>
+                <button
+                  type="button"
+                  id="btn-open-agent-settings"
+                  class="btn btn-primary"
+                  data-i18n="settings_open_agent"
                 >
-              </label>
-              <div
-                style="font-size: 0.75rem; color: #888; margin-top: 2px"
-                data-i18n="desc_deep_debug"
-              >
-                Enable detailed logging for debugging.
+                  Open Agent Settings
+                </button>
               </div>
-            </div>
+            </section>
           </div>
+        </div>
+        <div class="modal-footer modal-footer-settings">
+          <button
+            class="btn btn-secondary"
+            id="btn-reset-settings"
+            data-i18n="btn_reset"
+          >
+            Reset
+          </button>
+          <button
+            class="btn btn-primary modal-close"
+            data-settings-close="main"
+            data-i18n="btn_done"
+          >
+            Done
+          </button>
+        </div>
+      </div>
+    </div>
 
-          <div class="settings-group">
-            <h3 data-i18n="grp_visuals">Visuals</h3>
-            <div class="setting-item">
-              <label data-i18n="lbl_opacity">Edge Opacity</label>
-              <input
-                type="range"
-                id="set-opacity"
-                min="0.1"
-                max="1.0"
-                step="0.1"
-              />
-              <span class="value-display" id="val-opacity"></span>
+    <div
+      id="agent-settings-modal"
+      class="modal-overlay settings-modal-overlay"
+      style="display: none"
+    >
+      <div class="modal-content modal-content-settings modal-content-agent-settings">
+        <div class="modal-header">
+          <div class="modal-header-copy">
+            <div class="settings-breadcrumb-row">
+              <button
+                type="button"
+                id="btn-agent-settings-back"
+                class="btn btn-secondary btn-inline-nav"
+                data-i18n="settings_back_to_general"
+              >
+                Back to Settings
+              </button>
             </div>
+            <h2 data-i18n="settings_agent_title">Agent Settings</h2>
+            <p class="settings-modal-subtitle" data-i18n="settings_agent_subtitle">
+              Provider, model, API key, and TOML template controls for agent workflows.
+            </p>
           </div>
+          <button class="modal-close" data-settings-close="agent">&times;</button>
+        </div>
+        <div class="modal-body settings-modal-body">
+          <div class="settings-page-grid settings-page-grid-single">
+            <section class="settings-card settings-card-wide">
+              <div class="settings-group">
+                <h3 data-i18n="grp_ai_provider">AI Provider</h3>
+                <div class="setting-item setting-item-stack">
+                  <label data-i18n="lbl_notemd_provider_template">Preset Template</label>
+                  <div class="settings-inline-row">
+                    <select id="set-notemd-provider-template" class="settings-select settings-select-grow"></select>
+                    <button
+                      type="button"
+                      id="btn-apply-notemd-provider-template"
+                      class="btn btn-secondary"
+                      data-i18n="btn_apply_provider_template"
+                    >
+                      Apply Preset
+                    </button>
+                  </div>
+                  <div
+                    id="set-notemd-provider-template-hint"
+                    class="settings-helper-block"
+                  ></div>
+                </div>
 
-          <div class="settings-group">
-            <h3 data-i18n="grp_path_mode">Path Mode</h3>
-            <div class="setting-item">
-              <label
-                style="display: flex; align-items: center; cursor: pointer"
-              >
-                <input type="checkbox" id="set-retain-history" checked />
-                <span style="margin-left: 10px" data-i18n="lbl_retain_history"
-                  >Retain Learning History</span
+                <div class="setting-item setting-item-stack">
+                  <label data-i18n="lbl_notemd_active_provider">Active Provider</label>
+                  <select id="set-notemd-provider-name" class="settings-select"></select>
+                </div>
+
+                <div class="setting-item setting-item-stack">
+                  <label data-i18n="lbl_notemd_provider_base_url">Base URL</label>
+                  <input type="text" id="set-notemd-provider-base-url" class="settings-text-input" />
+                </div>
+
+                <div class="setting-item setting-item-stack">
+                  <label data-i18n="lbl_notemd_provider_model">Model</label>
+                  <input type="text" id="set-notemd-provider-model" class="settings-text-input" />
+                </div>
+
+                <div class="setting-item setting-item-stack">
+                  <label data-i18n="lbl_notemd_provider_api_key">API Key</label>
+                  <input type="password" id="set-notemd-provider-api-key" class="settings-text-input" />
+                </div>
+
+                <div
+                  class="setting-item setting-item-stack"
+                  id="set-notemd-provider-api-version-row"
                 >
-              </label>
-              <div
-                style="font-size: 0.75rem; color: #888; margin-top: 2px"
-                data-i18n="desc_retain_history"
-              >
-                Keep learned nodes state across sessions.
-              </div>
-            </div>
-          </div>
+                  <label data-i18n="lbl_notemd_provider_api_version">API Version</label>
+                  <input type="text" id="set-notemd-provider-api-version" class="settings-text-input" />
+                  <div
+                    id="set-notemd-provider-api-version-hint"
+                    class="settings-helper-block"
+                    data-i18n="notemd_provider_api_version_optional"
+                  >
+                    Optional. Leave blank for standard OpenAI-compatible endpoints. This is mainly used by Azure OpenAI.
+                  </div>
+                </div>
 
-          <div class="settings-group">
-            <h3 data-i18n="grp_reading">Reading</h3>
-            <div class="setting-item">
-              <label data-i18n="lbl_reading_mode">Open Mode</label>
-              <select
-                id="set-reading-mode"
-                style="
-                  background: #444;
-                  color: white;
-                  border: 1px solid #555;
-                  padding: 2px;
-                "
-              >
-                <option value="window" data-i18n="opt_window">Window</option>
-                <option value="fullscreen" data-i18n="opt_fullscreen">
-                  Full Screen
-                </option>
-              </select>
-            </div>
+                <div class="setting-item setting-item-stack">
+                  <div class="settings-inline-row">
+                    <button
+                      type="button"
+                      id="btn-test-notemd-provider"
+                      class="btn btn-secondary"
+                      data-i18n="btn_test_provider_connection"
+                    >
+                      Test Connection
+                    </button>
+                    <button
+                      type="button"
+                      id="btn-save-notemd-provider"
+                      class="btn btn-primary"
+                      data-i18n="btn_save_provider_config"
+                    >
+                      Save Provider
+                    </button>
+                    <button
+                      type="button"
+                      id="btn-materialize-notemd-provider-templates"
+                      class="btn btn-secondary"
+                      data-i18n="btn_write_provider_templates"
+                    >
+                      Write TOML Templates
+                    </button>
+                  </div>
+                  <div
+                    id="set-notemd-provider-status"
+                    class="settings-helper-block"
+                  ></div>
+                  <div
+                    id="set-notemd-provider-config-path"
+                    class="settings-helper-block settings-helper-code"
+                  ></div>
+                </div>
+              </div>
+            </section>
           </div>
         </div>
-        <div class="modal-footer">
+        <div class="modal-footer modal-footer-settings">
           <button
+            type="button"
+            id="btn-agent-settings-back-footer"
             class="btn btn-secondary"
-            id="btn-reset-settings"
-            data-i18n="btn_reset"
+            data-i18n="settings_back_to_general"
           >
-            Reset
+            Back to Settings
           </button>
-          <button class="btn btn-primary modal-close" data-i18n="btn_done">
+          <button
+            class="btn btn-primary modal-close"
+            data-settings-close="agent"
+            data-i18n="btn_done"
+          >
             Done
           </button>
         </div>
@@ -1266,10 +1521,17 @@
     <script src="runtime_bridge.js"></script>
     <script src="storage_provider.js"></script>
     <script src="settings.js"></script>
+    <script src="markdown_runtime.js"></script>
     <script src="reader.js"></script>
     <!-- app.js removed for dynamic loading after data.js -->
     <script src="analysis.js"></script>
     <script src="loading.js"></script>
+    <script src="focus_mode_interactions.js"></script>
+    <script src="godot_tree_interactions.js"></script>
+    <script src="godot_future_path_renderer.js"></script>
+    <script src="hosted_future_path_runtime.js"></script>
+    <script src="workspace_panes.js"></script>
+    <script src="agent_workspace.js"></script>
     <script src="source_manager.js"></script>
     <script src="welcome.js"></script>
     <!-- Path Mode Container (Hidden by default) -->
@@ -1345,6 +1607,16 @@
           </button>
         </div>
 
+        <div class="toolbar-group">
+          <button
+            id="btn-toggle-learning-workbench"
+            class="icon-btn"
+            title="Toggle Learning Workbench"
+          >
+            <span>Workbench</span>
+          </button>
+        </div>
+
         <div class="toolbar-group right">
           <button id="btn-exit-path" class="icon-btn" title="Exit Path Mode">
             <i class="fas fa-times"></i> <span data-i18n="btn_exit">Exit</span>
@@ -1396,6 +1668,106 @@
       </div>
     </div>
 
+    <!-- Learning Workbench Sidebar -->
+    <div
+      id="learning-workbench-sidebar"
+      class="path-sidebar workbench-sidebar"
+      style="display: none"
+    >
+      <div class="sidebar-header">
+        <h3>Learning Workbench</h3>
+        <button id="btn-close-learning-workbench" class="close-btn">&times;</button>
+      </div>
+      <div class="sidebar-content workbench-content">
+        <div class="workbench-field">
+          <label for="learning-user-id">Learner ID</label>
+          <input
+            id="learning-user-id"
+            type="text"
+            placeholder="path_user_default"
+          />
+        </div>
+        <div class="workbench-row">
+          <button id="btn-refresh-learning-workbench" class="btn-small">Refresh</button>
+          <button id="btn-ingest-focus-node" class="btn-small">Ingest Focus</button>
+          <button id="btn-run-learning-session" class="btn-small">Run Session</button>
+          <button id="btn-run-retest-session" class="btn-small">Run Retest</button>
+        </div>
+        <div id="learning-workbench-status" class="workbench-status">Ready.</div>
+        <div id="learning-workbench-updated-at" class="workbench-updated-at">Last updated: -</div>
+
+        <div class="workbench-section">
+          <h4>Quality Snapshot</h4>
+          <div class="workbench-row">
+            <button id="btn-set-quality-baseline" class="btn-small" type="button">Set Baseline</button>
+            <button id="btn-evaluate-quality-gates" class="btn-small" type="button">Evaluate Gates</button>
+          </div>
+          <ul id="learning-quality-summary" class="workbench-list">
+            <li class="muted">No quality snapshot yet.</li>
+          </ul>
+          <pre id="learning-quality-gates" class="workbench-feedback">No quality gate evaluation yet.</pre>
+        </div>
+
+        <div class="workbench-section">
+          <h4>Top Misconceptions</h4>
+          <ul id="learning-misconception-list" class="workbench-list">
+            <li class="muted">No recurring misconceptions detected.</li>
+          </ul>
+        </div>
+
+        <div class="workbench-section">
+          <h4>Session Actions</h4>
+          <ul id="learning-session-actions" class="workbench-list">
+            <li class="muted">No session actions yet.</li>
+          </ul>
+        </div>
+
+        <div class="workbench-section">
+          <h4>Tutor Feedback</h4>
+          <pre id="learning-tutor-feedback" class="workbench-feedback">No tutor feedback yet.</pre>
+        </div>
+
+        <div class="workbench-section">
+          <h4>Session Execution</h4>
+          <pre id="learning-session-execution" class="workbench-feedback">No session execution yet.</pre>
+        </div>
+
+        <div class="workbench-section">
+          <h4>Session History</h4>
+          <div class="workbench-row">
+            <label for="learning-history-kind-filter">Kind</label>
+            <select id="learning-history-kind-filter" class="control-select">
+              <option value="all">All</option>
+              <option value="session">Session</option>
+              <option value="retest">Retest</option>
+              <option value="custom">Custom</option>
+            </select>
+            <button id="btn-learning-history-prev" class="btn-small" type="button">Prev</button>
+            <button id="btn-learning-history-next" class="btn-small" type="button">Next</button>
+            <span id="learning-history-page" class="muted">Page 1/1</span>
+          </div>
+          <div class="workbench-row">
+            <label for="learning-history-from-date">From</label>
+            <input id="learning-history-from-date" type="date" class="control-input" />
+            <label for="learning-history-to-date">To</label>
+            <input id="learning-history-to-date" type="date" class="control-input" />
+            <button id="btn-learning-history-apply-range" class="btn-small" type="button">Apply</button>
+            <button id="btn-learning-history-clear-range" class="btn-small" type="button">Clear</button>
+          </div>
+          <div id="learning-session-history-summary" class="workbench-runtime">
+            History summary: unavailable
+          </div>
+          <ul id="learning-session-history" class="workbench-list">
+            <li class="muted">No session history yet.</li>
+          </ul>
+        </div>
+
+        <div id="learning-runtime-summary" class="workbench-runtime">
+          Runtime: unavailable
+        </div>
+      </div>
+    </div>
+
     <!-- Node Selector Modal for Diffusion Mode -->
     <div id="node-select-modal" class="modal-overlay" style="display: none">
       <div class="modal-content" style="max-width: 500px">
@@ -1431,7 +1803,10 @@
 
     <!-- Path Mode Scripts -->
     <script src="libs/path_core.js"></script>
+    <script src="path_modules_bridge.js"></script>
     <script src="path_app.js"></script>
+
+    <!-- ES Module Entry (Vite dev/build) - loads after legacy scripts for backward compat -->
+    <script type="module" src="./main.mjs"></script>
   </body>
 </html>
-