superlocalmemory 4.0.5 → 4.0.7

package/src/superlocalmemory/summaries/session_summary.py

@@ -0,0 +1,307 @@
+# Copyright (c) 2026 Varun Pratap Bhardwaj / Qualixar
+# Licensed under AGPL-3.0-or-later - see LICENSE file
+# Part of SuperLocalMemory V3 | https://qualixar.com | https://varunpratap.com
+
+"""Session Summary — issue #113 bounded summary.
+
+CRITICAL DATA HONESTY NOTE
+---------------------------
+On a real 3,294-fact store, only 127 facts (3.9%) carry a session_id.
+A Session Summary that presents itself as "everything you did this session"
+while silently covering 4% of the facts is the same overclaiming Wave 4
+removed from brain/truth.py.
+
+Coverage is ALWAYS disclosed.  If the session has too few facts to summarise
+meaningfully we say so; we never silently return partial data as complete.
+
+DETERMINISTIC FALLBACK IS MANDATORY
+-------------------------------------
+Mode A users have no LLM at all.  Mode B/C users lose theirs whenever Ollama
+or the network is down.  Every call to generate_session_summary() MUST return
+a SummaryResult.  It may say the data is insufficient; it may never return
+None or an empty result.  The extractive fallback path is always active.
+
+HOT PATH EXCLUSION
+-------------------
+This module must NEVER be imported from core/recall_pipeline.py or
+core/store_pipeline.py.  Summary generation performs multi-table reads and
+optional LLM calls.  It belongs in background maintenance or on explicit
+user request only.
+"""
+
+from __future__ import annotations
+
+import logging
+import sqlite3
+from datetime import date, timezone
+from pathlib import Path
+
+from .base import (
+    COVERAGE_FULL,
+    COVERAGE_INSUFFICIENT,
+    COVERAGE_NO_SESSION,
+    COVERAGE_PARTIAL,
+    COVERAGE_UNAVAILABLE,
+    GENERATED_BY_EXTRACTIVE,
+    GENERATED_BY_LLM_B,
+    GENERATED_BY_LLM_C,
+    SummaryResult,
+    get_mode_str,
+)
+
+logger = logging.getLogger("superlocalmemory.summaries.session")
+
+# Minimum number of session facts to attempt a meaningful summary.
+# Below this threshold we return coverage=insufficient and a stub.
+_MIN_FACTS = 3
+
+# Maximum facts to include in the content body (extractive mode).
+_BODY_FACTS = 7
+
+# Maximum character length for a single fact in the body.
+_MAX_FACT_CHARS = 250
+
+
+def generate_session_summary(
+    db_path: str | Path,
+    session_id: str,
+    profile_id: str = "default",
+    config: object | None = None,
+) -> SummaryResult:
+    """Generate a Session Summary for a specific session.
+
+    COVERAGE DISCLOSURE: session data is sparse on real stores (~3.9% of
+    facts carry a session_id).  The returned SummaryResult.coverage is always
+    set to an accurate value — never "full" unless the session is truly
+    complete.
+
+    Args:
+        db_path:    Path to memory.db.
+        session_id: The session identifier (atomic_facts.session_id).
+        profile_id: Profile scope — never mix profiles.
+        config:     Optional SLMConfig for LLM mode (B/C).  None = Mode A
+                    (extractive only, always deterministic).
+
+    Returns:
+        SummaryResult with source_fact_ids for every contributing fact.
+        Never returns None.
+
+    Note:
+        This function is NOT on the hot path.  It belongs in background
+        maintenance or on explicit user request, never inside recall or store.
+    """
+    db_path = Path(db_path)
+
+    # ── query ────────────────────────────────────────────────────────────────
+    try:
+        conn = sqlite3.connect(str(db_path), timeout=5.0)
+        conn.row_factory = sqlite3.Row
+        conn.execute("PRAGMA query_only=ON")
+        try:
+            rows = conn.execute(
+                """
+                SELECT fact_id, content, created_at, importance, lifecycle
+                FROM   atomic_facts
+                WHERE  profile_id  = ?
+                  AND  session_id  = ?
+                  AND  lifecycle  != 'archived'
+                ORDER  BY importance DESC, created_at ASC
+                """,
+                (profile_id, session_id),
+            ).fetchall()
+        finally:
+            conn.close()
+    except Exception as exc:
+        logger.warning("session summary query failed for %s: %s", session_id, exc)
+        return SummaryResult(
+            kind="session",
+            profile_id=profile_id,
+            content=(
+                f"Session summary for '{session_id}' is unavailable: "
+                f"data access error."
+            ),
+            source_fact_ids=[],
+            coverage=COVERAGE_UNAVAILABLE,
+            generated_by=GENERATED_BY_EXTRACTIVE,
+            metadata={"session_id": session_id, "error": str(exc)},
+        )
+
+    # ── coverage decision ─────────────────────────────────────────────────────
+    if not rows:
+        return SummaryResult(
+            kind="session",
+            profile_id=profile_id,
+            content=(
+                f"No facts found for session '{session_id}'.  "
+                f"Note: only a small fraction of facts carry a session_id "
+                f"on the current store — coverage is inherently partial."
+            ),
+            source_fact_ids=[],
+            coverage=COVERAGE_NO_SESSION,
+            generated_by=GENERATED_BY_EXTRACTIVE,
+            metadata={"session_id": session_id, "fact_count": 0},
+        )
+
+    facts = [dict(r) for r in rows]
+    source_fact_ids = [f["fact_id"] for f in facts]
+    fact_count = len(facts)
+
+    if fact_count < _MIN_FACTS:
+        coverage = COVERAGE_INSUFFICIENT
+    else:
+        # Session summaries are structurally partial: they cover only the facts
+        # that happened to carry a session_id.  On a real store that is ~3.9%
+        # of the corpus.  Reporting "full" would be dishonest.
+        coverage = COVERAGE_PARTIAL
+
+    # ── extractive summary (deterministic, always available) ──────────────────
+    extractive_content = _build_extractive_content(session_id, facts, fact_count)
+
+    # ── LLM enrichment (optional) ─────────────────────────────────────────────
+    mode = get_mode_str(config)
+    if fact_count >= _MIN_FACTS and mode in ("b", "c"):
+        llm_content, llm_mode = _try_llm(
+            f"Summarise the key activities in session {session_id}",
+            facts,
+            config,
+            mode,
+        )
+        if llm_content:
+            return SummaryResult(
+                kind="session",
+                profile_id=profile_id,
+                content=llm_content,
+                source_fact_ids=source_fact_ids,
+                coverage=coverage,
+                generated_by=llm_mode,
+                metadata={"session_id": session_id, "fact_count": fact_count},
+            )
+
+    return SummaryResult(
+        kind="session",
+        profile_id=profile_id,
+        content=extractive_content,
+        source_fact_ids=source_fact_ids,
+        coverage=coverage,
+        generated_by=GENERATED_BY_EXTRACTIVE,
+        metadata={"session_id": session_id, "fact_count": fact_count},
+    )
+
+
+# ── helpers ──────────────────────────────────────────────────────────────────
+
+def _build_extractive_content(
+    session_id: str,
+    facts: list[dict],
+    fact_count: int,
+) -> str:
+    """Build a deterministic extractive summary from session facts.
+
+    Coverage is disclosed in the header.  Top facts by importance are listed.
+    This is the fallback path — it must never fail or return an empty string.
+    """
+    lines = [
+        f"Session: {session_id}",
+        f"Facts recorded: {fact_count}",
+        f"Coverage: partial (session facts are a subset of the full store)",
+        "",
+        "Top recorded facts:",
+    ]
+    for f in facts[:_BODY_FACTS]:
+        content = f.get("content", "")
+        if len(content) > _MAX_FACT_CHARS:
+            content = content[:_MAX_FACT_CHARS - 3] + "..."
+        lines.append(f"  - {content}")
+    if fact_count > _BODY_FACTS:
+        lines.append(f"  ... and {fact_count - _BODY_FACTS} more facts.")
+    return "\n".join(lines)
+
+
+def _try_llm(
+    prompt: str,
+    facts: list[dict],
+    config: object | None,
+    mode: str,
+) -> tuple[str | None, str]:
+    """Attempt LLM summarisation.  Returns (content, generated_by) or (None, extractive)."""
+    if mode == "c":
+        result = _call_cloud_llm(prompt, facts, config)
+        if result:
+            return result, GENERATED_BY_LLM_C
+        # fall through to Mode B
+    if mode in ("b", "c"):
+        result = _call_ollama(prompt, facts, config)
+        if result:
+            return result, GENERATED_BY_LLM_B
+    return None, GENERATED_BY_EXTRACTIVE
+
+
+def _call_ollama(
+    prompt: str,
+    facts: list[dict],
+    config: object | None,
+) -> str | None:
+    """Mode B: call Ollama.  Returns None on any failure."""
+    try:
+        import json
+        import urllib.request
+
+        api_base = "http://localhost:11434"
+        model = "llama3.2"
+        timeout = 30
+        if config and hasattr(config, "llm"):
+            api_base = getattr(config.llm, "api_base", api_base) or api_base
+            model = getattr(config.llm, "model", model) or model
+            timeout = (
+                getattr(config.llm, "timeout_seconds", None)
+                or getattr(config.llm, "timeout", None)
+                or timeout
+            )
+
+        fact_texts = "\n".join(f"- {f['content']}" for f in facts[:10])
+        full_prompt = f"{prompt}\n\nFacts:\n{fact_texts}\n\nRespond in 2-4 sentences."
+        payload = json.dumps({
+            "model": model,
+            "prompt": full_prompt,
+            "stream": False,
+            "options": {"num_predict": 200},
+        }).encode()
+        req = urllib.request.Request(
+            f"{api_base}/api/generate",
+            data=payload,
+            headers={"Content-Type": "application/json"},
+        )
+        resp = urllib.request.urlopen(req, timeout=timeout)
+        data = json.loads(resp.read().decode())
+        text = data.get("response", "").strip()
+        return text if text and len(text) > 20 else None
+    except Exception as exc:
+        logger.debug("Ollama session summary failed: %s", exc)
+        return None
+
+
+def _call_cloud_llm(
+    prompt: str,
+    facts: list[dict],
+    config: object | None,
+) -> str | None:
+    """Mode C: call the configured cloud LLM.  Returns None on any failure."""
+    if not config or not hasattr(config, "llm"):
+        return None
+    try:
+        from superlocalmemory.llm.backbone import LLMBackbone
+        llm = LLMBackbone(config.llm)
+        if not llm.is_available():
+            return None
+        fact_texts = "\n".join(f"- {f['content']}" for f in facts[:10])
+        full_prompt = f"{prompt}\n\nFacts:\n{fact_texts}\n\nRespond in 2-4 sentences."
+        text = llm.generate(
+            prompt=full_prompt,
+            system="You are a concise memory summariser.",
+            max_tokens=200,
+            temperature=0.1,
+        )
+        return text.strip() if text and len(text.strip()) > 20 else None
+    except Exception as exc:
+        logger.debug("Cloud LLM session summary failed: %s", exc)
+        return None

