@spunto/design-system 0.28.0 → 0.30.1

package/src/components/tasks/task-cockpit-mobile.tsx

@@ -0,0 +1,272 @@
+"use client"
+
+// A conversation on a phone: **its own screen**, not the desktop cockpit squeezed.
+//
+// Narrowed to 390 px, the two-column cockpit becomes a 150 px-tall stream with a reply box wedged
+// in the middle of a scrolling page. The shape here is the one every messaging app converged on:
+//
+//  - **The screen is the conversation.** A fixed layer sized to `visualViewport`, so the page never
+//    scrolls under you and the reply box stays glued above the keyboard instead of being pushed
+//    off-screen by it. The host's own chrome goes away with it.
+//  - **One primary action in the nav bar.** Accept, when there is something to accept. Everything
+//    that is a *fact about* the task is one tap away in a sheet (`details`, typically a
+//    `TaskDetails variant="sheet"`), because a phone has room for the work or the metadata.
+//  - **Drop lives in that sheet**, not next to Accept.
+//
+// Same slots as `TaskCockpit`, so an app switches between the two on its own "is this a phone?"
+// signal and hands both the same pieces (the composer with `layout="compact"`).
+
+import { useEffect, useState, type ReactNode } from "react"
+import { createPortal } from "react-dom"
+import { CheckCircle2Icon, ChevronLeftIcon, Loader2Icon, SlidersHorizontalIcon, XIcon } from "lucide-react"
+
+import { cn, formatRelativeTime } from "../../utils"
+import { useOverlayContainer } from "../spunto-provider"
+import type { LinkRender } from "../workers/worker-card"
+import { TaskPanelTabs, useCockpitView, type TaskCockpitProps } from "./task-cockpit"
+import { TaskDetailsSheetContext } from "./task-details"
+import { TaskStateIcon, taskPendingActionConfig, taskStateStyle, useElapsed } from "./task-state"
+import type { TaskItem, TaskPendingAction } from "./types"
+
+export interface TaskCockpitMobileProps extends Omit<TaskCockpitProps, "className"> {
+  /** Back, when there is no URL to go back *to* (a list on the same route). Wins over `backHref`. */
+  onBack?: () => void
+  /**
+   * `true` (default): portalled full-screen layer above the page, sized to the visual viewport.
+   * `false`: fills its parent instead — for a preview inside a phone frame, or a host that is
+   * already full-screen.
+   */
+  fullscreen?: boolean
+  className?: string
+}
+
+export interface VisualViewportState {
+  /** Height of the visible area, i.e. screen minus the on-screen keyboard (px). */
+  height: number
+  /** Offset of the visual viewport inside the layout viewport (px). */
+  offsetTop: number
+  /** Estimated height the soft keyboard is occupying (0 when closed). */
+  keyboard: number
+}
+
+/**
+ * Tracks `window.visualViewport`, so a fixed full-screen surface can sit exactly above the
+ * on-screen keyboard. On iOS Safari the keyboard does *not* change `innerHeight`; only
+ * `visualViewport.height` shrinks — so size off it and translate by its `offsetTop`.
+ */
+export function useVisualViewport(enabled = true): VisualViewportState {
+  const [state, setState] = useState<VisualViewportState>({ height: 0, offsetTop: 0, keyboard: 0 })
+
+  useEffect(() => {
+    if (!enabled) return
+    const vv = window.visualViewport
+    if (!vv) {
+      const fallback = () => setState({ height: window.innerHeight, offsetTop: 0, keyboard: 0 })
+      fallback()
+      window.addEventListener("resize", fallback)
+      return () => window.removeEventListener("resize", fallback)
+    }
+    let raf = 0
+    const update = () => {
+      cancelAnimationFrame(raf)
+      raf = requestAnimationFrame(() => {
+        const keyboard = Math.max(0, window.innerHeight - vv.height - vv.offsetTop)
+        setState({ height: vv.height, offsetTop: vv.offsetTop, keyboard })
+      })
+    }
+    update()
+    vv.addEventListener("resize", update)
+    vv.addEventListener("scroll", update)
+    return () => {
+      cancelAnimationFrame(raf)
+      vv.removeEventListener("resize", update)
+      vv.removeEventListener("scroll", update)
+    }
+  }, [enabled])
+
+  return state
+}
+
+const defaultLink: LinkRender = ({ href, className, children }) => (
+  <a href={href} className={className}>
+    {children}
+  </a>
+)
+
+const NAV_BUTTON =
+  "flex h-11 w-11 shrink-0 touch-manipulation items-center justify-center rounded-xl text-muted-foreground transition-colors active:bg-muted"
+
+/**
+ * The one line under the title: where the task stands, or — while something is in flight — what
+ * it is doing and for how long. A phone shows one status, so it shows the one about to change.
+ */
+function NavStatus({ task, action, since }: { task: TaskItem; action: TaskPendingAction | null; since: string | null }) {
+  const elapsed = useElapsed(action ? since : null)
+  if (action) {
+    const style = taskPendingActionConfig[action]
+    return (
+      <p className={cn("flex items-center gap-1 text-[11px] leading-tight", style.textClass)}>
+        <Loader2Icon className="h-3 w-3 animate-spin" />
+        {style.label}…{elapsed && <span className="tabular-nums opacity-70">{elapsed}</span>}
+      </p>
+    )
+  }
+  const style = taskStateStyle(task.state)
+  return (
+    <p className="flex items-center gap-1 text-[11px] leading-tight text-muted-foreground">
+      <span className={style.textClass}>
+        <TaskStateIcon state={task.state} />
+      </span>
+      {style.label}
+      <span aria-hidden>·</span>
+      {formatRelativeTime(task.lastActivityAt ?? task.createdAt)}
+    </p>
+  )
+}
+
+/**
+ * The bottom sheet holding `details`. Hand-rolled rather than a portalled drawer: this screen is
+ * itself a layer at `z-[120]`, and a drawer portalled to the page at `z-50` would open *behind*
+ * the conversation. A sheet that is a child of the layer it belongs to has no such argument.
+ */
+function DetailsSheet({ open, onClose, children }: { open: boolean; onClose: () => void; children: ReactNode }) {
+  useEffect(() => {
+    if (!open) return
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose()
+    window.addEventListener("keydown", onKey)
+    return () => window.removeEventListener("keydown", onKey)
+  }, [open, onClose])
+
+  if (!open) return null
+  return (
+    <div className="absolute inset-0 z-10 flex flex-col justify-end">
+      <button type="button" aria-label="Close details" onClick={onClose} className="absolute inset-0 bg-black/40" />
+      <div role="dialog" aria-label="Details" className="relative flex max-h-[85%] flex-col overflow-hidden rounded-t-2xl border-t bg-background">
+        <div className="flex shrink-0 items-center gap-2 border-b px-3 py-2">
+          <span className="absolute top-1.5 left-1/2 h-1 w-10 -translate-x-1/2 rounded-full bg-muted-foreground/25" />
+          <h2 className="min-w-0 flex-1 truncate pt-1 text-sm font-semibold">Details</h2>
+          <button type="button" onClick={onClose} aria-label="Close details" className={NAV_BUTTON}>
+            <XIcon className="h-5 w-5" />
+          </button>
+        </div>
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain pb-[max(1rem,env(safe-area-inset-bottom))]">
+          <TaskDetailsSheetContext.Provider value={{ close: onClose }}>{children}</TaskDetailsSheetContext.Provider>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function TaskCockpitMobile({
+  task,
+  loading = false,
+  pendingAction,
+  pendingSince,
+  onAccept,
+  backHref,
+  onBack,
+  render,
+  view: viewProp,
+  onViewChange,
+  session,
+  diff,
+  composer,
+  details,
+  fullscreen = true,
+  className,
+}: TaskCockpitMobileProps) {
+  const vp = useVisualViewport(fullscreen)
+  const container = useOverlayContainer()
+  const [detailsOpen, setDetailsOpen] = useState(false)
+  const [view, setView] = useCockpitView(viewProp, onViewChange)
+  const Link = render?.link ?? defaultLink
+
+  const action = task ? (pendingAction !== undefined ? pendingAction : (task.pendingAction ?? null)) : null
+  const since = task ? (pendingSince !== undefined ? pendingSince : (task.pendingSince ?? null)) : null
+  const tabs = diff ? <TaskPanelTabs view={view} onChange={setView} /> : null
+
+  const back = onBack ? (
+    <button type="button" onClick={onBack} aria-label="Back" className={NAV_BUTTON}>
+      <ChevronLeftIcon className="h-6 w-6" />
+    </button>
+  ) : backHref ? (
+    <Link href={backHref} className={NAV_BUTTON}>
+      <ChevronLeftIcon aria-label="Back" className="h-6 w-6" />
+    </Link>
+  ) : null
+
+  const screen = (
+    <div
+      className={cn(
+        "flex flex-col overflow-hidden overscroll-none bg-background",
+        fullscreen ? "fixed inset-x-0 top-0 z-[120]" : "relative h-full w-full",
+        className,
+      )}
+      style={
+        fullscreen
+          ? {
+              // The keyboard does not shrink `innerHeight` on iOS — only the visual viewport does.
+              height: vp.height ? `${vp.height}px` : "100dvh",
+              transform: vp.offsetTop ? `translateY(${vp.offsetTop}px)` : undefined,
+            }
+          : undefined
+      }
+    >
+      {/* ── Nav bar ── */}
+      <div
+        className="flex shrink-0 items-center gap-1 border-b border-border bg-card/60 px-1 pb-1.5 backdrop-blur-sm"
+        style={{ paddingTop: fullscreen ? "max(0.375rem, env(safe-area-inset-top))" : "0.375rem" }}
+      >
+        {back}
+        <div className="min-w-0 flex-1 pl-1">
+          <p className="truncate text-sm leading-tight font-semibold">{task?.title ?? "Conversation"}</p>
+          {task && <NavStatus task={task} action={action} since={since} />}
+        </div>
+
+        {task?.state === "in-review" && onAccept && (
+          <button
+            type="button"
+            disabled={action !== null}
+            onClick={onAccept}
+            className="flex h-9 shrink-0 touch-manipulation items-center gap-1.5 rounded-full bg-primary px-3.5 text-sm font-medium text-primary-foreground transition-transform active:scale-95 disabled:opacity-50"
+          >
+            {action === "accepting" ? <Loader2Icon className="h-4 w-4 animate-spin" /> : <CheckCircle2Icon className="h-4 w-4" />}
+            {action === "accepting" ? "Accepting…" : "Accept"}
+          </button>
+        )}
+
+        {details && task && (
+          <button type="button" onClick={() => setDetailsOpen(true)} aria-label="Details" className={NAV_BUTTON}>
+            <SlidersHorizontalIcon className="h-5 w-5" />
+          </button>
+        )}
+      </div>
+
+      {/* ── The conversation ── */}
+      {!task ? (
+        loading ? (
+          <p className="p-6 text-sm text-muted-foreground">Loading…</p>
+        ) : (
+          <p className="p-6 text-sm">This conversation does not exist, or it belongs to another project.</p>
+        )
+      ) : (
+        <>
+          {view === "diff" && diff ? diff(tabs) : session(tabs)}
+          {composer && <div style={{ paddingBottom: fullscreen && vp.keyboard === 0 ? "env(safe-area-inset-bottom)" : 0 }}>{composer}</div>}
+        </>
+      )}
+
+      {details && (
+        <DetailsSheet open={detailsOpen} onClose={() => setDetailsOpen(false)}>
+          {details}
+        </DetailsSheet>
+      )}
+    </div>
+  )
+
+  // Portalled: the screen must escape the host's scroll container and stacking context. Into the
+  // SpuntoProvider's overlay container when there is one, so the theme cascades.
+  if (!fullscreen) return screen
+  if (typeof document === "undefined") return null
+  return createPortal(screen, container ?? document.body)
+}

package/src/components/tasks/task-cockpit.tsx

@@ -0,0 +1,229 @@
+"use client"
+
+// A task's cockpit: everything about one conversation, filling whatever box it is given.
+//
+// The row in a list answers "what is waiting for me?". This answers "what is *happening*?" — which
+// wants a different shape: the session is not one section among several, it is the thing, and it
+// takes the room. Everything that is a *fact about* the task moves to the side (`details`), where
+// it can be glanced at without pushing the work off screen.
+//
+// A layout, not a data layer. Same split as `WorkerCockpit`: the panels that read the API are
+// slots the app fills with the package's own components —
+//
+//   session  → `TaskEventStream`       diff     → `TaskDiffPanel`
+//   composer → `TaskComposer`          details  → `TaskDetails` (with a `TaskMachine` inside)
+//
+// — and the cockpit owns the chrome between them: the top bar and its two actions, the
+// Session/Diff switch, and where each slot goes as the box narrows. `session` and `diff` are
+// render functions because the switch is drawn *inside* their header strip (two strips of chrome
+// above a transcript is one too many).
+//
+// It claims no page chrome of its own — it fills its parent — which is what lets the same code
+// live at its own URL and on the right-hand side of the org-wide conversation list. On a phone,
+// mount `TaskCockpitMobile` instead: a different screen, not this one squeezed.
+
+import { useState, type ReactNode } from "react"
+import { ArrowLeftIcon, CheckCircle2Icon, Loader2Icon, XCircleIcon } from "lucide-react"
+
+import { cn } from "../../utils"
+import { Button } from "../button"
+import { buttonVariants } from "../button-variants"
+import type { LinkRender } from "../workers/worker-card"
+import { TaskStateBadge, isLiveTaskState } from "./task-state"
+import type { TaskItem, TaskPendingAction } from "./types"
+
+export type TaskCockpitView = "session" | "diff"
+
+export interface TaskCockpitProps {
+  /** `undefined`/`null` → the loading line, or the not-found message once `loading` is false. */
+  task: TaskItem | null | undefined
+  loading?: boolean
+
+  /** Defaults to `task.pendingAction` — pass the app's prediction to react on the click's frame. */
+  pendingAction?: TaskPendingAction | null
+  pendingSince?: string | null
+  /** Accept, on a task in review. Omitted → no button. */
+  onAccept?: () => void
+  /** Drop, on any live task. Omitted → no button. */
+  onDrop?: () => void
+
+  /** Back arrow in the top bar. Omitted when the cockpit sits next to its own list. */
+  backHref?: string
+  render?: { link?: LinkRender }
+
+  /** Controlled Session/Diff switch. Uncontrolled (starting on `session`) when omitted. */
+  view?: TaskCockpitView
+  onViewChange?: (view: TaskCockpitView) => void
+
+  /** The session panel. Receives the Session/Diff switch to draw in its header. */
+  session: (tabs: ReactNode) => ReactNode
+  /** The diff panel. Omitted → no switch, the session alone. */
+  diff?: (tabs: ReactNode) => ReactNode
+  /** Under both panels: answering the agent is something a reviewer does *because* of the diff. */
+  composer?: ReactNode
+  /** The side column. */
+  details?: ReactNode
+  className?: string
+}
+
+const defaultLink: LinkRender = ({ href, className, children }) => (
+  <a href={href} className={className}>
+    {children}
+  </a>
+)
+
+/**
+ * The two ways of looking at a task, in the strip each panel already owns. A tab rather than a
+ * second column: "what it did" and "what is different now" are two frames of mind, and splitting
+ * the width would make both unreadable in a sidebar-sized column.
+ */
+export function TaskPanelTabs({
+  view,
+  onChange,
+  className,
+}: {
+  view: TaskCockpitView
+  onChange: (view: TaskCockpitView) => void
+  className?: string
+}) {
+  return (
+    <div role="tablist" className={cn("flex shrink-0 items-center gap-0.5 rounded-md bg-muted/60 p-0.5", className)}>
+      {(["session", "diff"] as const).map((value) => (
+        <button
+          key={value}
+          type="button"
+          role="tab"
+          aria-selected={view === value}
+          onClick={() => onChange(value)}
+          className={cn(
+            "rounded-[5px] px-2 py-0.5 text-[11px] font-medium capitalize transition-colors",
+            view === value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground",
+          )}
+        >
+          {value}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+/** The view state, controlled or not — shared with `TaskCockpitMobile`. @internal */
+export function useCockpitView(view: TaskCockpitView | undefined, onViewChange: ((view: TaskCockpitView) => void) | undefined) {
+  const [local, setLocal] = useState<TaskCockpitView>("session")
+  const current = view ?? local
+  const set = (next: TaskCockpitView) => {
+    if (view === undefined) setLocal(next)
+    onViewChange?.(next)
+  }
+  return [current, set] as const
+}
+
+export function TaskCockpit({
+  task,
+  loading = false,
+  pendingAction,
+  pendingSince,
+  onAccept,
+  onDrop,
+  backHref,
+  render,
+  view: viewProp,
+  onViewChange,
+  session,
+  diff,
+  composer,
+  details,
+  className,
+}: TaskCockpitProps) {
+  const [view, setView] = useCockpitView(viewProp, onViewChange)
+  const Link = render?.link ?? defaultLink
+
+  if (!task) {
+    return (
+      <div className={cn("p-6", className)}>
+        {loading ? (
+          <p className="text-sm text-muted-foreground">Loading…</p>
+        ) : (
+          <div className="space-y-3">
+            <p className="text-sm">This conversation does not exist, or it belongs to another project.</p>
+            {backHref && (
+              <Link href={backHref} className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground">
+                <ArrowLeftIcon className="h-3 w-3" /> Back
+              </Link>
+            )}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  const action = pendingAction !== undefined ? pendingAction : (task.pendingAction ?? null)
+  const since = pendingSince !== undefined ? pendingSince : (task.pendingSince ?? null)
+  const busy = action !== null
+  const live = isLiveTaskState(task.state)
+  const tabs = diff ? <TaskPanelTabs view={view} onChange={setView} /> : null
+
+  return (
+    <div className={cn("@container flex min-h-0 flex-1 flex-col overflow-hidden", className)}>
+      {/* ── Top bar ── */}
+      <div className="flex shrink-0 items-center justify-between gap-3 border-b border-border bg-card/60 px-4 py-2.5 backdrop-blur-sm @min-[48rem]:px-5">
+        <div className="flex min-w-0 items-center gap-2">
+          {backHref && (
+            <>
+              <Link href={backHref} className={cn(buttonVariants({ variant: "ghost", size: "icon" }), "h-8 w-8 shrink-0")}>
+                <ArrowLeftIcon className="h-4 w-4" />
+              </Link>
+              <div className="h-4 w-px shrink-0 bg-border" />
+            </>
+          )}
+          <h1 className="truncate text-sm font-semibold">{task.title}</h1>
+          <TaskStateBadge state={task.state} pendingAction={action} pendingSince={since} />
+        </div>
+
+        {live && (onAccept || onDrop) && (
+          <div className="flex shrink-0 items-center gap-2">
+            {task.state === "in-review" && onAccept && (
+              <Button size="sm" disabled={busy} onClick={onAccept} className="h-8 gap-1.5 px-3 text-xs">
+                {action === "accepting" ? <Loader2Icon className="h-3.5 w-3.5 animate-spin" /> : <CheckCircle2Icon className="h-3.5 w-3.5" />}
+                {action === "accepting" ? "Accepting…" : "Accept"}
+              </Button>
+            )}
+            {onDrop && (
+              <Button
+                variant="ghost"
+                size="sm"
+                disabled={busy}
+                onClick={onDrop}
+                className="h-8 gap-1.5 px-3 text-xs text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+              >
+                {action === "dropping" ? <Loader2Icon className="h-3.5 w-3.5 animate-spin" /> : <XCircleIcon className="h-3.5 w-3.5" />}
+                {action === "dropping" ? "Dropping…" : "Drop"}
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* ── Body: the session owns the room, the facts sit beside it ──
+          Side by side from 42rem of *cockpit* width, not 64rem: next to the org-wide list on a
+          laptop (1512 px screen − app sidebar − 320 px list ≈ 936 px) the cockpit is well under
+          64rem, and stacking there dropped the facts under the fold on the most common desktop.
+          The column narrows instead (288 → 320 → 384 px), so the session keeps ≥ 384 px. */}
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden @min-[42rem]:flex-row">
+        {/* `min-w-0` is load-bearing: a flex child's default min-width is its *content*, and this
+            column holds long mono lines and <pre> blocks. Without it the column refuses to shrink
+            and pushes the details column past the edge, where `overflow-hidden` clips it. */}
+        <div className="flex min-h-[280px] min-w-0 flex-1 flex-col border-border @min-[42rem]:border-r">
+          {view === "diff" && diff ? diff(tabs) : session(tabs)}
+          {composer}
+        </div>
+
+        {details && (
+          <aside className="max-h-[40%] w-full shrink-0 overflow-y-auto border-t border-border bg-card/40 @min-[42rem]:max-h-none @min-[42rem]:w-72 @min-[42rem]:border-t-0 @min-[64rem]:w-80 @min-[80rem]:w-96">
+            {details}
+          </aside>
+        )}
+      </div>
+    </div>
+  )
+}