banhaten 0.3.0 → 0.5.0

package/registry/components/approval-card.tsx

@@ -0,0 +1,401 @@
+"use client"
+
+import * as React from "react"
+import {
+  DownloadIcon,
+  ListTodoIcon,
+  Maximize2Icon,
+  TerminalIcon,
+  XIcon,
+} from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { RollingCount } from "@/components/ui/rolling-count"
+import {
+  TaskListHeader,
+  TaskListPreview,
+  TaskListRoot,
+} from "@/components/ui/task-list"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { useMotionEnd } from "@/hooks/use-motion-end"
+
+import { ApprovalFrame, type ApprovalCardBaseProps } from "./approval-frame"
+import { ApprovalQuestions } from "./approval-questions"
+
+type ApprovalPlanStep = {
+  id: string
+  title: string
+}
+
+/** `user` for a click, `timeout` when the plan countdown ran out. */
+type ApprovalSource = "user" | "timeout"
+
+type ApprovalPlanPayload = {
+  source: ApprovalSource
+}
+
+type ApprovalPlanLabels = {
+  /** Countdown copy. Receives the rolling seconds element. */
+  autoApprove: (seconds: React.ReactNode) => React.ReactNode
+  cancelAutoApprove: string
+  downloadPlan: string
+  expandPlan: string
+  less: string
+  more: (count: number) => string
+  todos: string
+}
+
+type ApprovalCommandProps = ApprovalCardBaseProps & {
+  command: string
+  cwd?: string
+  onApprove?: () => void
+  onReject?: () => void
+  rejectLabel?: string
+}
+
+type ApprovalPlanProps = ApprovalCardBaseProps & {
+  /**
+   * Opt-in countdown before the plan approves itself with `source: "timeout"`.
+   * Off by default so every approval waits for a person.
+   */
+  autoApproveSeconds?: number
+  labels?: Partial<ApprovalPlanLabels>
+  onApprove?: (payload: ApprovalPlanPayload) => void
+  /** Renders a download action in the header when provided. */
+  onDownload?: () => void
+  /** Renders an expand action in the header when provided. */
+  onExpand?: () => void
+  /** Secondary action that opens the full plan. */
+  onViewPlan?: () => void
+  plan: readonly ApprovalPlanStep[]
+  /** Plan steps shown before the "more" fold. */
+  planPreviewCount?: number
+  planSummary?: React.ReactNode
+  planTitle?: React.ReactNode
+  viewPlanLabel?: string
+}
+
+const defaultPlanLabels: ApprovalPlanLabels = {
+  autoApprove: (seconds) => <>Auto approve in {seconds}s</>,
+  cancelAutoApprove: "Cancel auto approve",
+  downloadPlan: "Download plan",
+  expandPlan: "Expand plan",
+  less: "Show less",
+  more: (count) => `${count} more`,
+  todos: "To-dos",
+}
+
+// The countdown counts real seconds, so its tick is a unit of time rather
+// than a theme value; the ring drains over the same tick.
+const TICK_MS = 1000
+
+/** Asks before the agent runs a shell command. */
+const ApprovalCommand = React.forwardRef<HTMLDivElement, ApprovalCommandProps>(
+  function ApprovalCommand(
+    {
+      approveLabel = "Run",
+      command,
+      cwd,
+      onApprove,
+      onReject,
+      rejectLabel = "Skip",
+      title = "Run this command?",
+      ...props
+    },
+    ref
+  ) {
+    return (
+      <ApprovalFrame
+        {...props}
+        approveLabel={approveLabel}
+        icon={<TerminalIcon />}
+        onApprove={() => onApprove?.()}
+        onSecondary={() => onReject?.()}
+        ref={ref}
+        secondaryLabel={rejectLabel}
+        title={title}
+        tone="warning"
+      >
+        <div data-slot="approval-card-command">
+          {cwd ? (
+            <div data-slot="approval-card-cwd" dir="ltr">
+              {cwd}
+            </div>
+          ) : null}
+          <pre data-slot="approval-card-code" dir="ltr">
+            {command}
+          </pre>
+        </div>
+      </ApprovalFrame>
+    )
+  }
+)
+
+type CountdownState = "active" | "leaving" | "gone"
+
+/**
+ * Counts down once per second and calls `onElapse` once at zero; `cancel`
+ * stops it early. Either way the element in `fadeRef` fades out before it
+ * unmounts, so a card the host keeps mounted never lingers on "0s" with a
+ * live cancel.
+ */
+function useAutoApproveCountdown(seconds: number, onElapse: () => void) {
+  const enabled = seconds > 0
+  const [remaining, setRemaining] = React.useState(seconds)
+  const [state, setState] = React.useState<CountdownState>(
+    enabled ? "active" : "gone"
+  )
+  const fadeRef = React.useRef<HTMLDivElement>(null)
+  const settled = React.useRef(false)
+  const onElapseRef = React.useRef(onElapse)
+  onElapseRef.current = onElapse
+
+  const settle = () => {
+    settled.current = true
+    setState("leaving")
+  }
+
+  // Restart the countdown when the configured duration changes.
+  React.useEffect(() => {
+    setRemaining(seconds)
+    settled.current = false
+    setState(enabled ? "active" : "gone")
+  }, [enabled, seconds])
+
+  // A new duration restarts the tick too, so its first second is a whole one.
+  React.useEffect(() => {
+    if (!enabled || state !== "active") return
+    const interval = window.setInterval(() => {
+      setRemaining((value) => Math.max(0, value - 1))
+    }, TICK_MS)
+    return () => window.clearInterval(interval)
+  }, [enabled, seconds, state])
+
+  React.useEffect(() => {
+    if (!enabled || state !== "active") return
+    if (remaining > 0 || settled.current) return
+    settle()
+    onElapseRef.current()
+  }, [enabled, remaining, state])
+
+  const current: CountdownState = enabled ? state : "gone"
+  useMotionEnd(fadeRef, current === "leaving", () => setState("gone"))
+
+  return {
+    cancel: () => {
+      if (current === "active") settle()
+    },
+    fadeRef,
+    remaining,
+    state: current,
+  }
+}
+
+/**
+ * Presents a short plan for sign-off as a pending to-do list, with an opt-in
+ * auto-approve countdown.
+ */
+const ApprovalPlan = React.forwardRef<HTMLDivElement, ApprovalPlanProps>(
+  function ApprovalPlan(
+    {
+      approveLabel = "Approve",
+      autoApproveSeconds = 0,
+      labels: labelOverrides,
+      onApprove,
+      onDownload,
+      onExpand,
+      onViewPlan,
+      plan,
+      planPreviewCount = 3,
+      planSummary,
+      planTitle,
+      title = "Plan overview",
+      viewPlanLabel = "View plan",
+      ...props
+    },
+    ref
+  ) {
+    const labels = { ...defaultPlanLabels, ...labelOverrides }
+    const countdown = useAutoApproveCountdown(autoApproveSeconds, () =>
+      onApprove?.({ source: "timeout" })
+    )
+
+    // A person decided, so the countdown must not approve on its own later.
+    const approve = () => {
+      countdown.cancel()
+      onApprove?.({ source: "user" })
+    }
+
+    // Opening the plan also stops a pending auto-approval.
+    const viewPlan = () => {
+      countdown.cancel()
+      onViewPlan?.()
+    }
+
+    return (
+      <ApprovalFrame
+        {...props}
+        approveLabel={approveLabel}
+        footerStart={
+          countdown.state === "gone" ? undefined : (
+            <div
+              aria-live="polite"
+              data-slot="approval-card-auto-approve"
+              data-state={countdown.state}
+              ref={countdown.fadeRef}
+            >
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      aria-label={labels.cancelAutoApprove}
+                      data-slot="approval-card-countdown"
+                      disabled={countdown.state !== "active"}
+                      onClick={countdown.cancel}
+                      type="button"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-slot="approval-card-countdown-pie"
+                        viewBox="0 0 24 24"
+                      >
+                        <circle
+                          cx="12"
+                          cy="12"
+                          data-slot="approval-card-countdown-track"
+                          fill="none"
+                          r="9"
+                          strokeWidth="var(--bh-icon-stroke-180)"
+                        />
+                        <circle
+                          cx="12"
+                          cy="12"
+                          data-slot="approval-card-countdown-fill"
+                          fill="none"
+                          pathLength={1}
+                          r="9"
+                          strokeDasharray={1}
+                          strokeLinecap="round"
+                          strokeWidth="var(--bh-icon-stroke-180)"
+                          style={{
+                            strokeDashoffset:
+                              countdown.remaining / autoApproveSeconds,
+                            transitionDuration: `${TICK_MS}ms`,
+                          }}
+                          transform="rotate(-90 12 12)"
+                        />
+                      </svg>
+                      <span
+                        aria-hidden="true"
+                        data-slot="approval-card-countdown-cancel"
+                      >
+                        <XIcon strokeWidth="var(--bh-icon-stroke-250)" />
+                      </span>
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent showShortcut={false} variant="dark">
+                    {labels.cancelAutoApprove}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+              <span data-slot="approval-card-auto-approve-label">
+                {labels.autoApprove(
+                  <RollingCount
+                    data-slot="approval-card-seconds"
+                    value={String(countdown.remaining)}
+                  />
+                )}
+              </span>
+            </div>
+          )
+        }
+        headerActions={
+          onDownload || onExpand ? (
+            <>
+              {onDownload ? (
+                <Button
+                  aria-label={labels.downloadPlan}
+                  onClick={onDownload}
+                  size="icon-xs"
+                  variant="ghost"
+                >
+                  <DownloadIcon />
+                </Button>
+              ) : null}
+              {onExpand ? (
+                <Button
+                  aria-label={labels.expandPlan}
+                  onClick={onExpand}
+                  size="icon-xs"
+                  variant="ghost"
+                >
+                  <Maximize2Icon />
+                </Button>
+              ) : null}
+            </>
+          ) : undefined
+        }
+        icon={<ListTodoIcon />}
+        onApprove={approve}
+        onSecondary={viewPlan}
+        ref={ref}
+        secondaryLabel={viewPlanLabel}
+        title={title}
+        tone="success"
+      >
+        {planTitle || planSummary ? (
+          <div data-slot="approval-card-plan">
+            {planTitle ? (
+              <div data-slot="approval-card-plan-title" dir="auto">
+                {planTitle}
+              </div>
+            ) : null}
+            {planSummary ? (
+              <div data-slot="approval-card-plan-summary" dir="auto">
+                {planSummary}
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+        <TaskListRoot surface="well">
+          <TaskListHeader count={plan.length}>{labels.todos}</TaskListHeader>
+          <TaskListPreview
+            items={plan.map((planStep) => ({
+              id: planStep.id,
+              label: planStep.title,
+            }))}
+            labels={{ less: labels.less, more: labels.more }}
+            visibleCount={planPreviewCount}
+          />
+        </TaskListRoot>
+      </ApprovalFrame>
+    )
+  }
+)
+
+export { ApprovalCommand, ApprovalFrame, ApprovalPlan, ApprovalQuestions }
+export type {
+  ApprovalCardBaseProps,
+  ApprovalFrameProps,
+  ApprovalTone,
+} from "./approval-frame"
+export type {
+  ApprovalAnswers,
+  ApprovalQuestion,
+  ApprovalQuestionsLabels,
+  ApprovalQuestionsPayload,
+  ApprovalQuestionsProps,
+} from "./approval-questions"
+export type {
+  ApprovalCommandProps,
+  ApprovalPlanLabels,
+  ApprovalPlanPayload,
+  ApprovalPlanProps,
+  ApprovalPlanStep,
+  ApprovalSource,
+}

package/registry/components/approval-frame.tsx

@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { CornerDownLeftIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+import "./approval-card.css"
+
+/** Tint of the header's icon tile. */
+type ApprovalTone = "info" | "warning" | "success"
+
+/** Props every ready-made approval card shares. */
+type ApprovalCardBaseProps = Omit<
+  React.ComponentProps<"div">,
+  "children" | "title"
+> & {
+  /** Primary action label. Each card has its own default. */
+  approveLabel?: string
+  /** Header copy. Each card has its own default. */
+  title?: React.ReactNode
+}
+
+type ApprovalFrameProps = Omit<React.ComponentProps<"div">, "title"> & {
+  /** Keeps the primary action disabled until the decision is complete. */
+  approveDisabled?: boolean
+  approveLabel: string
+  /** Start of the action row, such as a step counter or a countdown. */
+  footerStart?: React.ReactNode
+  /** Controls at the end of the header, such as download or expand. */
+  headerActions?: React.ReactNode
+  /** Header glyph, shown in a tile tinted by `tone`. */
+  icon: React.ReactNode
+  onApprove: () => void
+  onSecondary: () => void
+  secondaryLabel: string
+  title: React.ReactNode
+  tone: ApprovalTone
+}
+
+/**
+ * Layout every approval card shares: a tinted icon header, the body, and an
+ * action row with a secondary and a primary action. The ready-made cards
+ * compose it; compose it yourself for another kind of decision.
+ */
+const ApprovalFrame = React.forwardRef<HTMLDivElement, ApprovalFrameProps>(
+  function ApprovalFrame(
+    {
+      approveDisabled = false,
+      approveLabel,
+      children,
+      className,
+      footerStart,
+      headerActions,
+      icon,
+      onApprove,
+      onSecondary,
+      secondaryLabel,
+      title,
+      tone,
+      ...props
+    },
+    ref
+  ) {
+    return (
+      <div
+        data-slot="approval-card"
+        ref={ref}
+        className={cn("flex min-w-0 max-w-full flex-col", className)}
+        {...props}
+      >
+        <div data-slot="approval-card-header">
+          <span aria-hidden="true" data-slot="approval-card-icon" data-tone={tone}>
+            {icon}
+          </span>
+          <div data-slot="approval-card-title" dir="auto">
+            {title}
+          </div>
+          {headerActions ? (
+            <div data-slot="approval-card-header-actions">{headerActions}</div>
+          ) : null}
+        </div>
+
+        {children}
+
+        <div data-slot="approval-card-actions">
+          {/* Without a start slot, a spacer keeps the buttons at the end. */}
+          {footerStart ?? (
+            <span aria-hidden="true" data-slot="approval-card-spacer" />
+          )}
+          <div data-slot="approval-card-buttons">
+            <Button onClick={onSecondary} size="sm" variant="soft">
+              {secondaryLabel}
+            </Button>
+            <Button disabled={approveDisabled} onClick={onApprove} size="sm">
+              {approveLabel}
+              <CornerDownLeftIcon data-icon="inline-end" data-rtl-flip="true" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+
+export { ApprovalFrame }
+export type { ApprovalCardBaseProps, ApprovalFrameProps, ApprovalTone }