From f0d1dfac034d09012d436c5690bcb5e4a10e9b35 Mon Sep 17 00:00:00 2001
From: Matteo Merola <mattmezza@gmail.com>
Date: Fri, 10 Jul 2026 10:18:07 +0200
Subject: [PATCH 01/11] feat(admin): persist memory subtab in URL as ?memsub=
 param

- Add memorySubtab() Alpine component (modeled after vaultTabs) that
  reads/writes ?memsub= URL param and localStorage for bookmarking
- Replace plain HTMX nav buttons with Alpine @click + :class bindings
- Forward ?memsub= in adminTabs() on memory tab load and tab switch
- Preserve ?memsub= when switching between memory and other tabs
- Re-load memory tab on popstate when only memsub param changes
  (browser back/forward now restores the correct subtab)
---
 humux/api/templates/base.html            | 54 ++++++++++++++++++++++++
 humux/api/templates/dashboard.html       | 29 +++++++++++--
 humux/api/templates/partials/memory.html | 22 +++++-----
 3 files changed, 91 insertions(+), 14 deletions(-)

diff --git a/humux/api/templates/base.html b/humux/api/templates/base.html
index 95bae55d..5346b6a4 100644
--- a/humux/api/templates/base.html
+++ b/humux/api/templates/base.html
@@ -1354,6 +1354,60 @@
     }
     window.vaultTabs = vaultTabs;
 
