@protoboardai/views 0.0.0-stage → 0.2.1

package/src/parts/PartStatus.tsx

@@ -0,0 +1,54 @@
+/**
+ * A part's status as the views draw it (PB-932): a dot in the state's colour
+ * with a tooltip saying what the state means, and optionally its name. The
+ * colours come from part-status.ts through `PartStatusStyles`, which a shell
+ * renders once inside its themed root.
+ */
+import { cx } from "@deltarobotics/uhd-viewer/components";
+import { BLANK_BLOCK_TEXT, PART_STATUS_CSS, PART_TRUST_STATES, PART_TRUST_TEXT, partStatusVar, partTrustTooltip, type PartTrust } from "./part-status.js";
+
+/** The status colours' stylesheet: once per page, anywhere inside the themed root. */
+export function PartStatusStyles() {
+  return <style data-pb="part-status">{PART_STATUS_CSS}</style>;
+}
+
+export interface PartStatusDotProps {
+  trust: PartTrust;
+  /** Why the part has this state ("independent audit recorded"), for the tooltip. */
+  basis?: string;
+  /** A blank block (no part chosen yet): the state's colour as a dashed ring, named "Blank block". */
+  blank?: boolean;
+  /** Write the state's name beside the dot. */
+  label?: boolean;
+  size?: number;
+  className?: string;
+}
+
+/** The dot (and, with `label`, the state's name), naming itself in a tooltip. */
+export function PartStatusDot({ trust, basis, blank, label, size = 8, className }: PartStatusDotProps) {
+  const tip = partTrustTooltip(trust, basis, blank);
+  return (
+    <span role="img" aria-label={tip} data-tooltip={tip} data-tooltip-clamp="4" data-status={trust} data-blank={blank ? "" : undefined} className={cx("inline-flex shrink-0 items-center gap-1.5 align-middle", className)}>
+      {blank ? (
+        // no part chosen: the same gray, as a dashed ring one pixel larger so it reads at this size
+        <span aria-hidden className="box-border shrink-0 rounded-full border-[1.5px] border-dashed" style={{ width: size + 2, height: size + 2, borderColor: `var(${partStatusVar(trust)})` }} />
+      ) : (
+        <span aria-hidden className="shrink-0 rounded-full outline outline-1 outline-offset-1 outline-[var(--pb-status-ring,transparent)]" style={{ width: size, height: size, background: `var(${partStatusVar(trust)})` }} />
+      )}
+      {label && <span className="text-[11.5px] leading-none whitespace-nowrap text-fg-muted">{blank ? BLANK_BLOCK_TEXT.label : PART_TRUST_TEXT[trust].label}</span>}
+    </span>
+  );
+}
+
+/** The four states with their meanings: the key under a list of parts. */
+export function PartStatusLegend({ className }: { className?: string }) {
+  return (
+    <ul aria-label="Part status" className={cx("flex flex-wrap gap-x-4 gap-y-1.5", className)}>
+      {PART_TRUST_STATES.map((t) => (
+        <li key={t} className="flex items-center">
+          <PartStatusDot trust={t} label />
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/parts/Prices.tsx

@@ -0,0 +1,241 @@
+/**
+ * A part's prices by source (the owners' decision of 2026-10-07 on PB-942):
+ * the offers its library serves for it, one block per supplier: the price
+ * breaks, the pack and the minimum order, the stock, when the price was
+ * observed, and the link to the supplier's page. Suppliers that price in US
+ * dollars come first; prices are shown in the currency they were given in,
+ * never converted. Only what the library's API returns is shown.
+ *
+ * The prices are asked for when the section is first opened. A library that
+ * refuses (no sign-in, an account that is not invited) or has no price
+ * service is said so, with what to do about it.
+ */
+import { useEffect, useState } from "react";
+import { EmptyState, Icon, cx } from "@deltarobotics/uhd-viewer/components";
+import type { PartPriceOffer, PartPriceSource, PartPricesModel } from "./model.js";
+import { BODY, Button, Pill } from "./ui.js";
+
+export type PricesState = { status: "loading" } | { status: "ready"; prices: PartPricesModel } | { status: "error"; error: string };
+
+/** An amount in its own currency: at least two decimals, up to four (price breaks go below a cent). */
+export function money(amount: number, currency: string | undefined): string {
+  if (!currency) return String(amount);
+  try {
+    return new Intl.NumberFormat("en-US", { style: "currency", currency, minimumFractionDigits: 2, maximumFractionDigits: 4 }).format(amount);
+  } catch {
+    return `${amount} ${currency}`;
+  }
+}
+
+/**
+ * Suppliers in the order the section lists them: a current price in US
+ * dollars first, then a current price in another currency, then those with
+ * only an old price (dollars first again), then those with none; the
+ * library's order within each.
+ */
+export function usdFirst(sources: readonly PartPriceSource[]): PartPriceSource[] {
+  const rank = (s: PartPriceSource) => {
+    if (s.from) return s.from.currency === "USD" ? 0 : 1;
+    const priced = s.offers.filter((o) => o.unitPrice !== undefined);
+    return priced.some((o) => o.currency === "USD") ? 2 : priced.length ? 3 : 4;
+  };
+  return sources.map((s, i) => ({ s, i })).sort((a, b) => rank(a.s) - rank(b.s) || a.i - b.i).map((x) => x.s);
+}
+
+/** The day a price was observed, as written (ISO dates sort and read the same everywhere). */
+const day = (iso: string) => iso.slice(0, 10);
+
+/** The price breaks of an offer: its own list, or its one price from its minimum order. */
+export function breaksOf(o: PartPriceOffer): { quantity: number; unitPrice: number }[] {
+  if (o.priceBreaks?.length) return [...o.priceBreaks].sort((a, b) => a.quantity - b.quantity);
+  return o.unitPrice !== undefined ? [{ quantity: o.minQuantity ?? 1, unitPrice: o.unitPrice }] : [];
+}
+
+function Field({ label, children, wide }: { label: string; children: React.ReactNode; wide?: boolean }) {
+  return (
+    <div className={cx("flex min-w-0 flex-col gap-0.5", wide && "col-span-full min-[520px]:col-span-2")}>
+      <dt className="font-ui text-[10px] tracking-[0.08em] text-fg-muted uppercase">{label}</dt>
+      <dd className="m-0 min-w-0 text-[12.5px] break-words text-fg">{children}</dd>
+    </div>
+  );
+}
+
+function Offer({ offer, supplier, onOpen }: { offer: PartPriceOffer; supplier: string; onOpen: (url: string) => void }) {
+  const breaks = breaksOf(offer);
+  const stock = offer.stock === undefined ? "not stated" : offer.stock === 0 ? "none shown" : offer.stock.toLocaleString("en-US");
+  return (
+    <div className="flex min-w-0 items-start gap-3 py-3">
+      <dl className="grid min-w-0 flex-1 grid-cols-[repeat(auto-fill,minmax(118px,1fr))] gap-x-4 gap-y-2.5">
+        <Field label="Price per piece" wide>
+          {breaks.length ? (
+            <span className="flex flex-wrap gap-x-3 gap-y-0.5 font-ui text-[12.5px]">
+              {breaks.map((b) => (
+                <span key={b.quantity} className="whitespace-nowrap">
+                  <span className="text-fg-muted">{b.quantity}+</span> {money(b.unitPrice, offer.currency)}
+                </span>
+              ))}
+            </span>
+          ) : (
+            <span className="text-fg-muted">no price listed</span>
+          )}
+        </Field>
+        <Field label="Currency">{offer.currency ?? "not stated"}</Field>
+        <Field label="Pack">{offer.packaging ?? "single pieces"}</Field>
+        <Field label="Minimum order">{offer.minQuantity !== undefined ? `${offer.minQuantity.toLocaleString("en-US")} pc` : "not stated"}</Field>
+        <Field label="Stock">
+          {stock}
+          {offer.leadTimeWeeks !== undefined && <span className="text-fg-muted"> · {offer.leadTimeWeeks} wk lead</span>}
+        </Field>
+        <Field label="Ordering code">
+          <span className="font-ui text-[12px]">{offer.mpn}</span>
+          {offer.sku && <span className="block font-ui text-[11px] text-fg-muted">{supplier} {offer.sku}</span>}
+        </Field>
+        <Field label="Observed">
+          <span className="font-ui text-[12px]">{day(offer.observedAt)}</span>
+          {offer.stale && (
+            <span className="ml-1.5 inline-flex align-middle">
+              <Pill tone="warning" title="Too old, or the product is discontinued, to quote as a current price: history, not a quote">
+                old price
+              </Pill>
+            </span>
+          )}
+        </Field>
+      </dl>
+      {offer.url && /^https?:\/\//.test(offer.url) && (
+        <Button icon="external-link" aria-label={`Open ${supplier}'s page for ${offer.mpn}`} data-tooltip={`Open at ${supplier}`} className="w-8 !px-0" onClick={() => onOpen(offer.url!)} />
+      )}
+    </div>
+  );
+}
+
+function Source({ source, onOpen }: { source: PartPriceSource; onOpen: (url: string) => void }) {
+  const market = source.offers.find((o) => o.market)?.market;
+  // within a supplier too, US dollars first
+  const offers = source.offers.map((o, i) => ({ o, i })).sort((a, b) => Number(a.o.currency !== "USD") - Number(b.o.currency !== "USD") || a.i - b.i).map((x) => x.o);
+  return (
+    <section aria-label={source.supplier} className="rounded-[4px] bg-[var(--pb-card)] px-3 outline-1 -outline-offset-1 outline-contrast">
+      <header className="flex min-w-0 flex-wrap items-center gap-x-2.5 gap-y-1 border-b border-line-subtle py-2.5">
+        <Icon name="store" size={14} strokeWidth={1.75} className="shrink-0 text-fg-muted" aria-hidden />
+        <h3 className="min-w-0 truncate text-[13px] font-semibold text-fg">{source.supplier}</h3>
+        {source.authorized && <Pill tone="ok" title="A franchised distributor, or the manufacturer's own store">authorized</Pill>}
+        {market && <Pill title="The storefront or market the price is from">{market}</Pill>}
+        <span className="ml-auto flex shrink-0 items-baseline gap-2">
+          {source.from ? (
+            <span className="font-ui text-[13px] text-fg">
+              <span className="text-[11px] text-fg-muted">from </span>
+              {money(source.from.unitPrice, source.from.currency)}
+            </span>
+          ) : (
+            <span className="text-[12px] text-fg-muted">{source.offers.some((o) => o.unitPrice !== undefined) ? "old price only" : "no price listed"}</span>
+          )}
+        </span>
+      </header>
+      <div className="divide-y divide-line-subtle">
+        {offers.map((o, i) => (
+          <Offer key={`${o.mpn}-${o.sku ?? ""}-${i}`} offer={o} supplier={source.supplier} onOpen={onOpen} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+const SIGNED_OUT = new Set(["AUTH_REQUIRED", "FORBIDDEN"]);
+
+/** Why there are no prices, and what to do. */
+function Unavailable({ why, onSignIn }: { why: NonNullable<PartPricesModel["unavailable"]>; onSignIn?: () => void }) {
+  const signedOut = SIGNED_OUT.has(why.code);
+  const title = signedOut ? "Sign in to see prices" : why.code === "ACCOUNT_NOT_ALLOWED" ? "This account cannot see prices yet" : why.code === "NO_PRICES" ? "This library has no prices" : "The prices did not load";
+  const what = why.code === "NO_PRICES" ? "This part's library has no prices." : why.message;
+  return (
+    <div className="py-6">
+      <EmptyState icon={<Icon name={signedOut ? "log-in" : why.code === "ACCOUNT_NOT_ALLOWED" ? "user-x" : "circle-dollar-sign"} size={24} strokeWidth={1.25} />} title={title}>
+        <span className="block max-w-[64ch]">{what}</span>
+        {signedOut && onSignIn && (
+          <span className="mt-3 block">
+            <Button kind="primary" icon="log-in" onClick={onSignIn}>
+              Sign in
+            </Button>
+          </span>
+        )}
+      </EmptyState>
+    </div>
+  );
+}
+
+export interface PricesPanelProps {
+  /** The prices, once asked for. */
+  state: PricesState | undefined;
+  /** Ask for them (the section opened, or "Try again"). */
+  onLoad(): void;
+  onOpenLink(url: string): void;
+  onSignIn?: () => void;
+}
+
+export function PricesPanel({ state, onLoad, onOpenLink, onSignIn }: PricesPanelProps) {
+  useEffect(() => {
+    if (!state) onLoad();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state]);
+  if (!state || state.status === "loading")
+    return (
+      <div role="status" aria-label="Loading the prices" className="flex flex-col gap-3">
+        {[0, 1].map((i) => (
+          <div key={i} aria-hidden className="h-[92px] animate-pulse rounded-[4px] bg-[var(--pb-card)] outline-1 -outline-offset-1 outline-contrast motion-reduce:animate-none" />
+        ))}
+      </div>
+    );
+  if (state.status === "error")
+    return (
+      <div className="py-6">
+        <EmptyState icon={<Icon name="triangle-alert" size={24} strokeWidth={1.25} />} title="The prices did not load">
+          <span className="block max-w-[64ch]">{state.error}</span>
+          <span className="mt-3 block">
+            <Button icon="refresh-cw" onClick={onLoad}>
+              Try again
+            </Button>
+          </span>
+        </EmptyState>
+      </div>
+    );
+  const p = state.prices;
+  if (p.unavailable) return <Unavailable why={p.unavailable} {...(onSignIn ? { onSignIn } : {})} />;
+  if (!p.sources.length)
+    return (
+      <div className="py-6">
+        <EmptyState icon={<Icon name="circle-dollar-sign" size={24} strokeWidth={1.25} />} title="No prices for this part">
+          The library holds no supplier offers for it yet.
+        </EmptyState>
+      </div>
+    );
+  const sources = usdFirst(p.sources);
+  return (
+    <div className={cx(BODY, "flex flex-col gap-3")}>
+      {sources.map((s) => (
+        <Source key={s.supplier} source={s} onOpen={onOpenLink} />
+      ))}
+      <p className="flex items-start gap-1.5 text-[12px] leading-snug text-fg-muted">
+        <Icon name="info" size={13} strokeWidth={1.75} className="mt-px shrink-0" aria-hidden />
+        <span>
+          {sources.length} supplier{sources.length === 1 ? "" : "s"}. Each price is per piece, in the currency the supplier lists it in (none is converted), as of the day shown. Check the supplier's page before ordering.
+        </span>
+      </p>
+    </div>
+  );
+}
+
+/** The prices of the part shown: asked for once per part and revision, kept while the detail is open. */
+export function usePrices(key: string, load: (() => Promise<PartPricesModel>) | undefined): { state: PricesState | undefined; load(): void } {
+  const [held, setHeld] = useState<{ key: string; state: PricesState }>();
+  const state = held?.key === key ? held.state : undefined;
+  return {
+    state,
+    load: () => {
+      if (!load) return;
+      setHeld({ key, state: { status: "loading" } });
+      load().then(
+        (prices) => setHeld((h) => (h?.key === key ? { key, state: { status: "ready", prices } } : h)),
+        (e: unknown) => setHeld((h) => (h?.key === key ? { key, state: { status: "error", error: e instanceof Error ? e.message : String(e) } } : h)),
+      );
+    },
+  };
+}

package/src/parts/ProjectParts.tsx

@@ -0,0 +1,174 @@
+/**
+ * The project's parts in the side bar (PB-903, design 03; PB-945), the way
+ * Source Control shows files: updates first, then each library's parts with
+ * their pinned revision, then the parts researched and designed in the
+ * project. Each row says two things: the part's status (PB-932: a dot, gray
+ * local, yellow unverified, green verified, blue official) and its sync with
+ * the library (in sync, an update with its revision, diverged, local only).
+ * Colours are the theme's; rows and groups have room between them. The
+ * heading opens the Project Parts page, the same parts as cards.
+ */
+import { useMemo } from "react";
+import { Icon, ScrollArea, cx } from "@deltarobotics/uhd-viewer/components";
+import { partGroups, partNote, partSync, type PartSync } from "./library-data.js";
+import type { ProjectPartModel, ProjectPartsActions, ProjectPartsModel } from "./model.js";
+import { PartStatusDot, PartStatusLegend } from "./PartStatus.js";
+import { rev } from "./revision.js";
+import { PartsSurface } from "./Surface.js";
+import { BODY, FoldHeading, RowAction, useFolded, type FoldedGroups } from "./ui.js";
+
+export { partGroups, partNote, partSync, tierGroups, type PartGroup, type PartSync } from "./library-data.js";
+
+const SYNC_TEXT: Record<PartSync["tone"], string> = { ok: "text-ok", info: "text-info", warning: "text-warning", neutral: "text-fg-muted" };
+
+/** What an update is, said where updates are listed (beta test 1, F16). */
+export const UPDATE_EXPLAINED = "A newer revision the library recommends. Compare before you update.";
+
+export const partIcon = (part: Pick<ProjectPartModel, "tier" | "capability">): string =>
+  part.tier === "project-researched" ? "flask-conical" : part.tier === "project-specific" ? (part.capability?.capability === "circuit" ? "circuit-board" : "box") : "package";
+
+function Row({ part, actions, selected }: { part: ProjectPartModel; actions: ProjectPartsActions; selected: boolean }) {
+  const sync = partSync(part);
+  return (
+    <li
+      role="treeitem"
+      aria-selected={selected}
+      tabIndex={0}
+      onClick={() => actions.open(part.id)}
+      onKeyDown={(e) => e.key === "Enter" && actions.open(part.id)}
+      className={cx(
+        BODY,
+        "group flex min-h-8 cursor-pointer items-center gap-2 rounded-[4px] py-1 pr-1.5 pl-2 text-[13px] text-fg",
+        selected ? "bg-active outline outline-1 -outline-offset-1 outline-contrast-active" : "hover:bg-hover",
+        "focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-focus",
+      )}
+    >
+      {part.trust ? <PartStatusDot trust={part.trust} basis={part.trustBasis} /> : <span className="w-2 shrink-0" />}
+      <Icon name={partIcon(part)} size={14} strokeWidth={1.75} className="shrink-0 text-fg-muted" aria-hidden />
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span className="truncate leading-[1.25]" title={[part.name, part.id, part.file].join("\n")}>
+          {part.name}
+          {part.instances > 1 && <span className="text-fg-muted"> ×{part.instances}</span>}
+        </span>
+        <span className={cx("truncate font-ui text-[11px] leading-[1.3]", sync.kind === "update" || sync.kind === "diverged" ? SYNC_TEXT[sync.tone] : "text-fg-muted")}>{part.busy ? `${part.busy}…` : partNote(part)}</span>
+      </span>
+      <span className="hidden shrink-0 items-center group-focus-within:flex group-hover:flex">
+        {part.status === "update-available" && actions.update && <RowAction icon="download" label={`Update to ${rev(part.recommended)}`} onClick={() => actions.update!(part.id)} />}
+        {part.status === "diverged" && actions.restore && <RowAction icon="undo-2" label={`Restore ${rev(part.revision)}`} onClick={() => actions.restore!(part.id)} />}
+        {part.tier === "catalog" && actions.compare && <RowAction icon="git-compare-arrows" label="Compare with the library" onClick={() => actions.compare!(part.id)} />}
+        {part.tier === "project-researched" && actions.publish && <RowAction icon="upload" label="Submit for verification" onClick={() => actions.publish!(part.id)} />}
+        {(actions.openSource || part.tier !== "catalog") && <RowAction icon="file-code" label="Open source" onClick={() => (actions.openSource ?? actions.open)(part.id)} />}
+      </span>
+      <span role="img" aria-label={`${sync.label}. ${sync.meaning}`} data-tooltip={`${sync.label}. ${sync.meaning}`} className={cx("grid size-5 shrink-0 place-items-center", SYNC_TEXT[sync.tone])}>
+        <Icon name={sync.icon} size={14} strokeWidth={sync.kind === "in-sync" ? 2.25 : 1.75} aria-hidden />
+      </span>
+    </li>
+  );
+}
+
+export function ProjectParts({
+  model,
+  actions,
+  selected,
+  folded,
+}: {
+  model: ProjectPartsModel;
+  actions: ProjectPartsActions;
+  /** The part shown in the Inspector or in a detail tab. */ selected?: string;
+  /** The groups folded away, kept by the host (PB-1039). */
+  folded?: FoldedGroups;
+}) {
+  const groups = useMemo(() => partGroups(model.parts), [model.parts]);
+  const { closed, toggle, setAll } = useFolded(folded);
+  const allClosed = groups.length > 0 && groups.every((g) => closed.has(g.id));
+  const c = model.counts;
+  return (
+    <PartsSurface place="sidebar">
+      <div className="flex size-full min-w-[220px] flex-col">
+        <div className={cx(BODY, "flex shrink-0 flex-col gap-2 border-b border-line-subtle px-3 pt-2.5 pb-2.5 text-[12px]")}>
+          <div className="flex min-w-0 items-center gap-2">
+            {actions.openPage ? (
+              <button
+                type="button"
+                onClick={actions.openPage}
+                data-tooltip="Open the Project Parts page"
+                className="group/title flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-[4px] text-left text-[13px] font-semibold text-fg hover:text-link focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-focus"
+              >
+                <Icon name="package" size={14} strokeWidth={1.75} className="shrink-0" aria-hidden />
+                <span className="truncate">
+                  {model.waiting ? "Parts" : `${c.total} part${c.total === 1 ? "" : "s"}`}
+                </span>
+                <Icon name="arrow-up-right" size={13} className="shrink-0 text-fg-muted group-hover/title:text-link" aria-hidden />
+              </button>
+            ) : (
+              <span className="flex min-w-0 flex-1 items-center gap-1.5 text-[13px] font-semibold text-fg">
+                <Icon name="package" size={14} strokeWidth={1.75} className="shrink-0" aria-hidden />
+                <span className="truncate">
+                  {model.waiting ? "Parts" : `${c.total} part${c.total === 1 ? "" : "s"}`}
+                </span>
+              </span>
+            )}
+            {groups.length > 1 && <RowAction icon={allClosed ? "chevrons-up-down" : "chevrons-down-up"} label={allClosed ? "Expand all groups" : "Collapse all groups"} onClick={() => setAll(allClosed ? [] : groups.map((g) => g.id))} />}
+            {actions.check && <RowAction icon={model.loading ? "loader" : "refresh-cw"} label={model.checked ? "Check the libraries for updates again" : "Check the libraries for updates"} disabled={model.loading} onClick={actions.check} />}
+          </div>
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+            {model.waiting ? (
+              <span className="text-fg-muted">{model.waiting}</span>
+            ) : model.checked ? (
+              <span className={cx("flex items-center gap-1", c.updates ? "text-info" : "text-fg-muted")} data-tooltip={UPDATE_EXPLAINED}>
+                <Icon name="download" size={13} strokeWidth={1.75} aria-hidden /> {c.updates} update{c.updates === 1 ? "" : "s"}
+              </span>
+            ) : (
+              <span className="text-fg-muted">{model.loading ? "Listing…" : "Not checked for updates yet"}</span>
+            )}
+            {c.diverged > 0 && (
+              <span className="flex items-center gap-1 text-warning">
+                <Icon name="git-compare-arrows" size={13} strokeWidth={1.75} aria-hidden /> {c.diverged} diverged
+              </span>
+            )}
+          </div>
+        </div>
+        <ScrollArea className="min-h-0 flex-1" contentClassName="px-1.5 pt-1 pb-4">
+          <ul role="tree" aria-label="Project parts" className="flex flex-col">
+            {groups.map((g) => {
+              const open = !closed.has(g.id);
+              return (
+                <li key={g.id} role="treeitem" aria-expanded={open} data-group={g.id} className="mt-3 first:mt-1.5">
+                  <FoldHeading
+                    open={open}
+                    onToggle={() => toggle(g.id)}
+                    className="h-7 px-1.5"
+                    titleClassName={cx("text-[10.5px]", g.id === "updates" ? "text-info" : "text-fg-muted")}
+                    right={<span className="grid h-4 min-w-4 shrink-0 place-items-center rounded-full bg-muted px-1 font-ui text-[10px] text-fg outline-1 -outline-offset-1 outline-contrast">{g.parts.length}</span>}
+                  >
+                    {g.title}
+                  </FoldHeading>
+                  {open && (
+                    <ul role="group" className="mt-1 flex flex-col gap-0.5">
+                      {g.parts.map((p) => (
+                        <Row key={p.id} part={p} actions={actions} selected={p.id === selected} />
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              );
+            })}
+          </ul>
+          {!groups.length && !model.loading && !model.error && !model.waiting && <p className={cx(BODY, "px-2 pt-4 text-[12.5px] text-fg-muted")}>The project has no parts yet. Add some from the library.</p>}
+          {model.error && <p className={cx(BODY, "px-2 pt-3 text-[12px] text-error")}>{model.error}</p>}
+          {(model.checked?.problems ?? []).map((m) => (
+            <p key={m} className={cx(BODY, "px-2 pt-2 text-[12px] text-warning")}>
+              Not checked: {m}
+            </p>
+          ))}
+          {groups.length > 0 && (
+            <div className={cx(BODY, "mt-5 flex flex-col gap-2 border-t border-line-subtle px-2 pt-3 text-[11.5px] leading-snug text-fg-muted")}>
+              <PartStatusLegend />
+              <p>{UPDATE_EXPLAINED}</p>
+            </div>
+          )}
+        </ScrollArea>
+      </div>
+    </PartsSurface>
+  );
+}