FabledScribe/frontend/src/views/KnowledgeView.vue

<script setup lang="ts">
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from "vue";
import { useRouter } from "vue-router";
import { apiGet } from "@/api/client";
import type { TaskKind, TaskStatus, TaskPriority } from "@/types/note";
import type { RecordUsage } from "@/types/usage";
import { deadWeightAdvice } from "@/utils/deadWeight";
import KindBadge from "@/components/KindBadge.vue";
import UsageBadge from "@/components/UsageBadge.vue";
import NoteSweepPane from "@/components/NoteSweepPane.vue";
import StatusBadge from "@/components/StatusBadge.vue";
import PriorityBadge from "@/components/PriorityBadge.vue";
import GraphView from "@/views/GraphView.vue";
import {
  FileText,
  CheckSquare,
  Workflow,
  Lightbulb,
  Search,
  Share2,
  ShieldCheck,
  ChevronLeft,
  ChevronRight,
  X,
} from "lucide-vue-next";

const router = useRouter();

// ─── Types ────────────────────────────────────────────────────────────────────

interface KnowledgeItem {
  id: number;
  note_type: "note" | "task" | "process" | "snippet" | "lesson";
  title: string;
  /** ONE SPAN of the record, never the whole thing. On a search this is the
   *  passage that actually matched; on a plain browse it is the opening,
   *  because nothing was matched and no span is better than another. */
  snippet: string;
  /** Which span `snippet` holds. A reader who cannot tell the matched passage
   *  from the document's first paragraph cannot tell whether a card that looks
   *  unrelated really is. */
  snippet_is?: "matched_passage" | "body_opening";
  /** Characters in the whole record, so a long record shown by a short span is
   *  visible as one. */
  body_length?: number;
  tags: string[];
  project_id: number | null;
  created_at: string;
  updated_at: string;
  /** Surfaced-vs-opened counts, zero-filled by the route for EVERY row, so
   *  "never surfaced" is a value here rather than a missing field (#4230).
   *  `UsageBadge` renders nothing at all below one surfacing. */
  usage?: RecordUsage | null;
  // Set only when another user owns this record — their suggestion, not one of
  // yours. Absent means it's yours.
  shared?: boolean;
  owner?: string | null;
  // Task-specific
  status?: string;
  priority?: string;
  due_date?: string;
  task_kind?: TaskKind;
}

// ─── The facet vocabulary ─────────────────────────────────────────────────────
// Mirrors services/knowledge._FACETS, which is where it is defined for real.
// A facet spans BOTH typing axes — a record TYPE (note / process / snippet /
// lesson) or
// a task KIND (`task` for any, else issue / spike) — because that is what this
// feed actually holds.
//
// `plan` is still a valid facet at the API, for the 90 legacy plan-tasks, but
// it has no chip: retired in 0066, it kept a chip of its own for longer than
// `issue` — 17% of every task here — went without one (#3128). Those rows are
// still reachable under Tasks, wearing a Plan badge.
type Facet = "" | "note" | "task" | "issue" | "spike" | "snippet" | "process" | "lesson";

// The facets that select TASKS. Kinds are subsets of `task`, so any of them
// means the duplicate report should be comparing tasks.
const TASK_FACETS = new Set<Facet>(["task", "issue", "spike"]);

const FACET_CHIPS: [Exclude<Facet, "">, string][] = [
  ["note", "Notes"],
  ["task", "Tasks"],
  ["issue", "Issues"],
  ["spike", "Spikes"],
  ["snippet", "Snippets"],
  ["process", "Processes"],
  ["lesson", "Lessons"],
];

// ─── View mode ────────────────────────────────────────────────────────────────
// The sweep is cross-cutting — a note that has gone false does not care which
// facet it sits under — so it REPLACES the browse list rather than filtering
// it. Filtering would mean the answer depended on which chip was active, which
// is the under-reporting the sweep exists to prevent (milestone 317 step 4).
const sweepActive = ref(false);

// ─── Filter state ─────────────────────────────────────────────────────────────

const activeType = ref<Facet>("");
const activeTag = ref("");
const sortMode = ref<"modified" | "created" | "alpha" | "type">("modified");
const searchQuery = ref("");
let searchDebounce: ReturnType<typeof setTimeout> | null = null;

// ─── Near-duplicate report ────────────────────────────────────────────────────
// On demand, never automatic — a corpus-wide pairwise scan, and most visits to
// this page aren't a tidy-up (same reasoning as SnippetListView's report).

