{% extends "base.html" %}
{% block title %}Memory Hub — Agent Wasp{% endblock %}

{% block page_css %}
<style id="page-dyn-style" nonce="{{ request.state.csp_nonce }}">
[data-ds="1"] { }
[data-ds="2"] { }
[data-ds="3"] { width:110px;height:110px; }
[data-ds="4"] { transform:rotate(-90deg);display:block; }
[data-ds="5"] { }
[data-ds="6"] { }
[data-ds="7"] { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px; }
[data-ds="8"] { font-size:14px; font-weight:700; font-family:monospace; }
[data-ds="9"] { font-size:8px; text-transform:uppercase; letter-spacing:.1em; }
[data-ds="10"] { }
[data-ds="11"] { }
[data-ds="12"] { }
[data-ds="13"] { width:0%; }
[data-ds="14"] { }
[data-ds="15"] { }
[data-ds="16"] { }
[data-ds="17"] { }
[data-ds="18"] { }
[data-ds="19"] { color:#8B5CF6; }
[data-ds="20"] { color:#A78BFA; }
[data-ds="21"] { color:#7C3AED; }
[data-ds="22"] { }
[data-ds="23"] { }
[data-ds="24"] { }
[data-ds="25"] { }
[data-ds="26"] { }
[data-ds="27"] { opacity:.75; }
[data-ds="28"] { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
[data-ds="29"] { color:#A78BFA; }
[data-ds="30"] { color:#A78BFA; }
[data-ds="31"] { }
[data-ds="32"] { color:#C4B5FD; }
[data-ds="33"] { background:#A78BFA20;color:#A78BFA;border:1px solid #A78BFA30; }
[data-ds="34"] { color:#DDD6FE; }
[data-ds="35"] { }
[data-ds="36"] { border-left:3px solid #F9731630; }
[data-ds="37"] { background:#F9731618; }
[data-ds="38"] { background:#F9731620;color:#F97316; }
[data-ds="39"] { }
[data-ds="40"] { background:#F9731610;color:#F97316;border:1px solid #F9731625; }
[data-ds="41"] { color:#F97316; }
[data-ds="42"] { background:#F9731620;color:#F97316; }
[data-ds="43"] { background:#F9731618;color:#F97316; }
[data-ds="44"] { }
[data-ds="45"] { background:#10B98115;color:#10B981;border:1px solid #10B98125; }
[data-ds="46"] { border:1px solid rgba(255,255,255,.1); }
[data-ds="47"] { background:linear-gradient(to bottom,transparent,rgba(16,185,129,.3) 10%,rgba(16,185,129,.15) 90%,transparent);z-index:0; }
[data-ds="48"] { }
[data-ds="49"] { }
[data-ds="50"] { }
[data-ds="51"] { }
[data-ds="52"] { color:#F59E0B; }
[data-ds="53"] { }
[data-ds="54"] { }
[data-ds="55"] { color:#6366F1; }
[data-ds="56"] { background:#6366F118;color:#6366F1; }
[data-ds="57"] { background:#818CF820;color:#818CF8; }
[data-ds="58"] { background:#A5B4FC20;color:#A5B4FC; }
[data-ds="59"] { background:#FCD34D20;color:#FBBF24;border:1px solid #FCD34D30; }
[data-ds="60"] { background:#FCD34D20;color:#FBBF24;border:1px solid #FCD34D30; }
[data-ds="61"] { background:#10B98115;color:#10B981; }
[data-ds="62"] { background:#FCD34D08;border:1px solid #FCD34D20; }
[data-ds="63"] { color:#FBBF24; }
[data-ds="64"] { background:#6366F10C;border:1px solid #6366F120; }
[data-ds="65"] { color:#818CF8; }
[data-ds="66"] { background:#6366F10C;border:1px solid #6366F120; }
</style>
{% endblock %}

{% block content %}

{# ── Type meta ────────────────────────────────────────────────────────────── #}
{% set TYPE_META = {
    "facts":    {"color":"#3B82F6","badge":"badge-info"},
    "working":  {"color":"#F59E0B","badge":"badge-warning"},
    "episodic": {"color":"#9CA3AF","badge":"badge-neutral"},
    "semantic": {"color":"#8B5CF6","badge":"badge-secondary"},
    "policy":   {"color":"#A78BFA","badge":"badge-primary"},
    "meta":     {"color":"#F87171","badge":"badge-error"},
} %}
{% set type_counts = [
    ("facts",stats.facts),("working",stats.working),("episodic",stats.episodic),
    ("semantic",stats.semantic),("policy",stats.policy),("meta",stats.meta),
] %}
{% set total_safe = stats.total if stats.total > 0 else 1 %}
{%- set _dv = namespace(count=stats.total,color="",label="total") -%}
{% if current_type and tab=="store" %}
  {%- for _n,_c in type_counts -%}{%- if _n==current_type -%}
    {%- set _dv.count=_c -%}{%- set _dv.color=TYPE_META[_n].color -%}{%- set _dv.label=_n -%}
  {%- endif -%}{%- endfor -%}
{% endif %}
{% set display_count=_dv.count %}{% set display_color=_dv.color %}{% set display_label=_dv.label %}

{# ── Tab definitions ──────────────────────────────────────────────────────── #}
{% set tabs = [
    ("store",     "Store",     stats.total,                 "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4",   "#A78BFA"),
    ("kg",        "Graph",     layer_counts.kg_nodes,       "M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2V9M9 21H5a2 2 0 01-2-2V9m0 0h18",           "#8B5CF6"),
    ("procedural","Procedural",layer_counts.procedural,     "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01","#F97316"),
    ("timeline",  "Timeline",  layer_counts.timeline,       "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z",                                                                    "#10B981"),
    ("dreams",    "Dreams",    layer_counts.dreams,         "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z",                          "#6366F1"),
] %}

<!-- ── Header ─────────────────────────────────────────────────────────── -->
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-5">
    <div class="flex items-center gap-3">
        <div class="relative flex h-3 w-3">
            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-secondary opacity-75"></span>
            <span class="relative inline-flex rounded-full h-3 w-3 bg-secondary"></span>
        </div>
        <div>
            <h1 class="text-2xl font-bold tracking-tight leading-tight">Memory Hub</h1>
            <p class="text-xs text-base-content/40 font-mono mt-0.5">{{ stats.total }} store entries · {{ layer_counts.procedural }} procedures · {{ layer_counts.timeline }} timeline · {{ layer_counts.dreams }} dreams</p>
        </div>
    </div>
    <div class="text-xs text-primary/80 border border-primary/20 rounded-lg px-3 py-1.5 bg-primary/5 font-mono" id="mem-clock"></div>
</div>

<!-- ── Tab bar ─────────────────────────────────────────────────────────── -->
<div class="flex gap-1 mb-4 overflow-x-auto pb-1 hide-scrollbar">
    {% for tid, tlabel, tcount, ticon, tcolor in tabs %}
    <a href="/memory?tab={{ tid }}"
       class="flex items-center gap-1.5 px-3 py-2 rounded-xl text-xs font-semibold whitespace-nowrap transition-all duration-200 shrink-0
              {% if tab == tid %}text-white{% else %}text-base-content/50 hover:text-base-content/80 hover:bg-base-200{% endif %}"
       data-ds="1" data-dv="{% if tab == tid %}background:{{ tcolor }}22; border:1px solid {{ tcolor }}55; color:{{ tcolor }}{% else %}border:1px solid transparent{% endif %}">
        <svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="{{ ticon }}"/></svg>
        {{ tlabel }}
        {% if tcount > 0 %}
        <span class="text-xs font-mono px-1.5 py-0.5 rounded-full"
              data-ds="2" data-dv="background:{{ tcolor}}22; color:{{ tcolor }}">{{ tcount }}</span>
        {% endif %}
    </a>
    {% endfor %}
</div>

<!-- ══════════════════════════════════════════════════════════════════════ -->
<!-- TAB: STORE ──────────────────────────────────────────────────────────── -->
<!-- ══════════════════════════════════════════════════════════════════════ -->
{% if tab == "store" %}

<!-- Memory map -->
<div class="card bg-base-100 shadow-sm wasp-accent wasp-breathing mb-4 overflow-hidden">
    <div class="card-body p-5">
        <div class="grid grid-cols-1 sm:grid-cols-[140px_1fr] gap-6 items-center">
            {%- set circ=276.46 -%}
            <div class="flex flex-col items-center gap-2">
                <div class="relative" data-ds="3">
                    <svg viewBox="-60 -60 120 120" width="110" height="110" data-ds="4">
                        <circle cx="0" cy="0" r="44" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="13"/>
                        {% if current_type %}
                            {%- set seg=(display_count/total_safe*circ)|round(2) -%}
                            <circle cx="0" cy="0" r="44" fill="none" stroke="{{ display_color }}" stroke-width="13"
                                    stroke-dasharray="{{ circ|round(2) }} 0" opacity="0.13"/>
                            <circle cx="0" cy="0" r="44" fill="none" stroke="{{ display_color }}" stroke-width="13"
                                    stroke-dasharray="{{ seg }} {{ (circ-seg)|round(2) }}"
                                    stroke-linecap="round" opacity="0.95"
                                    data-ds="5" data-dv="filter:drop-shadow(0 0 5px {{ display_color}});"/>
                        {% else %}
                            {%- set min_seg=10.0 -%}{%- set ns_nz=namespace(n=0) -%}
                            {%- for _n,_c in type_counts -%}{%- if _c>0 -%}{%- set ns_nz.n=ns_nz.n+1 -%}{%- endif -%}{%- endfor -%}
                            {%- set avail=circ-ns_nz.n*min_seg -%}{%- set ns=namespace(off=0) -%}
                            {% for name,count in type_counts %}{%- if count>0 -%}
                            {%- set meta=TYPE_META[name] -%}{%- set seg=(min_seg+count/total_safe*avail)|round(2) -%}
                            <circle cx="0" cy="0" r="44" fill="none" stroke="{{ meta.color }}" stroke-width="13"
                                    stroke-dasharray="{{ seg }} {{ (circ-seg)|round(2) }}"
                                    stroke-dashoffset="{{ (-ns.off)|round(2) }}" opacity="0.88"
                                    data-ds="6" data-dv="filter:drop-shadow(0 0 4px {{ meta.color}}99);"/>
                            {%- set ns.off=ns.off+seg -%}{%- endif -%}{% endfor %}
                        {% endif %}
                    </svg>
                    <div data-ds="7">
                        <span data-ds="8" data-dv="color:{% if display_color %}{{ display_color }}{% else %}inherit{% endif %}">{{ display_count|int }}</span>
                        <span data-ds="9" data-dv="{% if display_color %}color:{{ display_color }}88{% else %}color:rgba(128,128,128,.45){% endif %}">{{ display_label }}</span>
                    </div>
                </div>
                <div class="text-xs text-base-content/30 font-mono">{{ "%.1f"|format(stats.size_bytes/1024) }} KB</div>
            </div>
            <div class="space-y-2">
                {% for name,count in type_counts %}
                {% set meta=TYPE_META.get(name,{"color":"#6B7280"}) %}
                {% set pct=((count/total_safe)*100)|round(1) %}
                <a href="/memory?tab=store&type={{ name }}{% if search %}&search={{ search }}{% endif %}"
                   class="block group transition-opacity {% if current_type and current_type!=name %}opacity-35 hover:opacity-100{% endif %}">
                    <div class="flex items-center justify-between mb-1">
                        <div class="flex items-center gap-1.5">
                            <span class="w-2 h-2 rounded-full shrink-0" data-ds="10" data-dv="background:{{ meta.color}}{% if current_type==name %}; box-shadow:0 0 6px {{ meta.color }}{% endif %}"></span>
                            <span class="text-xs font-medium capitalize" data-ds="11" data-dv="color:{{ meta.color}}">{{ name }}</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="text-xs font-mono font-bold" data-ds="12" data-dv="color:{{ meta.color}}">{{ count }}</span>
                            <span class="text-xs text-base-content/25 font-mono w-8 text-right">{{ pct }}%</span>
                        </div>
                    </div>
                    <div class="h-1.5 w-full rounded-full bg-base-300 overflow-hidden">
                        <div class="mem-bar h-full rounded-full transition-all duration-700"
                             data-ds="13" data-dv="background:{{ meta.color }};opacity:{% if current_type==name %}1{% else %}0.65{% endif %}"
                             data-width="{{ pct }}"></div>
                    </div>
                </a>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- Filter bar -->
<div class="card bg-base-100 shadow-sm wasp-accent mb-4">
    <div class="card-body py-3 px-4">
        <form method="get" action="/memory" id="mem-filter-form" class="flex flex-wrap gap-2 items-center">
            <input type="hidden" name="tab" value="store">
            <div class="flex flex-wrap gap-1.5 flex-1 min-w-0">
                <a href="/memory?tab=store{% if search %}&search={{ search }}{% endif %}"
                   class="inline-flex items-center gap-1 text-xs px-2.5 py-1 rounded-full border transition-all font-mono
                          {% if not current_type %}bg-primary/15 border-primary/40 text-primary{% else %}border-base-300 text-base-content/40 hover:border-base-content/30{% endif %}">
                    All <span class="font-bold">{{ stats.total }}</span>
                </a>
                {% for name,count in type_counts %}
                {% set meta=TYPE_META.get(name,{"color":"#6B7280"}) %}
                {% if count>0 %}
                <a href="/memory?tab=store&type={{ name }}{% if search %}&search={{ search }}{% endif %}"
                   class="inline-flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-full border transition-all font-mono
                          {% if current_type==name %}text-white border-transparent{% else %}border-base-300 text-base-content/40 hover:text-base-content/70{% endif %}"
                   data-ds="14" data-dv="{% if current_type==name %}background:{{ meta.color }}{% endif %}">
                    <span class="w-1.5 h-1.5 rounded-full" data-ds="15" data-dv="background:{% if current_type==name %}rgba(255,255,255,.7){% else %}{{ meta.color }}{% endif %}"></span>
                    {{ name }} <span class="opacity-70">{{ count }}</span>
                </a>
                {% endif %}
                {% endfor %}
            </div>
            <div class="flex items-center gap-2 shrink-0">
                <div class="relative">
                    <svg class="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-base-content/30 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                    <input type="search" name="search" value="{{ search }}" placeholder="Search…"
                           class="input input-bordered input-sm pl-8 w-40 sm:w-52 text-xs" autocomplete="off">
                    {% if current_type %}<input type="hidden" name="type" value="{{ current_type }}">{% endif %}
                </div>
                {% if search %}<a href="/memory?tab=store{% if current_type %}&type={{ current_type }}{% endif %}" class="btn btn-ghost btn-xs">×</a>{% endif %}
            </div>
        </form>
    </div>
</div>

{% if entries %}
<div class="flex items-center justify-between px-1 mb-2" id="mem-showing">
    <span class="text-xs text-base-content/30 font-mono">Showing {{ (page-1)*per_page+1 }}–{{ (page-1)*per_page+entries|length }}{% if current_type %} · {{ current_type }}{% endif %}{% if search %} · "{{ search }}"{% endif %}</span>
    <span class="text-xs text-base-content/20 font-mono">page {{ page }}</span>
</div>
{% endif %}

<div class="space-y-1.5 mb-5" id="mem-entries">
    {% for entry in entries %}
    {% set mt=entry.memory_type.value %}
    {% set meta=TYPE_META.get(mt,{"color":"#6B7280","badge":"badge-neutral"}) %}
    <a href="/memory/{{ mt }}/{{ entry.id }}"
       class="card bg-base-100 shadow-sm wasp-event-enter block group hover:shadow-md transition-all duration-200 store-item"
       data-ds="16" data-dv="animation-delay:{{ loop.index0*20}}ms; border-left:3px solid {{ meta.color }}25"
       data-search="{{ mt }} {{ (entry.summary or '')|lower }} {{ entry.tags|join(' ')|lower }}">
        <div class="card-body p-3.5">
            <div class="flex items-start gap-3">
                <span class="w-2 h-2 rounded-full shrink-0 mt-1.5 transition-all group-hover:shadow-lg" data-ds="17" data-dv="background:{{ meta.color}}"></span>
                <div class="min-w-0 flex-1">
                    <div class="flex items-center gap-1.5 mb-0.5 flex-wrap">
                        <span class="badge badge-xs {{ meta.badge }} font-mono">{{ mt }}</span>
                        {% for tag in entry.tags[:3] %}<span class="badge badge-xs badge-ghost font-mono opacity-50">{{ tag }}</span>{% endfor %}
                        {% if entry.tags|length>3 %}<span class="text-xs text-base-content/25">+{{ entry.tags|length-3 }}</span>{% endif %}
                    </div>
                    <p class="text-sm text-base-content/70 group-hover:text-base-content transition-colors line-clamp-2">{{ entry.summary or "(no summary)" }}</p>
                </div>
                <div class="shrink-0 text-right hidden sm:block">
                    <div class="text-xs font-mono text-base-content/25">{{ entry.updated_at[:10] if entry.updated_at else '—' }}</div>
                    <div class="text-xs font-mono text-base-content/15">{{ entry.updated_at[11:16] if entry.updated_at else '' }}</div>
                </div>
                <svg class="h-4 w-4 shrink-0 self-center opacity-0 group-hover:opacity-100 transition-opacity" data-ds="18" data-dv="color:{{ meta.color}}" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
            </div>
        </div>
    </a>
    {% else %}
    <div class="card bg-base-100 shadow-sm wasp-accent">
        <div class="card-body py-12 text-center opacity-40">
            <p class="font-semibold text-sm">No memories{% if search %} for "{{ search }}"{% elif current_type %} of type {{ current_type }}{% endif %}</p>
            {% if search or current_type %}<a href="/memory?tab=store" class="btn btn-xs btn-ghost mt-2">Clear</a>{% endif %}
        </div>
    </div>
    {% endfor %}
</div>

{% if entries|length==per_page or page>1 %}
<div class="flex justify-center items-center gap-2 mt-4 mb-2" id="mem-pagination-store">
    {% if page>1 %}<a href="/memory?tab=store&type={{ current_type }}&search={{ search }}&page={{ page-1 }}" class="btn btn-sm btn-ghost gap-1"><svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>Prev</a>{% endif %}
    <button class="btn btn-xs btn-primary font-mono pointer-events-none">{{ page }}</button>
    {% if entries|length==per_page %}<a href="/memory?tab=store&type={{ current_type }}&search={{ search }}&page={{ page+1 }}" class="btn btn-sm btn-ghost gap-1">Next<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></a>{% endif %}
</div>
{% endif %}

<!-- ══════════════════════════════════════════════════════════════════════ -->
<!-- TAB: KNOWLEDGE GRAPH ────────────────────────────────────────────────── -->
{% elif tab == "kg" %}

{# Entity type → color/icon map #}
{% set ET_META = {
    "person":       {"color":"#F97316","icon":"👤","label":"People"},
    "concept":      {"color":"#8B5CF6","icon":"💡","label":"Concepts"},
    "preference":   {"color":"#EC4899","icon":"❤️","label":"Preferences"},
    "fact":         {"color":"#3B82F6","icon":"📌","label":"Facts"},
    "organization": {"color":"#10B981","icon":"🏢","label":"Organizations"},
    "asset":        {"color":"#F59E0B","icon":"💰","label":"Assets"},
    "place":        {"color":"#06B6D4","icon":"📍","label":"Places"},
    "event":        {"color":"#6366F1","icon":"📅","label":"Events"},
} %}

{# Stats bar #}
<div class="flex flex-wrap gap-2 mb-4">
    {%- set type_list = kg_nodes|map(attribute='entity_type')|unique|list if kg_nodes else [] -%}
    <div class="bg-base-200 rounded-xl px-4 py-2.5 flex items-center gap-2">
        <span class="text-base-content/40 text-xs">Nodes</span>
        <span class="font-bold font-mono text-sm" data-ds="19">{{ layer_counts.kg_nodes }}</span>
    </div>
    <div class="bg-base-200 rounded-xl px-4 py-2.5 flex items-center gap-2">
        <span class="text-base-content/40 text-xs">Relations</span>
        <span class="font-bold font-mono text-sm" data-ds="20">{{ layer_counts.kg_relations }}</span>
    </div>
    <div class="bg-base-200 rounded-xl px-4 py-2.5 flex items-center gap-2">
        <span class="text-base-content/40 text-xs">Types</span>
        <span class="font-bold font-mono text-sm" data-ds="21">{{ type_list|length }}</span>
    </div>
    {%- for etype in type_list -%}
    {%- set em = ET_META.get(etype, {"color":"#6B7280","icon":"◆","label":etype}) -%}
    {%- set cnt = kg_nodes|selectattr('entity_type','equalto',etype)|list|length -%}
    <div class="bg-base-200 rounded-xl px-3 py-2.5 flex items-center gap-1.5">
        <span class="text-sm leading-none">{{ em.icon }}</span>
        <span class="font-mono text-xs font-bold" data-ds="22" data-dv="color:{{ em.color}}">{{ cnt }}</span>
        <span class="text-xs text-base-content/40 capitalize">{{ etype }}</span>
    </div>
    {%- endfor -%}
</div>

<!-- KG Search bar -->
<div class="card bg-base-100 shadow-sm wasp-accent mb-4">
    <div class="card-body py-2.5 px-4">
        <div class="relative">
            <svg class="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-base-content/30 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
            <input type="search" id="kg-search" placeholder="Filter nodes and relations…"
                   class="input input-bordered input-sm pl-8 w-full text-xs" autocomplete="off">
        </div>
    </div>
</div>

{% if kg_nodes %}
{# Group nodes by entity_type #}
{% set seen_types = namespace(list=[]) %}
{% for node in kg_nodes %}
  {% if node.entity_type not in seen_types.list %}
    {% set seen_types.list = seen_types.list + [node.entity_type] %}
  {% endif %}
{% endfor %}

{% for etype in seen_types.list %}
{%- set em = ET_META.get(etype, {"color":"#6B7280","icon":"◆","label":etype}) -%}
{%- set group_nodes = kg_nodes|selectattr('entity_type','equalto',etype)|list -%}
<div class="mb-4">
    <div class="flex items-center gap-2 mb-2 px-1">
        <span class="text-base leading-none">{{ em.icon }}</span>
        <span class="text-xs font-bold uppercase tracking-widest" data-ds="23" data-dv="color:{{ em.color}}">{{ em.label }}</span>
        <span class="text-xs font-mono text-base-content/30">{{ group_nodes|length }}</span>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2" id="kg-nodes-grid">
        {% for node in group_nodes %}
        <div class="flex items-start gap-2.5 p-3 rounded-xl bg-base-100 shadow-sm hover:shadow-md transition-all wasp-event-enter group kg-node-item wasp-accent"
             data-ds="24" data-dv="animation-delay:{{ loop.index0*12}}ms; border-left:3px solid {{ em.color }}30"
             data-search="{{ node.name|lower }} {{ node.entity_type|lower }} {{ (node.description or '')|lower }}">
            <div class="w-9 h-9 rounded-xl flex items-center justify-center shrink-0 text-base font-bold"
                 data-ds="25" data-dv="background:{{ em.color}}18; color:{{ em.color }}">
                {{ em.icon }}
            </div>
            <div class="min-w-0 flex-1">
                <div class="font-semibold text-sm truncate group-hover:text-base-content transition-colors" data-ds="26" data-dv="color:{{ em.color}}">{{ node.name }}</div>
                <div class="flex items-center gap-1.5 mt-0.5">
                    <span class="text-xs font-mono px-1.5 py-0.5 rounded-full" data-ds="27" data-dv="background:{{ em.color}}15; color:{{ em.color }}">{{ (node.confidence*100)|round|int }}%</span>
                    {% if node.updated_at %}
                    <span class="text-xs text-base-content/20 font-mono">{{ node.updated_at.strftime('%m-%d') }}</span>
                    {% endif %}
                </div>
                {% if node.description %}
                <p class="text-xs text-base-content/50 mt-1 leading-relaxed" data-ds="28">{{ node.description }}</p>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endfor %}
{% else %}
<div class="card bg-base-100 shadow-sm wasp-accent"><div class="card-body py-12 text-center opacity-30"><p class="text-sm">No knowledge graph data yet</p></div></div>
{% endif %}

{% if kg_relations %}
<div class="card bg-base-100 shadow-sm wasp-accent mb-4">
    <div class="card-body p-5">
        <div class="flex items-center gap-2 mb-3">
            <svg class="h-4 w-4" data-ds="29" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>
            <span class="text-sm font-semibold" data-ds="30">Relations</span>
            <span class="text-xs font-mono text-base-content/30">{{ kg_relations|length }} shown</span>
        </div>
        <div class="space-y-2" id="kg-relations-list">
            {% for rel in kg_relations %}
            {%- set from_name = kg_node_names.get(rel.from_node_id, rel.from_node_id[:8] ~ "…") -%}
            {%- set to_name   = kg_node_names.get(rel.to_node_id,   rel.to_node_id[:8]   ~ "…") -%}
            <div class="flex items-center gap-2 p-2.5 rounded-xl bg-base-200/40 hover:bg-base-200 transition-colors wasp-event-enter kg-rel-item"
                 data-ds="31" data-dv="animation-delay:{{ loop.index0*10}}ms"
                 data-search="{{ from_name|lower }} {{ rel.relation_type|lower }} {{ to_name|lower }} {{ (rel.value or '')|lower }}">
                <span class="text-sm font-semibold truncate max-w-[120px] shrink-0" data-ds="32">{{ from_name }}</span>
                <span class="px-2 py-0.5 rounded-full text-xs font-mono shrink-0 whitespace-nowrap" data-ds="33">{{ rel.relation_type }}</span>
                <svg class="h-3 w-3 shrink-0 text-base-content/20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                <span class="text-sm font-semibold truncate max-w-[120px] shrink-0" data-ds="34">{{ to_name }}</span>
                {% if rel.value %}<span class="text-xs text-base-content/40 italic truncate ml-1">{{ rel.value[:50] }}</span>{% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

<!-- KG Pagination -->
{% if kg_nodes|length == per_page or kg_relations|length == per_page or page > 1 %}
<div class="flex justify-center items-center gap-2 mt-4 mb-2">
    {% if page>1 %}<a href="/memory?tab=kg&page={{ page-1 }}" class="btn btn-sm btn-ghost gap-1"><svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>Prev</a>{% endif %}
    <button class="btn btn-xs btn-primary font-mono pointer-events-none">{{ page }}</button>
    {% if kg_nodes|length==per_page or kg_relations|length==per_page %}<a href="/memory?tab=kg&page={{ page+1 }}" class="btn btn-sm btn-ghost gap-1">Next<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></a>{% endif %}
</div>
{% endif %}

<!-- ══════════════════════════════════════════════════════════════════════ -->
<!-- TAB: PROCEDURAL ─────────────────────────────────────────────────────── -->
{% elif tab == "procedural" %}

<div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-4">
    {%- set ns_ps = namespace(total_s=0, total_ok=0, total_fail=0) -%}
    {%- for p in procedural -%}
      {%- set ns_ps.total_s = ns_ps.total_s + (p.steps|length) -%}
      {%- set ns_ps.total_ok = ns_ps.total_ok + p.success_count -%}
      {%- set ns_ps.total_fail = ns_ps.total_fail + p.failure_count -%}
    {%- endfor -%}
    {% set avg_success = (ns_ps.total_ok / (ns_ps.total_ok + ns_ps.total_fail + 1) * 100)|round|int %}
    {% for label, val, color in [
        ("Procedures", layer_counts.procedural, "#F97316"),
        ("Showing", procedural|length, "#FB923C"),
        ("Avg Success", avg_success|string ~ "%", "#FBBF24"),
    ] %}
    <div class="card bg-base-100 shadow-sm wasp-accent">
        <div class="card-body p-4 text-center">
            <div class="text-2xl font-bold font-mono" data-ds="35" data-dv="color:{{ color}}">{{ val }}</div>
            <div class="text-xs text-base-content/40 mt-0.5">{{ label }}</div>
        </div>
    </div>
    {% endfor %}
</div>

<!-- Procedural Search bar -->
<div class="card bg-base-100 shadow-sm wasp-accent mb-3">
    <div class="card-body py-2.5 px-4">
        <div class="relative">
            <svg class="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-base-content/30 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
            <input type="search" id="proc-search" placeholder="Filter procedures…"
                   class="input input-bordered input-sm pl-8 w-full text-xs" autocomplete="off">
        </div>
    </div>
</div>

<div class="space-y-3 mb-4" id="proc-list">
    {% for proc in procedural %}
    {% set total_runs = proc.success_count + proc.failure_count %}
    {% set success_pct = (proc.success_count / total_runs * 100)|round|int if total_runs > 0 else 0 %}
    {% set pid = "proc-" ~ loop.index %}
    <div class="card bg-base-100 shadow-sm wasp-accent wasp-event-enter proc-item" data-ds="36" data-dv="animation-delay:{{ loop.index0*20}}ms"
         data-search="{{ proc.name|lower }} {{ (proc.description or '')|lower }} {{ (proc.trigger_keywords or [])|join(' ')|lower }}">
        <div class="card-body p-4">
            {# Header row #}
            <div class="flex items-start gap-3">
                <div class="w-9 h-9 rounded-xl flex items-center justify-center shrink-0 text-lg" data-ds="37">🔧</div>
                <div class="min-w-0 flex-1">
                    <div class="flex items-center gap-2 flex-wrap">
                        <span class="font-semibold text-sm">{{ proc.name }}</span>
                        <span class="text-xs font-mono px-1.5 py-0.5 rounded-full" data-ds="38">{{ proc.steps|length }} steps</span>
                        {% if total_runs > 0 %}
                        <span class="text-xs font-mono px-1.5 py-0.5 rounded-full" data-ds="39" data-dv="background:{% if success_pct>=70 %}#10B98120; color:#10B981{% elif success_pct>=40 %}#F59E0B20; color:#F59E0B{% else %}#EF444420; color:#EF4444{% endif %}">{{ success_pct }}% ok · {{ total_runs }} runs</span>
                        {% endif %}
                    </div>
                    {% if proc.description %}
                    <p class="text-xs text-base-content/55 mt-0.5 leading-relaxed">{{ proc.description }}</p>
                    {% endif %}
                    {# Trigger keywords #}
                    {% if proc.trigger_keywords %}
                    <div class="flex flex-wrap gap-1 mt-1.5 items-center">
                        <span class="text-xs text-base-content/25 font-mono mr-0.5">triggers:</span>
                        {% for kw in proc.trigger_keywords[:6] %}
                        <span class="text-xs px-1.5 py-0.5 rounded-md font-mono" data-ds="40">{{ kw }}</span>
                        {% endfor %}
                        {% if proc.trigger_keywords|length > 6 %}<span class="text-xs text-base-content/25">+{{ proc.trigger_keywords|length - 6 }}</span>{% endif %}
                    </div>
                    {% endif %}
                </div>
                <div class="flex items-center gap-2 shrink-0">
                    <div class="text-right hidden sm:block">
                        <div class="text-xs font-mono text-base-content/30">{{ proc.created_at.strftime('%Y-%m-%d') if proc.created_at else '—' }}</div>
                        {% if proc.last_used_at %}
                        <div class="text-xs font-mono text-base-content/20">used {{ proc.last_used_at.strftime('%m-%d') }}</div>
                        {% endif %}
                    </div>
                    {% if proc.steps %}
                    <button data-action="memory:toggleProc" data-pid="{{ pid }}" id="{{ pid }}-btn"
                            class="btn btn-xs btn-ghost font-mono gap-1 shrink-0" data-ds="41">
                        <svg id="{{ pid }}-chevron" class="h-3.5 w-3.5 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                        steps
                    </button>
                    {% endif %}
                </div>
            </div>

            {# Steps accordion #}
            {% if proc.steps %}
            <div id="{{ pid }}-steps" class="hidden mt-3 pt-3 border-t border-base-200">
                <ol class="space-y-2">
                    {% for step in proc.steps %}
                    <li class="flex gap-3 items-start">
                        <span class="w-5 h-5 rounded-full flex items-center justify-center shrink-0 text-xs font-bold font-mono mt-0.5"
                              data-ds="42">{{ loop.index }}</span>
                        <div class="min-w-0 flex-1">
                            {%- if step is mapping -%}
                                {%- set skill = step.get('skill') or step.get('action') or step.get('tool') or '' -%}
                                {%- set desc  = step.get('description') or step.get('desc') or step.get('instruction') or step.get('parameters','') -%}
                                {% if skill %}<span class="text-xs font-mono px-1.5 py-0.5 rounded-md mr-1.5 font-bold" data-ds="43">{{ skill }}</span>{% endif %}
                                <span class="text-xs text-base-content/65 leading-relaxed">{{ desc|string if desc else step|tojson }}</span>
                            {%- else -%}
                                <span class="text-xs text-base-content/65 leading-relaxed">{{ step }}</span>
                            {%- endif -%}
                        </div>
                    </li>
                    {% endfor %}
                </ol>
            </div>
            {% endif %}
        </div>
    </div>
    {% else %}
    <div class="card bg-base-100 shadow-sm wasp-accent"><div class="card-body py-12 text-center opacity-30"><p class="text-sm">No procedural memories yet</p></div></div>
    {% endfor %}
</div>

{% if procedural|length == per_page or page > 1 %}
<div class="flex justify-center items-center gap-2 mb-2">
    {% if page>1 %}<a href="/memory?tab=procedural&page={{ page-1 }}" class="btn btn-sm btn-ghost gap-1"><svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>Prev</a>{% endif %}
    <button class="btn btn-xs btn-primary font-mono pointer-events-none">{{ page }}</button>
    {% if procedural|length==per_page %}<a href="/memory?tab=procedural&page={{ page+1 }}" class="btn btn-sm btn-ghost gap-1">Next<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></a>{% endif %}
</div>
{% endif %}

<!-- ══════════════════════════════════════════════════════════════════════ -->
<!-- TAB: TIMELINE ───────────────────────────────────────────────────────── -->
{% elif tab == "timeline" %}

<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-4">
    {% set obs_types = timeline|map(attribute='observation_type')|unique|list if timeline else [] %}
    {% for label, val, color in [
        ("Observations", layer_counts.timeline, "#10B981"),
        ("Showing", timeline|length, "#34D399"),
        ("Entities", timeline|map(attribute='entity')|unique|list|length if timeline else 0, "#6EE7B7"),
        ("Types", obs_types|length, "#A7F3D0"),
    ] %}
    <div class="card bg-base-100 shadow-sm wasp-accent">
        <div class="card-body p-4 text-center">
            <div class="text-2xl font-bold font-mono" data-ds="44" data-dv="color:{{ color}}">{{ val }}</div>
            <div class="text-xs text-base-content/40 mt-0.5">{{ label }}</div>
        </div>
    </div>
    {% endfor %}
</div>

<!-- Timeline Search bar -->
<div class="card bg-base-100 shadow-sm wasp-accent mb-3">
    <div class="card-body py-2.5 px-4">
        <div class="relative">
            <svg class="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-base-content/30 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
            <input type="search" id="timeline-search" placeholder="Filter observations…"
                   class="input input-bordered input-sm pl-8 w-full text-xs" autocomplete="off">
        </div>
    </div>
</div>

{% set OBS_COLORS = {"price":"#F59E0B","event":"#8B5CF6","state":"#3B82F6","mention":"#9CA3AF","metric":"#10B981"} %}
{% set OBS_ICONS  = {"price":"💰","event":"📅","state":"🔄","mention":"💬","metric":"📊"} %}

{# Entity type filter chips #}
{% if timeline %}
{%- set tl_entities = timeline|map(attribute='entity')|unique|list -%}
{%- set tl_types    = timeline|map(attribute='observation_type')|unique|list -%}
<div class="flex flex-wrap gap-1.5 mb-3">
    <span class="text-xs text-base-content/30 font-mono self-center mr-1">entities:</span>
    {% for ent in tl_entities[:8] %}
    <span class="text-xs px-2.5 py-1 rounded-full font-mono cursor-pointer timeline-ent-chip hover:opacity-100 opacity-70 transition-opacity"
          data-ds="45"
          data-action="memory:filterTimeline" data-entity="{{ ent }}">{{ ent }}</span>
    {% endfor %}
    {% if tl_entities|length > 8 %}<span class="text-xs text-base-content/25 self-center">+{{ tl_entities|length - 8 }}</span>{% endif %}
    {% if tl_entities|length > 1 %}
    <span class="text-xs px-2.5 py-1 rounded-full font-mono cursor-pointer opacity-40 hover:opacity-70 transition-opacity ml-1"
          data-ds="46"
          data-action="memory:filterTimeline" data-entity="">all</span>
    {% endif %}
</div>
{% endif %}

<div class="card bg-base-100 shadow-sm wasp-accent mb-4">
    <div class="card-body p-5">
        <div class="relative">
            <!-- timeline line -->
            <div class="absolute left-3.5 top-0 bottom-0 w-px" data-ds="47"></div>
            <div class="space-y-3 relative" id="timeline-list">
                {% for obs in timeline %}
                {% set oc   = OBS_COLORS.get(obs.observation_type, "#9CA3AF") %}
                {% set oico = OBS_ICONS.get(obs.observation_type, "·") %}
                <div class="flex gap-3 items-start wasp-event-enter timeline-item" data-ds="48" data-dv="animation-delay:{{ loop.index0*12}}ms"
                     data-search="{{ obs.entity|lower }} {{ obs.observation_type|lower }} {{ (obs.value or '')|lower }} {{ (obs.source or '')|lower }}"
                     data-entity="{{ obs.entity|lower }}">
                    <div class="w-7 h-7 rounded-full shrink-0 flex items-center justify-center z-10 text-xs"
                         data-ds="49" data-dv="background:{{ oc}}20; border:2px solid {{ oc }}55">
                        {{ oico }}
                    </div>
                    <div class="flex-1 min-w-0 pb-3 border-b border-base-200/40">
                        <div class="flex items-center gap-2 flex-wrap">
                            <span class="font-semibold text-sm" data-ds="50" data-dv="color:{{ oc}}">{{ obs.entity }}</span>
                            <span class="text-xs px-1.5 py-0.5 rounded-full font-mono" data-ds="51" data-dv="background:{{ oc}}18; color:{{ oc }}">{{ obs.observation_type }}</span>
                            {% if obs.confidence < 1.0 %}
                            <span class="text-xs text-base-content/25 font-mono">{{ (obs.confidence*100)|round|int }}%</span>
                            {% endif %}
                        </div>
                        {# Value: price gets big, others get normal #}
                        {% if obs.observation_type == "price" %}
                        <p class="text-base font-bold font-mono mt-0.5" data-ds="52">{{ obs.value }}</p>
                        {% else %}
                        <p class="text-sm text-base-content/70 mt-0.5 leading-relaxed">{{ obs.value }}</p>
                        {% endif %}
                        <div class="flex items-center gap-2 mt-0.5">
                            <span class="text-xs font-mono text-base-content/25">{{ obs.observed_at.strftime('%Y-%m-%d %H:%M') if obs.observed_at else '—' }}</span>
                            {% if obs.source %}<span class="text-xs text-base-content/20 font-mono">· {{ obs.source }}</span>{% endif %}
                        </div>
                    </div>
                </div>
                {% else %}
                <div class="text-center opacity-30 py-8"><p class="text-sm">No timeline observations yet</p></div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- Timeline Pagination -->
{% if timeline|length == per_page or page > 1 %}
<div class="flex justify-center items-center gap-2 mt-4 mb-2">
    {% if page>1 %}<a href="/memory?tab=timeline&page={{ page-1 }}" class="btn btn-sm btn-ghost gap-1"><svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>Prev</a>{% endif %}
    <button class="btn btn-xs btn-primary font-mono pointer-events-none">{{ page }}</button>
    {% if timeline|length==per_page %}<a href="/memory?tab=timeline&page={{ page+1 }}" class="btn btn-sm btn-ghost gap-1">Next<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></a>{% endif %}
</div>
{% endif %}

<!-- ══════════════════════════════════════════════════════════════════════ -->
<!-- TAB: DREAMS ─────────────────────────────────────────────────────────── -->
{% elif tab == "dreams" %}

<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-4">
    {% set total_consolidated = dreams|sum(attribute='memories_consolidated') if dreams else 0 %}
    {% set total_kg = dreams|sum(attribute='kg_nodes_added') if dreams else 0 %}
    {% set total_improvements = dreams|sum(attribute='improvements_proposed') if dreams else 0 %}
    {% for label, val, color in [
        ("Dream Cycles", layer_counts.dreams, "#6366F1"),
        ("Mem. Consolidated", total_consolidated, "#818CF8"),
        ("KG Nodes Added", total_kg, "#A5B4FC"),
        ("Improvements", total_improvements, "#C7D2FE"),
    ] %}
    <div class="card bg-base-100 shadow-sm wasp-accent">
        <div class="card-body p-4 text-center">
            <div class="text-2xl font-bold font-mono" data-ds="53" data-dv="color:{{ color}}">{{ val }}</div>
            <div class="text-xs text-base-content/40 mt-0.5">{{ label }}</div>
        </div>
    </div>
    {% endfor %}
</div>

<!-- Dreams Search bar -->
<div class="card bg-base-100 shadow-sm wasp-accent mb-3">
    <div class="card-body py-2.5 px-4">
        <div class="relative">
            <svg class="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-base-content/30 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
            <input type="search" id="dreams-search" placeholder="Filter dream cycles…"
                   class="input input-bordered input-sm pl-8 w-full text-xs" autocomplete="off">
        </div>
    </div>
</div>

<div class="space-y-3 mb-4" id="dreams-list">
    {% for dream in dreams %}
    {%- set did = "dream-" ~ loop.index -%}
    {%- set is_first = loop.first -%}
    <div class="card bg-base-100 shadow-sm wasp-accent wasp-event-enter dream-item"
         data-ds="54" data-dv="border-left:3px solid #6366F1{% if is_first %}60{% else %}25{% endif %}"
         data-search="{{ (dream.started_at.strftime('%Y-%m-%d') if dream.started_at else '') }} {{ (dream.reflection or '')|lower }}">
        <div class="card-body p-4">
            <div class="flex items-start gap-3">
                <div class="text-2xl shrink-0 mt-0.5">🌙</div>
                <div class="min-w-0 flex-1">
                    {# Header: date + stats chips #}
                    <div class="flex items-center gap-2 flex-wrap mb-1.5">
                        <span class="font-semibold text-sm font-mono" data-ds="55">{{ dream.started_at.strftime('%Y-%m-%d %H:%M') if dream.started_at else '—' }}</span>
                        <span class="text-xs px-1.5 py-0.5 rounded-full font-mono" data-ds="56">{{ dream.duration_seconds }}s</span>
                    </div>
                    {# Activity pills #}
                    <div class="flex flex-wrap gap-1.5 mb-2">
                        {% if dream.memories_consolidated > 0 %}
                        <span class="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full font-mono" data-ds="57">
                            <svg class="h-2.5 w-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7"/></svg>
                            {{ dream.memories_consolidated }} consolidated
                        </span>
                        {% endif %}
                        {% if dream.kg_nodes_added > 0 %}
                        <span class="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full font-mono" data-ds="58">
                            <svg class="h-2.5 w-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                            +{{ dream.kg_nodes_added }} KG nodes
                        </span>
                        {% endif %}
                        {% if dream.improvements_proposed > 0 %}
                        {% if dream.improvements_json %}
                        <button data-action="memory:toggleImprovements" data-did="{{ did }}"
                                class="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full font-mono cursor-pointer transition-opacity hover:opacity-100 opacity-85"
                                data-ds="59">
                            💡 {{ dream.improvements_proposed }} improvement{{ "s" if dream.improvements_proposed != 1 else "" }}
                            <svg id="{{ did }}-imp-chev" class="h-2.5 w-2.5 transition-transform duration-200 ml-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                        </button>
                        {% else %}
                        <span class="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full font-mono" data-ds="60">
                            💡 {{ dream.improvements_proposed }} improvement{{ "s" if dream.improvements_proposed != 1 else "" }}
                        </span>
                        {% endif %}
                        {% endif %}
                        {% if dream.prefetch_done %}
                        <span class="text-xs px-2 py-0.5 rounded-full font-mono" data-ds="61">prefetch ✓</span>
                        {% endif %}
                    </div>
                    {# Improvements list accordion #}
                    {% if dream.improvements_json %}
                    <div id="{{ did }}-imp" class="hidden mt-2 mb-1 p-3 rounded-xl" data-ds="62">
                        <ol class="space-y-1.5">
                            {% for imp in dream.improvements_json %}
                            <li class="flex gap-2 items-start">
                                <span class="text-xs font-bold font-mono shrink-0 mt-0.5" data-ds="63">{{ loop.index }}.</span>
                                <span class="text-xs text-base-content/65 leading-relaxed">{{ imp }}</span>
                            </li>
                            {% endfor %}
                        </ol>
                    </div>
                    {% endif %}

                    {# Reflection — first dream fully visible, others in accordion #}
                    {% if dream.reflection %}
                    {% if is_first %}
                    <div class="p-3 rounded-xl mt-3" data-ds="64">
                        <p class="text-xs text-base-content/65 leading-relaxed italic whitespace-pre-wrap">{{ dream.reflection }}</p>
                    </div>
                    {% else %}
                    <div class="mt-3">
                        <button data-action="memory:toggleDream" data-did="{{ did }}"
                                class="flex items-center gap-1.5 text-xs font-mono transition-colors hover:opacity-100 opacity-60"
                                data-ds="65">
                            <svg id="{{ did }}-chev" class="h-3 w-3 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                            read reflection
                        </button>
                        <div id="{{ did }}-body" class="hidden mt-2 p-3 rounded-xl" data-ds="66">
                            <p class="text-xs text-base-content/65 leading-relaxed italic whitespace-pre-wrap">{{ dream.reflection }}</p>
                        </div>
                    </div>
                    {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% else %}
    <div class="card bg-base-100 shadow-sm wasp-accent"><div class="card-body py-12 text-center opacity-30"><p class="text-sm">No dream cycles yet</p></div></div>
    {% endfor %}
</div>

<!-- Dreams Pagination -->
{% if dreams|length == per_page or page > 1 %}
<div class="flex justify-center items-center gap-2 mt-4 mb-2">
    {% if page>1 %}<a href="/memory?tab=dreams&page={{ page-1 }}" class="btn btn-sm btn-ghost gap-1"><svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>Prev</a>{% endif %}
    <button class="btn btn-xs btn-primary font-mono pointer-events-none">{{ page }}</button>
    {% if dreams|length==per_page %}<a href="/memory?tab=dreams&page={{ page+1 }}" class="btn btn-sm btn-ghost gap-1">Next<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></a>{% endif %}
</div>
{% endif %}

{% endif %}{# end tab #}

{% endblock %}

{% block extra_scripts %}
<script nonce="{{ request.state.csp_nonce }}">
(function(){
'use strict';

// Live clock
var cl=document.getElementById('mem-clock');
function tick(){if(!cl)return;var d=new Date(),days=['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],months=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];cl.textContent=days[d.getDay()]+' '+String(d.getDate()).padStart(2,'0')+' '+months[d.getMonth()]+' · '+String(d.getHours()).padStart(2,'0')+':'+String(d.getMinutes()).padStart(2,'0');}
tick();setInterval(tick,30000);

// Animate bars
setTimeout(function(){
    document.querySelectorAll('.mem-bar').forEach(function(b){b.style.width=b.dataset.width+'%';});
},150);

// Entry border hover
document.querySelectorAll('#mem-entries > a').forEach(function(card){
    var bc=card.style.borderLeftColor;
    card.addEventListener('mouseenter',function(){card.style.borderLeftColor=bc.replace(/[\d.]+\)$/,'0.65)');card.style.transform='translateX(2px)';card.style.transition='all .15s ease';});
    card.addEventListener('mouseleave',function(){card.style.borderLeftColor=bc;card.style.transform='translateX(0)';});
});

// ── Store tab: client-side real-time search ───────────────────────────────
var si=document.querySelector('input[name="search"]');
if(si){si.addEventListener('input',function(){
    var q=si.value.toLowerCase().trim();
    document.querySelectorAll('.store-item').forEach(function(el){
        el.style.display=(!q||(el.dataset.search||'').includes(q))?'':'none';
    });
});}

// ── Client-side real-time filter helper ───────────────────────────────────
function _liveFilter(inputId, itemSelector){
    var inp=document.getElementById(inputId);
    if(!inp)return;
    inp.addEventListener('input',function(){
        var q=inp.value.toLowerCase().trim();
        var items=document.querySelectorAll(itemSelector);
        items.forEach(function(el){
            var hay=(el.dataset.search||el.textContent||'').toLowerCase();
            el.style.display=(!q||hay.includes(q))?'':'none';
        });
    });
}
_liveFilter('kg-search',     '.kg-node-item, .kg-rel-item');
_liveFilter('proc-search',   '.proc-item');
_liveFilter('timeline-search','.timeline-item');
_liveFilter('dreams-search', '.dream-item');

// Procedure step accordion
window.toggleProc = function(pid) {
    var steps = document.getElementById(pid + '-steps');
    var chev  = document.getElementById(pid + '-chevron');
    if (!steps) return;
    var hidden = steps.classList.contains('hidden');
    steps.classList.toggle('hidden', !hidden);
    if (chev) chev.style.transform = hidden ? 'rotate(180deg)' : '';
};

// Dream improvements accordion
window.toggleImprovements = function(did) {
    var body = document.getElementById(did + '-imp');
    var chev = document.getElementById(did + '-imp-chev');
    if (!body) return;
    var hidden = body.classList.contains('hidden');
    body.classList.toggle('hidden', !hidden);
    if (chev) chev.style.transform = hidden ? 'rotate(180deg)' : '';
};

// Dream reflection accordion
window.toggleDream = function(did) {
    var body = document.getElementById(did + '-body');
    var chev = document.getElementById(did + '-chev');
    if (!body) return;
    var hidden = body.classList.contains('hidden');
    body.classList.toggle('hidden', !hidden);
    if (chev) chev.style.transform = hidden ? 'rotate(180deg)' : '';
};

// Timeline entity filter
window.filterTimeline = function(entity) {
    var items = document.querySelectorAll('.timeline-item');
    items.forEach(function(el) {
        if (!entity || (el.dataset.entity || '').toLowerCase() === entity.toLowerCase()) {
            el.style.display = '';
        } else {
            el.style.display = 'none';
        }
    });
    // Highlight active chip
    document.querySelectorAll('.timeline-ent-chip').forEach(function(chip) {
        chip.style.opacity = (!entity || chip.textContent.trim() === entity) ? '1' : '0.45';
    });
};

// Slow donut rotation (store tab, unfiltered)
{% if tab=="store" and not current_type %}
(function(){
    var svg=document.querySelector('svg[viewBox="-60 -60 120 120"]');
    if(!svg)return;
    var rot=-90;
    setInterval(function(){rot+=15;svg.style.transform='rotate('+rot+'deg)';svg.style.transition='transform 6s ease-in-out';},8000);
}());
{% endif %}

registerWaspActions('memory', {
  'toggleProc':         function(el) { window.toggleProc(el.dataset.pid); },
  'filterTimeline':     function(el) { window.filterTimeline(el.dataset.entity); },
  'toggleImprovements': function(el) { window.toggleImprovements(el.dataset.did); },
  'toggleDream':        function(el) { window.toggleDream(el.dataset.did); },
});
}());
</script>
{% endblock %}