@mndrk/agx 2.0.26 → 2.0.33

package/cloud-runtime/standalone/app/projects/[slug]/knowledge/page.tsx

@@ -0,0 +1,792 @@
+"use client";
+
+import { useState, useEffect, use } from "react";
+import { Markdown } from "@/components/chat-ui/Markdown";
+import {
+  BrainCircuit,
+  FileText,
+  FolderGit2,
+  MessageSquare,
+  Plus,
+  Search,
+  SquarePen,
+  Trash2,
+  X,
+} from "lucide-react";
+import { useProjects } from "@/hooks/useProjects";
+import { useProjectMemory, useProjectSkills } from "@/hooks/useProjectResources";
+
+type KnowledgeTab = "project" | "repos";
+
+type SystemNote = {
+  id: string;
+  content: string;
+  created_at?: string;
+  updated_at?: string;
+  source?: string;
+};
+
+function mapKnowledgeNoteToSystemNote(note: {
+  id: string;
+  content: string;
+  createdAt?: string;
+  updatedAt?: string;
+  sourceType?: string;
+} | null | undefined): SystemNote | null {
+  if (!note) return null;
+  return {
+    id: note.id,
+    content: note.content,
+    created_at: note.createdAt,
+    updated_at: note.updatedAt,
+    source: note.sourceType,
+  };
+}
+
+export default function ProjectKnowledgePage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = use(params);
+
+  const { projects } = useProjects();
+  const currentProject = projects.find((project) => project.slug === slug);
+  const projectId = currentProject?.id ?? null;
+
+  const { skills: projectSkills, addSkill, removeSkill } = useProjectSkills(projectId);
+  const { memory: projectMemory, addMemory, deleteMemory } = useProjectMemory(projectId);
+
+  const [activeTab, setActiveTab] = useState<KnowledgeTab>("project");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [showAddReference, setShowAddReference] = useState(false);
+  const [newKnowledgeFile, setNewKnowledgeFile] = useState("");
+  const [newKnowledgeCondition, setNewKnowledgeCondition] = useState("");
+  const [newKnowledgeNote, setNewKnowledgeNote] = useState("");
+  const [projectSystemNote, setProjectSystemNote] = useState<SystemNote | null>(null);
+  const [repoDrafts, setRepoDrafts] = useState<Record<string, string>>({});
+  const [repoSystemNotes, setRepoSystemNotes] = useState<Record<string, SystemNote | null>>({});
+
+  useEffect(() => {
+    if (!currentProject?.repos) return;
+    setRepoDrafts((prev) => {
+      const next: Record<string, string> = {};
+      for (const repo of currentProject.repos) {
+        next[repo.id] = prev[repo.id] ?? repo.notes ?? "";
+      }
+      return next;
+    });
+  }, [currentProject?.repos]);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function loadHumanRepoKnowledge() {
+      const repos = currentProject?.repos ?? [];
+      if (repos.length === 0) return;
+      try {
+        const entries = await Promise.all(
+          repos.map(async (repo) => {
+            const res = await fetch(`/api/repos/${repo.id}/knowledge?producer=human`);
+            const data = res.ok ? await res.json() : { knowledge: [] };
+            const text = (data.knowledge ?? [])
+              .map((entry: { content?: string }) => String(entry.content ?? "").trim())
+              .filter(Boolean)
+              .join("\n\n");
+            return [repo.id, text] as const;
+          })
+        );
+        if (!cancelled) {
+          setRepoDrafts((prev) => {
+            const next = { ...prev };
+            for (const [repoId, text] of entries) {
+              if (text) next[repoId] = text;
+            }
+            return next;
+          });
+        }
+      } catch {
+        // Keep repo.notes fallback
+      }
+    }
+    void loadHumanRepoKnowledge();
+    return () => {
+      cancelled = true;
+    };
+  }, [currentProject?.repos]);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function loadProjectSystemNote() {
+      if (!projectId) {
+        setProjectSystemNote(null);
+        return;
+      }
+      try {
+        const res = await fetch(`/api/knowledge-notes?scope=project&subjectId=${encodeURIComponent(projectId)}`);
+        const data = res.ok ? await res.json() : { note: null };
+        if (!cancelled) {
+          setProjectSystemNote(mapKnowledgeNoteToSystemNote(data.note));
+        }
+      } catch {
+        if (!cancelled) setProjectSystemNote(null);
+      }
+    }
+    void loadProjectSystemNote();
+    return () => {
+      cancelled = true;
+    };
+  }, [projectId]);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function loadRepoSystemNotes() {
+      const repos = currentProject?.repos ?? [];
+      if (repos.length === 0) {
+        setRepoSystemNotes({});
+        return;
+      }
+      try {
+        const entries = await Promise.all(
+          repos.map(async (repo) => {
+            const res = await fetch(`/api/knowledge-notes?scope=repo&subjectId=${encodeURIComponent(repo.id)}`);
+            const data = res.ok ? await res.json() : { note: null };
+            return [repo.id, mapKnowledgeNoteToSystemNote(data.note)] as const;
+          })
+        );
+        if (!cancelled) {
+          setRepoSystemNotes(Object.fromEntries(entries));
+        }
+      } catch {
+        if (!cancelled) setRepoSystemNotes({});
+      }
+    }
+    void loadRepoSystemNotes();
+    return () => {
+      cancelled = true;
+    };
+  }, [currentProject?.repos]);
+
+  const filteredSkills = projectSkills.filter(
+    (skill) =>
+      !searchQuery ||
+      skill.file.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (skill.condition ?? "").toLowerCase().includes(searchQuery.toLowerCase())
+  );
+  const filteredMemory = projectMemory.filter(
+    (memory) => !searchQuery || memory.content.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+  const projectNoteMatches =
+    !searchQuery || projectSystemNote?.content.toLowerCase().includes(searchQuery.toLowerCase());
+  const filteredRepos = (currentProject?.repos ?? []).filter((repo) => {
+    if (!searchQuery) return true;
+    const query = searchQuery.toLowerCase();
+    const humanDraft = (repoDrafts[repo.id] ?? "").toLowerCase();
+    const systemNote = (repoSystemNotes[repo.id]?.content ?? "").toLowerCase();
+    return (
+      repo.name.toLowerCase().includes(query) ||
+      (repo.path ?? "").toLowerCase().includes(query) ||
+      humanDraft.includes(query) ||
+      systemNote.includes(query)
+    );
+  });
+
+  if (!currentProject) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <p className="text-sm text-[var(--muted-foreground)]">Loading...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden">
+      <div className="flex-shrink-0 border-b border-[var(--border)] bg-[var(--card-bg)] px-3 py-2 backdrop-blur-md sm:h-14 sm:px-6 sm:py-0">
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+          <div className="flex items-center gap-2 text-sm">
+            <span className="font-semibold text-[var(--foreground)]">{currentProject.name}</span>
+            <span className="text-[var(--muted-foreground)]">/</span>
+            <span className="text-[var(--muted-foreground)]">Knowledge</span>
+          </div>
+          <div className="relative w-full sm:max-w-xs">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--app-shell-soft-text)]" size={14} />
+            <input
+              type="text"
+              placeholder="Search notes..."
+              value={searchQuery}
+              onChange={(event) => setSearchQuery(event.target.value)}
+              className="w-full rounded-full border border-[var(--border)] bg-[var(--secondary)] py-1.5 pl-9 pr-4 text-xs focus:outline-none focus:ring-2 focus:ring-[var(--ring)] focus:border-[var(--primary)]"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-shrink-0 px-3 pb-2 pt-4 sm:px-6">
+        <div className="flex w-fit gap-1 rounded-xl border border-[var(--border)] bg-[var(--secondary)] p-1">
+          <TabButton
+            active={activeTab === "project"}
+            onClick={() => setActiveTab("project")}
+            icon={<BrainCircuit size={14} />}
+            label="Project"
+          />
+          <TabButton
+            active={activeTab === "repos"}
+            onClick={() => setActiveTab("repos")}
+            icon={<FolderGit2 size={14} />}
+            label="Repositories"
+          />
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto px-3 pb-8 sm:px-6">
+        {activeTab === "project" ? (
+          <div className="mt-2 grid grid-cols-12 gap-4 sm:gap-6">
+            <div className="col-span-12 lg:col-span-4 space-y-4">
+              <div className="rounded-2xl border border-[var(--border)] bg-[var(--card-bg)] p-5 shadow-[var(--shadow-sm)]">
+                <h3 className="mb-4 text-[10px] font-black uppercase tracking-[0.2em] text-[var(--app-shell-soft-text)]">
+                  Overview
+                </h3>
+                <div className="grid grid-cols-2 gap-3">
+                  <StatCard label="References" value={filteredSkills.length} sub="File-backed" />
+                  <StatCard label="Notes" value={filteredMemory.length} sub="Human-authored" />
+                </div>
+                <div className="mt-3">
+                  <StatCard label="System Note" value={projectSystemNote?.content ? 1 : 0} sub="Living doc" />
+                </div>
+              </div>
+            </div>
+
+            <div className="col-span-12 lg:col-span-8 space-y-4">
+              <section className="rounded-2xl border border-[var(--border)] bg-[var(--card-bg)] p-5 shadow-[var(--shadow-sm)]">
+                <div className="mb-4">
+                  <h2 className="flex items-center gap-2 text-sm font-semibold text-[var(--foreground)]">
+                    <BrainCircuit size={16} className="text-[var(--primary)]" />
+                    Living Project Note
+                  </h2>
+                  <p className="mt-1 text-xs text-[var(--muted-foreground)]">
+                    Auto-maintained project knowledge. It updates in place instead of creating review candidates.
+                  </p>
+                </div>
+                <SystemNoteCard
+                  note={
+                    projectNoteMatches
+                      ? projectSystemNote
+                      : projectSystemNote?.content
+                        ? { ...projectSystemNote, content: "" }
+                        : null
+                  }
+                  emptyLabel={searchQuery ? "No matching project note content." : "No project note yet."}
+                  scope="project"
+                  subjectId={projectId ?? ""}
+                  onSaved={setProjectSystemNote}
+                />
+              </section>
+
+              <section className="rounded-2xl border border-[var(--border)] bg-[var(--card-bg)] p-5 shadow-[var(--shadow-sm)]">
+                <div className="mb-4">
+                  <h2 className="flex items-center gap-2 text-sm font-semibold text-[var(--foreground)]">
+                    <FileText size={16} className="text-[var(--primary)]" />
+                    Human-Authored References
+                  </h2>
+                  <p className="mt-1 text-xs text-[var(--muted-foreground)]">
+                    File-backed project knowledge for project-specific instructions.
+                  </p>
+                </div>
+
+                {filteredSkills.length > 0 && (
+                  <div className="mb-4 grid grid-cols-1 gap-2 md:grid-cols-2">
+                    {filteredSkills.map((skill) => (
+                      <div
+                        key={skill.id}
+                        className="group flex items-start gap-3 rounded-xl border border-[var(--border)] bg-[var(--secondary)] p-3"
+                      >
+                        <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--primary-muted)]">
+                          <FileText size={14} className="text-[var(--primary)]" />
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <div className="truncate break-all font-mono text-xs text-[var(--secondary-foreground)]">
+                            {skill.file}
+                          </div>
+                          {skill.condition && (
+                            <div className="mt-0.5 text-[11px] text-[var(--muted-foreground)]">{skill.condition}</div>
+                          )}
+                        </div>
+                        <button
+                          type="button"
+                          onClick={() => void removeSkill(skill.id)}
+                          className="rounded-lg p-1.5 text-[var(--app-shell-soft-text)] opacity-0 transition-all group-hover:opacity-100 hover:bg-[var(--card-bg)] hover:text-red-500"
+                          aria-label="Remove reference"
+                        >
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                {showAddReference ? (
+                  <div className="space-y-2 rounded-xl border border-[var(--border)] bg-[var(--secondary)] p-3">
+                    <input
+                      type="text"
+                      value={newKnowledgeFile}
+                      onChange={(event) => setNewKnowledgeFile(event.target.value)}
+                      placeholder="path/to/project-knowledge.md"
+                      className="w-full rounded-lg border border-[var(--border)] bg-[var(--card-bg)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--ring)] focus:border-[var(--primary)]"
+                      autoFocus
+                    />
+                    <input
+                      type="text"
+                      value={newKnowledgeCondition}
+                      onChange={(event) => setNewKnowledgeCondition(event.target.value)}
+                      placeholder="Optional condition"
+                      className="w-full rounded-lg border border-[var(--border)] bg-[var(--card-bg)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--ring)] focus:border-[var(--primary)]"
+                    />
+                    <div className="flex items-center justify-end gap-2">
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setShowAddReference(false);
+                          setNewKnowledgeFile("");
+                          setNewKnowledgeCondition("");
+                        }}
+                        className="px-3 py-1.5 text-xs text-[var(--muted-foreground)]"
+                      >
+                        Cancel
+                      </button>
+                      <button
+                        type="button"
+                        onClick={async () => {
+                          const file = newKnowledgeFile.trim();
+                          if (!file) return;
+                          await addSkill(file, newKnowledgeCondition.trim() || undefined);
+                          setNewKnowledgeFile("");
+                          setNewKnowledgeCondition("");
+                          setShowAddReference(false);
+                        }}
+                        className="inline-flex items-center gap-1.5 rounded-lg bg-[var(--primary)] px-3 py-1.5 text-xs font-medium text-[var(--primary-foreground)]"
+                      >
+                        <Plus className="h-3.5 w-3.5" />
+                        Add
+                      </button>
+                    </div>
+                  </div>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={() => setShowAddReference(true)}
+                    className="group flex w-full items-center justify-center gap-2 rounded-xl border-2 border-dashed border-[var(--border)] py-3 text-sm text-[var(--muted-foreground)] transition-all hover:bg-[var(--secondary)] hover:text-[var(--foreground)]"
+                  >
+                    <Plus size={16} className="transition-transform group-hover:scale-110" />
+                    Add Reference
+                  </button>
+                )}
+              </section>
+
+              <section className="rounded-2xl border border-[var(--border)] bg-[var(--card-bg)] p-5 shadow-[var(--shadow-sm)]">
+                <div className="mb-4">
+                  <h2 className="flex items-center gap-2 text-sm font-semibold text-[var(--foreground)]">
+                    <MessageSquare size={16} className="text-[var(--primary)]" />
+                    Project Notes
+                  </h2>
+                  <p className="mt-1 text-xs text-[var(--muted-foreground)]">
+                    Human-authored coordination notes.
+                  </p>
+                </div>
+
+                {filteredMemory.length > 0 && (
+                  <div className="mb-4 space-y-2">
+                    {filteredMemory.map((memory) => (
+                      <NoteCard
+                        key={memory.id}
+                        content={memory.content}
+                        source={memory.source || "project"}
+                        time={new Date(memory.created_at).toLocaleString()}
+                        onDelete={() => void deleteMemory(memory.id)}
+                      />
+                    ))}
+                  </div>
+                )}
+
+                <div className="relative">
+                  <textarea
+                    value={newKnowledgeNote}
+                    onChange={(event) => setNewKnowledgeNote(event.target.value)}
+                    placeholder="Add a new project note..."
+                    rows={3}
+                    className="w-full resize-none rounded-xl border border-[var(--border)] bg-[var(--secondary)] px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--ring)] focus:border-[var(--primary)]"
+                  />
+                  {newKnowledgeNote.trim() && (
+                    <button
+                      type="button"
+                      onClick={async () => {
+                        const content = newKnowledgeNote.trim();
+                        if (!content) return;
+                        await addMemory(content, "human-authored");
+                        setNewKnowledgeNote("");
+                      }}
+                      className="absolute bottom-3 right-3 rounded-lg bg-[var(--primary)] px-3 py-1.5 text-xs font-medium text-[var(--primary-foreground)]"
+                    >
+                      Save Note
+                    </button>
+                  )}
+                </div>
+              </section>
+            </div>
+          </div>
+        ) : (
+          <div className="mt-2 space-y-4">
+            {filteredRepos.length === 0 ? (
+              <div className="rounded-2xl border border-dashed border-[var(--border)] px-6 py-12 text-center">
+                <FolderGit2 size={32} className="mx-auto mb-3 text-[var(--app-shell-soft-text)]" />
+                <p className="text-sm text-[var(--muted-foreground)]">
+                  {currentProject.repos.length === 0 ? "This project has no repos attached yet." : "No matching repositories."}
+                </p>
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+                {filteredRepos.map((repo) => (
+                  <RepoCard
+                    key={repo.id}
+                    repo={repo}
+                    draft={repoDrafts[repo.id] ?? ""}
+                    systemNote={repoSystemNotes[repo.id] ?? null}
+                    systemNoteMatches={!searchQuery || (repoSystemNotes[repo.id]?.content ?? "").toLowerCase().includes(searchQuery.toLowerCase())}
+                    onDraftChange={(value) => setRepoDrafts((prev) => ({ ...prev, [repo.id]: value }))}
+                    onSave={async () => {
+                      await fetch(`/api/repos/${repo.id}/knowledge`, {
+                        method: "PUT",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({
+                          producer: "human",
+                          content: repoDrafts[repo.id] ?? "",
+                        }),
+                      }).then(async (res) => {
+                        if (!res.ok) {
+                          const body = await res.json().catch(() => ({}));
+                          throw new Error(body.error || "Failed to save");
+                        }
+                      });
+                    }}
+                    onSystemNoteSaved={(note) => setRepoSystemNotes((prev) => ({ ...prev, [repo.id]: note }))}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function TabButton({
+  active,
+  onClick,
+  icon,
+  label,
+}: {
+  active: boolean;
+  onClick: () => void;
+  icon: React.ReactNode;
+  label: string;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={`flex items-center gap-2 rounded-lg px-4 py-1.5 text-xs font-semibold transition-all ${
+        active
+          ? "bg-[var(--card-bg)] text-[var(--foreground)] shadow-[var(--shadow-sm)] ring-1 ring-[var(--border)]"
+          : "text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+      }`}
+    >
+      {icon}
+      {label}
+    </button>
+  );
+}
+
+function StatCard({ label, value, sub }: { label: string; value: number; sub: string }) {
+  return (
+    <div className="flex flex-col rounded-xl border border-[var(--border)] bg-[var(--secondary)] p-4">
+      <span className="text-[10px] font-black uppercase tracking-[0.2em] text-[var(--app-shell-soft-text)]">
+        {label}
+      </span>
+      <span className="mt-1 text-2xl font-bold text-[var(--foreground)]">{value}</span>
+      <span className="mt-1 text-[10px] text-[var(--app-shell-soft-text)]">{sub}</span>
+    </div>
+  );
+}
+
+function SystemNoteCard({
+  note,
+  emptyLabel,
+  scope,
+  subjectId,
+  onSaved,
+}: {
+  note: SystemNote | null;
+  emptyLabel: string;
+  scope: "project" | "repo";
+  subjectId: string;
+  onSaved: (note: SystemNote | null) => void;
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [draft, setDraft] = useState(note?.content ?? "");
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setDraft(note?.content ?? "");
+  }, [note?.id, note?.content]);
+
+  const hasContent = Boolean(note?.content.trim());
+  const updatedAt = note?.updated_at ?? note?.created_at;
+  const summary = note?.source;
+
+  async function handleSave() {
+    if (!subjectId) return;
+    setIsSaving(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/knowledge-notes", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          scope,
+          subjectId,
+          content: draft,
+        }),
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        throw new Error(data.error || "Failed to save knowledge note");
+      }
+      const nextNote = mapKnowledgeNoteToSystemNote(data.note);
+      onSaved(nextNote);
+      setDraft(nextNote?.content ?? "");
+      setIsEditing(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to save knowledge note");
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
+  if (!hasContent) {
+    return (
+      <div className="rounded-xl border border-dashed border-[var(--border)] px-4 py-6 text-sm text-[var(--muted-foreground)]">
+        <div className="flex items-center justify-between gap-3">
+          <span>{emptyLabel}</span>
+          <button
+            type="button"
+            onClick={() => {
+              setDraft(note?.content ?? "");
+              setError(null);
+              setIsEditing(true);
+            }}
+            className="inline-flex items-center gap-1.5 rounded-lg border border-[var(--border)] bg-[var(--secondary)] px-3 py-1.5 text-xs font-medium text-[var(--foreground)]"
+          >
+            <SquarePen className="h-3.5 w-3.5" />
+            Edit
+          </button>
+        </div>
+        {isEditing ? (
+          <div className="mt-4 space-y-3">
+            <textarea
+              value={draft}
+              onChange={(event) => setDraft(event.target.value)}
+              rows={10}
+              className="w-full resize-y rounded-xl border border-[var(--border)] bg-[var(--secondary)] px-4 py-3 text-sm text-[var(--foreground)] focus:border-[var(--primary)] focus:outline-none focus:ring-2 focus:ring-[var(--ring)]"
+              placeholder="Write the living knowledge note in markdown..."
+            />
+            {error ? <p className="text-xs text-red-500">{error}</p> : null}
+            <div className="flex items-center justify-end gap-2">
+              <button
+                type="button"
+                onClick={() => {
+                  setDraft(note?.content ?? "");
+                  setError(null);
+                  setIsEditing(false);
+                }}
+                className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-[var(--muted-foreground)]"
+                disabled={isSaving}
+              >
+                <X className="h-3.5 w-3.5" />
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={() => void handleSave()}
+                disabled={isSaving}
+                className="inline-flex items-center gap-1.5 rounded-lg bg-[var(--primary)] px-3 py-1.5 text-xs font-medium text-[var(--primary-foreground)] disabled:opacity-60"
+              >
+                {isSaving ? "Saving..." : "Save"}
+              </button>
+            </div>
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--secondary)] p-4">
+      <div className="mb-3 flex items-start justify-between gap-3">
+        <div className="flex flex-wrap items-center gap-2 text-[11px] text-[var(--app-shell-soft-text)]">
+          {updatedAt ? <span>Updated {new Date(updatedAt).toLocaleString()}</span> : null}
+          {summary ? <span>{summary}</span> : null}
+        </div>
+        {!isEditing ? (
+          <button
+            type="button"
+            onClick={() => {
+              setDraft(note?.content ?? "");
+              setError(null);
+              setIsEditing(true);
+            }}
+            className="inline-flex items-center gap-1.5 rounded-lg border border-[var(--border)] bg-[var(--card-bg)] px-3 py-1.5 text-xs font-medium text-[var(--foreground)]"
+          >
+            <SquarePen className="h-3.5 w-3.5" />
+            Edit
+          </button>
+        ) : null}
+      </div>
+      {isEditing ? (
+        <div className="space-y-3">
+          <textarea
+            value={draft}
+            onChange={(event) => setDraft(event.target.value)}
+            rows={12}
+            className="w-full resize-y rounded-xl border border-[var(--border)] bg-[var(--card-bg)] px-4 py-3 text-sm text-[var(--foreground)] focus:border-[var(--primary)] focus:outline-none focus:ring-2 focus:ring-[var(--ring)]"
+            placeholder="Write the living knowledge note in markdown..."
+          />
+          {error ? <p className="text-xs text-red-500">{error}</p> : null}
+          <div className="flex items-center justify-end gap-2">
+            <button
+              type="button"
+              onClick={() => {
+                setDraft(note?.content ?? "");
+                setError(null);
+                setIsEditing(false);
+              }}
+              className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-[var(--muted-foreground)]"
+              disabled={isSaving}
+            >
+              <X className="h-3.5 w-3.5" />
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={() => void handleSave()}
+              disabled={isSaving}
+              className="inline-flex items-center gap-1.5 rounded-lg bg-[var(--primary)] px-3 py-1.5 text-xs font-medium text-[var(--primary-foreground)] disabled:opacity-60"
+            >
+              {isSaving ? "Saving..." : "Save"}
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="text-sm leading-relaxed text-[var(--secondary-foreground)]">
+          <Markdown content={note?.content ?? ""} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function NoteCard({
+  content,
+  source,
+  time,
+  onDelete,
+}: {
+  content: string;
+  source: string;
+  time: string;
+  onDelete: () => void;
+}) {
+  return (
+    <div className="group rounded-xl border border-[var(--border)] bg-[var(--secondary)] p-3">
+      <div className="mb-1.5 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <span className="text-[11px] font-semibold text-[var(--foreground)]">{source}</span>
+          <span className="text-[10px] text-[var(--app-shell-soft-text)]">{time}</span>
+        </div>
+        <button
+          type="button"
+          onClick={onDelete}
+          className="rounded p-1 text-[var(--app-shell-soft-text)] opacity-0 transition-all group-hover:opacity-100 hover:text-red-500"
+        >
+          <Trash2 size={12} />
+        </button>
+      </div>
+      <p className="text-sm leading-relaxed text-[var(--secondary-foreground)]">{content}</p>
+    </div>
+  );
+}
+
+function RepoCard({
+  repo,
+  draft,
+  systemNote,
+  systemNoteMatches,
+  onDraftChange,
+  onSave,
+  onSystemNoteSaved,
+}: {
+  repo: { id: string; name: string; path?: string; notes?: string };
+  draft: string;
+  systemNote: SystemNote | null;
+  systemNoteMatches: boolean;
+  onDraftChange: (value: string) => void;
+  onSave: () => Promise<void>;
+  onSystemNoteSaved: (note: SystemNote | null) => void;
+}) {
+  return (
+    <div className="group flex flex-col rounded-2xl border border-[var(--border)] bg-[var(--card-bg)] p-5 shadow-[var(--shadow-sm)] transition-colors hover:border-[var(--card-hover-border)]">
+      <div className="mb-3 flex items-start justify-between">
+        <div className="flex items-center gap-3">
+          <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-[var(--secondary)] text-[var(--muted-foreground)]">
+            <FolderGit2 size={20} />
+          </div>
+          <div>
+            <h3 className="text-sm font-semibold text-[var(--foreground)]">{repo.name}</h3>
+            <p className="text-[11px] text-[var(--muted-foreground)]">{repo.path || "No path set"}</p>
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={onSave}
+          className="rounded-lg border border-[var(--border)] bg-[var(--secondary)] px-3 py-1.5 text-xs font-medium"
+        >
+          Save
+        </button>
+      </div>
+
+      <div className="mb-3">
+        <p className="mb-2 text-[10px] font-black uppercase tracking-[0.16em] text-[var(--app-shell-soft-text)]">
+          Living Repo Note
+        </p>
+        <SystemNoteCard
+          note={
+            systemNoteMatches
+              ? systemNote
+              : systemNote?.content
+                ? { ...systemNote, content: "" }
+                : null
+          }
+          emptyLabel="No repo note yet."
+          scope="repo"
+          subjectId={repo.id}
+          onSaved={onSystemNoteSaved}
+        />
+      </div>
+
+      <p className="mb-2 text-[10px] font-black uppercase tracking-[0.16em] text-[var(--app-shell-soft-text)]">
+        Human Notes
+      </p>
+      <textarea
+        value={draft}
+        onChange={(event) => onDraftChange(event.target.value)}
+        rows={4}
+        placeholder="Architecture facts, repo conventions, commands..."
+        className="w-full resize-none rounded-xl border border-[var(--border)] bg-[var(--secondary)] px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--ring)] focus:border-[var(--primary)]"
+      />
+    </div>
+  );
+}