interface DupMember {
  id: number; title: string;
  created_at?: string | null; updated_at?: string | null;
  task_kind?: string | null;
}
interface DupGroup {
  note_ids: number[];
  members: DupMember[];
  top_score: number;
  existing_supersessions?: { superseder_id: number; superseded_id: number }[];
}

const dupGroups = ref<DupGroup[]>([]);
const dupSuggestion = ref("");
const dupLoading = ref(false);
const dupChecked = ref(false);
// The report follows the type filter: viewing tasks — under ANY task facet,
// including a single kind — checks tasks. Everything else checks notes, the
// kind with the most to find.
const dupKind = computed(() => (TASK_FACETS.has(activeType.value) ? "task" : "note"));

async function loadDuplicates() {
  dupLoading.value = true;
  try {
    const data = await apiGet<{ groups: DupGroup[]; suggestion: string }>(
      `/api/notes/duplicates?kind=${dupKind.value}`
    );
    dupGroups.value = data.groups;
    dupSuggestion.value = data.suggestion;
    dupChecked.value = true;
  } catch {
    dupChecked.value = false;
  } finally {
    dupLoading.value = false;
  }
}

// A stale report is worse than none: switching the type filter changes which
// kind the button checks, so the old kind's groups must not linger under it.
watch(dupKind, () => { dupChecked.value = false; dupGroups.value = []; });

// ─── Type counts ──────────────────────────────────────────────────────────────

// One number per facet, plus the grand total. Partial because the server sends
// a key only for a facet it has rows for. Kinds are subsets of `task` and are
// deliberately absent from `total` — including them would count an issue twice.
type KnowledgeCounts = Partial<Record<Exclude<Facet, "">, number>> & { total: number };
const typeCounts = ref<KnowledgeCounts>({ total: 0 });

async function fetchCounts() {
  try {
    const p = new URLSearchParams();
    if (activeTag.value) p.set("tags", activeTag.value);
    typeCounts.value = await apiGet<KnowledgeCounts>(`/api/knowledge/counts?${p}`);
  } catch { /* silent */ }
}

// ─── New note dropdown ────────────────────────────────────────────────────────

const newNoteMenuOpen = ref(false);

function createNew(type: string) {
  newNoteMenuOpen.value = false;
  if (type === "task") {
    router.push("/tasks/new");
  } else if (type === "lesson") {
    // Its own editor, not /notes/new?type=lesson: the note editor offers one
    // markdown box, and a lesson written that way saves without a trigger and
    // never surfaces. The form has to ASK for the field by name.
    router.push("/lessons/new");
  } else {
    router.push(type === "note" ? "/notes/new" : `/notes/new?type=${type}`);
  }
}

function onClickOutsideNewNote(e: MouseEvent) {
  const wrap = document.querySelector('.new-note-wrap');
  if (wrap && !wrap.contains(e.target as Node)) {
    newNoteMenuOpen.value = false;
  }
}

// ─── Two-tier pagination ──────────────────────────────────────────────────────

const ID_BATCH = 100;         // IDs fetched per server round-trip
const INITIAL_CONTENT = 50;   // items loaded on first render
const CONTENT_PAGE = 24;      // items loaded per sentinel trigger
const REFILL_THRESHOLD = 48;  // fetch more IDs when queue drops below this

const items = ref<KnowledgeItem[]>([]);

// True only when a search actually returned matched passages — not merely when
// the box has text in it. A keyword-only result set, or an embedder that is
// down, carries `body_opening` rows, and claiming otherwise would be the same
// species of lie this whole change is about (#4243).
const showsMatchedPassages = computed(
  () =>
    searchQuery.value.trim().length > 0 &&
    items.value.some((i) => i.snippet_is === "matched_passage"),
);
const allTags = ref<string[]>([]);
const idQueue = ref<number[]>([]);   // unloaded IDs ready to be content-fetched
const idOffset = ref(0);             // next offset for ID batch requests
const totalKnowledge = ref(0);       // total matching items on server
const allIdsFetched = ref(false);    // no more ID pages to fetch
const idsFetching = ref(false);      // ID batch request in-flight
const contentFetching = ref(false);  // content batch request in-flight
const sentinelVisible = ref(false);  // updated by IntersectionObserver

const loading = computed(() => idsFetching.value || contentFetching.value);

let fetchGen = 0;  // incremented on each reset to invalidate stale responses

function buildFilterParams(): URLSearchParams {
  const p = new URLSearchParams();
  if (activeType.value) p.set("type", activeType.value);
  if (activeTag.value) p.set("tags", activeTag.value);
  p.set("sort", sortMode.value);
  if (searchQuery.value.trim()) p.set("q", searchQuery.value.trim());
  return p;
}

