{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "session-item",
  "type": "registry:ui",
  "title": "Session Item",
  "description": "Rich session row for the sidebar, plus the hover-card layout with status, branch, and quick actions.",
  "dependencies": [],
  "registryDependencies": [
    "https://seamui.dev/r/utils.json",
    "https://seamui.dev/r/button.json",
    "https://seamui.dev/r/badge.json",
    "https://seamui.dev/r/agent-status.json",
    "https://seamui.dev/r/branch-chip.json"
  ],
  "files": [
    {
      "path": "registry/seam/ui/session-item.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"./badge\"\nimport { Button, type ButtonProps } from \"./button\"\nimport { AgentStatus, AgentStatusDot, type AgentState } from \"./agent-status\"\nimport { BranchChip } from \"./branch-chip\"\n\n// Inside a collapsed sidebar rail the text/badge halves fade out on the same\n// clock as the width; outside a sidebar the group selector never matches and\n// these classes are inert, so SessionItem stays sidebar-optional.\nconst railFade =\n  \"transition-opacity duration-300 motion-reduce:transition-none group-data-[state=collapsed]/sidebar:opacity-0\"\n\n// The rich sidebar row: status dot + title + time + unread count. It wears\n// Button (ghost, row-shaped) so press depth, the haptic tap, and focus come\n// from the foundation. At rest it sits flat in the sidebar well; the active\n// row rises as an embossed key (data-active → secondary + shadow-resting).\n// No nested interactive elements — branch copy lives on SessionCard.\nfunction SessionItem({\n  title,\n  status,\n  time,\n  unread = 0,\n  active,\n  className,\n  ...props\n}: Omit<ButtonProps, \"children\"> & {\n  title: React.ReactNode\n  status: AgentState\n  time?: React.ReactNode\n  unread?: number\n  active?: boolean\n}) {\n  return (\n    <Button\n      data-slot=\"session-item\"\n      variant=\"ghost\"\n      data-active={active || undefined}\n      aria-current={active ? \"true\" : undefined}\n      className={cn(\n        \"h-auto w-full justify-start gap-2.5 px-2.5 py-2 font-normal\",\n        \"data-[active]:bg-secondary data-[active]:hover:bg-secondary data-[active]:shadow-resting\",\n        className\n      )}\n      {...props}\n    >\n      <AgentStatusDot status={status} />\n      <span\n        className={cn(\n          \"min-w-0 flex-1 truncate text-left text-sm\",\n          unread > 0 && \"font-medium\",\n          railFade\n        )}\n      >\n        {title}\n      </span>\n      {time ? (\n        <span\n          className={cn(\"text-muted-foreground text-xs tabular-nums\", railFade)}\n        >\n          {time}\n        </span>\n      ) : null}\n      {unread > 0 ? (\n        <Badge\n          aria-label={`${unread} unread`}\n          className={cn(\"h-4 min-w-4 px-1 text-[10px] tabular-nums\", railFade)}\n        >\n          {unread}\n        </Badge>\n      ) : null}\n    </Button>\n  )\n}\n\n// The hover-card content: live status, branch, meta rows, quick next-actions.\n// Layout only — sit it inside PreviewCardContent for the hover wiring (see the\n// hover-card example), or inside a popover where hover doesn't exist (touch).\nfunction SessionCard({\n  title,\n  status,\n  branch,\n  actions,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title: React.ReactNode\n  status: AgentState\n  branch?: string\n  actions?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"session-card\"\n      className={cn(\"space-y-3\", className)}\n      {...props}\n    >\n      <div className=\"flex items-center justify-between gap-2\">\n        <div className=\"min-w-0 truncate text-sm font-medium\">{title}</div>\n        <AgentStatus status={status} className=\"shrink-0\" />\n      </div>\n      {branch ? <BranchChip branch={branch} /> : null}\n      {children ? <div className=\"space-y-1.5\">{children}</div> : null}\n      {actions ? (\n        <div data-slot=\"session-card-actions\" className=\"flex gap-2 pt-1\">\n          {actions}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\n// One label/value meta line on the card (\"Model — Fable 5\").\nfunction SessionCardRow({\n  label,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & { label: React.ReactNode }) {\n  return (\n    <div\n      data-slot=\"session-card-row\"\n      className={cn(\n        \"flex items-baseline justify-between gap-3 text-xs\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"text-muted-foreground shrink-0\">{label}</span>\n      <span className=\"min-w-0 truncate text-right\">{children}</span>\n    </div>\n  )\n}\n\nexport { SessionItem, SessionCard, SessionCardRow }\n",
      "type": "registry:ui",
      "target": "components/ui/session-item.tsx"
    }
  ]
}