From 08f82ec2b0cc0a4327aaf8f1fd835d6413529da0 Mon Sep 17 00:00:00 2001 From: hude Date: Thu, 16 Apr 2026 14:44:06 +0900 Subject: [PATCH 01/18] Add kinic portal web workspace --- .gitignore | 9 +- README.md | 3 + .../app/api/memories/[memoryId]/chat/route.ts | 67 + apps/kinic-portal/app/forbidden.tsx | 9 + apps/kinic-portal/app/globals.css | 73 + apps/kinic-portal/app/icon.svg | 5 + apps/kinic-portal/app/layout.tsx | 17 + .../app/m/[memoryId]/opengraph-image.tsx | 67 + apps/kinic-portal/app/m/[memoryId]/page.tsx | 69 + apps/kinic-portal/app/opengraph-image.tsx | 17 + apps/kinic-portal/app/page.tsx | 95 + apps/kinic-portal/components.json | 21 + .../components/memory-access-denied.tsx | 59 + apps/kinic-portal/components/memory-stat.tsx | 23 + apps/kinic-portal/components/memory-view.tsx | 289 + apps/kinic-portal/components/ui/alert.tsx | 38 + apps/kinic-portal/components/ui/badge.tsx | 29 + apps/kinic-portal/components/ui/button.tsx | 39 + apps/kinic-portal/components/ui/card.tsx | 34 + apps/kinic-portal/components/ui/input.tsx | 19 + apps/kinic-portal/components/ui/separator.tsx | 29 + apps/kinic-portal/components/ui/textarea.tsx | 18 + apps/kinic-portal/docs/kinic-portal.md | 71 + apps/kinic-portal/docs/remote-mcp.md | 100 + apps/kinic-portal/lib/ogp-image.tsx | 292 + apps/kinic-portal/lib/public-memory.ts | 47 + apps/kinic-portal/lib/site-metadata.ts | 41 + apps/kinic-portal/lib/utils.ts | 10 + apps/kinic-portal/next-env.d.ts | 6 + apps/kinic-portal/next.config.mjs | 15 + apps/kinic-portal/open-next.config.ts | 6 + apps/kinic-portal/package.json | 35 + .../packages/kinic-share/package.json | 20 + .../packages/kinic-share/src/agent.ts | 34 + .../packages/kinic-share/src/config.test.ts | 28 + .../packages/kinic-share/src/config.ts | 47 + .../packages/kinic-share/src/index.ts | 7 + .../packages/kinic-share/src/mcp.test.ts | 36 + .../packages/kinic-share/src/mcp.ts | 36 + .../packages/kinic-share/src/memory.test.ts | 54 + .../packages/kinic-share/src/memory.ts | 339 + .../packages/kinic-share/src/metadata.ts | 52 + .../packages/kinic-share/src/ogp.test.ts | 82 + .../packages/kinic-share/src/ogp.ts | 126 + .../packages/kinic-share/src/prompt.test.ts | 33 + .../packages/kinic-share/src/prompt.ts | 161 + .../packages/kinic-share/tsconfig.json | 10 + apps/kinic-portal/postcss.config.mjs | 7 + apps/kinic-portal/tsconfig.json | 43 + apps/kinic-portal/tsconfig.tsbuildinfo | 1 + apps/kinic-portal/worker-configuration.d.ts | 20 + .../workers/remote-mcp/package.json | 21 + .../workers/remote-mcp/src/index.ts | 109 + .../workers/remote-mcp/tsconfig.json | 8 + .../remote-mcp/worker-configuration.d.ts | 24 + .../workers/remote-mcp/wrangler.jsonc | 11 + apps/kinic-portal/wrangler.jsonc | 21 + package.json | 13 + pnpm-lock.yaml | 6176 +++++++++++++++++ pnpm-workspace.yaml | 4 + tsconfig.base.json | 26 + 61 files changed, 9200 insertions(+), 1 deletion(-) create mode 100644 apps/kinic-portal/app/api/memories/[memoryId]/chat/route.ts create mode 100644 apps/kinic-portal/app/forbidden.tsx create mode 100644 apps/kinic-portal/app/globals.css create mode 100644 apps/kinic-portal/app/icon.svg create mode 100644 apps/kinic-portal/app/layout.tsx create mode 100644 apps/kinic-portal/app/m/[memoryId]/opengraph-image.tsx create mode 100644 apps/kinic-portal/app/m/[memoryId]/page.tsx create mode 100644 apps/kinic-portal/app/opengraph-image.tsx create mode 100644 apps/kinic-portal/app/page.tsx create mode 100644 apps/kinic-portal/components.json create mode 100644 apps/kinic-portal/components/memory-access-denied.tsx create mode 100644 apps/kinic-portal/components/memory-stat.tsx create mode 100644 apps/kinic-portal/components/memory-view.tsx create mode 100644 apps/kinic-portal/components/ui/alert.tsx create mode 100644 apps/kinic-portal/components/ui/badge.tsx create mode 100644 apps/kinic-portal/components/ui/button.tsx create mode 100644 apps/kinic-portal/components/ui/card.tsx create mode 100644 apps/kinic-portal/components/ui/input.tsx create mode 100644 apps/kinic-portal/components/ui/separator.tsx create mode 100644 apps/kinic-portal/components/ui/textarea.tsx create mode 100644 apps/kinic-portal/docs/kinic-portal.md create mode 100644 apps/kinic-portal/docs/remote-mcp.md create mode 100644 apps/kinic-portal/lib/ogp-image.tsx create mode 100644 apps/kinic-portal/lib/public-memory.ts create mode 100644 apps/kinic-portal/lib/site-metadata.ts create mode 100644 apps/kinic-portal/lib/utils.ts create mode 100644 apps/kinic-portal/next-env.d.ts create mode 100644 apps/kinic-portal/next.config.mjs create mode 100644 apps/kinic-portal/open-next.config.ts create mode 100644 apps/kinic-portal/package.json create mode 100644 apps/kinic-portal/packages/kinic-share/package.json create mode 100644 apps/kinic-portal/packages/kinic-share/src/agent.ts create mode 100644 apps/kinic-portal/packages/kinic-share/src/config.test.ts create mode 100644 apps/kinic-portal/packages/kinic-share/src/config.ts create mode 100644 apps/kinic-portal/packages/kinic-share/src/index.ts create mode 100644 apps/kinic-portal/packages/kinic-share/src/mcp.test.ts create mode 100644 apps/kinic-portal/packages/kinic-share/src/mcp.ts create mode 100644 apps/kinic-portal/packages/kinic-share/src/memory.test.ts create mode 100644 apps/kinic-portal/packages/kinic-share/src/memory.ts create mode 100644 apps/kinic-portal/packages/kinic-share/src/metadata.ts create mode 100644 apps/kinic-portal/packages/kinic-share/src/ogp.test.ts create mode 100644 apps/kinic-portal/packages/kinic-share/src/ogp.ts create mode 100644 apps/kinic-portal/packages/kinic-share/src/prompt.test.ts create mode 100644 apps/kinic-portal/packages/kinic-share/src/prompt.ts create mode 100644 apps/kinic-portal/packages/kinic-share/tsconfig.json create mode 100644 apps/kinic-portal/postcss.config.mjs create mode 100644 apps/kinic-portal/tsconfig.json create mode 100644 apps/kinic-portal/tsconfig.tsbuildinfo create mode 100644 apps/kinic-portal/worker-configuration.d.ts create mode 100644 apps/kinic-portal/workers/remote-mcp/package.json create mode 100644 apps/kinic-portal/workers/remote-mcp/src/index.ts create mode 100644 apps/kinic-portal/workers/remote-mcp/tsconfig.json create mode 100644 apps/kinic-portal/workers/remote-mcp/worker-configuration.d.ts create mode 100644 apps/kinic-portal/workers/remote-mcp/wrangler.jsonc create mode 100644 apps/kinic-portal/wrangler.jsonc create mode 100644 package.json create mode 100644 pnpm-lock.yaml create mode 100644 pnpm-workspace.yaml create mode 100644 tsconfig.base.json diff --git a/.gitignore b/.gitignore index 3c38649..78f2847 100644 --- a/.gitignore +++ b/.gitignore @@ -7,6 +7,8 @@ target/ # environment variables .env +.dev.vars +.dev.vars.* # python packaging .venv/ @@ -32,5 +34,10 @@ pylate-index/ .vscode/ #web -.next/ node_modules/ +.pnpm-store/ +coverage/ +apps/kinic-portal/.next/ +apps/kinic-portal/.open-next/ +apps/kinic-portal/.wrangler/ +apps/kinic-portal/.playwright-cli/ diff --git a/README.md b/README.md index 60de5b0..507198c 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,9 @@ Python bindings for the Kinic CLI core, enabling you to build AI agents with ver **For the wizards building trustless agents** - no more lobotomized summons that reset on every quest. Looking for the docs? See `docs/cli.md` for the command-line interface and `docs/tui.md` for the terminal UI. +Web portal docs: `apps/kinic-portal/docs/kinic-portal.md`. + +Web workspace root: `apps/kinic-portal`. Made with ❤️ by [ICME Labs](https://blog.icme.io/). diff --git a/apps/kinic-portal/app/api/memories/[memoryId]/chat/route.ts b/apps/kinic-portal/app/api/memories/[memoryId]/chat/route.ts new file mode 100644 index 0000000..64459e7 --- /dev/null +++ b/apps/kinic-portal/app/api/memories/[memoryId]/chat/route.ts @@ -0,0 +1,67 @@ +// Where: Next.js route handler for public read-only chat. +// What: performs search-backed prompt construction and returns an extracted `` response. +// Why: the public UI needs concise Q&A without exposing mutation paths or ACL-specific detail queries. + +import { + buildAskAiPrompt, + callChatApi, + createAnonymousAgent, + extractAnswer, + fetchEmbedding, + isAnonymousAccessError, + searchMemory, +} from "@kinic/kinic-share"; +import { getCloudflareContext } from "@opennextjs/cloudflare"; +import { resolvePublicMemory, toSharedRuntimeEnv } from "@/lib/public-memory"; + +export async function POST(request: Request, { params }: { params: Promise<{ memoryId: string }> }) { + const { memoryId } = await params; + const body = parseObject(await request.json()); + const query = body.query?.trim(); + if (!query) { + return Response.json({ error: "query is required" }, { status: 400 }); + } + + const context = await getCloudflareContext({ async: true }); + const env = toSharedRuntimeEnv(context.env); + const state = await resolvePublicMemory(env, memoryId); + if (state.kind === "denied") { + return Response.json({ error: state.error }, { status: 403 }); + } + + const agent = createAnonymousAgent(env); + const embedding = await fetchEmbedding(query, env); + let hits; + try { + hits = await searchMemory(agent, memoryId, embedding); + } catch (error) { + if (isAnonymousAccessError(error)) { + return Response.json({ error: "anonymous access denied" }, { status: 403 }); + } + throw error; + } + const prompt = buildAskAiPrompt(query, hits, body.language?.trim() || "en"); + const rawResponse = await callChatApi(prompt, env); + + return Response.json({ + memory_id: memoryId, + query, + context_count: hits.length, + answer: extractAnswer(rawResponse), + }); +} + +function parseObject(value: unknown): { query?: string; language?: string } { + const record = toRecord(value); + if (!record) { + return {}; + } + return { + query: typeof record.query === "string" ? record.query : undefined, + language: typeof record.language === "string" ? record.language : undefined, + }; +} + +function toRecord(value: unknown): Record | null { + return typeof value === "object" && value !== null ? Object.fromEntries(Object.entries(value)) : null; +} diff --git a/apps/kinic-portal/app/forbidden.tsx b/apps/kinic-portal/app/forbidden.tsx new file mode 100644 index 0000000..f758fe8 --- /dev/null +++ b/apps/kinic-portal/app/forbidden.tsx @@ -0,0 +1,9 @@ +// Where: Next.js route-segment fallback for forbidden public pages. +// What: renders the shared anonymous-access denial UI with an actual HTTP 403 status. +// Why: public memory pages should keep their current denial presentation without reporting a 200. + +import { MemoryAccessDenied } from "@/components/memory-access-denied"; + +export default function ForbiddenPage() { + return ; +} diff --git a/apps/kinic-portal/app/globals.css b/apps/kinic-portal/app/globals.css new file mode 100644 index 0000000..8ea0233 --- /dev/null +++ b/apps/kinic-portal/app/globals.css @@ -0,0 +1,73 @@ +@import "tailwindcss"; + +/* Where: global styles for the Kinic portal app. + What: defines the Mintlify-inspired token system and base surfaces. + Why: keep page-level styling utility-first while centralizing only shared design decisions. */ + +:root { + --background: 0 0% 100%; + --foreground: 0 0% 5%; + --card: 0 0% 100%; + --card-foreground: 0 0% 5%; + --primary: 0 0% 5%; + --primary-foreground: 0 0% 100%; + --secondary: 0 0% 100%; + --secondary-foreground: 0 0% 5%; + --muted: 0 0% 98%; + --muted-foreground: 0 0% 40%; + --accent: 151 82% 49%; + --accent-foreground: 0 0% 5%; + --border: 0 0% 5% / 0.05; + --input: 0 0% 5% / 0.08; + --ring: 151 82% 49%; +} + +@theme inline { + --font-sans: "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Hiragino Sans", "Yu Gothic UI", + "Yu Gothic", system-ui, sans-serif; + --font-mono: "SFMono-Regular", "JetBrains Mono", "IBM Plex Mono", "Roboto Mono", "Noto Sans Mono", + "Menlo", "Consolas", monospace; + --color-background: hsl(var(--background)); + --color-foreground: hsl(var(--foreground)); + --color-card: hsl(var(--card)); + --color-card-foreground: hsl(var(--card-foreground)); + --color-primary: hsl(var(--primary)); + --color-primary-foreground: hsl(var(--primary-foreground)); + --color-secondary: hsl(var(--secondary)); + --color-secondary-foreground: hsl(var(--secondary-foreground)); + --color-muted: hsl(var(--muted)); + --color-muted-foreground: hsl(var(--muted-foreground)); + --color-accent: hsl(var(--accent)); + --color-accent-foreground: hsl(var(--accent-foreground)); + --color-border: hsl(var(--border)); + --color-input: hsl(var(--input)); + --color-ring: hsl(var(--ring)); +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; + min-height: 100vh; + color: hsl(var(--foreground)); + background: + radial-gradient(circle at top center, rgba(24, 226, 153, 0.14), transparent 22%), + linear-gradient(180deg, #fbfffd 0%, #ffffff 18%, #ffffff 100%); +} + +a { + color: inherit; + text-decoration: none; +} + +::selection { + background: rgba(24, 226, 153, 0.22); +} + +.hero-wash { + background: + radial-gradient(circle at top center, rgba(24, 226, 153, 0.18), transparent 34%), + linear-gradient(180deg, rgba(212, 250, 232, 0.32) 0%, rgba(255, 255, 255, 0.9) 52%, #ffffff 100%); +} diff --git a/apps/kinic-portal/app/icon.svg b/apps/kinic-portal/app/icon.svg new file mode 100644 index 0000000..5ef98ac --- /dev/null +++ b/apps/kinic-portal/app/icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/kinic-portal/app/layout.tsx b/apps/kinic-portal/app/layout.tsx new file mode 100644 index 0000000..4dc2986 --- /dev/null +++ b/apps/kinic-portal/app/layout.tsx @@ -0,0 +1,17 @@ +// Where: Next.js root layout for the Kinic portal. +// What: defines the shared shell, metadata, and global styles for the public site. +// Why: keep the public experience cohesive while avoiding network-dependent font fetches during build. + +import type { Metadata } from "next"; +import "./globals.css"; +import { buildSiteMetadata } from "@/lib/site-metadata"; + +export const metadata: Metadata = buildSiteMetadata(); + +export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) { + return ( + + {children} + + ); +} diff --git a/apps/kinic-portal/app/m/[memoryId]/opengraph-image.tsx b/apps/kinic-portal/app/m/[memoryId]/opengraph-image.tsx new file mode 100644 index 0000000..25c780b --- /dev/null +++ b/apps/kinic-portal/app/m/[memoryId]/opengraph-image.tsx @@ -0,0 +1,67 @@ +// Where: Open Graph image route for one public memory page. +// What: renders a Mintlify-like social card from resolved public memory metadata. +// Why: shared memory links need a deterministic preview that exposes identity, not page screenshots. + +import { getCloudflareContext } from "@opennextjs/cloudflare"; +import { ImageResponse } from "next/og"; +import { + buildMemoryOgpSearchCards, + buildMemorySearchQuery, + createAnonymousAgent, + fetchEmbedding, + searchMemory, +} from "@kinic/kinic-share"; +import { renderOgpImage } from "@/lib/ogp-image"; +import { resolvePublicMemory, toSharedRuntimeEnv } from "@/lib/public-memory"; + +export const alt = "Kinic Public Memory"; +export const size = { + width: 1200, + height: 630, +}; +export const contentType = "image/png"; + +export default async function Image({ + params, +}: { + params: Promise<{ memoryId: string }>; +}) { + const { memoryId } = await params; + const context = await getCloudflareContext({ async: true }); + const env = toSharedRuntimeEnv(context.env); + const state = await resolvePublicMemory(env, memoryId); + + if (state.kind !== "accessible") { + return new ImageResponse(renderOgpImage({}), size); + } + + const searchCards = await loadSearchCards(env, memoryId, state.memory.name, state.memory.description); + + return new ImageResponse( + renderOgpImage({ + memory: { + memoryId: state.memory.memory_id, + name: state.memory.name, + description: state.memory.description, + }, + searchCards, + }), + size, + ); +} + +async function loadSearchCards( + env: ReturnType, + memoryId: string, + name: string, + description: string | null, +) { + try { + const agent = createAnonymousAgent(env); + const embedding = await fetchEmbedding(buildMemorySearchQuery({ name, description }), env); + const hits = await searchMemory(agent, memoryId, embedding); + return buildMemoryOgpSearchCards(hits); + } catch { + return []; + } +} diff --git a/apps/kinic-portal/app/m/[memoryId]/page.tsx b/apps/kinic-portal/app/m/[memoryId]/page.tsx new file mode 100644 index 0000000..e2214d5 --- /dev/null +++ b/apps/kinic-portal/app/m/[memoryId]/page.tsx @@ -0,0 +1,69 @@ +// Where: public dynamic route for one shared memory canister. +// What: performs the server-side access check, emits route metadata, and renders either the memory or an explicit denial view. +// Why: `/m/[memoryId]` must keep the public read-only surface deterministic while avoiding ACL-specific queries. + +import { getCloudflareContext } from "@opennextjs/cloudflare"; +import type { Metadata } from "next"; +import { forbidden } from "next/navigation"; +import { resolveRemoteMcpEndpoint } from "@kinic/kinic-share"; +import { MemoryView } from "../../../components/memory-view"; +import { buildMemoryMetadataDescription, buildMemoryPageTitle } from "@kinic/kinic-share"; +import { resolvePublicMemory, toSharedRuntimeEnv } from "@/lib/public-memory"; + +export const dynamic = "force-dynamic"; + +export default async function MemoryPage({ + params, +}: { + params: Promise<{ memoryId: string }>; +}) { + const { memoryId } = await params; + const context = await getCloudflareContext({ async: true }); + const env = toSharedRuntimeEnv(context.env); + const state = await resolvePublicMemory(env, memoryId); + + if (state.kind === "denied") { + forbidden(); + } + + return ( + + ); +} + +export async function generateMetadata({ + params, +}: { + params: Promise<{ memoryId: string }>; +}): Promise { + const { memoryId } = await params; + const context = await getCloudflareContext({ async: true }); + const env = toSharedRuntimeEnv(context.env); + const state = await resolvePublicMemory(env, memoryId); + + if (state.kind !== "accessible") { + return {}; + } + + const description = buildMemoryMetadataDescription(state.memory.description); + + return { + title: buildMemoryPageTitle(state.memory.name), + description, + openGraph: { + title: buildMemoryPageTitle(state.memory.name), + description, + type: "article", + images: [`/m/${memoryId}/opengraph-image`], + }, + twitter: { + card: "summary_large_image", + title: buildMemoryPageTitle(state.memory.name), + description, + images: [`/m/${memoryId}/opengraph-image`], + }, + }; +} diff --git a/apps/kinic-portal/app/opengraph-image.tsx b/apps/kinic-portal/app/opengraph-image.tsx new file mode 100644 index 0000000..033dac0 --- /dev/null +++ b/apps/kinic-portal/app/opengraph-image.tsx @@ -0,0 +1,17 @@ +// Where: root Open Graph image route for the Kinic portal. +// What: serves the default site-level social card. +// Why: non-memory and inaccessible memory routes need a stable fallback image. + +import { ImageResponse } from "next/og"; +import { renderOgpImage } from "@/lib/ogp-image"; + +export const alt = "Kinic Portal"; +export const size = { + width: 1200, + height: 630, +}; +export const contentType = "image/png"; + +export default function Image() { + return new ImageResponse(renderOgpImage({}), size); +} diff --git a/apps/kinic-portal/app/page.tsx b/apps/kinic-portal/app/page.tsx new file mode 100644 index 0000000..fd3bf36 --- /dev/null +++ b/apps/kinic-portal/app/page.tsx @@ -0,0 +1,95 @@ +// Where: Next.js home page for the Kinic portal. +// What: explains the v1 public-sharing workflow and points users at the dynamic memory route. +// Why: initial release has no share creation UI, so the landing page must set expectations clearly. + +import Link from "next/link"; +import { Badge } from "@/components/ui/badge"; +import { buttonVariants } from "@/components/ui/button"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Separator } from "@/components/ui/separator"; +import { cn } from "@/lib/utils"; + +export default function HomePage() { + return ( +
+
+
+ Kinic Portal +
+