async function fetchIdBatch(gen: number) {
  if (idsFetching.value || allIdsFetched.value) return;
  idsFetching.value = true;
  try {
    const p = buildFilterParams();
    p.set("limit", String(ID_BATCH));
    p.set("offset", String(idOffset.value));
    const data = await apiGet<{ ids: number[]; total: number; has_more: boolean }>(
      `/api/knowledge/ids?${p}`
    );
    if (gen !== fetchGen) return;
    idQueue.value.push(...data.ids);
    idOffset.value += data.ids.length;
    totalKnowledge.value = data.total;
    if (!data.has_more) allIdsFetched.value = true;
  } catch { /* silent */ }
  finally { if (gen === fetchGen) idsFetching.value = false; }
}

async function loadNextContent(gen: number, count: number) {
  if (contentFetching.value || idQueue.value.length === 0) return;
  const toLoad = idQueue.value.splice(0, count);  // claim IDs immediately
  contentFetching.value = true;
  try {
    const data = await apiGet<{ items: KnowledgeItem[] }>(
      `/api/knowledge/batch?ids=${toLoad.join(",")}`
    );
    if (gen !== fetchGen) return;
    items.value.push(...data.items);
    // Proactively refill ID queue before it runs out
    if (idQueue.value.length < REFILL_THRESHOLD && !allIdsFetched.value && !idsFetching.value) {
      fetchIdBatch(gen);
    }
  } catch { /* silent */ }
  finally {
    if (gen !== fetchGen) return;
    contentFetching.value = false;
    // Sentinel may still be visible if new items didn't push it off screen
    await nextTick();
    if (sentinelVisible.value && idQueue.value.length > 0 && gen === fetchGen) {
      loadNextContent(gen, CONTENT_PAGE);
    }
  }
}

async function reset() {
  fetchGen++;
  const gen = fetchGen;
  items.value = [];
  idQueue.value = [];
  idOffset.value = 0;
  totalKnowledge.value = 0;
  allIdsFetched.value = false;
  await fetchIdBatch(gen);
  if (gen !== fetchGen) return;
  await loadNextContent(gen, INITIAL_CONTENT);
}

async function fetchTags() {
  try {
    const data = await apiGet<{ tags: string[] }>("/api/knowledge/tags");
    allTags.value = data.tags;
  } catch { /* silent */ }
}

async function resetAndReobserve() {
  await reset();
  await nextTick();
  setupObserver();
}

function onSearchInput() {
  if (searchDebounce) clearTimeout(searchDebounce);
  searchDebounce = setTimeout(() => resetAndReobserve(), 380);
}

watch([activeType, sortMode], () => resetAndReobserve());
// Closing the sweep remounts the feed, and with it the scroll sentinel — a
// fresh element the old observer is not watching. Without this the list loads
// its first page and then never loads another.
watch(sweepActive, (open) => { if (!open) resetAndReobserve(); });
watch(activeTag, () => { fetchCounts(); resetAndReobserve(); });

// ─── Today bar ────────────────────────────────────────────────────────────────

const overdueCount = ref(0);

async function fetchTodayBar() {
  try {
    const taskData = await apiGet<{ total: number }>(
      `/api/tasks?status=todo&status=in_progress&overdue=true&limit=1`
    ).catch(() => ({ total: 0 }));
    overdueCount.value = taskData.total ?? 0;
  } catch { /* silent */ }
}

// ─── Graph panel ──────────────────────────────────────────────────────────────

const _GRAPH_OPEN_KEY = 'fa_knowledge_graph_open'
const _GRAPH_EXP_KEY  = 'fa_knowledge_graph_expanded'

const graphOpen     = ref(localStorage.getItem(_GRAPH_OPEN_KEY) === 'true')
const graphExpanded = ref(localStorage.getItem(_GRAPH_EXP_KEY)  === 'true')

function toggleGraph() {
  graphOpen.value = !graphOpen.value
  localStorage.setItem(_GRAPH_OPEN_KEY, String(graphOpen.value))
}

function toggleGraphExpand() {
  graphExpanded.value = !graphExpanded.value
  localStorage.setItem(_GRAPH_EXP_KEY, String(graphExpanded.value))
}

// ─── Navigation helpers ───────────────────────────────────────────────────────

function isOverdue(item: KnowledgeItem): boolean {
  if (!item.due_date || item.status === 'done' || item.status === 'cancelled') return false;
  return new Date(item.due_date) < new Date(new Date().toDateString());
}

