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,251 @@
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
import { and, eq, isNull } from "drizzle-orm";
|
||||
import { auth } from "@/auth";
|
||||
import { db } from "@/lib/db/client";
|
||||
import { snippets, projects } from "@/lib/db/schema";
|
||||
import { updateSnippetAction, deleteSnippetAction } from "@/lib/snippet-actions";
|
||||
import { getSnippet, type SnippetWithProjectKey } from "@/lib/snippets";
|
||||
import { Container, PageHeader } from "@/app/_components/ui/container";
|
||||
import { Card, CardBody, CardHeader } from "@/app/_components/ui/card";
|
||||
import { Input, Textarea, Label } from "@/app/_components/ui/input";
|
||||
import { Button } from "@/app/_components/ui/button";
|
||||
import { Badge } from "@/app/_components/ui/badge";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
interface SiblingHit {
|
||||
scope: "project" | "user";
|
||||
projectKey: string | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* When a snippet name exists in more than one scope (e.g. a user-scope
|
||||
* default plus one or more project-scope variants), we need to either
|
||||
* disambiguate by query string or, if no hint is given, show a picker.
|
||||
*/
|
||||
async function findAllMatches(userId: string, name: string): Promise<SiblingHit[]> {
|
||||
const rows = await db
|
||||
.select({
|
||||
scope: snippets.scope,
|
||||
projectKey: projects.key,
|
||||
})
|
||||
.from(snippets)
|
||||
.leftJoin(projects, eq(snippets.projectId, projects.id))
|
||||
.where(and(eq(snippets.userId, userId), eq(snippets.name, name), isNull(snippets.deletedAt)));
|
||||
return rows as SiblingHit[];
|
||||
}
|
||||
|
||||
export default async function SnippetDetailPage({
|
||||
params,
|
||||
searchParams,
|
||||
}: {
|
||||
params: Promise<{ name: string }>;
|
||||
searchParams: Promise<{ scope?: string; project?: string; edit?: string }>;
|
||||
}) {
|
||||
const session = await auth();
|
||||
const userId = session!.user.id;
|
||||
const { name: rawName } = await params;
|
||||
const name = decodeURIComponent(rawName);
|
||||
const sp = await searchParams;
|
||||
const scope: "project" | "user" | undefined =
|
||||
sp.scope === "user" || sp.scope === "project" ? sp.scope : undefined;
|
||||
const project = sp.project?.trim() || undefined;
|
||||
const isEditing = sp.edit === "1";
|
||||
|
||||
const siblings = await findAllMatches(userId, name);
|
||||
if (siblings.length === 0) notFound();
|
||||
|
||||
// If multiple matches and the user hasn't disambiguated, show a picker.
|
||||
if (!scope && siblings.length > 1) {
|
||||
return (
|
||||
<Container className="pt-6 max-w-3xl">
|
||||
<PageHeader
|
||||
title={name}
|
||||
description={`This name exists in ${siblings.length} scopes — pick one to view.`}
|
||||
actions={
|
||||
<Link href="/snippets" className="no-underline">
|
||||
<Button type="button" variant="secondary">
|
||||
Back
|
||||
</Button>
|
||||
</Link>
|
||||
}
|
||||
/>
|
||||
<Card>
|
||||
{siblings.map((s, i) => {
|
||||
const params = new URLSearchParams({ scope: s.scope });
|
||||
if (s.scope === "project" && s.projectKey) {
|
||||
params.set("project", s.projectKey);
|
||||
}
|
||||
return (
|
||||
<Link
|
||||
key={`${s.scope}-${s.projectKey ?? ""}`}
|
||||
href={`/snippets/${encodeURIComponent(name)}?${params.toString()}`}
|
||||
className={`block px-4 py-3 hover:bg-surface-2 no-underline ${i > 0 ? "border-t border-border" : ""}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge tone={s.scope === "user" ? "accent" : "neutral"}>{s.scope}</Badge>
|
||||
{s.projectKey ? (
|
||||
<span className="font-mono text-sm text-fg">{s.projectKey}</span>
|
||||
) : (
|
||||
<span className="text-sm text-fg-muted">applies everywhere</span>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</Card>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
const snippet: SnippetWithProjectKey | null = await getSnippet(userId, {
|
||||
name,
|
||||
scope,
|
||||
projectKey: project,
|
||||
});
|
||||
|
||||
if (!snippet) notFound();
|
||||
|
||||
return (
|
||||
<Container className="pt-6 max-w-3xl">
|
||||
<PageHeader
|
||||
title={isEditing ? `Edit ${snippet.name}` : snippet.name}
|
||||
description={
|
||||
<span className="font-mono text-xs text-fg-subtle">
|
||||
{snippet.scope}
|
||||
{snippet.projectKey ? ` · ${snippet.projectKey}` : ""}
|
||||
</span>
|
||||
}
|
||||
actions={
|
||||
<>
|
||||
<Link href="/snippets" className="no-underline">
|
||||
<Button type="button" variant="secondary">
|
||||
Back
|
||||
</Button>
|
||||
</Link>
|
||||
{!isEditing ? (
|
||||
<Link
|
||||
href={`/snippets/${encodeURIComponent(snippet.name)}?${new URLSearchParams({
|
||||
scope: snippet.scope,
|
||||
...(snippet.scope === "project" && snippet.projectKey
|
||||
? { project: snippet.projectKey }
|
||||
: {}),
|
||||
edit: "1",
|
||||
}).toString()}`}
|
||||
className="no-underline"
|
||||
>
|
||||
<Button>Edit</Button>
|
||||
</Link>
|
||||
) : null}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
<Card className="mb-4">
|
||||
<CardHeader className="flex items-center gap-2 text-xs text-fg-muted flex-wrap">
|
||||
<Badge tone={snippet.scope === "user" ? "accent" : "neutral"}>{snippet.scope}</Badge>
|
||||
{snippet.projectKey ? <span className="font-mono">{snippet.projectKey}</span> : null}
|
||||
<span>· Created {new Date(snippet.createdAt).toLocaleString()}</span>
|
||||
{snippet.updatedAt.getTime() !== snippet.createdAt.getTime() ? (
|
||||
<span>· Updated {new Date(snippet.updatedAt).toLocaleString()}</span>
|
||||
) : null}
|
||||
</CardHeader>
|
||||
|
||||
{isEditing ? (
|
||||
<CardBody>
|
||||
<form action={updateSnippetAction} className="space-y-4">
|
||||
<input type="hidden" name="name" value={snippet.name} />
|
||||
<input type="hidden" name="scope" value={snippet.scope} />
|
||||
{snippet.scope === "project" && snippet.projectKey ? (
|
||||
<input type="hidden" name="project" value={snippet.projectKey} />
|
||||
) : null}
|
||||
|
||||
<div>
|
||||
<Label htmlFor="description" hint="Optional">
|
||||
Description
|
||||
</Label>
|
||||
<Input
|
||||
id="description"
|
||||
name="description"
|
||||
defaultValue={snippet.description ?? ""}
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="body">Body</Label>
|
||||
<Textarea
|
||||
id="body"
|
||||
name="body"
|
||||
required
|
||||
rows={16}
|
||||
defaultValue={snippet.body}
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="tags" hint="comma- or space-separated">
|
||||
Tags
|
||||
</Label>
|
||||
<Input
|
||||
id="tags"
|
||||
name="tags"
|
||||
defaultValue={snippet.tags.join(", ")}
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Link
|
||||
href={`/snippets/${encodeURIComponent(snippet.name)}?${new URLSearchParams({
|
||||
scope: snippet.scope,
|
||||
...(snippet.scope === "project" && snippet.projectKey
|
||||
? { project: snippet.projectKey }
|
||||
: {}),
|
||||
}).toString()}`}
|
||||
className="no-underline"
|
||||
>
|
||||
<Button type="button" variant="secondary">
|
||||
Cancel
|
||||
</Button>
|
||||
</Link>
|
||||
<Button type="submit">Save changes</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardBody>
|
||||
) : (
|
||||
<CardBody>
|
||||
{snippet.description ? (
|
||||
<p className="text-sm text-fg-muted mb-3">{snippet.description}</p>
|
||||
) : null}
|
||||
<pre className="whitespace-pre-wrap break-words bg-transparent border-0 p-0 text-sm text-fg leading-relaxed font-mono">
|
||||
{snippet.body}
|
||||
</pre>
|
||||
{snippet.tags.length ? (
|
||||
<div className="flex gap-1 flex-wrap mt-4">
|
||||
{snippet.tags.map((t) => (
|
||||
<Badge key={t}>{t}</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</CardBody>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{!isEditing ? (
|
||||
<form action={deleteSnippetAction} className="flex justify-end">
|
||||
<input type="hidden" name="name" value={snippet.name} />
|
||||
<input type="hidden" name="scope" value={snippet.scope} />
|
||||
{snippet.scope === "project" && snippet.projectKey ? (
|
||||
<input type="hidden" name="project" value={snippet.projectKey} />
|
||||
) : null}
|
||||
<Button type="submit" variant="danger" size="sm">
|
||||
Delete snippet
|
||||
</Button>
|
||||
</form>
|
||||
) : null}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user