@mndrk/agx 2.0.26 → 2.0.32

package/cloud-runtime/standalone/app/api/threads/route.ts

@@ -1,6 +1,7 @@
 import { NextRequest } from "next/server";
-import { listRootMessages, getWorkspaceNames, updateMessageStatus, getMessageThread, getProjectThreadIds } from "@/lib/history-store";
+import { listRootMessages, getWorkspaceNames, updateMessageStatus, getMessageThread, getProjectThreadIds, loadHistory } from "@/lib/history-store";
 import type { ThreadStatus } from "@/lib/storage";
+import { extractKnowledgeFromThreadTransition } from "@/lib/thread-knowledge";
 
 export const runtime = "nodejs";
 export const dynamic = "force-dynamic";
@@ -112,8 +113,24 @@ export async function PATCH(request: NextRequest) {
       return Response.json({ error: "Thread not found" }, { status: 404 });
     }
 
+    const history = await loadHistory(thread.threadId);
+    const root = history.find((message) => message.id === rootMessageId);
+    const previousStatus = root?.threadStatus ?? "active";
+
     await updateMessageStatus(thread.threadId, rootMessageId, status, outcomeNote ?? null);
 
+    if (previousStatus !== status) {
+      extractKnowledgeFromThreadTransition({
+        threadId: thread.threadId,
+        rootMessageId,
+        fromStatus: previousStatus,
+        toStatus: status,
+        outcomeNote: outcomeNote ?? null,
+      }).catch((error) => {
+        console.warn("[threads/PATCH] Thread knowledge extraction failed:", error);
+      });
+    }
+
     return Response.json({ ok: true, rootMessageId, status, outcomeNote: outcomeNote ?? null });
   } catch (error) {
     console.error("Error updating thread status:", error);

package/cloud-runtime/standalone/app/globals.css

@@ -387,7 +387,7 @@ select:focus-visible {
    Card Styles
    ======================================== */
 .surface-card {
-  @apply bg-white border border-gray-200 hover:bg-gray-50 hover:border-gray-300 hover:shadow-sm dark:shadow-none dark:bg-gray-900/40 dark:border-gray-800 rounded-2xl dark:hover:bg-gray-900/60 dark:hover:border-gray-700 transition-all duration-200;
+  @apply relative bg-[var(--app-shell-surface)] border border-[var(--app-shell-border)] hover:bg-[var(--app-shell-subtle)] hover:border-[var(--app-shell-border-strong)] rounded-2xl transition-all duration-200;
 }
 
 .card {
@@ -2752,6 +2752,3 @@ select:focus-visible {
 /* ========================================
    Surface Card (Prototype Style)
    ======================================== */
-.surface-card {
-  @apply relative bg-white border border-gray-200 hover:bg-gray-50 hover:border-gray-300 shadow-sm dark:shadow-none dark:bg-gray-900/40 dark:border-gray-800 rounded-2xl dark:hover:bg-gray-900/60 dark:hover:border-gray-700 transition-all duration-200;
-}

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

@@ -162,27 +162,6 @@ export default function FullscreenGraphPage({ params }: { params: Promise<PagePa
           </div>
           <p className="text-sm text-[var(--muted-foreground)]">No execution graph exists for this task.</p>
           <div className="mt-4 flex gap-2 justify-center">
-            <button
-              onClick={async () => {
-                try {
-                  const res = await fetch(`/api/tasks/${taskId}/graph`, {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ migration: true }),
-                  });
-                  if (!res.ok) {
-                    const data = await res.json().catch(() => ({}));
-                    throw new Error(data?.error || `Migration failed (${res.status})`);
-                  }
-                  await handleRefetch();
-                } catch (err) {
-                  console.error("Failed to migrate task to v2:", err);
-                }
-              }}
-              className="btn btn-primary"
-            >
-              Migrate to v2
-            </button>
             <button
               onClick={() => router.push(`/projects/${slug}/tasks/${taskId}`)}
               className="btn btn-secondary"

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

@@ -0,0 +1,608 @@
+"use client";
+
+import { useState, useEffect, use } from "react";
+import { Markdown } from "@/components/chat-ui/Markdown";
+import {
+  BrainCircuit,
+  FileText,
+  FolderGit2,
+  MessageSquare,
+  Plus,
+  Search,
+  Trash2,
+} 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;
+};
+
+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/projects/${projectId}/memory?producer=system`);
+        const data = res.ok ? await res.json() : { memory: [] };
+        if (!cancelled) {
+          setProjectSystemNote((data.memory ?? [])[0] ?? null);
+        }
+      } 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/repos/${repo.id}/knowledge?producer=system`);
+            const data = res.ok ? await res.json() : { knowledge: [] };
+            return [repo.id, (data.knowledge ?? [])[0] ?? null] 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
+                  content={projectNoteMatches ? projectSystemNote?.content ?? "" : ""}
+                  emptyLabel={searchQuery ? "No matching project note content." : "No project note yet."}
+                  updatedAt={projectSystemNote?.updated_at ?? projectSystemNote?.created_at}
+                  summary={projectSystemNote?.source}
+                />
+              </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}
+                    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");
+                        }
+                      });
+                    }}
+                  />
+                ))}
+              </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({
+  content,
+  emptyLabel,
+  updatedAt,
+  summary,
+}: {
+  content: string;
+  emptyLabel: string;
+  updatedAt?: string;
+  summary?: string;
+}) {
+  if (!content.trim()) {
+    return (
+      <div className="rounded-xl border border-dashed border-[var(--border)] px-4 py-6 text-sm text-[var(--muted-foreground)]">
+        {emptyLabel}
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--secondary)] p-4">
+      <div className="mb-3 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>
+      <div className="text-sm leading-relaxed text-[var(--secondary-foreground)]">
+        <Markdown content={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,
+  onDraftChange,
+  onSave,
+}: {
+  repo: { id: string; name: string; path?: string; notes?: string };
+  draft: string;
+  systemNote: SystemNote | null;
+  onDraftChange: (value: string) => void;
+  onSave: () => Promise<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
+          content={systemNote?.content ?? ""}
+          emptyLabel="No repo note yet."
+          updatedAt={systemNote?.updated_at ?? systemNote?.created_at}
+          summary={systemNote?.source}
+        />
+      </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>
+  );
+}