@anchrd/intel 0.59.0

package/ui/src/access-summary/access-summary.tsx

@@ -0,0 +1,385 @@
+import type { ResourceGrant } from "@contract/share.ts";
+import { useQuery } from "@tanstack/react-query";
+import { useId, useState } from "react";
+import { createPortal } from "react-dom";
+import { AppLogo } from "@/branding/branding.tsx";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip.tsx";
+import type { IntelDataProvider } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { ResolvedNamesProvider, useResolvedName } from "@/resolved-names/resolved-names.tsx";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+import { initials, useUserName } from "@/user-name/user-name.ts";
+
+type Principal = ResourceGrant["principal"];
+
+type GrantGroup = {
+  key: string;
+  principal: Principal;
+  grants: ResourceGrant[];
+  owner: boolean;
+};
+
+function principalKey(principal: Principal): string {
+  if (principal.type === "organization") return "organization";
+  if (principal.type === "email") return `email:${principal.email.toLowerCase()}`;
+  return `user:${principal.id}`;
+}
+
+function groupGrants(grants: ResourceGrant[], ownerIds: string[] = []): GrantGroup[] {
+  const grouped = new Map<string, GrantGroup>();
+  for (const ownerId of ownerIds) {
+    grouped.set(`user:${ownerId}`, {
+      key: `user:${ownerId}`,
+      principal: { type: "user", id: ownerId },
+      grants: [],
+      owner: true,
+    });
+  }
+  for (const grant of grants) {
+    const key = principalKey(grant.principal);
+    const group = grouped.get(key);
+    if (group) group.grants.push(grant);
+    else grouped.set(key, { key, principal: grant.principal, grants: [grant], owner: false });
+  }
+  return [...grouped.values()];
+}
+
+/**
+ * What to call whoever a grant is for.
+ *
+ * ⚠️ **TWO sources for a user, and the order matters** — the same rule `useAssigneeLabel` follows,
+ * because a person must not be called one thing on a card and another on the share screen.
+ * `useUserName` answers for the reader themselves out of the session the shell already holds,
+ * without a request; the resolved map answers for everybody else. Asking the map first would make
+ * the reader's own name depend on a round trip that has no reason to exist, and would leave them
+ * nameless wherever no provider stands.
+ *
+ * ⚠️ An `email` principal is NOT resolved to a name. The address is what was granted, and it is
+ * what can be withdrawn — a name over it would hide which of two spellings the grant actually
+ * carries (#431).
+ */
+function usePrincipalLabel(principal: Principal): string {
+  const i18n = useI18n();
+  const userId = principal.type === "user" ? principal.id : null;
+  const own = useUserName(userId);
+  const resolved = useResolvedName(userId);
+  if (principal.type === "organization") return i18n.t("node.organization");
+  if (principal.type === "email") return principal.email;
+  // ⚠️ The fallback stays what it was: a person nobody can name is "a user account", never the
+  // principal id the row carries (#258).
+  return own ?? resolved ?? i18n.t("node.someUser");
+}
+
+const circleTones = [
+  "bg-muted text-muted-foreground",
+  "bg-accent text-accent-foreground",
+  "bg-secondary text-secondary-foreground",
+] as const;
+
+function AccessCircle({
+  group,
+  position,
+  count,
+  expanded,
+  controls,
+  activate,
+}: {
+  group: GrantGroup;
+  position: number;
+  count: number;
+  expanded: boolean;
+  controls: string;
+  activate(element: HTMLButtonElement): void;
+}) {
+  const i18n = useI18n();
+  const label = usePrincipalLabel(group.principal);
+  const circle = (
+    <button
+      type="button"
+      aria-label={position === 0 ? `${i18n.t("node.accessDetails", { count })}: ${label}` : label}
+      aria-expanded={expanded}
+      aria-controls={controls}
+      data-organization-access={group.principal.type === "organization" ? "" : undefined}
+      onClick={(event) => activate(event.currentTarget)}
+      className={`relative flex size-7 items-center justify-center rounded-full text-xs font-medium ring-2 ring-background outline-none transition hover:z-10 hover:scale-105 focus-visible:z-10 focus-visible:ring-ring ${circleTones[position % circleTones.length]}`}
+    >
+      {group.principal.type === "organization" ? (
+        <AppLogo className="size-4 rounded-none bg-transparent text-current [&_svg]:size-3" />
+      ) : (
+        initials(label)
+      )}
+    </button>
+  );
+  return (
+    <TooltipProvider delayDuration={300}>
+      <Tooltip>
+        <TooltipTrigger asChild>{circle}</TooltipTrigger>
+        <TooltipContent>
+          {group.principal.type === "organization" ? i18n.t("node.organizationAccess") : label}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+function AccessDetail({
+  group,
+  revocableOn,
+  sources,
+  onRevoke,
+}: {
+  group: GrantGroup;
+  // ⚠️ The node whose grants this screen may withdraw. A grant that sits on a folder ABOVE is in
+  // force here but is not this screen's to take away — the reader may not even be allowed to manage
+  // that folder. It is shown, and it is shown as inherited, and no button is offered for it (#803).
+  revocableOn?: string;
+  // The folders the inherited grants sit on, for the ones this reader may see. A grant whose folder
+  // is missing here is still shown as inherited — just without a name to go to.
+  sources?: ReadonlyArray<{ resourceId: string; title: string }>;
+  onRevoke?(grantId: string): void;
+}) {
+  const i18n = useI18n();
+  const label = usePrincipalLabel(group.principal);
+  const inherited = group.grants.filter((grant) => grant.resourceId !== revocableOn);
+  const here = group.grants.filter((grant) => grant.resourceId === revocableOn);
+  const from = [
+    ...new Set(
+      inherited.flatMap((grant) => {
+        const source = sources?.find((entry) => entry.resourceId === grant.resourceId);
+        return source ? [source.title] : [];
+      }),
+    ),
+  ];
+  return (
+    <li className="flex items-start justify-between gap-3 text-sm">
+      <span className="min-w-0">
+        <span className="block truncate font-medium">{label}</span>
+        <span className="text-xs text-muted-foreground">
+          {[
+            ...(group.owner ? [i18n.t("node.owner")] : []),
+            ...group.grants.map((grant) => i18n.t(`node.verb.${grant.verb}`)),
+          ].join(", ")}
+        </span>
+        {/* Said once for the whole person, not once per verb: three inherited verbs are one fact
+            about where the access lives, and three copies of it would read as three problems. */}
+        {revocableOn !== undefined && inherited.length > 0 ? (
+          <span className="mt-0.5 block text-xs text-muted-foreground">
+            {from.length > 0
+              ? i18n.t("node.accessInheritedFrom", { titles: from.join(", ") })
+              : i18n.t("node.accessInherited")}
+          </span>
+        ) : null}
+      </span>
+      {onRevoke && here.length > 0 ? (
+        <span className="flex flex-wrap justify-end gap-1">
+          {here.map((grant) => (
+            <button
+              key={grant.id}
+              type="button"
+              onClick={() => onRevoke(grant.id)}
+              aria-label={i18n.t("node.revokeVerbFor", {
+                verb: i18n.t(`node.verb.${grant.verb}`),
+                recipient: label,
+              })}
+              className="rounded px-2 py-1 text-xs text-destructive outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {i18n.t("node.revokeVerb", { verb: i18n.t(`node.verb.${grant.verb}`) })}
+            </button>
+          ))}
+        </span>
+      ) : null}
+    </li>
+  );
+}
+
+export function AccessSummary({
+  grants,
+  ownerId,
+  ownerIds,
+  revocableOn,
+  sources,
+  onRevoke,
+}: {
+  grants: ResourceGrant[];
+  ownerId?: string;
+  ownerIds?: string[];
+  sources?: ReadonlyArray<{ resourceId: string; title: string }>;
+  // Where withdrawal is possible — see `AccessDetail`. Absent on the read-only summary, where no
+  // row carries a button and the distinction has nothing to change.
+  revocableOn?: string;
+  onRevoke?(grantId: string): void;
+}) {
+  const i18n = useI18n();
+  const groups = groupGrants(grants, ownerIds ?? (ownerId ? [ownerId] : []));
+  const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState({ top: 8, left: 8 });
+  const detailsId = useId();
+  const organizationDescriptionId = useId();
+  if (groups.length === 0) return null;
+  const visible = groups.slice(0, 3);
+  const overflow = groups.length - visible.length;
+  const toggle = (element: HTMLButtonElement) => {
+    setOpen((current) => {
+      if (!current) {
+        const rect = element.getBoundingClientRect();
+        const panelHeight = Math.min(320, window.innerHeight - 16);
+        const below = window.innerHeight - rect.bottom;
+        setPosition({
+          top: below >= panelHeight ? rect.bottom + 4 : Math.max(8, rect.top - panelHeight - 4),
+          left: Math.max(8, Math.min(rect.left, window.innerWidth - 328)),
+        });
+      }
+      return !current;
+    });
+  };
+
+  // ⚠️ ONE request for the whole summary, not one per circle: every person this component draws is
+  // asked for together, and `usePrincipalLabel` reads the answer out of the context rather than
+  // fetching. The circles and the detail list share the provider, so opening the panel adds no
+  // request (#803).
+  //
+  // ⚠️ Only `user` principals travel. An organization has no name to resolve, and an `email` grant
+  // is shown as the address it was granted to — resolving it would hide which spelling is in force.
+  const personIds = groups.flatMap((group) =>
+    group.principal.type === "user" ? [group.principal.id] : [],
+  );
+
+  return (
+    <ResolvedNamesProvider ids={personIds}>
+      <div className="relative flex w-fit items-center -space-x-2" data-access-summary="">
+        {visible.map((group, position) => (
+          <AccessCircle
+            key={group.key}
+            group={group}
+            position={position}
+            count={groups.length}
+            expanded={open}
+            controls={detailsId}
+            activate={toggle}
+          />
+        ))}
+        {overflow > 0 ? (
+          <button
+            type="button"
+            aria-label={i18n.t("node.accessDetails", { count: groups.length })}
+            aria-expanded={open}
+            aria-controls={detailsId}
+            onClick={(event) => toggle(event.currentTarget)}
+            className="relative flex size-7 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground ring-2 ring-background outline-none transition hover:z-10 hover:scale-105 focus-visible:z-10 focus-visible:ring-ring"
+          >
+            +{overflow}
+          </button>
+        ) : null}
+        {groups.some((group) => group.principal.type === "organization") ? (
+          <span id={organizationDescriptionId} className="sr-only">
+            {i18n.t("node.organizationAccess")}
+          </span>
+        ) : null}
+        {open
+          ? createPortal(
+              <div
+                id={detailsId}
+                data-access-details=""
+                className="fixed z-50 max-h-[calc(100dvh-1rem)] w-80 overflow-y-auto rounded-md border bg-popover p-4 text-popover-foreground shadow-md"
+                style={position}
+              >
+                <ul className="space-y-3">
+                  {groups.map((group) => (
+                    <AccessDetail
+                      key={group.key}
+                      group={group}
+                      {...(revocableOn !== undefined ? { revocableOn } : {})}
+                      {...(sources ? { sources } : {})}
+                      {...(onRevoke ? { onRevoke } : {})}
+                    />
+                  ))}
+                </ul>
+              </div>,
+              document.querySelector('[role="dialog"]') ?? document.body,
+            )
+          : null}
+      </div>
+    </ResolvedNamesProvider>
+  );
+}
+
+/**
+ * The ONE definition of the effective-access query (#817).
+ *
+ * ⚠️ It is a function rather than a call so that a second reader can watch the same answers without
+ * asking for them a second time. A folder table waits until every one of its rows has been decided
+ * before it draws itself, and it does that by observing these exact keys — same key, same cache
+ * entry, one request per resource. A copy of the options over there would share the key and drift
+ * on everything else, which is the quietest way to end up with two different `retry` settings.
+ *
+ * ⚠️ Both kinds share the `effective-node-grants` prefix on purpose: a share mutation invalidates
+ * that prefix, and a flow grant changes what a folder summary above it shows just as a folder grant
+ * changes what the flow below it shows. Two prefixes would mean one of the two keeps drawing an
+ * access picture that is no longer in force.
+ *
+ * ⚠️ `retry: false` is part of the contract this query has with its readers, not a tuning knob. A
+ * refusal here is an answer (#484), and a reader waiting for "every row decided" needs the failing
+ * ones to arrive as failures rather than to be tried again behind its back.
+ *
+ * ⚠️ `retryOnMount: false` says the same thing about a SECOND reader, and without it the two
+ * readers feed each other. `staleTime` governs data, not errors, so a failed query is refetched
+ * every time a fresh observer mounts on it — and the folder table mounts one the instant the
+ * failure lets it draw its rows. Measured (#817): error, rows, mount, refetch, pending, rows gone,
+ * unmount, error again — 285 transitions and still going, none of them visible as anything but a
+ * table that would not appear. A failure that is final for the first reader is final for the next.
+ */
+export function effectiveAccessQuery(
+  data: IntelDataProvider,
+  input: { resourceId: string; kind: "node" | "flow" },
+) {
+  return {
+    queryKey: ["effective-node-grants", input.kind, input.resourceId],
+    queryFn: () =>
+      input.kind === "flow"
+        ? data.listEffectiveFlowAccess(input.resourceId)
+        : data.listEffectiveAccess(input.resourceId),
+    retry: false,
+    retryOnMount: false,
+    // Time cannot change this answer locally. Share mutations invalidate the whole effective prefix
+    // because changing one folder also changes every descendant summary already on screen.
+    staleTime: Number.POSITIVE_INFINITY,
+  };
+}
+
+/**
+ * The compact access view for a resource the reader can manage.
+ *
+ * `node_grant_list` is itself authorized: a reader who may see the node but may not inspect its
+ * grants gets no names here. Treating that refusal as an empty summary is deliberate; rendering an
+ * error or retry would disclose that there are grants to ask about (#484).
+ */
+export function ResourceAccessSummary({
+  resourceId,
+  ownerId,
+  kind = "node",
+}: {
+  resourceId: string;
+  ownerId: string;
+  // Which side of the tree the id belongs to (#530). A flow is not a node, so it is a different
+  // route — but the same answer, which is why one component draws both.
+  kind?: "node" | "flow";
+}) {
+  const { data } = useIntelRouterContext();
+  const grants = useQuery(effectiveAccessQuery(data, { resourceId, kind }));
+  if (!grants.data) return null;
+  return (
+    <AccessSummary
+      grants={grants.data.items}
+      ownerIds={
+        grants.data.ownerIds.includes(ownerId)
+          ? grants.data.ownerIds
+          : [ownerId, ...grants.data.ownerIds]
+      }
+    />
+  );
+}

package/ui/src/app/action-slot/action-slot.tsx

@@ -0,0 +1,27 @@
+import type * as React from "react";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+// A bar owns a place for actions, and whoever owns the action renders into it from wherever its
+// state happens to live. Two such places exist: `header-actions` in the shell, beside the
+// breadcrumb, for what belongs to the area; and `title-actions` in the title line of an open
+// document, for what belongs to that one document (#24).
+//
+// ⚠️ The slot lives above the component that fills it, so it is not in the document while that
+// component first renders. Looking it up in an effect costs one extra render and is the only order
+// that works; reading it during render finds nothing on the first paint.
+//
+// ⚠️ A portal only ever appends, so the slot decides where its content sits and mount order decides
+// nothing. That is why the shell gives the screens a box of their own next to the search rather
+// than one shared list (see `app.tsx`, #56).
+export function ActionSlot({
+  name = "header-actions",
+  children,
+}: {
+  name?: string;
+  children: React.ReactNode;
+}) {
+  const [slot, setSlot] = useState<Element | null>(null);
+  useEffect(() => setSlot(document.querySelector(`[data-slot="${name}"]`)), [name]);
+  return slot ? createPortal(children, slot) : null;
+}

package/ui/src/app/app-sidebar/app-sidebar.tsx

@@ -0,0 +1,71 @@
+import { Link } from "@tanstack/react-router";
+import { AppTree } from "@/app/app-tree/app-tree.tsx";
+import { SidebarResizeHandle } from "@/app/sidebar-resize-handle/sidebar-resize-handle.tsx";
+import { UserFooter } from "@/app/user-footer/user-footer.tsx";
+import { AppLogo } from "@/branding/branding.tsx";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+
+// One tree is the whole navigation: documents and flows side by side in the folder they share, with
+// no Intelligence or Flows entry above them (ADR-0004). Tools stay below, next to the user, because
+// they come live from the portal and have no tree.
+export function AppSidebar({
+  width,
+  onWidthChange,
+}: {
+  width: number;
+  onWidthChange(width: number): void;
+}) {
+  const i18n = useI18n();
+  // `offcanvas` rather than `icon`: the icon rail is the mode for a list of equal entries with one
+  // icon each, and a tree says what it says through indentation, disclosure arrows and nesting —
+  // none of which survives 48px. Collapsing exists to free the canvas, so the sidebar goes.
+  //
+  // ⚠️ Offcanvas only moves the panel out of sight; it stays in the document and keeps its focus
+  // order, so a keyboard would still walk through an invisible tree. The shell therefore unmounts
+  // the panel's content itself — the registry file is off limits. On a narrow screen the sidebar is
+  // an overlay driven by `openMobile`, and `state` says nothing about it, hence the `isMobile` arm.
+  const { state, isMobile } = useSidebar();
+  const showPanel = isMobile || state === "expanded";
+
+  return (
+    <Sidebar collapsible="offcanvas" variant="inset">
+      {!showPanel ? null : (
+        <>
+          <SidebarHeader>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton size="lg" asChild>
+                  <Link to="/nodes">
+                    <AppLogo className="size-8" />
+                    <span className="font-semibold">{i18n.t("app.name")}</span>
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarHeader>
+          <SidebarContent aria-label={i18n.t("nav.primary")}>
+            <AppTree />
+          </SidebarContent>
+          <SidebarFooter>
+            <UserFooter />
+          </SidebarFooter>
+          <SidebarResizeHandle
+            width={width}
+            label={i18n.t("shell.resizeSidebar")}
+            onWidthChange={onWidthChange}
+          />
+        </>
+      )}
+    </Sidebar>
+  );
+}