package/src/superlocalmemory/ui/css/design-system.css

@@ -135,6 +135,12 @@ a:hover { text-decoration: underline; }
 button { font-family: inherit; }
 ::selection { background: var(--violet-soft); }
 .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+/* Monospace values are usually paths, ids or hashes — reference data, not
+   prose. Left unbounded they set the width of whatever contains them:
+   #dashboard-basedir alone rendered 219px and pushed the Dashboard pane past
+   its own right edge. Clip instead of overflowing; the full value stays
+   available via the title attribute wherever these are rendered. */
+.mono { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
 .num  { font-variant-numeric: tabular-nums; }
 .muted { color: var(--fg-2); }
 .dim   { color: var(--fg-3); }
@@ -424,7 +430,15 @@ button { font-family: inherit; }
 /* ============================================================
    TABLES / LISTS
    ============================================================ */
-.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
+/* A wide table scrolls INSIDE its own card at any width, not only on phones.
+   The ≤768px block already did exactly this; the rule was simply never applied
+   above that breakpoint, so between roughly 800px and 1200px a six-column
+   table (Memories renders 783px of columns) overflowed its pane instead. The
+   pane does technically scroll, but an inner scroll region with no visible
+   affordance reads as "the page is cut off on the right" — which is precisely
+   how it was reported. Keeping the scroll inside the card makes the clipped
+   edge belong to the table, where a horizontal scrollbar is expected. */
+.tbl { width: 100%; border-collapse: collapse; font-size: 13px; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
 .tbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--border); }
 .tbl td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
 .tbl tr:last-child td { border-bottom: 0; }