// Each record kind opens in ITS OWN editor. A snippet used to fall through to
// /notes/:id, whose save is a plain PATCH of the body — which left the snippet's
// derived `data` mirror describing the previous version (#3128). The service now
// recomposes the mirror either way, so this is no longer the guard; it is simply
// that the note editor cannot edit a snippet's signature, language or locations,
// and offering it as the way in was always wrong. Processes stay here on
// purpose: they have no editor of their own and the note editor knows the type.
function openItem(item: KnowledgeItem) {
  if (item.note_type === 'task') {
    router.push(`/tasks/${item.id}`);
  } else if (item.note_type === 'snippet') {
    router.push(`/snippets/${item.id}`);
  } else if (item.note_type === 'lesson') {
    router.push(`/lessons/${item.id}`);
  } else {
    router.push(`/notes/${item.id}`);
  }
}

function formatDate(iso: string): string {
  const d = new Date(iso);
  const now = new Date();
  const diff = now.getTime() - d.getTime();
  const days = Math.floor(diff / 86_400_000);
  if (days === 0) return "Today";
  if (days === 1) return "Yesterday";
  if (days < 7) return `${days}d ago`;
  if (d.getFullYear() === now.getFullYear()) return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
  return d.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" });
}

// ─── Sentinel observer ────────────────────────────────────────────────────────

const sentinelEl = ref<HTMLElement | null>(null);
let observer: IntersectionObserver | null = null;

function setupObserver() {
  observer?.disconnect();
  if (!sentinelEl.value) return;
  observer = new IntersectionObserver(
    ([entry]) => {
      sentinelVisible.value = entry.isIntersecting;
      if (entry.isIntersecting) loadNextContent(fetchGen, CONTENT_PAGE);
    },
    { root: null, rootMargin: "200px" }
  );
  observer.observe(sentinelEl.value);
}

// ─── Lifecycle ────────────────────────────────────────────────────────────────

onMounted(async () => {
  document.addEventListener('click', onClickOutsideNewNote);
  await reset();
  fetchTags();
  fetchCounts();
  fetchTodayBar();
  await nextTick();
  setupObserver();
});

onUnmounted(() => {
  document.removeEventListener('click', onClickOutsideNewNote);
  if (searchDebounce) clearTimeout(searchDebounce);
  observer?.disconnect();
});
</script>

