@multiclawcli/dashboard 0.3.1 → 0.4.0

package/package.json

@@ -1,13 +1,17 @@
 {
   "name": "@multiclawcli/dashboard",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "type": "module",
   "exports": {
-    "./server": {
-      "types": "./dist/server/index.d.ts",
-      "default": "./dist/server/index.js"
+    "./tui": {
+      "types": "./dist/tui.d.ts",
+      "default": "./dist/tui.js"
     }
   },
+  "files": [
+    "dist",
+    "package.json"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/shipengqi/multiclaw.git",
@@ -21,33 +25,20 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiclawcli/core": "0.3.1",
-    "ws": "^8.16.0",
-    "zustand": "^4.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
-    "tailwind-merge": "^2.2.0",
-    "lucide-react": "^0.400.0",
-    "@radix-ui/react-scroll-area": "^1.0.5",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-separator": "^1.0.3"
+    "@multiclawcli/core": "0.4.0",
+    "ink": "^8.0.0",
+    "react": "^19.3.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^4.2.0",
-    "vite": "^5.1.0",
-    "tailwindcss": "^3.4.0",
-    "tailwindcss-animate": "^1.0.7",
-    "autoprefixer": "^10.4.0",
-    "postcss": "^8.4.0",
+    "@types/node": "^26.6.4",
+    "@types/react": "^19.3.0",
     "typescript": "^5.4.0",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "@types/ws": "^8.5.0"
+    "vitest": "^4.1.11"
   },
   "scripts": {
-    "build": "vite build && tsc -p tsconfig.server.json",
-    "dev:client": "vite"
+    "build": "tsup",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage"
   }
 }

package/components.json

@@ -1,16 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "src/client/index.css",
-    "baseColor": "slate",
-    "cssVariables": true
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils"
-  }
-}

package/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>MultiClaw Dashboard</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/client/main.tsx"></script>
-  </body>
-</html>

package/postcss.config.js

@@ -1,3 +0,0 @@
-export default {
-  plugins: { tailwindcss: {}, autoprefixer: {} },
-}

package/src/client/App.tsx

@@ -1,96 +0,0 @@
-import React, { useState, useEffect, useRef } from "react"
-import { Badge } from "@/components/ui/badge"
-import { useWebSocket } from "./hooks/useWebSocket"
-import { useOrchestrationStore } from "./store/useOrchestrationStore"
-import { PipelineBar } from "./components/PipelineBar"
-import { LogPanel } from "./components/LogPanel"
-
-export function App() {
-  const apply = useOrchestrationStore((s) => s.apply)
-  const { name, requirement, running, success, totalDuration, stages, agents, preflightAgentIds, preflightBuffer } =
-    useOrchestrationStore()
-  const [selected, setSelected] = useState<string | null>(null)
-  const [elapsed, setElapsed] = useState(0)
-  const autoSelectedRef = useRef(false)
-
-  useWebSocket(apply)
-
-  useEffect(() => {
-    if (!running) { setElapsed(0); return }
-    const start = Date.now()
-    const id = setInterval(() => setElapsed(Date.now() - start), 1000)
-    return () => clearInterval(id)
-  }, [running])
-
-  // Auto-select leader the moment it appears as running
-  useEffect(() => {
-    if (autoSelectedRef.current) return
-    for (const [id, agent] of Object.entries(preflightBuffer)) {
-      if (agent.status === "running") {
-        setSelected(id)
-        autoSelectedRef.current = true
-        return
-      }
-    }
-  }, [preflightBuffer])
-
-  // Reset auto-select flag at the start of each new run
-  useEffect(() => {
-    if (running) autoSelectedRef.current = false
-  }, [running])
-
-  const leaderIds = preflightAgentIds.length > 0 ? preflightAgentIds : Object.keys(preflightBuffer)
-  const leaderAgents = preflightAgentIds.length > 0 ? agents : preflightBuffer
-
-  const hasPipelineBar = leaderIds.length > 0 || stages.length > 0
-
-  const statusBadge = running
-    ? <Badge className="bg-green-500 hover:bg-green-500/80">Running</Badge>
-    : success === undefined
-      ? <Badge variant="secondary">Waiting</Badge>
-      : success
-        ? <Badge className="bg-green-500 hover:bg-green-500/80">Done</Badge>
-        : <Badge variant="destructive">Failed</Badge>
-
-  const displayDuration = totalDuration != null ? totalDuration : running ? elapsed : null
-
-  return (
-    <div className="h-screen flex flex-col bg-background">
-      <header className="flex flex-col items-start justify-between px-6 py-3 border-b shrink-0 gap-2">
-        <div className="flex w-full items-center justify-between">
-          <h1 className="text-base font-semibold">
-            MultiClaw{name && <span className="text-muted-foreground font-normal"> · {name}</span>}
-          </h1>
-          <div className="flex items-center gap-3 text-sm">
-            {displayDuration != null && (
-              <span className="text-muted-foreground">{(displayDuration / 1000).toFixed(1)}s</span>
-            )}
-            {statusBadge}
-          </div>
-        </div>
-        {requirement && (
-          <p className="text-sm text-muted-foreground line-clamp-2">
-            {requirement}
-          </p>
-        )}
-      </header>
-
-      {hasPipelineBar && (
-        <div className="border-b px-4 py-3 shrink-0 overflow-x-auto">
-          <PipelineBar
-            leaderIds={leaderIds}
-            leaderAgents={leaderAgents}
-            stages={stages}
-            agents={agents}
-            onSelect={setSelected}
-            selectedId={selected}
-          />
-        </div>
-      )}
-
-      <div className="flex-1 overflow-hidden p-4">
-        <LogPanel agentId={selected} />
-      </div>
-    </div>
-  )
-}

