@recallkit/web 0.1.1

package/src/app/page.tsx

@@ -0,0 +1,132 @@
+import Link from "next/link";
+import { DEFAULT_APPROVAL_APP_URL, DEFAULT_DAEMON_URL } from "@recallkit/core/constants";
+import { CopyValue } from "@/components/CopyValue";
+import { ArrowRightIcon } from "@/components/ArrowRightIcon";
+
+export const dynamic = "force-dynamic";
+
+const installCommand = "npx skills add recallkit/core";
+
+const runtimeApiUrl = process.env.RECALLKIT_DAEMON_URL ?? DEFAULT_DAEMON_URL;
+const approvalAppUrl = process.env.RECALLKIT_LOCAL_URL ?? DEFAULT_APPROVAL_APP_URL;
+
+export default function LandingPage() {
+  return (
+    <>
+      <section className="page page--hero">
+        <h1 className="h1 h1--hero" style={{ margin: "24px 0 20px" }}>
+          Wallet-bound memory for every coding agent <span className="accent-text">you</span> use.
+        </h1>
+        <p className="lede lede--hero" style={{ marginBottom: 36 }}>
+          RecallKit turns your project context, preferences, and decisions into ownable encrypted memory on Arkiv,
+          reviewed by you, signed by your wallet, and retrieved privately on your machine across Codex, Claude Code,
+          and future agents.
+        </p>
+
+        <div className="v-row" style={{ gap: 12, flexWrap: "wrap" }}>
+          <Link href="/drafts" className="btn btn--primary">
+            Review drafts
+            <ArrowRightIcon />
+          </Link>
+          <Link href="#how" className="btn btn--ghost">
+            How it works
+          </Link>
+        </div>
+
+        <div className="terminal-cmd" style={{ marginTop: 28 }}>
+          <div className="terminal-cmd__main">
+            <span className="terminal-cmd__prompt">$</span>
+            <code>{installCommand}</code>
+          </div>
+          <CopyValue
+            value={installCommand}
+            className="copy-value--terminal"
+            iconOnly
+          />
+        </div>
+      </section>
+
+      <section className="page" style={{ borderTop: "1px solid var(--border)" }}>
+        <div className="page-header">
+          <div className="page-header__title">
+            <div className="eyebrow">
+              / why it matters
+            </div>
+            <h2 className="h2">Memory without agent custody.</h2>
+          </div>
+        </div>
+
+        <div className="v-stack" style={{ gap: 0 }}>
+          <div className="settings-row" style={{ borderTop: "1px solid var(--border-strong)" }}>
+            <div>
+              <div className="settings-row__label">Captured in the flow</div>
+              <div className="settings-row__hint">
+                The agent quietly proposes useful preferences, project decisions, and context while you keep working.
+              </div>
+            </div>
+            <div className="settings-row__value">drafts</div>
+          </div>
+          <div className="settings-row">
+            <div>
+              <div className="settings-row__label">Approved by the user</div>
+              <div className="settings-row__hint">
+                Suggested memories stay local until you choose what should become durable.
+              </div>
+            </div>
+            <div className="settings-row__value">review</div>
+          </div>
+          <div className="settings-row" style={{ borderBottom: "1px solid var(--border-strong)" }}>
+            <div>
+              <div className="settings-row__label">Owned by the wallet</div>
+              <div className="settings-row__hint">
+                The final encrypted save is signed by your connected wallet, so memory follows you across tools.
+              </div>
+            </div>
+            <div className="settings-row__value">portable</div>
+          </div>
+        </div>
+      </section>
+
+      <section id="how" className="page" style={{ borderTop: "1px solid var(--border)" }}>
+        <div className="page-header">
+          <div className="page-header__title">
+            <div className="eyebrow">
+              / how it works
+            </div>
+            <h2 className="h2">Three pieces, one clear boundary.</h2>
+          </div>
+        </div>
+
+        <div className="v-stack" style={{ gap: 0 }}>
+          <div className="settings-row" style={{ borderTop: "1px solid var(--border-strong)" }}>
+            <div>
+              <div className="settings-row__label">Agent skill</div>
+              <div className="settings-row__hint">
+                Installed in your coding agent so that it knows when to capture drafts or retrieve context.
+              </div>
+            </div>
+            <div className="settings-row__value">packages/skill</div>
+          </div>
+          <div className="settings-row">
+            <div>
+              <div className="settings-row__label">Memory runtime API</div>
+              <div className="settings-row__hint">
+                Runs in the background so memory capture and retrieval feel like part of the conversation.
+              </div>
+            </div>
+            <div className="settings-row__value">{runtimeApiUrl}</div>
+          </div>
+          <div className="settings-row" style={{ borderBottom: "1px solid var(--border-strong)" }}>
+            <div>
+              <div className="settings-row__label">Approval app</div>
+              <div className="settings-row__hint">
+                The browser UI where you review memories, encrypt them, and confirm the wallet-signed save.
+              </div>
+            </div>
+            <div className="settings-row__value">{approvalAppUrl}</div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

package/src/app/settings/page.tsx

@@ -0,0 +1,76 @@
+import { readConfig } from "@recallkit/core";
+import { CopyValue } from "@/components/CopyValue";
+
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
+
+export default async function SettingsPage() {
+  const config = await readConfig();
+
+  return (
+    <section className="page page--narrow">
+      <div className="page-header">
+        <div className="page-header__title">
+          <h1 className="h1">Settings</h1>
+        </div>
+      </div>
+
+      <div className="settings-group">
+        <div className="settings-group__head">// approval app</div>
+        <div className="settings-row">
+          <div>
+            <div className="settings-row__label">Approval app URL</div>
+            <div className="settings-row__hint">
+              Where the browser approval app is served. Skill scripts open this when you review drafts.
+            </div>
+          </div>
+          <CopyValue value={config.approvalAppUrl} />
+        </div>
+        <div className="settings-row">
+          <div>
+            <div className="settings-row__label">Arkiv chain</div>
+            <div className="settings-row__hint">Target network for Arkiv writes.</div>
+          </div>
+          <div className="settings-row__value">{config.arkivChain}</div>
+        </div>
+        <div className="settings-row">
+          <div>
+            <div className="settings-row__label">Owner wallet</div>
+            <div className="settings-row__hint">Wallet authorized to sign commits.</div>
+          </div>
+          {config.ownerWallet ? (
+            <CopyValue value={config.ownerWallet} display={shortAddress(config.ownerWallet)} />
+          ) : (
+            <div className="settings-row__value">not connected</div>
+          )}
+        </div>
+      </div>
+
+      <div className="settings-group">
+        <div className="settings-group__head">// privacy</div>
+        <div className="settings-row">
+          <div>
+            <div className="settings-row__label">Encrypt payloads</div>
+            <div className="settings-row__hint">
+              Memory text, summaries, keywords, and embeddings are encrypted before Arkiv writes.
+            </div>
+          </div>
+          <span className="status-pill">always on</span>
+        </div>
+        <div className="settings-row">
+          <div>
+            <div className="settings-row__label">Public Arkiv attributes</div>
+            <div className="settings-row__hint">
+              project · entity type · owner · schema version · scope hash · timestamps
+            </div>
+          </div>
+          <div className="settings-row__value">minimal</div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function shortAddress(address: string): string {
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+}

package/src/components/ArrowRightIcon.tsx

@@ -0,0 +1,25 @@
+import type { SVGProps } from "react";
+
+export function ArrowRightIcon({
+  size = 16,
+  strokeWidth = 1.75,
+  ...props
+}: { size?: number; strokeWidth?: number } & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      {...props}
+    >
+      <line x1="5" y1="12" x2="19" y2="12" />
+      <polyline points="13 6 19 12 13 18" />
+    </svg>
+  );
+}

package/src/components/CommitPreview.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { X } from "lucide-react";
+import { useCommitFlow } from "@/hooks/useCommitFlow";
+import { shortAddress } from "@/utils/format";
+import { CopyValue } from "./CopyValue";
+
+type Props = {
+  selectedIds: string[];
+  onClose: () => void;
+  onCommitted: () => void;
+};
+
+export function CommitPreview({ selectedIds, onClose, onCommitted }: Props) {
+  const flow = useCommitFlow(selectedIds);
+  const title = previewTitle({
+    saved: Boolean(flow.entityKeys),
+    memoryCount: flow.preview?.memories.length,
+  });
+
+  async function handleCommit() {
+    const committed = await flow.commit();
+    if (committed) {
+      onCommitted();
+    }
+  }
+
+  return (
+    <div className="modal-v2-backdrop" onClick={onClose}>
+      <div className="modal-v2" onClick={(event) => event.stopPropagation()}>
+        <div className="modal-v2__head">
+          <div>
+            <h2 className="modal-v2__title">{title}</h2>
+          </div>
+          <button className="modal-v2__close" aria-label="Close" onClick={onClose}>
+            <X size={16} />
+          </button>
+        </div>
+
+        <div className="modal-v2__body">
+          {!flow.preview && !flow.entityKeys ? (
+            <p className="body-dim" style={{ marginBottom: 16 }}>
+              Review exactly what will be saved. Nothing is signed until you confirm with your wallet.
+            </p>
+          ) : null}
+
+          {flow.preview && !flow.entityKeys ? (
+            <>
+              <div className="summary-row">
+                <span className="summary-row__label">Signer wallet</span>
+                <span className="summary-row__value">{shortAddress(flow.preview.signerWallet)}</span>
+              </div>
+              <div className="summary-row">
+                <span className="summary-row__label">Network</span>
+                <span className="summary-row__value">{flow.preview.network}</span>
+              </div>
+              <div className="summary-row">
+                <span className="summary-row__label">Ready to save</span>
+                <span className="summary-row__value">{flow.preview.memories.length}</span>
+              </div>
+              {flow.preview.sessionDraftCount > 0 ? (
+                <div className="summary-row">
+                  <span className="summary-row__label">Session drafts skipped</span>
+                  <span className="summary-row__value">{flow.preview.sessionDraftCount}</span>
+                </div>
+              ) : null}
+              <div className="summary-row">
+                <span className="summary-row__label">Estimated writes</span>
+                <span className="summary-row__value">{flow.preview.estimatedWrites}</span>
+              </div>
+              <div className="summary-row">
+                <span className="summary-row__label">Entities</span>
+                <span className="summary-row__value">{flow.preview.entities.join(", ")}</span>
+              </div>
+              <div className="summary-row">
+                <span className="summary-row__label">Encryption</span>
+                <span className="summary-row__value summary-row__value--accent">
+                  enabled · passphrase protected
+                </span>
+              </div>
+
+              {flow.preview.memories.length === 0 ? (
+                <div className="error-v2">
+                  Session memories stay local. Change at least one selected draft to Global or Current Project
+                  before saving.
+                </div>
+              ) : null}
+
+              <label className="field-v2">
+                <span className="field-v2__label">Encryption passphrase</span>
+                <input
+                  className="field-v2__input"
+                  type="password"
+                  value={flow.passphrase}
+                  onChange={(event) => flow.setPassphrase(event.target.value)}
+                  placeholder="Minimum 8 characters" autoComplete="new-password"
+                />
+              </label>
+            </>
+          ) : null}
+
+          {flow.entityKeys ? (
+            <>
+              <p className="body-dim" style={{ marginBottom: 16 }}>
+                Your wallet-signed save is complete. Entity keys:
+              </p>
+              {Object.entries(flow.entityKeys).map(([type, key]) => (
+                <div key={type} className="summary-row">
+                  <span className="summary-row__label">{type}</span>
+                  <CopyValue value={key} />
+                </div>
+              ))}
+            </>
+          ) : null}
+
+          {flow.error ? <div className="error-v2">{flow.error}</div> : null}
+        </div>
+
+        <div className="modal-v2__foot">
+          {!flow.entityKeys ? (
+            <button className="btn btn--ghost" onClick={onClose}>
+              Cancel
+            </button>
+          ) : null}
+          {!flow.preview && !flow.entityKeys ? (
+            <button className="btn btn--primary" onClick={() => void flow.loadPreview()} disabled={flow.busy}>
+              {flow.busy ? <span className="spinner" /> : null}
+              {flow.busy ? "Preparing" : "Review details"}
+            </button>
+          ) : null}
+          {flow.preview && !flow.entityKeys ? (
+            <button
+              className="btn btn--primary"
+              onClick={() => void handleCommit()}
+              disabled={!flow.canCommit}
+            >
+              {flow.busy ? <span className="spinner" /> : null}
+              {flow.busy ? "Signing" : "Confirm with wallet →"}
+            </button>
+          ) : null}
+          {flow.entityKeys ? (
+            <button className="btn btn--primary" onClick={onClose}>
+              Done
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function previewTitle({ saved, memoryCount }: { saved: boolean; memoryCount: number | undefined }) {
+  if (saved) return "Saved to Arkiv";
+  if (memoryCount === undefined) return "Save approved memories";
+  return `Save ${memoryCount} approved ${memoryCount === 1 ? "memory" : "memories"}`;
+}

package/src/components/CopyValue.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useState } from "react";
+import { Check, Copy } from "lucide-react";
+
+type Props = {
+  value: string;
+  display?: string;
+  copiedDisplay?: string;
+  className?: string;
+  iconOnly?: boolean;
+};
+
+export function CopyValue({ value, display, copiedDisplay, className, iconOnly = false }: Props) {
+  const [copied, setCopied] = useState(false);
+  const [copyFailed, setCopyFailed] = useState(false);
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setCopyFailed(false);
+      setTimeout(() => setCopied(false), 1500);
+    } catch (error) {
+      console.warn("Clipboard copy failed", error);
+      setCopyFailed(true);
+      setTimeout(() => setCopyFailed(false), 1500);
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={copy}
+      className={`copy-value${copied ? " copy-value--copied" : ""}${className ? " " + className : ""}`}
+      title={copyFailed ? "Copy failed" : copied ? "Copied" : "Copy to clipboard"}
+      aria-label={copyFailed ? "Copy failed" : copied ? "Copied to clipboard" : "Copy to clipboard"}
+    >
+      <span className="copy-value__icon" aria-hidden="true">
+        {copied ? <Check size={13} /> : <Copy size={13} />}
+      </span>
+      {iconOnly ? null : (
+        <span className="copy-value__text">
+          {copyFailed ? "Copy failed" : copied && copiedDisplay ? copiedDisplay : display ?? value}
+        </span>
+      )}
+    </button>
+  );
+}

package/src/components/MemoryInbox.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useState } from "react";
+import { usePendingMemories } from "@/hooks/usePendingMemories";
+import { EmptyInbox } from "./inbox/EmptyInbox";
+import { InboxStats } from "./inbox/InboxStats";
+import { MemoryCandidateList } from "./inbox/MemoryCandidateList";
+import { CommitPreview } from "./CommitPreview";
+
+export function MemoryInbox() {
+  const pending = usePendingMemories();
+  const [commitOpen, setCommitOpen] = useState(false);
+
+  return (
+    <section className="page">
+      <div className="page-header">
+        <div className="page-header__title">
+          <h1 className="h1">Review memories</h1>
+          <p className="lede">
+            Your agent captured these suggestions. Approve what should be saved, then sign once when you are ready.
+          </p>
+        </div>
+        <div className="page-header__actions">
+          <button
+            className="btn btn--ghost"
+            onClick={() => void pending.refresh({ force: true })}
+            disabled={pending.refreshing}
+          >
+            {pending.refreshing ? <span className="spinner" /> : null}
+            {pending.refreshing ? "Refreshing" : "Refresh"}
+          </button>
+          <button
+            className="btn btn--primary"
+            onClick={() => setCommitOpen(true)}
+            disabled={pending.committableSelectedCount === 0}
+          >
+            {pending.committableSelectedCount > 0
+              ? `Save ${pending.committableSelectedCount} memories`
+              : "Save memories"}
+          </button>
+        </div>
+      </div>
+
+      <InboxStats pending={pending.items} selectedCount={pending.selectedIds.length} />
+
+      {pending.items.length === 0 ? (
+        <EmptyInbox />
+      ) : (
+        <MemoryCandidateList
+          candidates={pending.sortedItems}
+          selectedIds={pending.selectedSet}
+          onToggle={pending.toggle}
+          onChange={pending.patchCandidate}
+          onSave={(candidate) => void pending.save(candidate)}
+          onApprove={(candidate) => void pending.approve(candidate)}
+          onReject={(id) => void pending.reject(id)}
+        />
+      )}
+
+      {pending.error ? <div className="error-v2">{pending.error}</div> : null}
+
+      {commitOpen ? (
+        <CommitPreview
+          selectedIds={pending.selectedIds}
+          onClose={() => setCommitOpen(false)}
+          onCommitted={() => {
+            pending.clearSelection();
+            void pending.refresh();
+          }}
+        />
+      ) : null}
+    </section>
+  );
+}

package/src/components/RetrievedMemories.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useMemoryCache } from "@/hooks/useMemoryCache";
+import { CachedMemoryList } from "./memory-cache/CachedMemoryList";
+import { EmptyCache } from "./memory-cache/EmptyCache";
+
+export function RetrievedMemories() {
+  const cache = useMemoryCache();
+
+  return (
+    <section className="v-stack" style={{ gap: 14 }}>
+      <div className="page-header" style={{ marginBottom: 0 }}>
+        <div className="page-header__title">
+          <div className="eyebrow">/ retrieval cache</div>
+
+          <h2 className="h2">Local decrypted cache</h2>
+          <p className="lede">Approved index and pack cache used by skill-based search.</p>
+        </div>
+        <div className="page-header__actions">
+          <button className="btn btn--ghost" onClick={cache.load} disabled={cache.loading}>
+            {cache.loading ? <span className="spinner" /> : null}
+            {cache.loading ? "Loading" : cache.loaded ? "Reload" : "Load cache"}
+          </button>
+        </div>
+      </div>
+
+      {cache.memories.length === 0 ? (
+        <EmptyCache loaded={cache.loaded} />
+      ) : (
+        <CachedMemoryList memories={cache.memories} />
+      )}
+
+      {cache.error ? <div className="error-v2">{cache.error}</div> : null}
+    </section>
+  );
+}

package/src/components/TopNav.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { WalletConnectButton } from "@/components/WalletConnectButton";
+
+const links = [
+  { href: "/dashboard", label: "Dashboard" },
+  { href: "/drafts", label: "Drafts" },
+  { href: "/settings", label: "Settings" },
+];
+
+export function TopNav() {
+  const pathname = usePathname();
+  const isActive = (href: string) => pathname === href || pathname.startsWith(href + "/");
+
+  return (
+    <header className="topnav">
+      <Link href="/" className="topnav__brand">
+        <img src="/logo.png" alt="" className="topnav__mark" />
+        <span>RecallKit</span>
+      </Link>
+      <nav className="topnav__links" aria-label="Primary navigation">
+        {links.map((link) => (
+          <Link
+            key={link.href}
+            href={link.href}
+            className={isActive(link.href) ? "is-active" : undefined}
+          >
+            {link.label}
+          </Link>
+        ))}
+      </nav>
+      <div className="topnav__right">
+        <WalletConnectButton variant="nav" />
+      </div>
+    </header>
+  );
+}

package/src/components/WalletConnectButton.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useWallet } from "@/hooks/useWallet";
+import { shortAddress } from "@/utils/format";
+
+type Props = {
+  variant?: "panel" | "nav";
+};
+
+export function WalletConnectButton({ variant = "panel" }: Props) {
+  const { status, balance, balanceLow, busy, error, connect } = useWallet();
+
+  if (variant === "nav") {
+    return (
+      <div className="wallet-nav">
+        <button className="wallet-nav__button" onClick={connect} disabled={busy}>
+          {busy ? (
+            <span className="spinner" />
+          ) : (
+            <span
+              className={
+                status?.connected ? "wallet-nav__dot" : "wallet-nav__dot wallet-nav__dot--off"
+              }
+            />
+          )}
+          <span>{busy ? "Connecting" : status?.ownerWallet ? shortAddress(status.ownerWallet) : "Connect"}</span>
+        </button>
+        {balance !== undefined ? (
+          <span className="wallet-nav__balance" style={{ color: balanceLow ? "var(--danger)" : undefined }}>
+            {Number(balance).toFixed(4)} GLM
+          </span>
+        ) : null}
+        {error ? <span className="wallet-nav__error">{error}</span> : null}
+      </div>
+    );
+  }
+
+  return (
+    <div className="v-stack" style={{ gap: 14 }}>
+      <div className="v-row v-row--between">
+        <div>
+          <div className="tile__label" style={{ marginBottom: 4 }}>Wallet</div>
+          <div className="tile__value" style={{ fontSize: 18 }}>
+            {status?.ownerWallet ? shortAddress(status.ownerWallet) : "Not connected"}
+          </div>
+        </div>
+        <button className="btn btn--primary" onClick={connect} disabled={busy}>
+          {busy ? <span className="spinner" /> : null}
+          {busy ? "Connecting" : status?.connected ? "Reconnect" : "Connect wallet"}
+        </button>
+      </div>
+
+      <div className="v-row v-row--between">
+        <span className={status?.connected ? "status-pill" : "status-pill status-pill--off"}>
+          {status?.network ?? "arkiv-braga pending"}
+        </span>
+        <span
+          className="body-dim"
+          style={{ color: balanceLow ? "var(--danger)" : "var(--text-dim)" }}
+        >
+          {balance !== undefined ? `${Number(balance).toFixed(4)} GLM` : "Balance not checked"}
+        </span>
+      </div>
+
+      {error ? <div className="error-v2">{error}</div> : null}
+    </div>
+  );
+}