<template>
  <div class="knowledge-root" :class="{ 'graph-open': graphOpen, 'graph-expanded': graphExpanded && graphOpen }">

    <!-- Today bar -->
    <div v-if="overdueCount > 0" class="today-bar">
      <div class="today-actions">
        <router-link to="/tasks" class="overdue-badge">
          {{ overdueCount }} overdue
        </router-link>
      </div>
    </div>

    <!-- Main layout -->
    <div class="knowledge-layout">

      <!-- Filter panel -->
      <aside class="filter-panel">
        <!-- New note button -->
        <div class="new-note-wrap">
          <button class="btn-new-note" @click="newNoteMenuOpen = !newNoteMenuOpen">
            <span class="btn-new-icon">+</span> New
          </button>
          <div v-if="newNoteMenuOpen" class="new-note-menu">
            <button @click="createNew('note')">
              <FileText :size="16" />
              Note
            </button>
            <button @click="createNew('task')">
              <CheckSquare :size="16" />
              Task
            </button>
            <button @click="createNew('process')">
              <Workflow :size="16" />
              Process
            </button>
            <button @click="createNew('lesson')">
              <Lightbulb :size="16" />
              Lesson
            </button>
          </div>
        </div>

        <div class="filter-section">
          <div class="filter-label">Type</div>
          <button
            class="filter-btn"
            :class="{ active: activeType === '' }"
            @click="activeType = ''"
          >
            <span class="filter-btn-label">All</span>
            <span v-if="typeCounts.total > 1" class="filter-count">{{ typeCounts.total }}</span>
          </button>
          <button
            v-for="[val, label] in FACET_CHIPS"
            :key="val"
            class="filter-btn"
            :class="{ active: activeType === val }"
            @click="activeType = val"
          >
            <span class="filter-btn-label">{{ label }}</span>
            <span v-if="(typeCounts[val] ?? 0) > 1" class="filter-count">{{ typeCounts[val] }}</span>
          </button>
        </div>

        <div v-if="allTags.length > 0" class="filter-section">
          <div class="filter-label">Tags</div>
          <button
            class="filter-btn filter-tag"
            :class="{ active: activeTag === '' }"
            @click="activeTag = ''"
          >All tags</button>
          <button
            v-for="tag in allTags"
            :key="tag"
            class="filter-btn filter-tag"
            :class="{ active: activeTag === tag }"
            @click="activeTag = activeTag === tag ? '' : tag"
          >{{ tag }}</button>
        </div>
      </aside>

      <!-- Content area -->
      <div class="knowledge-content">

        <!-- Toolbar -->
        <div class="knowledge-toolbar">
          <div class="search-wrap">
            <Search class="search-icon" :size="16" />
            <input
              v-model="searchQuery"
              @input="onSearchInput"
              type="text"
              class="search-input"
              placeholder="Search knowledge…"
            />
          </div>
          <select v-model="sortMode" class="sort-select">
            <option value="modified">Recently modified</option>
            <option value="created">Recently created</option>
            <option value="alpha">Alphabetical</option>
            <option value="type">By type</option>
          </select>
          <button class="btn-ghost btn-compact" :class="{ active: graphOpen }" @click="toggleGraph" title="Toggle graph view">
            <Share2 :size="16" />
            Graph
          </button>
          <button
            class="btn-ghost btn-compact"
            :class="{ active: sweepActive }"
            title="Notes that assert a fact about something outside your control, least-recently-confirmed first. Most notes are decisions and never appear."
            @click="sweepActive = !sweepActive"
          >
            <ShieldCheck :size="16" />
            Due
          </button>
          <button
            class="btn-ghost btn-compact"
            :disabled="dupLoading"
            title="Find notes or tasks already recorded that closely resemble each other — the report proposes, it never changes anything"
            @click="loadDuplicates"
          >
            {{ dupLoading ? "Checking…" : "Find duplicates" }}
          </button>
        </div>

        <!-- The sweep replaces the feed. It is not a facet: a facet answers
             "show me this kind", and this answers "show me what nobody has
             confirmed" — a question the type chips cannot narrow without
             under-reporting it. -->
        <NoteSweepPane v-if="sweepActive" @open-note="(id) => router.push(`/notes/${id}`)" />

        <!-- Near-duplicate report. A proposal surface only: unlike snippets
             (which merge losslessly), notes are never merged — the right fix is
             supersession, extraction into a reference note, or leaving parallel
             records alone, and choosing needs the records READ. That reading is
             the assistant's job; this panel shows the human what exists. -->
        <div v-if="dupChecked && !dupLoading" class="dup-panel">
          <p v-if="!dupGroups.length" class="dup-empty">
            No near-duplicate {{ dupKind }}s found — nothing recorded resembles
            anything else closely enough to flag.
          </p>
          <template v-else>
            <p class="dup-head">
              {{ dupGroups.length }} possible duplicate
              {{ dupGroups.length > 1 ? "sets" : "set" }} among your
              {{ dupKind }}s. {{ dupSuggestion }}
            </p>
            <div v-for="(g, i) in dupGroups" :key="i" class="dup-group">
              <div class="dup-members">
                <router-link
                  v-for="m in g.members"
                  :key="m.id"
                  class="dup-member"
                  :to="dupKind === 'task' ? `/tasks/${m.id}` : `/notes/${m.id}`"
                >
                  #{{ m.id }} {{ m.title }}
                </router-link>
              </div>
              <span class="dup-score">{{ Math.round(g.top_score * 100) }}% alike</span>
              <span
                v-if="g.existing_supersessions?.length"
                class="dup-claimed"
                title="A supersession has already been declared inside this set — it is not an open question"
              >already ruled on</span>
            </div>
          </template>
        </div>

        <!-- The whole feed stands down while the sweep is open: two answers
             to two different questions on one screen is neither. Wrapped
             rather than given an extra v-if branch, because the scroll
             sentinel lives inside the grid and the observer must not be left
             holding a ref to something that never renders. -->
        <template v-if="!sweepActive">
        <!-- Loading / empty -->
        <div v-if="loading && items.length === 0" class="knowledge-empty">Loading…</div>
        <div v-else-if="!loading && items.length === 0" class="knowledge-empty">
          <p v-if="activeType || activeTag || searchQuery" class="empty-hint">No matches. Try clearing the filters.</p>
          <p v-else class="empty-narrator">Your story is unwritten. Create your first note to begin.</p>
        </div>

        <!-- Said once above the grid rather than per card: it is true of every
             row at once, and a label repeated on each would cost more than it
             tells. Only while a query is active — on a plain browse nothing
             matched, so there is no matched passage to explain. -->
        <p v-else-if="showsMatchedPassages" class="k-excerpt-note">
          Excerpts below are the passage that matched your search, not the start of each record.
        </p>

        <!-- Card grid -->
        <div v-if="items.length" class="card-grid">
          <div
            v-for="item in items"
            :key="item.id"
            class="k-card"
            :class="`k-card--${item.note_type}`"
            @click="openItem(item)"
          >
            <!-- Type badge -->
            <span class="type-badge" :class="item.task_kind === 'plan' ? 'badge--plan' : `badge--${item.note_type}`">
              <span v-if="item.note_type === 'note'">Note</span>
              <span v-else-if="item.note_type === 'task'">{{ item.task_kind === 'plan' ? 'Plan' : 'Task' }}</span>
              <span v-else-if="item.note_type === 'process'">Process</span>
              <span v-else-if="item.note_type === 'snippet'">Snippet</span>
              <span v-else-if="item.note_type === 'lesson'">Lesson</span>
            </span>
            <!-- Kind sits BESIDE the type badge, not inside it: the type badge
                 speaks the vocabulary of this view's type filter (note / task /
                 plan / process), and kind is the other axis. `plan` is passed
                 as null because the badge to the left already says it — two
                 chips reading "Plan" would look like two facts. -->
            <KindBadge :kind="item.task_kind === 'plan' ? null : item.task_kind" />

            <div class="k-card-body">
              <div class="k-card-title">{{ item.title }}</div>

              <!-- Task specifics -->
              <div v-if="item.note_type === 'task'" class="k-card-task">
                <div class="task-badges">
                  <StatusBadge v-if="item.status" :status="item.status as TaskStatus" compact />
                  <PriorityBadge
                    v-if="item.priority && item.priority !== 'none'"
                    :priority="item.priority as TaskPriority"
                    compact
                  />
                </div>
                <span
                  v-if="item.due_date"
                  class="task-due"
                  :class="{ 'task-overdue': isOverdue(item) }"
                >{{ formatDate(item.due_date) }}</span>
                <p v-if="item.snippet" class="k-card-snippet">{{ item.snippet }}</p>
              </div>

              <!-- Note snippet -->
              <p v-else-if="item.snippet" class="k-card-snippet">{{ item.snippet }}</p>
            </div>

            <div class="k-card-footer">
              <div class="k-card-tags">
                <span v-for="tag in item.tags.slice(0, 3)" :key="tag" class="tag-pill">{{ tag }}</span>
              </div>
              <span
                v-if="item.shared"
                class="shared-tag"
                :title="`Shared by ${item.owner ?? 'another user'} — their record, not yours`"
              >by {{ item.owner ?? "another user" }}</span>
              <!-- Surfaced-vs-opened (#4230). This is the only list in the UI
                   that browses notes and lessons, so it is the only place
                   those two kinds can show the counter at all. The advice is
                   looked up per row because this feed is mixed — the remedy
                   for a snippet nobody opens is not the remedy for a lesson. -->
              <UsageBadge
                :usage="item.usage"
                :noun="item.note_type"
                :dead-weight-advice="deadWeightAdvice(item.note_type)"
              />
              <span class="k-card-date">{{ formatDate(item.updated_at) }}</span>
            </div>
          </div>

          <!-- Sentinel — IntersectionObserver triggers next content batch -->
          <div ref="sentinelEl" class="scroll-sentinel">
            <span v-if="contentFetching" class="sentinel-loading">Loading…</span>
          </div>
        </div>
        </template>
      </div>

      <!-- Graph panel -->
      <aside v-if="graphOpen" class="graph-panel" :class="{ expanded: graphExpanded }">
        <div class="graph-panel-header">
          <span>Graph</span>
          <div style="display:flex;gap:4px;align-items:center">
            <button
              class="btn-text"
              @click="toggleGraphExpand"
              :title="graphExpanded ? 'Narrow panel' : 'Expand panel'"
            >
              <ChevronLeft v-if="graphExpanded" :size="16" />
              <ChevronRight v-else :size="16" />
            </button>
            <button class="btn-text" @click="toggleGraph" title="Close graph">
              <X :size="16" />
            </button>
          </div>
        </div>
        <div class="graph-embed">
          <GraphView :embedded="true" />
        </div>
      </aside>

    </div><!-- end knowledge-layout -->

  </div>
</template>

<style src="@/assets/dup-report.css" />
<style scoped>
/* ── Root layout ─────────────────────────────────────────── */
.knowledge-root {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--fs-layout-header));
  overflow: hidden;
}

