4 Commits

Author SHA1 Message Date
jules
2c921a911c feat(kb-ui): MemoryReviewQueue — free-text note curation (spec §9)
The curation base for a per-person gated `memory` collection of FREE-TEXT notes
(kind: note), distinct from ClaimsReviewQueue's subject·predicate·value triples.
Groups proposed (specialist-noted, awaiting confirmation) vs remembered (active),
with confirm/forget callbacks, source attribution, and tags — matching the KB UI
house style. Collection-agnostic (props in, callbacks out): the same base powers
the KB `memory` collection and a consumer's /memory page.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-10 10:10:18 +10:00
jules
03443590a2 fix(kb-ui): SensitivityBadge tolerates an unset/unknown level
A kb.list row can arrive without a sensitivity (a claim/note, or older data);
SENSITIVITY[level] was then undefined and reading .tone crashed the whole
object list. Fall back to a neutral badge — never defaulting an unknown value
to "Open", which would misstate exposure. (Surfaced building the standalone
webapp against a real corpus.)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-08 13:38:22 +10:00
jules
c3dc237aa4 feat(kb-ui): lift search + collection load-more into the lib
Both consumers (embedded + the coming standalone) need the same search UI and
paginated lists; keep them from diverging by owning both here.

- KnowledgeSearch (components-search.tsx): the search input + paginated results
  panel, over an injected onSearch. Owns query/results/loading/error/clear and a
  "Load more" for search results; renders the caller's `browse` content when
  there is no active search. Replaces each app hand-rolling hit rendering.
- CollectionList: onLoadMore/hasMore/loadingMore (mirrors ObjectList), so a
  paginated corpus list gets a load-more affordance.