package/src/client/components/AgentCard.tsx

@@ -1,60 +0,0 @@
-import React from "react"
-import { Card, CardContent } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { cn } from "@/lib/utils"
-
-type AgentStatus = "pending" | "running" | "retrying" | "success" | "failed" | "skipped"
-
-const STATUS_CONFIG: Record<AgentStatus, {
-  label: string
-  variant: "secondary" | "default" | "destructive" | "outline"
-  className?: string
-}> = {
-  pending:   { label: "pending",  variant: "secondary" },
-  running:   { label: "running",  variant: "default", className: "animate-pulse" },
-  retrying:  { label: "retrying", variant: "default", className: "animate-pulse bg-yellow-500 hover:bg-yellow-500/80" },
-  success:   { label: "done",     variant: "default",  className: "bg-green-500 hover:bg-green-500/80" },
-  failed:    { label: "failed",   variant: "destructive" },
-  skipped:   { label: "skipped",  variant: "outline" },
-}
-
-export function AgentCard({ agent, onClick, selected }: {
-  agent: { name: string; icon?: string; status: string; duration?: number; taskTitle?: string; model?: string }
-  onClick: () => void
-  selected?: boolean
-}) {
-  const cfg = STATUS_CONFIG[agent.status as AgentStatus] ?? STATUS_CONFIG.pending
-  return (
-    <Card
-      onClick={onClick}
-      className={cn("cursor-pointer hover:bg-accent transition-colors", selected && "bg-accent ring-1 ring-ring")}
-    >
-      <CardContent className="flex flex-col gap-2 p-3">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <span>{agent.icon ?? "-"}</span>
-            <div className="flex flex-col gap-0.5">
-              <span className="font-medium text-sm">{agent.name}</span>
-              {agent.taskTitle && (
-                <span className="text-xs text-muted-foreground">{agent.taskTitle}</span>
-              )}
-            </div>
-          </div>
-          <Badge variant={cfg.variant} className={cn(cfg.className)}>
-            {cfg.label}
-          </Badge>
-        </div>
-        <div className="flex items-center justify-between text-xs">
-          {agent.duration != null && (
-            <span className="text-muted-foreground">
-              {(agent.duration / 1000).toFixed(1)}s
-            </span>
-          )}
-          {agent.model && (
-            <span className="text-muted-foreground">{agent.model}</span>
-          )}
-        </div>
-      </CardContent>
-    </Card>
-  )
-}

package/src/client/components/LogPanel.tsx

@@ -1,43 +0,0 @@
-import React, { useEffect, useRef } from "react"
-import { useOrchestrationStore } from "../store/useOrchestrationStore"
-
-export function LogPanel({ agentId }: { agentId: string | null }) {
-  const agents = useOrchestrationStore((s) => s.agents)
-  const preflightBuffer = useOrchestrationStore((s) => s.preflightBuffer)
-  const scrollRef = useRef<HTMLDivElement>(null)
-  const userScrolled = useRef(false)
-  const agentState = agentId ? (agents[agentId] ?? preflightBuffer[agentId]) : undefined
-  const logs = agentState?.logs ?? ""
-  const agentName = agentState?.name ?? null
-
-  const handleScroll = () => {
-    const el = scrollRef.current
-    if (!el) return
-    userScrolled.current = el.scrollHeight - el.scrollTop - el.clientHeight > 50
-  }
-
-  useEffect(() => {
-    if (userScrolled.current) return
-    const el = scrollRef.current
-    if (el) el.scrollTop = el.scrollHeight
-  }, [logs])
-
-  return (
-    <div
-      ref={scrollRef}
-      onScroll={handleScroll}
-      className="h-full overflow-auto rounded-lg border bg-zinc-950 text-zinc-100"
-    >
-      <div className="p-4 font-mono text-sm">
-        {agentId ? (
-          <>
-            <p className="text-zinc-400 mb-3 text-xs">{agentName} logs</p>
-            <pre className="whitespace-pre-wrap leading-relaxed">{logs}</pre>
-          </>
-        ) : (
-          <p className="text-zinc-500">Select an agent to view live logs</p>
-        )}
-      </div>
-    </div>
-  )
-}