/* ── Today bar ───────────────────────────────────────────── */
.today-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 20px;
  background: var(--fs-surface-raised);
  border-bottom: 1px solid var(--fs-border-color);
  flex-shrink: 0;
  font-size: 0.82rem;
  flex-wrap: wrap;
}
.today-actions { display: flex; align-items: center; gap: 10px; }
.overdue-badge {
  padding: 2px 9px;
  border-radius: 12px;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.25);
  color: #f87171;
  text-decoration: none;
  font-size: 0.78rem;
}

/* ── Main layout ─────────────────────────────────────────── */
.knowledge-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Filter panel ────────────────────────────────────────── */
.filter-panel {
  width: var(--fs-layout-sidebar);
  flex-shrink: 0;
  padding: 16px 12px;
  border-right: 1px solid var(--fs-border-color);
  overflow-y: auto;
  background: var(--fs-surface-raised);
}
.filter-section { margin-bottom: 20px; }
.filter-section + .filter-section::before {
  content: '· · ·';
  display: block;
  text-align: center;
  color: color-mix(in srgb, var(--fs-accent) 30%, transparent);
  font-size: 0.9rem;
  letter-spacing: 0.4em;
  padding: 4px 0 12px;
}
.filter-label {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 0.95rem;
  color: var(--fs-accent);
  margin-bottom: 8px;
  padding: 0 4px;
}
/* ── New item button ─────────────────────────────────────── */
.new-note-wrap {
  position: relative;
  margin-bottom: 16px;
}
.btn-new-note {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: none;
  background: var(--fs-gradient-cta);
  color: var(--fs-text-on-action);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: box-shadow 0.15s;
}
.btn-new-note:hover { box-shadow: var(--fs-glow-cta-hover); }
.btn-new-icon {
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 300;
}
.new-note-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--fs-surface-raised);
  border: 1px solid var(--fs-border-color);
  border-radius: 10px;
  overflow: hidden;
  z-index: 50;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  padding: 4px 0;
}
.new-note-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  background: none;
  border: none;
  color: var(--fs-text-primary);
  cursor: pointer;
  font-size: 0.84rem;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.new-note-menu button:hover {
  background: var(--fs-accent-soft);
  color: var(--fs-accent);
}
.new-note-menu button svg {
  flex-shrink: 0;
  opacity: 0.6;
}
.new-note-menu button:hover svg {
  opacity: 1;
  stroke: var(--fs-accent);
}