+ Public Memory Documentation Surface +

+

+ Share a public read-only memory through one URL. +

+

+ v1 exposes any memory canister that already grants the `anonymous reader` role at + `/m/[memoryId]`. The web surface does not create sharing settings. Publish the memory + from the CLI or TUI first, then distribute the URL. +

+
+
+ + Example Memory + + + CLI / TUI Workflow + +
+ + + Example URL + + /m/aaaaa-aa + + +
+
+ +
+ + + Includes + The public surface stays focused on documentation as product. + + +

One URL combines memory details, search, and summarized read-only Q&A.

+
+
+

Detail

+

Memory name, description, and technical summary.

+
+
+

Search

+

Read-only queries and ranked result snippets.

+
+
+

Q&A

+

A chat surface that returns only summarized answers.

+
+
+ + + + + Out of Scope + Share creation UI is still out of scope. + + +

+ No owner authentication, write actions, or ChatGPT app UI lives here. Public visibility + is determined only by the canister's `anonymous reader` setting. +

+
+

Current boundary

+

Publish in the CLI or TUI, then distribute and browse in the portal.

+
+ + +
+
+ ); +} diff --git a/apps/kinic-portal/components.json b/apps/kinic-portal/components.json new file mode 100644 index 0000000..3d296c4 --- /dev/null +++ b/apps/kinic-portal/components.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "", + "css": "app/globals.css", + "baseColor": "stone", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "iconLibrary": "lucide" +} diff --git a/apps/kinic-portal/components/memory-access-denied.tsx b/apps/kinic-portal/components/memory-access-denied.tsx new file mode 100644 index 0000000..de5fba4 --- /dev/null +++ b/apps/kinic-portal/components/memory-access-denied.tsx @@ -0,0 +1,59 @@ +// Where: server-rendered fallback for public memory pages. +// What: explains that anonymous users cannot read the target memory canister. +// Why: 403 should be explicit instead of collapsing into a generic not-found page. + +import { AlertCircle } from "lucide-react"; +import { Badge } from "@/components/ui/badge"; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; + +export function MemoryAccessDenied({ memoryId }: { memoryId?: string }) { + return ( +
+
+
+
+ Access Denied + Anonymous +
+