@@ -615,6 +629,67 @@ button { font-family: inherit; }
   .kpi-strip { grid-template-columns: 1fr !important; }
 }
 
+/* ---- Knowledge-graph panel toggle (≤1100px only) -------------------------
+   #odg-panel-toggle: "Details & Chat ↓" floats at centre-bottom of the
+   graph stage. Tells the user the stacked inspector / Ask-your-memory panel
+   exists and scrolls it into view on click.
+   .odg-back-btn: companion at the top of the stacked inspector; scrolls back
+   to the graph stage.
+   Both are hidden by default. Only revealed at ≤1100px where the inspector
+   stacks below the stage instead of sitting beside it in the two-column grid.
+   The existing @media (max-width:1100px) block above is NOT modified —
+   these are additive rules for the new elements only. --------------------  */
+#odg-panel-toggle,
+.odg-back-btn { display: none; }
+
+@media (max-width: 1100px) {
+  /* Floating affordance pinned to centre-bottom of the graph stage overlay */
+  #odg-panel-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    position: absolute;
+    bottom: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 10;
+    height: 36px;
+    padding: 0 20px;
+    border-radius: var(--r-pill);
+    border: 1px solid var(--border-strong);
+    background: var(--card);
+    color: var(--fg);
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    box-shadow: var(--sh-md);
+    white-space: nowrap;
+    transition: background .15s, color .15s, border-color .15s;
+  }
+  #odg-panel-toggle:hover { background: var(--violet); color: var(--violet-fg); border-color: transparent; }
+  #odg-panel-toggle:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
+
+  /* Companion button at top of stacked inspector */
+  .odg-back-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    width: 100%;
+    padding: 9px 16px;
+    border: 0;
+    border-bottom: 1px solid var(--border);
+    background: var(--card-2);
+    color: var(--fg-2);
+    font-size: 12.5px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background .15s, color .15s;
+  }
+  .odg-back-btn:hover { background: var(--violet-soft); color: var(--violet); }
+  .odg-back-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }
+}
+
 /* reduced motion */
 @media (prefers-reduced-motion: reduce) {
   * { animation-duration: .001ms !important; transition-duration: .001ms !important; }

package/src/superlocalmemory/ui/index.html

@@ -1508,10 +1508,13 @@
 
     <!-- Cytoscape.js REMOVED in v3.4.1 — replaced by Sigma.js WebGL -->
 
-    <!-- Sigma.js v3 + graphology (vendored) -->
-    <script src="static/vendor/graphology.umd.min.js"></script>
-    <script src="static/vendor/graphology-library.min.js"></script>
-    <script src="static/vendor/sigma.min.js"></script>
+    <!-- Sigma.js + graphology RETIRED in 4.0.6 along with js/knowledge-graph.js.
+         The live knowledge graph (js/od-graph.js) is a canvas-2D renderer with
+         its own force simulation and never constructed a Sigma instance — on a
+         running daemon window.sigmaInstance and window.sigmaGraph were both
+         null while the graph was on screen. The remaining references to Sigma
+         helpers in graph-event-bus.js and memory-chat.js are all behind
+         `typeof … === 'function'` guards and degrade silently. -->
 
     <!-- Modular JS (v2.5 — split from monolith app.js) -->
     <script src="static/js/core.js"></script>
@@ -1524,8 +1527,14 @@
 
     <!-- v3.4.1: Event bus (must load before graph + chat) -->
     <script src="static/js/graph-event-bus.js"></script>
-    <!-- v3.4.1: Sigma.js Knowledge Graph (defines globals: filterState, loadGraph, renderGraph) -->
-    <script src="static/js/knowledge-graph.js"></script>
+    <!-- js/knowledge-graph.js RETIRED in 4.0.6. It rendered into #graph-tab,
+         which measured 0x0 with 0 children on a live daemon, and it logged
+         "[Sigma] Container hidden (0 dimensions), deferring render" on every
+         load without ever resuming — then reported "Graph already rendered".
+         The live renderer is js/od-graph.js, which owns #odg-stage.
+         It also defined window.loadGraph; od-graph.js now provides that shim
+         (core.js:552 calls it unguarded on init). filterState/renderGraph are
+         only consumed behind typeof guards in clusters.js and modal.js. -->
     <!-- Shared UI utilities (showLoadingSpinner, updateGraphStats, etc.) -->
     <script src="static/js/graph-ui.js"></script>
     <!-- Filter functions (filterByCluster, filterByEntity — used by clusters.js, modal.js) -->
@@ -1546,8 +1555,16 @@
     <script src="static/js/settings.js"></script>
     <script src="static/js/events.js"></script>
     <script src="static/js/agents.js"></script>
-    <!-- Brain tab (v3.4.21 — XSS-safe DOM, token-gated, strict CSP on /api/v3/brain) -->
-    <script src="static/js/brain.js?v=380" defer></script>
+    <!-- Brain tab: rendered by od-brain.js (loaded below).
+         js/brain.js (the v3.4.21 implementation) was RETIRED in 4.0.6. Both files
+         were being loaded and both rendered into the Brain pane — od-brain.js into
+         #brain-pane, brain.js into #brain-content nested inside it — so the pane's
+         copy came from whichever wrote last. od-brain.js already defines
+         window.loadBrain (see its "Legacy compatibility" shim) and, loading second,
+         already won that global; but brain.js also bound its own click handlers to
+         its internal closure, so it kept re-rendering the pane behind od-brain.js.
+         The file is retained on disk for one release in case a rollback is needed. -->
+
     <script src="static/js/feedback.js"></script>
     <script src="static/js/lifecycle.js"></script>
     <script src="static/js/compliance.js"></script>
@@ -1558,7 +1575,7 @@
     <script src="static/js/math-health.js"></script>
     <script src="static/js/auto-settings.js"></script>
     <script src="static/js/ide-status.js"></script>
-    <script src="static/js/fact-detail.js"></script>
+    <script src="static/js/fact-detail.js?v=e9076ee3"></script>
 
     <!-- Neural Glass shell (v3.4.21 restructured) -->
     <script src="static/js/ng-health.js?v=345"></script>
@@ -1574,18 +1591,18 @@
     <script src="static/js/event-delegation.js?v=379"></script>
     <!-- OD screen modules (v3.7.9): approved-design panes wired to live data.
          Load LAST so their window.load<Screen> overrides win over the legacy loaders. -->
-    <script src="static/js/od-brain.js?v=379"></script>
+    <script src="static/js/od-brain.js?v=4f233c96"></script>
     <script src="static/js/od-components.js?v=382"></script>
     <script src="static/js/od-health.js?v=382"></script>
     <script src="static/js/od-operations.js?v=380"></script>
     <script src="static/js/od-compliance-ext.js?v=100"></script>
     <script src="static/js/od-ops-health.js?v=400"></script>
     <script src="static/js/od-team.js?v=379"></script>
-    <script src="static/js/od-graph.js?v=379"></script>
+    <script src="static/js/od-graph.js?v=6812bf6c"></script>
     <script src="static/js/od-memories.js?v=379"></script>
     <script src="static/js/od-entities.js?v=379"></script>
     <!-- Multi-Agent Memory pane (v3.8.0): visualises memory written by multiple agents -->
-    <script src="static/js/od-agents.js?v=380"></script>
+    <script src="static/js/od-agents.js?v=c75ff3c2"></script>
     <script src="static/js/od-skills.js?v=379"></script>
     <script src="static/js/od-mesh.js?v=379"></script>
     <script src="static/js/od-optimize.js?v=379"></script>

package/src/superlocalmemory/ui/js/fact-detail.js

@@ -72,6 +72,67 @@ document.addEventListener('click', function(e) {
                 body.appendChild(ent);
             }
 
+            // Code this memory refers to (4.0.7). Absent for anyone without a
+            // built code graph — the API returns [] rather than an error, so no
+            // section appears and nothing looks broken.
+            //
+            // textContent throughout, never innerHTML: every string here is a
+            // qualified name or file path read out of the indexed repository, so
+            // it is untrusted input as far as this panel is concerned.
+            if (data.code_links && data.code_links.length > 0) {
+                var codeWrap = document.createElement('div');
+                codeWrap.className = 'mt-2';
+
+                var codeLabel = document.createElement('strong');
+                codeLabel.textContent = 'Code referenced:';
+                codeWrap.appendChild(codeLabel);
+
+                var list = document.createElement('ul');
+                list.className = 'mb-0 ps-3';
+                list.style.listStyle = 'none';
+
+                data.code_links.forEach(function (link) {
+                    var li = document.createElement('li');
+                    li.className = 'mt-1';
+
+                    var nameEl = document.createElement('code');
+                    nameEl.textContent = link.qualified_name || link.name || '?';
+                    li.appendChild(nameEl);
+
+                    if (link.kind) {
+                        var kind = document.createElement('span');
+                        kind.className = 'text-muted';
+                        kind.style.fontSize = '0.75rem';
+                        kind.textContent = ' ' + link.kind;
+                        li.appendChild(kind);
+                    }
+
+                    // A stale link points at code that has moved or gone. Saying
+                    // so is the whole value of tracking staleness — silently
+                    // showing it as current would be worse than not showing it.
+                    if (link.is_stale) {
+                        var stale = document.createElement('span');
+                        stale.className = 'badge bg-warning text-dark ms-1';
+                        stale.style.fontSize = '0.65rem';
+                        stale.textContent = 'code changed';
+                        li.appendChild(stale);
+                    }
+
+                    if (link.file_path) {
+                        var loc = document.createElement('div');
+                        loc.className = 'text-muted';
+                        loc.style.fontSize = '0.7rem';
+                        loc.textContent = link.file_path;
+                        li.appendChild(loc);
+                    }
+
+                    list.appendChild(li);
+                });
+
+                codeWrap.appendChild(list);
+                body.appendChild(codeWrap);
+            }
+
             panel.appendChild(body);
             item.appendChild(panel);
         })