Stacked on fix/kb-ui-p0 (ObjectList already gained load-more there). tsc clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-08 12:05:07 +10:00
jules
66221afedc fix(kb-ui): P0 correctness — TextReader race/errors, outline nav, claims drop, object load-more
- TextReader: monotonic request guard (stale slice can't clobber current) +
  catch with a retry surface instead of a blank panel / unhandled rejection;
  Read-more guarded and shows loading.
- OutlineNav: an explicit section selection now wins over the initial citation
  highlight, so clicking sections works on ?start=&end= views (was inert).
- ObjectViewer: reset section + image on object switch (no bleed across
  citation navigation); catch the blob resolve.
- ObjectList: optional onLoadMore/hasMore/loadingMore (paginated corpuses).
- ClaimsReviewQueue: catch-all "Awaiting review" bucket so a claim the queue
  returned is never silently dropped (e.g. an open-conflict singleton whose
  counterpart is not in the payload).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-07 21:03:36 +10:00
7 changed files with 542 additions and 47 deletions

View File

@@ -117,7 +117,16 @@ const SENSITIVITY: Record<Sensitivity, { label: string; tone: string; icon: Reac
}; };
export const SensitivityBadge: FC<{ level: Sensitivity; className?: string }> = ({ level, className }) => { export const SensitivityBadge: FC<{ level: Sensitivity; className?: string }> = ({ level, className }) => {
const s = SENSITIVITY[level]; // A row can arrive without a sensitivity (e.g. a claim/note, or older data);
// fall back to a neutral badge rather than crash — and never default an
// unknown value to "Open", which would misstate its exposure.
const s =
SENSITIVITY[level] ?? {
label: level ?? "—",
tone: "bg-muted text-muted-foreground",
icon: null,
title: "Sensitivity not set.",
};
return ( return (
<Badge tone={s.tone} icon={s.icon} className={className} title={s.title}> <Badge tone={s.tone} icon={s.icon} className={className} title={s.title}>
{s.label} {s.label}

View File

@@ -200,9 +200,12 @@ export const ClaimsReviewQueue: FC<ClaimsReviewQueueProps> = ({
const inConflict = new Set(conflictGroups.flat().map((c) => c.claim_id)); const inConflict = new Set(conflictGroups.flat().map((c) => c.claim_id));
const proposed = claims.filter((c) => c.status === "proposed" && !inConflict.has(c.claim_id)); const proposed = claims.filter((c) => c.status === "proposed" && !inConflict.has(c.claim_id));
const unreviewed = claims.filter( // Everything the queue returned that isn't a "proposed" card or a rendered
(c) => c.status === "active" && c.review_state === "unreviewed" && !inConflict.has(c.claim_id), // conflict pair belongs in "Awaiting review". Filtering narrowly (active +
); // unreviewed only) silently dropped anything else the endpoint surfaced —
// e.g. a claim flagged open-conflict whose counterpart isn't in this payload
// (a singleton group, not rendered as a pair) rendered nowhere at all.
const rest = claims.filter((c) => c.status !== "proposed" && !inConflict.has(c.claim_id));
if (claims.length === 0) { if (claims.length === 0) {
return <>{emptyState ?? <Empty />}</>; return <>{emptyState ?? <Empty />}</>;
@@ -230,8 +233,8 @@ export const ClaimsReviewQueue: FC<ClaimsReviewQueueProps> = ({
))} ))}
</Section> </Section>
<Section title="Awaiting review" count={unreviewed.length} hint="Visible already, labelled by tier — review at your pace."> <Section title="Awaiting review" count={rest.length} hint="Visible already, labelled by tier — review at your pace.">
{unreviewed.map((c) => ( {rest.map((c) => (
<ClaimCard key={c.claim_id} claim={c} busy={busyId === c.claim_id} onConfirm={onConfirm} onReject={onReject} onReopen={onReopen} onOpenSource={onOpenSource} /> <ClaimCard key={c.claim_id} claim={c} busy={busyId === c.claim_id} onConfirm={onConfirm} onReject={onReject} onReopen={onReopen} onOpenSource={onOpenSource} />
))} ))}
</Section> </Section>

View File

@@ -70,6 +70,10 @@ export interface CollectionListProps {
onCreate?: (ownerType: "account" | "tenant") => void; onCreate?: (ownerType: "account" | "tenant") => void;
canManageTenant?: boolean; canManageTenant?: boolean;
onOpen?: (collection: Collection) => void; onOpen?: (collection: Collection) => void;
/** When set, renders a "Load more" affordance (the list is paginated). */
onLoadMore?: () => void;
hasMore?: boolean;
loadingMore?: boolean;
emptyState?: ReactNode; emptyState?: ReactNode;
className?: string; className?: string;
} }
@@ -81,6 +85,9 @@ export const CollectionList: FC<CollectionListProps> = ({
onCreate, onCreate,
canManageTenant = false, canManageTenant = false,
onOpen, onOpen,
onLoadMore,
hasMore,
loadingMore,
emptyState, emptyState,
className, className,
}) => { }) => {
@@ -112,6 +119,18 @@ export const CollectionList: FC<CollectionListProps> = ({
emptyHint={org.length === 0 ? "No shared corpuses yet." : undefined} emptyHint={org.length === 0 ? "No shared corpuses yet." : undefined}
/> />
)} )}
{hasMore && onLoadMore && (
<button
type="button"
data-action="knowledge-load-more-collections"
onClick={onLoadMore}
disabled={loadingMore}
className="inline-flex items-center justify-center gap-1.5 self-center rounded-lg border border-border px-3 py-1.5 text-sm text-muted-foreground transition hover:bg-muted disabled:opacity-50"
>
{loadingMore && <Loader2 className="size-3.5 animate-spin" />}
{loadingMore ? "Loading…" : "Load more"}
</button>
)}
</div> </div>
); );
}; };

243
src/components-memory.tsx Normal file
View 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>
);

View File

