feat(snippets): named reusable artifacts with scope mirroring memories
Snippets are exact-name-keyed templates (PR formats, checklists, style rules) — prescriptive artifacts the user wants applied consistently. Distinct from memories, which are searched descriptive prose. - Migration 0002 adds scope/project_id/deleted_at to snippets, partial unique indexes per scope, and a scope/project CHECK constraint mirroring memories_scope_project_chk. - New @shared-memory/schemas: SnippetName/Put/Get/List/Delete inputs with shared scope-project refinement. - lib/snippets.ts: get/put/list/softDelete helpers used by both the Web Server Actions and the MCP tool handlers. - Four new MCP tools (snippet.put/get/list/delete) with directive descriptions contrasting against memory.* (exact-name lookup vs search; templates vs facts). - /snippets pages: list, new, [name] with edit + delete and a scope-picker when a name lives in multiple scopes. - Nav: Snippets link between Memories and Projects. Design note: when a name exists in both user and project scope, snippet.get without an explicit scope prefers project (if project key given) then falls back to user. The detail page shows a picker when the name is ambiguous and no scope query param was supplied. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.7
@@ -0,0 +1,157 @@
|
||||
import Link from "next/link";
|
||||
import { auth } from "@/auth";
|
||||
import { listSnippets } from "@/lib/snippets";
|
||||
import { Container, PageHeader } from "@/app/_components/ui/container";
|
||||
import { Card, CardBody } from "@/app/_components/ui/card";
|
||||
import { Badge } from "@/app/_components/ui/badge";
|
||||
import { Button } from "@/app/_components/ui/button";
|
||||
import { Input } from "@/app/_components/ui/input";
|
||||
import { EmptyState } from "@/app/_components/ui/empty-state";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
type Scope = "project" | "user";
|
||||
|
||||
function detailHref(name: string, scope: Scope, projectKey: string | null): string {
|
||||
const params = new URLSearchParams({ scope });
|
||||
if (scope === "project" && projectKey) params.set("project", projectKey);
|
||||
return `/snippets/${encodeURIComponent(name)}?${params.toString()}`;
|
||||
}
|
||||
|
||||
export default async function SnippetsPage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{ scope?: string; project?: string; tag?: string }>;
|
||||
}) {
|
||||
const session = await auth();
|
||||
const userId = session!.user.id;
|
||||
const params = await searchParams;
|
||||
const scope: Scope | undefined =
|
||||
params.scope === "user" || params.scope === "project" ? params.scope : undefined;
|
||||
const project = params.project?.trim() || undefined;
|
||||
const tag = params.tag?.trim() || undefined;
|
||||
|
||||
const rows = await listSnippets(userId, {
|
||||
scope,
|
||||
projectKey: project,
|
||||
tags: tag ? [tag] : undefined,
|
||||
limit: 200,
|
||||
});
|
||||
|
||||
return (
|
||||
<Container className="pt-6">
|
||||
<PageHeader
|
||||
title="Snippets"
|
||||
description={
|
||||
rows.length === 0
|
||||
? "Named, reusable templates. Fetched by exact name, never searched."
|
||||
: `${rows.length} snippet${rows.length === 1 ? "" : "s"}, most recently updated first.`
|
||||
}
|
||||
actions={
|
||||
<Link href="/snippets/new" className="no-underline">
|
||||
<Button>New snippet</Button>
|
||||
</Link>
|
||||
}
|
||||
/>
|
||||
|
||||
<form method="GET" action="/snippets" className="mb-6 flex flex-wrap items-center gap-2">
|
||||
<FilterSelect
|
||||
name="scope"
|
||||
value={scope}
|
||||
options={["", "project", "user"]}
|
||||
placeholder="Any scope"
|
||||
/>
|
||||
<Input
|
||||
name="project"
|
||||
placeholder="Project key…"
|
||||
defaultValue={project ?? ""}
|
||||
className="w-44"
|
||||
/>
|
||||
<Input name="tag" placeholder="Tag…" defaultValue={tag ?? ""} className="w-32" />
|
||||
<Button type="submit" variant="secondary">
|
||||
Apply
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{rows.length === 0 ? (
|
||||
<EmptyState
|
||||
title="No snippets yet"
|
||||
description="Create a snippet to save a template, format, or checklist you want to reuse. Snippets are fetched by exact name — pick something stable like 'pr-description-format' or 'commit-msg-rules'."
|
||||
action={
|
||||
<Link href="/snippets/new" className="no-underline">
|
||||
<Button>Create the first one</Button>
|
||||
</Link>
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{rows.map((s) => (
|
||||
<li key={s.id}>
|
||||
<Link
|
||||
href={detailHref(s.name, s.scope, s.projectKey)}
|
||||
className="block no-underline"
|
||||
>
|
||||
<Card className="hover:border-border-strong transition-colors">
|
||||
<CardBody className="space-y-2">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="font-mono text-sm text-fg">{s.name}</span>
|
||||
<Badge tone={s.scope === "user" ? "accent" : "neutral"}>
|
||||
{s.scope}
|
||||
</Badge>
|
||||
{s.projectKey ? (
|
||||
<span className="font-mono text-xs text-fg-subtle">
|
||||
· {s.projectKey}
|
||||
</span>
|
||||
) : null}
|
||||
<span className="ml-auto text-xs text-fg-subtle">
|
||||
updated {new Date(s.updatedAt).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
{s.description ? (
|
||||
<p className="text-sm text-fg-muted line-clamp-2">{s.description}</p>
|
||||
) : (
|
||||
<p className="text-sm text-fg-subtle line-clamp-2 font-mono">{s.body}</p>
|
||||
)}
|
||||
{s.tags.length ? (
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{s.tags.map((t) => (
|
||||
<Badge key={t}>{t}</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
function FilterSelect({
|
||||
name,
|
||||
value,
|
||||
options,
|
||||
placeholder,
|
||||
}: {
|
||||
name: string;
|
||||
value: string | undefined;
|
||||
options: string[];
|
||||
placeholder: string;
|
||||
}) {
|
||||
return (
|
||||
<select
|
||||
name={name}
|
||||
defaultValue={value ?? ""}
|
||||
className="h-9 px-2 rounded-md bg-surface-1 border border-border text-fg text-sm"
|
||||
>
|
||||
{options.map((o) => (
|
||||
<option key={o} value={o}>
|
||||
{o === "" ? placeholder : o}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user