+ Public Memory Access +

+

+ Anonymous access is blocked. +

+

+ Anonymous reads are denied for this memory canister. +

+
+
+ +
+ + + Advisory + + + Access required + + Ask the owner to grant anonymous read access. + + + {memoryId ?

{memoryId}

: null} +

The shared URL can exist, but the public page does not render when anonymous `get_name()` fails.

+ + + + + + Resolution + What to do next + + +

Ask the owner to grant the `anonymous reader` role.

+

Once the public condition is satisfied, the same URL will expose details and read-only chat.

+ + +
+
+ ); +} diff --git a/apps/kinic-portal/components/memory-stat.tsx b/apps/kinic-portal/components/memory-stat.tsx new file mode 100644 index 0000000..9f251a4 --- /dev/null +++ b/apps/kinic-portal/components/memory-stat.tsx @@ -0,0 +1,23 @@ +// Where: composed UI component for shared memory metadata stats. +// What: wraps one labeled value in a card-shaped stat tile. +// Why: memory and landing pages should reuse one stat presentation instead of duplicating markup. + +import { Card } from "@/components/ui/card"; +import { cn } from "@/lib/utils"; + +export function MemoryStat({ + label, + value, + className, +}: { + label: string; + value: string; + className?: string; +}) { + return ( + + {label} + {value} + + ); +} diff --git a/apps/kinic-portal/components/memory-view.tsx b/apps/kinic-portal/components/memory-view.tsx new file mode 100644 index 0000000..75e55d2 --- /dev/null +++ b/apps/kinic-portal/components/memory-view.tsx @@ -0,0 +1,289 @@ +"use client"; + +// Where: client component for the public memory page. +// What: renders detail cards and drives the public read-only chat request against the Next.js BFF. +// Why: keep the interactive state on the client while server routes remain thin and deterministic. + +import { useState, useTransition } from "react"; +import { + buildClaudeCodeMcpCommand, + buildPublicMemorySearchPrompt, + buildPublicMemoryShowPrompt, + type MemoryShowResponse, +} from "@kinic/kinic-share"; +import { Check, Copy } from "lucide-react"; +import { MemoryStat } from "@/components/memory-stat"; +import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; +import { Separator } from "@/components/ui/separator"; +import { Textarea } from "@/components/ui/textarea"; + +type ChatResponse = { + answer: string; + context_count: number; +}; + +type CopyStatusKey = "endpoint" | "claude" | "show" | "search"; + +export function MemoryView({ + initialMemory, + mcpEndpoint, +}: { + initialMemory: MemoryShowResponse; + mcpEndpoint: string | null; +}) { + const [query, setQuery] = useState(""); + const [chatAnswer, setChatAnswer] = useState(""); + const [chatContextCount, setChatContextCount] = useState(0); + const [error, setError] = useState(""); + const [copyStatus, setCopyStatus] = useState(null); + const [copyError, setCopyError] = useState(""); + const [isPending, startTransition] = useTransition(); + const showPrompt = buildPublicMemoryShowPrompt(initialMemory.memory_id); + const searchPrompt = buildPublicMemorySearchPrompt(initialMemory.memory_id); + const claudeCommand = mcpEndpoint ? buildClaudeCodeMcpCommand(mcpEndpoint) : null; + + function submit() { + startTransition(async () => { + setError(""); + try { + const response = await fetch(`/api/memories/${initialMemory.memory_id}/chat`, { + method: "POST", + headers: { "content-type": "application/json" }, + body: JSON.stringify({ query, language: "en" }), + }); + const payload = parsePayload(await response.json()); + if (!response.ok) { + throw new Error(payload.error || "request failed"); + } + setChatAnswer(payload.answer); + setChatContextCount(payload.context_count); + } catch (nextError) { + setError(nextError instanceof Error ? nextError.message : "request failed"); + } + }); + } + + function copyLabel(key: CopyStatusKey): string { + return copyStatus === key ? "Copied" : "Copy"; + } + + async function copyText(key: CopyStatusKey, value: string) { + setCopyError(""); + try { + await navigator.clipboard.writeText(value); + setCopyStatus(key); + } catch { + setCopyStatus(null); + setCopyError("Clipboard unavailable"); + } + } + + return ( +
+
+
+
+ Public Memory + Read-only + + /m/{initialMemory.memory_id} + +
+
+

+ Shared Memory Surface +

+

+ {initialMemory.name} +

+

+ {initialMemory.description || "No description"} +

+
+
+ + + + +
+
+
+ +
+ + + Ask + Send a read-only question to the public memory. + Collect relevant context and return only a summarized answer. + + +