@@ -32,14 +32,19 @@ import {
export interface ObjectListProps { export interface ObjectListProps {
objects: ObjectSummary[]; objects: ObjectSummary[];
onOpen?: (object: ObjectSummary) => void; onOpen?: (object: ObjectSummary) => void;
/** When set, renders a "Load more" affordance (the list is paginated). */
onLoadMore?: () => void;
hasMore?: boolean;
loadingMore?: boolean;
emptyState?: ReactNode; emptyState?: ReactNode;
className?: string; className?: string;
} }
export const ObjectList: FC<ObjectListProps> = ({ objects, onOpen, emptyState, className }) => { export const ObjectList: FC<ObjectListProps> = ({ objects, onOpen, onLoadMore, hasMore, loadingMore, emptyState, className }) => {
if (objects.length === 0 && emptyState) return <>{emptyState}</>; if (objects.length === 0 && emptyState) return <>{emptyState}</>;
return ( return (
<ul className={cn("flex flex-col divide-y divide-border rounded-xl border border-border bg-card", className)}> <div className={cn("flex flex-col gap-3", className)}>
<ul className="flex flex-col divide-y divide-border rounded-xl border border-border bg-card">
{objects.map((o) => ( {objects.map((o) => (
<li key={o.object_id}> <li key={o.object_id}>
<button <button
@@ -60,6 +65,19 @@ export const ObjectList: FC<ObjectListProps> = ({ objects, onOpen, emptyState, c
</li> </li>
))} ))}
</ul> </ul>
{hasMore && onLoadMore && (
<button
type="button"
data-action="knowledge-load-more-objects"
onClick={onLoadMore}
disabled={loadingMore}
className="inline-flex items-center justify-center gap-1.5 self-center rounded-lg border border-border px-3 py-1.5 text-sm text-muted-foreground transition hover:bg-muted disabled:opacity-50"
>
{loadingMore && <Loader2 className="size-3.5 animate-spin" />}
{loadingMore ? "Loading…" : "Load more"}
</button>
)}
</div>
); );
}; };
@@ -237,28 +255,41 @@ export interface TextReaderProps {
export const TextReader: FC<TextReaderProps> = ({ outline, readText, highlight, activeSection, className }) => { export const TextReader: FC<TextReaderProps> = ({ outline, readText, highlight, activeSection, className }) => {
const [slice, setSlice] = useState<TextSlice | null>(null); const [slice, setSlice] = useState<TextSlice | null>(null);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [loadingMore, setLoadingMore] = useState(false);
const markRef = useRef<HTMLSpanElement | null>(null); const markRef = useRef<HTMLSpanElement | null>(null);
// Monotonic request id: rapid section/citation nav fires overlapping reads;
// only the newest may commit, so a slow earlier response can't clobber it.
const reqRef = useRef(0);
const load = useCallback( const load = useCallback(
async (sel?: { section?: string; start?: number; end?: number }) => { async (sel?: { section?: string; start?: number; end?: number }) => {
const req = ++reqRef.current;
setLoading(true); setLoading(true);
setError(null);
try { try {
setSlice(await readText(sel)); const next = await readText(sel);
if (reqRef.current === req) setSlice(next);
} catch {
// A failed read must surface, not blank the panel (and never leak as an
// unhandled rejection).
if (reqRef.current === req) setError("Couldn't load this text. Try again.");
} finally { } finally {
setLoading(false); if (reqRef.current === req) setLoading(false);
} }
}, },
[readText], [readText],
); );
// Initial + reactive loads: prefer an explicit highlight span, then an active // Initial + reactive loads: an explicit outline selection wins (so clicking a
// section, else the head of the document. // section works even on a citation-opened view), then the highlight span,
// else the head of the document.
useEffect(() => { useEffect(() => {
if (highlight) { if (activeSection) {
void load({ section: activeSection });
} else if (highlight) {
const sec = outline.outline.find((s) => highlight.start >= s.start && highlight.end <= s.end); const sec = outline.outline.find((s) => highlight.start >= s.start && highlight.end <= s.end);
void load(sec ? { section: sec.id } : { start: Math.max(0, highlight.start - 200), end: highlight.end + 200 }); void load(sec ? { section: sec.id } : { start: Math.max(0, highlight.start - 200), end: highlight.end + 200 });
} else if (activeSection) {
void load({ section: activeSection });
} else { } else {
void load(); void load();
} }
@@ -270,13 +301,20 @@ export const TextReader: FC<TextReaderProps> = ({ outline, readText, highlight,
}, [slice]); }, [slice]);
async function loadMore() { async function loadMore() {
if (!slice?.range) return; if (loadingMore || !slice?.range) return;
setLoadingMore(true);
try {
const next = await readText({ start: slice.range.end }); const next = await readText({ start: slice.range.end });
setSlice((prev) => setSlice((prev) =>
prev && prev.range && next.range prev && prev.range && next.range
? { ...next, text: (prev.text ?? "") + (next.text ?? ""), range: { start: prev.range.start, end: next.range.end } } ? { ...next, text: (prev.text ?? "") + (next.text ?? ""), range: { start: prev.range.start, end: next.range.end } }
: next, : next,
); );
} catch {
setError("Couldn't load more text. Try again.");
} finally {
setLoadingMore(false);
}
} }
if (loading && !slice) { if (loading && !slice) {
@@ -286,6 +324,21 @@ export const TextReader: FC<TextReaderProps> = ({ outline, readText, highlight,
</div> </div>
); );
} }
if (error && !slice) {
return (
<div className={cn("py-8 text-sm", className)}>
<p className="text-destructive">{error}</p>
<button
type="button"
data-action="knowledge-text-retry"
onClick={() => void load(activeSection ? { section: activeSection } : undefined)}
className="mt-2 rounded-lg border border-border px-3 py-1.5 text-sm text-muted-foreground transition hover:bg-muted"
>
Retry
</button>
</div>
);
}
if (!slice) return null; if (!slice) return null;
const canReadMore = outline.extracted_chars != null && slice.range != null && slice.range.end < outline.extracted_chars; const canReadMore = outline.extracted_chars != null && slice.range != null && slice.range.end < outline.extracted_chars;
@@ -295,14 +348,17 @@ export const TextReader: FC<TextReaderProps> = ({ outline, readText, highlight,
<article className="whitespace-pre-wrap break-words text-sm leading-relaxed text-foreground"> <article className="whitespace-pre-wrap break-words text-sm leading-relaxed text-foreground">
{renderWithHighlight(slice, highlight, markRef)} {renderWithHighlight(slice, highlight, markRef)}
</article> </article>
{error && <p className="mt-2 text-xs text-destructive">{error}</p>}
{canReadMore && ( {canReadMore && (
<button <button
type="button" type="button"
data-action="knowledge-read-more" data-action="knowledge-read-more"
onClick={() => void loadMore()} onClick={() => void loadMore()}
className="mt-3 rounded-lg border border-border px-3 py-1.5 text-sm text-muted-foreground transition hover:bg-muted" disabled={loadingMore}
className="mt-3 inline-flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm text-muted-foreground transition hover:bg-muted disabled:opacity-50"
> >
Read more {loadingMore && <Loader2 className="size-3.5 animate-spin" />}
{loadingMore ? "Loading…" : "Read more"}
</button> </button>
)} )}
</div> </div>
@@ -396,11 +452,23 @@ export const ObjectViewer: FC<ObjectViewerProps> = ({
!!actions && !!actions &&
(actions.onEditMeta || actions.onVerify || actions.onDownload || actions.onArchive || actions.onSupersede || actions.onExtractClaims); (actions.onEditMeta || actions.onVerify || actions.onDownload || actions.onArchive || actions.onSupersede || actions.onExtractClaims);
// Navigating object→object (citation click) reuses this component: clear the
// per-object view state so a stale section selection or the previous image
// can't bleed into the new object.
useEffect(() => {
setActiveSection(undefined);
}, [outline.object_id]);
useEffect(() => { useEffect(() => {
let live = true; let live = true;
setBlob(null);
if (isImage && outline.has_blob && resolveBlobUrl) { if (isImage && outline.has_blob && resolveBlobUrl) {
void resolveBlobUrl().then((u) => { void resolveBlobUrl()
.then((u) => {
if (live) setBlob(u); if (live) setBlob(u);
})
.catch(() => {
/* leave the placeholder frame; the download action still works */
}); });
} }
return () => { return () => {

151
src/components-search.tsx Normal file
View File

@@ -0,0 +1,151 @@
// PURPOSE: Corpus search (spec §5) — the input + results panel, lifted out of
// the app so every consumer (embedded + standalone) renders search the
// same way instead of hand-rolling hit rendering. Owns query state,
// paginated results, loading/error/clear; shows the caller's `browse`
// content when there is no active search. Pure: the actual search runs
// through an injected `onSearch` callback.
// ===========================================================================
import { useState, type FC, type FormEvent, type ReactNode } from "react";
import { Loader2, Search, X } from "lucide-react";
import type { ObjectSummary, SearchHit, SearchPage } from "./types";
import { ObjectList } from "./components-object";
function hitToSummary(h: SearchHit): ObjectSummary {
return {
object_id: h.object_id,
kind: h.kind,
title: h.title,
status: "active",
updated_at: h.updated_at ?? "",
effective_at: h.effective_at ?? null,
sensitivity: h.sensitivity,
};
}
export interface KnowledgeSearchProps {
/** Run a search and return a page; `cursor` drives "Load more". */
onSearch: (query: string, cursor?: string) => Promise<SearchPage>;
onOpen?: (objectId: string) => void;
placeholder?: string;
/** Shown below the input while there is no active search (the browse list). */
browse?: ReactNode;
className?: string;
}
export const KnowledgeSearch: FC<KnowledgeSearchProps> = ({
onSearch,
onOpen,
placeholder,
browse,
className,
}) => {
const [query, setQuery] = useState("");
const [hits, setHits] = useState<SearchHit[] | null>(null);
const [cursor, setCursor] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
const [loadingMore, setLoadingMore] = useState(false);
const [error, setError] = useState<string | null>(null);
function clear() {
setHits(null);
setCursor(null);
setQuery("");
setError(null);
}
async function run(e?: FormEvent) {
e?.preventDefault();
const q = query.trim();
if (!q) {
clear();
return;
}
setLoading(true);
setError(null);
try {
const page = await onSearch(q);
setHits(page.hits);
setCursor(page.next_cursor ?? null);
} catch {
setError("Search failed. Try again.");
} finally {
setLoading(false);
}
}
async function loadMore() {
if (!cursor || loadingMore) return;
setLoadingMore(true);
try {
const page = await onSearch(query.trim(), cursor);
setHits((prev) => [...(prev ?? []), ...page.hits]);
setCursor(page.next_cursor ?? null);
} catch {
setError("Couldn't load more results. Try again.");
} finally {
setLoadingMore(false);
}
}
return (
<div className={className}>
<form onSubmit={run} className="mb-4 flex items-center gap-2">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
<input
data-action="knowledge-search"
className="w-full rounded-lg border border-border bg-background py-2 pl-9 pr-9 text-sm outline-none focus:border-primary/50 focus:ring-2 focus:ring-primary/30"
placeholder={placeholder ?? "Search…"}
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
{query && (
<button
type="button"
onClick={clear}
aria-label="Clear search"
className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-muted-foreground transition-colors hover:text-foreground"
>
<X className="size-4" />
</button>
)}
</div>
</form>
{loading ? (
<p className="flex items-center justify-center gap-2 py-8 text-sm text-muted-foreground">
<Loader2 className="size-4 animate-spin" /> Searching
</p>
) : error ? (
<p className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive">
{error}
</p>
) : hits ? (
<div>
<div className="mb-2 flex items-center justify-between text-xs text-muted-foreground">
<span>
{hits.length} result{hits.length === 1 ? "" : "s"}
</span>
<button type="button" className="transition-colors hover:text-foreground" onClick={clear}>
Clear
</button>
</div>
<ObjectList
objects={hits.map(hitToSummary)}
onOpen={(o) => onOpen?.(o.object_id)}
onLoadMore={loadMore}
hasMore={!!cursor}
loadingMore={loadingMore}
emptyState={
<div className="rounded-xl border border-dashed border-border py-12 text-center text-sm text-muted-foreground">
No matches.
</div>
}
/>
</div>
) : (
(browse ?? null)
)}
</div>
);
};

View File

@@ -34,4 +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";