@anchrd/intel 0.59.0

package/ui/src/node-details/node-details.tsx

@@ -0,0 +1,545 @@
+import type { Flow } from "@contract/flow.ts";
+import type { Node } from "@contract/node.ts";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
+import { ChevronRight } from "lucide-react";
+import { type ReactNode, useId, useLayoutEffect, useRef, useState } from "react";
+import { allTreeLevelsKey, treeLevelKey } from "@/app/tree-move/tree-move.tsx";
+import { attachmentPreviewKind, formatFileSize } from "@/attachment-detail/attachment-detail.ts";
+import { boardKey } from "@/board/board-data/board-data.ts";
+import { folderContentsOf, folderIndexOf } from "@/folder-index/folder-index.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { cn } from "@/lib/utils";
+import { NodeEditor } from "@/node-editor/node-editor.tsx";
+import { resourceErrorKey } from "@/resource-error.ts";
+import type { ResourceTarget } from "@/resource-menu/resource-menu.tsx";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+import { useDateTime } from "@/time/time-context.tsx";
+
+/**
+ * The details of the open thing: its description, and the facts that belong to its kind (#819).
+ *
+ * ⚠️ **One field for every kind, and that is the whole point of the ticket.** A file had one since
+ * #470 and nothing else did, so the description of everything else stood as grey running text under
+ * the title. In a tree where everything is a node, a details field that knows one kind is the
+ * exception and one for all of them is the rule.
+ *
+ * ⚠️ **The panel is MOUNTED only while it is open**, never merely hidden. Every kind answers its
+ * facts from a query, and a hidden panel would ask for them on every screen the reader passes
+ * through: opening a folder would read its contents twice, once for the tree and once for a field
+ * nobody looked at. Mounting is also what keeps the queries free of an `enabled` flag per kind.
+ *
+ * ⚠️ **The fold is local state and never a stored field.** It is how the thing is being looked at,
+ * not what it says (the same line the head block draws in `frontmatter.tsx`, #657).
+ */
+export function NodeDetails({ target }: { target: ResourceTarget }) {
+  const i18n = useI18n();
+  const [open, setOpen] = useState(false);
+  const panelId = useId();
+  return (
+    <div className="mt-1 min-w-0">
+      <button
+        type="button"
+        aria-expanded={open}
+        aria-controls={panelId}
+        onClick={() => setOpen((current) => !current)}
+        className="-ml-1 inline-flex items-center gap-1 rounded-md px-1 py-0.5 text-sm text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <ChevronRight
+          aria-hidden="true"
+          className={cn("size-3.5 transition-transform", open && "rotate-90")}
+        />
+        {i18n.t("details.title")}
+      </button>
+      {open ? (
+        <div id={panelId} className="mt-2 max-w-2xl space-y-3 rounded-md bg-muted/40 px-3 py-3">
+          <DescriptionField target={target} />
+          <Facts target={target} />
+          {target.type === "node" && target.node.kind === "folder" ? (
+            <FolderText folder={target.node} />
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * The description, readable and changeable in the same place.
+ *
+ * ⚠️ **`baseUpdatedAt` is not decoration**: the description takes the same conflict route as a
+ * rename, or two people writing at once end with one of them silently overwritten
+ * (`resource-menu.tsx`). The refusal is worded through `resourceErrorKey`, so a conflict says
+ * "somebody else changed it" rather than the general failure sentence.
+ */
+function DescriptionField({ target }: { target: ResourceTarget }) {
+  const i18n = useI18n();
+  const { data } = useIntelRouterContext();
+  const queryClient = useQueryClient();
+  const description = target.type === "flow" ? target.flow.description : target.node.description;
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(description ?? "");
+  const fieldId = useId();
+
+  const save = useMutation({
+    mutationFn: async (next: string) => {
+      // An empty field means "there is none", which the contract spells `null` rather than "".
+      const value = next.trim().length === 0 ? null : next.trim();
+      if (target.type === "flow") {
+        await data.updateFlow({
+          flowId: target.flow.id,
+          baseUpdatedAt: target.flow.updatedAt,
+          description: value,
+          idempotencyKey: crypto.randomUUID(),
+        });
+        return;
+      }
+      await data.updateNode({
+        nodeId: target.node.id,
+        baseUpdatedAt: target.node.updatedAt,
+        description: value,
+        idempotencyKey: crypto.randomUUID(),
+      });
+    },
+    onSuccess: async () => {
+      setEditing(false);
+      const id = target.type === "flow" ? target.flow.id : target.node.id;
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: allTreeLevelsKey }),
+        queryClient.invalidateQueries({
+          queryKey: target.type === "flow" ? ["flow", id] : ["node", id],
+        }),
+      ]);
+    },
+  });
+
+  if (editing) {
+    return (
+      <div className="space-y-2">
+        <label htmlFor={fieldId} className="block text-sm font-medium">
+          {i18n.t("details.description")}
+        </label>
+        <textarea
+          id={fieldId}
+          rows={4}
+          maxLength={2_000}
+          value={draft}
+          onChange={(event) => setDraft(event.target.value)}
+          className="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        />
+        {save.isError ? (
+          <p role="alert" className="text-sm text-destructive">
+            {i18n.t(resourceErrorKey(save.error))}
+          </p>
+        ) : null}
+        <div className="flex gap-2">
+          <button
+            type="button"
+            disabled={save.isPending}
+            onClick={() => save.mutate(draft)}
+            className="rounded-md border px-3 py-1 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+          >
+            {i18n.t("common.save")}
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              setDraft(description ?? "");
+              save.reset();
+              setEditing(false);
+            }}
+            className="rounded-md px-3 py-1 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {i18n.t("common.cancel")}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1">
+      <div className="flex items-baseline justify-between gap-3">
+        <span className="text-sm font-medium">{i18n.t("details.description")}</span>
+        <button
+          type="button"
+          onClick={() => {
+            setDraft(description ?? "");
+            setEditing(true);
+          }}
+          className="shrink-0 rounded-md px-1 text-sm font-medium outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {i18n.t("details.descriptionEdit")}
+        </button>
+      </div>
+      {description ? (
+        <ClampedText text={description} />
+      ) : (
+        <p className="text-sm text-muted-foreground">{i18n.t("details.descriptionEmpty")}</p>
+      )}
+    </div>
+  );
+}
+
+/**
+ * A few lines by default, then "more".
+ *
+ * ⚠️ The button appears only when the text is actually cut off, and that is measured rather than
+ * guessed from the length: a clamp depends on the width the row happens to have, so a count of
+ * characters would offer "more" over a text that is fully visible and withhold it from one that is
+ * not. The observer covers the same case one resize later.
+ */
+function ClampedText({ text }: { text: string }) {
+  const i18n = useI18n();
+  const textRef = useRef<HTMLParagraphElement>(null);
+  const textId = useId();
+  const [clipped, setClipped] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+
+  useLayoutEffect(() => {
+    const element = textRef.current;
+    if (!element) return;
+    const update = () => {
+      // Measured against the CLAMPED box, so the check has to run while the clamp is on.
+      if (!expanded) setClipped(element.scrollHeight > element.clientHeight + 1);
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [expanded]);
+
+  return (
+    <div className="min-w-0 text-sm">
+      <p
+        ref={textRef}
+        id={textId}
+        data-description=""
+        className={cn("whitespace-pre-wrap break-words", !expanded && "line-clamp-3")}
+      >
+        {text}
+      </p>
+      {clipped ? (
+        <button
+          type="button"
+          // ⚠️ The button says WHICH text it unfolds, not merely that something is expanded. The
+          // field can hold several paragraphs of its own, and `aria-expanded` alone leaves a reader
+          // to guess which one moved.
+          aria-controls={textId}
+          aria-expanded={expanded}
+          onClick={() => setExpanded((current) => !current)}
+          className="mt-1 rounded-md font-medium outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {i18n.t(expanded ? "title.descriptionLess" : "title.descriptionMore")}
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+function Rows({ rows, pending }: { rows: [string, ReactNode][]; pending?: boolean }) {
+  const i18n = useI18n();
+  if (pending) return <p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>;
+  if (rows.length === 0) return null;
+  return (
+    <dl className="grid grid-cols-[max-content_minmax(0,1fr)] gap-x-4 gap-y-1 text-sm">
+      {rows.map(([label, value]) => (
+        <div key={label} className="contents">
+          <dt className="text-muted-foreground">{label}</dt>
+          <dd className="break-words">{value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+/**
+ * The facts that belong to the KIND, and only those.
+ *
+ * ⚠️ **A size in megabytes does not appear on a document** (#819). A document has a byte count like
+ * everything else in R2, and printing it would answer a question nobody asked with a number nobody
+ * can act on: what a reader wants to know about a text is how often it was written and when last.
+ */
+function Facts({ target }: { target: ResourceTarget }) {
+  if (target.type === "flow") return <FlowFacts flow={target.flow} />;
+  const node = target.node;
+  switch (node.kind) {
+    case "folder":
+      return <FolderFacts node={node} />;
+    case "attachment":
+      return <FileFacts node={node} />;
+    case "table":
+      return <TableFacts node={node} />;
+    case "board":
+      return <BoardFacts node={node} />;
+    default:
+      // A document and a board card are the same thing here: a text with a history.
+      return <WrittenFacts node={node} />;
+  }
+}
+
+/**
+ * The folder's own text: the document called `index` that lives in it (#824).
+ *
+ * ⚠️ **The row is not hidden, it is moved.** The tree drops it from the folder's contents and it
+ * appears here instead, in the one place that is about this folder rather than beside the things
+ * the folder holds. Nothing about the document changes: it keeps its versions, its full text, its
+ * vectors and its own screen — and over MCP it was never hidden at all.
+ *
+ * ⚠️ **The same query the tree and the facts above already hold**, so a folder whose details are
+ * open costs no second read of its level.
+ *
+ * ⚠️ The document is fetched only once one is there. A folder without an `index` says nothing at
+ * all here rather than offering to make one: the convention is served where it exists, and a folder
+ * that does not follow it is not being told off.
+ */
+function FolderText({ folder }: { folder: Node }) {
+  const i18n = useI18n();
+  const { data } = useIntelRouterContext();
+  const queryClient = useQueryClient();
+  const level = useQuery({
+    queryKey: treeLevelKey(folder.id),
+    queryFn: () => data.listTreeChildren(folder.id),
+  });
+  const index = folderIndexOf(folder.id, level.data ?? []);
+  const document = useQuery({
+    queryKey: ["node", index?.id],
+    queryFn: async () => await data.getNode(index?.id ?? ""),
+    enabled: index !== null,
+  });
+  if (index === null) return null;
+  return (
+    <section className="border-t pt-3">
+      <div className="mb-2 flex items-center justify-between gap-2">
+        <h3 className="text-sm font-medium">{i18n.t("details.folderText")}</h3>
+        {/* ⚠️ The way back, and the reason it is not optional: a row the tree does not draw can
+            only be moved, shared or archived from its own screen, and this is the only link left
+            to it (#824). */}
+        <Link
+          to="/nodes"
+          search={{ select: index.id }}
+          className="rounded-md px-1 py-0.5 text-sm text-muted-foreground underline outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {i18n.t("details.folderTextOpen")}
+        </Link>
+      </div>
+      {document.isPending ? (
+        <p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
+      ) : document.isError || !document.data ? (
+        // ⚠️ Its own sentence, not the folder's. The list came back — it is where this document was
+        // found — and only the document behind it did not: its access may have changed on its own,
+        // or it was archived a moment ago. "This folder could not be read" would send the reader
+        // after something that was read perfectly well (found in review of #843).
+        <p role="alert" className="text-sm text-destructive">
+          {i18n.t("details.folderTextFailed")}
+        </p>
+      ) : (
+        /* Readable and writable in the same place, through the editor the document has anywhere
+           else — a second, smaller editor here would be a second set of rules about one text. */
+        <NodeEditor
+          data={data}
+          document={document.data}
+          i18n={i18n}
+          onSaved={(saved) => {
+            queryClient.setQueryData(["node", index.id], saved);
+          }}
+        />
+      )}
+    </section>
+  );
+}
+
+function FolderFacts({ node }: { node: Node }) {
+  const i18n = useI18n();
+  const { data } = useIntelRouterContext();
+  // ⚠️ The key the sidebar already holds for this level, so an open folder costs no second request.
+  const level = useQuery({
+    queryKey: treeLevelKey(node.id),
+    queryFn: () => data.listTreeChildren(node.id),
+  });
+  // ⚠️ What the folder SHOWS, which since #824 is one row fewer than what it holds: its own text
+  // stands below this line rather than among its contents, and a count that included it would
+  // disagree with every list on the screen.
+  //
+  // ⚠️ This is a count for a reader and nothing else. What decides whether a folder may be deleted
+  // is asked on the server, over every table that points at the container — knowledge AND flows
+  // (`.claude/rules/destructive.md`, anchrd/intel#457) — and nothing here is part of that answer.
+  return (
+    <Rows
+      pending={level.isPending}
+      rows={[
+        [i18n.t("details.contents"), String(folderContentsOf(node.id, level.data ?? []).length)],
+      ]}
+    />
+  );
+}
+
+function WrittenFacts({ node }: { node: Node }) {
+  const i18n = useI18n();
+  const dateTime = useDateTime();
+  const { data } = useIntelRouterContext();
+  const versions = useQuery({
+    queryKey: ["node-versions", node.id],
+    queryFn: () => data.listNodeVersions(node.id),
+  });
+  const items = versions.data?.items ?? [];
+  // The list arrives newest first (`ORDER BY sequence DESC`), so the head of it is the last write.
+  const newest = items[0];
+  return (
+    <Rows
+      pending={versions.isPending}
+      rows={
+        newest === undefined
+          ? [[i18n.t("details.versions"), "0"]]
+          : [
+              [i18n.t("details.versions"), String(items.length)],
+              [i18n.t("details.lastWritten"), dateTime.at(newest.createdAt)],
+            ]
+      }
+    />
+  );
+}
+
+function TableFacts({ node }: { node: Node }) {
+  const i18n = useI18n();
+  const { data } = useIntelRouterContext();
+  // The key the table panel already uses.
+  const table = useQuery({
+    queryKey: ["node-table", node.id],
+    queryFn: () => data.getNodeTable(node.id),
+  });
+  return (
+    <Rows
+      pending={table.isPending}
+      rows={[
+        [i18n.t("details.columns"), String(table.data?.columns.length ?? 0)],
+        [i18n.t("details.rows"), String(table.data?.rows.length ?? 0)],
+      ]}
+    />
+  );
+}
+
+function BoardFacts({ node }: { node: Node }) {
+  const i18n = useI18n();
+  const { data } = useIntelRouterContext();
+  // ⚠️ The UNFILTERED entry, which is the one the board panel writes its answers into
+  // (`board-data.ts`). Asking under a filter would count the cards somebody is looking at rather
+  // than the cards there are.
+  const board = useQuery({
+    queryKey: [...boardKey(node.id), {}],
+    queryFn: () => data.getBoard({ boardId: node.id, includeArchived: false }),
+  });
+  return (
+    <Rows
+      pending={board.isPending}
+      rows={[
+        [i18n.t("details.columns"), String(board.data?.columns.length ?? 0)],
+        [i18n.t("details.cards"), String(board.data?.tasks.length ?? 0)],
+      ]}
+    />
+  );
+}
+
+function FlowFacts({ flow }: { flow: Flow }) {
+  const i18n = useI18n();
+  const dateTime = useDateTime();
+  const { data } = useIntelRouterContext();
+  const versions = useQuery({
+    queryKey: ["flow-versions", flow.id],
+    queryFn: () => data.listFlowVersions(flow.id),
+  });
+  const items = versions.data?.items ?? [];
+  const newest = items[0];
+  return (
+    <Rows
+      pending={versions.isPending}
+      rows={
+        newest === undefined
+          ? [[i18n.t("details.versions"), "0"]]
+          : [
+              [i18n.t("details.versions"), String(items.length)],
+              [i18n.t("details.lastWritten"), dateTime.at(newest.createdAt)],
+            ]
+      }
+    />
+  );
+}
+
+/**
+ * A file, with what #470 already showed beside its preview: size, format, and what the format
+ * itself can say.
+ *
+ * ⚠️ **This IS the file panel, moved rather than copied.** The viewer's own `Info` button is gone
+ * with #819: two details fields on one kind would be the state the ticket exists to end, and the
+ * one that lost would be the one every other kind now has.
+ */
+function FileFacts({ node }: { node: Node }) {
+  const i18n = useI18n();
+  const dateTime = useDateTime();
+  const { data } = useIntelRouterContext();
+  const versions = useQuery({
+    queryKey: ["node-versions", node.id],
+    queryFn: () => data.listNodeVersions(node.id),
+  });
+  const version = versions.data?.items[0];
+  const kind = version ? attachmentPreviewKind(node.title, version.mediaType) : "unsupported";
+  // ⚠️ The same key the viewer loads the file under, so an open preview pays for it once. It is a
+  // download, which is why it hangs on the panel being open rather than on the screen being shown.
+  const file = useQuery({
+    queryKey: ["attachment", node.id, version?.id],
+    queryFn: () => data.getNodeAttachment(node.id),
+    enabled: version !== undefined,
+    retry: false,
+  });
+  const formatDetail = useQuery({
+    queryKey: ["attachment-format-detail", node.id, version?.id],
+    // ⚠️ Reached through `import()` rather than an import at the top, and that is the second half
+    // of the split in `attachment-detail.ts`: this function unpacks the file with `fflate`, and a
+    // static import would put that in the main chunk for the sake of one kind. The module is the
+    // viewer's own, which is already mounted whenever there is a file to ask about, so the chunk
+    // is paid for either way.
+    queryFn: async () => {
+      if (!file.data || !version) return null;
+      const { attachmentFormatDetail } = await import("@/attachment-viewer/attachment-viewer.tsx");
+      return await attachmentFormatDetail(
+        new File([file.data], node.title, { type: version.mediaType }),
+        kind,
+      );
+    },
+    // Neither `audio` nor `video` ever yields a result here (#815, same as `unsupported`) — gated
+    // out rather than left to resolve to `null` so a large media file is not read into memory for
+    // a question this function never answers for it.
+    enabled:
+      file.data !== undefined && kind !== "unsupported" && kind !== "audio" && kind !== "video",
+    retry: false,
+  });
+
+  if (version === undefined) {
+    return (
+      <Rows pending={versions.isPending} rows={[[i18n.t("attachment.details.size"), "0 B"]]} />
+    );
+  }
+  const rows: [string, ReactNode][] = [
+    [i18n.t("attachment.details.size"), formatFileSize(version.size)],
+    [
+      i18n.t("attachment.details.format"),
+      node.title.split(".").at(-1)?.toUpperCase() ?? i18n.t("attachment.kind.unsupported"),
+    ],
+    [i18n.t("attachment.details.type"), i18n.t(`attachment.kind.${kind}`)],
+    [i18n.t("attachment.details.mimeType"), version.mediaType],
+    [i18n.t("attachment.details.uploaded"), dateTime.at(version.createdAt)],
+    [i18n.t("attachment.details.uploadedBy"), version.createdBy],
+    [i18n.t("attachment.details.version"), String(version.sequence)],
+  ];
+  if (formatDetail.data) {
+    rows.push([i18n.t(`attachment.details.${formatDetail.data.label}`), formatDetail.data.value]);
+  }
+  rows.push([i18n.t("attachment.details.storage"), i18n.t("attachment.details.private")]);
+  rows.push([
+    i18n.t("attachment.details.checksum"),
+    <span key="checksum" className="font-mono text-xs">
+      {`${version.contentHash.slice(0, 8)}…${version.contentHash.slice(-4)}`}
+    </span>,
+  ]);
+  return <Rows pending={versions.isPending} rows={rows} />;
+}