@gmickel/gno 2.4.0 → 2.6.0

package/src/serve/public/components/sessions/ImportReceipt.tsx

@@ -0,0 +1,238 @@
+import type { Ref } from "react";
+
+import {
+  AlertTriangleIcon,
+  CheckCircle2Icon,
+  CircleSlashIcon,
+  EyeIcon,
+  XCircleIcon,
+} from "lucide-react";
+
+import type { SessionImportReceipt, SessionUnitReceipt } from "./api";
+
+import { cn } from "../../lib/utils";
+import { Badge } from "../ui/badge";
+
+const STATUS_COPY: Record<
+  SessionImportReceipt["status"],
+  { label: string; tone: string; Icon: typeof CheckCircle2Icon }
+> = {
+  complete: {
+    label: "Complete",
+    tone: "border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+    Icon: CheckCircle2Icon,
+  },
+  partial: {
+    label: "Partial — some units were not fully read",
+    tone: "border-amber-500/50 bg-amber-500/10 text-amber-800 dark:text-amber-200",
+    Icon: AlertTriangleIcon,
+  },
+  failed: {
+    label: "Failed",
+    tone: "border-destructive/50 bg-destructive/10 text-destructive",
+    Icon: XCircleIcon,
+  },
+  nothing_to_do: {
+    label: "Nothing to do — everything is current",
+    tone: "border-border bg-muted/40 text-muted-foreground",
+    Icon: CircleSlashIcon,
+  },
+};
+
+/** Unit outcomes worth listing individually (unchanged units are noise). */
+const NOTABLE_OUTCOMES = new Set<SessionUnitReceipt["outcome"]>([
+  "imported",
+  "updated",
+  "skipped_policy",
+  "unsupported",
+  "incomplete",
+  "failed",
+]);
+
+const OUTCOME_TONE: Partial<Record<SessionUnitReceipt["outcome"], string>> = {
+  incomplete: "text-amber-700 dark:text-amber-300",
+  failed: "text-destructive",
+  unsupported: "text-destructive",
+  skipped_policy: "text-amber-700 dark:text-amber-300",
+};
+
+function Stat({ label, value }: { label: string; value: number | string }) {
+  return (
+    <div className="min-w-0 rounded-md border border-border/50 bg-muted/30 p-2">
+      <dt className="break-words text-muted-foreground text-xs">{label}</dt>
+      <dd className="font-mono font-semibold text-sm">{value}</dd>
+    </div>
+  );
+}
+
+interface ImportReceiptProps {
+  receipt: SessionImportReceipt;
+  /** Focus target after a preview/import completes (region is tabIndex -1). */
+  ref?: Ref<HTMLElement>;
+}
+
+export function ImportReceipt({ receipt, ref }: ImportReceiptProps) {
+  const status = STATUS_COPY[receipt.status];
+  const { counts, turns } = receipt;
+  const notable = receipt.units.filter((unit) =>
+    NOTABLE_OUTCOMES.has(unit.outcome)
+  );
+  const destinations = [
+    ...new Set(receipt.units.flatMap((unit) => unit.collections)),
+  ].sort();
+
+  return (
+    <section
+      aria-label={receipt.dryRun ? "Import preview" : "Import receipt"}
+      className="min-w-0 space-y-4 rounded-lg border border-border/60 bg-card/60 p-4 outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+      ref={ref}
+      tabIndex={-1}
+    >
+      <div className="flex flex-wrap items-center gap-2">
+        {receipt.dryRun && (
+          <Badge className="gap-1" variant="outline">
+            <EyeIcon />
+            Preview only — nothing was written
+          </Badge>
+        )}
+        <span
+          className={cn(
+            "inline-flex min-w-0 items-center gap-1.5 rounded-md border px-2 py-1 font-medium text-sm",
+            status.tone
+          )}
+          data-status={receipt.status}
+          role="status"
+        >
+          <status.Icon aria-hidden="true" className="size-4 shrink-0" />
+          <span className="break-words">{status.label}</span>
+        </span>
+        <span className="text-muted-foreground text-xs">
+          Sources: {receipt.sourceIds.join(", ") || "—"} · index{" "}
+          <span className="font-mono">{receipt.index}</span>
+        </span>
+      </div>
+
+      <div>
+        <h4 className="mb-1 font-medium text-sm">Threads and units</h4>
+        <dl className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+          <Stat label="Imported" value={counts.imported} />
+          <Stat label="Updated" value={counts.updated} />
+          <Stat label="Unchanged" value={counts.unchanged} />
+          <Stat label="Skipped by policy" value={counts.skippedPolicy} />
+          <Stat label="Unsupported" value={counts.unsupported} />
+          <Stat label="Incomplete" value={counts.incomplete} />
+          <Stat label="Failed" value={counts.failed} />
+          <Stat label="Deferred units" value={receipt.deferredUnits} />
+        </dl>
+      </div>
+
+      <div>
+        <h4 className="mb-1 font-medium text-sm">Turns and redaction</h4>
+        <dl className="grid grid-cols-2 gap-2 sm:grid-cols-3">
+          <Stat label="Human turns" value={turns.human} />
+          <Stat label="Assistant turns" value={turns.assistant} />
+          <Stat label="Redactions" value={turns.redactions} />
+          <Stat
+            label="Injected context skipped"
+            value={turns.injectedSkipped}
+          />
+          <Stat
+            label="Copied history skipped"
+            value={turns.copiedHistorySkipped}
+          />
+          <Stat label="Over limit" value={turns.overLimit} />
+        </dl>
+      </div>
+
+      <p className="text-sm">
+        <span className="text-muted-foreground">Destination collections: </span>
+        {destinations.length > 0 ? (
+          <span className="font-mono break-all">{destinations.join(", ")}</span>
+        ) : (
+          <span className="text-muted-foreground">none in this run</span>
+        )}
+      </p>
+
+      {!receipt.dryRun && (
+        <p className="text-sm">
+          <span className="text-muted-foreground">Lexical search: </span>
+          <span
+            className={cn(
+              "font-medium",
+              receipt.lexical.status === "failed" && "text-destructive"
+            )}
+          >
+            {receipt.lexical.status}
+          </span>
+          {receipt.lexical.error && (
+            <span className="block break-words text-destructive text-xs">
+              {receipt.lexical.error}
+            </span>
+          )}
+          <span className="text-muted-foreground">
+            {" "}
+            · embedding backlog: {receipt.embedding.backlog ?? "n/a"}
+          </span>
+        </p>
+      )}
+
+      {receipt.warnings.length > 0 && (
+        <ul className="list-disc space-y-1 pl-5 text-amber-800 text-sm dark:text-amber-200">
+          {receipt.warnings.map((warning) => (
+            <li className="break-words" key={warning}>
+              {warning}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {notable.length > 0 && (
+        <div className="min-w-0">
+          <h4 className="mb-1 font-medium text-sm">Unit outcomes</h4>
+          <ul className="divide-y divide-border/40 rounded-md border border-border/50">
+            {notable.map((unit) => (
+              <li
+                className="min-w-0 space-y-0.5 p-2 text-sm"
+                key={`${unit.sourceId}:${unit.locator}`}
+              >
+                <div className="flex flex-wrap items-baseline gap-x-2">
+                  <span
+                    className={cn(
+                      "font-medium",
+                      OUTCOME_TONE[unit.outcome] ?? "text-foreground"
+                    )}
+                  >
+                    {unit.outcome.replace("_", " ")}
+                  </span>
+                  <span className="min-w-0 break-all font-mono text-xs">
+                    {unit.locator}
+                  </span>
+                </div>
+                <div className="text-muted-foreground text-xs">
+                  {unit.threads} thread{unit.threads === 1 ? "" : "s"} ·{" "}
+                  {unit.turns} turn{unit.turns === 1 ? "" : "s"}
+                  {unit.collections.length > 0 &&
+                    ` → ${unit.collections.join(", ")}`}
+                  {unit.reason && ` · reason: ${unit.reason}`}
+                </div>
+                {unit.warnings?.map((warning) => (
+                  <div
+                    className="break-words text-amber-800 text-xs dark:text-amber-200"
+                    key={warning}
+                  >
+                    {warning}
+                  </div>
+                ))}
+              </li>
+            ))}
+          </ul>
+          {receipt.unitsTruncated && (
+            <p className="mt-1 text-muted-foreground text-xs">
+              More units were processed than are listed here.
+            </p>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}

package/src/serve/public/components/sessions/SessionSearch.tsx

@@ -0,0 +1,286 @@
+import { Loader2Icon, SearchIcon } from "lucide-react";
+import { type FormEvent, useEffect, useId, useState } from "react";
+
+import {
+  SESSION_HARNESS_LABELS,
+  SESSION_HARNESSES,
+  type SessionHarness,
+} from "../../../../sessions/types";
+import { apiFetch } from "../../hooks/use-api";
+import { buildDocDeepLink } from "../../lib/deep-links";
+import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { renderSessionSnippet } from "./snippet";
+
+interface SessionSearchResult {
+  docid: string;
+  uri: string;
+  title?: string;
+  snippet: string;
+  categories?: string[];
+  record?: {
+    author?: string;
+    categories?: string[];
+    dateFields?: Record<string, string>;
+  };
+}
+
+interface SearchResponse {
+  results: SessionSearchResult[];
+}
+
+interface TagsResponse {
+  tags: Array<{ tag: string; count: number }>;
+}
+
+type Role = "human" | "assistant";
+
+const SELECT_CLASS =
+  "h-9 w-full min-w-0 rounded-md border border-input bg-background px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/50";
+
+const tagValue = (tags: readonly string[], prefix: string): string | null =>
+  tags.find((tag) => tag.startsWith(`${prefix}/`))?.slice(prefix.length + 1) ??
+  null;
+
+function resultRole(result: SessionSearchResult, tags: string[]): Role | null {
+  const author = result.record?.author?.toLowerCase();
+  if (author === "human" || author === "assistant") return author;
+  const role = tagValue(tags, "role");
+  if (role === "human" || role === "assistant") return role;
+  const title = result.title ?? "";
+  if (title.startsWith("Human")) return "human";
+  if (title.startsWith("Assistant")) return "assistant";
+  return null;
+}
+
+function AuthorBadge({ role }: { role: Role | null }) {
+  if (role === "human") {
+    return (
+      <Badge className="bg-sky-600 text-white dark:bg-sky-500">Human</Badge>
+    );
+  }
+  if (role === "assistant") {
+    return (
+      <Badge className="whitespace-normal text-left" variant="outline">
+        Assistant — suggestion, not a user decision
+      </Badge>
+    );
+  }
+  return <Badge variant="outline">Author unknown</Badge>;
+}
+
+function formatRecorded(iso: string | undefined): string {
+  if (!iso) return "time unknown";
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime()) ? iso : date.toLocaleString();
+}
+
+interface SessionSearchProps {
+  collections: string[];
+  navigate: (to: string) => void;
+}
+
+export function SessionSearch({ collections, navigate }: SessionSearchProps) {
+  const id = useId();
+  const [query, setQuery] = useState("");
+  const [harness, setHarness] = useState<"" | SessionHarness>("");
+  const [project, setProject] = useState("");
+  const [role, setRole] = useState<"" | Role>("");
+  const [collection, setCollection] = useState("");
+  const [projects, setProjects] = useState<string[]>([]);
+  const [results, setResults] = useState<SessionSearchResult[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    void apiFetch<TagsResponse>("/api/tags?prefix=project").then(({ data }) => {
+      setProjects(
+        (data?.tags ?? [])
+          .map((entry) => entry.tag)
+          .filter((tag) => tag.startsWith("project/"))
+          .map((tag) => tag.slice("project/".length))
+          .sort()
+      );
+    });
+  }, []);
+
+  const submit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const trimmed = query.trim();
+    if (!trimmed) return;
+    const tagsAll = [
+      "session",
+      harness ? `harness/${harness}` : null,
+      project ? `project/${project}` : null,
+      role ? `role/${role}` : null,
+    ].filter((tag): tag is string => tag !== null);
+    setLoading(true);
+    const { data, error: err } = await apiFetch<SearchResponse>("/api/search", {
+      method: "POST",
+      body: JSON.stringify({
+        query: trimmed,
+        limit: 20,
+        tagsAll: tagsAll.join(","),
+        ...(collection ? { collection } : {}),
+      }),
+    });
+    setLoading(false);
+    setError(err);
+    setResults(data?.results ?? null);
+  };
+
+  return (
+    <section aria-labelledby={`${id}-heading`} className="min-w-0 space-y-4">
+      <h2 className="font-semibold text-xl" id={`${id}-heading`}>
+        Search sessions
+      </h2>
+      <form
+        className="grid min-w-0 gap-3 sm:grid-cols-2 lg:grid-cols-4"
+        onSubmit={(event) => void submit(event)}
+        role="search"
+      >
+        <div className="grid min-w-0 gap-1 text-sm sm:col-span-2 lg:col-span-4">
+          <label htmlFor={`${id}-query`}>Session search query</label>
+          <div className="flex min-w-0 gap-2">
+            <Input
+              id={`${id}-query`}
+              onChange={(event) => setQuery(event.currentTarget.value)}
+              placeholder="What was decided about…"
+              type="search"
+              value={query}
+            />
+            <Button disabled={loading || !query.trim()} type="submit">
+              {loading ? (
+                <Loader2Icon className="animate-spin" />
+              ) : (
+                <SearchIcon />
+              )}
+              Search
+            </Button>
+          </div>
+        </div>
+        <label className="grid gap-1 text-sm" htmlFor={`${id}-harness`}>
+          Harness
+          <select
+            className={SELECT_CLASS}
+            id={`${id}-harness`}
+            onChange={(event) =>
+              setHarness(event.currentTarget.value as "" | SessionHarness)
+            }
+            value={harness}
+          >
+            <option value="">All harnesses</option>
+            {SESSION_HARNESSES.map((value) => (
+              <option key={value} value={value}>
+                {SESSION_HARNESS_LABELS[value]}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="grid gap-1 text-sm" htmlFor={`${id}-project`}>
+          Project
+          <select
+            className={SELECT_CLASS}
+            id={`${id}-project`}
+            onChange={(event) => setProject(event.currentTarget.value)}
+            value={project}
+          >
+            <option value="">All projects</option>
+            {projects.map((value) => (
+              <option key={value} value={value}>
+                {value}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="grid gap-1 text-sm" htmlFor={`${id}-role`}>
+          Speaker
+          <select
+            className={SELECT_CLASS}
+            id={`${id}-role`}
+            onChange={(event) =>
+              setRole(event.currentTarget.value as "" | Role)
+            }
+            value={role}
+          >
+            <option value="">Human and assistant</option>
+            <option value="human">Human only</option>
+            <option value="assistant">Assistant only</option>
+          </select>
+        </label>
+        <label className="grid gap-1 text-sm" htmlFor={`${id}-collection`}>
+          Collection
+          <select
+            className={SELECT_CLASS}
+            id={`${id}-collection`}
+            onChange={(event) => setCollection(event.currentTarget.value)}
+            value={collection}
+          >
+            <option value="">All archive collections</option>
+            {collections.map((value) => (
+              <option key={value} value={value}>
+                {value}
+              </option>
+            ))}
+          </select>
+        </label>
+      </form>
+
+      {error && (
+        <p className="break-words text-destructive text-sm" role="alert">
+          {error}
+        </p>
+      )}
+      {results && results.length === 0 && (
+        <p className="text-muted-foreground text-sm">
+          No archived turns matched.
+        </p>
+      )}
+      {results && results.length > 0 && (
+        <ol aria-label="Session search results" className="space-y-3">
+          {results.map((result) => {
+            const tags = result.categories ?? result.record?.categories ?? [];
+            const resultHarness = tagValue(tags, "harness");
+            const resultProject = tagValue(tags, "project");
+            const href = buildDocDeepLink({ uri: result.uri });
+            return (
+              <li
+                className="min-w-0 space-y-2 rounded-lg border border-border/60 p-3"
+                key={result.docid}
+              >
+                <div className="flex flex-wrap items-center gap-2">
+                  <AuthorBadge role={resultRole(result, tags)} />
+                  <Badge variant="secondary">
+                    {resultHarness
+                      ? (SESSION_HARNESS_LABELS[
+                          resultHarness as SessionHarness
+                        ] ?? resultHarness)
+                      : "harness unknown"}
+                  </Badge>
+                  <span className="text-muted-foreground text-xs">
+                    project {resultProject ?? "none"} ·{" "}
+                    {formatRecorded(result.record?.dateFields?.recorded)}
+                  </span>
+                </div>
+                <a
+                  className="block break-words font-medium text-primary underline-offset-2 hover:underline"
+                  href={href}
+                  onClick={(event) => {
+                    event.preventDefault();
+                    navigate(href);
+                  }}
+                >
+                  {result.title || result.uri}
+                </a>
+                <p className="line-clamp-3 break-words text-muted-foreground text-sm">
+                  {renderSessionSnippet(result.snippet)}
+                </p>
+              </li>
+            );
+          })}
+        </ol>
+      )}
+    </section>
+  );
+}