.filter-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: 5px 8px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--fs-text-primary);
  cursor: pointer;
  font-size: 0.85rem;
  margin-bottom: 2px;
  transition: background 0.12s, color 0.12s;
  opacity: 0.75;
}
.filter-btn:hover { background: rgba(255,255,255,0.05); opacity: 1; }
.filter-btn.active {
  background: var(--fs-accent-wash);
  color: var(--fs-accent);
  opacity: 1;
}
.filter-btn-label { flex: 1; }
.filter-count {
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
  color: var(--fs-text-tertiary);
  font-weight: 500;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.filter-btn.active .filter-count {
  background: color-mix(in srgb, var(--fs-accent) 20%, transparent);
  color: var(--fs-accent-fg);
}
.filter-tag { font-size: 0.78rem; }

/* ── Content area ────────────────────────────────────────── */
.knowledge-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ── Toolbar ─────────────────────────────────────────────── */
.knowledge-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--fs-border-color);
}
.search-wrap {
  flex: 1;
  position: relative;
}
.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fs-text-tertiary);
  pointer-events: none;
}
.search-input {
  width: 100%;
  padding: 7px 12px 7px 32px;
  border-radius: 8px;
  border: 1px solid var(--fs-border-color);
  background: var(--fs-surface-hover);
  color: var(--fs-text-primary);
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.15s;
}
.search-input:focus { border-color: var(--fs-accent); }
.sort-select {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--fs-border-color);
  background: var(--fs-surface-hover);
  color: var(--fs-text-primary);
  font-size: 0.85rem;
  cursor: pointer;
  outline: none;
}

/* ── Card grid ───────────────────────────────────────────── */
.card-grid {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  align-content: start;
}

.k-card {
  position: relative;
  background: var(--fs-surface-hover);
  border: 1px solid var(--fs-border-color);
  border-radius: var(--fs-radius-xl);
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 160px;
  overflow: hidden;
}
.k-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--fs-accent) 25%, transparent), 0 2px 8px rgba(0, 0, 0, 0.3);
  border-color: color-mix(in srgb, var(--fs-accent) 35%, transparent);
}

/* Type-specific card DNA */
.k-card--note   { border-color: color-mix(in srgb, var(--fs-accent) 20%, transparent); }
.k-card--task   { border-color: rgba(212, 160, 23, 0.18); }