package/src/superlocalmemory/ui/js/od-agents.js

@@ -158,10 +158,22 @@
             '<h3>Recent memories</h3>' +
             '<span class="sub">newest first</span>' +
             '<div class="spacer"></div>' +
+            /* max-width + min-width:0 are load-bearing, not cosmetic.
+               A <select> sizes itself to its LONGEST OPTION, and the options
+               here are agent ids — which for daemon capabilities look like
+               "daemon-capability:811f335e55fac7f456aadd68938b862a...", 75+
+               characters. Measured on a real store: the control rendered
+               1,178px wide inside a 714px pane, dragging the pane's
+               scrollWidth to 1,336px. That is what broke this section's
+               layout and pushed the table off the right edge.
+               min-width:0 is required because this sits in a flex row, where
+               the default min-width:auto refuses to shrink below the
+               content's intrinsic size and defeats max-width. */
             '<select id="od-agents-filter"' +
               ' style="font-size:12.5px;padding:3px 8px;border-radius:var(--r-sm);' +
                       'background:var(--card-2);border:1px solid var(--border);' +
-                      'color:var(--fg-1)">' +
+                      'color:var(--fg-1);max-width:220px;min-width:0;' +
+                      'text-overflow:ellipsis">' +
               '<option value="">All agents</option>' +
             '</select>' +
           '</div>' +