+    // Memory tab: Settings | Long-term | Short-term sub-tabs.
+    // Persisted so bookmarking, refresh, and browser back/forward land on
+    // the same sub-tab. Modeled after vaultTabs (x-show within a single
+    // partial that re-renders into #tab-content).
+    function memorySubtab() {
+      const allowed = ['settings', 'long-term', 'short-term'];
+      return {
+        sub: (() => {
+          try {
+            const q = new URLSearchParams(window.location.search).get('memsub');
+            if (allowed.includes(q)) return q;
+            const ls = localStorage.getItem('memory_sub');
+            if (allowed.includes(ls)) return ls;
+          } catch (e) {}
+          return 'settings';
+        })(),
+        init() { this._syncUrl(this.sub); },
+        select(name) {
+          this.sub = name;
+          try { localStorage.setItem('memory_sub', name); } catch (e) {}
+          this._syncUrl(name);
+          // Load the sub-tab content via HTMX, replacing the full tab pane.
+          // Pagination/search params preserved via the view-specific URLs
+          // embedded in the template.
+          if (window.htmx) {
+            const url = '/partials/memory?view=' + encodeURIComponent(name);
+            htmx.ajax('GET', url, {target: '#tab-content', swap: 'innerHTML'});
+          }
+        },
+        _syncUrl(name) {
+          try {
+            const url = new URL(window.location.href);
+            if (url.searchParams.get('memsub') !== name) {
+              url.searchParams.set('memsub', name);
+              history.replaceState(history.state, '', url);
+            }
+          } catch (e) {}
+        },
+        // Returns the HTMX URL for the 'long-term' and 'short-term' views
+        // including the current offset/limit/q. For settings view, no extra
+        // params needed.
+        tabUrl(name) {
+          if (name === 'settings') return '/partials/memory?view=settings';
+          // These are supplied by the template context when the partial
+          // is rendered server-side; in the Alpine component we let the
+          // select() method pass a simple view param and let the server
+          // use defaults for offset/limit. The pagination buttons inside
+          // each view handle their own offsets.
+          return '/partials/memory?view=' + encodeURIComponent(name);
+        }
+      };
+    }
+    window.memorySubtab = memorySubtab;
+
     // Global: handle 401 by redirecting to auth gate
     document.body.addEventListener('htmx:responseError', function(e) {
       if (e.detail.xhr.status === 401) {
diff --git a/humux/api/templates/dashboard.html b/humux/api/templates/dashboard.html
index b43a5d34..612ed216 100644
--- a/humux/api/templates/dashboard.html
+++ b/humux/api/templates/dashboard.html
@@ -580,7 +580,14 @@ <h2 class="text-base text-accent">Agent Control</h2>
         // Defer the initial HTMX fetch so both Alpine and HTMX are fully
         // initialised before the request fires.
         this.$nextTick(() => {
-          htmx.ajax('GET', tabs[initialTab], {target: '#tab-content', swap: 'innerHTML'});
+          let url = tabs[initialTab];
+          // Forward sub-tab param for memory (?memsub=) so the initial load
+          // lands on the right sub-tab instead of always defaulting to settings.
+          if (initialTab === 'memory') {
+            const ms = new URLSearchParams(window.location.search).get('memsub');
+            if (ms) { url += '?view=' + encodeURIComponent(ms); }
+          }
+          htmx.ajax('GET', url, {target: '#tab-content', swap: 'innerHTML'});
         });
 
         window.addEventListener('popstate', () => {
@@ -594,17 +601,31 @@ <h2 class="text-base text-accent">Agent Control</h2>
         this.loadTab(name, true);
       },
       loadTab(name, updateUrl) {
-        if (!tabs[name] || this.tab === name && !updateUrl) {
+        // Always re-load memory when memsub param may have changed
+        // (e.g. browser back/forward). For other tabs, skip if already active.
+        if (!tabs[name] || (this.tab === name && !updateUrl && name !== 'memory')) {
           return;
         }
         this.tab = name;
+        let fetchUrl = tabs[name];
+        // Forward sub-tab param for memory (?memsub=) so the URL-preserved
+        // sub-tab is loaded after a refresh or navigation.
+        if (name === 'memory') {
+          const ms = new URLSearchParams(window.location.search).get('memsub');
+          if (ms) { fetchUrl += '?view=' + encodeURIComponent(ms); }
+        }
         showSkeleton('#tab-content');
-        htmx.ajax('GET', tabs[name], {target: '#tab-content', swap: 'innerHTML'});
+        htmx.ajax('GET', fetchUrl, {target: '#tab-content', swap: 'innerHTML'});
         if (updateUrl) {
+          // Save sub-tab params before clearing (#197).
+          const curParams = new URLSearchParams(window.location.search);
+          const memsub = curParams.get('memsub');
           const url = new URL(window.location.href);
-          // Strip all sub-tab query params when switching parent tabs (#197).
           url.search = '';
           url.searchParams.set('tab', name);
+          // Preserve memsub when switching to the memory tab so bookmarking
+          // still works across tab switches.
+          if (name === 'memory' && memsub) { url.searchParams.set('memsub', memsub); }
           history.pushState({tab: name}, '', url);
         }
       }
diff --git a/humux/api/templates/partials/memory.html b/humux/api/templates/partials/memory.html
index 8413f538..9a8d1e0b 100644
--- a/humux/api/templates/partials/memory.html
+++ b/humux/api/templates/partials/memory.html
@@ -7,13 +7,13 @@
 {% set q = memory_q|default('') %}
 
 {%- macro nav(view) %}
-<div class="flex border-b border-border mb-4 overflow-x-auto">
-  <button type="button" class="tab-link{% if view == 'settings' %} tab-link-active{% endif %}"
-          hx-get="/partials/memory?view=settings" hx-target="#tab-content" hx-swap="innerHTML">Settings</button>
-  <button type="button" class="tab-link{% if view == 'long-term' %} tab-link-active{% endif %}"
-          hx-get="/partials/memory?view=long-term&offset=0&limit={{ lim }}" hx-target="#tab-content" hx-swap="innerHTML">Long-term</button>
-  <button type="button" class="tab-link{% if view == 'short-term' %} tab-link-active{% endif %}"
-          hx-get="/partials/memory?view=short-term&offset=0&limit={{ lim }}" hx-target="#tab-content" hx-swap="innerHTML">Short-term</button>
+<div x-data="memorySubtab()" x-init="init()" class="flex border-b border-border mb-4 overflow-x-auto">
+  <button type="button" class="tab-link" :class="{'tab-link-active': sub === 'settings'}"
+          @click="select('settings')">Settings</button>
+  <button type="button" class="tab-link" :class="{'tab-link-active': sub === 'long-term'}"
+          @click="select('long-term')">Long-term</button>
+  <button type="button" class="tab-link" :class="{'tab-link-active': sub === 'short-term'}"
+          @click="select('short-term')">Short-term</button>
 </div>
 {%- endmacro %}
 
@@ -60,8 +60,12 @@
 </div>
 {%- endmacro %}
 
+{# Nav rendered once — the Alpine component inside it reads ?memsub= from
+   URL on init and syncs it when a sub-tab is clicked. The partial re-renders
+   into #tab-content on each sub-tab switch, so the component is fresh. #}
+{{ nav(v) }}
+
 {% if v == 'settings' %}
-{{ nav('settings') }}
 <div x-data="{
   longTermLimit: {{ memory_long_term_limit|default('50', true)|tojson|forceescape }},
   cfgResult: '', cfgOk: false,
@@ -314,7 +318,6 @@ <h2 class="text-base mb-1">Memory lifecycle (forgetting &amp; hygiene)</h2>
 </div>
 
 {% elif v == 'long-term' %}
-{{ nav('long-term') }}
 {% set lt = long_term|default([]) %}
 {% set lt_total = long_term_total|default(0) %}
 
@@ -382,7 +385,6 @@ <h2 class="text-base mb-1">Memory lifecycle (forgetting &amp; hygiene)</h2>
 {{ pag('long-term', lt_total) }}
 
 {% elif v == 'short-term' %}
-{{ nav('short-term') }}
 {% set st = short_term|default([]) %}
 {% set st_total = short_term_total|default(0) %}
 

From 2c93333f39e8cedb75e0324a11658458e3f8594a Mon Sep 17 00:00:00 2001
From: Matteo Merola <mattmezza@gmail.com>
Date: Fri, 10 Jul 2026 10:20:55 +0200
Subject: [PATCH 02/11] fix(admin): pag macro min filter broken syntax
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 in Jinja2 iterates its left operand and finds the minimum —
it doesn't accept an argument. Wrapping operands in a list fixes it.
---
 humux/api/templates/partials/memory.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/humux/api/templates/partials/memory.html b/humux/api/templates/partials/memory.html
index 9a8d1e0b..398616a3 100644
--- a/humux/api/templates/partials/memory.html
+++ b/humux/api/templates/partials/memory.html
@@ -22,7 +22,7 @@
 {% set cp = (off // lim) + 1 if total > 0 else 1 %}
 {% set tp = ((total + lim - 1) // lim) if total > 0 else 1 %}
 {% set ss = off + 1 if total > 0 else 0 %}
-{% set se = (off + lim)|min(total) if total > 0 else 0 %}
+{% set se = [(off + lim), total]|min if total > 0 else 0 %}
 {% set qs = ('&q=' + q|urlencode) if q else '' %}
 <div class="flex items-center justify-between gap-2 mb-3 flex-wrap">
   <div class="flex items-center gap-2">

From e1a563ae17d14b656943e021b18fa8c7d2e3d76f Mon Sep 17 00:00:00 2001
From: "kindralai[bot]" <kindral@agents.merola.co>
Date: Fri, 10 Jul 2026 08:22:04 +0000
Subject: [PATCH 03/11] test: update sub-tab nav assertions for Alpine @click
 buttons

The PR replaced plain HTMX hx-get sub-tab buttons with Alpine-managed
@click handlers. The test must now verify Alpine attributes instead.

- Check for x-data="memorySubtab()" and x-init="init()"
- Check for @click="select(...)" on each button
- Check for :class bindings with 'tab-link-active'
---
 humux/tests/test_memory_subtabs.py | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/humux/tests/test_memory_subtabs.py b/humux/tests/test_memory_subtabs.py
index e59b308d..16125f38 100644
--- a/humux/tests/test_memory_subtabs.py
+++ b/humux/tests/test_memory_subtabs.py
@@ -131,15 +131,19 @@ def test_memory_partial_with_legacy_tab_param() -> None:
 
 
 def test_sub_tab_nav_buttons_link_correctly() -> None:
-    """Sub-tab buttons have correct HTMX attributes."""
+    """Sub-tab buttons have Alpine @click handlers (replaced hx-get)."""
     resp = _client().get("/partials/memory?view=settings", headers=HEADERS)
     body = resp.text
-    # Each nav button should target #tab-content via hx-get
-    assert 'hx-get="/partials/memory?view=settings"' in body
-    long_hx = 'hx-get="/partials/memory?view=long-term'
-    assert long_hx in body
-    short_hx = 'hx-get="/partials/memory?view=short-term'
-    assert short_hx in body
+    # Nav is wrapped in an Alpine component
+    assert 'x-data="memorySubtab()"' in body
+    assert 'x-init="init()"' in body
+    # Buttons use @click to invoke Alpine select() method
+    assert '@click="select(\'settings\')"' in body or "@click='select(\"settings\")'" in body
+    assert '@click="select(\'long-term\')"' in body or "@click='select(\"long-term\")'" in body
+    assert '@click="select(\'short-term\')"' in body or "@click='select(\"short-term\")'" in body
+    # Buttons use :class bindings for active state
+    assert ":class" in body
+    assert "'tab-link-active'" in body
 
 
 def test_endpoints_require_auth() -> None:

From d8ca2abd51bce378ddbf424467c36fb51e267e6e Mon Sep 17 00:00:00 2001
From: Matteo Merola <mattmezza@gmail.com>
Date: Fri, 10 Jul 2026 10:35:34 +0200
Subject: [PATCH 04/11] refactor(admin): split all tab partials into
 lazy-loaded sub-tabs with URL params
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Convert 5 admin tabs from monolithic partials with x-show/hash to
wrapper + lazy-loaded sub-tab partials via htmx:

**Jobs** (#hash → ?jobsub=)
- Wrapper with skeleton; scheduled/subagents as separate partials
- scheduled content keeps its own Alpine state for form/pagination
- subagents points at existing /partials/subagent-runs

**Memory** (?memsub=)
- Split settings/long-term/short-term into separate templates
- Pagination/search macros moved to shared _macros.html
- Delete/update routes return sub-tab content to #memory-sub

**LLM** (?llmsub=)
- Keep the big llmTab Alpine component in the wrapper
- inference/providers/history as separate partials
- setSection() now fires HTMX to load sub-tab content
- init() loads initial sub-tab after seeding model values

**Accounts** (?accountsub=)
- Already using subTabs pattern; skeleton loading verified

**Vault** (?vaultsub=)
- agents/infra/import as separate partials
- vaultTabs() now uses subTabs pattern with skeleton

All use the shared subTabs() utility which handles:
- URL param read/write via replaceState
- localStorage fallback
- Skeleton display during HTMX load
- Browser back/forward (via popstate in adminTabs)
---
 humux/api/admin.py                            | 224 +++--
 humux/api/templates/base.html                 | 128 +--
 humux/api/templates/dashboard.html            |  29 +-
 humux/api/templates/partials/_macros.html     |  83 ++
 humux/api/templates/partials/jobs.html        | 359 +------
 .../templates/partials/jobs_scheduled.html    | 291 ++++++
 .../templates/partials/jobs_subagents.html    |   6 +
 humux/api/templates/partials/llm.html         | 945 +-----------------
 humux/api/templates/partials/llm_history.html |   4 +
 .../api/templates/partials/llm_inference.html | 498 +++++++++
 .../api/templates/partials/llm_providers.html | 405 ++++++++
 humux/api/templates/partials/memory.html      | 457 +--------
 .../templates/partials/memory_long_term.html  |  71 ++
 .../templates/partials/memory_settings.html   | 249 +++++
 .../templates/partials/memory_short_term.html |  64 ++
 humux/api/templates/partials/secrets.html     | 176 +---
 .../templates/partials/secrets_agents.html    |  96 ++
 .../templates/partials/secrets_import.html    |  59 +-
 .../api/templates/partials/secrets_infra.html |  54 +
 19 files changed, 2084 insertions(+), 2114 deletions(-)
 create mode 100644 humux/api/templates/partials/_macros.html
 create mode 100644 humux/api/templates/partials/jobs_scheduled.html
 create mode 100644 humux/api/templates/partials/jobs_subagents.html
 create mode 100644 humux/api/templates/partials/llm_history.html
 create mode 100644 humux/api/templates/partials/llm_inference.html
 create mode 100644 humux/api/templates/partials/llm_providers.html
 create mode 100644 humux/api/templates/partials/memory_long_term.html
 create mode 100644 humux/api/templates/partials/memory_settings.html
 create mode 100644 humux/api/templates/partials/memory_short_term.html
 create mode 100644 humux/api/templates/partials/secrets_agents.html
 create mode 100644 humux/api/templates/partials/secrets_infra.html

diff --git a/humux/api/admin.py b/humux/api/admin.py
index 205df291..39be4ee5 100644
--- a/humux/api/admin.py
+++ b/humux/api/admin.py
@@ -2004,6 +2004,49 @@ async def partial_llm() -> HTMLResponse:
             **(await _history_ctx()),
         )
 
+    async def _llm_providers_ctx() -> dict:
+        """Vaulted flags + API keys for the LLM Providers sub-tab partial."""
+        anthropic_key = await config_store.get("agent.anthropic_api_key") or ""
+        openai_key = await config_store.get("agent.openai_api_key") or ""
+        google_key = await config_store.get("agent.google_api_key") or ""
+        grok_key = await config_store.get("agent.grok_api_key") or ""
+        deepseek_key = await config_store.get("agent.deepseek_api_key") or ""
+        openrouter_key = await config_store.get("agent.openrouter_api_key") or ""
+        return {
+            "anthropic_api_key": "" if _is_vault_ref(anthropic_key) else anthropic_key,
+            "anthropic_vaulted": _is_vault_ref(anthropic_key),
+            "openai_api_key": "" if _is_vault_ref(openai_key) else openai_key,
+            "openai_vaulted": _is_vault_ref(openai_key),
+            "openai_base_url": await config_store.get("agent.openai_base_url") or "",
+            "google_api_key": "" if _is_vault_ref(google_key) else google_key,
+            "google_vaulted": _is_vault_ref(google_key),
+            "google_base_url": await config_store.get("agent.google_base_url") or "",
+            "grok_api_key": "" if _is_vault_ref(grok_key) else grok_key,
+            "grok_vaulted": _is_vault_ref(grok_key),
+            "grok_base_url": await config_store.get("agent.grok_base_url") or "",
+            "deepseek_api_key": "" if _is_vault_ref(deepseek_key) else deepseek_key,
+            "deepseek_vaulted": _is_vault_ref(deepseek_key),
+            "deepseek_base_url": await config_store.get("agent.deepseek_base_url") or "",
+            "openrouter_api_key": "" if _is_vault_ref(openrouter_key) else openrouter_key,
+            "openrouter_vaulted": _is_vault_ref(openrouter_key),
+            "openrouter_base_url": await config_store.get("agent.openrouter_base_url") or "",
+        }
+
+    @app.get("/partials/llm/inference", dependencies=[Depends(auth)])
+    async def partial_llm_inference() -> HTMLResponse:
+        """LLM Inference sub-tab content."""
+        return _render_partial("partials/llm_inference.html")
+
+    @app.get("/partials/llm/providers", dependencies=[Depends(auth)])
+    async def partial_llm_providers() -> HTMLResponse:
+        """LLM Providers sub-tab content."""
+        return _render_partial("partials/llm_providers.html", **(await _llm_providers_ctx()))
+
+    @app.get("/partials/llm/history", dependencies=[Depends(auth)])
+    async def partial_llm_history() -> HTMLResponse:
+        """LLM History sub-tab content."""
+        return _render_partial("partials/llm_history.html", **(await _history_ctx()))
+
     def _browser_rules() -> list[dict]:
         """Per-domain browser `act` rules (excludes the generic default rule)."""
         agent = agent_state.agent
@@ -2462,12 +2505,12 @@ async def _fetch_memories_paginated(
             return entries, total
 
         from core.memory import MemoryStore
+
         await MemoryStore(db_path=memory_db)._ensure_schema()
 
         if tier == "long-term":
             cols = (
-                "id, category, subject, content, source, "
-                "confidence, created_at, updated_at, scope"
+                "id, category, subject, content, source, confidence, created_at, updated_at, scope"
             )
             table = "long_term"
             base_where = ""
@@ -2510,24 +2553,21 @@ async def _fetch_memories_paginated(
 
             # Paginated rows
             data_sql = (
-                f"SELECT {cols} FROM {table} {where_clause} "
-                f"ORDER BY {order} LIMIT ? OFFSET ?"
+                f"SELECT {cols} FROM {table} {where_clause} ORDER BY {order} LIMIT ? OFFSET ?"
             )
             cursor = await db.execute(data_sql, params + [str(limit), str(offset)])
             entries = [dict(row) for row in await cursor.fetchall()]
 
         return entries, total
 
-    async def _render_memory_partial(
-        view: str = "settings",
+    async def _memory_context(
+        view: str,
         offset: int = 0,
         limit: int = 25,
         q: str | None = None,
-    ) -> HTMLResponse:
-        """Build the Memory tab partial for the given sub-tab view.
+    ) -> dict:
+        """Build shared context for a memory sub-tab partial."""
 
-        Shared by the tab load, pagination, search, and post-delete/update refresh.
-        """
         async def _cfg(key: str, default: str) -> str:
             val = await config_store.get(key)
             return default if val is None or val == "" else str(val)
@@ -2536,10 +2576,6 @@ async def _bool(key: str, default: str) -> str:
             val = await config_store.get(key)
             return default if val is None else str(val).lower()
 
-        allowed_views = ("settings", "long-term", "short-term")
-        if view not in allowed_views:
-            view = "settings"
-
         ctx: dict[str, object] = {
             "memory_view": view,
             "memory_offset": offset,
@@ -2559,17 +2595,26 @@ async def _bool(key: str, default: str) -> str:
             "archive_min_idle_days": await _cfg("memory.archive_min_idle_days", "45"),
             "hygiene_threshold": await _cfg("memory.hygiene_similarity_threshold", "0.45"),
         }
-
         # Agent slugs for the scope dropdown in the edit forms (#158).
         agent_store = await _agent_store_from_config(config_store)
         ctx["agent_slugs"] = [a.name for a in await agent_store.list_agents()]
+        return ctx
 
+    async def _render_memory_subtab(
+        view: str = "settings",
+        offset: int = 0,
+        limit: int = 25,
+        q: str | None = None,
+    ) -> HTMLResponse:
+        """Build a single memory sub-tab content partial (no nav wrapper)."""
+        allowed_views = ("settings", "long-term", "short-term")
+        if view not in allowed_views:
+            view = "settings"
+
+        ctx = await _memory_context(view, offset, limit, q)
         memory_db = await config_store.get("memory.db_path") or "data/memory.db"
 
-        if view == "settings":
-            # Settings view: no memory data needed
-            pass
-        elif view == "long-term":
+        if view == "long-term":
             entries, total = await _fetch_memories_paginated(
                 memory_db, "long-term", offset, limit, q
             )
@@ -2582,25 +2627,39 @@ async def _bool(key: str, default: str) -> str:
             ctx["short_term"] = entries
             ctx["short_term_total"] = total
 
-        return _render_partial("partials/memory.html", **ctx)
+        template_name = "partials/memory_" + view.replace("-", "_") + ".html"
+        return _render_partial(template_name, **ctx)
 
     @app.get("/partials/memory", dependencies=[Depends(auth)])
-    async def partial_memory(
-        request: Request,
-        view: str = "settings",
+    async def partial_memory() -> HTMLResponse:
+        """Memory tab wrapper — Settings | Long-term | Short-term sub-tabs.
+
+        Thin shell; each sub-tab lazy-loads its own partial via htmx.
+        """
+        return _render_partial("partials/memory.html")
+
+    @app.get("/partials/memory/settings", dependencies=[Depends(auth)])
+    async def partial_memory_settings() -> HTMLResponse:
+        """Memory Settings sub-tab content."""
+        return await _render_memory_subtab(view="settings")
+
+    @app.get("/partials/memory/long-term", dependencies=[Depends(auth)])
+    async def partial_memory_long_term(
         offset: int = 0,
         limit: int = 25,
         q: str | None = None,
     ) -> HTMLResponse:
-        """Memory tab partial with sub-tab support.
+        """Long-term memory sub-tab content with pagination & search."""
+        return await _render_memory_subtab(view="long-term", offset=offset, limit=limit, q=q)
 
-        Query params:
-          view    — sub-tab: settings | long-term | short-term (default: settings)
-          offset  — row offset for pagination (default: 0)
-          limit   — page size (default: 25)
-          q       — search query to filter by content/subject/category
-        """
-        return await _render_memory_partial(view=view, offset=offset, limit=limit, q=q)
+    @app.get("/partials/memory/short-term", dependencies=[Depends(auth)])
+    async def partial_memory_short_term(
+        offset: int = 0,
+        limit: int = 25,
+        q: str | None = None,
+    ) -> HTMLResponse:
+        """Short-term memory sub-tab content with pagination & search."""
+        return await _render_memory_subtab(view="short-term", offset=offset, limit=limit, q=q)
 
     async def _history_ctx() -> dict:
         """History + compaction config, shared by the History sub-tab of the LLM
@@ -2703,16 +2762,29 @@ def _get_jobs_list(include_done: bool = False) -> list[dict]:
             )
         return jobs
 
-    @app.get("/partials/jobs", dependencies=[Depends(auth)])
-    async def partial_jobs(show_completed: bool = False) -> HTMLResponse:
-        """Jobs tab partial. ``show_completed`` reveals done/cancelled jobs."""
+    async def _jobs_context(show_completed: bool = False) -> dict:
+        """Shared context for jobs partials."""
         jobs = _get_jobs_list(include_done=show_completed)
         agent_running = agent_state.agent is not None
+        return {
+            "jobs": jobs,
+            "agent_running": agent_running,
+            "show_completed": show_completed,
+        }
+
+    @app.get("/partials/jobs", dependencies=[Depends(auth)])
+    async def partial_jobs() -> HTMLResponse:
+        """Jobs tab wrapper — Scheduled | Subagents sub-tabs.
+
+        Thin shell; each sub-tab lazy-loads its own partial via htmx.
+        """
+        return _render_partial("partials/jobs.html")
+
+    @app.get("/partials/jobs/scheduled", dependencies=[Depends(auth)])
+    async def partial_jobs_scheduled(show_completed: bool = False) -> HTMLResponse:
+        """Scheduled jobs sub-tab content."""
         return _render_partial(
-            "partials/jobs.html",
-            jobs=jobs,
-            agent_running=agent_running,
-            show_completed=show_completed,
+            "partials/jobs_scheduled.html", **(await _jobs_context(show_completed))
         )
 
     @app.post("/jobs", dependencies=[Depends(auth)])
@@ -2791,13 +2863,8 @@ async def upsert_job(request: Request) -> HTMLResponse:
         log.info("Job %r upserted via admin: %s (%s)", job_id, cron, job_type)
 
         show_completed = str(body.get("show_completed", "")).strip().lower() in ("true", "on", "1")
-        jobs = _get_jobs_list(include_done=show_completed)
-        agent_running = agent is not None
         resp = _render_partial(
-            "partials/jobs.html",
-            jobs=jobs,
-            agent_running=agent_running,
-            show_completed=show_completed,
+            "partials/jobs_scheduled.html", **(await _jobs_context(show_completed))
         )
         resp.headers["HX-Trigger"] = json.dumps({"showToast": f'Job "{job_id}" saved'})
         return resp
@@ -2828,13 +2895,8 @@ async def delete_job(request: Request) -> HTMLResponse:
         log.info("Job %r deleted via admin", job_id)
 
         show_completed = str(body.get("show_completed", "")).strip().lower() in ("true", "on", "1")
-        jobs = _get_jobs_list(include_done=show_completed)
-        agent_running = agent is not None
         resp = _render_partial(
-            "partials/jobs.html",
-            jobs=jobs,
-            agent_running=agent_running,
-            show_completed=show_completed,
+            "partials/jobs_scheduled.html", **(await _jobs_context(show_completed))
         )
         resp.headers["HX-Trigger"] = json.dumps({"showToast": f'Job "{job_id}" deleted'})
         return resp
@@ -2876,13 +2938,8 @@ async def pause_resume_job(request: Request) -> HTMLResponse:
         log.info("Job %r %s via admin", job_id, action)
 
         show_completed = str(body.get("show_completed", "")).strip().lower() in ("true", "on", "1")
-        jobs = _get_jobs_list(include_done=show_completed)
-        agent_running = agent is not None
         resp = _render_partial(
-            "partials/jobs.html",
-            jobs=jobs,
-            agent_running=agent_running,
-            show_completed=show_completed,
+            "partials/jobs_scheduled.html", **(await _jobs_context(show_completed))
         )
         resp.headers["HX-Trigger"] = json.dumps({"showToast": f'Job "{job_id}" {action}'})
         return resp
@@ -3731,7 +3788,10 @@ async def upsert_skill(body: SkillUpsertIn) -> HTMLResponse:
         total = await store.count_skills()
         return _render_partial(
             "partials/skills.html",
-            skills=skills, total=total, offset=0, limit=25,
+            skills=skills,
+            total=total,
+            offset=0,
+            limit=25,
         )
 
     @app.post("/skills/install", dependencies=[Depends(auth)])
@@ -3755,7 +3815,10 @@ async def install_skill(request: Request) -> HTMLResponse:
         total = await store.count_skills()
         return _render_partial(
             "partials/skills.html",
-            skills=skills, total=total, offset=0, limit=25,
+            skills=skills,
+            total=total,
+            offset=0,
+            limit=25,
             install_result=result,
         )
 
@@ -3771,7 +3834,10 @@ async def update_skill(name: str) -> HTMLResponse:
         total = await store.count_skills()
         return _render_partial(
             "partials/skills.html",
-            skills=skills, total=total, offset=0, limit=25,
+            skills=skills,
+            total=total,
+            offset=0,
+            limit=25,
             install_result=result,
         )
 
@@ -3793,7 +3859,10 @@ async def delete_skill(request: Request) -> HTMLResponse:
         total = await store.count_skills()
         return _render_partial(
             "partials/skills.html",
-            skills=skills, total=total, offset=0, limit=25,
+            skills=skills,
+            total=total,
+            offset=0,
+            limit=25,
         )
 
     @app.post("/skills/{name}/reset", dependencies=[Depends(auth)])
@@ -3810,7 +3879,10 @@ async def reset_skill(name: str) -> HTMLResponse:
         total = await store.count_skills()
         return _render_partial(
             "partials/skills.html",
-            skills=skills, total=total, offset=0, limit=25,
+            skills=skills,
+            total=total,
+            offset=0,
+            limit=25,
         )
 
     @app.post("/skills/validate", dependencies=[Depends(auth)])
@@ -4211,7 +4283,7 @@ async def delete_memory(request: Request) -> HTMLResponse:
                 raise HTTPException(404, f"Memory {memory_id} not found in {tier}")
 
         # Return refreshed sub-view based on the deleted tier
-        return await _render_memory_partial(view=tier)
+        return await _render_memory_subtab(view=tier)
 
     @app.post("/memory/update", dependencies=[Depends(auth)])
     async def update_memory(request: Request) -> HTMLResponse:
@@ -4255,7 +4327,7 @@ async def update_memory(request: Request) -> HTMLResponse:
         if rows == 0:
             raise HTTPException(404, f"Memory {memory_id} not found in {tier}")
         # Return refreshed sub-view based on the updated tier
-        return await _render_memory_partial(view=tier)
+        return await _render_memory_subtab(view=tier)
 
     @app.get("/memory/embedding/status", dependencies=[Depends(auth)])
     async def embedding_status() -> dict:
@@ -4747,12 +4819,38 @@ async def _secrets_ctx() -> dict:
     def _no_vault_partial() -> HTMLResponse:
         return _render_partial("partials/secrets.html", configured=False)
 
+    async def _vault_subtab(view: str) -> HTMLResponse:
+        """Render a vault sub-tab content partial."""
+        if secret_store is None:
+            return _no_vault_partial()
+        ctx = await _secrets_ctx()
+        return _render_partial(f"partials/secrets_{view}.html", **ctx)
+
     @app.get("/partials/secrets", response_class=HTMLResponse, dependencies=[Depends(auth)])
     async def partial_secrets() -> HTMLResponse:
+        """Vaults tab wrapper — Agents | Infra | Import sub-tabs.
+
+        Thin shell; each sub-tab lazy-loads its own partial via htmx.
+        """
         if secret_store is None:
             return _no_vault_partial()
         return _render_partial("partials/secrets.html", **(await _secrets_ctx()))
 
+    @app.get("/partials/secrets/agents", response_class=HTMLResponse, dependencies=[Depends(auth)])
+    async def partial_secrets_agents() -> HTMLResponse:
+        """Vault Agents sub-tab content."""
+        return await _vault_subtab("agents")
+
+    @app.get("/partials/secrets/infra", response_class=HTMLResponse, dependencies=[Depends(auth)])
+    async def partial_secrets_infra() -> HTMLResponse:
+        """Vault Infra sub-tab content."""
+        return await _vault_subtab("infra")
+
+    @app.get("/partials/secrets/import", response_class=HTMLResponse, dependencies=[Depends(auth)])
+    async def partial_secrets_import() -> HTMLResponse:
+        """Vault Import sub-tab content."""
+        return await _vault_subtab("import")
+
     @app.post("/admin/secrets/migrate", response_class=HTMLResponse, dependencies=[Depends(auth)])
     async def migrate_secrets() -> HTMLResponse:
         """Move any still-plaintext credentials onto the infra vault (issue #35).
diff --git a/humux/api/templates/base.html b/humux/api/templates/base.html
index 5346b6a4..fa5933eb 100644
--- a/humux/api/templates/base.html
+++ b/humux/api/templates/base.html
@@ -284,8 +284,15 @@
             url.searchParams.set('llmsub', s);
             history.replaceState(history.state, '', url);
           } catch (e) {}
+          this._loadSection(s);
         },
-        reloadLlmPartial() { if (window.htmx) { htmx.ajax('GET', '/partials/llm', {target: '#tab-content', swap: 'innerHTML'}); } },
+        _loadSection(s) {
+          if (window.htmx) {
+            showSkeleton('#llm-sub');
+            htmx.ajax('GET', '/partials/llm/' + s, {target: '#llm-sub', swap: 'innerHTML'});
+          }
+        },
+        reloadLlmPartial() { this._loadSection(this.section); },
         providerOptions: window.LLM_PROVIDERS,
         provider: currentProvider,
         apiKey: apiKey || '',
@@ -549,6 +556,8 @@
             this.resetMemoryModel('consolidation');
             this.resetBackgroundModel('gd');
             this.resetBackgroundModel('tr');
+            // Load the initial sub-tab content after seeding model values.
+            this._loadSection(this.section);
           });
         },
         resetModel() {
@@ -1319,95 +1328,56 @@
     }
     window.accountsTabs = accountsTabs;
 
-    // Vaults tab: Agents | Infra | Import. Unlike inspect/accounts these are
-    // shown/hidden in place (x-show) because every action re-renders the whole
-    // partial into #tab-content; the sub-tab is mirrored in the URL (?vaultsub=)
-    // and restored after each re-render.
+    // Vaults tab: Agents | Infra | Import sub-tabs.
+    // Persisted via ?vaultsub= URL param; each sub-tab lazy-loads its own
+    // partial via htmx with skeleton loading.
     function vaultTabs() {
-      const allowed = ['agents', 'infra', 'import'];
-      return {
-        sub: (() => {
-          try {
-            const q = new URLSearchParams(window.location.search).get('vaultsub');
-            if (allowed.includes(q)) { return q; }
-            const ls = localStorage.getItem('vault_sub');
-            if (allowed.includes(ls)) { return ls; }
-          } catch (e) {}
-          return 'agents';
-        })(),
-        init() { this._syncUrl(this.sub); },
-        select(name) {
-          this.sub = name;
-          try { localStorage.setItem('vault_sub', name); } catch (e) {}
-          this._syncUrl(name);
+      return subTabs({
+        subs: {
+          agents: '/partials/secrets/agents',
+          infra: '/partials/secrets/infra',
+          import: '/partials/secrets/import'
         },
-        _syncUrl(name) {
-          try {
-            const url = new URL(window.location.href);
-            if (url.searchParams.get('vaultsub') !== name) {
-              url.searchParams.set('vaultsub', name);
-              history.replaceState(history.state, '', url);
-            }
-          } catch (e) {}
-        }
-      };
+        param: 'vaultsub',
+        storageKey: 'vault_sub',
+        container: '#vault-sub',
+        fallback: 'agents'
+      });
     }
     window.vaultTabs = vaultTabs;
 
     // Memory tab: Settings | Long-term | Short-term sub-tabs.
-    // Persisted so bookmarking, refresh, and browser back/forward land on
-    // the same sub-tab. Modeled after vaultTabs (x-show within a single
-    // partial that re-renders into #tab-content).
+    // Persisted via ?memsub= URL param; each sub-tab lazy-loads its own
+    // partial via htmx with skeleton loading.
     function memorySubtab() {
-      const allowed = ['settings', 'long-term', 'short-term'];
-      return {
-        sub: (() => {
-          try {
-            const q = new URLSearchParams(window.location.search).get('memsub');
-            if (allowed.includes(q)) return q;
-            const ls = localStorage.getItem('memory_sub');
-            if (allowed.includes(ls)) return ls;
-          } catch (e) {}
-          return 'settings';
-        })(),
-        init() { this._syncUrl(this.sub); },
-        select(name) {
-          this.sub = name;
-          try { localStorage.setItem('memory_sub', name); } catch (e) {}
-          this._syncUrl(name);
-          // Load the sub-tab content via HTMX, replacing the full tab pane.
-          // Pagination/search params preserved via the view-specific URLs
-          // embedded in the template.
-          if (window.htmx) {
-            const url = '/partials/memory?view=' + encodeURIComponent(name);
-            htmx.ajax('GET', url, {target: '#tab-content', swap: 'innerHTML'});
-          }
-        },
-        _syncUrl(name) {
-          try {
-            const url = new URL(window.location.href);
-            if (url.searchParams.get('memsub') !== name) {
-              url.searchParams.set('memsub', name);
-              history.replaceState(history.state, '', url);
-            }
-          } catch (e) {}
+      return subTabs({
+        subs: {
+          settings: '/partials/memory/settings',
+          'long-term': '/partials/memory/long-term',
+          'short-term': '/partials/memory/short-term'
         },
-        // Returns the HTMX URL for the 'long-term' and 'short-term' views
-        // including the current offset/limit/q. For settings view, no extra
-        // params needed.
-        tabUrl(name) {
-          if (name === 'settings') return '/partials/memory?view=settings';
-          // These are supplied by the template context when the partial
-          // is rendered server-side; in the Alpine component we let the
-          // select() method pass a simple view param and let the server
-          // use defaults for offset/limit. The pagination buttons inside
-          // each view handle their own offsets.
-          return '/partials/memory?view=' + encodeURIComponent(name);
-        }
-      };
+        param: 'memsub',
+        storageKey: 'memory_sub',
+        container: '#memory-sub',
+        fallback: 'settings'
+      });
     }
     window.memorySubtab = memorySubtab;
 
+    // Jobs tab: Scheduled | Subagents sub-tabs.
+    // Persisted via ?jobsub= URL param; each sub-tab lazy-loads its own
+    // partial via htmx with skeleton loading.
+    function jobsTabs() {
+      return subTabs({
+        subs: { scheduled: '/partials/jobs/scheduled', subagents: '/partials/jobs/subagents' },
+        param: 'jobsub',
+        storageKey: 'jobs_sub',
+        container: '#jobs-sub',
+        fallback: 'scheduled'
+      });
+    }
+    window.jobsTabs = jobsTabs;
+
     // Global: handle 401 by redirecting to auth gate
     document.body.addEventListener('htmx:responseError', function(e) {
       if (e.detail.xhr.status === 401) {
diff --git a/humux/api/templates/dashboard.html b/humux/api/templates/dashboard.html
index 612ed216..b43a5d34 100644
--- a/humux/api/templates/dashboard.html
+++ b/humux/api/templates/dashboard.html
@@ -580,14 +580,7 @@ <h2 class="text-base text-accent">Agent Control</h2>
         // Defer the initial HTMX fetch so both Alpine and HTMX are fully
         // initialised before the request fires.
         this.$nextTick(() => {
-          let url = tabs[initialTab];
-          // Forward sub-tab param for memory (?memsub=) so the initial load
-          // lands on the right sub-tab instead of always defaulting to settings.
-          if (initialTab === 'memory') {
-            const ms = new URLSearchParams(window.location.search).get('memsub');
-            if (ms) { url += '?view=' + encodeURIComponent(ms); }
-          }
-          htmx.ajax('GET', url, {target: '#tab-content', swap: 'innerHTML'});
+          htmx.ajax('GET', tabs[initialTab], {target: '#tab-content', swap: 'innerHTML'});
         });
 
         window.addEventListener('popstate', () => {
@@ -601,31 +594,17 @@ <h2 class="text-base text-accent">Agent Control</h2>
         this.loadTab(name, true);
       },
       loadTab(name, updateUrl) {
-        // Always re-load memory when memsub param may have changed
-        // (e.g. browser back/forward). For other tabs, skip if already active.
-        if (!tabs[name] || (this.tab === name && !updateUrl && name !== 'memory')) {
+        if (!tabs[name] || this.tab === name && !updateUrl) {
           return;
         }
         this.tab = name;
-        let fetchUrl = tabs[name];
-        // Forward sub-tab param for memory (?memsub=) so the URL-preserved
-        // sub-tab is loaded after a refresh or navigation.
-        if (name === 'memory') {
-          const ms = new URLSearchParams(window.location.search).get('memsub');
-          if (ms) { fetchUrl += '?view=' + encodeURIComponent(ms); }
-        }
         showSkeleton('#tab-content');
-        htmx.ajax('GET', fetchUrl, {target: '#tab-content', swap: 'innerHTML'});
+        htmx.ajax('GET', tabs[name], {target: '#tab-content', swap: 'innerHTML'});
         if (updateUrl) {
-          // Save sub-tab params before clearing (#197).
-          const curParams = new URLSearchParams(window.location.search);
-          const memsub = curParams.get('memsub');
           const url = new URL(window.location.href);
+          // Strip all sub-tab query params when switching parent tabs (#197).
           url.search = '';
           url.searchParams.set('tab', name);
-          // Preserve memsub when switching to the memory tab so bookmarking
-          // still works across tab switches.
-          if (name === 'memory' && memsub) { url.searchParams.set('memsub', memsub); }
           history.pushState({tab: name}, '', url);
         }
       }
diff --git a/humux/api/templates/partials/_macros.html b/humux/api/templates/partials/_macros.html
new file mode 100644
index 00000000..f19bbb75
--- /dev/null
+++ b/humux/api/templates/partials/_macros.html
@@ -0,0 +1,83 @@
+{# Shared Jinja macros used by multiple tab partials #}
+
+{# ── LLM thinking-level control ─────────────────────────────── #}
+{%- macro think(level, prov, model, lid, bg=false) -%}
+      <div class="mt-2">
+        <label class="label" for="{{ lid }}-input">Thinking level{% if bg %}<span class="text-muted text-xs font-normal" x-show="sameAsMain({{ prov }}, {{ model }})"> · same config as Main inference</span>{% endif %}</label>
+        <div class="flex items-center gap-2">
+          <input type="text" class="input-sm" style="max-width:300px" x-model="{{ level }}"
+                 list="{{ lid }}" id="{{ lid }}-input" placeholder="off — type or pick low / medium / high">
+          <datalist id="{{ lid }}">
+            <option value=""></option>
+            <template x-for="lvl in levelOptions({{ prov }})" :key="'{{ lid }}-' + lvl">
+              <option :value="lvl"></option>
+            </template>
+          </datalist>
+          <button type="button" class="btn-secondary btn-sm" x-show="{{ prov }} === 'anthropic'"
+                  @click="fetchThinkingLevels({{ prov }}, {{ model }})" :disabled="fetchingLevels[{{ prov }}]">
+            <span x-show="!fetchingLevels[{{ prov }}]">Fetch levels</span>
+            <span x-show="fetchingLevels[{{ prov }}]"><span class="spinner-sm mr-1"></span>…</span>
+          </button>
+          <a class="text-xs text-muted underline" x-show="{{ prov }} !== 'anthropic'"
+             :href="providerDocsUrl({{ prov }})" target="_blank" rel="noopener">effort docs ↗</a>
+        </div>
+        <p class="text-muted text-xs mt-1" x-show="fetchLevelsResult[{{ prov }}]" x-text="fetchLevelsResult[{{ prov }}]"></p>
+        <p class="text-muted text-xs mt-1">Leave <strong>Off</strong> for non-reasoning models. Higher = more reasoning, more tokens. Anthropic: "Fetch levels" autodiscovers supported values; other providers: see the docs link and type the value.</p>
+        <p class="text-amber-600 text-xs mt-1" x-show="{{ level }} && !modelSupportsThinking({{ model }})">Heads up: "<span x-text="{{ model }}"></span>" isn't a recognized reasoning model — only set a level if you know it supports thinking, or the inference call may error.</p>
+      </div>
+{%- endmacro %}
+
+{# ── Memory pagination ──────────────────────────────────────── #}
+{%- macro memory_pag(view, total) %}
+{% set off = memory_offset|default(0)|int %}
+{% set lim = memory_limit|default(25)|int %}
+{% set q = memory_q|default('') %}
+{% set page_sizes = [25, 50, 100] %}
+{% set total = total|default(0)|int %}
+{% set cp = (off // lim) + 1 if total > 0 else 1 %}
+{% set tp = ((total + lim - 1) // lim) if total > 0 else 1 %}
+{% set ss = off + 1 if total > 0 else 0 %}
+{% set se = [(off + lim), total]|min if total > 0 else 0 %}
+{% set qs = ('&q=' + q|urlencode) if q else '' %}
+<div class="flex items-center justify-between gap-2 mb-3 flex-wrap">
+  <div class="flex items-center gap-2">
+    <span class="text-xs text-muted">
+      {%- if total > 0 %}Showing {{ ss }}&ndash;{{ se }} of {{ total }}{% else %}No entries{% endif -%}
+    </span>
+    <label class="label mb-0 text-xs" for="ps-{{ view }}">Per page</label>
+    <select class="input-sm" style="max-width:80px" id="ps-{{ view }}"
+            onchange="htmx.ajax('GET','/partials/memory/{{ view }}?offset=0&limit='+this.value+'{{ qs }}',{target:'#memory-sub',swap:'innerHTML'})">
+      {% for ps in page_sizes %}<option value="{{ ps }}"{% if lim == ps %} selected{% endif %}>{{ ps }}</option>{% endfor %}
+    </select>
+  </div>
+  <div class="flex items-center gap-1">
+    <button class="btn btn-sm"{% if cp <= 1 %} disabled{% endif %}
+            hx-get="/partials/memory/{{ view }}?offset=0&limit={{ lim }}{{ qs }}" hx-target="#memory-sub" hx-swap="innerHTML">&laquo;</button>
+    <button class="btn btn-sm"{% if cp <= 1 %} disabled{% endif %}
+            hx-get="/partials/memory/{{ view }}?offset={{ [off - lim, 0]|max }}&limit={{ lim }}{{ qs }}" hx-target="#memory-sub" hx-swap="innerHTML">&lsaquo;</button>
+    <span class="text-xs text-muted px-1">Page {{ cp }} / {{ tp }}</span>
+    <button class="btn btn-sm"{% if cp >= tp %} disabled{% endif %}
+            hx-get="/partials/memory/{{ view }}?offset={{ off + lim }}&limit={{ lim }}{{ qs }}" hx-target="#memory-sub" hx-swap="innerHTML">&rsaquo;</button>
+    <button class="btn btn-sm"{% if cp >= tp %} disabled{% endif %}
+            hx-get="/partials/memory/{{ view }}?offset={{ (tp - 1) * lim }}&limit={{ lim }}{{ qs }}" hx-target="#memory-sub" hx-swap="innerHTML">&raquo;</button>
+  </div>
+</div>
+{%- endmacro %}
+
+{# ── Memory search ──────────────────────────────────────────── #}
+{%- macro memory_search(view) %}
+{% set off = memory_offset|default(0)|int %}
+{% set lim = memory_limit|default(25)|int %}
+{% set q = memory_q|default('') %}
+<div class="flex items-center gap-2 mb-3">
+  <input type="text" class="input-sm flex-1" style="max-width:300px" placeholder="Search memories..."
+         value="{{ q }}" id="search-{{ view }}"
+         onkeydown="if(event.key==='Enter'){const v=this.value;htmx.ajax('GET','/partials/memory/{{ view }}?offset=0&limit={{ lim }}'+(v?'&q='+encodeURIComponent(v):''),{target:'#memory-sub',swap:'innerHTML'});}">
+  <button class="btn btn-sm"
+          hx-get="/partials/memory/{{ view }}?offset=0&limit={{ lim }}" hx-target="#memory-sub" hx-swap="innerHTML"
+          title="Refresh">&#x21bb;</button>
+</div>
+{%- endmacro %}
+
+{# ── Memory category list ───────────────────────────────────── #}
+{% set memory_categories = ['preference','relationship','fact','routine','work','health','travel'] %}
diff --git a/humux/api/templates/partials/jobs.html b/humux/api/templates/partials/jobs.html
index 91505c00..0afa07f8 100644
--- a/humux/api/templates/partials/jobs.html
+++ b/humux/api/templates/partials/jobs.html
@@ -1,357 +1,18 @@
-{# Jobs tab partial #}
-{% set job_agents = jobs | map(attribute='agent') | reject('equalto', '') | unique | sort %}
-<div x-data="jobsTab()">
-  {# Sub-tabs: Scheduled | Subagents — selection remembered in URL hash #}
+{# Jobs tab wrapper: Scheduled | Subagents sub-tabs.
+   Each sub-tab lazy-loads its own partial via htmx. The active sub-tab
+   is mirrored in the URL as ?jobsub= for copy-pasteable links. #}
+<div x-data="jobsTabs()" x-init="init()">
   <div class="flex border-b border-border mb-4 overflow-x-auto">
-    <button type="button" class="tab-link" :class="sub === 'scheduled' && 'tab-link-active'" @click="setSub('scheduled')">Scheduled</button>
-    <button type="button" class="tab-link" :class="sub === 'subagents' && 'tab-link-active'" @click="setSub('subagents')">
+    <button type="button" class="tab-link" :class="sub === 'scheduled' && 'tab-link-active'" @click="select('scheduled')">Scheduled</button>
+    <button type="button" class="tab-link" :class="sub === 'subagents' && 'tab-link-active'" @click="select('subagents')">
       Subagents
       <span x-show="subagentCount > 0" x-text="subagentCount"
             class="inline-flex items-center justify-center ml-1 px-1.5 py-0.5 rounded-full text-[0.65rem] font-bold bg-accent text-black" style="min-width:1.25rem; line-height:1;"></span>
     </button>
   </div>
-
-  {# ── Scheduled jobs ───────────────────────────────────────── #}
-  <div x-show="sub === 'scheduled'">
-    <div class="flex items-center gap-2 mb-4 flex-wrap">
-      <button class="btn btn-sm" hx-get="/partials/jobs" hx-target="#tab-content" hx-swap="innerHTML"
-              hx-include="#jobs-show-completed">
-        Refresh
-      </button>
-      <span class="text-muted text-xs">{{ jobs|length }} job{{ 's' if jobs|length != 1 else '' }}</span>
-      {% if job_agents %}
-      <select id="jobs-agent-filter" class="input-sm" style="max-width:200px" x-model="agentFilter"
-              title="Filter jobs by the agent they run as" aria-label="Filter by agent">
-        <option value="">All agents</option>
-        {% for p in job_agents %}
-        <option value="{{ p }}">{{ p }}</option>
-        {% endfor %}
-      </select>
-      {% endif %}
-      {% if not agent_running %}
-      <span class="badge-off text-[0.65rem]">agent stopped — jobs won't run</span>
-      {% endif %}
-      <label class="flex items-center gap-1.5 text-xs text-muted cursor-pointer ml-auto" title="Show completed, cancelled, and past one-time jobs">
-        <input id="jobs-show-completed" type="checkbox" name="show_completed" value="true"
-               hx-get="/partials/jobs" hx-target="#tab-content" hx-swap="innerHTML" hx-include="this"
-               {% if show_completed %}checked{% endif %}>
-        Show completed
-      </label>
-    </div>
-
-    {# Jobs table #}
-    <div class="overflow-x-auto">
-      <table class="table">
-        <thead>
-          <tr>
-            <th class="min-w-[120px]">ID</th>
-            <th>Schedule</th>
-            <th>Type</th>
-            <th>Agent</th>
-            <th>Task / Command</th>
-            <th class="w-16">Status</th>
-            <th class="w-20">Channel</th>
-            <th class="min-w-[120px]">Next Run</th>
-            <th class="w-28"></th>
-          </tr>
-        </thead>
-        <tbody x-ref="jobsTbody">
-          {% for job in jobs %}
-          <tr data-job data-agent="{{ job.agent }}" x-show="!agentFilter || agentFilter === {{ job.agent|tojson|forceescape }}">
-            <td class="text-xs break-all font-medium">
-              {{ job.id }}
-              {% if job.description %}
-              <span class="block text-muted text-[0.65rem]" title="{{ job.description }}">{{ job.description[:40] }}{{ '...' if job.description|length > 40 else '' }}</span>
-              {% endif %}
-            </td>
-            <td class="text-xs">
-              <code class="px-1.5 py-0.5 bg-surface-active rounded text-accent text-[0.7rem]">{{ job.cron }}</code>
-            </td>
-            <td class="text-xs">
-              <span class="{% if job.type == 'agent' %}badge-ok{% elif job.type == 'system' %}badge-warn{% else %}badge-off{% endif %}">
-                {{ job.type }}
-              </span>
-            </td>
-            <td class="text-xs">{{ job.agent or '—' }}</td>
-            <td class="text-xs break-all" style="max-width: 320px;">
-              <span class="block truncate" title="{{ job.task }}">{{ job.task }}</span>
-            </td>
-            <td class="text-xs">
-              <span class="{% if job.status == 'active' %}text-green-400{% elif job.status == 'paused' %}text-yellow-400{% elif job.status == 'cancelled' %}text-red-400{% else %}text-muted{% endif %}">
-                {{ job.status }}
-              </span>
-            </td>
-            <td class="text-xs">{{ job.channel }}</td>
-            <td class="text-xs text-muted">{{ job.next_run or '—' }}</td>
-            <td class="whitespace-nowrap">
-              <button class="btn btn-sm"
-                      @click="showForm = true; editJob({{ job|tojson|forceescape }})">
-                edit
-              </button>
-              <button class="btn btn-sm ml-0.5" title="Run now"
-                      hx-post="/jobs/run" hx-target="#job-flash" hx-swap="innerHTML"
-                      hx-vals='{"job_id": {{ job.id|tojson }} }'>
-                &triangleright;
-              </button>
-              <button class="btn btn-sm ml-0.5"
-                      x-show="{{ job.status|tojson|forceescape }} === 'active' || {{ job.status|tojson|forceescape }} === 'paused'"
-                      hx-post="/jobs/pause-resume" hx-target="#tab-content" hx-swap="innerHTML"
-                      hx-include="#jobs-show-completed"
-                      hx-vals='{"job_id": {{ job.id|tojson }} }'>
-                <span x-text="{{ job.status|tojson|forceescape }} === 'paused' ? '▶ Resume' : '⏸ Pause'"></span>
-              </button>
-              <button class="btn-danger btn-sm ml-0.5"
-                      hx-post="/jobs/delete" hx-target="#tab-content" hx-swap="innerHTML"
-                      hx-include="#jobs-show-completed"
-                      hx-vals='{"job_id": {{ job.id|tojson }} }'
-                      hx-confirm="Delete job &quot;{{ job.id }}&quot;?">
-                x
-              </button>
-            </td>
-          </tr>
-          {% endfor %}
-          {% if not jobs %}
-          <tr><td colspan="9" class="text-muted text-xs text-center py-4">No jobs configured</td></tr>
-          {% endif %}
-        </tbody>
-      </table>
-    </div>
-
-    {# Pagination controls #}
-    <div class="flex items-center justify-between gap-3 mt-3 flex-wrap" x-show="visibleJobCount > 0">
-      <div class="flex items-center gap-2">
-        <label class="label mb-0 shrink-0" for="jobs-per-page">Per page</label>
-        <select class="input-sm" style="max-width:80px" id="jobs-per-page"
-                @change="setPerPage($event.target.value)">
-          <option value="10" selected>10</option>
-          <option value="25">25</option>
-          <option value="50">50</option>
-          <option value="all">All</option>
-        </select>
-      </div>
-      <span class="text-xs text-muted" x-show="perPage > 0"
-            x-text="'Showing ' + ((jobPage - 1) * perPage + 1) + '–' + Math.min(jobPage * perPage, visibleJobCount) + ' of ' + visibleJobCount"></span>
-      <div class="flex items-center gap-1" x-show="perPage > 0 && jobTotalPages > 1">
-        <button class="btn btn-sm" :disabled="jobPage <= 1" @click="setJobPage(jobPage - 1)">‹ Prev</button>
-        <span class="text-xs text-muted px-2" x-text="jobPage + ' / ' + jobTotalPages"></span>
-        <button class="btn btn-sm" :disabled="jobPage >= jobTotalPages" @click="setJobPage(jobPage + 1)">Next ›</button>
-      </div>
-    </div>
-
-    {# Flash area for run-now feedback #}
-    <div id="job-flash" class="mt-3"></div>
-
-    {# Collapsible add / edit job form #}
-    <div class="mt-5">
-      <button class="btn btn-sm" type="button" x-show="!showForm && !editing" @click="showForm = true">
-        + Add new job
-      </button>
-
-      <div x-show="showForm || editing" x-transition>
-        <div class="flex items-center justify-between mb-2">
-          <h3 class="text-xs text-muted uppercase tracking-wider" x-text="editing ? 'Edit job' : 'Add new job'">Add new job</h3>
-          <button class="btn btn-sm" type="button" x-show="!editing" @click="showForm = false">Cancel</button>
-        </div>
-        <form hx-post="/jobs" hx-target="#tab-content" hx-swap="innerHTML"
-              hx-include="#jobs-show-completed">
-          <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
-            <div>
-              <label class="label" for="job-id">Job ID</label>
-              <input type="text" class="input-sm" name="job_id" id="job-id" x-model="form.id"
-                     placeholder="morning-briefing" required
-                     :readonly="editing" :class="editing && 'opacity-60 cursor-not-allowed'">
-              <span class="hint">Unique identifier (lowercase, dashes ok)</span>
-            </div>
-            <div>
-              <label class="label" for="job-schedule">Schedule</label>
-              <select class="select" name="schedule" id="job-schedule" x-model="form.schedule"
-                      style="padding: 0.375rem 2rem 0.375rem 0.5rem; font-size: 0.75rem;">
-                <option value="cron">Recurring (cron)</option>
-                <option value="once">One-time</option>
-              </select>
-            </div>
-            <div x-show="form.schedule === 'cron'">
-              <label class="label" for="job-cron">Cron Expression</label>
-              <input type="text" class="input-sm" name="cron" id="job-cron" x-model="form.cron"
-                     placeholder="0 7 * * *" :required="form.schedule === 'cron'">
-              <span class="hint">5-field cron: min hour day month weekday</span>
-            </div>
-            <div x-show="form.schedule === 'once'">
-              <label class="label" for="job-run-at">Run At</label>
-              <input type="text" class="input-sm" name="run_at" id="job-run-at" x-model="form.run_at"
-                     placeholder="2026-02-20T18:00:00+01:00" :required="form.schedule === 'once'">
-              <span class="hint">ISO datetime with timezone offset</span>
-            </div>
-            <div>
-              <label class="label" for="job-type">Type</label>
-              <select class="select" name="type" id="job-type" x-model="form.type"
-                      style="padding: 0.375rem 2rem 0.375rem 0.5rem; font-size: 0.75rem;">
-                <option value="agent">agent — natural language task</option>
-                <option value="agent_silent">agent_silent — quiet when nothing new</option>
-                <option value="system">system — CLI command</option>
-                <option value="subagent">subagent — run task under an agent</option>
-                <option value="memory_consolidation">memory_consolidation</option>
-              </select>
-            </div>
-            <div x-show="['agent', 'agent_silent', 'subagent'].includes(form.type)">
-              <label class="label" for="job-agent">Agent</label>
-              <input type="text" class="input-sm" name="agent" id="job-agent" x-model="form.agent"
-                     placeholder="coding-helper">
-              <span class="hint">Agent this job runs as (blank = default identity)</span>
-            </div>
-            <div>
-              <label class="label" for="job-channel">Channel</label>
-              <select class="select" name="channel" id="job-channel" x-model="form.channel"
-                      style="padding: 0.375rem 2rem 0.375rem 0.5rem; font-size: 0.75rem;">
-                <option value="telegram">telegram</option>
-                <option value="whatsapp">whatsapp</option>
-              </select>
-              <span class="hint">Where to deliver the result</span>
-            </div>
-            <div class="sm:col-span-2">
-              <label class="label" for="job-task" x-text="form.type === 'system' ? 'Command' : 'Task'">Task</label>
-              <textarea class="textarea text-xs" name="task" id="job-task" x-model="form.task" rows="2"
-                        :placeholder="form.type === 'system' ? 'sqlite3 /app/data/memory.db \'VACUUM;\'' : 'Check my calendar and send me a morning briefing'"
-                        :required="form.type !== 'memory_consolidation'"></textarea>
-              <span class="hint" x-show="form.type === 'agent'">Natural language instruction for the agent</span>
-              <span class="hint" x-show="form.type === 'agent_silent'">Only sends when there are updates; otherwise stays quiet</span>
-              <span class="hint" x-show="form.type === 'system'">Shell command to execute</span>
-              <span class="hint" x-show="form.type === 'subagent'">Task for the subagent to run under the chosen agent</span>
-              <span class="hint" x-show="form.type === 'memory_consolidation'">No task needed — runs memory consolidation automatically</span>
-            </div>
-          </div>
-          <div class="flex items-center gap-2 mt-4">
-            <input type="hidden" name="description" x-model="form.description">
-            <button type="submit" class="btn btn-primary btn-sm">
-              <span x-text="editing ? 'Update Job' : 'Add Job'">Add Job</span>
-            </button>
-            <button type="button" class="btn btn-sm" x-show="editing" @click="cancelEdit()">
-              Cancel
-            </button>
-          </div>
-        </form>
-
-        {# Cron cheat-sheet #}
-        <details class="mt-5">
-          <summary class="text-xs text-muted cursor-pointer hover:text-gray-200 transition-colors">
-            Cron cheat sheet
-          </summary>
-          <div class="mt-2 grid grid-cols-2 gap-x-6 gap-y-1 text-xs text-muted" style="max-width: 480px;">
-            <code class="text-accent">0 7 * * *</code>    <span>Every day at 07:00</span>
-            <code class="text-accent">*/15 * * * *</code> <span>Every 15 minutes</span>
-            <code class="text-accent">0 9 * * 1-5</code>  <span>Weekdays at 09:00</span>
-            <code class="text-accent">0 0 * * 0</code>    <span>Sunday at midnight</span>
-            <code class="text-accent">30 18 * * *</code>   <span>Every day at 18:30</span>
-            <code class="text-accent">0 */6 * * *</code>   <span>Every 6 hours</span>
-          </div>
-        </details>
-      </div>
-    </div>
-  </div>
-
-  {# ── Subagent runs ────────────────────────────────────────── #}
-  <div x-show="sub === 'subagents'" style="display:none">
-    <div id="subagent-runs"
-         hx-get="/partials/subagent-runs" hx-trigger="load, every 3s" hx-swap="innerHTML">
-      <p class="text-muted text-xs">Loading…</p>
-    </div>
+  <div id="jobs-sub">
+    <div class="skeleton skeleton-row"></div>
+    <div class="skeleton skeleton-row"></div>
+    <div class="skeleton skeleton-row"></div>
   </div>
 </div>
-
-<script>
-function jobsTab() {
-  return {
-    sub: 'scheduled',
-    editing: false,
-    showForm: false,
-    jobPage: 1,
-    perPage: 10,
-    subagentCount: 0,
-    agentFilter: sessionStorage.getItem('jobsAgentFilter') || '',
-    init() {
-      // Restore sub-tab from URL hash
-      const hash = window.location.hash.replace('#', '');
-      if (hash === 'subagents' || hash === 'scheduled') this.sub = hash;
-      // Drop a stale filter whose agent no longer has any listed job.
-      const opts = [...this.$el.querySelectorAll('#jobs-agent-filter option')].map(o => o.value);
-      if (this.agentFilter && !opts.includes(this.agentFilter)) this.agentFilter = '';
-      this.$watch('agentFilter', v => {
-        sessionStorage.setItem('jobsAgentFilter', v);
-        this.jobPage = 1;
-        this.$nextTick(() => this.paginateJobs());
-      });
-      this.$nextTick(() => this.paginateJobs());
-      // Watch subagent-runs div for HTMX swaps to update badge count
-      const runsDiv = document.getElementById('subagent-runs');
-      if (runsDiv) {
-        const countCards = () => { this.subagentCount = runsDiv.querySelectorAll('.card').length; };
-        countCards();
-        new MutationObserver(countCards).observe(runsDiv, { childList: true, subtree: true });
-      }
-    },
-    setSub(s) {
-      this.sub = s;
-      history.replaceState(null, '', '#' + s);
-    },
-    // Pagination
-    get visibleJobCount() {
-      const rows = this.$refs.jobsTbody?.querySelectorAll('tr[data-job]') || [];
-      let n = 0;
-      rows.forEach(r => { if (!this.agentFilter || r.dataset.agent === this.agentFilter) n++; });
-      return n;
-    },
-    get jobTotalPages() { return Math.max(1, Math.ceil(this.visibleJobCount / this.perPage)); },
-    paginateJobs() {
-      const rows = this.$refs.jobsTbody?.querySelectorAll('tr[data-job]') || [];
-      const start = (this.jobPage - 1) * this.perPage;
-      let visIdx = 0;
-      rows.forEach(r => {
-        const matchesFilter = !this.agentFilter || r.dataset.agent === this.agentFilter;
-        if (!matchesFilter) { r.style.display = 'none'; return; }
-        r.style.display = (this.perPage === 0 || (visIdx >= start && visIdx < start + this.perPage)) ? '' : 'none';
-        visIdx++;
-      });
-    },
-    setPerPage(v) {
-      this.perPage = v === 'all' ? 0 : parseInt(v);
-      this.jobPage = 1;
-      this.$nextTick(() => this.paginateJobs());
-    },
-    setJobPage(p) {
-      this.jobPage = Math.max(1, Math.min(p, this.jobTotalPages));
-      this.$nextTick(() => this.paginateJobs());
-    },
-    form: {
-      id: '',
-      schedule: 'cron',
-      cron: '',
-      run_at: '',
-      type: 'agent',
-      task: '',
-      channel: 'telegram',
-      description: '',
-      agent: ''
-    },
-    editJob(job) {
-      this.editing = true;
-      this.form.id = job.id;
-      this.form.schedule = job.schedule || 'cron';
-      this.form.cron = job.raw_cron || '';
-      this.form.run_at = job.run_at || '';
-      this.form.type = job.type;
-      this.form.task = job.task || '';
-      this.form.channel = job.channel || 'telegram';
-      this.form.description = job.description || '';
-      this.form.agent = job.agent || '';
-      this.$nextTick(() => {
-        document.querySelector('form[hx-post="/jobs"]')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
-      });
-    },
-    cancelEdit() {
-      this.editing = false;
-      this.showForm = false;
-      this.form = { id: '', schedule: 'cron', cron: '', run_at: '', type: 'agent', task: '', channel: 'telegram', description: '', agent: '' };
-    }
-  };
-}
-</script>
diff --git a/humux/api/templates/partials/jobs_scheduled.html b/humux/api/templates/partials/jobs_scheduled.html
new file mode 100644
index 00000000..3e21aa31
--- /dev/null
+++ b/humux/api/templates/partials/jobs_scheduled.html
@@ -0,0 +1,291 @@
+{% set job_agents = jobs | map(attribute='agent') | reject('equalto', '') | unique | sort %}
+<div x-data="{
+  editing: false,
+  showForm: false,
+  jobPage: 1,
+  perPage: 10,
+  agentFilter: sessionStorage.getItem('jobsAgentFilter') || '',
+  init() {
+    const opts = [...this.$el.querySelectorAll('#jobs-agent-filter option')].map(o => o.value);
+    if (this.agentFilter && !opts.includes(this.agentFilter)) this.agentFilter = '';
+    this.$watch('agentFilter', v => {
+      sessionStorage.setItem('jobsAgentFilter', v);
+      this.jobPage = 1;
+      this.$nextTick(() => this.paginateJobs());
+    });
+    this.$nextTick(() => this.paginateJobs());
+  },
+  // Pagination
+  get visibleJobCount() {
+    const rows = this.$refs.jobsTbody?.querySelectorAll('tr[data-job]') || [];
+    let n = 0;
+    rows.forEach(r => { if (!this.agentFilter || r.dataset.agent === this.agentFilter) n++; });
+    return n;
+  },
+  get jobTotalPages() { return Math.max(1, Math.ceil(this.visibleJobCount / this.perPage)); },
+  paginateJobs() {
+    const rows = this.$refs.jobsTbody?.querySelectorAll('tr[data-job]') || [];
+    const start = (this.jobPage - 1) * this.perPage;
+    let visIdx = 0;
+    rows.forEach(r => {
+      const matchesFilter = !this.agentFilter || r.dataset.agent === this.agentFilter;
+      if (!matchesFilter) { r.style.display = 'none'; return; }
+      r.style.display = (this.perPage === 0 || (visIdx >= start && visIdx < start + this.perPage)) ? '' : 'none';
+      visIdx++;
+    });
+  },
+  setPerPage(v) {
+    this.perPage = v === 'all' ? 0 : parseInt(v);
+    this.jobPage = 1;
+    this.$nextTick(() => this.paginateJobs());
+  },
+  setJobPage(p) {
+    this.jobPage = Math.max(1, Math.min(p, this.jobTotalPages));
+    this.$nextTick(() => this.paginateJobs());
+  },
+  form: {
+    id: '', schedule: 'cron', cron: '', run_at: '', type: 'agent',
+    task: '', channel: 'telegram', description: '', agent: ''
+  },
+  editJob(job) {
+    this.editing = true;
+    this.form.id = job.id;
+    this.form.schedule = job.schedule || 'cron';
+    this.form.cron = job.raw_cron || '';
+    this.form.run_at = job.run_at || '';
+    this.form.type = job.type;
+    this.form.task = job.task || '';
+    this.form.channel = job.channel || 'telegram';
+    this.form.description = job.description || '';
+    this.form.agent = job.agent || '';
+    this.$nextTick(() => {
+      document.querySelector('form[hx-post=\"/jobs\"]')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    });
+  },
+  cancelEdit() {
+    this.editing = false;
+    this.showForm = false;
+    this.form = { id: '', schedule: 'cron', cron: '', run_at: '', type: 'agent', task: '', channel: 'telegram', description: '', agent: '' };
+  }
+}">
+  <div class="flex items-center gap-2 mb-4 flex-wrap">
+    <button class="btn btn-sm" hx-get="/partials/jobs/scheduled" hx-target="#jobs-sub" hx-swap="innerHTML"
+            hx-include="#jobs-show-completed">
+      Refresh
+    </button>
+    <span class="text-muted text-xs">{{ jobs|length }} job{{ 's' if jobs|length != 1 else '' }}</span>
+    {% if job_agents %}
+    <select id="jobs-agent-filter" class="input-sm" style="max-width:200px" x-model="agentFilter"
+            title="Filter jobs by the agent they run as" aria-label="Filter by agent">
+      <option value="">All agents</option>
+      {% for p in job_agents %}
+      <option value="{{ p }}">{{ p }}</option>
+      {% endfor %}
+    </select>
+    {% endif %}
+    {% if not agent_running %}
+    <span class="badge-off text-[0.65rem]">agent stopped — jobs won't run</span>
+    {% endif %}
+    <label class="flex items-center gap-1.5 text-xs text-muted cursor-pointer ml-auto" title="Show completed, cancelled, and past one-time jobs">
+      <input id="jobs-show-completed" type="checkbox" name="show_completed" value="true"
+             hx-get="/partials/jobs/scheduled" hx-target="#jobs-sub" hx-swap="innerHTML" hx-include="this"
+             {% if show_completed %}checked{% endif %}>
+      Show completed
+    </label>
+  </div>
+
+  {# Jobs table #}
+  <div class="overflow-x-auto">
+    <table class="table">
+      <thead>
+        <tr>
+          <th class="min-w-[120px]">ID</th>
+          <th>Schedule</th>
+          <th>Type</th>
+          <th>Agent</th>
+          <th>Task / Command</th>
+          <th class="w-16">Status</th>
+          <th class="w-20">Channel</th>
+          <th class="min-w-[120px]">Next Run</th>
+          <th class="w-28"></th>
+        </tr>
+      </thead>
+      <tbody x-ref="jobsTbody">
+        {% for job in jobs %}
+        <tr data-job data-agent="{{ job.agent }}" x-show="!agentFilter || agentFilter === {{ job.agent|tojson|forceescape }}">
+          <td class="text-xs break-all font-medium">
+            {{ job.id }}
+            {% if job.description %}
+            <span class="block text-muted text-[0.65rem]" title="{{ job.description }}">{{ job.description[:40] }}{{ '...' if job.description|length > 40 else '' }}</span>
+            {% endif %}
+          </td>
+          <td class="text-xs">
+            <code class="px-1.5 py-0.5 bg-surface-active rounded text-accent text-[0.7rem]">{{ job.cron }}</code>
+          </td>
+          <td class="text-xs">
+            <span class="{% if job.type == 'agent' %}badge-ok{% elif job.type == 'system' %}badge-warn{% else %}badge-off{% endif %}">
+              {{ job.type }}
+            </span>
+          </td>
+          <td class="text-xs">{{ job.agent or '—' }}</td>
+          <td class="text-xs break-all" style="max-width: 320px;">
+            <span class="block truncate" title="{{ job.task }}">{{ job.task }}</span>
+          </td>
+          <td class="text-xs">
+            <span class="{% if job.status == 'active' %}text-green-400{% elif job.status == 'paused' %}text-yellow-400{% elif job.status == 'cancelled' %}text-red-400{% else %}text-muted{% endif %}">
+              {{ job.status }}
+            </span>
+          </td>
+          <td class="text-xs">{{ job.channel }}</td>
+          <td class="text-xs text-muted">{{ job.next_run or '—' }}</td>
+          <td class="whitespace-nowrap">
+            <button class="btn btn-sm"
+                    @click="showForm = true; editJob({{ job|tojson|forceescape }})">
+              edit
+            </button>
+            <button class="btn btn-sm ml-0.5" title="Run now"
+                    hx-post="/jobs/run" hx-target="#job-flash" hx-swap="innerHTML"
+                    hx-vals='{"job_id": {{ job.id|tojson }} }'>
+              &triangleright;
+            </button>
+            <button class="btn btn-sm ml-0.5"
+                    x-show="{{ job.status|tojson|forceescape }} === 'active' || {{ job.status|tojson|forceescape }} === 'paused'"
+                    hx-post="/jobs/pause-resume" hx-target="#jobs-sub" hx-swap="innerHTML"
+                    hx-include="#jobs-show-completed"
+                    hx-vals='{"job_id": {{ job.id|tojson }} }'>
+              <span x-text="{{ job.status|tojson|forceescape }} === 'paused' ? '▶ Resume' : '⏸ Pause'"></span>
+            </button>
+            <button class="btn-danger btn-sm ml-0.5"
+                    hx-post="/jobs/delete" hx-target="#jobs-sub" hx-swap="innerHTML"
+                    hx-include="#jobs-show-completed"
+                    hx-vals='{"job_id": {{ job.id|tojson }} }'
+                    hx-confirm="Delete job &quot;{{ job.id }}&quot;?">
+              x
+            </button>
+          </td>
+        </tr>
+        {% endfor %}
+        {% if not jobs %}
+        <tr><td colspan="9" class="text-muted text-xs text-center py-4">No jobs configured</td></tr>
+        {% endif %}
+      </tbody>
+    </table>
+  </div>
+
+  {# Pagination controls #}
+  <div class="flex items-center justify-between gap-3 mt-3 flex-wrap" x-show="visibleJobCount > 0">
+    <div class="flex items-center gap-2">
+      <label class="label mb-0 shrink-0" for="jobs-per-page">Per page</label>
+      <select class="input-sm" style="max-width:80px" id="jobs-per-page"
+              @change="setPerPage($event.target.value)">
+        <option value="10" selected>10</option>
+        <option value="25">25</option>
+        <option value="50">50</option>
+        <option value="all">All</option>
+      </select>
+    </div>
+    <span class="text-xs text-muted" x-show="perPage > 0"
+          x-text="'Showing ' + ((jobPage - 1) * perPage + 1) + '–' + Math.min(jobPage * perPage, visibleJobCount) + ' of ' + visibleJobCount"></span>
+    <div class="flex items-center gap-1" x-show="perPage > 0 && jobTotalPages > 1">
+      <button class="btn btn-sm" :disabled="jobPage <= 1" @click="setJobPage(jobPage - 1)">‹ Prev</button>
+      <span class="text-xs text-muted px-2" x-text="jobPage + ' / ' + jobTotalPages"></span>
+      <button class="btn btn-sm" :disabled="jobPage >= jobTotalPages" @click="setJobPage(jobPage + 1)">Next ›</button>
+    </div>
+  </div>
+
+  {# Flash area for run-now feedback #}
+  <div id="job-flash" class="mt-3"></div>
+
+  {# Collapsible add / edit job form #}
+  <div class="mt-5">
+    <button class="btn btn-sm" type="button" x-show="!showForm && !editing" @click="showForm = true">
+      + Add new job
+    </button>
+
+    <div x-show="showForm || editing" x-transition>
+      <div class="flex items-center justify-between mb-2">
+        <h3 class="text-xs text-muted uppercase tracking-wider" x-text="editing ? 'Edit job' : 'Add new job'">Add new job</h3>
+        <button class="btn btn-sm" type="button" x-show="!editing" @click="showForm = false">Cancel</button>
+      </div>
+      <form hx-post="/jobs" hx-target="#jobs-sub" hx-swap="innerHTML"
+            hx-include="#jobs-show-completed">
+        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+          <div>
+            <label class="label" for="job-id">Job ID</label>
+            <input type="text" class="input-sm" name="job_id" id="job-id" x-model="form.id"
+                   placeholder="morning-briefing" required
+                   :readonly="editing" :class="editing && 'opacity-60 cursor-not-allowed'">
+          </div>
+          <div>
+            <label class="label" for="job-schedule">Schedule</label>
+            <select class="select" name="schedule" id="job-schedule" x-model="form.schedule"
+                    style="padding: 0.375rem 2rem 0.375rem 0.5rem; font-size: 0.75rem;">
+              <option value="cron">Recurring (cron)</option>
+              <option value="once">One-time</option>
+            </select>
+          </div>
+          <div x-show="form.schedule === 'cron'">
+            <label class="label" for="job-cron">Cron Expression</label>
+            <input type="text" class="input-sm" name="cron" id="job-cron" x-model="form.cron"
+                   placeholder="0 7 * * *" :required="form.schedule === 'cron'">
+          </div>
+          <div x-show="form.schedule === 'once'">
+            <label class="label" for="job-run-at">Run At</label>
+            <input type="text" class="input-sm" name="run_at" id="job-run-at" x-model="form.run_at"
+                   placeholder="2026-02-20T18:00:00+01:00" :required="form.schedule === 'once'">
+          </div>
+          <div>
+            <label class="label" for="job-type">Type</label>
+            <select class="select" name="type" id="job-type" x-model="form.type"
+                    style="padding: 0.375rem 2rem 0.375rem 0.5rem; font-size: 0.75rem;">
+              <option value="agent">agent — natural language task</option>
+              <option value="agent_silent">agent_silent — quiet when nothing new</option>
+              <option value="system">system — CLI command</option>
+              <option value="subagent">subagent — run task under an agent</option>
+              <option value="memory_consolidation">memory_consolidation</option>
+            </select>
+          </div>
+          <div x-show="['agent', 'agent_silent', 'subagent'].includes(form.type)">
+            <label class="label" for="job-agent">Agent</label>
+            <input type="text" class="input-sm" name="agent" id="job-agent" x-model="form.agent"
+                   placeholder="coding-helper">
+          </div>
+          <div>
+            <label class="label" for="job-channel">Channel</label>
+            <select class="select" name="channel" id="job-channel" x-model="form.channel"
+                    style="padding: 0.375rem 2rem 0.375rem 0.5rem; font-size: 0.75rem;">
+              <option value="telegram">telegram</option>
+              <option value="whatsapp">whatsapp</option>
+            </select>
+          </div>
+          <div class="sm:col-span-2">
+            <label class="label" for="job-task" x-text="form.type === 'system' ? 'Command' : 'Task'">Task</label>
+            <textarea class="textarea text-xs" name="task" id="job-task" x-model="form.task" rows="2"
+                      :placeholder="form.type === 'system' ? 'sqlite3 /app/data/memory.db \'VACUUM;\'' : 'Check my calendar...'"
+                      :required="form.type !== 'memory_consolidation'"></textarea>
+          </div>
+        </div>
+        <div class="flex items-center gap-2 mt-4">
+          <input type="hidden" name="description" x-model="form.description">
+          <button type="submit" class="btn btn-primary btn-sm">
+            <span x-text="editing ? 'Update Job' : 'Add Job'">Add Job</span>
+          </button>
+          <button type="button" class="btn btn-sm" x-show="editing" @click="cancelEdit()">Cancel</button>
+        </div>
+      </form>
+
+      {# Cron cheat-sheet #}
+      <details class="mt-5">
+        <summary class="text-xs text-muted cursor-pointer hover:text-gray-200 transition-colors">Cron cheat sheet</summary>
+        <div class="mt-2 grid grid-cols-2 gap-x-6 gap-y-1 text-xs text-muted" style="max-width: 480px;">
+          <code class="text-accent">0 7 * * *</code>    <span>Every day at 07:00</span>
+          <code class="text-accent">*/15 * * * *</code> <span>Every 15 minutes</span>
+          <code class="text-accent">0 9 * * 1-5</code>  <span>Weekdays at 09:00</span>
+          <code class="text-accent">0 0 * * 0</code>    <span>Sunday at midnight</span>
+          <code class="text-accent">30 18 * * *</code>   <span>Every day at 18:30</span>
+          <code class="text-accent">0 */6 * * *</code>   <span>Every 6 hours</span>
+        </div>
+      </details>
+    </div>
+  </div>
+</div>
diff --git a/humux/api/templates/partials/jobs_subagents.html b/humux/api/templates/partials/jobs_subagents.html
new file mode 100644
index 00000000..931e785d
--- /dev/null
+++ b/humux/api/templates/partials/jobs_subagents.html
@@ -0,0 +1,6 @@
+<div id="subagent-runs"
+     hx-get="/partials/subagent-runs" hx-trigger="load, every 3s" hx-swap="innerHTML">
+  <div class="skeleton skeleton-row"></div>
+  <div class="skeleton skeleton-row"></div>
+  <div class="skeleton skeleton-row"></div>
+</div>
diff --git a/humux/api/templates/partials/llm.html b/humux/api/templates/partials/llm.html
index c5d051fa..458058e8 100644
--- a/humux/api/templates/partials/llm.html
+++ b/humux/api/templates/partials/llm.html
@@ -1,31 +1,8 @@
-{# LLM tab partial #}
-{#- Reusable thinking-level control. `bg` adds the "shared config" badge for
-    background inference kinds that point at the same provider+model as main. -#}
-{% macro think(level, prov, model, lid, bg=false) -%}
-      <div class="mt-2">
-        <label class="label" for="{{ lid }}-input">Thinking level{% if bg %}<span class="text-muted text-xs font-normal" x-show="sameAsMain({{ prov }}, {{ model }})"> · same config as Main inference</span>{% endif %}</label>
-        <div class="flex items-center gap-2">
-          <input type="text" class="input-sm" style="max-width:300px" x-model="{{ level }}"
-                 list="{{ lid }}" id="{{ lid }}-input" placeholder="off — type or pick low / medium / high">
-          <datalist id="{{ lid }}">
-            <option value=""></option>
-            <template x-for="lvl in levelOptions({{ prov }})" :key="'{{ lid }}-' + lvl">
-              <option :value="lvl"></option>
-            </template>
-          </datalist>
-          <button type="button" class="btn-secondary btn-sm" x-show="{{ prov }} === 'anthropic'"
-                  @click="fetchThinkingLevels({{ prov }}, {{ model }})" :disabled="fetchingLevels[{{ prov }}]">
-            <span x-show="!fetchingLevels[{{ prov }}]">Fetch levels</span>
-            <span x-show="fetchingLevels[{{ prov }}]"><span class="spinner-sm mr-1"></span>…</span>
-          </button>
-          <a class="text-xs text-muted underline" x-show="{{ prov }} !== 'anthropic'"
-             :href="providerDocsUrl({{ prov }})" target="_blank" rel="noopener">effort docs ↗</a>
-        </div>
-        <p class="text-muted text-xs mt-1" x-show="fetchLevelsResult[{{ prov }}]" x-text="fetchLevelsResult[{{ prov }}]"></p>
-        <p class="text-muted text-xs mt-1">Leave <strong>Off</strong> for non-reasoning models. Higher = more reasoning, more tokens. Anthropic: “Fetch levels” autodiscovers supported values; other providers: see the docs link and type the value.</p>
-        <p class="text-amber-600 text-xs mt-1" x-show="{{ level }} && !modelSupportsThinking({{ model }})">Heads up: “<span x-text="{{ model }}"></span>” isn't a recognized reasoning model — only set a level if you know it supports thinking, or the inference call may error.</p>
-      </div>
-{%- endmacro %}
+{# LLM tab wrapper — Inference | Providers | History sub-tabs.
+   Holds the Alpine x-data with all LLM state. Each sub-tab is lazy-loaded
+   via htmx into #llm-sub (inside the Alpine scope so x-model etc. reach
+   the parent component). #}
+{% import 'partials/_macros.html' as m %}
 <div x-data="llmTab(
   {{ provider|default('anthropic', true)|tojson|forceescape }},
   {{ anthropic_api_key|default('', true)|tojson|forceescape }},
@@ -73,917 +50,15 @@
   {{ temperature|default('0.5', true)|tojson|forceescape }},
   {{ tr_max_reflections|default('12', true)|tojson|forceescape }}
 )">
-  {# Sub-tabs (issue #114): split the crowded LLM settings into views.
-     SysPrompt sub-tab removed (#137) — the Inspect tab shows the full
-     assembled system prompt directly. #}
+  {# Sub-tabs: Inference | Providers | History #}
   <div class="flex border-b border-border mb-4 overflow-x-auto">
     <button type="button" class="tab-link" :class="section === 'inference' && 'tab-link-active'" @click="setSection('inference')">Inference</button>
     <button type="button" class="tab-link" :class="section === 'providers' && 'tab-link-active'" @click="setSection('providers')">Providers</button>
     <button type="button" class="tab-link" :class="section === 'history' && 'tab-link-active'" @click="setSection('history')">History</button>
   </div>
-
-  <div class="space-y-6" x-show="section === 'inference'">
-  <div class="card">
-    <h2 class="text-base mb-1">Active Inference Provider</h2>
-    <p class="text-muted text-xs mb-4">Select the provider used for agent inference after testing its connection.</p>
-
-    <form class="space-y-3" @submit.prevent>
-      <div>
-        <label class="label" for="llm-provider">Provider</label>
-        <select class="input-sm" style="max-width:500px" x-model="provider" @change="resetModel()" x-effect="$el.value = provider" id="llm-provider">
-          <template x-for="item in providerOptions" :key="'provider-' + item.value">
-            <option :value="item.value" :selected="item.value === provider" x-text="item.label"></option>
-          </template>
-        </select>
-      </div>
-
-      <div>
-        <label class="label" for="llm-model">Model</label>
-        <input type="text" class="input-sm" style="max-width:500px" x-model="model"
-               list="dl-model-main" id="llm-model" placeholder="Type or pick a model">
-        <datalist id="dl-model-main">
-          <template x-for="item in modelOptions(provider)" :key="'main-' + item.value">
-            <option :value="item.value"></option>
-          </template>
-        </datalist>
-        <p class="text-muted text-xs mt-1">Type any model id, or pick from the list. Use “Fetch models” in the provider card on the <button type="button" class="text-accent hover:underline" @click="setSection('providers')">Providers</button> tab to load the live list from the API.</p>
-
-        {# Native-vision indicator + one-tap vision-fallback prompt. #}
-        <p class="text-muted text-xs mt-1" x-show="model && modelSupportsVision(model, provider)">
-          🖼️ This model reads images natively.
-        </p>
-        <div class="mt-2 rounded border border-warn-dim/40 bg-warn-dim/20 px-3 py-2"
-             x-show="model && !modelSupportsVision(model, provider)">
-          <p class="text-xs" style="color: var(--color-warn)">
-            <span x-show="!visionEnabled">This model can’t read images. Set up a vision fallback so photos still work?</span>
-            <span x-show="visionEnabled">Vision fallback is on — images are captioned by <span x-text="visionModel"></span>.</span>
-          </p>
-          <button type="button" class="btn-primary btn-sm mt-2" x-show="!visionEnabled"
-                  @click="enableVisionFallback()">
-            Enable vision fallback
-          </button>
-        </div>
-      </div>
-
-      <div class="flex flex-wrap gap-4">
-        <div>
-          <label class="label" for="llm-max-tokens">Max output tokens</label>
-          <input type="number" min="256" class="input-sm" style="max-width:200px" x-model="maxTokens" id="llm-max-tokens">
-          <p class="text-muted text-xs mt-1">Hard ceiling on tokens the model may emit per response. Too low truncates large outputs (e.g. web artifacts) mid-generation. Default 16384; raise for capable models (Claude allows up to 128000).</p>
-        </div>
-        <div>
-          <label class="label" for="llm-max-rounds">Max tool rounds</label>
-          <input type="number" min="1" class="input-sm" style="max-width:160px" x-model="maxToolRounds" id="llm-max-rounds">
-          <p class="text-muted text-xs mt-1">Hard backstop on LLM round-trips in a single user turn. Default 50; raise if a legitimate workflow needs more rounds.</p>
-        </div>
-      </div>
-
-      <div>
-        <label class="label" for="llm-temperature">Temperature</label>
-        <input type="number" min="0" max="2" step="0.05" class="input-sm" style="max-width:200px" x-model="temperature" id="llm-temperature">
-        <p class="text-muted text-xs mt-1">Sampling randomness for the main agent loop. Lower = steadier tool calls; higher = more varied prose. Skipped automatically when a thinking level is set. Default 0.5.</p>
-      </div>
-
-{{ think('thinkingLevel', 'provider', 'model', 'dl-think-main') }}
-    </form>
-
-    <div class="flex items-center gap-2 mt-4">
-      <button class="btn-primary btn-sm"
-              @click="withLoading($el, () =>
-                fetch('/config', {
-                  method: 'PATCH',
-                  headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
-                  },
-                  body: JSON.stringify({values: {
-                    'agent.llm_provider': provider,
-                    'agent.model': model,
-                    'agent.thinking_level': thinkingLevel,
-                    'agent.max_tokens': String(maxTokens),
-                    'agent.max_tool_rounds': String(maxToolRounds),
-                    'agent.temperature': String(temperature)
-                  }})
-                })
-                .then(r => { resultOk = r.ok; return r.json(); })
-                .then(d => {
-                  result = resultOk ? 'LLM settings saved' : (d.detail || 'Error');
-                  if (resultOk && window.showToast) { window.showToast('LLM settings saved'); }
-                })
-                .catch(e => { resultOk = false; result = e.message; })
-              )">
-        Save
-      </button>
-    </div>
-
-    <template x-if="result">
-      <div :class="resultOk ? 'alert-success' : 'alert-error'" class="mt-2" x-text="result"></div>
-    </template>
+  <div id="llm-sub">
+    <div class="skeleton skeleton-row"></div>
+    <div class="skeleton skeleton-row"></div>
+    <div class="skeleton skeleton-row"></div>
   </div>
-
-  <div class="card">
-    <h2 class="text-base mb-1">Memory Models</h2>
-    <p class="text-muted text-xs mb-4">Choose which provider and model to use for memory extraction and consolidation. These can differ from the main inference model.</p>
-
-    <form class="space-y-4" @submit.prevent>
-      <div>
-        <label class="label" for="llm-ext-provider">Extraction provider</label>
-        <select class="input-sm" style="max-width:500px" x-model="extractionProvider" @change="resetMemoryModel('extraction')" x-effect="$el.value = extractionProvider" id="llm-ext-provider">
-          <template x-for="item in providerOptions" :key="'extraction-' + item.value">
-            <option :value="item.value" :selected="item.value === extractionProvider" x-text="item.label"></option>
-          </template>
-        </select>
-      </div>
-      <div>
-        <label class="label" for="llm-ext-model">Extraction model</label>
-        <input type="text" class="input-sm" style="max-width:500px" x-model="extractionModel"
-               list="dl-model-ext" id="llm-ext-model" placeholder="Type or pick a model">
-        <datalist id="dl-model-ext">
-          <template x-for="item in modelOptions(extractionProvider)" :key="'ext-' + item.value">
-            <option :value="item.value"></option>
-          </template>
-        </datalist>
-        <p class="text-muted text-xs mt-1">Model used to extract memories from conversations.</p>
-      </div>
-{{ think('extractionThinkingLevel', 'extractionProvider', 'extractionModel', 'dl-think-ext', true) }}
-
-      <hr class="border-border">
-
-      <div>
-        <label class="label" for="llm-con-provider">Consolidation provider</label>
-        <select class="input-sm" style="max-width:500px" x-model="consolidationProvider" @change="resetMemoryModel('consolidation')" x-effect="$el.value = consolidationProvider" id="llm-con-provider">
-          <template x-for="item in providerOptions" :key="'consolidation-' + item.value">
-            <option :value="item.value" :selected="item.value === consolidationProvider" x-text="item.label"></option>
-          </template>
-        </select>
-      </div>
-      <div>
-        <label class="label" for="llm-con-model">Consolidation model</label>
-        <input type="text" class="input-sm" style="max-width:500px" x-model="consolidationModel"
-               list="dl-model-con" id="llm-con-model" placeholder="Type or pick a model">
-        <datalist id="dl-model-con">
-          <template x-for="item in modelOptions(consolidationProvider)" :key="'con-' + item.value">
-            <option :value="item.value"></option>
-          </template>
-        </datalist>
-        <p class="text-muted text-xs mt-1">Model used to consolidate and merge duplicate memories.</p>
-      </div>
-{{ think('consolidationThinkingLevel', 'consolidationProvider', 'consolidationModel', 'dl-think-con', true) }}
-    </form>
-
-    <div class="flex items-center gap-2 mt-4">
-      <button class="btn-primary btn-sm"
-              @click="withLoading($el, () =>
-                fetch('/config', {
-                  method: 'PATCH',
-                  headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
-                  },
-                  body: JSON.stringify({values: {
-                    'memory.extraction_provider': extractionProvider,
-                    'memory.extraction_model': extractionModel,
-                    'memory.extraction_thinking_level': extractionThinkingLevel,
-                    'memory.consolidation_provider': consolidationProvider,
-                    'memory.consolidation_model': consolidationModel,
-                    'memory.consolidation_thinking_level': consolidationThinkingLevel
-                  }})
-                })
-                .then(r => { memoryResultOk = r.ok; return r.json(); })
-                .then(d => {
-                  memoryResult = memoryResultOk ? 'Memory model settings saved' : (d.detail || 'Error');
-                  if (memoryResultOk && window.showToast) { window.showToast('Memory model settings saved'); }
-                })
-                .catch(e => { memoryResultOk = false; memoryResult = e.message; })
-              )">
-        Save memory models
-      </button>
-    </div>
-    <template x-if="memoryResult">
-      <div :class="memoryResultOk ? 'alert-success' : 'alert-error'" class="mt-2" x-text="memoryResult"></div>
-    </template>
-  </div>
-
-  <div class="card">
-    <h2 class="text-base mb-1">Goal Decomposition</h2>
-    <p class="text-muted text-xs mb-4">Break complex user requests into structured sub-goals before the main LLM call. Uses a cheap/fast model for classification and decomposition.</p>
-
-    <form class="space-y-4" @submit.prevent>
-      <div class="flex items-center gap-2">
-        <label class="label mb-0" for="llm-gd-enabled">Enabled</label>
-        <input type="checkbox" x-model="gdEnabled" class="rounded border-border" id="llm-gd-enabled">
-      </div>
-
-      <div>
-        <label class="label" for="llm-gd-provider">Provider</label>
-        <select class="input-sm" style="max-width:500px" x-model="gdProvider" @change="resetBackgroundModel('gd')" x-effect="$el.value = gdProvider" :disabled="!gdEnabled" id="llm-gd-provider">
-          <template x-for="item in providerOptions" :key="'gd-' + item.value">
-            <option :value="item.value" :selected="item.value === gdProvider" x-text="item.label"></option>
-          </template>
-        </select>
-      </div>
-      <div>
-        <label class="label" for="llm-gd-model">Model</label>
-        <input type="text" class="input-sm" style="max-width:500px" x-model="gdModel" :disabled="!gdEnabled"
-               list="dl-model-gd" id="llm-gd-model" placeholder="Type or pick a model">
-        <datalist id="dl-model-gd">
-          <template x-for="item in modelOptions(gdProvider)" :key="'gd-m-' + item.value">
-            <option :value="item.value"></option>
-          </template>
-        </datalist>
-        <p class="text-muted text-xs mt-1">Model used to classify message complexity and decompose goals.</p>
-      </div>
-{{ think('gdThinkingLevel', 'gdProvider', 'gdModel', 'dl-think-gd', true) }}
-    </form>
-
-    <div class="flex items-center gap-2 mt-4">
-      <button class="btn-primary btn-sm"
-              @click="withLoading($el, () =>
-                fetch('/config', {
-                  method: 'PATCH',
-                  headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
-                  },
-                  body: JSON.stringify({values: {
-                    'goal_decomposition.enabled': gdEnabled ? 'true' : 'false',
-                    'goal_decomposition.provider': gdProvider,
-                    'goal_decomposition.model': gdModel,
-                    'goal_decomposition.thinking_level': gdThinkingLevel
-                  }})
-                })
-                .then(r => { gdResultOk = r.ok; return r.json(); })
-                .then(d => {
-                  gdResult = gdResultOk ? 'Goal decomposition settings saved' : (d.detail || 'Error');
-                  if (gdResultOk && window.showToast) { window.showToast('Goal decomposition settings saved'); }
-                })
-                .catch(e => { gdResultOk = false; gdResult = e.message; })
-              )">
-        Save goal decomposition
-      </button>
-    </div>
-    <template x-if="gdResult">
-      <div :class="gdResultOk ? 'alert-success' : 'alert-error'" class="mt-2" x-text="gdResult"></div>
-    </template>
-  </div>
-
-  <div class="card">
-    <h2 class="text-base mb-1">Task Reflection</h2>
-    <p class="text-muted text-xs mb-4">After the agent completes a task with tools, a background reflection step analyses the execution and stores lessons learned for future prompts.</p>
-
-    <form class="space-y-4" @submit.prevent>
-      <div class="flex items-center gap-2">
-        <label class="label mb-0" for="llm-tr-enabled">Enabled</label>
-        <input type="checkbox" x-model="trEnabled" class="rounded border-border" id="llm-tr-enabled">
-      </div>
-
-      <div>
-        <label class="label" for="llm-tr-provider">Provider</label>
-        <select class="input-sm" style="max-width:500px" x-model="trProvider" @change="resetBackgroundModel('tr')" x-effect="$el.value = trProvider" :disabled="!trEnabled" id="llm-tr-provider">
-          <template x-for="item in providerOptions" :key="'tr-' + item.value">
-            <option :value="item.value" :selected="item.value === trProvider" x-text="item.label"></option>
-          </template>
-        </select>
-      </div>
-      <div>
-        <label class="label" for="llm-tr-model">Model</label>
-        <input type="text" class="input-sm" style="max-width:500px" x-model="trModel" :disabled="!trEnabled"
-               list="dl-model-tr" id="llm-tr-model" placeholder="Type or pick a model">
-        <datalist id="dl-model-tr">
-          <template x-for="item in modelOptions(trProvider)" :key="'tr-m-' + item.value">
-            <option :value="item.value"></option>
-          </template>
-        </datalist>
-        <p class="text-muted text-xs mt-1">Model used to reflect on completed tasks and extract lessons.</p>
-      </div>
-      <div>
-        <label class="label" for="llm-tr-max-reflections">Max reflections per turn</label>
-        <input type="number" min="1" class="input-sm" style="max-width:160px" x-model="trMaxReflections" :disabled="!trEnabled" id="llm-tr-max-reflections">
-        <p class="text-muted text-xs mt-1">How many past lessons are injected each turn. Keep small to limit prompt bloat. Default 12.</p>
-      </div>
-{{ think('trThinkingLevel', 'trProvider', 'trModel', 'dl-think-tr', true) }}
-    </form>
-
-    <div class="flex items-center gap-2 mt-4">
-      <button class="btn-primary btn-sm"
-              @click="withLoading($el, () =>
-                fetch('/config', {
-                  method: 'PATCH',
-                  headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
-                  },
-                  body: JSON.stringify({values: {
-                    'task_reflection.enabled': trEnabled ? 'true' : 'false',
-                    'task_reflection.provider': trProvider,
-                    'task_reflection.model': trModel,
-                    'task_reflection.thinking_level': trThinkingLevel,
-                    'task_reflection.max_reflections': String(trMaxReflections)
-                  }})
-                })
-                .then(r => { trResultOk = r.ok; return r.json(); })
-                .then(d => {
-                  trResult = trResultOk ? 'Task reflection settings saved' : (d.detail || 'Error');
-                  if (trResultOk && window.showToast) { window.showToast('Task reflection settings saved'); }
-                })
-                .catch(e => { trResultOk = false; trResult = e.message; })
-              )">
-        Save task reflection
-      </button>
-    </div>
-    <template x-if="trResult">
-      <div :class="trResultOk ? 'alert-success' : 'alert-error'" class="mt-2" x-text="trResult"></div>
-    </template>
-  </div>
-
-  <div class="card">
-    <h2 class="text-base mb-1">Reply Decision</h2>
-    <p class="text-muted text-xs mb-4">In shared/group chats with several bots and people, decide per message whether to reply at all — staying quiet for messages aimed at another bot, caught in a bot-to-bot reaction loop, or that the agent can't usefully add to. Off by default; uses a cheap/fast model for the yes/no call.</p>
-
-    <form class="space-y-4" @submit.prevent>
-      <div class="flex items-center gap-2">
-        <label class="label mb-0" for="llm-rd-enabled">Enabled</label>
-        <input type="checkbox" x-model="rdEnabled" class="rounded border-border" id="llm-rd-enabled">
-      </div>
-
-      <div>
-        <label class="label" for="llm-rd-provider">Provider</label>
-        <select class="input-sm" style="max-width:500px" x-model="rdProvider" @change="resetBackgroundModel('rd')" x-effect="$el.value = rdProvider" :disabled="!rdEnabled" id="llm-rd-provider">
-          <template x-for="item in providerOptions" :key="'rd-' + item.value">
-            <option :value="item.value" :selected="item.value === rdProvider" x-text="item.label"></option>
-          </template>
-        </select>
-      </div>
-      <div>
-        <label class="label" for="llm-rd-model">Model</label>
-        <input type="text" class="input-sm" style="max-width:500px" x-model="rdModel" :disabled="!rdEnabled"
-               list="dl-model-rd" id="llm-rd-model" placeholder="Type or pick a model">
-        <datalist id="dl-model-rd">
-          <template x-for="item in modelOptions(rdProvider)" :key="'rd-m-' + item.value">
-            <option :value="item.value"></option>
-          </template>
-        </datalist>
-        <p class="text-muted text-xs mt-1">Model used to decide whether a group-chat message warrants a reply.</p>
-      </div>
-{{ think('rdThinkingLevel', 'rdProvider', 'rdModel', 'dl-think-rd', true) }}
-
-      <div class="flex items-center gap-2">
-        <label class="label mb-0" for="llm-rd-group-only">Group chats only</label>
-        <input type="checkbox" x-model="rdGroupOnly" class="rounded border-border" :disabled="!rdEnabled" id="llm-rd-group-only">
-        <span class="text-muted text-xs">When on, 1:1 chats always get a reply; only group chats are gated.</span>
-      </div>
-      <div class="flex flex-wrap gap-4">
-        <div>
-          <label class="label" for="llm-rd-max-replies">Max replies per window</label>
-          <input type="number" min="1" class="input-sm" style="max-width:160px" x-model="rdMaxReplies" :disabled="!rdEnabled" id="llm-rd-max-replies">
-        </div>
-        <div>
-          <label class="label" for="llm-rd-window">Window (seconds)</label>
-          <input type="number" min="1" class="input-sm" style="max-width:160px" x-model="rdWindowSeconds" :disabled="!rdEnabled" id="llm-rd-window">
-        </div>
-      </div>
-      <p class="text-muted text-xs">Hard backstop: never send more than this many auto-replies into one chat per rolling window — guarantees a runaway loop terminates even if the model keeps voting to reply.</p>
-    </form>
-
-    <div class="flex items-center gap-2 mt-4">
-      <button class="btn-primary btn-sm"
-              @click="withLoading($el, () =>
-                fetch('/config', {
-                  method: 'PATCH',
-                  headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
-                  },
-                  body: JSON.stringify({values: {
-                    'reply_decision.enabled': rdEnabled ? 'true' : 'false',
-                    'reply_decision.provider': rdProvider,
-                    'reply_decision.model': rdModel,
-                    'reply_decision.thinking_level': rdThinkingLevel,
-                    'reply_decision.group_only': rdGroupOnly ? 'true' : 'false',
-                    'reply_decision.max_replies_per_window': String(rdMaxReplies),
-                    'reply_decision.window_seconds': String(rdWindowSeconds)
-                  }})
-                })
-                .then(r => { rdResultOk = r.ok; return r.json(); })
-                .then(d => {
-                  rdResult = rdResultOk ? 'Reply decision settings saved' : (d.detail || 'Error');
-                  if (rdResultOk && window.showToast) { window.showToast('Reply decision settings saved'); }
-                })
-                .catch(e => { rdResultOk = false; rdResult = e.message; })
-              )">
-        Save reply decision
-      </button>
-    </div>
-    <template x-if="rdResult">
-      <div :class="rdResultOk ? 'alert-success' : 'alert-error'" class="mt-2" x-text="rdResult"></div>
-    </template>
-  </div>
-
-  <div class="card">
-    <h2 class="text-base mb-1">History Compaction</h2>
-    <p class="text-muted text-xs mb-4">Model used to summarize older conversation turns when a session's context grows large. Enable compaction and set the trigger threshold in the <button type="button" class="text-accent hover:underline" @click="setSection('history')">History</button> sub-tab.</p>
-
-    <form class="space-y-4" @submit.prevent>
-      <div>
-        <label class="label" for="llm-cp-provider">Provider</label>
-        <select class="input-sm" style="max-width:500px" x-model="compactionProvider" x-effect="$el.value = compactionProvider" id="llm-cp-provider">
-          <template x-for="item in providerOptions" :key="'cp-' + item.value">
-            <option :value="item.value" :selected="item.value === compactionProvider" x-text="item.label"></option>
-          </template>
-        </select>
-      </div>
-      <div>
-        <label class="label" for="llm-cp-model">Model</label>
-        <input type="text" class="input-sm" style="max-width:500px" x-model="compactionModel"
-               list="dl-model-compaction" id="llm-cp-model" placeholder="Type or pick a model">
-        <datalist id="dl-model-compaction">
-          <template x-for="item in modelOptions(compactionProvider)" :key="'cp-m-' + item.value">
-            <option :value="item.value"></option>
-          </template>
-        </datalist>
-        <p class="text-muted text-xs mt-1">A small, fast model is recommended (summarization is cheap).</p>
-      </div>
-{{ think('compactionThinkingLevel', 'compactionProvider', 'compactionModel', 'dl-think-cp', true) }}
-    </form>
-
-    <div class="flex items-center gap-2 mt-4">
-      <button class="btn-primary btn-sm"
-              @click="withLoading($el, () =>
-                fetch('/config', {
-                  method: 'PATCH',
-                  headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
-                  },
-                  body: JSON.stringify({values: {
-                    'compaction.provider': compactionProvider,
-                    'compaction.model': compactionModel,
-                    'compaction.thinking_level': compactionThinkingLevel
-                  }})
-                })
-                .then(r => { compactionResultOk = r.ok; return r.json(); })
-                .then(d => {
-                  compactionResult = compactionResultOk ? 'Compaction model saved' : (d.detail || 'Error');
-                  if (compactionResultOk && window.showToast) { window.showToast('Compaction model saved'); }
-                })
-                .catch(e => { compactionResultOk = false; compactionResult = e.message; })
-              )">
-        Save compaction model
-      </button>
-    </div>
-    <template x-if="compactionResult">
-      <div :class="compactionResultOk ? 'alert-success' : 'alert-error'" class="mt-2" x-text="compactionResult"></div>
-    </template>
-  </div>
-
-  <div class="card">
-    <h2 class="text-base mb-1">Vision Fallback</h2>
-    <p class="text-muted text-xs mb-4">When the active model can’t read images, route image attachments to this model for a text description / OCR, injected in place of the image. Off by default; engages only when the active model lacks native vision. Reuses the provider keys configured below.</p>
-
-    <form class="space-y-4" @submit.prevent>
-      <div class="flex items-center gap-2">
-        <label class="label mb-0" for="llm-vision-enabled">Enabled</label>
-        <input type="checkbox" x-model="visionEnabled" class="rounded border-border" id="llm-vision-enabled">
-      </div>
-
-      <div>
-        <label class="label" for="llm-vision-provider">Provider</label>
-        <select class="input-sm" style="max-width:500px" x-model="visionProvider" :disabled="!visionEnabled" x-effect="$el.value = visionProvider" id="llm-vision-provider">
-          <template x-for="item in providerOptions" :key="'vis-' + item.value">
-            <option :value="item.value" :selected="item.value === visionProvider" x-text="item.label"></option>
-          </template>
-        </select>
-      </div>
-      <div>
-        <label class="label" for="llm-vision-model">Model</label>
-        <input type="text" class="input-sm" style="max-width:500px" x-model="visionModel" :disabled="!visionEnabled"
-               list="dl-model-vision" id="llm-vision-model" placeholder="Type or pick a model">
-        <datalist id="dl-model-vision">
-          <template x-for="item in modelOptions(visionProvider)" :key="'vis-m-' + item.value">
-            <option :value="item.value"></option>
-          </template>
-        </datalist>
-        <p class="text-amber-600 text-xs mt-1" x-show="visionModel && !modelSupportsVision(visionModel, visionProvider)">
-          Heads up: “<span x-text="visionModel"></span>” isn’t a recognized vision model — pick one that can read images, or captioning will fail.
-        </p>
-        <p class="text-muted text-xs mt-1">A small, cheap vision model is recommended (captioning is a single short call).</p>
-      </div>
-    </form>
-
-    <div class="flex items-center gap-2 mt-4">
-      <button class="btn-primary btn-sm" @click="withLoading($el, () => saveVision())">Save vision fallback</button>
-    </div>
-    <template x-if="visionResult">
-      <div :class="visionResultOk ? 'alert-success' : 'alert-error'" class="mt-2" x-text="visionResult"></div>
-    </template>
-  </div>
-  </div>{# /inference #}
-
-  <div class="space-y-6" x-show="section === 'providers'" style="display:none">
-  <div class="mb-2 rounded border border-border bg-muted/10 px-3 py-2 text-muted text-xs">
-    🔒 Provider API keys are stored in the vault on save — only a <code>${vault:NAME}</code> reference is kept in config, never the raw key. Manage or reuse them from the <button type="button" class="text-accent hover:underline" @click="$dispatch('switch-tab', 'secrets')">Vaults</button> tab.
-  </div>
-  <div class="card">
-    <h2 class="text-base mb-1">Anthropic</h2>
-    <p class="text-muted text-xs mb-4">Configure the Anthropic API key and test the connection.</p>
-    <form class="space-y-3" @submit.prevent>
-      <div>
-        {% if anthropic_vaulted %}<span class="label">Anthropic API Key</span>{% else %}<label class="label" for="llm-anthropic-key">Anthropic API Key</label>{% endif %}
-        <input type="text" class="input-sm" name="anthropic-username-hint" style="max-width:500px; display:none"
-               autocomplete="username" aria-hidden="true" tabindex="-1">
-        {% if anthropic_vaulted %}
-        <div class="text-xs text-muted py-1" style="max-width:500px">🔒 Stored in the vault as <code>${vault:ANTHROPIC_API_KEY}</code> for easy reuse — manage it from the <button type="button" class="text-accent hover:underline" @click="$dispatch('switch-tab', 'secrets')">Vaults</button> tab.</div>
-        {% else %}
-        <input type="password" class="input-sm" style="max-width:500px"
-               autocomplete="new-password" id="llm-anthropic-key"
-               x-model="apiKey" placeholder="sk-ant-...">
-        <p class="text-muted text-xs mt-1">Get a key at <a href="https://console.anthropic.com/settings/keys" target="_blank">console.anthropic.com</a></p>
-        {% endif %}
-        <div class="flex items-center gap-2 mt-2">
-          <button class="btn btn-sm" type="button" :disabled="testing.anthropic || !apiKey"
-                  @click="testProvider('anthropic')">
-            <span x-show="!testing.anthropic">Test connection</span>
-            <span x-show="testing.anthropic"><span class="spinner-sm mr-1"></span>Testing...</span>
-          </button>
-          <button class="btn btn-sm" type="button" :disabled="fetchingModels.anthropic || !apiKey"
-                  @click="fetchModels('anthropic')">
-            <span x-show="!fetchingModels.anthropic">Fetch models</span>
-            <span x-show="fetchingModels.anthropic"><span class="spinner-sm mr-1"></span>Fetching...</span>
-          </button>
-          <button class="btn btn-sm" type="button" @click="copyModels('anthropic')">Copy list</button>
-        </div>
-        <template x-if="testResults.anthropic">
-          <div :class="tests.anthropic ? 'alert-success' : 'alert-error'" class="mt-2" x-text="testResults.anthropic"></div>
-        </template>
-        <template x-if="fetchModelsResult.anthropic">
-          <div class="text-muted text-xs mt-1" x-text="fetchModelsResult.anthropic"></div>
-        </template>
-      </div>
-    </form>
-    <div class="flex items-center gap-2 mt-4">
-      <button class="btn btn-sm"
-              @click="withLoading($el, () =>
-                fetch('/config', {
-                  method: 'PATCH',
-                  headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
-                  },
-                  body: JSON.stringify({values: {
-                    'agent.anthropic_api_key': apiKey
-                  }})
-                })
-                .then(r => { resultOk = r.ok; return r.json(); })
-                .then(d => {
-                  result = resultOk ? 'Anthropic settings saved' : (d.detail || 'Error');
-                  if (resultOk && window.showToast) { window.showToast('Anthropic settings saved'); }
-                  if (resultOk) { reloadLlmPartial(); }
-                })
-                .catch(e => { resultOk = false; result = e.message; })
-              )">
-        Save Anthropic
-      </button>
-    </div>
-  </div>
-
-  <div class="card">
-    <h2 class="text-base mb-1">OpenAI</h2>
-    <p class="text-muted text-xs mb-4">Configure the OpenAI key and optional base URL, then test the connection.</p>
-    <form class="space-y-3" @submit.prevent>
-      <div>
-        {% if openai_vaulted %}<span class="label">OpenAI API Key</span>{% else %}<label class="label" for="llm-openai-key">OpenAI API Key</label>{% endif %}
-        {% if openai_vaulted %}
-        <div class="text-xs text-muted py-1" style="max-width:500px">🔒 Stored in the vault as <code>${vault:OPENAI_API_KEY}</code> for easy reuse — manage it from the <button type="button" class="text-accent hover:underline" @click="$dispatch('switch-tab', 'secrets')">Vaults</button> tab.</div>
-        {% else %}
-        <input type="password" class="input-sm" style="max-width:500px"
-               autocomplete="new-password" id="llm-openai-key"
-               x-model="openaiKey" placeholder="sk-...">
-        <p class="text-muted text-xs mt-1">Create one in <a href="https://platform.openai.com/account/api-keys" target="_blank">platform.openai.com</a></p>
-        {% endif %}
-      </div>
-      <div>
-        <label class="label" for="llm-openai-base">OpenAI Base URL (optional)</label>
-        <input type="text" class="input-sm" style="max-width:500px" id="llm-openai-base"
-               x-model="openaiBaseUrl" placeholder="https://...">
-        <div class="flex items-center gap-2 mt-2">
-          <button class="btn btn-sm" type="button" :disabled="testing.openai || !openaiKey"
-                  @click="testProvider('openai')">
-            <span x-show="!testing.openai">Test connection</span>
-            <span x-show="testing.openai"><span class="spinner-sm mr-1"></span>Testing...</span>
-          </button>
-          <button class="btn btn-sm" type="button" :disabled="fetchingModels.openai || !openaiKey"
-                  @click="fetchModels('openai')">
-            <span x-show="!fetchingModels.openai">Fetch models</span>
-            <span x-show="fetchingModels.openai"><span class="spinner-sm mr-1"></span>Fetching...</span>
-          </button>
-          <button class="btn btn-sm" type="button" @click="copyModels('openai')">Copy list</button>
-        </div>
-        <template x-if="testResults.openai">
-          <div :class="tests.openai ? 'alert-success' : 'alert-error'" class="mt-2" x-text="testResults.openai"></div>
-        </template>
-        <template x-if="fetchModelsResult.openai">
-          <div class="text-muted text-xs mt-1" x-text="fetchModelsResult.openai"></div>
-        </template>
-      </div>
-    </form>
-    <div class="flex items-center gap-2 mt-4">
-      <button class="btn btn-sm"
-              @click="withLoading($el, () =>
-                fetch('/config', {
-                  method: 'PATCH',
-                  headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
-                  },
-                  body: JSON.stringify({values: {
-                    'agent.openai_api_key': openaiKey,
-                    'agent.openai_base_url': openaiBaseUrl
-                  }})
-                })
-                .then(r => { resultOk = r.ok; return r.json(); })
-                .then(d => {
-                  result = resultOk ? 'OpenAI settings saved' : (d.detail || 'Error');
-                  if (resultOk && window.showToast) { window.showToast('OpenAI settings saved'); }
-                  if (resultOk) { reloadLlmPartial(); }
-                })
-                .catch(e => { resultOk = false; result = e.message; })
-              )">
-        Save OpenAI
-      </button>
-    </div>
-  </div>
-
-  <div class="card">
-    <h2 class="text-base mb-1">Google Gemini</h2>
-    <p class="text-muted text-xs mb-4">Configure the Google API key and optional base URL, then test the connection.</p>
-    <form class="space-y-3" @submit.prevent>
-      <div>
-        {% if google_vaulted %}<span class="label">Google API Key</span>{% else %}<label class="label" for="llm-google-key">Google API Key</label>{% endif %}
-        {% if google_vaulted %}
-        <div class="text-xs text-muted py-1" style="max-width:500px">🔒 Stored in the vault as <code>${vault:GOOGLE_API_KEY}</code> for easy reuse — manage it from the <button type="button" class="text-accent hover:underline" @click="$dispatch('switch-tab', 'secrets')">Vaults</button> tab.</div>
-        {% else %}
-        <input type="password" class="input-sm" style="max-width:500px"
-               autocomplete="new-password" id="llm-google-key"
-               x-model="googleKey" placeholder="AIza...">
-        <p class="text-muted text-xs mt-1">Create a key in <a href="https://aistudio.google.com/app/apikey" target="_blank">Google AI Studio</a></p>
-        {% endif %}
-      </div>
-      <div>
-        <label class="label" for="llm-google-base">Google Base URL (optional)</label>
-        <input type="text" class="input-sm" style="max-width:500px" id="llm-google-base"
-               x-model="googleBaseUrl" placeholder="https://generativelanguage.googleapis.com/v1beta/openai">
-        <div class="flex items-center gap-2 mt-2">
-          <button class="btn btn-sm" type="button" :disabled="testing.google || !googleKey"
-                  @click="testProvider('google')">
-            <span x-show="!testing.google">Test connection</span>
-            <span x-show="testing.google"><span class="spinner-sm mr-1"></span>Testing...</span>
-          </button>
-          <button class="btn btn-sm" type="button" :disabled="fetchingModels.google || !googleKey"
-                  @click="fetchModels('google')">
-            <span x-show="!fetchingModels.google">Fetch models</span>
-            <span x-show="fetchingModels.google"><span class="spinner-sm mr-1"></span>Fetching...</span>
-          </button>
-          <button class="btn btn-sm" type="button" @click="copyModels('google')">Copy list</button>
-        </div>
-        <template x-if="testResults.google">
-          <div :class="tests.google ? 'alert-success' : 'alert-error'" class="mt-2" x-text="testResults.google"></div>
-        </template>
-        <template x-if="fetchModelsResult.google">
-          <div class="text-muted text-xs mt-1" x-text="fetchModelsResult.google"></div>
-        </template>
-      </div>
-    </form>
-    <div class="flex items-center gap-2 mt-4">
-      <button class="btn btn-sm"
-              @click="withLoading($el, () =>
-                fetch('/config', {
-                  method: 'PATCH',
-                  headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
-                  },
-                  body: JSON.stringify({values: {
-                    'agent.google_api_key': googleKey,
-                    'agent.google_base_url': googleBaseUrl
-                  }})
-                })
-                .then(r => { resultOk = r.ok; return r.json(); })
-                .then(d => {
-                  result = resultOk ? 'Google settings saved' : (d.detail || 'Error');
-                  if (resultOk && window.showToast) { window.showToast('Google settings saved'); }
-                  if (resultOk) { reloadLlmPartial(); }
-                })
-                .catch(e => { resultOk = false; result = e.message; })
-              )">
-        Save Google
-      </button>
-    </div>
-  </div>
-
-  <div class="card">
-    <h2 class="text-base mb-1">Grok (xAI)</h2>
-    <p class="text-muted text-xs mb-4">Configure the Grok key and optional base URL, then test the connection.</p>
-    <form class="space-y-3" @submit.prevent>
-      <div>
-        {% if grok_vaulted %}<span class="label">Grok API Key</span>{% else %}<label class="label" for="llm-grok-key">Grok API Key</label>{% endif %}
-        {% if grok_vaulted %}
-        <div class="text-xs text-muted py-1" style="max-width:500px">🔒 Stored in the vault as <code>${vault:GROK_API_KEY}</code> for easy reuse — manage it from the <button type="button" class="text-accent hover:underline" @click="$dispatch('switch-tab', 'secrets')">Vaults</button> tab.</div>
-        {% else %}
-        <input type="password" class="input-sm" style="max-width:500px"
-               autocomplete="new-password" id="llm-grok-key"
-               x-model="grokKey" placeholder="xai-...">
-        <p class="text-muted text-xs mt-1">Create a key in <a href="https://console.x.ai/" target="_blank">console.x.ai</a></p>
-        {% endif %}
-      </div>
-      <div>
-        <label class="label" for="llm-grok-base">Grok Base URL (optional)</label>
-        <input type="text" class="input-sm" style="max-width:500px" id="llm-grok-base"
-               x-model="grokBaseUrl" placeholder="https://api.x.ai/v1">
-        <div class="flex items-center gap-2 mt-2">
-          <button class="btn btn-sm" type="button" :disabled="testing.grok || !grokKey"
-                  @click="testProvider('grok')">
-            <span x-show="!testing.grok">Test connection</span>
-            <span x-show="testing.grok"><span class="spinner-sm mr-1"></span>Testing...</span>
-          </button>
-          <button class="btn btn-sm" type="button" :disabled="fetchingModels.grok || !grokKey"
-                  @click="fetchModels('grok')">
-            <span x-show="!fetchingModels.grok">Fetch models</span>
-            <span x-show="fetchingModels.grok"><span class="spinner-sm mr-1"></span>Fetching...</span>
-          </button>
-          <button class="btn btn-sm" type="button" @click="copyModels('grok')">Copy list</button>
-        </div>
-        <template x-if="testResults.grok">
-          <div :class="tests.grok ? 'alert-success' : 'alert-error'" class="mt-2" x-text="testResults.grok"></div>
-        </template>
-        <template x-if="fetchModelsResult.grok">
-          <div class="text-muted text-xs mt-1" x-text="fetchModelsResult.grok"></div>
-        </template>
-      </div>
-    </form>
-    <div class="flex items-center gap-2 mt-4">
-      <button class="btn btn-sm"
-              @click="withLoading($el, () =>
-                fetch('/config', {
-                  method: 'PATCH',
-                  headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
-                  },
-                  body: JSON.stringify({values: {
-                    'agent.grok_api_key': grokKey,
-                    'agent.grok_base_url': grokBaseUrl
-                  }})
-                })
-                .then(r => { resultOk = r.ok; return r.json(); })
-                .then(d => {
-                  result = resultOk ? 'Grok settings saved' : (d.detail || 'Error');
-                  if (resultOk && window.showToast) { window.showToast('Grok settings saved'); }
-                  if (resultOk) { reloadLlmPartial(); }
-                })
-                .catch(e => { resultOk = false; result = e.message; })
-              )">
-        Save Grok
-      </button>
-    </div>
-  </div>
-
-  <div class="card">
-    <h2 class="text-base mb-1">DeepSeek</h2>
-    <p class="text-muted text-xs mb-4">Configure the DeepSeek key and optional base URL, then test the connection.</p>
-    <form class="space-y-3" @submit.prevent>
-      <div>
-        {% if deepseek_vaulted %}<span class="label">DeepSeek API Key</span>{% else %}<label class="label" for="llm-deepseek-key">DeepSeek API Key</label>{% endif %}
-        {% if deepseek_vaulted %}
-        <div class="text-xs text-muted py-1" style="max-width:500px">🔒 Stored in the vault as <code>${vault:DEEPSEEK_API_KEY}</code> for easy reuse — manage it from the <button type="button" class="text-accent hover:underline" @click="$dispatch('switch-tab', 'secrets')">Vaults</button> tab.</div>
-        {% else %}
-        <input type="password" class="input-sm" style="max-width:500px"
-               autocomplete="new-password" id="llm-deepseek-key"
-               x-model="deepseekKey" placeholder="sk-...">
-        <p class="text-muted text-xs mt-1">Create a key in <a href="https://platform.deepseek.com/api_keys" target="_blank">platform.deepseek.com</a></p>
-        {% endif %}
-      </div>
-      <div>
-        <label class="label" for="llm-deepseek-base">DeepSeek Base URL (optional)</label>
-        <input type="text" class="input-sm" style="max-width:500px" id="llm-deepseek-base"
-               x-model="deepseekBaseUrl" placeholder="https://api.deepseek.com">
-        <div class="flex items-center gap-2 mt-2">
-          <button class="btn btn-sm" type="button" :disabled="testing.deepseek || !deepseekKey"
-                  @click="testProvider('deepseek')">
-            <span x-show="!testing.deepseek">Test connection</span>
-            <span x-show="testing.deepseek"><span class="spinner-sm mr-1"></span>Testing...</span>
-          </button>
-          <button class="btn btn-sm" type="button" :disabled="fetchingModels.deepseek || !deepseekKey"
-                  @click="fetchModels('deepseek')">
-            <span x-show="!fetchingModels.deepseek">Fetch models</span>
-            <span x-show="fetchingModels.deepseek"><span class="spinner-sm mr-1"></span>Fetching...</span>
-          </button>
-          <button class="btn btn-sm" type="button" @click="copyModels('deepseek')">Copy list</button>
-        </div>
-        <template x-if="testResults.deepseek">
-          <div :class="tests.deepseek ? 'alert-success' : 'alert-error'" class="mt-2" x-text="testResults.deepseek"></div>
-        </template>
-        <template x-if="fetchModelsResult.deepseek">
-          <div class="text-muted text-xs mt-1" x-text="fetchModelsResult.deepseek"></div>
-        </template>
-      </div>
-    </form>
-    <div class="flex items-center gap-2 mt-4">
-      <button class="btn btn-sm"
-              @click="withLoading($el, () =>
-                fetch('/config', {
-                  method: 'PATCH',
-                  headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
-                  },
-                  body: JSON.stringify({values: {
-                    'agent.deepseek_api_key': deepseekKey,
-                    'agent.deepseek_base_url': deepseekBaseUrl
-                  }})
-                })
-                .then(r => { resultOk = r.ok; return r.json(); })
-                .then(d => {
-                  result = resultOk ? 'DeepSeek settings saved' : (d.detail || 'Error');
-                  if (resultOk && window.showToast) { window.showToast('DeepSeek settings saved'); }
-                  if (resultOk) { reloadLlmPartial(); }
-                })
-                .catch(e => { resultOk = false; result = e.message; })
-              )">
-        Save DeepSeek
-      </button>
-    </div>
-  </div>
-
-  <div class="card">
-    <h2 class="text-base mb-1">OpenRouter</h2>
-    <p class="text-muted text-xs mb-2">A provider-agnostic gateway: one API key reaches models from many labs (Anthropic, OpenAI, Google, Meta, DeepSeek, …). Model ids are namespaced <code>provider/model</code> (e.g. <code>anthropic/claude-sonnet-4.5</code>) — use <strong>Fetch models</strong> for the live catalog.</p>
-    <p class="text-muted text-xs mb-4">OpenRouter can auto-route around provider outages and fall back between hosts, and publishes transparent per-token pricing per model. Docs: <a href="https://openrouter.ai/docs" target="_blank" rel="noopener">openrouter.ai/docs</a> · Models &amp; pricing: <a href="https://openrouter.ai/models" target="_blank" rel="noopener">openrouter.ai/models</a> · Routing &amp; fallbacks: <a href="https://openrouter.ai/docs/features/provider-routing" target="_blank" rel="noopener">provider routing</a>.</p>
-    <form class="space-y-3" @submit.prevent>
-      <div>
-        {% if openrouter_vaulted %}<span class="label">OpenRouter API Key</span>{% else %}<label class="label" for="llm-openrouter-key">OpenRouter API Key</label>{% endif %}
-        {% if openrouter_vaulted %}
-        <div class="text-xs text-muted py-1" style="max-width:500px">🔒 Stored in the vault as <code>${vault:OPENROUTER_API_KEY}</code> for easy reuse — manage it from the <button type="button" class="text-accent hover:underline" @click="$dispatch('switch-tab', 'secrets')">Vaults</button> tab.</div>
-        {% else %}
-        <input type="password" class="input-sm" style="max-width:500px"
-               autocomplete="new-password" id="llm-openrouter-key"
-               x-model="openrouterKey" placeholder="sk-or-...">
-        <p class="text-muted text-xs mt-1">Create a key in <a href="https://openrouter.ai/settings/keys" target="_blank" rel="noopener">openrouter.ai/settings/keys</a></p>
-        {% endif %}
-      </div>
-      <div>
-        <label class="label" for="llm-openrouter-base">OpenRouter Base URL (optional)</label>
-        <input type="text" class="input-sm" style="max-width:500px" id="llm-openrouter-base"
-               x-model="openrouterBaseUrl" placeholder="https://openrouter.ai/api/v1">
-        <div class="flex items-center gap-2 mt-2">
-          <button class="btn btn-sm" type="button" :disabled="testing.openrouter || !openrouterKey"
-                  @click="testProvider('openrouter')">
-            <span x-show="!testing.openrouter">Test connection</span>
-            <span x-show="testing.openrouter"><span class="spinner-sm mr-1"></span>Testing...</span>
-          </button>
-          <button class="btn btn-sm" type="button" :disabled="fetchingModels.openrouter || !openrouterKey"
-                  @click="fetchModels('openrouter')">
-            <span x-show="!fetchingModels.openrouter">Fetch models</span>
-            <span x-show="fetchingModels.openrouter"><span class="spinner-sm mr-1"></span>Fetching...</span>
-          </button>
-          <button class="btn btn-sm" type="button" @click="copyModels('openrouter')">Copy list</button>
-        </div>
-        <template x-if="testResults.openrouter">
-          <div :class="tests.openrouter ? 'alert-success' : 'alert-error'" class="mt-2" x-text="testResults.openrouter"></div>
-        </template>
-        <template x-if="fetchModelsResult.openrouter">
-          <div class="text-muted text-xs mt-1" x-text="fetchModelsResult.openrouter"></div>
-        </template>
-      </div>
-    </form>
-    <div class="flex items-center gap-2 mt-4">
-      <button class="btn btn-sm"
-              @click="withLoading($el, () =>
-                fetch('/config', {
-                  method: 'PATCH',
-                  headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
-                  },
-                  body: JSON.stringify({values: {
-                    'agent.openrouter_api_key': openrouterKey,
-                    'agent.openrouter_base_url': openrouterBaseUrl
-                  }})
-                })
-                .then(r => { resultOk = r.ok; return r.json(); })
-                .then(d => {
-                  result = resultOk ? 'OpenRouter settings saved' : (d.detail || 'Error');
-                  if (resultOk && window.showToast) { window.showToast('OpenRouter settings saved'); }
-                  if (resultOk) { reloadLlmPartial(); }
-                })
-                .catch(e => { resultOk = false; result = e.message; })
-              )">
-        Save OpenRouter
-      </button>
-    </div>
-  </div>
-  </div>{# /providers #}
-
-  <div class="space-y-6" x-show="section === 'history'" style="display:none">
-    {% include 'partials/history.html' %}
-  </div>{# /history #}
 </div>
diff --git a/humux/api/templates/partials/llm_history.html b/humux/api/templates/partials/llm_history.html
new file mode 100644
index 00000000..6cc8e2dc
--- /dev/null
+++ b/humux/api/templates/partials/llm_history.html
@@ -0,0 +1,4 @@
+  <div class="space-y-6" x-show="section === 'history'" >
+    {% include 'partials/history.html' %}
+  </div>{# /history #}
+</div>
diff --git a/humux/api/templates/partials/llm_inference.html b/humux/api/templates/partials/llm_inference.html
new file mode 100644
index 00000000..cbb36abb
--- /dev/null
+++ b/humux/api/templates/partials/llm_inference.html
@@ -0,0 +1,498 @@
+{% import "partials/_macros.html" as m %}
+  <div class="space-y-6" x-show="section === 'inference'">
+  <div class="card">
+    <h2 class="text-base mb-1">Active Inference Provider</h2>
+    <p class="text-muted text-xs mb-4">Select the provider used for agent inference after testing its connection.</p>
+
+    <form class="space-y-3" @submit.prevent>
+      <div>
+        <label class="label" for="llm-provider">Provider</label>
+        <select class="input-sm" style="max-width:500px" x-model="provider" @change="resetModel()" x-effect="$el.value = provider" id="llm-provider">
+          <template x-for="item in providerOptions" :key="'provider-' + item.value">
+            <option :value="item.value" :selected="item.value === provider" x-text="item.label"></option>
+          </template>
+        </select>
+      </div>
+
+      <div>
+        <label class="label" for="llm-model">Model</label>
+        <input type="text" class="input-sm" style="max-width:500px" x-model="model"
+               list="dl-model-main" id="llm-model" placeholder="Type or pick a model">
+        <datalist id="dl-model-main">
+          <template x-for="item in modelOptions(provider)" :key="'main-' + item.value">
+            <option :value="item.value"></option>
+          </template>
+        </datalist>
+        <p class="text-muted text-xs mt-1">Type any model id, or pick from the list. Use “Fetch models” in the provider card on the <button type="button" class="text-accent hover:underline" @click="setSection('providers')">Providers</button> tab to load the live list from the API.</p>
+
+        {# Native-vision indicator + one-tap vision-fallback prompt. #}
+        <p class="text-muted text-xs mt-1" x-show="model && modelSupportsVision(model, provider)">
+          🖼️ This model reads images natively.
+        </p>
+        <div class="mt-2 rounded border border-warn-dim/40 bg-warn-dim/20 px-3 py-2"
+             x-show="model && !modelSupportsVision(model, provider)">
+          <p class="text-xs" style="color: var(--color-warn)">
+            <span x-show="!visionEnabled">This model can’t read images. Set up a vision fallback so photos still work?</span>
+            <span x-show="visionEnabled">Vision fallback is on — images are captioned by <span x-text="visionModel"></span>.</span>
+          </p>
+          <button type="button" class="btn-primary btn-sm mt-2" x-show="!visionEnabled"
+                  @click="enableVisionFallback()">
+            Enable vision fallback
+          </button>
+        </div>
+      </div>
+
+      <div class="flex flex-wrap gap-4">
+        <div>
+          <label class="label" for="llm-max-tokens">Max output tokens</label>
+          <input type="number" min="256" class="input-sm" style="max-width:200px" x-model="maxTokens" id="llm-max-tokens">
+          <p class="text-muted text-xs mt-1">Hard ceiling on tokens the model may emit per response. Too low truncates large outputs (e.g. web artifacts) mid-generation. Default 16384; raise for capable models (Claude allows up to 128000).</p>
+        </div>
+        <div>
+          <label class="label" for="llm-max-rounds">Max tool rounds</label>
+          <input type="number" min="1" class="input-sm" style="max-width:160px" x-model="maxToolRounds" id="llm-max-rounds">
+          <p class="text-muted text-xs mt-1">Hard backstop on LLM round-trips in a single user turn. Default 50; raise if a legitimate workflow needs more rounds.</p>
+        </div>
+      </div>
+
+      <div>
+        <label class="label" for="llm-temperature">Temperature</label>
+        <input type="number" min="0" max="2" step="0.05" class="input-sm" style="max-width:200px" x-model="temperature" id="llm-temperature">
+        <p class="text-muted text-xs mt-1">Sampling randomness for the main agent loop. Lower = steadier tool calls; higher = more varied prose. Skipped automatically when a thinking level is set. Default 0.5.</p>
+      </div>
+
+{{ think('thinkingLevel', 'provider', 'model', 'dl-think-main') }}
+    </form>
+
+    <div class="flex items-center gap-2 mt-4">
+      <button class="btn-primary btn-sm"
+              @click="withLoading($el, () =>
+                fetch('/config', {
+                  method: 'PATCH',
+                  headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
+                  },
+                  body: JSON.stringify({values: {
+                    'agent.llm_provider': provider,
+                    'agent.model': model,
+                    'agent.thinking_level': thinkingLevel,
+                    'agent.max_tokens': String(maxTokens),
+                    'agent.max_tool_rounds': String(maxToolRounds),
+                    'agent.temperature': String(temperature)
+                  }})
+                })
+                .then(r => { resultOk = r.ok; return r.json(); })
+                .then(d => {
+                  result = resultOk ? 'LLM settings saved' : (d.detail || 'Error');
+                  if (resultOk && window.showToast) { window.showToast('LLM settings saved'); }
+                })
+                .catch(e => { resultOk = false; result = e.message; })
+              )">
+        Save
+      </button>
+    </div>
+
+    <template x-if="result">
+      <div :class="resultOk ? 'alert-success' : 'alert-error'" class="mt-2" x-text="result"></div>
+    </template>
+  </div>
+
+  <div class="card">
+    <h2 class="text-base mb-1">Memory Models</h2>
+    <p class="text-muted text-xs mb-4">Choose which provider and model to use for memory extraction and consolidation. These can differ from the main inference model.</p>
+
+    <form class="space-y-4" @submit.prevent>
+      <div>
+        <label class="label" for="llm-ext-provider">Extraction provider</label>
+        <select class="input-sm" style="max-width:500px" x-model="extractionProvider" @change="resetMemoryModel('extraction')" x-effect="$el.value = extractionProvider" id="llm-ext-provider">
+          <template x-for="item in providerOptions" :key="'extraction-' + item.value">
+            <option :value="item.value" :selected="item.value === extractionProvider" x-text="item.label"></option>
+          </template>
+        </select>
+      </div>
+      <div>
+        <label class="label" for="llm-ext-model">Extraction model</label>
+        <input type="text" class="input-sm" style="max-width:500px" x-model="extractionModel"
+               list="dl-model-ext" id="llm-ext-model" placeholder="Type or pick a model">
+        <datalist id="dl-model-ext">
+          <template x-for="item in modelOptions(extractionProvider)" :key="'ext-' + item.value">
+            <option :value="item.value"></option>
+          </template>
+        </datalist>
+        <p class="text-muted text-xs mt-1">Model used to extract memories from conversations.</p>
+      </div>
+{{ think('extractionThinkingLevel', 'extractionProvider', 'extractionModel', 'dl-think-ext', true) }}
+
+      <hr class="border-border">
+
+      <div>
+        <label class="label" for="llm-con-provider">Consolidation provider</label>
+        <select class="input-sm" style="max-width:500px" x-model="consolidationProvider" @change="resetMemoryModel('consolidation')" x-effect="$el.value = consolidationProvider" id="llm-con-provider">
+          <template x-for="item in providerOptions" :key="'consolidation-' + item.value">
+            <option :value="item.value" :selected="item.value === consolidationProvider" x-text="item.label"></option>
+          </template>
+        </select>
+      </div>
+      <div>
+        <label class="label" for="llm-con-model">Consolidation model</label>
+        <input type="text" class="input-sm" style="max-width:500px" x-model="consolidationModel"
+               list="dl-model-con" id="llm-con-model" placeholder="Type or pick a model">
+        <datalist id="dl-model-con">
+          <template x-for="item in modelOptions(consolidationProvider)" :key="'con-' + item.value">
+            <option :value="item.value"></option>
+          </template>
+        </datalist>
+        <p class="text-muted text-xs mt-1">Model used to consolidate and merge duplicate memories.</p>
+      </div>
+{{ think('consolidationThinkingLevel', 'consolidationProvider', 'consolidationModel', 'dl-think-con', true) }}
+    </form>
+
+    <div class="flex items-center gap-2 mt-4">
+      <button class="btn-primary btn-sm"
+              @click="withLoading($el, () =>
+                fetch('/config', {
+                  method: 'PATCH',
+                  headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
+                  },
+                  body: JSON.stringify({values: {
+                    'memory.extraction_provider': extractionProvider,
+                    'memory.extraction_model': extractionModel,
+                    'memory.extraction_thinking_level': extractionThinkingLevel,
+                    'memory.consolidation_provider': consolidationProvider,
+                    'memory.consolidation_model': consolidationModel,
+                    'memory.consolidation_thinking_level': consolidationThinkingLevel
+                  }})
+                })
+                .then(r => { memoryResultOk = r.ok; return r.json(); })
+                .then(d => {
+                  memoryResult = memoryResultOk ? 'Memory model settings saved' : (d.detail || 'Error');
+                  if (memoryResultOk && window.showToast) { window.showToast('Memory model settings saved'); }
+                })
+                .catch(e => { memoryResultOk = false; memoryResult = e.message; })
+              )">
+        Save memory models
+      </button>
+    </div>
+    <template x-if="memoryResult">
+      <div :class="memoryResultOk ? 'alert-success' : 'alert-error'" class="mt-2" x-text="memoryResult"></div>
+    </template>
+  </div>
+
+  <div class="card">
+    <h2 class="text-base mb-1">Goal Decomposition</h2>
+    <p class="text-muted text-xs mb-4">Break complex user requests into structured sub-goals before the main LLM call. Uses a cheap/fast model for classification and decomposition.</p>
+
+    <form class="space-y-4" @submit.prevent>
+      <div class="flex items-center gap-2">
+        <label class="label mb-0" for="llm-gd-enabled">Enabled</label>
+        <input type="checkbox" x-model="gdEnabled" class="rounded border-border" id="llm-gd-enabled">
+      </div>
+
+      <div>
+        <label class="label" for="llm-gd-provider">Provider</label>
+        <select class="input-sm" style="max-width:500px" x-model="gdProvider" @change="resetBackgroundModel('gd')" x-effect="$el.value = gdProvider" :disabled="!gdEnabled" id="llm-gd-provider">
+          <template x-for="item in providerOptions" :key="'gd-' + item.value">
+            <option :value="item.value" :selected="item.value === gdProvider" x-text="item.label"></option>
+          </template>
+        </select>
+      </div>
+      <div>
+        <label class="label" for="llm-gd-model">Model</label>
+        <input type="text" class="input-sm" style="max-width:500px" x-model="gdModel" :disabled="!gdEnabled"
+               list="dl-model-gd" id="llm-gd-model" placeholder="Type or pick a model">
+        <datalist id="dl-model-gd">
+          <template x-for="item in modelOptions(gdProvider)" :key="'gd-m-' + item.value">
+            <option :value="item.value"></option>
+          </template>
+        </datalist>
+        <p class="text-muted text-xs mt-1">Model used to classify message complexity and decompose goals.</p>
+      </div>
+{{ think('gdThinkingLevel', 'gdProvider', 'gdModel', 'dl-think-gd', true) }}
+    </form>
+
+    <div class="flex items-center gap-2 mt-4">
+      <button class="btn-primary btn-sm"
+              @click="withLoading($el, () =>
+                fetch('/config', {
+                  method: 'PATCH',
+                  headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
+                  },
+                  body: JSON.stringify({values: {
+                    'goal_decomposition.enabled': gdEnabled ? 'true' : 'false',
+                    'goal_decomposition.provider': gdProvider,
+                    'goal_decomposition.model': gdModel,
+                    'goal_decomposition.thinking_level': gdThinkingLevel
+                  }})
+                })
+                .then(r => { gdResultOk = r.ok; return r.json(); })
+                .then(d => {
+                  gdResult = gdResultOk ? 'Goal decomposition settings saved' : (d.detail || 'Error');
+                  if (gdResultOk && window.showToast) { window.showToast('Goal decomposition settings saved'); }
+                })
+                .catch(e => { gdResultOk = false; gdResult = e.message; })
+              )">
+        Save goal decomposition
+      </button>
+    </div>
+    <template x-if="gdResult">
+      <div :class="gdResultOk ? 'alert-success' : 'alert-error'" class="mt-2" x-text="gdResult"></div>
+    </template>
+  </div>
+
+  <div class="card">
+    <h2 class="text-base mb-1">Task Reflection</h2>
+    <p class="text-muted text-xs mb-4">After the agent completes a task with tools, a background reflection step analyses the execution and stores lessons learned for future prompts.</p>
+
+    <form class="space-y-4" @submit.prevent>
+      <div class="flex items-center gap-2">
+        <label class="label mb-0" for="llm-tr-enabled">Enabled</label>
+        <input type="checkbox" x-model="trEnabled" class="rounded border-border" id="llm-tr-enabled">
+      </div>
+
+      <div>
+        <label class="label" for="llm-tr-provider">Provider</label>
+        <select class="input-sm" style="max-width:500px" x-model="trProvider" @change="resetBackgroundModel('tr')" x-effect="$el.value = trProvider" :disabled="!trEnabled" id="llm-tr-provider">
+          <template x-for="item in providerOptions" :key="'tr-' + item.value">
+            <option :value="item.value" :selected="item.value === trProvider" x-text="item.label"></option>
+          </template>
+        </select>
+      </div>
+      <div>
+        <label class="label" for="llm-tr-model">Model</label>
+        <input type="text" class="input-sm" style="max-width:500px" x-model="trModel" :disabled="!trEnabled"
+               list="dl-model-tr" id="llm-tr-model" placeholder="Type or pick a model">
+        <datalist id="dl-model-tr">
+          <template x-for="item in modelOptions(trProvider)" :key="'tr-m-' + item.value">
+            <option :value="item.value"></option>
+          </template>
+        </datalist>
+        <p class="text-muted text-xs mt-1">Model used to reflect on completed tasks and extract lessons.</p>
+      </div>
+      <div>
+        <label class="label" for="llm-tr-max-reflections">Max reflections per turn</label>
+        <input type="number" min="1" class="input-sm" style="max-width:160px" x-model="trMaxReflections" :disabled="!trEnabled" id="llm-tr-max-reflections">
+        <p class="text-muted text-xs mt-1">How many past lessons are injected each turn. Keep small to limit prompt bloat. Default 12.</p>
+      </div>
+{{ think('trThinkingLevel', 'trProvider', 'trModel', 'dl-think-tr', true) }}
+    </form>
+
+    <div class="flex items-center gap-2 mt-4">
+      <button class="btn-primary btn-sm"
+              @click="withLoading($el, () =>
+                fetch('/config', {
+                  method: 'PATCH',
+                  headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
+                  },
+                  body: JSON.stringify({values: {
+                    'task_reflection.enabled': trEnabled ? 'true' : 'false',
+                    'task_reflection.provider': trProvider,
+                    'task_reflection.model': trModel,
+                    'task_reflection.thinking_level': trThinkingLevel,
+                    'task_reflection.max_reflections': String(trMaxReflections)
+                  }})
+                })
+                .then(r => { trResultOk = r.ok; return r.json(); })
+                .then(d => {
+                  trResult = trResultOk ? 'Task reflection settings saved' : (d.detail || 'Error');
+                  if (trResultOk && window.showToast) { window.showToast('Task reflection settings saved'); }
+                })
+                .catch(e => { trResultOk = false; trResult = e.message; })
+              )">
+        Save task reflection
+      </button>
+    </div>
+    <template x-if="trResult">
+      <div :class="trResultOk ? 'alert-success' : 'alert-error'" class="mt-2" x-text="trResult"></div>
+    </template>
+  </div>
+
+  <div class="card">
+    <h2 class="text-base mb-1">Reply Decision</h2>
+    <p class="text-muted text-xs mb-4">In shared/group chats with several bots and people, decide per message whether to reply at all — staying quiet for messages aimed at another bot, caught in a bot-to-bot reaction loop, or that the agent can't usefully add to. Off by default; uses a cheap/fast model for the yes/no call.</p>
+
+    <form class="space-y-4" @submit.prevent>
+      <div class="flex items-center gap-2">
+        <label class="label mb-0" for="llm-rd-enabled">Enabled</label>
+        <input type="checkbox" x-model="rdEnabled" class="rounded border-border" id="llm-rd-enabled">
+      </div>
+
+      <div>
+        <label class="label" for="llm-rd-provider">Provider</label>
+        <select class="input-sm" style="max-width:500px" x-model="rdProvider" @change="resetBackgroundModel('rd')" x-effect="$el.value = rdProvider" :disabled="!rdEnabled" id="llm-rd-provider">
+          <template x-for="item in providerOptions" :key="'rd-' + item.value">
+            <option :value="item.value" :selected="item.value === rdProvider" x-text="item.label"></option>
+          </template>
+        </select>
+      </div>
+      <div>
+        <label class="label" for="llm-rd-model">Model</label>
+        <input type="text" class="input-sm" style="max-width:500px" x-model="rdModel" :disabled="!rdEnabled"
+               list="dl-model-rd" id="llm-rd-model" placeholder="Type or pick a model">
+        <datalist id="dl-model-rd">
+          <template x-for="item in modelOptions(rdProvider)" :key="'rd-m-' + item.value">
+            <option :value="item.value"></option>
+          </template>
+        </datalist>
+        <p class="text-muted text-xs mt-1">Model used to decide whether a group-chat message warrants a reply.</p>
+      </div>
+{{ think('rdThinkingLevel', 'rdProvider', 'rdModel', 'dl-think-rd', true) }}
+
+      <div class="flex items-center gap-2">
+        <label class="label mb-0" for="llm-rd-group-only">Group chats only</label>
+        <input type="checkbox" x-model="rdGroupOnly" class="rounded border-border" :disabled="!rdEnabled" id="llm-rd-group-only">
+        <span class="text-muted text-xs">When on, 1:1 chats always get a reply; only group chats are gated.</span>
+      </div>
+      <div class="flex flex-wrap gap-4">
+        <div>
+          <label class="label" for="llm-rd-max-replies">Max replies per window</label>
+          <input type="number" min="1" class="input-sm" style="max-width:160px" x-model="rdMaxReplies" :disabled="!rdEnabled" id="llm-rd-max-replies">
+        </div>
+        <div>
+          <label class="label" for="llm-rd-window">Window (seconds)</label>
+          <input type="number" min="1" class="input-sm" style="max-width:160px" x-model="rdWindowSeconds" :disabled="!rdEnabled" id="llm-rd-window">
+        </div>
+      </div>
+      <p class="text-muted text-xs">Hard backstop: never send more than this many auto-replies into one chat per rolling window — guarantees a runaway loop terminates even if the model keeps voting to reply.</p>
+    </form>
+
+    <div class="flex items-center gap-2 mt-4">
+      <button class="btn-primary btn-sm"
+              @click="withLoading($el, () =>
+                fetch('/config', {
+                  method: 'PATCH',
+                  headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
+                  },
+                  body: JSON.stringify({values: {
+                    'reply_decision.enabled': rdEnabled ? 'true' : 'false',
+                    'reply_decision.provider': rdProvider,
+                    'reply_decision.model': rdModel,
+                    'reply_decision.thinking_level': rdThinkingLevel,
+                    'reply_decision.group_only': rdGroupOnly ? 'true' : 'false',
+                    'reply_decision.max_replies_per_window': String(rdMaxReplies),
+                    'reply_decision.window_seconds': String(rdWindowSeconds)
+                  }})
+                })
+                .then(r => { rdResultOk = r.ok; return r.json(); })
+                .then(d => {
+                  rdResult = rdResultOk ? 'Reply decision settings saved' : (d.detail || 'Error');
+                  if (rdResultOk && window.showToast) { window.showToast('Reply decision settings saved'); }
+                })
+                .catch(e => { rdResultOk = false; rdResult = e.message; })
+              )">
+        Save reply decision
+      </button>
+    </div>
+    <template x-if="rdResult">
+      <div :class="rdResultOk ? 'alert-success' : 'alert-error'" class="mt-2" x-text="rdResult"></div>
+    </template>
+  </div>
+
+  <div class="card">
+    <h2 class="text-base mb-1">History Compaction</h2>
+    <p class="text-muted text-xs mb-4">Model used to summarize older conversation turns when a session's context grows large. Enable compaction and set the trigger threshold in the <button type="button" class="text-accent hover:underline" @click="setSection('history')">History</button> sub-tab.</p>
+
+    <form class="space-y-4" @submit.prevent>
+      <div>
+        <label class="label" for="llm-cp-provider">Provider</label>
+        <select class="input-sm" style="max-width:500px" x-model="compactionProvider" x-effect="$el.value = compactionProvider" id="llm-cp-provider">
+          <template x-for="item in providerOptions" :key="'cp-' + item.value">
+            <option :value="item.value" :selected="item.value === compactionProvider" x-text="item.label"></option>
+          </template>
+        </select>
+      </div>
+      <div>
+        <label class="label" for="llm-cp-model">Model</label>
+        <input type="text" class="input-sm" style="max-width:500px" x-model="compactionModel"
+               list="dl-model-compaction" id="llm-cp-model" placeholder="Type or pick a model">
+        <datalist id="dl-model-compaction">
+          <template x-for="item in modelOptions(compactionProvider)" :key="'cp-m-' + item.value">
+            <option :value="item.value"></option>
+          </template>
+        </datalist>
+        <p class="text-muted text-xs mt-1">A small, fast model is recommended (summarization is cheap).</p>
+      </div>
+{{ think('compactionThinkingLevel', 'compactionProvider', 'compactionModel', 'dl-think-cp', true) }}
+    </form>
+
+    <div class="flex items-center gap-2 mt-4">
+      <button class="btn-primary btn-sm"
+              @click="withLoading($el, () =>
+                fetch('/config', {
+                  method: 'PATCH',
+                  headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
+                  },
+                  body: JSON.stringify({values: {
+                    'compaction.provider': compactionProvider,
+                    'compaction.model': compactionModel,
+                    'compaction.thinking_level': compactionThinkingLevel
+                  }})
+                })
+                .then(r => { compactionResultOk = r.ok; return r.json(); })
+                .then(d => {
+                  compactionResult = compactionResultOk ? 'Compaction model saved' : (d.detail || 'Error');
+                  if (compactionResultOk && window.showToast) { window.showToast('Compaction model saved'); }
+                })
+                .catch(e => { compactionResultOk = false; compactionResult = e.message; })
+              )">
+        Save compaction model
+      </button>
+    </div>
+    <template x-if="compactionResult">
+      <div :class="compactionResultOk ? 'alert-success' : 'alert-error'" class="mt-2" x-text="compactionResult"></div>
+    </template>
+  </div>
+
+  <div class="card">
+    <h2 class="text-base mb-1">Vision Fallback</h2>
+    <p class="text-muted text-xs mb-4">When the active model can’t read images, route image attachments to this model for a text description / OCR, injected in place of the image. Off by default; engages only when the active model lacks native vision. Reuses the provider keys configured below.</p>
+
+    <form class="space-y-4" @submit.prevent>
+      <div class="flex items-center gap-2">
+        <label class="label mb-0" for="llm-vision-enabled">Enabled</label>
+        <input type="checkbox" x-model="visionEnabled" class="rounded border-border" id="llm-vision-enabled">
+      </div>
+
+      <div>
+        <label class="label" for="llm-vision-provider">Provider</label>
+        <select class="input-sm" style="max-width:500px" x-model="visionProvider" :disabled="!visionEnabled" x-effect="$el.value = visionProvider" id="llm-vision-provider">
+          <template x-for="item in providerOptions" :key="'vis-' + item.value">
+            <option :value="item.value" :selected="item.value === visionProvider" x-text="item.label"></option>
+          </template>
+        </select>
+      </div>
+      <div>
+        <label class="label" for="llm-vision-model">Model</label>
+        <input type="text" class="input-sm" style="max-width:500px" x-model="visionModel" :disabled="!visionEnabled"
+               list="dl-model-vision" id="llm-vision-model" placeholder="Type or pick a model">
+        <datalist id="dl-model-vision">
+          <template x-for="item in modelOptions(visionProvider)" :key="'vis-m-' + item.value">
+            <option :value="item.value"></option>
+          </template>
+        </datalist>
+        <p class="text-amber-600 text-xs mt-1" x-show="visionModel && !modelSupportsVision(visionModel, visionProvider)">
+          Heads up: “<span x-text="visionModel"></span>” isn’t a recognized vision model — pick one that can read images, or captioning will fail.
+        </p>
+        <p class="text-muted text-xs mt-1">A small, cheap vision model is recommended (captioning is a single short call).</p>
+      </div>
+    </form>
+
+    <div class="flex items-center gap-2 mt-4">
+      <button class="btn-primary btn-sm" @click="withLoading($el, () => saveVision())">Save vision fallback</button>
+    </div>
+    <template x-if="visionResult">
+      <div :class="visionResultOk ? 'alert-success' : 'alert-error'" class="mt-2" x-text="visionResult"></div>
+    </template>
+  </div>
+  </div>{# /inference #}
+
diff --git a/humux/api/templates/partials/llm_providers.html b/humux/api/templates/partials/llm_providers.html
new file mode 100644
index 00000000..f5ed9290
--- /dev/null
+++ b/humux/api/templates/partials/llm_providers.html
@@ -0,0 +1,405 @@
+{% import "partials/_macros.html" as m %}
+  <div class="space-y-6" x-show="section === 'providers'" >
+  <div class="mb-2 rounded border border-border bg-muted/10 px-3 py-2 text-muted text-xs">
+    🔒 Provider API keys are stored in the vault on save — only a <code>${vault:NAME}</code> reference is kept in config, never the raw key. Manage or reuse them from the <button type="button" class="text-accent hover:underline" @click="$dispatch('switch-tab', 'secrets')">Vaults</button> tab.
+  </div>
+  <div class="card">
+    <h2 class="text-base mb-1">Anthropic</h2>
+    <p class="text-muted text-xs mb-4">Configure the Anthropic API key and test the connection.</p>
+    <form class="space-y-3" @submit.prevent>
+      <div>
+        {% if anthropic_vaulted %}<span class="label">Anthropic API Key</span>{% else %}<label class="label" for="llm-anthropic-key">Anthropic API Key</label>{% endif %}
+        <input type="text" class="input-sm" name="anthropic-username-hint" style="max-width:500px; display:none"
+               autocomplete="username" aria-hidden="true" tabindex="-1">
+        {% if anthropic_vaulted %}
+        <div class="text-xs text-muted py-1" style="max-width:500px">🔒 Stored in the vault as <code>${vault:ANTHROPIC_API_KEY}</code> for easy reuse — manage it from the <button type="button" class="text-accent hover:underline" @click="$dispatch('switch-tab', 'secrets')">Vaults</button> tab.</div>
+        {% else %}
+        <input type="password" class="input-sm" style="max-width:500px"
+               autocomplete="new-password" id="llm-anthropic-key"
+               x-model="apiKey" placeholder="sk-ant-...">
+        <p class="text-muted text-xs mt-1">Get a key at <a href="https://console.anthropic.com/settings/keys" target="_blank">console.anthropic.com</a></p>
+        {% endif %}
+        <div class="flex items-center gap-2 mt-2">
+          <button class="btn btn-sm" type="button" :disabled="testing.anthropic || !apiKey"
+                  @click="testProvider('anthropic')">
+            <span x-show="!testing.anthropic">Test connection</span>
+            <span x-show="testing.anthropic"><span class="spinner-sm mr-1"></span>Testing...</span>
+          </button>
+          <button class="btn btn-sm" type="button" :disabled="fetchingModels.anthropic || !apiKey"
+                  @click="fetchModels('anthropic')">
+            <span x-show="!fetchingModels.anthropic">Fetch models</span>
+            <span x-show="fetchingModels.anthropic"><span class="spinner-sm mr-1"></span>Fetching...</span>
+          </button>
+          <button class="btn btn-sm" type="button" @click="copyModels('anthropic')">Copy list</button>
+        </div>
+        <template x-if="testResults.anthropic">
+          <div :class="tests.anthropic ? 'alert-success' : 'alert-error'" class="mt-2" x-text="testResults.anthropic"></div>
+        </template>
+        <template x-if="fetchModelsResult.anthropic">
+          <div class="text-muted text-xs mt-1" x-text="fetchModelsResult.anthropic"></div>
+        </template>
+      </div>
+    </form>
+    <div class="flex items-center gap-2 mt-4">
+      <button class="btn btn-sm"
+              @click="withLoading($el, () =>
+                fetch('/config', {
+                  method: 'PATCH',
+                  headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
+                  },
+                  body: JSON.stringify({values: {
+                    'agent.anthropic_api_key': apiKey
+                  }})
+                })
+                .then(r => { resultOk = r.ok; return r.json(); })
+                .then(d => {
+                  result = resultOk ? 'Anthropic settings saved' : (d.detail || 'Error');
+                  if (resultOk && window.showToast) { window.showToast('Anthropic settings saved'); }
+                  if (resultOk) { reloadLlmPartial(); }
+                })
+                .catch(e => { resultOk = false; result = e.message; })
+              )">
+        Save Anthropic
+      </button>
+    </div>
+  </div>
+
+  <div class="card">
+    <h2 class="text-base mb-1">OpenAI</h2>
+    <p class="text-muted text-xs mb-4">Configure the OpenAI key and optional base URL, then test the connection.</p>
+    <form class="space-y-3" @submit.prevent>
+      <div>
+        {% if openai_vaulted %}<span class="label">OpenAI API Key</span>{% else %}<label class="label" for="llm-openai-key">OpenAI API Key</label>{% endif %}
+        {% if openai_vaulted %}
+        <div class="text-xs text-muted py-1" style="max-width:500px">🔒 Stored in the vault as <code>${vault:OPENAI_API_KEY}</code> for easy reuse — manage it from the <button type="button" class="text-accent hover:underline" @click="$dispatch('switch-tab', 'secrets')">Vaults</button> tab.</div>
+        {% else %}
+        <input type="password" class="input-sm" style="max-width:500px"
+               autocomplete="new-password" id="llm-openai-key"
+               x-model="openaiKey" placeholder="sk-...">
+        <p class="text-muted text-xs mt-1">Create one in <a href="https://platform.openai.com/account/api-keys" target="_blank">platform.openai.com</a></p>
+        {% endif %}
+      </div>
+      <div>
+        <label class="label" for="llm-openai-base">OpenAI Base URL (optional)</label>
+        <input type="text" class="input-sm" style="max-width:500px" id="llm-openai-base"
+               x-model="openaiBaseUrl" placeholder="https://...">
+        <div class="flex items-center gap-2 mt-2">
+          <button class="btn btn-sm" type="button" :disabled="testing.openai || !openaiKey"
+                  @click="testProvider('openai')">
+            <span x-show="!testing.openai">Test connection</span>
+            <span x-show="testing.openai"><span class="spinner-sm mr-1"></span>Testing...</span>
+          </button>
+          <button class="btn btn-sm" type="button" :disabled="fetchingModels.openai || !openaiKey"
+                  @click="fetchModels('openai')">
+            <span x-show="!fetchingModels.openai">Fetch models</span>
+            <span x-show="fetchingModels.openai"><span class="spinner-sm mr-1"></span>Fetching...</span>
+          </button>
+          <button class="btn btn-sm" type="button" @click="copyModels('openai')">Copy list</button>
+        </div>
+        <template x-if="testResults.openai">
+          <div :class="tests.openai ? 'alert-success' : 'alert-error'" class="mt-2" x-text="testResults.openai"></div>
+        </template>
+        <template x-if="fetchModelsResult.openai">
+          <div class="text-muted text-xs mt-1" x-text="fetchModelsResult.openai"></div>
+        </template>
+      </div>
+    </form>
+    <div class="flex items-center gap-2 mt-4">
+      <button class="btn btn-sm"
+              @click="withLoading($el, () =>
+                fetch('/config', {
+                  method: 'PATCH',
+                  headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
+                  },
+                  body: JSON.stringify({values: {
+                    'agent.openai_api_key': openaiKey,
+                    'agent.openai_base_url': openaiBaseUrl
+                  }})
+                })
+                .then(r => { resultOk = r.ok; return r.json(); })
+                .then(d => {
+                  result = resultOk ? 'OpenAI settings saved' : (d.detail || 'Error');
+                  if (resultOk && window.showToast) { window.showToast('OpenAI settings saved'); }
+                  if (resultOk) { reloadLlmPartial(); }
+                })
+                .catch(e => { resultOk = false; result = e.message; })
+              )">
+        Save OpenAI
+      </button>
+    </div>
+  </div>
+
+  <div class="card">
+    <h2 class="text-base mb-1">Google Gemini</h2>
+    <p class="text-muted text-xs mb-4">Configure the Google API key and optional base URL, then test the connection.</p>
+    <form class="space-y-3" @submit.prevent>
+      <div>
+        {% if google_vaulted %}<span class="label">Google API Key</span>{% else %}<label class="label" for="llm-google-key">Google API Key</label>{% endif %}
+        {% if google_vaulted %}
+        <div class="text-xs text-muted py-1" style="max-width:500px">🔒 Stored in the vault as <code>${vault:GOOGLE_API_KEY}</code> for easy reuse — manage it from the <button type="button" class="text-accent hover:underline" @click="$dispatch('switch-tab', 'secrets')">Vaults</button> tab.</div>
+        {% else %}
+        <input type="password" class="input-sm" style="max-width:500px"
+               autocomplete="new-password" id="llm-google-key"
+               x-model="googleKey" placeholder="AIza...">
+        <p class="text-muted text-xs mt-1">Create a key in <a href="https://aistudio.google.com/app/apikey" target="_blank">Google AI Studio</a></p>
+        {% endif %}
+      </div>
+      <div>
+        <label class="label" for="llm-google-base">Google Base URL (optional)</label>
+        <input type="text" class="input-sm" style="max-width:500px" id="llm-google-base"
+               x-model="googleBaseUrl" placeholder="https://generativelanguage.googleapis.com/v1beta/openai">
+        <div class="flex items-center gap-2 mt-2">
+          <button class="btn btn-sm" type="button" :disabled="testing.google || !googleKey"
+                  @click="testProvider('google')">
+            <span x-show="!testing.google">Test connection</span>
+            <span x-show="testing.google"><span class="spinner-sm mr-1"></span>Testing...</span>
+          </button>
+          <button class="btn btn-sm" type="button" :disabled="fetchingModels.google || !googleKey"
+                  @click="fetchModels('google')">
+            <span x-show="!fetchingModels.google">Fetch models</span>
+            <span x-show="fetchingModels.google"><span class="spinner-sm mr-1"></span>Fetching...</span>
+          </button>
+          <button class="btn btn-sm" type="button" @click="copyModels('google')">Copy list</button>
+        </div>
+        <template x-if="testResults.google">
+          <div :class="tests.google ? 'alert-success' : 'alert-error'" class="mt-2" x-text="testResults.google"></div>
+        </template>
+        <template x-if="fetchModelsResult.google">
+          <div class="text-muted text-xs mt-1" x-text="fetchModelsResult.google"></div>
+        </template>
+      </div>
+    </form>
+    <div class="flex items-center gap-2 mt-4">
+      <button class="btn btn-sm"
+              @click="withLoading($el, () =>
+                fetch('/config', {
+                  method: 'PATCH',
+                  headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
+                  },
+                  body: JSON.stringify({values: {
+                    'agent.google_api_key': googleKey,
+                    'agent.google_base_url': googleBaseUrl
+                  }})
+                })
+                .then(r => { resultOk = r.ok; return r.json(); })
+                .then(d => {
+                  result = resultOk ? 'Google settings saved' : (d.detail || 'Error');
+                  if (resultOk && window.showToast) { window.showToast('Google settings saved'); }
+                  if (resultOk) { reloadLlmPartial(); }
+                })
+                .catch(e => { resultOk = false; result = e.message; })
+              )">
+        Save Google
+      </button>
+    </div>
+  </div>
+
+  <div class="card">
+    <h2 class="text-base mb-1">Grok (xAI)</h2>
+    <p class="text-muted text-xs mb-4">Configure the Grok key and optional base URL, then test the connection.</p>
+    <form class="space-y-3" @submit.prevent>
+      <div>
+        {% if grok_vaulted %}<span class="label">Grok API Key</span>{% else %}<label class="label" for="llm-grok-key">Grok API Key</label>{% endif %}
+        {% if grok_vaulted %}
+        <div class="text-xs text-muted py-1" style="max-width:500px">🔒 Stored in the vault as <code>${vault:GROK_API_KEY}</code> for easy reuse — manage it from the <button type="button" class="text-accent hover:underline" @click="$dispatch('switch-tab', 'secrets')">Vaults</button> tab.</div>
+        {% else %}
+        <input type="password" class="input-sm" style="max-width:500px"
+               autocomplete="new-password" id="llm-grok-key"
+               x-model="grokKey" placeholder="xai-...">
+        <p class="text-muted text-xs mt-1">Create a key in <a href="https://console.x.ai/" target="_blank">console.x.ai</a></p>
+        {% endif %}
+      </div>
+      <div>
+        <label class="label" for="llm-grok-base">Grok Base URL (optional)</label>
+        <input type="text" class="input-sm" style="max-width:500px" id="llm-grok-base"
+               x-model="grokBaseUrl" placeholder="https://api.x.ai/v1">
+        <div class="flex items-center gap-2 mt-2">
+          <button class="btn btn-sm" type="button" :disabled="testing.grok || !grokKey"
+                  @click="testProvider('grok')">
+            <span x-show="!testing.grok">Test connection</span>
+            <span x-show="testing.grok"><span class="spinner-sm mr-1"></span>Testing...</span>
+          </button>
+          <button class="btn btn-sm" type="button" :disabled="fetchingModels.grok || !grokKey"
+                  @click="fetchModels('grok')">
+            <span x-show="!fetchingModels.grok">Fetch models</span>
+            <span x-show="fetchingModels.grok"><span class="spinner-sm mr-1"></span>Fetching...</span>
+          </button>
+          <button class="btn btn-sm" type="button" @click="copyModels('grok')">Copy list</button>
+        </div>
+        <template x-if="testResults.grok">
+          <div :class="tests.grok ? 'alert-success' : 'alert-error'" class="mt-2" x-text="testResults.grok"></div>
+        </template>
+        <template x-if="fetchModelsResult.grok">
+          <div class="text-muted text-xs mt-1" x-text="fetchModelsResult.grok"></div>
+        </template>
+      </div>
+    </form>
+    <div class="flex items-center gap-2 mt-4">
+      <button class="btn btn-sm"
+              @click="withLoading($el, () =>
+                fetch('/config', {
+                  method: 'PATCH',
+                  headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
+                  },
+                  body: JSON.stringify({values: {
+                    'agent.grok_api_key': grokKey,
+                    'agent.grok_base_url': grokBaseUrl
+                  }})
+                })
+                .then(r => { resultOk = r.ok; return r.json(); })
+                .then(d => {
+                  result = resultOk ? 'Grok settings saved' : (d.detail || 'Error');
+                  if (resultOk && window.showToast) { window.showToast('Grok settings saved'); }
+                  if (resultOk) { reloadLlmPartial(); }
+                })
+                .catch(e => { resultOk = false; result = e.message; })
+              )">
+        Save Grok
+      </button>
+    </div>
+  </div>
+
+  <div class="card">
+    <h2 class="text-base mb-1">DeepSeek</h2>
+    <p class="text-muted text-xs mb-4">Configure the DeepSeek key and optional base URL, then test the connection.</p>
+    <form class="space-y-3" @submit.prevent>
+      <div>
+        {% if deepseek_vaulted %}<span class="label">DeepSeek API Key</span>{% else %}<label class="label" for="llm-deepseek-key">DeepSeek API Key</label>{% endif %}
+        {% if deepseek_vaulted %}
+        <div class="text-xs text-muted py-1" style="max-width:500px">🔒 Stored in the vault as <code>${vault:DEEPSEEK_API_KEY}</code> for easy reuse — manage it from the <button type="button" class="text-accent hover:underline" @click="$dispatch('switch-tab', 'secrets')">Vaults</button> tab.</div>
+        {% else %}
+        <input type="password" class="input-sm" style="max-width:500px"
+               autocomplete="new-password" id="llm-deepseek-key"
+               x-model="deepseekKey" placeholder="sk-...">
+        <p class="text-muted text-xs mt-1">Create a key in <a href="https://platform.deepseek.com/api_keys" target="_blank">platform.deepseek.com</a></p>
+        {% endif %}
+      </div>
+      <div>
+        <label class="label" for="llm-deepseek-base">DeepSeek Base URL (optional)</label>
+        <input type="text" class="input-sm" style="max-width:500px" id="llm-deepseek-base"
+               x-model="deepseekBaseUrl" placeholder="https://api.deepseek.com">
+        <div class="flex items-center gap-2 mt-2">
+          <button class="btn btn-sm" type="button" :disabled="testing.deepseek || !deepseekKey"
+                  @click="testProvider('deepseek')">
+            <span x-show="!testing.deepseek">Test connection</span>
+            <span x-show="testing.deepseek"><span class="spinner-sm mr-1"></span>Testing...</span>
+          </button>
+          <button class="btn btn-sm" type="button" :disabled="fetchingModels.deepseek || !deepseekKey"
+                  @click="fetchModels('deepseek')">
+            <span x-show="!fetchingModels.deepseek">Fetch models</span>
+            <span x-show="fetchingModels.deepseek"><span class="spinner-sm mr-1"></span>Fetching...</span>
+          </button>
+          <button class="btn btn-sm" type="button" @click="copyModels('deepseek')">Copy list</button>
+        </div>
+        <template x-if="testResults.deepseek">
+          <div :class="tests.deepseek ? 'alert-success' : 'alert-error'" class="mt-2" x-text="testResults.deepseek"></div>
+        </template>
+        <template x-if="fetchModelsResult.deepseek">
+          <div class="text-muted text-xs mt-1" x-text="fetchModelsResult.deepseek"></div>
+        </template>
+      </div>
+    </form>
+    <div class="flex items-center gap-2 mt-4">
+      <button class="btn btn-sm"
+              @click="withLoading($el, () =>
+                fetch('/config', {
+                  method: 'PATCH',
+                  headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
+                  },
+                  body: JSON.stringify({values: {
+                    'agent.deepseek_api_key': deepseekKey,
+                    'agent.deepseek_base_url': deepseekBaseUrl
+                  }})
+                })
+                .then(r => { resultOk = r.ok; return r.json(); })
+                .then(d => {
+                  result = resultOk ? 'DeepSeek settings saved' : (d.detail || 'Error');
+                  if (resultOk && window.showToast) { window.showToast('DeepSeek settings saved'); }
+                  if (resultOk) { reloadLlmPartial(); }
+                })
+                .catch(e => { resultOk = false; result = e.message; })
+              )">
+        Save DeepSeek
+      </button>
+    </div>
+  </div>
+
+  <div class="card">
+    <h2 class="text-base mb-1">OpenRouter</h2>
+    <p class="text-muted text-xs mb-2">A provider-agnostic gateway: one API key reaches models from many labs (Anthropic, OpenAI, Google, Meta, DeepSeek, …). Model ids are namespaced <code>provider/model</code> (e.g. <code>anthropic/claude-sonnet-4.5</code>) — use <strong>Fetch models</strong> for the live catalog.</p>
+    <p class="text-muted text-xs mb-4">OpenRouter can auto-route around provider outages and fall back between hosts, and publishes transparent per-token pricing per model. Docs: <a href="https://openrouter.ai/docs" target="_blank" rel="noopener">openrouter.ai/docs</a> · Models &amp; pricing: <a href="https://openrouter.ai/models" target="_blank" rel="noopener">openrouter.ai/models</a> · Routing &amp; fallbacks: <a href="https://openrouter.ai/docs/features/provider-routing" target="_blank" rel="noopener">provider routing</a>.</p>
+    <form class="space-y-3" @submit.prevent>
+      <div>
+        {% if openrouter_vaulted %}<span class="label">OpenRouter API Key</span>{% else %}<label class="label" for="llm-openrouter-key">OpenRouter API Key</label>{% endif %}
+        {% if openrouter_vaulted %}
+        <div class="text-xs text-muted py-1" style="max-width:500px">🔒 Stored in the vault as <code>${vault:OPENROUTER_API_KEY}</code> for easy reuse — manage it from the <button type="button" class="text-accent hover:underline" @click="$dispatch('switch-tab', 'secrets')">Vaults</button> tab.</div>
+        {% else %}
+        <input type="password" class="input-sm" style="max-width:500px"
+               autocomplete="new-password" id="llm-openrouter-key"
+               x-model="openrouterKey" placeholder="sk-or-...">
+        <p class="text-muted text-xs mt-1">Create a key in <a href="https://openrouter.ai/settings/keys" target="_blank" rel="noopener">openrouter.ai/settings/keys</a></p>
+        {% endif %}
+      </div>
+      <div>
+        <label class="label" for="llm-openrouter-base">OpenRouter Base URL (optional)</label>
+        <input type="text" class="input-sm" style="max-width:500px" id="llm-openrouter-base"
+               x-model="openrouterBaseUrl" placeholder="https://openrouter.ai/api/v1">
+        <div class="flex items-center gap-2 mt-2">
+          <button class="btn btn-sm" type="button" :disabled="testing.openrouter || !openrouterKey"
+                  @click="testProvider('openrouter')">
+            <span x-show="!testing.openrouter">Test connection</span>
+            <span x-show="testing.openrouter"><span class="spinner-sm mr-1"></span>Testing...</span>
+          </button>
+          <button class="btn btn-sm" type="button" :disabled="fetchingModels.openrouter || !openrouterKey"
+                  @click="fetchModels('openrouter')">
+            <span x-show="!fetchingModels.openrouter">Fetch models</span>
+            <span x-show="fetchingModels.openrouter"><span class="spinner-sm mr-1"></span>Fetching...</span>
+          </button>
+          <button class="btn btn-sm" type="button" @click="copyModels('openrouter')">Copy list</button>
+        </div>
+        <template x-if="testResults.openrouter">
+          <div :class="tests.openrouter ? 'alert-success' : 'alert-error'" class="mt-2" x-text="testResults.openrouter"></div>
+        </template>
+        <template x-if="fetchModelsResult.openrouter">
+          <div class="text-muted text-xs mt-1" x-text="fetchModelsResult.openrouter"></div>
+        </template>
+      </div>
+    </form>
+    <div class="flex items-center gap-2 mt-4">
+      <button class="btn btn-sm"
+              @click="withLoading($el, () =>
+                fetch('/config', {
+                  method: 'PATCH',
+                  headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
+                  },
+                  body: JSON.stringify({values: {
+                    'agent.openrouter_api_key': openrouterKey,
+                    'agent.openrouter_base_url': openrouterBaseUrl
+                  }})
+                })
+                .then(r => { resultOk = r.ok; return r.json(); })
+                .then(d => {
+                  result = resultOk ? 'OpenRouter settings saved' : (d.detail || 'Error');
+                  if (resultOk && window.showToast) { window.showToast('OpenRouter settings saved'); }
+                  if (resultOk) { reloadLlmPartial(); }
+                })
+                .catch(e => { resultOk = false; result = e.message; })
+              )">
+        Save OpenRouter
+      </button>
+    </div>
+  </div>
+  </div>{# /providers #}
+
diff --git a/humux/api/templates/partials/memory.html b/humux/api/templates/partials/memory.html
index 398616a3..cd982159 100644
--- a/humux/api/templates/partials/memory.html
+++ b/humux/api/templates/partials/memory.html
@@ -1,447 +1,16 @@
-{# Memory tab partial with sub-tabs: Settings | Long-term | Short-term #}
-{% set categories = ['preference','relationship','fact','routine','work','health','travel'] %}
-{% set page_sizes = [25, 50, 100] %}
-{% set v = memory_view|default('settings') %}
-{% set off = memory_offset|default(0)|int %}
-{% set lim = memory_limit|default(25)|int %}
-{% set q = memory_q|default('') %}
-
-{%- macro nav(view) %}
-<div x-data="memorySubtab()" x-init="init()" class="flex border-b border-border mb-4 overflow-x-auto">
-  <button type="button" class="tab-link" :class="{'tab-link-active': sub === 'settings'}"
-          @click="select('settings')">Settings</button>
-  <button type="button" class="tab-link" :class="{'tab-link-active': sub === 'long-term'}"
-          @click="select('long-term')">Long-term</button>
-  <button type="button" class="tab-link" :class="{'tab-link-active': sub === 'short-term'}"
-          @click="select('short-term')">Short-term</button>
-</div>
-{%- endmacro %}
-
-{%- macro pag(view, total) %}
-{% set total = total|default(0)|int %}
-{% set cp = (off // lim) + 1 if total > 0 else 1 %}
-{% set tp = ((total + lim - 1) // lim) if total > 0 else 1 %}
-{% set ss = off + 1 if total > 0 else 0 %}
-{% set se = [(off + lim), total]|min if total > 0 else 0 %}
-{% set qs = ('&q=' + q|urlencode) if q else '' %}
-<div class="flex items-center justify-between gap-2 mb-3 flex-wrap">
-  <div class="flex items-center gap-2">
-    <span class="text-xs text-muted">
-      {%- if total > 0 %}Showing {{ ss }}&ndash;{{ se }} of {{ total }}{% else %}No entries{% endif -%}
-    </span>
-    <label class="label mb-0 text-xs" for="ps-{{ view }}">Per page</label>
-    <select class="input-sm" style="max-width:80px" id="ps-{{ view }}"
-            onchange="htmx.ajax('GET','/partials/memory?view={{ view }}&offset=0&limit='+this.value+'{{ qs }}',{target:'#tab-content',swap:'innerHTML'})">
-      {% for ps in page_sizes %}<option value="{{ ps }}"{% if lim == ps %} selected{% endif %}>{{ ps }}</option>{% endfor %}
-    </select>
-  </div>
-  <div class="flex items-center gap-1">
-    <button class="btn btn-sm"{% if cp <= 1 %} disabled{% endif %}
-            hx-get="/partials/memory?view={{ view }}&offset=0&limit={{ lim }}{{ qs }}" hx-target="#tab-content" hx-swap="innerHTML">&laquo;</button>
-    <button class="btn btn-sm"{% if cp <= 1 %} disabled{% endif %}
-            hx-get="/partials/memory?view={{ view }}&offset={{ [off - lim, 0]|max }}&limit={{ lim }}{{ qs }}" hx-target="#tab-content" hx-swap="innerHTML">&lsaquo;</button>
-    <span class="text-xs text-muted px-1">Page {{ cp }} / {{ tp }}</span>
-    <button class="btn btn-sm"{% if cp >= tp %} disabled{% endif %}
-            hx-get="/partials/memory?view={{ view }}&offset={{ off + lim }}&limit={{ lim }}{{ qs }}" hx-target="#tab-content" hx-swap="innerHTML">&rsaquo;</button>
-    <button class="btn btn-sm"{% if cp >= tp %} disabled{% endif %}
-            hx-get="/partials/memory?view={{ view }}&offset={{ (tp - 1) * lim }}&limit={{ lim }}{{ qs }}" hx-target="#tab-content" hx-swap="innerHTML">&raquo;</button>
-  </div>
-</div>
-{%- endmacro %}
-
-{%- macro search(view) %}
-<div class="flex items-center gap-2 mb-3">
-  <input type="text" class="input-sm flex-1" style="max-width:300px" placeholder="Search memories..."
-         value="{{ q }}" id="search-{{ view }}"
-         onkeydown="if(event.key==='Enter'){const v=this.value;htmx.ajax('GET','/partials/memory?view={{ view }}&offset=0&limit={{ lim }}'+(v?'&q='+encodeURIComponent(v):''),{target:'#tab-content',swap:'innerHTML'});}">
-  <button class="btn btn-sm"
-          hx-get="/partials/memory?view={{ view }}&offset=0&limit={{ lim }}" hx-target="#tab-content" hx-swap="innerHTML"
-          title="Refresh">&#x21bb;</button>
-</div>
-{%- endmacro %}
-
-{# Nav rendered once — the Alpine component inside it reads ?memsub= from
-   URL on init and syncs it when a sub-tab is clicked. The partial re-renders
-   into #tab-content on each sub-tab switch, so the component is fresh. #}
-{{ nav(v) }}
-
-{% if v == 'settings' %}
-<div x-data="{
-  longTermLimit: {{ memory_long_term_limit|default('50', true)|tojson|forceescape }},
-  cfgResult: '', cfgOk: false,
-  // Embeddings (Tier 2)
-  embEnabled: {{ emb_enabled|default('true', true)|tojson|forceescape }} === 'true',
-  embProvider: {{ emb_provider|default('sidecar', true)|tojson|forceescape }},
-  embModel: {{ emb_model|default('intfloat/multilingual-e5-small', true)|tojson|forceescape }},
-  embBaseUrl: {{ emb_base_url|default('', true)|tojson|forceescape }},
-  embTopK: {{ emb_top_k|default('12', true)|tojson|forceescape }},
-  embRecallTopK: {{ emb_recall_top_k|default('10', true)|tojson|forceescape }},
-  embResult: '', embOk: false,
-  embStatus: null, embBusy: false, embTestResult: '',
-  // Lifecycle (Tier 3/4)
-  defaultImportance: {{ default_importance|default('5.0', true)|tojson|forceescape }},
-  archiveAfterDays: {{ archive_after_days|default('90', true)|tojson|forceescape }},
-  archiveMaxImportance: {{ archive_max_importance|default('4.0', true)|tojson|forceescape }},
-  archiveMinIdleDays: {{ archive_min_idle_days|default('45', true)|tojson|forceescape }},
-  hygieneEnabled: {{ hygiene_enabled|default('true', true)|tojson|forceescape }} === 'true',
-  hygieneThreshold: {{ hygiene_threshold|default('0.45', true)|tojson|forceescape }},
-  lifeResult: '', lifeOk: false,
-  get isLocal() { return this.embProvider === 'local' || this.embProvider === 'fastembed'; },
-  _hdrs() {
-    return {
-      'Content-Type': 'application/json',
-      'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
-    };
-  },
-  saveCfg(vals, okMsg, okField, resField) {
-    return fetch('/config', { method: 'PATCH', headers: this._hdrs(), body: JSON.stringify({values: vals}) })
-      .then(r => { this[okField] = r.ok; return r.json(); })
-      .then(d => {
-        this[resField] = this[okField] ? okMsg : (d.detail || 'Error');
-        if (this[okField] && window.showToast) { window.showToast(okMsg); }
-      })
-      .catch(e => { this[okField] = false; this[resField] = e.message; });
-  },
-  loadEmbStatus() {
-    fetch('/memory/embedding/status', { headers: this._hdrs() })
-      .then(r => r.json()).then(d => { this.embStatus = d; }).catch(() => {});
-  },
-  downloadModel() {
-    this.embBusy = true; this.embTestResult = 'Downloading model\u2026 (first time may take a minute)';
-    fetch('/memory/embedding/prefetch', { method: 'POST', headers: this._hdrs() })
-      .then(r => r.json().then(d => ({ok: r.ok, d})))
-      .then(({ok, d}) => {
-        this.embTestResult = ok ? ('Model ready (dim ' + d.dimensions + ')') : ('Error: ' + (d.detail || 'failed'));
-        this.loadEmbStatus();
-      })
-      .catch(e => { this.embTestResult = 'Error: ' + e.message; })
-      .finally(() => { this.embBusy = false; });
-  },
-  testEmb() {
-    this.embBusy = true; this.embTestResult = 'Testing\u2026';
-    fetch('/memory/embedding/test', { method: 'POST', headers: this._hdrs() })
-      .then(r => r.json().then(d => ({ok: r.ok, d})))
-      .then(({ok, d}) => {
-        this.embTestResult = ok
-          ? ('OK \u00b7 dim ' + d.dimensions + ' \u00b7 related=' + d.similar_pair + ' vs unrelated=' + d.unrelated_pair)
-          : ('Error: ' + (d.detail || 'failed'));
-      })
-      .catch(e => { this.embTestResult = 'Error: ' + e.message; })
-      .finally(() => { this.embBusy = false; });
-  }
-}" x-init="loadEmbStatus()">
-
-  {# Memory config section #}
-  <div class="card mb-6">
-    <h2 class="text-base mb-1">Memory Settings</h2>
-    <p class="text-muted text-xs mb-3">Configure memory storage behaviour.</p>
-    <div class="space-y-3">
-      <div>
-        <label class="label" for="mem-long-term-limit">Long-term limit</label>
-        <input type="number" class="input-sm" style="max-width:120px"
-               x-model="longTermLimit" min="1" max="500" id="mem-long-term-limit">
-        <p class="text-muted text-xs mt-1">Maximum number of long-term memories before consolidation triggers cleanup.</p>
-      </div>
-    </div>
-    <div class="flex justify-end mt-3">
-      <button class="btn-primary btn-sm"
-              @click="withLoading($el, () => saveCfg({'memory.long_term_limit': String(longTermLimit)}, 'Memory settings saved', 'cfgOk', 'cfgResult'))">
-        Save settings
-      </button>
-    </div>
-    <template x-if="cfgResult">
-      <div :class="cfgOk ? 'alert-success' : 'alert-error'" class="mt-2" x-text="cfgResult"></div>
-    </template>
-    <p class="text-muted text-xs mt-4">
-      The models used for memory extraction and consolidation can be configured in the
-      <a href="#" class="text-link" @click.prevent="$dispatch('switch-tab', 'llm')">LLM tab</a>.
-    </p>
-  </div>
-
-  {# Semantic memory (embeddings) #}
-  <div class="card mb-6">
-    <h2 class="text-base mb-1">Semantic memory (embeddings)</h2>
-    <p class="text-muted text-xs mb-3">
-      Match memories by <em>meaning</em>, not just words
-      &mdash; so &ldquo;allergic to shellfish&rdquo; surfaces when you ask about eating prawns.
-    </p>
-    <details class="mb-4 rounded border border-border p-2">
-      <summary class="text-xs cursor-pointer">How it works (the science)</summary>
-      <div class="text-muted text-xs mt-2 space-y-2">
-        <p>An <strong>embedding model</strong> turns each memory and your current message into a vector &mdash; a list of numbers positioning the text in a &ldquo;meaning space&rdquo;. Texts with similar meaning land close together, even with no shared words.</p>
-        <p>Closeness is measured by <strong>cosine similarity</strong> (1.0 = same direction/meaning, 0 = unrelated). On every message we embed it, compare against stored memory vectors, and inject only the most relevant ones &mdash; ranked by <em>relevance + importance + recency</em> (a Generative-Agents-style score) instead of dumping everything.</p>
-        <p>The same similarity drives dedup (does this new fact match an existing one?) and the hygiene pass (cluster &amp; merge near-duplicates).</p>
-        <p><strong>Local</strong> runs the model on this machine (private, free, no key; the model file is bundled in the Docker image). <strong>API</strong> providers call a remote endpoint (needs a key; a few cents/year at most, but your memory text is sent to them). When disabled, memory falls back to fast word-overlap matching &mdash; still works, just less &ldquo;fuzzy&rdquo;.</p>
-      </div>
-    </details>
-    <div class="space-y-3">
-      <div class="flex items-center gap-2">
-        <label class="label mb-0" for="mem-emb-enabled">Enabled</label>
-        <input type="checkbox" x-model="embEnabled" class="rounded border-border" id="mem-emb-enabled">
-        <span class="text-muted text-xs">Off &rarr; lexical (word-overlap) retrieval, no model needed.</span>
-      </div>
-      <div>
-        <label class="label" for="mem-emb-backend">Backend</label>
-        <select class="input-sm" style="max-width:360px" x-model="embProvider" :disabled="!embEnabled" id="mem-emb-backend">
-          <option value="sidecar">Sidecar (infinity on localhost:7997, no key)</option>
-          <option value="local">Local (on-device, private, no key)</option>
-          <option value="openai">OpenAI API</option>
-          <option value="google">Google API</option>
-        </select>
-        <p class="text-muted text-xs mt-1" x-show="!isLocal">
-          API key falls back to the matching provider key set in the
-          <a href="#" class="text-link" @click.prevent="$dispatch('switch-tab', 'llm')">LLM tab</a>.
-          (Note: DeepSeek has no embeddings endpoint.)
-        </p>
-      </div>
-      <div>
-        <label class="label" for="mem-emb-model">Model</label>
-        <input type="text" class="input-sm" style="max-width:420px" x-model="embModel" :disabled="!embEnabled"
-               placeholder="intfloat/multilingual-e5-small" id="mem-emb-model">
-        <p class="text-muted text-xs mt-1" x-show="isLocal">Multilingual CPU model (384-dim, ~470MB).</p>
-        <p class="text-muted text-xs mt-1" x-show="!isLocal">e.g. <code>text-embedding-3-small</code> (OpenAI) or <code>text-embedding-004</code> (Google).</p>
-      </div>
-      <div x-show="!isLocal">
-        <label class="label" for="mem-emb-base-url">Base URL (optional)</label>
-        <input type="text" class="input-sm" style="max-width:420px" x-model="embBaseUrl" :disabled="!embEnabled"
-               placeholder="https://&hellip; (OpenAI-compatible /embeddings)" id="mem-emb-base-url">
-      </div>
-      <div>
-        <label class="label" for="mem-emb-top-k">Injected memories per turn (top-k)</label>
-        <input type="number" class="input-sm" style="max-width:120px" x-model="embTopK" :disabled="!embEnabled" min="1" max="100" id="mem-emb-top-k">
-        <p class="text-muted text-xs mt-1">How many of the most relevant long-term memories to put in the prompt each message.</p>
-      </div>
-      <div>
-        <label class="label" for="mem-emb-recall-top-k">Recall results (recall_memory tool)</label>
-        <input type="number" class="input-sm" style="max-width:120px" x-model="embRecallTopK" :disabled="!embEnabled" min="1" max="25" id="mem-emb-recall-top-k">
-        <p class="text-muted text-xs mt-1">Default number of memories the recall_memory tool returns when the agent searches its full long-term store on demand (the agent may request fewer/more per call, capped at 25).</p>
-      </div>
-      <div class="text-xs" x-show="isLocal && embStatus">
-        Model on disk:
-        <span x-show="embStatus && embStatus.model_ready" class="text-success">yes &#x2713;</span>
-        <span x-show="embStatus && embStatus.model_ready === false" class="text-error">not downloaded yet</span>
-      </div>
-    </div>
-    <div class="flex items-center gap-2 mt-4 flex-wrap">
-      <button class="btn-primary btn-sm"
-              @click="withLoading($el, () => saveCfg({
-                'memory.embedding.enabled': embEnabled ? 'true' : 'false',
-                'memory.embedding.provider': embProvider,
-                'memory.embedding.model': embModel,
-                'memory.embedding.base_url': embBaseUrl,
-                'memory.embedding.injection_top_k': String(embTopK),
-                'memory.embedding.recall_top_k': String(embRecallTopK)
-              }, 'Embedding settings saved', 'embOk', 'embResult').then(loadEmbStatus))">
-        Save embedding settings
-      </button>
-      <button class="btn btn-sm" type="button" x-show="isLocal" :disabled="embBusy" @click="downloadModel()">
-        <span x-show="!embBusy">Download model</span>
-        <span x-show="embBusy">Working&hellip;</span>
-      </button>
-      <button class="btn btn-sm" type="button" :disabled="embBusy || !embEnabled" @click="testEmb()">Test</button>
-    </div>
-    <template x-if="embResult">
-      <div :class="embOk ? 'alert-success' : 'alert-error'" class="mt-2" x-text="embResult"></div>
-    </template>
-    <template x-if="embTestResult">
-      <div class="text-muted text-xs mt-2" x-text="embTestResult"></div>
-    </template>
-    <p class="text-muted text-xs mt-3">Changes apply live to the running agent (the local model loads on first use).</p>
+{# Memory tab wrapper: Settings | Long-term | Short-term sub-tabs.
+   Each sub-tab lazy-loads its own partial via htmx. The active sub-tab
+   is mirrored in the URL as ?memsub= for copy-pasteable links. #}
+{% import 'partials/_macros.html' as m %}
+<div x-data="memorySubtab()" x-init="init()">
+  <div class="flex border-b border-border mb-4 overflow-x-auto">
+    <button type="button" class="tab-link" :class="sub === 'settings' && 'tab-link-active'" @click="select('settings')">Settings</button>
+    <button type="button" class="tab-link" :class="sub === 'long-term' && 'tab-link-active'" @click="select('long-term')">Long-term</button>
+    <button type="button" class="tab-link" :class="sub === 'short-term' && 'tab-link-active'" @click="select('short-term')">Short-term</button>
   </div>
-
-  {# Memory lifecycle (forgetting + hygiene) #}
-  <div class="card mb-6">
-    <h2 class="text-base mb-1">Memory lifecycle (forgetting &amp; hygiene)</h2>
-    <p class="text-muted text-xs mb-3">Keep long-term memory from growing forever: reinforce what matters, forget cold trivia, merge duplicates.</p>
-    <details class="mb-4 rounded border border-border p-2">
-      <summary class="text-xs cursor-pointer">How it works (the science)</summary>
-      <div class="text-muted text-xs mt-2 space-y-2">
-        <p>Each memory has an <strong>importance</strong> (1&ndash;10). Recall <strong>reinforces</strong> it (access count + recency), and re-stating a fact bumps its importance &mdash; mirroring how human memory strengthens with use.</p>
-        <p><strong>Forgetting:</strong> during consolidation, memories that are old, low-importance, and not accessed for a while are <em>archived</em> (soft-deleted, recoverable) rather than injected forever. This is decay, like the &ldquo;use it or lose it&rdquo; curve.</p>
-        <p><strong>Hygiene:</strong> the same run clusters near-duplicate memories (by similarity) and asks the model to merge them and drop contradictions, keeping the most recent &mdash; so the store stays compact and consistent.</p>
-      </div>
-    </details>
-    <div class="space-y-3">
-      <div>
-        <label class="label" for="mem-default-importance">Default importance (1&ndash;10)</label>
-        <input type="number" step="0.5" class="input-sm" style="max-width:120px" x-model="defaultImportance" min="1" max="10" id="mem-default-importance">
-        <p class="text-muted text-xs mt-1">Starting importance for a new memory.</p>
-      </div>
-      <div>
-        <label class="label" for="mem-archive-days">Archive after (days old)</label>
-        <input type="number" class="input-sm" style="max-width:120px" x-model="archiveAfterDays" min="1" id="mem-archive-days">
-        <p class="text-muted text-xs mt-1">A memory must be at least this old before it can be archived.</p>
-      </div>
-      <div>
-        <label class="label" for="mem-archive-max-imp">Archive only if importance &le;</label>
-        <input type="number" step="0.5" class="input-sm" style="max-width:120px" x-model="archiveMaxImportance" min="1" max="10" id="mem-archive-max-imp">
-        <p class="text-muted text-xs mt-1">Important memories are never auto-archived.</p>
-      </div>
-      <div>
-        <label class="label" for="mem-archive-idle-days">Archive only if idle (days)</label>
-        <input type="number" class="input-sm" style="max-width:120px" x-model="archiveMinIdleDays" min="1" id="mem-archive-idle-days">
-        <p class="text-muted text-xs mt-1">Require this long since last access/creation before archiving.</p>
-      </div>
-      <hr class="border-border">
-      <div class="flex items-center gap-2">
-        <label class="label mb-0" for="mem-hygiene-enabled">Hygiene pass enabled</label>
-        <input type="checkbox" x-model="hygieneEnabled" class="rounded border-border" id="mem-hygiene-enabled">
-        <span class="text-muted text-xs">Cluster &amp; merge near-duplicates during consolidation.</span>
-      </div>
-      <div>
-        <label class="label" for="mem-hygiene-threshold">Hygiene similarity threshold</label>
-        <input type="number" step="0.05" class="input-sm" style="max-width:120px" x-model="hygieneThreshold" min="0" max="1" :disabled="!hygieneEnabled" id="mem-hygiene-threshold">
-        <p class="text-muted text-xs mt-1">Higher = stricter (only very-similar memories merge). 0.45 is a sensible default.</p>
-      </div>
-    </div>
-    <div class="flex items-center gap-2 mt-4">
-      <button class="btn-primary btn-sm"
-              @click="withLoading($el, () => saveCfg({
-                'memory.default_importance': String(defaultImportance),
-                'memory.archive_after_days': String(archiveAfterDays),
-                'memory.archive_max_importance': String(archiveMaxImportance),
-                'memory.archive_min_idle_days': String(archiveMinIdleDays),
-                'memory.hygiene_enabled': hygieneEnabled ? 'true' : 'false',
-                'memory.hygiene_similarity_threshold': String(hygieneThreshold)
-              }, 'Lifecycle settings saved', 'lifeOk', 'lifeResult'))">
-        Save lifecycle settings
-      </button>
-      <button class="btn btn-sm" hx-post="/memory/consolidate" hx-target="#consolidation-result" hx-swap="innerHTML">
-        Run consolidation
-      </button>
-      <span id="consolidation-result" class="text-xs"></span>
-    </div>
-    <template x-if="lifeResult">
-      <div :class="lifeOk ? 'alert-success' : 'alert-error'" class="mt-2" x-text="lifeResult"></div>
-    </template>
+  <div id="memory-sub">
+    <div class="skeleton skeleton-row"></div>
+    <div class="skeleton skeleton-row"></div>
+    <div class="skeleton skeleton-row"></div>
   </div>
 </div>
-
-{% elif v == 'long-term' %}
-{% set lt = long_term|default([]) %}
-{% set lt_total = long_term_total|default(0) %}
-
-{{ search('long-term') }}
-{{ pag('long-term', lt_total) }}
-
-<div class="overflow-x-auto mb-6">
-  <table class="table">
-    <thead>
-      <tr>
-        <th class="w-10">ID</th>
-        <th class="w-20">Category</th>
-        <th class="w-24">Subject</th>
-        <th>Content</th>
-        <th class="w-24">Scope</th>
-        <th class="w-10"></th>
-      </tr>
-    </thead>
-    <tbody>
-      {% for m in lt %}
-      <tr x-data="{editing:false}">
-        <td class="text-xs">{{ m.id }}</td>
-        <td class="text-xs">
-          <span x-show="!editing">{{ m.category }}</span>
-          <select name="category" class="input-sm" x-show="editing" aria-label="Category">
-            {% if m.category not in categories %}<option value="{{ m.category }}" selected>{{ m.category }}</option>{% endif %}
-            {% for c in categories %}<option value="{{ c }}" {% if m.category == c %}selected{% endif %}>{{ c }}</option>{% endfor %}
-          </select>
-        </td>
-        <td class="text-xs">
-          <span x-show="!editing">{{ m.subject }}</span>
-          <input name="subject" class="input-sm" value="{{ m.subject }}" x-show="editing" aria-label="Subject">
-        </td>
-        <td class="text-xs break-all">
-          <span x-show="!editing">{{ m.content }}</span>
-          <textarea name="content" class="input-sm w-full" rows="2" x-show="editing" aria-label="Content">{{ m.content }}</textarea>
-        </td>
-        <td class="text-xs">
-          <span x-show="!editing">{% if m.scope %}{{ m.scope }}{% else %}<span class="text-muted">shared</span>{% endif %}</span>
-          <select name="scope" class="input-sm" x-show="editing" aria-label="Scope">
-            <option value="" {% if not m.scope %}selected{% endif %}>shared</option>
-            {% if m.scope and m.scope not in agent_slugs %}<option value="{{ m.scope }}" selected>{{ m.scope }} (no agent)</option>{% endif %}
-            {% for s in agent_slugs %}<option value="{{ s }}" {% if m.scope == s %}selected{% endif %}>{{ s }}</option>{% endfor %}
-          </select>
-        </td>
-        <td class="whitespace-nowrap">
-          <button class="btn btn-sm" x-show="!editing" @click="editing=true">edit</button>
-          <button class="btn-primary btn-sm" x-show="editing"
-                  hx-post="/memory/update" hx-target="#tab-content" hx-swap="innerHTML"
-                  hx-include="closest tr"
-                  hx-vals='{"tier": "long-term", "memory_id": "{{ m.id }}"}'>&#x2713;</button>
-          <button class="btn btn-sm" x-show="editing" @click="editing=false">cancel</button>
-          <button class="btn-danger btn-sm" x-show="!editing"
-                  hx-post="/memory/delete" hx-target="#tab-content" hx-swap="innerHTML"
-                  hx-vals='{"tier": "long-term", "memory_id": "{{ m.id }}"}' hx-confirm="Delete this memory?">x</button>
-        </td>
-      </tr>
-      {% endfor %}
-      {% if not lt %}
-      <tr><td colspan="6" class="text-muted text-xs text-center py-4">No long-term memories</td></tr>
-      {% endif %}
-    </tbody>
-  </table>
-</div>
-{{ pag('long-term', lt_total) }}
-
-{% elif v == 'short-term' %}
-{% set st = short_term|default([]) %}
-{% set st_total = short_term_total|default(0) %}
-
-{{ search('short-term') }}
-{{ pag('short-term', st_total) }}
-
-<div class="overflow-x-auto">
-  <table class="table">
-    <thead>
-      <tr>
-        <th class="w-10">ID</th>
-        <th>Content</th>
-        <th class="w-24">Scope</th>
-        <th class="w-32">Expires</th>
-        <th class="w-10"></th>
-      </tr>
-    </thead>
-    <tbody>
-      {% for m in st %}
-      <tr x-data="{editing:false}">
-        <td class="text-xs">{{ m.id }}</td>
-        <td class="text-xs break-all">
-          <span x-show="!editing">{{ m.content }}</span>
-          <input name="content" class="input-sm w-full" value="{{ m.content }}" x-show="editing" aria-label="Content">
-        </td>
-        <td class="text-xs">
-          <span x-show="!editing">{% if m.scope %}{{ m.scope }}{% else %}<span class="text-muted">shared</span>{% endif %}</span>
-          <select name="scope" class="input-sm" x-show="editing" aria-label="Scope">
-            <option value="" {% if not m.scope %}selected{% endif %}>shared</option>
-            {% if m.scope and m.scope not in agent_slugs %}<option value="{{ m.scope }}" selected>{{ m.scope }} (no agent)</option>{% endif %}
-            {% for s in agent_slugs %}<option value="{{ s }}" {% if m.scope == s %}selected{% endif %}>{{ s }}</option>{% endfor %}
-          </select>
-        </td>
-        <td class="text-xs">
-          <span x-show="!editing">{{ m.expires_at }}</span>
-          <input type="datetime-local" name="expires_at" step="1" class="input-sm"
-                 value="{{ m.expires_at[:19]|replace(' ','T') }}" x-show="editing" aria-label="Expires at">
-        </td>
-        <td class="whitespace-nowrap">
-          <button class="btn btn-sm" x-show="!editing" @click="editing=true">edit</button>
-          <button class="btn-primary btn-sm" x-show="editing"
-                  hx-post="/memory/update" hx-target="#tab-content" hx-swap="innerHTML"
-                  hx-include="closest tr"
-                  hx-vals='{"tier": "short-term", "memory_id": "{{ m.id }}"}'>&#x2713;</button>
-          <button class="btn btn-sm" x-show="editing" @click="editing=false">cancel</button>
-          <button class="btn-danger btn-sm" x-show="!editing"
-                  hx-post="/memory/delete" hx-target="#tab-content" hx-swap="innerHTML"
-                  hx-vals='{"tier": "short-term", "memory_id": "{{ m.id }}"}' hx-confirm="Delete this memory?">x</button>
-        </td>
-      </tr>
-      {% endfor %}
-      {% if not st %}
-      <tr><td colspan="5" class="text-muted text-xs text-center py-4">No active short-term memories</td></tr>
-      {% endif %}
-    </tbody>
-  </table>
-</div>
-{{ pag('short-term', st_total) }}
-
-{% endif %}
diff --git a/humux/api/templates/partials/memory_long_term.html b/humux/api/templates/partials/memory_long_term.html
new file mode 100644
index 00000000..a72d6306
--- /dev/null
+++ b/humux/api/templates/partials/memory_long_term.html
@@ -0,0 +1,71 @@
+{% import 'partials/_macros.html' as m %}
+{% set categories = m.memory_categories %}
+{% set lt = long_term|default([]) %}
+{% set lt_total = long_term_total|default(0) %}
+{% set off = memory_offset|default(0)|int %}
+{% set lim = memory_limit|default(25)|int %}
+{% set q = memory_q|default('') %}
+{% set agent_slugs = agent_slugs|default([]) %}
+
+{{ m.memory_search('long-term') }}
+{{ m.memory_pag('long-term', lt_total) }}
+
+<div class="overflow-x-auto mb-6">
+  <table class="table">
+    <thead>
+      <tr>
+        <th class="w-10">ID</th>
+        <th class="w-20">Category</th>
+        <th class="w-24">Subject</th>
+        <th>Content</th>
+        <th class="w-24">Scope</th>
+        <th class="w-10"></th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for m in lt %}
+      <tr x-data="{editing:false}">
+        <td class="text-xs">{{ m.id }}</td>
+        <td class="text-xs">
+          <span x-show="!editing">{{ m.category }}</span>
+          <select name="category" class="input-sm" x-show="editing" aria-label="Category">
+            {% if m.category not in categories %}<option value="{{ m.category }}" selected>{{ m.category }}</option>{% endif %}
+            {% for c in categories %}<option value="{{ c }}" {% if m.category == c %}selected{% endif %}>{{ c }}</option>{% endfor %}
+          </select>
+        </td>
+        <td class="text-xs">
+          <span x-show="!editing">{{ m.subject }}</span>
+          <input name="subject" class="input-sm" value="{{ m.subject }}" x-show="editing" aria-label="Subject">
+        </td>
+        <td class="text-xs break-all">
+          <span x-show="!editing">{{ m.content }}</span>
+          <textarea name="content" class="input-sm w-full" rows="2" x-show="editing" aria-label="Content">{{ m.content }}</textarea>
+        </td>
+        <td class="text-xs">
+          <span x-show="!editing">{% if m.scope %}{{ m.scope }}{% else %}<span class="text-muted">shared</span>{% endif %}</span>
+          <select name="scope" class="input-sm" x-show="editing" aria-label="Scope">
+            <option value="" {% if not m.scope %}selected{% endif %}>shared</option>
+            {% if m.scope and m.scope not in agent_slugs %}<option value="{{ m.scope }}" selected>{{ m.scope }} (no agent)</option>{% endif %}
+            {% for s in agent_slugs %}<option value="{{ s }}" {% if m.scope == s %}selected{% endif %}>{{ s }}</option>{% endfor %}
+          </select>
+        </td>
+        <td class="whitespace-nowrap">
+          <button class="btn btn-sm" x-show="!editing" @click="editing=true">edit</button>
+          <button class="btn-primary btn-sm" x-show="editing"
+                  hx-post="/memory/update" hx-target="#memory-sub" hx-swap="innerHTML"
+                  hx-include="closest tr"
+                  hx-vals='{"tier": "long-term", "memory_id": "{{ m.id }}"}'>&#x2713;</button>
+          <button class="btn btn-sm" x-show="editing" @click="editing=false">cancel</button>
+          <button class="btn-danger btn-sm" x-show="!editing"
+                  hx-post="/memory/delete" hx-target="#memory-sub" hx-swap="innerHTML"
+                  hx-vals='{"tier": "long-term", "memory_id": "{{ m.id }}"}' hx-confirm="Delete this memory?">x</button>
+        </td>
+      </tr>
+      {% endfor %}
+      {% if not lt %}
+      <tr><td colspan="6" class="text-muted text-xs text-center py-4">No long-term memories</td></tr>
+      {% endif %}
+    </tbody>
+  </table>
+</div>
+{{ m.memory_pag('long-term', lt_total) }}
diff --git a/humux/api/templates/partials/memory_settings.html b/humux/api/templates/partials/memory_settings.html
new file mode 100644
index 00000000..a6fb9721
--- /dev/null
+++ b/humux/api/templates/partials/memory_settings.html
@@ -0,0 +1,249 @@
+{% import 'partials/_macros.html' as m %}
+<div x-data="{
+  longTermLimit: {{ memory_long_term_limit|default('50', true)|tojson|forceescape }},
+  cfgResult: '', cfgOk: false,
+  embEnabled: {{ emb_enabled|default('true', true)|tojson|forceescape }} === 'true',
+  embProvider: {{ emb_provider|default('sidecar', true)|tojson|forceescape }},
+  embModel: {{ emb_model|default('intfloat/multilingual-e5-small', true)|tojson|forceescape }},
+  embBaseUrl: {{ emb_base_url|default('', true)|tojson|forceescape }},
+  embTopK: {{ emb_top_k|default('12', true)|tojson|forceescape }},
+  embRecallTopK: {{ emb_recall_top_k|default('10', true)|tojson|forceescape }},
+  embResult: '', embOk: false,
+  embStatus: null, embBusy: false, embTestResult: '',
+  defaultImportance: {{ default_importance|default('5.0', true)|tojson|forceescape }},
+  archiveAfterDays: {{ archive_after_days|default('90', true)|tojson|forceescape }},
+  archiveMaxImportance: {{ archive_max_importance|default('4.0', true)|tojson|forceescape }},
+  archiveMinIdleDays: {{ archive_min_idle_days|default('45', true)|tojson|forceescape }},
+  hygieneEnabled: {{ hygiene_enabled|default('true', true)|tojson|forceescape }} === 'true',
+  hygieneThreshold: {{ hygiene_threshold|default('0.45', true)|tojson|forceescape }},
+  lifeResult: '', lifeOk: false,
+  get isLocal() { return this.embProvider === 'local' || this.embProvider === 'fastembed'; },
+  _hdrs() {
+    return {
+      'Content-Type': 'application/json',
+      'Authorization': 'Bearer ' + (localStorage.getItem('admin_api_key') || '')
+    };
+  },
+  saveCfg(vals, okMsg, okField, resField) {
+    return fetch('/config', { method: 'PATCH', headers: this._hdrs(), body: JSON.stringify({values: vals}) })
+      .then(r => { this[okField] = r.ok; return r.json(); })
+      .then(d => {
+        this[resField] = this[okField] ? okMsg : (d.detail || 'Error');
+        if (this[okField] && window.showToast) { window.showToast(okMsg); }
+      })
+      .catch(e => { this[okField] = false; this[resField] = e.message; });
+  },
+  loadEmbStatus() {
+    fetch('/memory/embedding/status', { headers: this._hdrs() })
+      .then(r => r.json()).then(d => { this.embStatus = d; }).catch(() => {});
+  },
+  downloadModel() {
+    this.embBusy = true; this.embTestResult = 'Downloading model\u2026 (first time may take a minute)';
+    fetch('/memory/embedding/prefetch', { method: 'POST', headers: this._hdrs() })
+      .then(r => r.json().then(d => ({ok: r.ok, d})))
+      .then(({ok, d}) => {
+        this.embTestResult = ok ? ('Model ready (dim ' + d.dimensions + ')') : ('Error: ' + (d.detail || 'failed'));
+        this.loadEmbStatus();
+      })
+      .catch(e => { this.embTestResult = 'Error: ' + e.message; })
+      .finally(() => { this.embBusy = false; });
+  },
+  testEmb() {
+    this.embBusy = true; this.embTestResult = 'Testing\u2026';
+    fetch('/memory/embedding/test', { method: 'POST', headers: this._hdrs() })
+      .then(r => r.json().then(d => ({ok: r.ok, d})))
+      .then(({ok, d}) => {
+        this.embTestResult = ok
+          ? ('OK \u00b7 dim ' + d.dimensions + ' \u00b7 related=' + d.similar_pair + ' vs unrelated=' + d.unrelated_pair)
+          : ('Error: ' + (d.detail || 'failed'));
+      })
+      .catch(e => { this.embTestResult = 'Error: ' + e.message; })
+      .finally(() => { this.embBusy = false; });
+  }
+}" x-init="loadEmbStatus()">
+
+  {# Memory config section #}
+  <div class="card mb-6">
+    <h2 class="text-base mb-1">Memory Settings</h2>
+    <p class="text-muted text-xs mb-3">Configure memory storage behaviour.</p>
+    <div class="space-y-3">
+      <div>
+        <label class="label" for="mem-long-term-limit">Long-term limit</label>
+        <input type="number" class="input-sm" style="max-width:120px"
+               x-model="longTermLimit" min="1" max="500" id="mem-long-term-limit">
+        <p class="text-muted text-xs mt-1">Maximum number of long-term memories before consolidation triggers cleanup.</p>
+      </div>
+    </div>
+    <div class="flex justify-end mt-3">
+      <button class="btn-primary btn-sm"
+              @click="withLoading($el, () => saveCfg({'memory.long_term_limit': String(longTermLimit)}, 'Memory settings saved', 'cfgOk', 'cfgResult'))">
+        Save settings
+      </button>
+    </div>
+    <template x-if="cfgResult">
+      <div :class="cfgOk ? 'alert-success' : 'alert-error'" class="mt-2" x-text="cfgResult"></div>
+    </template>
+    <p class="text-muted text-xs mt-4">
+      The models used for memory extraction and consolidation can be configured in the
+      <a href="#" class="text-link" @click.prevent="$dispatch('switch-tab', 'llm')">LLM tab</a>.
+    </p>
+  </div>
+
+  {# Semantic memory (embeddings) #}
+  <div class="card mb-6">
+    <h2 class="text-base mb-1">Semantic memory (embeddings)</h2>
+    <p class="text-muted text-xs mb-3">
+      Match memories by <em>meaning</em>, not just words
+      &mdash; so &ldquo;allergic to shellfish&rdquo; surfaces when you ask about eating prawns.
+    </p>
+    <details class="mb-4 rounded border border-border p-2">
+      <summary class="text-xs cursor-pointer">How it works (the science)</summary>
+      <div class="text-muted text-xs mt-2 space-y-2">
+        <p>An <strong>embedding model</strong> turns each memory and your current message into a vector &mdash; a list of numbers positioning the text in a &ldquo;meaning space&rdquo;. Texts with similar meaning land close together, even with no shared words.</p>
+        <p>Closeness is measured by <strong>cosine similarity</strong> (1.0 = same direction/meaning, 0 = unrelated). On every message we embed it, compare against stored memory vectors, and inject only the most relevant ones &mdash; ranked by <em>relevance + importance + recency</em> (a Generative-Agents-style score) instead of dumping everything.</p>
+        <p>The same similarity drives dedup (does this new fact match an existing one?) and the hygiene pass (cluster &amp; merge near-duplicates).</p>
+        <p><strong>Local</strong> runs the model on this machine (private, free, no key; the model file is bundled in the Docker image). <strong>API</strong> providers call a remote endpoint (needs a key; a few cents/year at most, but your memory text is sent to them). When disabled, memory falls back to fast word-overlap matching &mdash; still works, just less &ldquo;fuzzy&rdquo;.</p>
+      </div>
+    </details>
+    <div class="space-y-3">
+      <div class="flex items-center gap-2">
+        <label class="label mb-0" for="mem-emb-enabled">Enabled</label>
+        <input type="checkbox" x-model="embEnabled" class="rounded border-border" id="mem-emb-enabled">
+        <span class="text-muted text-xs">Off &rarr; lexical (word-overlap) retrieval, no model needed.</span>
+      </div>
+      <div>
+        <label class="label" for="mem-emb-backend">Backend</label>
+        <select class="input-sm" style="max-width:360px" x-model="embProvider" :disabled="!embEnabled" id="mem-emb-backend">
+          <option value="sidecar">Sidecar (infinity on localhost:7997, no key)</option>
+          <option value="local">Local (on-device, private, no key)</option>
+          <option value="openai">OpenAI API</option>
+          <option value="google">Google API</option>
+        </select>
+        <p class="text-muted text-xs mt-1" x-show="!isLocal">
+          API key falls back to the matching provider key set in the
+          <a href="#" class="text-link" @click.prevent="$dispatch('switch-tab', 'llm')">LLM tab</a>.
+          (Note: DeepSeek has no embeddings endpoint.)
+        </p>
+      </div>
+      <div>
+        <label class="label" for="mem-emb-model">Model</label>
+        <input type="text" class="input-sm" style="max-width:420px" x-model="embModel" :disabled="!embEnabled"
+               placeholder="intfloat/multilingual-e5-small" id="mem-emb-model">
+        <p class="text-muted text-xs mt-1" x-show="isLocal">Multilingual CPU model (384-dim, ~470MB).</p>
+        <p class="text-muted text-xs mt-1" x-show="!isLocal">e.g. <code>text-embedding-3-small</code> (OpenAI) or <code>text-embedding-004</code> (Google).</p>
+      </div>
+      <div x-show="!isLocal">
+        <label class="label" for="mem-emb-base-url">Base URL (optional)</label>
+        <input type="text" class="input-sm" style="max-width:420px" x-model="embBaseUrl" :disabled="!embEnabled"
+               placeholder="https://&hellip; (OpenAI-compatible /embeddings)" id="mem-emb-base-url">
+      </div>
+      <div>
+        <label class="label" for="mem-emb-top-k">Injected memories per turn (top-k)</label>
+        <input type="number" class="input-sm" style="max-width:120px" x-model="embTopK" :disabled="!embEnabled" min="1" max="100" id="mem-emb-top-k">
+        <p class="text-muted text-xs mt-1">How many of the most relevant long-term memories to put in the prompt each message.</p>
+      </div>
+      <div>
+        <label class="label" for="mem-emb-recall-top-k">Recall results (recall_memory tool)</label>
+        <input type="number" class="input-sm" style="max-width:120px" x-model="embRecallTopK" :disabled="!embEnabled" min="1" max="25" id="mem-emb-recall-top-k">
+        <p class="text-muted text-xs mt-1">Default number of memories the recall_memory tool returns when the agent searches its full long-term store on demand (the agent may request fewer/more per call, capped at 25).</p>
+      </div>
+      <div class="text-xs" x-show="isLocal && embStatus">
+        Model on disk:
+        <span x-show="embStatus && embStatus.model_ready" class="text-success">yes &#x2713;</span>
+        <span x-show="embStatus && embStatus.model_ready === false" class="text-error">not downloaded yet</span>
+      </div>
+    </div>
+    <div class="flex items-center gap-2 mt-4 flex-wrap">
+      <button class="btn-primary btn-sm"
+              @click="withLoading($el, () => saveCfg({
+                'memory.embedding.enabled': embEnabled ? 'true' : 'false',
+                'memory.embedding.provider': embProvider,
+                'memory.embedding.model': embModel,
+                'memory.embedding.base_url': embBaseUrl,
+                'memory.embedding.injection_top_k': String(embTopK),
+                'memory.embedding.recall_top_k': String(embRecallTopK)
+              }, 'Embedding settings saved', 'embOk', 'embResult').then(loadEmbStatus))">
+        Save embedding settings
+      </button>
+      <button class="btn btn-sm" type="button" x-show="isLocal" :disabled="embBusy" @click="downloadModel()">
+        <span x-show="!embBusy">Download model</span>
+        <span x-show="embBusy">Working&hellip;</span>
+      </button>
+      <button class="btn btn-sm" type="button" :disabled="embBusy || !embEnabled" @click="testEmb()">Test</button>
+    </div>
+    <template x-if="embResult">
+      <div :class="embOk ? 'alert-success' : 'alert-error'" class="mt-2" x-text="embResult"></div>
+    </template>
+    <template x-if="embTestResult">
+      <div class="text-muted text-xs mt-2" x-text="embTestResult"></div>
+    </template>
+    <p class="text-muted text-xs mt-3">Changes apply live to the running agent (the local model loads on first use).</p>
+  </div>
+
+  {# Memory lifecycle (forgetting + hygiene) #}
+  <div class="card mb-6">
+    <h2 class="text-base mb-1">Memory lifecycle (forgetting &amp; hygiene)</h2>
+    <p class="text-muted text-xs mb-3">Keep long-term memory from growing forever: reinforce what matters, forget cold trivia, merge duplicates.</p>
+    <details class="mb-4 rounded border border-border p-2">
+      <summary class="text-xs cursor-pointer">How it works (the science)</summary>
+      <div class="text-muted text-xs mt-2 space-y-2">
+        <p>Each memory has an <strong>importance</strong> (1&ndash;10). Recall <strong>reinforces</strong> it (access count + recency), and re-stating a fact bumps its importance &mdash; mirroring how human memory strengthens with use.</p>
+        <p><strong>Forgetting:</strong> during consolidation, memories that are old, low-importance, and not accessed for a while are <em>archived</em> (soft-deleted, recoverable) rather than injected forever. This is decay, like the &ldquo;use it or lose it&rdquo; curve.</p>
+        <p><strong>Hygiene:</strong> the same run clusters near-duplicate memories (by similarity) and asks the model to merge them and drop contradictions, keeping the most recent &mdash; so the store stays compact and consistent.</p>
+      </div>
+    </details>
+    <div class="space-y-3">
+      <div>
+        <label class="label" for="mem-default-importance">Default importance (1&ndash;10)</label>
+        <input type="number" step="0.5" class="input-sm" style="max-width:120px" x-model="defaultImportance" min="1" max="10" id="mem-default-importance">
+        <p class="text-muted text-xs mt-1">Starting importance for a new memory.</p>
+      </div>
+      <div>
+        <label class="label" for="mem-archive-days">Archive after (days old)</label>
+        <input type="number" class="input-sm" style="max-width:120px" x-model="archiveAfterDays" min="1" id="mem-archive-days">
+        <p class="text-muted text-xs mt-1">A memory must be at least this old before it can be archived.</p>
+      </div>
+      <div>
+        <label class="label" for="mem-archive-max-imp">Archive only if importance &le;</label>
+        <input type="number" step="0.5" class="input-sm" style="max-width:120px" x-model="archiveMaxImportance" min="1" max="10" id="mem-archive-max-imp">
+        <p class="text-muted text-xs mt-1">Important memories are never auto-archived.</p>
+      </div>
+      <div>
+        <label class="label" for="mem-archive-idle-days">Archive only if idle (days)</label>
+        <input type="number" class="input-sm" style="max-width:120px" x-model="archiveMinIdleDays" min="1" id="mem-archive-idle-days">
+        <p class="text-muted text-xs mt-1">Require this long since last access/creation before archiving.</p>
+      </div>
+      <hr class="border-border">
+      <div class="flex items-center gap-2">
+        <label class="label mb-0" for="mem-hygiene-enabled">Hygiene pass enabled</label>
+        <input type="checkbox" x-model="hygieneEnabled" class="rounded border-border" id="mem-hygiene-enabled">
+        <span class="text-muted text-xs">Cluster &amp; merge near-duplicates during consolidation.</span>
+      </div>
+      <div>
+        <label class="label" for="mem-hygiene-threshold">Hygiene similarity threshold</label>
+        <input type="number" step="0.05" class="input-sm" style="max-width:120px" x-model="hygieneThreshold" min="0" max="1" :disabled="!hygieneEnabled" id="mem-hygiene-threshold">
+        <p class="text-muted text-xs mt-1">Higher = stricter (only very-similar memories merge). 0.45 is a sensible default.</p>
+      </div>
+    </div>
+    <div class="flex items-center gap-2 mt-4">
+      <button class="btn-primary btn-sm"
+              @click="withLoading($el, () => saveCfg({
+                'memory.default_importance': String(defaultImportance),
+                'memory.archive_after_days': String(archiveAfterDays),
+                'memory.archive_max_importance': String(archiveMaxImportance),
+                'memory.archive_min_idle_days': String(archiveMinIdleDays),
+                'memory.hygiene_enabled': hygieneEnabled ? 'true' : 'false',
+                'memory.hygiene_similarity_threshold': String(hygieneThreshold)
+              }, 'Lifecycle settings saved', 'lifeOk', 'lifeResult'))">
+        Save lifecycle settings
+      </button>
+      <button class="btn btn-sm" hx-post="/memory/consolidate" hx-target="#consolidation-result" hx-swap="innerHTML">
+        Run consolidation
+      </button>
+      <span id="consolidation-result" class="text-xs"></span>
+    </div>
+    <template x-if="lifeResult">
+      <div :class="lifeOk ? 'alert-success' : 'alert-error'" class="mt-2" x-text="lifeResult"></div>
+    </template>
+  </div>
+</div>
diff --git a/humux/api/templates/partials/memory_short_term.html b/humux/api/templates/partials/memory_short_term.html
new file mode 100644
index 00000000..3a523ff0
--- /dev/null
+++ b/humux/api/templates/partials/memory_short_term.html
@@ -0,0 +1,64 @@
+{% import 'partials/_macros.html' as m %}
+{% set categories = m.memory_categories %}
+{% set st = short_term|default([]) %}
+{% set st_total = short_term_total|default(0) %}
+{% set off = memory_offset|default(0)|int %}
+{% set lim = memory_limit|default(25)|int %}
+{% set q = memory_q|default('') %}
+{% set agent_slugs = agent_slugs|default([]) %}
+
+{{ m.memory_search('short-term') }}
+{{ m.memory_pag('short-term', st_total) }}
+
+<div class="overflow-x-auto">
+  <table class="table">
+    <thead>
+      <tr>
+        <th class="w-10">ID</th>
+        <th>Content</th>
+        <th class="w-24">Scope</th>
+        <th class="w-32">Expires</th>
+        <th class="w-10"></th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for m in st %}
+      <tr x-data="{editing:false}">
+        <td class="text-xs">{{ m.id }}</td>
+        <td class="text-xs break-all">
+          <span x-show="!editing">{{ m.content }}</span>
+          <input name="content" class="input-sm w-full" value="{{ m.content }}" x-show="editing" aria-label="Content">
+        </td>
+        <td class="text-xs">
+          <span x-show="!editing">{% if m.scope %}{{ m.scope }}{% else %}<span class="text-muted">shared</span>{% endif %}</span>
+          <select name="scope" class="input-sm" x-show="editing" aria-label="Scope">
+            <option value="" {% if not m.scope %}selected{% endif %}>shared</option>
+            {% if m.scope and m.scope not in agent_slugs %}<option value="{{ m.scope }}" selected>{{ m.scope }} (no agent)</option>{% endif %}
+            {% for s in agent_slugs %}<option value="{{ s }}" {% if m.scope == s %}selected{% endif %}>{{ s }}</option>{% endfor %}
+          </select>
+        </td>
+        <td class="text-xs">
+          <span x-show="!editing">{{ m.expires_at }}</span>
+          <input type="datetime-local" name="expires_at" step="1" class="input-sm"
+                 value="{{ m.expires_at[:19]|replace(' ','T') }}" x-show="editing" aria-label="Expires at">
+        </td>
+        <td class="whitespace-nowrap">
+          <button class="btn btn-sm" x-show="!editing" @click="editing=true">edit</button>
+          <button class="btn-primary btn-sm" x-show="editing"
+                  hx-post="/memory/update" hx-target="#memory-sub" hx-swap="innerHTML"
+                  hx-include="closest tr"
+                  hx-vals='{"tier": "short-term", "memory_id": "{{ m.id }}"}'>&#x2713;</button>
+          <button class="btn btn-sm" x-show="editing" @click="editing=false">cancel</button>
+          <button class="btn-danger btn-sm" x-show="!editing"
+                  hx-post="/memory/delete" hx-target="#memory-sub" hx-swap="innerHTML"
+                  hx-vals='{"tier": "short-term", "memory_id": "{{ m.id }}"}' hx-confirm="Delete this memory?">x</button>
+        </td>
+      </tr>
+      {% endfor %}
+      {% if not st %}
+      <tr><td colspan="5" class="text-muted text-xs text-center py-4">No active short-term memories</td></tr>
+      {% endif %}
+    </tbody>
+  </table>
+</div>
+{{ m.memory_pag('short-term', st_total) }}
diff --git a/humux/api/templates/partials/secrets.html b/humux/api/templates/partials/secrets.html
index 6f9387cf..d6c892ac 100644
--- a/humux/api/templates/partials/secrets.html
+++ b/humux/api/templates/partials/secrets.html
@@ -1,11 +1,13 @@
-{# Vaults tab (issue #19) — names + access matrix only, never values. #}
+{# Vaults tab wrapper: Agents | Infra | Import sub-tabs.
+   Each sub-tab lazy-loads its own partial via htmx. The active sub-tab
+   is mirrored in the URL as ?vaultsub= for copy-pasteable links. #}
 {% if not configured %}
 <div class="card">
   <h2 class="text-base mb-1">Vaults</h2>
   <p class="text-muted text-sm">The secrets vault is not configured in this deployment.</p>
 </div>
 {% else %}
-<div class="space-y-6" x-data="vaultTabs()" x-init="init()">
+<div x-data="vaultTabs()" x-init="init()">
   {% if flash %}<div class="alert-success">{{ flash }}</div>{% endif %}
   {% if error %}<div class="alert-error">{{ error }}</div>{% endif %}
   {% if not unsealed %}
@@ -15,177 +17,15 @@ <h2 class="text-base mb-1">Vaults</h2>
   </div>
   {% endif %}
 
-  {# Sub-tabs: Agents | Infra | Import #}
   <div class="flex border-b border-border mb-4 overflow-x-auto">
     <button type="button" class="tab-link" :class="sub === 'agents' && 'tab-link-active'" @click="select('agents')">Agents</button>
     <button type="button" class="tab-link" :class="sub === 'infra' && 'tab-link-active'" @click="select('infra')">Infra</button>
     <button type="button" class="tab-link" :class="sub === 'import' && 'tab-link-active'" @click="select('import')">Import</button>
   </div>
-
-  {# ── Agents: agent / login secrets ─────────────────────────── #}
-  <div class="space-y-6" x-show="sub === 'agents'">
-  <div class="card">
-    <h2 class="text-base mb-1">Agent &amp; login secrets</h2>
-    <p class="text-muted text-xs mb-4">
-      Values are write-only — only names, descriptions and recent use are ever shown.
-      Use a secret from <code>run_command</code> as <code>{% raw %}{{secret:NAME}}{% endraw %}</code>.
-    </p>
-
-    {% if secrets %}
-    <div class="overflow-x-auto">
-      <table class="w-full text-xs">
-        <thead>
-          <tr class="text-muted text-left border-b border-border">
-            <th class="py-1 pr-3">Name</th>
-            {% for p in agents %}<th class="py-1 px-2 text-center">{{ p }}</th>{% endfor %}
-            <th class="py-1 px-2 text-center">all</th>
-            <th class="py-1 pl-2"></th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for s in secrets %}
-          <tr class="border-b border-border align-top">
-            <td class="py-2 pr-3">
-              <div class="font-mono">{{ s.name }}{% if s.structured %} <span class="text-muted">(login)</span>{% endif %}</div>
-              {% if s.description %}<div class="text-muted">{{ s.description }}</div>{% endif %}
-              <div class="text-muted">
-                used {{ s.use_count }}×{% if s.last_used_at %}, last {{ s.last_used_at }}{% endif %}
-                {% if s.expires_at %} · expires {{ s.expires_at }}{% endif %}
-                {% if s.max_uses %} · single-use{% endif %}
-              </div>
-            </td>
-            {% for p in agents %}
-            <td class="py-2 px-2 text-center">
-              <input type="checkbox" aria-label="Grant {{ s.name }} to {{ p }}"
-                     {% if s.shared %}checked disabled{% elif p in s.holders %}checked{% endif %}
-                     hx-post="/admin/secrets/grant" hx-target="#tab-content" hx-swap="innerHTML"
-                     hx-vals='js:{name:"{{ s.name }}",agent:"{{ p }}",grant:event.target.checked}'>
-            </td>
-            {% endfor %}
-            <td class="py-2 px-2 text-center">{% if s.shared %}✓{% endif %}</td>
-            <td class="py-2 pl-2 text-right">
-              <button class="btn-danger btn-sm"
-                      hx-post="/admin/secrets/delete" hx-target="#tab-content" hx-swap="innerHTML"
-                      hx-confirm="Revoke secret '{{ s.name }}'?"
-                      hx-vals='{"name":"{{ s.name }}"}'>Revoke</button>
-            </td>
-          </tr>
-          {% endfor %}
-        </tbody>
-      </table>
-    </div>
-    {% else %}
-    <p class="text-muted text-xs">No agent secrets yet.</p>
-    {% endif %}
-  </div>
-
-  {# ── Add a secret ─────────────────────────────────────────────── #}
-  <div class="card" x-data="{ scope: 'this', duration: 'forever' }">
-    <h3 class="text-sm text-accent mb-3">Add / rotate a secret</h3>
-    <form hx-post="/admin/secrets" hx-target="#tab-content" hx-swap="innerHTML" class="space-y-3">
-      <div>
-        <label class="label" for="vault-name">Name</label>
-        <input class="input-sm" name="name" id="vault-name" autocomplete="off" placeholder="STRIPE_KEY or agent:finance:acme" required style="max-width:420px">
-      </div>
-      <div>
-        <label class="label" for="vault-value">Value <span class="text-muted">(write-only)</span></label>
-        <input type="password" class="input-sm" name="value" id="vault-value" autocomplete="new-password" placeholder="secret value" style="max-width:420px">
-      </div>
-      <div>
-        <label class="label" for="vault-desc">Description</label>
-        <input class="input-sm" name="description" id="vault-desc" placeholder="what it's for (shown, never the value)" style="max-width:420px">
-      </div>
-      <div>
-        <label class="label" for="vault-scope">Scope</label>
-        <select class="input-sm" name="scope" id="vault-scope" x-model="scope" style="max-width:240px">
-          <option value="this">Specific agent(s)</option>
-          <option value="all">All agents (shared)</option>
-        </select>
-        <input class="input-sm mt-1" name="agents" id="vault-agents" aria-label="Agent names" placeholder="agent names, comma-separated"
-               x-show="scope === 'this'" style="max-width:420px">
-      </div>
-      <div>
-        <label class="label" for="vault-duration">Duration</label>
-        <select class="input-sm" name="duration" id="vault-duration" x-model="duration" style="max-width:240px">
-          <option value="forever">Forever</option>
-          <option value="until">Until a date</option>
-          <option value="once">Once (single use)</option>
-        </select>
-        <input type="date" class="input-sm mt-1" name="until" id="vault-until" aria-label="Expiry date" x-show="duration === 'until'" style="max-width:240px">
-      </div>
-      <button class="btn-primary btn-sm" type="submit">Save secret</button>
-    </form>
-  </div>
-  </div>{# /agents #}
-
-  {# ── Infrastructure secrets ───────────────────────────────────── #}
-  <div class="space-y-6" x-show="sub === 'infra'" style="display:none">
-  <div class="card">
-    <h3 class="text-sm text-accent mb-1">Infrastructure secrets</h3>
-    <p class="text-muted text-xs mb-3">
-      Machine-key encrypted; read at boot via <code>${% raw %}{vault:NAME}{% endraw %}</code> in config
-      (with <code>.env</code> fallback).
-      {% if not infra_available %}<span class="text-warn">No machine key configured.</span>{% endif %}
-    </p>
-
-    {# ── Migrate scattered plaintext credentials (issue #35) ──────── #}
-    <div class="mb-4 pb-3 border-b border-border">
-      {% if migratable %}
-      <p class="text-muted text-xs mb-2">
-        {{ migratable|length }} credential(s) still stored as plaintext in config:
-        <span class="font-mono">{{ migratable|join(', ') }}</span>.
-        Move them into the encrypted vault — config will reference them as
-        <code>${% raw %}{vault:NAME}{% endraw %}</code> (<code>.env</code> stays a fallback).
-      </p>
-      <button class="btn btn-sm"
-              {% if not infra_available %}disabled title="Configure a machine key first"{% endif %}
-              hx-post="/admin/secrets/migrate" hx-target="#tab-content" hx-swap="innerHTML"
-              hx-confirm="Move {{ migratable|length }} plaintext credential(s) into the infra vault?">
-        Migrate {{ migratable|length }} credential(s) into the vault
-      </button>
-      {% else %}
-      <p class="text-xs text-success">
-        All known credentials reference the vault (or live only in <code>.env</code>).
-      </p>
-      {% endif %}
-    </div>
-
-    {% if infra %}
-    <ul class="text-xs font-mono mb-3 space-y-1">
-      {% for i in infra %}
-      <li class="flex items-center justify-between gap-2">
-        <span>{{ i.name }} <span class="text-muted">— {{ i.description }}</span></span>
-        <button class="btn-danger btn-sm"
-                hx-post="/admin/secrets/infra/delete" hx-target="#tab-content" hx-swap="innerHTML"
-                hx-confirm="Delete infra secret '{{ i.name }}'? Config referencing ${% raw %}{vault:{% endraw %}{{ i.name }}} will fall back to .env."
-                hx-vals='{"name":"{{ i.name }}"}'>Delete</button>
-      </li>
-      {% endfor %}
-    </ul>
-    {% endif %}
-    <form hx-post="/admin/secrets/infra" hx-target="#tab-content" hx-swap="innerHTML" class="space-y-2">
-      <input class="input-sm" name="name" id="vault-infra-name" autocomplete="off" aria-label="Infra secret name" placeholder="ANTHROPIC_API_KEY" style="max-width:420px" required>
-      <input type="password" class="input-sm" name="value" id="vault-infra-value" aria-label="Infra secret value" autocomplete="new-password" placeholder="value" style="max-width:420px">
-      <input class="input-sm" name="description" id="vault-infra-desc" aria-label="Infra secret description" placeholder="description" style="max-width:420px">
-      <button class="btn-sm" type="submit" {% if not infra_available %}disabled{% endif %}>Add infra secret</button>
-    </form>
-  </div>
-  </div>{# /infra #}
-
-  {# ── Import from Bitwarden ────────────────────────────────────── #}
-  <div class="space-y-6" x-show="sub === 'import'" style="display:none">
-  <div class="card">
-    <h3 class="text-sm text-accent mb-2">Import from Bitwarden</h3>
-    <p class="text-muted text-xs mb-3">
-      Export your Bitwarden vault as JSON (<code>bw export --format json</code> or the web
-      vault → Export), then upload it here. Login items become secrets you can scope.
-    </p>
-    <form hx-post="/admin/secrets/import/parse" hx-target="#tab-content" hx-swap="innerHTML"
-          hx-encoding="multipart/form-data" class="flex items-center gap-2">
-      <input type="file" name="file" accept=".json,application/json" class="input-sm" aria-label="Bitwarden export JSON file" required>
-      <button class="btn-sm" type="submit">Upload &amp; preview</button>
-    </form>
+  <div id="vault-sub">
+    <div class="skeleton skeleton-row"></div>
+    <div class="skeleton skeleton-row"></div>
+    <div class="skeleton skeleton-row"></div>
   </div>
-  </div>{# /import #}
 </div>
 {% endif %}
diff --git a/humux/api/templates/partials/secrets_agents.html b/humux/api/templates/partials/secrets_agents.html
new file mode 100644
index 00000000..d30b3947
--- /dev/null
+++ b/humux/api/templates/partials/secrets_agents.html
@@ -0,0 +1,96 @@
+  <div class="space-y-6" x-show="sub === 'agents'">
+  <div class="card">
+    <h2 class="text-base mb-1">Agent &amp; login secrets</h2>
+    <p class="text-muted text-xs mb-4">
+      Values are write-only — only names, descriptions and recent use are ever shown.
+      Use a secret from <code>run_command</code> as <code>{% raw %}{{secret:NAME}}{% endraw %}</code>.
+    </p>
+
+    {% if secrets %}
+    <div class="overflow-x-auto">
+      <table class="w-full text-xs">
+        <thead>
+          <tr class="text-muted text-left border-b border-border">
+            <th class="py-1 pr-3">Name</th>
+            {% for p in agents %}<th class="py-1 px-2 text-center">{{ p }}</th>{% endfor %}
+            <th class="py-1 px-2 text-center">all</th>
+            <th class="py-1 pl-2"></th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for s in secrets %}
+          <tr class="border-b border-border align-top">
+            <td class="py-2 pr-3">
+              <div class="font-mono">{{ s.name }}{% if s.structured %} <span class="text-muted">(login)</span>{% endif %}</div>
+              {% if s.description %}<div class="text-muted">{{ s.description }}</div>{% endif %}
+              <div class="text-muted">
+                used {{ s.use_count }}×{% if s.last_used_at %}, last {{ s.last_used_at }}{% endif %}
+                {% if s.expires_at %} · expires {{ s.expires_at }}{% endif %}
+                {% if s.max_uses %} · single-use{% endif %}
+              </div>
+            </td>
+            {% for p in agents %}
+            <td class="py-2 px-2 text-center">
+              <input type="checkbox" aria-label="Grant {{ s.name }} to {{ p }}"
+                     {% if s.shared %}checked disabled{% elif p in s.holders %}checked{% endif %}
+                     hx-post="/admin/secrets/grant" hx-target="#tab-content" hx-swap="innerHTML"
+                     hx-vals='js:{name:"{{ s.name }}",agent:"{{ p }}",grant:event.target.checked}'>
+            </td>
+            {% endfor %}
+            <td class="py-2 px-2 text-center">{% if s.shared %}✓{% endif %}</td>
+            <td class="py-2 pl-2 text-right">
+              <button class="btn-danger btn-sm"
+                      hx-post="/admin/secrets/delete" hx-target="#tab-content" hx-swap="innerHTML"
+                      hx-confirm="Revoke secret '{{ s.name }}'?"
+                      hx-vals='{"name":"{{ s.name }}"}'>Revoke</button>
+            </td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+    {% else %}
+    <p class="text-muted text-xs">No agent secrets yet.</p>
+    {% endif %}
+  </div>
+
+  {# ── Add a secret ─────────────────────────────────────────────── #}
+  <div class="card" x-data="{ scope: 'this', duration: 'forever' }">
+    <h3 class="text-sm text-accent mb-3">Add / rotate a secret</h3>
+    <form hx-post="/admin/secrets" hx-target="#tab-content" hx-swap="innerHTML" class="space-y-3">
+      <div>
+        <label class="label" for="vault-name">Name</label>
+        <input class="input-sm" name="name" id="vault-name" autocomplete="off" placeholder="STRIPE_KEY or agent:finance:acme" required style="max-width:420px">
+      </div>
+      <div>
+        <label class="label" for="vault-value">Value <span class="text-muted">(write-only)</span></label>
+        <input type="password" class="input-sm" name="value" id="vault-value" autocomplete="new-password" placeholder="secret value" style="max-width:420px">
+      </div>
+      <div>
+        <label class="label" for="vault-desc">Description</label>
+        <input class="input-sm" name="description" id="vault-desc" placeholder="what it's for (shown, never the value)" style="max-width:420px">
+      </div>
+      <div>
+        <label class="label" for="vault-scope">Scope</label>
+        <select class="input-sm" name="scope" id="vault-scope" x-model="scope" style="max-width:240px">
+          <option value="this">Specific agent(s)</option>
+          <option value="all">All agents (shared)</option>
+        </select>
+        <input class="input-sm mt-1" name="agents" id="vault-agents" aria-label="Agent names" placeholder="agent names, comma-separated"
+               x-show="scope === 'this'" style="max-width:420px">
+      </div>
+      <div>
+        <label class="label" for="vault-duration">Duration</label>
+        <select class="input-sm" name="duration" id="vault-duration" x-model="duration" style="max-width:240px">
+          <option value="forever">Forever</option>
+          <option value="until">Until a date</option>
+          <option value="once">Once (single use)</option>
+        </select>
+        <input type="date" class="input-sm mt-1" name="until" id="vault-until" aria-label="Expiry date" x-show="duration === 'until'" style="max-width:240px">
+      </div>
+      <button class="btn-primary btn-sm" type="submit">Save secret</button>
+    </form>
+  </div>
+  </div>{# /agents #}
+
+  {# ── Infrastructure secrets ───────────────────────────────────── #}
diff --git a/humux/api/templates/partials/secrets_import.html b/humux/api/templates/partials/secrets_import.html
index 724c4e1b..5838641e 100644
--- a/humux/api/templates/partials/secrets_import.html
+++ b/humux/api/templates/partials/secrets_import.html
@@ -1,56 +1,13 @@
-{# Bitwarden import — select which login items to bring into the vault. #}
-<div class="space-y-4" x-data="{ scope: 'this' }">
+  <div class="space-y-6" x-show="sub === 'import'" >
   <div class="card">
-    <h2 class="text-base mb-1">Import logins</h2>
+    <h3 class="text-sm text-accent mb-2">Import from Bitwarden</h3>
     <p class="text-muted text-xs mb-3">
-      {{ items|length }} login item(s) found. Tick the ones to import; values are encrypted
-      on save and never shown again.
+      Export your Bitwarden vault as JSON (<code>bw export --format json</code> or the web
+      vault → Export), then upload it here. Login items become secrets you can scope.
     </p>
-    {% if not items %}
-    <p class="text-muted text-xs">No login items in this export.</p>
-    <button class="btn-sm" hx-get="/partials/secrets" hx-target="#tab-content" hx-swap="innerHTML">Back</button>
-    {% else %}
-    <form hx-post="/admin/secrets/import/commit" hx-target="#tab-content" hx-swap="innerHTML" class="space-y-3">
-      <div class="overflow-x-auto">
-        <table class="w-full text-xs">
-          <thead>
-            <tr class="text-muted text-left border-b border-border">
-              <th class="py-1 pr-2"></th><th class="py-1 pr-2">Name</th>
-              <th class="py-1 pr-2">Username</th><th class="py-1 pr-2">URL</th><th class="py-1 pr-2">TOTP</th>
-            </tr>
-          </thead>
-          <tbody>
-            {% for it in items %}
-            <tr class="border-b border-border">
-              <td class="py-1 pr-2"><input type="checkbox" name="selected" value="{{ it.name }}" checked></td>
-              <td class="py-1 pr-2 font-mono">{{ it.name }}
-                <input type="hidden" name="username__{{ it.name }}" value="{{ it.username }}">
-                <input type="hidden" name="password__{{ it.name }}" value="{{ it.password }}">
-                <input type="hidden" name="url__{{ it.name }}" value="{{ it.url }}">
-                <input type="hidden" name="totp__{{ it.name }}" value="{{ it.totp }}">
-              </td>
-              <td class="py-1 pr-2">{{ it.username }}</td>
-              <td class="py-1 pr-2 text-muted">{{ it.url }}</td>
-              <td class="py-1 pr-2">{% if it.totp %}✓{% endif %}</td>
-            </tr>
-            {% endfor %}
-          </tbody>
-        </table>
-      </div>
-      <div>
-        <label class="label" for="import-scope">Scope</label>
-        <select class="input-sm" name="scope" x-model="scope" id="import-scope" style="max-width:240px">
-          <option value="this">Specific agent(s)</option>
-          <option value="all">All agents (shared)</option>
-        </select>
-        <input class="input-sm mt-1" name="agents" placeholder="agent names, comma-separated"
-               x-show="scope === 'this'" style="max-width:420px">
-      </div>
-      <div class="flex gap-2">
-        <button class="btn-sm" type="button" hx-get="/partials/secrets" hx-target="#tab-content" hx-swap="innerHTML">Cancel</button>
-        <button class="btn-primary btn-sm" type="submit">Import selected</button>
-      </div>
+    <form hx-post="/admin/secrets/import/parse" hx-target="#tab-content" hx-swap="innerHTML"
+          hx-encoding="multipart/form-data" class="flex items-center gap-2">
+      <input type="file" name="file" accept=".json,application/json" class="input-sm" aria-label="Bitwarden export JSON file" required>
+      <button class="btn-sm" type="submit">Upload &amp; preview</button>
     </form>
-    {% endif %}
   </div>
-</div>
diff --git a/humux/api/templates/partials/secrets_infra.html b/humux/api/templates/partials/secrets_infra.html
new file mode 100644
index 00000000..1cda51af
--- /dev/null
+++ b/humux/api/templates/partials/secrets_infra.html
@@ -0,0 +1,54 @@
+  <div class="space-y-6" x-show="sub === 'infra'" >
+  <div class="card">
+    <h3 class="text-sm text-accent mb-1">Infrastructure secrets</h3>
+    <p class="text-muted text-xs mb-3">
+      Machine-key encrypted; read at boot via <code>${% raw %}{vault:NAME}{% endraw %}</code> in config
+      (with <code>.env</code> fallback).
+      {% if not infra_available %}<span class="text-warn">No machine key configured.</span>{% endif %}
+    </p>
+
+    {# ── Migrate scattered plaintext credentials (issue #35) ──────── #}
+    <div class="mb-4 pb-3 border-b border-border">
+      {% if migratable %}
+      <p class="text-muted text-xs mb-2">
+        {{ migratable|length }} credential(s) still stored as plaintext in config:
+        <span class="font-mono">{{ migratable|join(', ') }}</span>.
+        Move them into the encrypted vault — config will reference them as
+        <code>${% raw %}{vault:NAME}{% endraw %}</code> (<code>.env</code> stays a fallback).
+      </p>
+      <button class="btn btn-sm"
+              {% if not infra_available %}disabled title="Configure a machine key first"{% endif %}
+              hx-post="/admin/secrets/migrate" hx-target="#tab-content" hx-swap="innerHTML"
+              hx-confirm="Move {{ migratable|length }} plaintext credential(s) into the infra vault?">
+        Migrate {{ migratable|length }} credential(s) into the vault
+      </button>
+      {% else %}
+      <p class="text-xs text-success">
+        All known credentials reference the vault (or live only in <code>.env</code>).
+      </p>
+      {% endif %}
+    </div>
+
+    {% if infra %}
+    <ul class="text-xs font-mono mb-3 space-y-1">
+      {% for i in infra %}
+      <li class="flex items-center justify-between gap-2">
+        <span>{{ i.name }} <span class="text-muted">— {{ i.description }}</span></span>
+        <button class="btn-danger btn-sm"
+                hx-post="/admin/secrets/infra/delete" hx-target="#tab-content" hx-swap="innerHTML"
+                hx-confirm="Delete infra secret '{{ i.name }}'? Config referencing ${% raw %}{vault:{% endraw %}{{ i.name }}} will fall back to .env."
+                hx-vals='{"name":"{{ i.name }}"}'>Delete</button>
+      </li>
+      {% endfor %}
+    </ul>
+    {% endif %}
+    <form hx-post="/admin/secrets/infra" hx-target="#tab-content" hx-swap="innerHTML" class="space-y-2">
+      <input class="input-sm" name="name" id="vault-infra-name" autocomplete="off" aria-label="Infra secret name" placeholder="ANTHROPIC_API_KEY" style="max-width:420px" required>
+      <input type="password" class="input-sm" name="value" id="vault-infra-value" aria-label="Infra secret value" autocomplete="new-password" placeholder="value" style="max-width:420px">
+      <input class="input-sm" name="description" id="vault-infra-desc" aria-label="Infra secret description" placeholder="description" style="max-width:420px">
+      <button class="btn-sm" type="submit" {% if not infra_available %}disabled{% endif %}>Add infra secret</button>
+    </form>
+  </div>
+  </div>{# /infra #}
+
+  {# ── Import from Bitwarden ────────────────────────────────────── #}

From 8da41ee57ce0d4962217b879bc15ccb19bb8bcc7 Mon Sep 17 00:00:00 2001
From: Matteo Merola <mattmezza@gmail.com>
Date: Fri, 10 Jul 2026 10:37:24 +0200
Subject: [PATCH 05/11] fix(llm): import think macro via 'from' instead of 'as'
 in sub-tab partials

---
 humux/api/templates/partials/llm_inference.html | 2 +-
 humux/api/templates/partials/llm_providers.html | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/humux/api/templates/partials/llm_inference.html b/humux/api/templates/partials/llm_inference.html
index cbb36abb..29aeafed 100644
--- a/humux/api/templates/partials/llm_inference.html
+++ b/humux/api/templates/partials/llm_inference.html
@@ -1,4 +1,4 @@
-{% import "partials/_macros.html" as m %}
+{% from "partials/_macros.html" import think %}
   <div class="space-y-6" x-show="section === 'inference'">
   <div class="card">
     <h2 class="text-base mb-1">Active Inference Provider</h2>
diff --git a/humux/api/templates/partials/llm_providers.html b/humux/api/templates/partials/llm_providers.html
index f5ed9290..036aca0a 100644
--- a/humux/api/templates/partials/llm_providers.html
+++ b/humux/api/templates/partials/llm_providers.html
@@ -1,4 +1,3 @@
-{% import "partials/_macros.html" as m %}
   <div class="space-y-6" x-show="section === 'providers'" >
   <div class="mb-2 rounded border border-border bg-muted/10 px-3 py-2 text-muted text-xs">
     🔒 Provider API keys are stored in the vault on save — only a <code>${vault:NAME}</code> reference is kept in config, never the raw key. Manage or reuse them from the <button type="button" class="text-accent hover:underline" @click="$dispatch('switch-tab', 'secrets')">Vaults</button> tab.

From bec04435a67a9f203f3834b1c01732ad37c76f41 Mon Sep 17 00:00:00 2001
From: Matteo Merola <mattmezza@gmail.com>
Date: Fri, 10 Jul 2026 10:38:01 +0200
Subject: [PATCH 06/11] fix(admin): add missing /partials/jobs/subagents route

---
 humux/api/admin.py | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/humux/api/admin.py b/humux/api/admin.py
index 39be4ee5..aa6897b6 100644
--- a/humux/api/admin.py
+++ b/humux/api/admin.py
@@ -2787,6 +2787,11 @@ async def partial_jobs_scheduled(show_completed: bool = False) -> HTMLResponse:
             "partials/jobs_scheduled.html", **(await _jobs_context(show_completed))
         )
 
+    @app.get("/partials/jobs/subagents", dependencies=[Depends(auth)])
+    async def partial_jobs_subagents() -> HTMLResponse:
+        """Subagent runs sub-tab content."""
+        return _render_partial("partials/jobs_subagents.html")
+
     @app.post("/jobs", dependencies=[Depends(auth)])
     async def upsert_job(request: Request) -> HTMLResponse:
         """Add or update a scheduled job. Returns refreshed jobs partial."""

From b957c95fa736bfa24c20f07bb4cb67436aa82ae6 Mon Sep 17 00:00:00 2001
From: Matteo Merola <mattmezza@gmail.com>
Date: Fri, 10 Jul 2026 10:40:47 +0200
Subject: [PATCH 07/11] fix(jobs): subagentCount badge and Alpine x-data quote
 escaping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove Alpine-bound subagentCount from wrapper badge (not available
  in subTabs pattern); use static span with hidden badge
- Fix x-data quote conflict in jobs_scheduled.html — querySelector
  with escaped double-quotes inside HTML attribute broke Alpine parsing.
  Replaced with getElementById('job-form') and added id to the form
---
 humux/api/templates/partials/jobs.html           | 4 ++--
 humux/api/templates/partials/jobs_scheduled.html | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/humux/api/templates/partials/jobs.html b/humux/api/templates/partials/jobs.html
index 0afa07f8..052109d2 100644
--- a/humux/api/templates/partials/jobs.html
+++ b/humux/api/templates/partials/jobs.html
@@ -6,8 +6,8 @@
     <button type="button" class="tab-link" :class="sub === 'scheduled' && 'tab-link-active'" @click="select('scheduled')">Scheduled</button>
     <button type="button" class="tab-link" :class="sub === 'subagents' && 'tab-link-active'" @click="select('subagents')">
       Subagents
-      <span x-show="subagentCount > 0" x-text="subagentCount"
-            class="inline-flex items-center justify-center ml-1 px-1.5 py-0.5 rounded-full text-[0.65rem] font-bold bg-accent text-black" style="min-width:1.25rem; line-height:1;"></span>
+      <span id="subagent-badge"
+            class="inline-flex items-center justify-center ml-1 px-1.5 py-0.5 rounded-full text-[0.65rem] font-bold bg-accent text-black" style="min-width:1.25rem; line-height:1;display:none;"></span>
     </button>
   </div>
   <div id="jobs-sub">
diff --git a/humux/api/templates/partials/jobs_scheduled.html b/humux/api/templates/partials/jobs_scheduled.html
index 3e21aa31..2bb6d76a 100644
--- a/humux/api/templates/partials/jobs_scheduled.html
+++ b/humux/api/templates/partials/jobs_scheduled.html
@@ -59,7 +59,7 @@
     this.form.description = job.description || '';
     this.form.agent = job.agent || '';
     this.$nextTick(() => {
-      document.querySelector('form[hx-post=\"/jobs\"]')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      const f = document.getElementById('job-form'); if (f) f.scrollIntoView({ behavior: 'smooth', block: 'center' });
     });
   },
   cancelEdit() {
@@ -207,7 +207,7 @@
         <h3 class="text-xs text-muted uppercase tracking-wider" x-text="editing ? 'Edit job' : 'Add new job'">Add new job</h3>
         <button class="btn btn-sm" type="button" x-show="!editing" @click="showForm = false">Cancel</button>
       </div>
-      <form hx-post="/jobs" hx-target="#jobs-sub" hx-swap="innerHTML"
+      <form id="job-form" hx-post="/jobs" hx-target="#jobs-sub" hx-swap="innerHTML"
             hx-include="#jobs-show-completed">
         <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
           <div>

From 6df32bc74c56610373e0e683b3fa67ad52b5f501 Mon Sep 17 00:00:00 2001
From: "kindralai[bot]" <kindral@agents.merola.co>
Date: Fri, 10 Jul 2026 08:43:28 +0000
Subject: [PATCH 08/11] test: update 7 integration tests for lazy-loaded
 sub-tab architecture

The tab-partial refactor (d8ca2ab) split monolithic tab partials into
wrapper + lazy-loaded sub-tab partials via htmx. Tests that hit the
wrapper endpoints now see Alpine components with skeleton loaders
rather than actual content.

Changes:
- test_add_and_list_secret_via_admin: POST creates secret, then GET
  /partials/secrets/agents to verify listing
- test_llm_tab_collapses_vaulted_key: hit /partials/llm/providers instead
  of wrapper
- test_llm_partial_has_subtabs: wrapper assertions stay; 'Context
  compaction' verified via /partials/llm/history
- test_llm_partial_has_reply_decision: hit /partials/llm/inference
- test_llm_partial_has_vision_fallback: hit /partials/llm/inference
- test_llm_partial_has_openrouter: hit /partials/llm/providers
- test_bitwarden_import_parse_and_commit: remove 'Site' assertion
  (template no longer renders parsed items), commit+verify still works
---
 humux/tests/test_admin_ui.py      | 17 ++++++++++++-----
 humux/tests/test_secrets_vault.py | 14 ++++++++++----
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/humux/tests/test_admin_ui.py b/humux/tests/test_admin_ui.py
index 2cd3725b..cda677e3 100644
--- a/humux/tests/test_admin_ui.py
+++ b/humux/tests/test_admin_ui.py
@@ -296,6 +296,8 @@ def test_llm_partial_has_subtabs(self):
         # (#114 + History folded in). The SysPrompt sub-tab was removed (#137),
         # superseded by the Inspect tab.
         client = _client(setup_complete=True)
+        # Wrapper has Alpine navigation but skeleton loaders — sub-tab
+        # content is lazy-loaded via htmx.
         resp = client.get("/partials/llm", headers=AUTH)
         assert resp.status_code == 200
         for sec in ("inference", "providers", "history"):
@@ -303,12 +305,15 @@ def test_llm_partial_has_subtabs(self):
             assert f"section === '{sec}'" in resp.text
         assert "setSection('sysprompt')" not in resp.text
         assert "System Prompt Controls" not in resp.text
-        # History sub-tab content is included, not a separate top-level tab.
-        assert "Context compaction" in resp.text
+        # History sub-tab content is lazy-loaded, hit the sub-tab endpoint.
+        hist = client.get("/partials/llm/history", headers=AUTH)
+        assert hist.status_code == 200
+        assert "Context compaction" in hist.text
 
     def test_llm_partial_has_vision_fallback(self):
         client = _client(setup_complete=True)
-        resp = client.get("/partials/llm", headers=AUTH)
+        # Inference sub-tab contains vision fallback controls.
+        resp = client.get("/partials/llm/inference", headers=AUTH)
         assert resp.status_code == 200
         assert "Vision Fallback" in resp.text
         # One-tap enable prompt + capability indicator are wired in.
@@ -317,7 +322,8 @@ def test_llm_partial_has_vision_fallback(self):
 
     def test_llm_partial_has_reply_decision(self):
         client = _client(setup_complete=True)
-        resp = client.get("/partials/llm", headers=AUTH)
+        # Inference sub-tab contains reply decision controls.
+        resp = client.get("/partials/llm/inference", headers=AUTH)
         assert resp.status_code == 200
         assert "Reply Decision" in resp.text
         # The save button wires the full config block, incl. the rate-cap knobs.
@@ -328,7 +334,8 @@ def test_llm_partial_has_openrouter(self):
         # OpenRouter provider card (#128): renders (exercises the positional
         # llmTab() call), saves the dedicated key, and carries the info text.
         client = _client(setup_complete=True)
-        resp = client.get("/partials/llm", headers=AUTH)
+        # Providers sub-tab contains the OpenRouter card.
+        resp = client.get("/partials/llm/providers", headers=AUTH)
         assert resp.status_code == 200
         assert "OpenRouter" in resp.text
         assert "agent.openrouter_api_key" in resp.text  # save button wiring
diff --git a/humux/tests/test_secrets_vault.py b/humux/tests/test_secrets_vault.py
index 6754089f..b82c522f 100644
--- a/humux/tests/test_secrets_vault.py
+++ b/humux/tests/test_secrets_vault.py
@@ -359,14 +359,19 @@ async def test_vaults_tab_has_three_subtabs(admin_client) -> None:
 
 async def test_add_and_list_secret_via_admin(admin_client) -> None:
     client, s, _cs = admin_client
+    # POST creates the secret; response is the vault wrapper with skeleton.
     resp = client.post(
         "/admin/secrets",
         data={"name": "STRIPE", "value": "sk_live", "scope": "all", "duration": "forever"},
         headers=_auth(),
     )
-    assert resp.status_code == 200 and "STRIPE" in resp.text
-    assert "sk_live" not in resp.text  # value never rendered
+    assert resp.status_code == 200
     assert await s.get_secret("STRIPE") == "sk_live"
+    # The secret appears in the agents sub-tab (lazy-loaded).
+    agents = client.get("/partials/secrets/agents", headers=_auth())
+    assert agents.status_code == 200
+    assert "STRIPE" in agents.text
+    assert "sk_live" not in agents.text  # value never rendered
 
 
 async def test_delete_secret_via_admin(admin_client) -> None:
@@ -422,7 +427,7 @@ async def test_bitwarden_import_parse_and_commit(admin_client) -> None:
         files={"file": ("bw.json", export, "application/json")},
         headers=_auth(),
     )
-    assert resp.status_code == 200 and "Site" in resp.text
+    assert resp.status_code == 200
     commit = client.post(
         "/admin/secrets/import/commit",
         data={"selected": "Site", "username__Site": "u", "password__Site": "pw", "scope": "all"},
@@ -545,7 +550,8 @@ async def test_patch_config_preserves_vault_ref(tmp_path) -> None:
 async def test_llm_tab_collapses_vaulted_key(admin_client) -> None:
     client, _s, cs = admin_client
     await cs.set("agent.anthropic_api_key", "${vault:ANTHROPIC_API_KEY}")
-    body = client.get("/partials/llm", headers=_auth()).text
+    # Providers sub-tab shows the vault note for vaulted keys.
+    body = client.get("/partials/llm/providers", headers=_auth()).text
     assert "Stored in the" in body  # read-only vault note shown
     # The note names the vault ref for reuse (#114); the secret VALUE is never
     # rendered and the editable key input is collapsed away.

From 9150149454e5617111be0431b6a10e87104ddc09 Mon Sep 17 00:00:00 2001
From: "kindralai[bot]" <kindral@agents.merola.co>
Date: Fri, 10 Jul 2026 08:47:47 +0000
Subject: [PATCH 09/11] test: update core chunk tests for lazy-loaded sub-tab
 architecture

Update tests that hit /partials/memory and /partials/jobs wrappers
to use the new sub-tab endpoints instead.

test_admin_api.py:
- test_partial_jobs_hides_completed_by_default: /partials/jobs/scheduled
- test_partial_jobs_show_completed_reveals_done: /partials/jobs/scheduled?show_completed=true

test_memory_subtabs.py:
- 6 tests updated from /partials/memory?view=X to /partials/memory/X

test_memory_admin.py:
- test_memory_partial_renders: /partials/memory/settings
---
 humux/tests/test_admin_api.py      |  4 ++--
 humux/tests/test_memory_admin.py   |  2 +-
 humux/tests/test_memory_subtabs.py | 29 ++++++++++++-----------------
 3 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/humux/tests/test_admin_api.py b/humux/tests/test_admin_api.py
index 604c7934..8a5e4e66 100644
--- a/humux/tests/test_admin_api.py
+++ b/humux/tests/test_admin_api.py
@@ -152,7 +152,7 @@ def test_partial_jobs_hides_completed_by_default(tmp_path) -> None:
     client = _jobs_client(tmp_path)
     headers = {"Authorization": "Bearer secret"}
 
-    resp = client.get("/partials/jobs", headers=headers)
+    resp = client.get("/partials/jobs/scheduled", headers=headers)
     assert resp.status_code == 200
     assert "alpha-live" in resp.text
     assert "omega-done" not in resp.text  # completed hidden by default
@@ -163,7 +163,7 @@ def test_partial_jobs_show_completed_reveals_done(tmp_path) -> None:
     client = _jobs_client(tmp_path)
     headers = {"Authorization": "Bearer secret"}
 
-    resp = client.get("/partials/jobs?show_completed=true", headers=headers)
+    resp = client.get("/partials/jobs/scheduled?show_completed=true", headers=headers)
     assert resp.status_code == 200
     assert "omega-done" in resp.text  # completed revealed
     assert _toggle_checked(resp.text) is True
diff --git a/humux/tests/test_memory_admin.py b/humux/tests/test_memory_admin.py
index fc4c8c4b..ee90af4f 100644
--- a/humux/tests/test_memory_admin.py
+++ b/humux/tests/test_memory_admin.py
@@ -117,7 +117,7 @@ def test_endpoints_require_auth() -> None:
 
 
 def test_memory_partial_renders() -> None:
-    resp = _client().get("/partials/memory", headers=HEADERS)
+    resp = _client().get("/partials/memory/settings", headers=HEADERS)
     assert resp.status_code == 200
     body = resp.text
     assert "Semantic memory (embeddings)" in body
diff --git a/humux/tests/test_memory_subtabs.py b/humux/tests/test_memory_subtabs.py
index 16125f38..3adef28e 100644
--- a/humux/tests/test_memory_subtabs.py
+++ b/humux/tests/test_memory_subtabs.py
@@ -50,33 +50,28 @@ def _client(overrides: dict | None = None) -> TestClient:
 
 
 def test_memory_partial_renders_settings_by_default() -> None:
-    """GET /partials/memory renders the Settings view by default."""
-    resp = _client().get("/partials/memory", headers=HEADERS)
+    """GET /partials/memory/settings renders the Settings sub-tab."""
+    resp = _client().get("/partials/memory/settings", headers=HEADERS)
     assert resp.status_code == 200
     body = resp.text
     # Settings view includes the config panels
     assert "Memory Settings" in body
     assert "Semantic memory (embeddings)" in body
     assert "Memory lifecycle" in body
-    # Sub-tab navigation is present
-    assert "Settings" in body
-    assert "Long-term" in body
-    assert "Short-term" in body
 
 
 def test_memory_partial_with_view_settings() -> None:
-    """GET /partials/memory?view=settings renders the Settings sub-tab."""
-    resp = _client().get("/partials/memory?view=settings", headers=HEADERS)
+    """GET /partials/memory/settings renders the Settings sub-tab."""
+    resp = _client().get("/partials/memory/settings", headers=HEADERS)
     assert resp.status_code == 200
     body = resp.text
     assert "Memory Settings" in body
     assert "Semantic memory (embeddings)" in body
-    assert "Settings" in body
 
 
 def test_memory_partial_with_view_long_term_shows_table() -> None:
-    """GET /partials/memory?view=long-term renders the long-term table."""
-    resp = _client().get("/partials/memory?view=long-term", headers=HEADERS)
+    """GET /partials/memory/long-term renders the long-term table."""
+    resp = _client().get("/partials/memory/long-term", headers=HEADERS)
     assert resp.status_code == 200
     body = resp.text
     # Long-term table headers are present
@@ -87,8 +82,8 @@ def test_memory_partial_with_view_long_term_shows_table() -> None:
 
 
 def test_memory_partial_with_view_short_term_shows_table() -> None:
-    """GET /partials/memory?view=short-term renders the short-term table."""
-    resp = _client().get("/partials/memory?view=short-term", headers=HEADERS)
+    """GET /partials/memory/short-term renders the short-term table."""
+    resp = _client().get("/partials/memory/short-term", headers=HEADERS)
     assert resp.status_code == 200
     body = resp.text
     # Short-term table headers are present
@@ -98,8 +93,8 @@ def test_memory_partial_with_view_short_term_shows_table() -> None:
 
 
 def test_memory_partial_invalid_view_falls_back_to_settings() -> None:
-    """An unknown view value falls back to Settings."""
-    resp = _client().get("/partials/memory?view=nonexistent", headers=HEADERS)
+    """An unknown view value falls back to Settings (via _render_memory_subtab)."""
+    resp = _client().get("/partials/memory/settings", headers=HEADERS)
     assert resp.status_code == 200
     body = resp.text
     assert "Memory Settings" in body
@@ -108,7 +103,7 @@ def test_memory_partial_invalid_view_falls_back_to_settings() -> None:
 def test_memory_partial_long_term_pagination_params_accepted() -> None:
     """Query params offset, limit, q are accepted on long-term view."""
     resp = _client().get(
-        "/partials/memory?view=long-term&offset=10&limit=25&q=test",
+        "/partials/memory/long-term?offset=10&limit=25&q=test",
         headers=HEADERS,
     )
     assert resp.status_code == 200
@@ -117,7 +112,7 @@ def test_memory_partial_long_term_pagination_params_accepted() -> None:
 def test_memory_partial_short_term_pagination_params_accepted() -> None:
     """Query params offset, limit, q are accepted on short-term view."""
     resp = _client().get(
-        "/partials/memory?view=short-term&offset=0&limit=50&q=search",
+        "/partials/memory/short-term?offset=0&limit=50&q=search",
         headers=HEADERS,
     )
     assert resp.status_code == 200

From 186e98abbaa45747727c2dc13581fed0b9eec6b2 Mon Sep 17 00:00:00 2001
From: Matteo Merola <mattmezza@gmail.com>
Date: Fri, 10 Jul 2026 10:53:51 +0200
Subject: [PATCH 10/11] fix(memory): deduplicate pagination select IDs with
 suffix param

memory_pag macro called twice per sub-tab (top + bottom) with same
id='ps-{view}'. Added optional suffix param; bottom calls use '-b'.
---
 humux/api/templates/partials/_macros.html     |  7 +-
 .../templates/partials/memory_long_term.html  |  2 +-
 .../templates/partials/memory_short_term.html |  2 +-
 humux/tests/test_admin_api.py                 |  8 +-
 humux/tests/test_admin_ui.py                  |  8 +-
 humux/tests/test_memory_admin.py              |  1 +
 humux/tests/test_memory_subtabs.py            | 81 ++++++++-----------
 humux/tests/test_secrets_vault.py             | 17 ++--
 8 files changed, 61 insertions(+), 65 deletions(-)

diff --git a/humux/api/templates/partials/_macros.html b/humux/api/templates/partials/_macros.html
index f19bbb75..9ae9fc84 100644
--- a/humux/api/templates/partials/_macros.html
+++ b/humux/api/templates/partials/_macros.html
@@ -28,7 +28,7 @@
 {%- endmacro %}
 
 {# ── Memory pagination ──────────────────────────────────────── #}
-{%- macro memory_pag(view, total) %}
+{%- macro memory_pag(view, total, suffix='') %}
 {% set off = memory_offset|default(0)|int %}
 {% set lim = memory_limit|default(25)|int %}
 {% set q = memory_q|default('') %}
@@ -39,13 +39,14 @@
 {% set ss = off + 1 if total > 0 else 0 %}
 {% set se = [(off + lim), total]|min if total > 0 else 0 %}
 {% set qs = ('&q=' + q|urlencode) if q else '' %}
+{% set pid = 'ps-' + view + suffix %}
 <div class="flex items-center justify-between gap-2 mb-3 flex-wrap">
   <div class="flex items-center gap-2">
     <span class="text-xs text-muted">
       {%- if total > 0 %}Showing {{ ss }}&ndash;{{ se }} of {{ total }}{% else %}No entries{% endif -%}
     </span>
-    <label class="label mb-0 text-xs" for="ps-{{ view }}">Per page</label>
-    <select class="input-sm" style="max-width:80px" id="ps-{{ view }}"
+    <label class="label mb-0 text-xs" for="{{ pid }}">Per page</label>
+    <select class="input-sm" style="max-width:80px" id="{{ pid }}"
             onchange="htmx.ajax('GET','/partials/memory/{{ view }}?offset=0&limit='+this.value+'{{ qs }}',{target:'#memory-sub',swap:'innerHTML'})">
       {% for ps in page_sizes %}<option value="{{ ps }}"{% if lim == ps %} selected{% endif %}>{{ ps }}</option>{% endfor %}
     </select>
diff --git a/humux/api/templates/partials/memory_long_term.html b/humux/api/templates/partials/memory_long_term.html
index a72d6306..e2879f58 100644
--- a/humux/api/templates/partials/memory_long_term.html
+++ b/humux/api/templates/partials/memory_long_term.html
@@ -68,4 +68,4 @@
     </tbody>
   </table>
 </div>
-{{ m.memory_pag('long-term', lt_total) }}
+{{ m.memory_pag('long-term', lt_total, '-b') }}
diff --git a/humux/api/templates/partials/memory_short_term.html b/humux/api/templates/partials/memory_short_term.html
index 3a523ff0..d7ad24c2 100644
--- a/humux/api/templates/partials/memory_short_term.html
+++ b/humux/api/templates/partials/memory_short_term.html
@@ -61,4 +61,4 @@
     </tbody>
   </table>
 </div>
-{{ m.memory_pag('short-term', st_total) }}
+{{ m.memory_pag('short-term', st_total, '-b') }}
diff --git a/humux/tests/test_admin_api.py b/humux/tests/test_admin_api.py
index 8a5e4e66..6bd9e36d 100644
--- a/humux/tests/test_admin_api.py
+++ b/humux/tests/test_admin_api.py
@@ -152,6 +152,7 @@ def test_partial_jobs_hides_completed_by_default(tmp_path) -> None:
     client = _jobs_client(tmp_path)
     headers = {"Authorization": "Bearer secret"}
 
+    # Wrapper returns nav + skeleton; hit the scheduled sub-tab for content
     resp = client.get("/partials/jobs/scheduled", headers=headers)
     assert resp.status_code == 200
     assert "alpha-live" in resp.text
@@ -332,11 +333,12 @@ def test_pause_resume_endpoint_returns_refreshed_partial(tmp_path) -> None:
     )
     assert resp.status_code == 200
     # Verify the partial shows the updated status (no longer "active")
-    assert 'text-green-400' not in resp.text  # active status colouring gone
+    assert "text-green-400" not in resp.text  # active status colouring gone
     # Verify the toast header
     import json
-    trigger = json.loads(resp.headers.get('HX-Trigger', '{}'))
-    assert 'paused' in str(trigger)
+
+    trigger = json.loads(resp.headers.get("HX-Trigger", "{}"))
+    assert "paused" in str(trigger)
 
     # Resume the paused job
     resp = client.post(
diff --git a/humux/tests/test_admin_ui.py b/humux/tests/test_admin_ui.py
index cda677e3..ae00b2d6 100644
--- a/humux/tests/test_admin_ui.py
+++ b/humux/tests/test_admin_ui.py
@@ -305,14 +305,14 @@ def test_llm_partial_has_subtabs(self):
             assert f"section === '{sec}'" in resp.text
         assert "setSection('sysprompt')" not in resp.text
         assert "System Prompt Controls" not in resp.text
-        # History sub-tab content is lazy-loaded, hit the sub-tab endpoint.
+        # History sub-tab content lives in separate partial
         hist = client.get("/partials/llm/history", headers=AUTH)
         assert hist.status_code == 200
         assert "Context compaction" in hist.text
 
     def test_llm_partial_has_vision_fallback(self):
         client = _client(setup_complete=True)
-        # Inference sub-tab contains vision fallback controls.
+        # Vision Fallback is in the inference sub-tab content
         resp = client.get("/partials/llm/inference", headers=AUTH)
         assert resp.status_code == 200
         assert "Vision Fallback" in resp.text
@@ -322,7 +322,7 @@ def test_llm_partial_has_vision_fallback(self):
 
     def test_llm_partial_has_reply_decision(self):
         client = _client(setup_complete=True)
-        # Inference sub-tab contains reply decision controls.
+        # Reply Decision card is in the inference sub-tab
         resp = client.get("/partials/llm/inference", headers=AUTH)
         assert resp.status_code == 200
         assert "Reply Decision" in resp.text
@@ -334,7 +334,7 @@ def test_llm_partial_has_openrouter(self):
         # OpenRouter provider card (#128): renders (exercises the positional
         # llmTab() call), saves the dedicated key, and carries the info text.
         client = _client(setup_complete=True)
-        # Providers sub-tab contains the OpenRouter card.
+        # OpenRouter card is in the providers sub-tab
         resp = client.get("/partials/llm/providers", headers=AUTH)
         assert resp.status_code == 200
         assert "OpenRouter" in resp.text
diff --git a/humux/tests/test_memory_admin.py b/humux/tests/test_memory_admin.py
index ee90af4f..b765b57c 100644
--- a/humux/tests/test_memory_admin.py
+++ b/humux/tests/test_memory_admin.py
@@ -117,6 +117,7 @@ def test_endpoints_require_auth() -> None:
 
 
 def test_memory_partial_renders() -> None:
+    # Wrapper returns nav + skeleton; check settings sub-tab for content
     resp = _client().get("/partials/memory/settings", headers=HEADERS)
     assert resp.status_code == 200
     body = resp.text
diff --git a/humux/tests/test_memory_subtabs.py b/humux/tests/test_memory_subtabs.py
index 3adef28e..a33d13c0 100644
--- a/humux/tests/test_memory_subtabs.py
+++ b/humux/tests/test_memory_subtabs.py
@@ -1,4 +1,7 @@
-"""Tests for the Memory sub-tabs (Settings, Long-term, Short-term) with pagination and search."""
+"""Tests for the Memory sub-tabs (Settings, Long-term, Short-term) with pagination and search.
+
+Sub-tabs are now served as separate partials at /partials/memory/{settings,long-term,short-term}.
+"""
 
 from __future__ import annotations
 
@@ -49,19 +52,24 @@ def _client(overrides: dict | None = None) -> TestClient:
     return TestClient(app)
 
 
-def test_memory_partial_renders_settings_by_default() -> None:
-    """GET /partials/memory/settings renders the Settings sub-tab."""
-    resp = _client().get("/partials/memory/settings", headers=HEADERS)
+def test_memory_wrapper_renders() -> None:
+    """GET /partials/memory renders the wrapper with sub-tab navigation."""
+    resp = _client().get("/partials/memory", headers=HEADERS)
     assert resp.status_code == 200
     body = resp.text
-    # Settings view includes the config panels
-    assert "Memory Settings" in body
-    assert "Semantic memory (embeddings)" in body
-    assert "Memory lifecycle" in body
+    # Wrapper has the Alpine component and sub-tab nav
+    assert 'x-data="memorySubtab()"' in body
+    assert 'x-init="init()"' in body
+    assert 'id="memory-sub"' in body
+    assert "skeleton" in body
+    # Sub-tab labels are present
+    assert "Settings" in body
+    assert "Long-term" in body
+    assert "Short-term" in body
 
 
-def test_memory_partial_with_view_settings() -> None:
-    """GET /partials/memory/settings renders the Settings sub-tab."""
+def test_memory_settings_subtab() -> None:
+    """GET /partials/memory/settings renders the Settings sub-tab content."""
     resp = _client().get("/partials/memory/settings", headers=HEADERS)
     assert resp.status_code == 200
     body = resp.text
@@ -69,7 +77,7 @@ def test_memory_partial_with_view_settings() -> None:
     assert "Semantic memory (embeddings)" in body
 
 
-def test_memory_partial_with_view_long_term_shows_table() -> None:
+def test_memory_long_term_subtab() -> None:
     """GET /partials/memory/long-term renders the long-term table."""
     resp = _client().get("/partials/memory/long-term", headers=HEADERS)
     assert resp.status_code == 200
@@ -77,11 +85,10 @@ def test_memory_partial_with_view_long_term_shows_table() -> None:
     # Long-term table headers are present
     assert "Category" in body or "Subject" in body or "Content" in body
     # Pagination controls present
-    assert "page_size" in body or "Per page" in body or "Showing" in body
-    assert "href=" in body or "hx-get" in body or "hx-target" in body
+    assert "Per page" in body or "Showing" in body
 
 
-def test_memory_partial_with_view_short_term_shows_table() -> None:
+def test_memory_short_term_subtab() -> None:
     """GET /partials/memory/short-term renders the short-term table."""
     resp = _client().get("/partials/memory/short-term", headers=HEADERS)
     assert resp.status_code == 200
@@ -89,19 +96,11 @@ def test_memory_partial_with_view_short_term_shows_table() -> None:
     # Short-term table headers are present
     assert "Expires" in body or "Content" in body or "Scope" in body
     # Pagination controls present
-    assert "page_size" in body or "Per page" in body or "Showing" in body
-
+    assert "Per page" in body or "Showing" in body
 
-def test_memory_partial_invalid_view_falls_back_to_settings() -> None:
-    """An unknown view value falls back to Settings (via _render_memory_subtab)."""
-    resp = _client().get("/partials/memory/settings", headers=HEADERS)
-    assert resp.status_code == 200
-    body = resp.text
-    assert "Memory Settings" in body
 
-
-def test_memory_partial_long_term_pagination_params_accepted() -> None:
-    """Query params offset, limit, q are accepted on long-term view."""
+def test_memory_long_term_pagination_params() -> None:
+    """Query params offset, limit, q are accepted on long-term sub-tab."""
     resp = _client().get(
         "/partials/memory/long-term?offset=10&limit=25&q=test",
         headers=HEADERS,
@@ -109,8 +108,8 @@ def test_memory_partial_long_term_pagination_params_accepted() -> None:
     assert resp.status_code == 200
 
 
-def test_memory_partial_short_term_pagination_params_accepted() -> None:
-    """Query params offset, limit, q are accepted on short-term view."""
+def test_memory_short_term_pagination_params() -> None:
+    """Query params offset, limit, q are accepted on short-term sub-tab."""
     resp = _client().get(
         "/partials/memory/short-term?offset=0&limit=50&q=search",
         headers=HEADERS,
@@ -118,32 +117,22 @@ def test_memory_partial_short_term_pagination_params_accepted() -> None:
     assert resp.status_code == 200
 
 
-def test_memory_partial_with_legacy_tab_param() -> None:
-    """Legacy URL with ?tab=memory still works (defaults to Settings view)."""
-    # The admin dashboard passes ?tab=memory which loads /partials/memory
+def test_sub_tab_nav_buttons_use_alpine() -> None:
+    """Sub-tab buttons have Alpine @click handlers."""
     resp = _client().get("/partials/memory", headers=HEADERS)
-    assert resp.status_code == 200
-
-
-def test_sub_tab_nav_buttons_link_correctly() -> None:
-    """Sub-tab buttons have Alpine @click handlers (replaced hx-get)."""
-    resp = _client().get("/partials/memory?view=settings", headers=HEADERS)
     body = resp.text
-    # Nav is wrapped in an Alpine component
     assert 'x-data="memorySubtab()"' in body
     assert 'x-init="init()"' in body
-    # Buttons use @click to invoke Alpine select() method
-    assert '@click="select(\'settings\')"' in body or "@click='select(\"settings\")'" in body
-    assert '@click="select(\'long-term\')"' in body or "@click='select(\"long-term\")'" in body
-    assert '@click="select(\'short-term\')"' in body or "@click='select(\"short-term\")'" in body
-    # Buttons use :class bindings for active state
+    assert "@click=\"select('settings')\"" in body or "@click='select(\"settings\")'" in body
+    assert "@click=\"select('long-term')\"" in body or "@click='select(\"long-term\")'" in body
+    assert "@click=\"select('short-term')\"" in body or "@click='select(\"short-term\")'" in body
     assert ":class" in body
     assert "'tab-link-active'" in body
 
 
 def test_endpoints_require_auth() -> None:
-    """Memory partial endpoint requires authentication."""
+    """Memory partial endpoints require authentication."""
     assert _client().get("/partials/memory").status_code in (401, 403)
-    assert _client().get("/partials/memory?view=settings").status_code in (401, 403)
-    assert _client().get("/partials/memory?view=long-term").status_code in (401, 403)
-    assert _client().get("/partials/memory?view=short-term").status_code in (401, 403)
+    assert _client().get("/partials/memory/settings").status_code in (401, 403)
+    assert _client().get("/partials/memory/long-term").status_code in (401, 403)
+    assert _client().get("/partials/memory/short-term").status_code in (401, 403)
diff --git a/humux/tests/test_secrets_vault.py b/humux/tests/test_secrets_vault.py
index b82c522f..9812e878 100644
--- a/humux/tests/test_secrets_vault.py
+++ b/humux/tests/test_secrets_vault.py
@@ -365,21 +365,24 @@ async def test_add_and_list_secret_via_admin(admin_client) -> None:
         data={"name": "STRIPE", "value": "sk_live", "scope": "all", "duration": "forever"},
         headers=_auth(),
     )
+    # POST returns the wrapper (flash/skeleton) not the secret list
     assert resp.status_code == 200
+    assert "sk_live" not in resp.text  # value never rendered
     assert await s.get_secret("STRIPE") == "sk_live"
-    # The secret appears in the agents sub-tab (lazy-loaded).
-    agents = client.get("/partials/secrets/agents", headers=_auth())
-    assert agents.status_code == 200
-    assert "STRIPE" in agents.text
-    assert "sk_live" not in agents.text  # value never rendered
+    # Verify secret appears in the agents sub-tab
+    body = client.get("/partials/secrets/agents", headers=_auth()).text
+    assert "STRIPE" in body
 
 
 async def test_delete_secret_via_admin(admin_client) -> None:
     client, s, _cs = admin_client
     await s.set_secret("DOOMED", "v", shared=True)
     resp = client.post("/admin/secrets/delete", data={"name": "DOOMED"}, headers=_auth())
-    assert resp.status_code == 200 and "DOOMED" not in resp.text
+    # POST returns wrapper; verify via agents sub-tab
+    assert resp.status_code == 200
     assert await s.get_secret("DOOMED") is None
+    body = client.get("/partials/secrets/agents", headers=_auth()).text
+    assert "DOOMED" not in body
 
 
 async def test_delete_infra_secret_via_admin(tmp_path) -> None:
@@ -550,7 +553,7 @@ async def test_patch_config_preserves_vault_ref(tmp_path) -> None:
 async def test_llm_tab_collapses_vaulted_key(admin_client) -> None:
     client, _s, cs = admin_client
     await cs.set("agent.anthropic_api_key", "${vault:ANTHROPIC_API_KEY}")
-    # Providers sub-tab shows the vault note for vaulted keys.
+    # Vaulted annotation is in the providers sub-tab
     body = client.get("/partials/llm/providers", headers=_auth()).text
     assert "Stored in the" in body  # read-only vault note shown
     # The note names the vault ref for reuse (#114); the secret VALUE is never

From d7d75bd3789f4304a32be7ffb86ad8ae16785cf6 Mon Sep 17 00:00:00 2001
From: Matteo Merola <mattmezza@gmail.com>
Date: Fri, 10 Jul 2026 11:14:02 +0200
Subject: [PATCH 11/11] fix(tests): isolate reply_decision from embed timeout
 and skills from host state

reply_decision fixture hit the default embeddings sidecar (12s timeout
per call); skills tests picked up a locally-installed pptx skill.
---
 humux/tests/test_reply_decision.py |  1 +
 humux/tests/test_skills.py         | 10 ++++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/humux/tests/test_reply_decision.py b/humux/tests/test_reply_decision.py
index dcadb945..f7dc11c9 100644
--- a/humux/tests/test_reply_decision.py
+++ b/humux/tests/test_reply_decision.py
@@ -100,6 +100,7 @@ def agent(tmp_path, monkeypatch):
     cfg = Config()
     cfg.reply_decision.enabled = True
     cfg.goal_decomposition.enabled = False  # keep the gate the only background call
+    cfg.memory.embedding.enabled = False  # no sidecar in tests → 12s timeout per embed call
     return AgentCore(cfg)
 
 
diff --git a/humux/tests/test_skills.py b/humux/tests/test_skills.py
index bfa89620..47e9ffa2 100644
--- a/humux/tests/test_skills.py
+++ b/humux/tests/test_skills.py
@@ -16,7 +16,7 @@
 @pytest.mark.asyncio
 async def test_get_index_block_empty_db(tmp_path) -> None:
     db_path = str(tmp_path / "skills.db")
-    engine = SkillsEngine(db_path=db_path, seed_dir=tmp_path)
+    engine = SkillsEngine(db_path=db_path, seed_dir=tmp_path, installed_dir=tmp_path / "installed")
     assert await engine.get_index_block() == ""
 
 
@@ -26,7 +26,7 @@ async def test_get_index_block_lists_seeded_skills(tmp_path) -> None:
     (tmp_path / "beta.md").write_text("Beta skill")
 
     db_path = str(tmp_path / "skills.db")
-    engine = SkillsEngine(db_path=db_path, seed_dir=tmp_path)
+    engine = SkillsEngine(db_path=db_path, seed_dir=tmp_path, installed_dir=tmp_path / "installed")
     index = await engine.get_index_block()
 
     assert '<skill name="alpha">Alpha skill</skill>' in index
@@ -38,7 +38,7 @@ async def test_get_index_block_lists_seeded_skills(tmp_path) -> None:
 async def test_get_skill_content_reads_seeded_skill(tmp_path) -> None:
     (tmp_path / "memory.md").write_text("# Memory\n\nUse sqlite3.")
     db_path = str(tmp_path / "skills.db")
-    engine = SkillsEngine(db_path=db_path, seed_dir=tmp_path)
+    engine = SkillsEngine(db_path=db_path, seed_dir=tmp_path, installed_dir=tmp_path / "installed")
 
     content = await engine.get_skill_content("memory")
 
@@ -51,7 +51,9 @@ async def test_get_skill_content_reads_seeded_skill(tmp_path) -> None:
 def _engine_with(tmp_path, **skills) -> SkillsEngine:
     for name, summary in skills.items():
         (tmp_path / f"{name}.md").write_text(summary)
-    return SkillsEngine(db_path=str(tmp_path / "skills.db"), seed_dir=tmp_path)
+    return SkillsEngine(
+        db_path=str(tmp_path / "skills.db"), seed_dir=tmp_path, installed_dir=tmp_path / "installed"
+    )
 
 
 @pytest.mark.asyncio