/* Top gradient bars */
.k-card--note::before,
.k-card--task::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
}
.k-card--note::before {
  right: 0;
  background: linear-gradient(90deg, var(--fs-accent), #7A6DA8);
}
.k-card--task::before {
  right: 0;
  background: linear-gradient(90deg, #d4a017, #fbbf24);
}

/* Type badge */
.type-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge--note   { background: color-mix(in srgb, var(--fs-accent) 15%, transparent); color: #7A6DA8; }
.badge--task   { background: rgba(212,160,23,0.15); color: #fbbf24; }
.badge--plan   { background: rgba(99,102,241,0.18); color: #818cf8; }
/* Snippet and process are NEUTRAL on purpose. Both were unstyled — and the
   snippet had no label either, so all 90 of them rendered an empty chip in
   this feed (#3128). Giving them hues would put a third and fourth colour
   beside KindBadge's warm/cool pair on the same card; a record type that
   isn't an alarm reads better as plain. Standard body pair, so the contrast
   is the one the palette already guarantees. */
.badge--snippet,
.badge--process,
/* A lesson joins the neutral pair for the same reason, and one of its own: it
   binds nobody. A hue here would make the softest record in the corpus look
   like the loudest, beside a rule that actually is binding. */
.badge--lesson { background: var(--fs-surface-raised); color: var(--fs-text-secondary); }

.k-card-body { flex: 1; padding-right: 40px; }
.k-card-title {
  font-weight: 500;
  font-size: 0.92rem;
  margin-bottom: 5px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.k-card-snippet {
  font-size: 0.8rem;
  color: var(--fs-text-tertiary);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
  margin: 0;
}
.k-excerpt-note {
  font-size: 0.8rem;
  color: var(--fs-text-tertiary);
  margin: 0 0 var(--fs-space-3);
}
.k-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.k-card-tags { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.tag-pill {
  font-size: 0.68rem;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: var(--fs-text-tertiary);
}
.k-card-date { font-size: 0.72rem; color: var(--fs-text-secondary); white-space: nowrap; opacity: 0.7; }
/* Only rendered for a record another user owns, so an unmarked card is
   unambiguously the viewer's own. */
.shared-tag {
  font-size: 0.68rem;
  padding: 0.08rem 0.35rem;
  border-radius: 4px;
  white-space: nowrap;
  background: color-mix(in srgb, var(--fs-text-secondary) 15%, transparent);
  color: var(--fs-text-secondary-fg);
}

/* ── Task card ──────────────────────────────────────────── */
.k-card-task {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.task-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}


.task-due {
  font-size: 0.78rem;
  color: var(--fs-text-secondary);
}
.task-overdue {
  color: var(--fs-overdue);
  font-weight: 500;
}

/* ── Empty / loading ─────────────────────────────────────── */
.knowledge-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--fs-text-tertiary);
  text-align: center;
  gap: 6px;
}
.empty-hint { font-size: 0.85rem; opacity: 0.7; }
.empty-narrator {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem;
  color: var(--fs-text-secondary);
  opacity: 0.85;
}

/* ── Sentinel ────────────────────────────────────────────── */
.scroll-sentinel {
  grid-column: 1 / -1;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sentinel-loading {
  font-size: 0.8rem;
  color: var(--fs-text-tertiary);
}

/* ── Graph panel ─────────────────────────────────────────── */
.graph-panel {
  width: 500px;
  flex-shrink: 0;
  border-left: 1px solid var(--fs-border-color);
  display: flex;
  flex-direction: column;
  background: var(--fs-surface-raised);
  transition: width 0.2s ease;
}
.graph-panel.expanded {
  width: min(960px, 60vw);
}
.graph-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  border-bottom: 1px solid var(--fs-border-color);
  flex-shrink: 0;
}
/* RESTORED (#2444). The panel is a flex COLUMN and its header is
   `flex-shrink: 0`, so this is the item that takes the remaining height — and
   without it the `height: 100%` below resolves against `auto` and does
   nothing, which made the comment underneath a spec for a rule that could not
   work. `min-height: 0` is the companion that lets a flex item shrink under
   its content instead of overflowing the panel. */
.graph-embed {
  flex: 1;
  min-height: 0;
}

/* Override GraphView's 100vh height so it fills the panel instead */
.graph-embed :deep(.graph-page) {
  height: 100%;
}

/* A set someone already ruled on — quiet, not celebratory: it means "skip". */
.dup-claimed {
  font-size: 0.72rem;
  color: var(--fs-text-tertiary);
  border: 1px solid var(--fs-border-color);
  border-radius: 4px;
  padding: 0.05rem 0.4rem;
  white-space: nowrap;
}
</style>