@@ -259,6 +271,30 @@
   }
 
   // ── Populate agent filter dropdown ────────────────────────────────────────
+  /* Turn an agent id into something a person can read in a dropdown.
+     Ids arrive in three shapes on a real store:
+        "claude", "codex"                       -> already readable
+        "daemon-capability:<64 hex>"            -> kind + short fingerprint
+        "cli-offline-canonical:local-capability:cli:uid:501:<64 hex>:d63110"
+     Showing the raw string is what made the control 1,178px wide, and a
+     64-character hash tells the reader nothing anyway. Keep the leading,
+     meaningful segments and a short fingerprint so two capabilities of the
+     same kind remain distinguishable. The full id stays on opt.value (used
+     for filtering) and on opt.title (hover). */
+  function shortAgentLabel(id) {
+    if (!id) return 'unknown';
+    if (id.length <= 28) return id;
+    var parts = id.split(':');
+    var head = parts[0] || id;
+    /* find the first long hex-looking segment and reduce it to 6 chars */
+    for (var i = 1; i < parts.length; i++) {
+      if (/^[0-9a-f]{16,}$/i.test(parts[i])) {
+        return head + ':' + parts[i].slice(0, 6) + '…';
+      }
+    }
+    return head.length <= 28 ? head + ':…' : head.slice(0, 27) + '…';
+  }
+
   function populateFilter(agents) {
     var sel = document.getElementById('od-agents-filter');
     if (!sel) return;
@@ -267,8 +303,10 @@
     if (!agents) return;
     agents.forEach(function (a) {
       var opt = document.createElement('option');
-      opt.value       = String(a.agent_id || '');
-      opt.textContent = String(a.agent_id || 'unknown');
+      var id  = String(a.agent_id || '');
+      opt.value       = id;                       /* filtering needs the FULL id */
+      opt.textContent = shortAgentLabel(id);      /* the human reads a short one */
+      opt.title       = id || 'unknown';          /* full id still available on hover */
       sel.appendChild(opt);
     });
   }
@@ -293,7 +331,13 @@
       var rawSrc     = String(r.source_type || '—');
       var rawSess    = String(r.session_id  || '—');
 
-      var agId    = escapeHtml(rawId);
+      // Same treatment the content and session columns already get. The agent
+      // id is the one field that was rendered in full, and with nowrap that
+      // made the Agent column 632px wide for a 75-character
+      // "daemon-capability:<64 hex>" — squeezing every other column off the
+      // right edge. Full id stays in the title attribute.
+      var agId    = escapeHtml(shortAgentLabel(rawId));
+      var agIdFull = escapeHtml(rawId);
       var srcType = escapeHtml(rawSrc);
       var dt      = escapeHtml(fmtDate(r.created_at));
 
@@ -317,7 +361,7 @@
                 ' style="width:22px;height:22px;font-size:10px;background:' + avatarBg + '">' +
                 letter +
               '</span>' +
-              '<span class="mono" style="font-size:12px">' + agId + '</span>' +
+              '<span class="mono" style="font-size:12px" title="' + agIdFull + '">' + agId + '</span>' +
             '</span>' +
           '</td>' +
           '<td style="max-width:340px;font-size:13px;padding:7px 12px 7px 0"' +