feat(kb-ui): MemoryReviewQueue — free-text note curation (spec §9) #3
243
src/components-memory.tsx
Normal file
243
src/components-memory.tsx
Normal file
@@ -0,0 +1,243 @@
|
|||||||
|
// PURPOSE: Memory review queue — the curation surface for a per-person, gated
|
||||||
|
// `memory` collection of FREE-TEXT notes (kind: note), distinct from the
|
||||||
|
// claim triples of ClaimsReviewQueue. The owner reviews what the agent
|
||||||
|
// and its delegated specialists remembered: confirms a specialist's
|
||||||
|
// `proposed` note (trust-is-human) or forgets anything wrong. Collection-
|
||||||
|
// agnostic — props in, callbacks out; the same base powers the KB
|
||||||
|
// `memory` collection and a consumer's /memory page.
|
||||||
|
// ===========================================================================
|
||||||
|
import { type FC, type ReactNode } from "react";
|
||||||
|
import { BrainCircuit, Check, Sparkles, Trash2, User } from "lucide-react";
|
||||||
|
import { Badge, cn, formatRelative } from "./_internal";
|
||||||
|
|
||||||
|
export type MemoryStatus = "active" | "proposed";
|
||||||
|
|
||||||
|
export interface MemoryItem {
|
||||||
|
id: string;
|
||||||
|
/** The remembered statement (free text). */
|
||||||
|
content: string;
|
||||||
|
/** Short head shown above the content; optional. */
|
||||||
|
subject?: string | null;
|
||||||
|
/** fact | preference | event | note — a free label, surfaced as a tag. */
|
||||||
|
kind?: string | null;
|
||||||
|
tags?: string[];
|
||||||
|
status: MemoryStatus;
|
||||||
|
/** "user" | "assistant" | "app:<slug>" — attribution, rendered via `sourceLabel`. */
|
||||||
|
source?: string | null;
|
||||||
|
updated_at?: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MemoryActions {
|
||||||
|
/** Confirm a proposed memory (→ active). */
|
||||||
|
onConfirm?: (id: string) => void;
|
||||||
|
/** Forget a memory (archive / soft-delete). */
|
||||||
|
onForget?: (id: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Default attribution copy; override via `MemoryReviewQueueProps.sourceLabel`. */
|
||||||
|
export function defaultSourceLabel(source?: string | null): string {
|
||||||
|
if (source === "user") return "You added this";
|
||||||
|
if (source === "assistant") return "Your assistant noted this";
|
||||||
|
if (source && source.startsWith("app:")) {
|
||||||
|
const slug = source.slice(4);
|
||||||
|
return `Suggested by ${slug.charAt(0).toUpperCase()}${slug.slice(1)}`;
|
||||||
|
}
|
||||||
|
return "Remembered";
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MemoryCardProps extends MemoryActions {
|
||||||
|
item: MemoryItem;
|
||||||
|
busy?: boolean;
|
||||||
|
sourceLabel?: (source?: string | null) => string;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const MemoryCard: FC<MemoryCardProps> = ({
|
||||||
|
item,
|
||||||
|
busy,
|
||||||
|
sourceLabel = defaultSourceLabel,
|
||||||
|
className,
|
||||||
|
onConfirm,
|
||||||
|
onForget,
|
||||||
|
}) => {
|
||||||
|
const proposed = item.status === "proposed";
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"rounded-xl border bg-card p-4",
|
||||||
|
proposed ? "border-primary/40" : "border-border",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between gap-3">
|
||||||
|
<div className="min-w-0">
|
||||||
|
{item.subject && (
|
||||||
|
<p className="text-xs font-medium text-muted-foreground">{item.subject}</p>
|
||||||
|
)}
|
||||||
|
<p className="mt-0.5 text-sm text-foreground">{item.content}</p>
|
||||||
|
</div>
|
||||||
|
{proposed && (
|
||||||
|
<Badge tone="bg-primary/10 text-primary" icon={<Sparkles className="size-3" />}>
|
||||||
|
Proposed
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-2 flex flex-wrap items-center gap-1.5">
|
||||||
|
<Badge tone="bg-muted text-muted-foreground" icon={sourceIcon(item.source)}>
|
||||||
|
{sourceLabel(item.source)}
|
||||||
|
</Badge>
|
||||||
|
{item.kind && item.kind !== "note" && (
|
||||||
|
<span className="text-xs text-muted-foreground">{item.kind}</span>
|
||||||
|
)}
|
||||||
|
{(item.tags ?? []).map((t) => (
|
||||||
|
<span key={t} className="rounded-md bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
|
||||||
|
{t}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{item.updated_at && (
|
||||||
|
<span className="text-xs text-muted-foreground">{formatRelative(item.updated_at)}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-3 flex flex-wrap items-center gap-2">
|
||||||
|
{proposed && onConfirm && (
|
||||||
|
<ActionBtn
|
||||||
|
action="memory-confirm"
|
||||||
|
primary
|
||||||
|
onClick={() => onConfirm(item.id)}
|
||||||
|
busy={busy}
|
||||||
|
icon={<Check className="size-3.5" />}
|
||||||
|
>
|
||||||
|
Confirm
|
||||||
|
</ActionBtn>
|
||||||
|
)}
|
||||||
|
{onForget && (
|
||||||
|
<ActionBtn
|
||||||
|
action="memory-forget"
|
||||||
|
onClick={() => onForget(item.id)}
|
||||||
|
busy={busy}
|
||||||
|
icon={<Trash2 className="size-3.5" />}
|
||||||
|
>
|
||||||
|
Forget
|
||||||
|
</ActionBtn>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface MemoryReviewQueueProps extends MemoryActions {
|
||||||
|
items: MemoryItem[];
|
||||||
|
busyId?: string;
|
||||||
|
sourceLabel?: (source?: string | null) => string;
|
||||||
|
emptyState?: ReactNode;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Groups: Proposed (awaiting confirmation) → Remembered (active). */
|
||||||
|
export const MemoryReviewQueue: FC<MemoryReviewQueueProps> = ({
|
||||||
|
items,
|
||||||
|
busyId,
|
||||||
|
sourceLabel,
|
||||||
|
emptyState,
|
||||||
|
className,
|
||||||
|
onConfirm,
|
||||||
|
onForget,
|
||||||
|
}) => {
|
||||||
|
if (items.length === 0) return <>{emptyState ?? <Empty />}</>;
|
||||||
|
|
||||||
|
const proposed = items.filter((m) => m.status === "proposed");
|
||||||
|
const active = items.filter((m) => m.status !== "proposed");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cn("flex flex-col gap-6", className)}>
|
||||||
|
<Section title="Proposed" count={proposed.length} hint="A specialist noted these — confirm or forget.">
|
||||||
|
{proposed.map((m) => (
|
||||||
|
<MemoryCard
|
||||||
|
key={m.id}
|
||||||
|
item={m}
|
||||||
|
busy={busyId === m.id}
|
||||||
|
sourceLabel={sourceLabel}
|
||||||
|
onConfirm={onConfirm}
|
||||||
|
onForget={onForget}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="Remembered" count={active.length} hint="What your assistant knows about you.">
|
||||||
|
{active.map((m) => (
|
||||||
|
<MemoryCard
|
||||||
|
key={m.id}
|
||||||
|
item={m}
|
||||||
|
busy={busyId === m.id}
|
||||||
|
sourceLabel={sourceLabel}
|
||||||
|
onForget={onForget}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// ---- local helpers --------------------------------------------------------
|
||||||
|
|
||||||
|
function sourceIcon(source?: string | null): ReactNode {
|
||||||
|
if (source === "user") return <User className="size-3" />;
|
||||||
|
if (source && source.startsWith("app:")) return <Sparkles className="size-3" />;
|
||||||
|
return <BrainCircuit className="size-3" />;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Section: FC<{ title: string; count: number; hint: string; children: ReactNode }> = ({
|
||||||
|
title,
|
||||||
|
count,
|
||||||
|
hint,
|
||||||
|
children,
|
||||||
|
}) => {
|
||||||
|
if (count === 0) return null;
|
||||||
|
return (
|
||||||
|
<section>
|
||||||
|
<div className="mb-2 flex items-baseline gap-2">
|
||||||
|
<h2 className="text-sm font-semibold text-foreground">{title}</h2>
|
||||||
|
<span className="text-xs text-muted-foreground">({count})</span>
|
||||||
|
<span className="text-xs text-muted-foreground">— {hint}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-3">{children}</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Empty: FC = () => (
|
||||||
|
<div className="flex flex-col items-center gap-2 rounded-xl border border-dashed border-border py-12 text-center">
|
||||||
|
<BrainCircuit className="size-6 text-muted-foreground" />
|
||||||
|
<p className="text-sm font-medium text-foreground">Nothing remembered yet</p>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Things your assistant learns about you will show up here.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const ActionBtn: FC<{
|
||||||
|
action: string;
|
||||||
|
onClick: () => void;
|
||||||
|
icon: ReactNode;
|
||||||
|
children: ReactNode;
|
||||||
|
primary?: boolean;
|
||||||
|
busy?: boolean;
|
||||||
|
}> = ({ action, onClick, icon, children, primary, busy }) => (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-action={action}
|
||||||
|
disabled={busy}
|
||||||
|
onClick={onClick}
|
||||||
|
className={cn(
|
||||||
|
"inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-medium transition disabled:opacity-50",
|
||||||
|
primary
|
||||||
|
? "bg-primary text-primary-foreground hover:opacity-90"
|
||||||
|
: "border border-border text-muted-foreground hover:bg-muted hover:text-foreground",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{icon}
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
@@ -34,5 +34,6 @@ export {
|
|||||||
export * from "./components-collections";
|
export * from "./components-collections";
|
||||||
export * from "./components-object";
|
export * from "./components-object";
|
||||||
export * from "./components-claims";
|
export * from "./components-claims";
|
||||||
|
export * from "./components-memory";
|
||||||
export * from "./components-export";
|
export * from "./components-export";
|
||||||
export * from "./components-search";
|
export * from "./components-search";
|
||||||
|
|||||||
Reference in New Issue
Block a user