package/src/client/components/PipelineBar.tsx

@@ -1,234 +0,0 @@
-import React from "react"
-import { cn } from "@/lib/utils"
-import type { StageInfo } from "@multiclawcli/core"
-
-type Status = "pending" | "running" | "retrying" | "success" | "failed" | "skipped"
-
-const LEADER_BAR: Record<Status, string> = {
-  pending:  "bg-muted-foreground/20",
-  running:  "bg-violet-500 animate-pulse",
-  retrying: "bg-yellow-500 animate-pulse",
-  success:  "bg-violet-400",
-  failed:   "bg-destructive",
-  skipped:  "bg-muted-foreground/20",
-}
-
-const STAGE_BAR: Record<Status, string> = {
-  pending:  "bg-muted-foreground/20",
-  running:  "bg-blue-500 animate-pulse",
-  retrying: "bg-yellow-500 animate-pulse",
-  success:  "bg-green-500",
-  failed:   "bg-destructive",
-  skipped:  "bg-muted-foreground/20",
-}
-
-const NAME_COLOR: Record<Status, string> = {
-  pending:  "text-muted-foreground",
-  running:  "text-foreground",
-  retrying: "text-yellow-600",
-  success:  "text-foreground",
-  failed:   "text-destructive",
-  skipped:  "text-muted-foreground/50",
-}
-
-const STATUS_LABEL: Record<Status, string> = {
-  pending:  "pending",
-  running:  "running",
-  retrying: "retrying",
-  success:  "",
-  failed:   "failed",
-  skipped:  "skipped",
-}
-
-const STATUS_LABEL_COLOR: Record<Status, string> = {
-  pending:  "text-muted-foreground/50",
-  running:  "text-blue-500",
-  retrying: "text-yellow-500",
-  success:  "text-green-500",
-  failed:   "text-destructive",
-  skipped:  "text-muted-foreground/40",
-}
-
-const LEADER_LABEL_COLOR: Record<Status, string> = {
-  ...STATUS_LABEL_COLOR,
-  running: "text-violet-500",
-  success: "text-violet-400",
-}
-
-function stageAggregate(stage: StageInfo, agents: Record<string, { status: string }>): Status {
-  const ss = stage.agents.map((a) => (agents[a.id]?.status ?? "pending") as Status)
-  if (ss.some((s) => s === "failed")) return "failed"
-  if (ss.some((s) => s === "running" || s === "retrying")) return "running"
-  if (ss.every((s) => s === "success")) return "success"
-  if (ss.every((s) => s === "skipped")) return "skipped"
-  return "pending"
-}
-
-interface AgentInfo {
-  id: string
-  name: string
-  icon?: string
-  model?: string
-  taskTitle?: string
-  status: string
-  duration?: number
-}
-
-function AgentRow({
-  agent,
-  isSelected,
-  onClick,
-  labelColor,
-}: {
-  agent: AgentInfo
-  isSelected: boolean
-  onClick: () => void
-  labelColor: Record<Status, string>
-}) {
-  const status = agent.status as Status
-  return (
-    <button
-      onClick={onClick}
-      className={cn(
-        "flex items-center gap-1.5 w-full px-2 py-1.5 text-left transition-colors rounded",
-        "hover:bg-accent",
-        isSelected && "bg-accent",
-      )}
-    >
-      <span className="text-sm leading-none shrink-0">{agent.icon ?? "-"}</span>
-      <div className="flex-1 min-w-0">
-        <div className={cn("text-[11px] font-medium truncate", NAME_COLOR[status])}>
-          {agent.name}
-        </div>
-        {agent.taskTitle && (
-          <div className="text-[8px] text-muted-foreground truncate">
-            {agent.taskTitle}
-          </div>
-        )}
-        <div className="flex items-center justify-between gap-2 text-[9px]">
-          <div className={cn(labelColor[status])}>
-            {agent.duration != null
-              ? `${(agent.duration / 1000).toFixed(1)}s`
-              : STATUS_LABEL[status]}
-          </div>
-          {agent.model && (
-            <span className="text-muted-foreground text-[8px] truncate">
-              {agent.model}
-            </span>
-          )}
-        </div>
-      </div>
-    </button>
-  )
-}
-
-export function PipelineBar({
-  leaderIds,
-  leaderAgents,
-  stages,
-  agents,
-  onSelect,
-  selectedId,
-}: {
-  leaderIds: string[]
-  leaderAgents: Record<string, AgentInfo>
-  stages: StageInfo[]
-  agents: Record<string, AgentInfo>
-  onSelect: (id: string) => void
-  selectedId?: string | null
-}) {
-  const hasLeader = leaderIds.length > 0
-  const hasPipeline = stages.length > 0
-  const leaderRunning = leaderIds.some((id) => leaderAgents[id]?.status === "running")
-  if (!hasLeader && !hasPipeline) return null
-
-  return (
-    <div className="flex items-stretch gap-0 overflow-x-auto">
-      {/* Leader card */}
-      {hasLeader && leaderIds.map((id) => {
-        const agent = leaderAgents[id] ?? { id, name: id, status: "pending" }
-        const status = agent.status as Status
-        return (
-          <div key={id} className="shrink-0 w-[130px] rounded-md border bg-card overflow-hidden">
-            <div className={cn("h-1 w-full", LEADER_BAR[status])} />
-            <div className="px-2 pt-1 pb-0.5">
-              <span className="text-[9px] uppercase tracking-wide text-muted-foreground/70 font-semibold">
-                Leader
-              </span>
-            </div>
-            <AgentRow
-              agent={agent}
-              isSelected={selectedId === id}
-              onClick={() => onSelect(id)}
-              labelColor={LEADER_LABEL_COLOR}
-            />
-          </div>
-        )
-      })}
-
-      {/* Connector: "generating" dots while leader is running, "generated" arrow once pipeline is ready */}
-      {hasLeader && (
-        <div className="flex flex-col items-center justify-center shrink-0 px-2 gap-0.5 self-center">
-          {hasPipeline ? (
-            <>
-              <span className="text-[8px] uppercase tracking-wide text-muted-foreground/50">generated</span>
-              <div className="flex items-center">
-                <div className="w-5 h-px border-t border-dashed border-muted-foreground/30" />
-                <svg width="5" height="7" viewBox="0 0 5 7" className="text-muted-foreground/40 shrink-0">
-                  <path d="M0 0 L5 3.5 L0 7 Z" fill="currentColor" />
-                </svg>
-              </div>
-            </>
-          ) : leaderRunning ? (
-            <>
-              <span className="text-[8px] text-violet-400 animate-pulse">generating</span>
-              <div className="flex items-center gap-0.5">
-                {[0, 1, 2].map((i) => (
-                  <span
-                    key={i}
-                    className="w-1 h-1 rounded-full bg-violet-400 animate-bounce"
-                    style={{ animationDelay: `${i * 150}ms` }}
-                  />
-                ))}
-              </div>
-            </>
-          ) : null}
-        </div>
-      )}
-
-      {/* Pipeline stage cards */}
-      {hasPipeline && stages.map((stage, idx) => {
-        const ss = stageAggregate(stage, agents)
-        return (
-          <React.Fragment key={stage.stageIndex}>
-            {idx > 0 && (
-              <div className="flex items-center self-center shrink-0">
-                <div className="w-3 h-px bg-border" />
-                <svg width="5" height="7" viewBox="0 0 5 7" className="text-muted-foreground/40 shrink-0">
-                  <path d="M0 0 L5 3.5 L0 7 Z" fill="currentColor" />
-                </svg>
-              </div>
-            )}
-            <div className="shrink-0 w-[130px] rounded-md border bg-card overflow-hidden">
-              <div className={cn("h-1 w-full", STAGE_BAR[ss])} />
-              <div className="py-1">
-                {stage.agents.map((a) => {
-                  const agent = agents[a.id] ?? { id: a.id, name: a.name, icon: a.icon, status: "pending" }
-                  return (
-                    <AgentRow
-                      key={a.id}
-                      agent={agent}
-                      isSelected={selectedId === a.id}
-                      onClick={() => onSelect(a.id)}
-                      labelColor={STATUS_LABEL_COLOR}
-                    />
-                  )
-                })}
-              </div>
-            </div>
-          </React.Fragment>
-        )
-      })}
-    </div>
-  )
-}

package/src/client/components/ui/badge.tsx

@@ -1,28 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
-        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: { variant: "default" },
-  }
-)
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
-}
-
-export { Badge, badgeVariants }

package/src/client/components/ui/button.tsx

@@ -1,43 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: { variant: "default", size: "default" },
-  }
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
-  }
-)
-Button.displayName = "Button"
-
-export { Button, buttonVariants }

package/src/client/components/ui/card.tsx

@@ -1,22 +0,0 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn("rounded-xl border bg-card text-card-foreground shadow", className)}
-      {...props}
-    />
-  )
-)
-Card.displayName = "Card"
-
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-  )
-)
-CardContent.displayName = "CardContent"
-
-export { Card, CardContent }

package/src/client/components/ui/scroll-area.tsx

@@ -1,43 +0,0 @@
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
-import { cn } from "@/lib/utils"
-
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
-
-export { ScrollArea, ScrollBar }