@spunto/design-system 0.11.0 → 0.12.0

package/README.md

@@ -101,9 +101,12 @@ concept goes behind a domain sub-export, never in the root entry.**
 import { Button, Card } from "@spunto/design-system"                                        // primitives
 import { WorkerCard } from "@spunto/design-system/workers"                                  // domain
 import { ImageCard, FeatureCard, ExtensionCard } from "@spunto/design-system/devcontainer"  // domain
-import { ProjectForm } from "@spunto/design-system/projects"                                // domain
+import { ProjectForm, ProjectPanel } from "@spunto/design-system/projects"                   // domain
 ```
 
+One entry **per domain**, not per component: a project's form and a project's
+panel are the same concept seen twice, so they share `/projects`.
+
 ### `@spunto/design-system/workers`
 
 - **`WorkerCard`** — a Spunto worker as a card: state, author, node, setup
@@ -201,6 +204,47 @@ hand-typed reference that degrades cleanly.
   whether the manifest sits beside it and whether the catalogs are one column or
   two.
 
+And the read-only twin of that form:
+
+- **`ProjectPanel`** — the left-hand panel of a project page: identity, image,
+  repositories, deploy key, features, extensions, build cache, ports, lifecycle
+  commands, secrets, integrations, version history, footer. It draws the same
+  configuration once it exists, plus what only a live project has. Each band
+  disappears when its data is absent, so a bare project collapses to a header
+  plus an image without a single caller-side conditional.
+- **Same rule as `WorkerCard`**: the versions, secrets, builds, nodes and
+  integration statuses are fetched by the app and come down as props; the
+  pre-build and the restore are callbacks (`onPrebuild`, `onRestoreVersion`);
+  the links go through `editHref`/`secretsHref` + `render.link`, never
+  `next/link`. **The card is the component's, its placement is not** — the
+  `<aside className="lg:w-72 lg:sticky">` stays in the app.
+- **Its bricks, exported individually** because a project's edit page (and
+  tomorrow a deployment card) assembles part of them without the panel:
+  `PanelSection`/`Eyebrow`, `RepositoryList` (+`projectRepoName`,
+  `projectRepoSource`), `ChipList` (+`FeatureChips`, `ExtensionChips`,
+  `PortChips`, `SecretChips`), `BuildCacheList`/`BuildStateLabel`/
+  `PrebuildButton`, `LifecycleCommands`, `IntegrationsList`, `VersionHistory`,
+  `DeployKeySection`, `PanelMeta`, `ProjectStatePill` (+`projectStateConfig`).
+- **Two type modules, on purpose.** The form owns a *complete* value it edits
+  (`ProjectFormValue`, every field present); the panel reads a *partial*
+  snapshot it merely displays (`ProjectPanelProject`, everything optional but
+  `name`/`image`/`createdAt`, in `panel-types.ts`). Opposite invariants — one
+  shared type would have to lie for one of the two. The `LinkRender` slot, on
+  the other hand, *is* shared with the worker surface: re-exported, not
+  redefined.
+- **The clipboard is UI, not network**, so `DeployKeySection`'s copy button (and
+  its toast) lives in the package; only the registration guidance, which differs
+  per app, comes down as `children`.
+- **The logos are derived, not asked for.** The panel reuses `/devcontainer`'s
+  pure helpers on data it already has: `resolveStackMark` turns the base image,
+  each feature and each extension into a brand mark, `githubAvatarUrl` turns an
+  `owner/repo` remote into its org avatar, and `RegistryRef` prints the image
+  reference with the registry dimmed and `name:tag` intact (copyable). Nothing
+  unrecognised gets a wrong logo — it falls back to a generic glyph — and an
+  integration only needs an `icon` when the shipped marks don't know it.
+- **Container queries** here too: the panel is 288 px in a sidebar on a 27" screen
+  and full width on a phone — and the desktop case is the narrow one.
+
 ## Toasts — `SpuntoProvider` + `toast()`
 
 `SpuntoProvider` is the design system's client umbrella provider. Mount it once

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spunto/design-system",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Spunto's shared design system — warm/flame tokens, color constants, and UI primitives.",
   "type": "module",
   "license": "MIT",

package/src/components/projects/advanced-sections.tsx

@@ -4,7 +4,7 @@ import type { ReactNode } from "react"
 import { ChevronDownIcon, Settings2Icon } from "lucide-react"
 
 import { cn } from "../../utils"
-import type { ProjectFormSectionId, ProjectFormValue } from "./types"
+import type { ProjectFormSectionId, ProjectFormValue, ProjectSecretRef } from "./types"
 
 export interface AdvancedDisclosureProps {
   open: boolean
@@ -101,7 +101,17 @@ export function AdvancedDisclosure({
  * `lifecycle`, `3 secrets`. Pure, and exported, because a caller rendering its
  * own fold needs the same sentence.
  */
-export function advancedSummary(value: ProjectFormValue, sections: ProjectFormSectionId[]): string[] {
+export function advancedSummary(
+  value: ProjectFormValue,
+  sections: ProjectFormSectionId[],
+  /**
+   * Secrets already stored server-side. They count: a project whose only
+   * advanced setting is three secrets would otherwise show an empty summary and
+   * keep the fold shut over them — exactly the "hides configuration you didn't
+   * set yourself" failure this component exists to avoid.
+   */
+  savedSecrets: ProjectSecretRef[] = []
+): string[] {
   const out: string[] = []
   for (const id of sections) {
     switch (id) {
@@ -124,9 +134,11 @@ export function advancedSummary(value: ProjectFormValue, sections: ProjectFormSe
       case "docker":
         if (value.dockerInDocker) out.push("docker-in-docker")
         break
-      case "secrets":
-        if (value.secrets.length) out.push(`${value.secrets.length} secret${value.secrets.length > 1 ? "s" : ""}`)
+      case "secrets": {
+        const n = value.secrets.length + savedSecrets.filter((x) => !value.removedSecretIds.includes(x.id)).length
+        if (n) out.push(`${n} secret${n > 1 ? "s" : ""}`)
         break
+      }
       // Identity, image and repositories are never advanced — they're the form.
       default:
         break

package/src/components/projects/build-cache-list.tsx

@@ -0,0 +1,104 @@
+// Pre-build cache: is the project's image already built, and where.
+//
+// The dashboard lists one row per online BYOC node and opens the build logs on
+// click; Lite has a single "local · Docker" row with nothing to open. Hence a
+// list of *targets* whose `onSelect` is optional — a row without one is inert
+// markup, not a dead button.
+
+import { CheckCircle2Icon, Loader2Icon, XIcon, ZapIcon } from "lucide-react"
+
+import { cn } from "../../utils"
+import type { ProjectBuildTarget } from "./panel-types"
+
+export interface PrebuildButtonProps {
+  onClick?: () => void
+  /** A build is in flight (this one's mutation, or a poll saying so) → spinner + disabled. */
+  pending?: boolean
+  label?: string
+  className?: string
+}
+
+/**
+ * The "Pre-build" affordance of the build cache section. Lives next to the
+ * section's label, so it ships as its own brick and goes into
+ * `PanelSection`'s `action` slot.
+ */
+export function PrebuildButton({ onClick, pending = false, label = "Pre-build", className }: PrebuildButtonProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={pending || !onClick}
+      className={cn(
+        "flex shrink-0 cursor-pointer items-center gap-1 text-[10px] text-primary transition-colors hover:text-primary/80 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+    >
+      {pending ? <Loader2Icon className="h-3 w-3 animate-spin" /> : <ZapIcon className="h-3 w-3" />}
+      {label}
+    </button>
+  )
+}
+
+export interface BuildCacheListProps {
+  targets: ProjectBuildTarget[]
+  className?: string
+}
+
+/** One row per build target: its name, and where its image build stands. */
+export function BuildCacheList({ targets, className }: BuildCacheListProps) {
+  if (!targets.length) return null
+
+  return (
+    // `-mx-1` on the list (not on each row): the hover highlight then bleeds
+    // one notch past the text on both sides, like the original inline markup,
+    // without any row being wider than 100% of its own container.
+    <div data-slot="build-cache-list" className={cn("-mx-1 space-y-1", className)}>
+      {targets.map((target) => {
+        const clickable = !!target.onSelect
+        const Tag = clickable ? "button" : "div"
+        return (
+          <Tag
+            key={target.id}
+            {...(clickable ? { type: "button" as const, onClick: target.onSelect } : {})}
+            title={target.label}
+            className={cn(
+              "flex w-full items-center justify-between gap-2 rounded px-1 transition-colors",
+              clickable && "cursor-pointer hover:bg-muted/50"
+            )}
+          >
+            <span className="min-w-0 truncate text-[11px] text-muted-foreground">{target.label}</span>
+            <BuildStateLabel state={target.state} />
+          </Tag>
+        )
+      })}
+    </div>
+  )
+}
+
+/**
+ * The right-hand state of a build row. Green = cached and usable, yellow = in
+ * flight, red = the build failed; anything unknown (including no build at all)
+ * reads "not built" rather than blowing up on a state the package predates.
+ */
+export function BuildStateLabel({ state }: { state?: string | null }) {
+  if (state === "building")
+    return (
+      <span className="flex shrink-0 items-center gap-1 text-[10px] text-yellow-600 dark:text-yellow-400">
+        <Loader2Icon className="h-2.5 w-2.5 animate-spin" /> building
+      </span>
+    )
+  if (state === "ready")
+    return (
+      <span className="flex shrink-0 items-center gap-1 text-[10px] text-green-600 dark:text-green-400">
+        <CheckCircle2Icon className="h-2.5 w-2.5" /> ready
+      </span>
+    )
+  if (state === "error")
+    return (
+      <span className="flex shrink-0 items-center gap-1 text-[10px] text-destructive">
+        <XIcon className="h-2.5 w-2.5" /> error
+      </span>
+    )
+  return <span className="shrink-0 text-[10px] text-muted-foreground/40">not built</span>
+}

package/src/components/projects/chip-list.tsx

@@ -0,0 +1,168 @@
+// The panel's four chip rows — features, extensions, ports, secrets.
+//
+// They differ only by icon, semantic tone and how the full id is shortened, so
+// they are one parameterised brick rather than four near-identical copies (both
+// apps carried all four, hand-written, twice).
+
+import type { ReactNode } from "react"
+import { KeyRoundIcon, NetworkIcon, PuzzleIcon } from "lucide-react"
+
+import { cn } from "../../utils"
+// Same package, next domain over: the catalog cards already know how to turn a
+// reference into a logo, and a feature chip is the same feature the catalog
+// showed — deriving it twice, differently, is exactly what this package exists
+// to prevent.
+import { resolveStackMark, StackMark } from "../devcontainer/stack-mark"
+import { parseExtensionId } from "../devcontainer/registry"
+import type { ProjectSecretMeta } from "./panel-types"
+
+/** Semantic tone of a chip row — the Build/Ship/Run scale plus the neutral one. */
+export type ChipTone = "build" | "primary" | "flame" | "muted"
+
+const CHIP_TONES: Record<ChipTone, string> = {
+  build: "bg-build/10 text-build",
+  primary: "bg-primary/10 text-primary",
+  flame: "bg-flame/10 text-flame",
+  muted: "bg-muted text-muted-foreground",
+}
+
+export interface ChipItem {
+  /** React key, and the `title` fallback: usually the full, unshortened id. */
+  id: string
+  /** What is actually displayed — the shortened form. Defaults to `id`. */
+  label?: ReactNode
+  /** Hover text. Defaults to `id`, so the full value is always reachable. */
+  title?: string
+  /** Overrides the row's icon for this chip — a brand mark, typically. */
+  icon?: ReactNode
+}
+
+export interface ChipListProps {
+  items: ChipItem[]
+  /** One icon for the whole row (every chip in a row means the same kind of thing). */
+  icon?: ReactNode
+  tone?: ChipTone
+  /** Rendered instead of the row when `items` is empty. Absent → nothing at all. */
+  empty?: ReactNode
+  className?: string
+}
+
+/**
+ * A wrapping row of monospace chips.
+ *
+ * `max-w-full` + `truncate` on the label is what keeps a chip inside a 288 px
+ * sidebar: a feature id or an extension name is one unbreakable token, and
+ * without the cap it runs under the card's rounded edge.
+ */
+export function ChipList({ items, icon, tone = "muted", empty, className }: ChipListProps) {
+  if (!items.length) return empty ? <>{empty}</> : null
+
+  return (
+    <div data-slot="chip-list" className={cn("flex flex-wrap gap-1.5", className)}>
+      {items.map((item) => (
+        <span
+          key={item.id}
+          title={item.title ?? item.id}
+          className={cn(
+            "flex min-w-0 max-w-full items-center gap-1 rounded-md px-2 py-1 font-mono text-[11px]",
+            CHIP_TONES[tone]
+          )}
+        >
+          {item.icon ?? icon}
+          <span className="min-w-0 truncate">{item.label ?? item.id}</span>
+        </span>
+      ))}
+    </div>
+  )
+}
+
+/** Fallback line shared by the empty states below. */
+function Empty({ children }: { children: ReactNode }) {
+  return <p className="text-[11px] text-muted-foreground/60">{children}</p>
+}
+
+/**
+ * devcontainer features — last path segment, tone Build, and **the runtime's own
+ * logo** rather than the same box twelve times.
+ *
+ * The mark is derived from the id (`…/features/docker-in-docker:2` → Docker), by
+ * the same pure function the catalog cards use, and falls back to a generic
+ * glyph when nothing matches — never to a wrong logo.
+ */
+export function FeatureChips({ features, className }: { features: { id: string }[]; className?: string }) {
+  return (
+    <ChipList
+      className={className}
+      tone="build"
+      items={features.map((f) => ({
+        id: f.id,
+        label: f.id.split("/").pop(),
+        icon: <StackMark name={resolveStackMark(f.id)} className="h-3.5 w-3.5 shrink-0" />,
+      }))}
+    />
+  )
+}
+
+/**
+ * VS Code extensions — `publisher.name` shown by its name half, with the
+ * publisher kept in the tooltip. Same logo derivation as the features
+ * (`ms-python.python` → Python); anything unrecognised keeps the puzzle piece,
+ * which is what a VS Code extension *is*.
+ */
+export function ExtensionChips({ extensions, className }: { extensions: string[]; className?: string }) {
+  return (
+    <ChipList
+      className={className}
+      tone="primary"
+      items={extensions.map((ext) => {
+        const { namespace, name } = parseExtensionId(ext)
+        const mark = resolveStackMark(name, namespace)
+        return {
+          id: ext,
+          label: name ?? ext,
+          title: namespace ? `${name} — ${namespace}` : ext,
+          icon: mark ? (
+            <StackMark name={mark} className="h-3.5 w-3.5 shrink-0" />
+          ) : (
+            <PuzzleIcon className="h-3 w-3 shrink-0" />
+          ),
+        }
+      })}
+    />
+  )
+}
+
+/** Forwarded ports, `:3000`-style. */
+export function PortChips({ ports, className }: { ports: (number | string)[]; className?: string }) {
+  return (
+    <ChipList
+      className={className}
+      icon={<NetworkIcon className="h-3 w-3 shrink-0" />}
+      items={ports.map((p) => ({ id: String(p), label: `:${p}` }))}
+    />
+  )
+}
+
+/**
+ * Secrets — **names only**. The panel never receives a value, so there is
+ * nothing here that could leak into a screenshot or a DOM dump.
+ */
+export function SecretChips({
+  secrets,
+  emptyLabel = "No secrets configured",
+  className,
+}: {
+  secrets: ProjectSecretMeta[]
+  emptyLabel?: ReactNode
+  className?: string
+}) {
+  return (
+    <ChipList
+      className={className}
+      tone="flame"
+      icon={<KeyRoundIcon className="h-3 w-3 shrink-0" />}
+      items={secrets.map((s) => ({ id: s.id, label: s.name, title: s.name }))}
+      empty={emptyLabel ? <Empty>{emptyLabel}</Empty> : null}
+    />
+  )
+}

package/src/components/projects/deploy-key-section.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import { useState, type ReactNode } from "react"
+import { CheckIcon, ClipboardIcon } from "lucide-react"
+
+import { cn } from "../../utils"
+import { toast } from "../toast"
+
+export interface DeployKeySectionProps {
+  /** Public half of the project's SSH deploy key. The private half never leaves the API. */
+  publicKey: string
+  /**
+   * Registration guidance below the key. Deliberately a slot: the dashboard
+   * spells out GitLab/Gitea/Bitbucket paths, Lite says one sentence — the same
+   * component can't own both texts.
+   */
+  children?: ReactNode
+  /** Toast on success. `false` for a surface with no toast viewport mounted. */
+  toastOnCopy?: boolean
+  copiedMessage?: string
+  className?: string
+}
+
+/**
+ * The project's deploy key, with a copy button.
+ *
+ * The clipboard is UI, not network — so unlike everything else in this panel it
+ * *is* the design system's business, toast included (`toast()` ships with the
+ * package). What stays outside is the guidance text, which differs per app.
+ */
+export function DeployKeySection({
+  publicKey,
+  children,
+  toastOnCopy = true,
+  copiedMessage = "Clé publique copiée",
+  className,
+}: DeployKeySectionProps) {
+  const [copied, setCopied] = useState(false)
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(publicKey)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+      if (toastOnCopy) toast.success(copiedMessage)
+    } catch {
+      if (toastOnCopy) toast.error("Impossible de copier", { description: "Le presse-papier n'est pas accessible." })
+    }
+  }
+
+  return (
+    <div data-slot="deploy-key-section" className={cn("space-y-2", className)}>
+      <div className="flex items-start gap-2 rounded-lg bg-muted/50 p-3">
+        {/* `break-all`, not `truncate`: a deploy key is meant to be *read* and
+            checked against what's registered on the git host. */}
+        <code className="min-w-0 flex-1 font-mono text-[11px] leading-relaxed break-all text-foreground/80">
+          {publicKey}
+        </code>
+        <button
+          type="button"
+          onClick={copy}
+          title="Copy public key"
+          aria-label="Copy public key"
+          className="shrink-0 cursor-pointer text-muted-foreground transition-colors hover:text-foreground"
+        >
+          {copied ? (
+            <CheckIcon className="h-3.5 w-3.5 text-green-600 dark:text-green-400" />
+          ) : (
+            <ClipboardIcon className="h-3.5 w-3.5" />
+          )}
+        </button>
+      </div>
+      {children && <div className="text-xs leading-relaxed text-muted-foreground">{children}</div>}
+    </div>
+  )
+}

package/src/components/projects/index.ts

@@ -1,9 +1,19 @@
-// @spunto/design-system/projects — composing a project.
+// @spunto/design-system/projects — composing a project, and reading one back.
 //
-// Third domain sub-export, after `/workers` and `/devcontainer`. `ProjectForm`
-// is the whole "compose a dev environment" screen: identity, base image, repos,
-// features, extensions, lifecycle, ports, prewarm, docker-in-docker, secrets,
-// plus the live build manifest that recaps it and carries the submit.
+// Third domain sub-export, after `/workers` and `/devcontainer`, and home to the
+// two faces of a project:
+//
+//   - `ProjectForm` — the whole "compose a dev environment" screen: identity,
+//     base image, repos, features, extensions, lifecycle, ports, prewarm,
+//     docker-in-docker, secrets, plus the live build manifest that recaps it and
+//     carries the submit.
+//   - `ProjectPanel` — the read-only side panel of a project page: the same
+//     configuration once it exists, plus what only a live project has (build
+//     cache, secrets by name, integrations, version history).
+//
+// One entry per domain, not one per component: a project's form and a project's
+// panel are the same concept seen twice, and an app that draws one usually
+// draws the other.
 //
 // Controlled by a single `ProjectFormValue`, and nothing in here fetches:
 // catalogs come in as data, the extension search is a callback, the GitHub
@@ -55,4 +65,60 @@ export type {
   ProjectSecretRef,
 } from "./types"
 
-export { cn } from "../../utils"
+// ── The panel side ──────────────────────────────────────────────────────────
+// Read-only twin of the form. Its bricks are exported one by one too, because
+// the edit page (and tomorrow a deployment card) reuses part of them without
+// wanting the whole panel.
+
+export { ProjectPanel } from "./project-panel"
+export type { ProjectPanelProps } from "./project-panel"
+
+export { PanelSection, Eyebrow } from "./panel-section"
+export type { PanelSectionProps, EyebrowProps } from "./panel-section"
+
+export { RepositoryList, projectRepoName, projectRepoSource } from "./repository-list"
+export type { RepositoryListProps } from "./repository-list"
+
+export { ChipList, FeatureChips, ExtensionChips, PortChips, SecretChips } from "./chip-list"
+export type { ChipListProps, ChipItem, ChipTone } from "./chip-list"
+
+export { BuildCacheList, BuildStateLabel, PrebuildButton } from "./build-cache-list"
+export type { BuildCacheListProps, PrebuildButtonProps } from "./build-cache-list"
+
+export { LifecycleCommands, LifecycleCommand } from "./lifecycle-commands"
+export type { LifecycleCommandsProps, LifecycleCommandProps } from "./lifecycle-commands"
+
+export { IntegrationsList } from "./integrations-list"
+export type { IntegrationsListProps } from "./integrations-list"
+
+export { VersionHistory } from "./version-history"
+export type { VersionHistoryProps } from "./version-history"
+
+export { DeployKeySection } from "./deploy-key-section"
+export type { DeployKeySectionProps } from "./deploy-key-section"
+
+export { PanelMeta } from "./panel-meta"
+export type { PanelMetaProps } from "./panel-meta"
+
+export { ProjectStatePill, projectStateConfig } from "./project-state"
+export type { ProjectStatePillProps, ProjectStateKey } from "./project-state"
+
+// The panel reads a *partial* snapshot, the form owns a *complete* value — two
+// opposite invariants, hence two type modules (see `panel-types.ts`).
+export type {
+  ProjectPanelProject,
+  ProjectPanelRepository,
+  ProjectPanelMetaItem,
+  ProjectBuildTarget,
+  ProjectIntegration,
+  ProjectSecretMeta,
+  ProjectVersionEntry,
+} from "./panel-types"
+
+// The link slot is shared with the worker surface — same shape, same rule (the
+// package never imports `next/link`), so it is re-exported rather than redefined.
+export type { LinkRender } from "../workers/worker-card"
+
+// Re-exported here so a consumer of the project surface doesn't have to import
+// the root entry just to format what it feeds these components.
+export { cn, formatShortDate } from "../../utils"

package/src/components/projects/integrations-list.tsx

@@ -0,0 +1,87 @@
+// External accounts a project can be connected to (GitHub, GCP…).
+//
+// Only the dashboard has this section today, but it is exactly the kind of band
+// Lite will grow — so it ships as its own brick, with the provider glyph as a
+// slot: the design system carries no brand icons.
+
+import { CheckCircle2Icon } from "lucide-react"
+
+import { cn } from "../../utils"
+import { resolveStackMark, StackMark } from "../devcontainer/stack-mark"
+import type { LinkRender } from "../workers/worker-card"
+import type { ProjectIntegration } from "./panel-types"
+
+export interface IntegrationsListProps {
+  integrations: ProjectIntegration[]
+  /**
+   * Renders the "Connect" row as the app's link component. Absent → a plain
+   * `<a>`, which is the right default here anyway: connecting is a full-page
+   * redirect to the API's OAuth entry point, not a client-side route.
+   */
+  link?: LinkRender
+  connectLabel?: string
+  /** Right-hand text when an integration is off *and* offers no connect URL. */
+  notConnectedLabel?: string
+  className?: string
+}
+
+/** One row per integration: connected (green check) or a "Connect" affordance. */
+export function IntegrationsList({
+  integrations,
+  link,
+  connectLabel = "Connect",
+  notConnectedLabel = "Not connected",
+  className,
+}: IntegrationsListProps) {
+  if (!integrations.length) return null
+
+  const Link: LinkRender =
+    link ?? (({ href, className: cls, children }) => <a href={href} className={cls}>{children}</a>)
+
+  return (
+    <div data-slot="integrations-list" className={cn("space-y-1.5", className)}>
+      {integrations.map((integration) => {
+        const linked = !integration.connected && !!integration.connectHref
+        const body = (
+          <>
+            <span className="flex min-w-0 items-center gap-2">
+              {/* The provider's glyph stays a slot, but it no longer *has* to be
+                  passed: GitHub, GCP, Docker & co. are brand marks the package
+                  already ships, derived from the id/label by the same function
+                  the catalog cards use. An app only supplies `icon` for a
+                  provider the marks don't know. */}
+              <span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center text-muted-foreground">
+                {integration.icon ?? <StackMark name={resolveStackMark(integration.id, integration.label)} className="h-3.5 w-3.5" />}
+              </span>
+              <span className="truncate">{integration.label}</span>
+            </span>
+            {integration.connected ? (
+              <CheckCircle2Icon className="h-3.5 w-3.5 shrink-0 text-green-600 dark:text-green-400" />
+            ) : linked ? (
+              <span className="shrink-0 text-[11px] text-primary group-hover:underline">{connectLabel}</span>
+            ) : (
+              <span className="shrink-0 text-[11px] text-muted-foreground/50">{notConnectedLabel}</span>
+            )}
+          </>
+        )
+
+        if (!linked)
+          return (
+            <div key={integration.id} className="flex items-center justify-between gap-2 text-xs">
+              {body}
+            </div>
+          )
+
+        return (
+          <Link
+            key={integration.id}
+            href={integration.connectHref!}
+            className="group flex items-center justify-between gap-2 text-xs text-muted-foreground transition-colors hover:text-foreground"
+          >
+            {body}
+          </Link>
+        )
+      })}
+    </div>
+  )
+}