conductor-oss 0.2.15 → 0.2.16

package/web/.next/standalone/packages/web/src/components/sessions/SessionOverview.tsx

@@ -0,0 +1,314 @@
+"use client";
+
+import { useMemo, useState, type ReactNode } from "react";
+import {
+  Check,
+  Clock3,
+  Copy,
+  DollarSign,
+  FolderGit2,
+  GitBranch,
+  ListChecks,
+  SquareArrowOutUpRight,
+  Timer,
+} from "lucide-react";
+import { Card, CardContent, CardHeader } from "@/components/ui/Card";
+import { Badge } from "@/components/ui/Badge";
+import type { DashboardSession } from "@/lib/types";
+import { AgentTileIcon } from "@/components/AgentTileIcon";
+import { usePreferences } from "@/hooks/usePreferences";
+import {
+  buildRemoteEditorUrl,
+  formatRemoteAuthority,
+  getRemoteEditorLabel,
+  supportsRemoteEditor,
+} from "@/lib/editorLinks";
+
+type SessionData = DashboardSession & {
+  agent?: string;
+  worktree?: string | null;
+  cost?: number;
+  task?: string;
+  prompt?: string;
+  attention?: string;
+  startedAt?: string;
+  finishedAt?: string;
+};
+
+interface SessionOverviewProps {
+  session: SessionData;
+}
+
+const statusVariant: Record<string, "success" | "warning" | "error" | "info" | "default"> = {
+  archived: "default",
+  running: "success",
+  working: "success",
+  done: "default",
+  merged: "success",
+  errored: "error",
+  stuck: "warning",
+  killed: "error",
+  needs_input: "warning",
+};
+
+function CopyText({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+
+  async function handleCopy() {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1400);
+    } catch {
+      // Clipboard access denied or unavailable — silently fail
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={() => void handleCopy()}
+      className="inline-flex items-center gap-1 font-mono text-[12px] text-[var(--text-normal)] transition-colors hover:text-[var(--text-strong)]"
+    >
+      <span className="truncate">{text}</span>
+      {copied ? <Check className="h-3 w-3 text-[var(--status-ready)]" /> : <Copy className="h-3 w-3 text-[var(--text-faint)]" />}
+    </button>
+  );
+}
+
+function formatDateTime(value?: string | null): string {
+  if (!value) return "-";
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) return "-";
+  return parsed.toLocaleString();
+}
+
+function getDuration(start?: string | null, finish?: string | null): string {
+  if (!start || !finish) return "-";
+  const startMs = new Date(start).getTime();
+  const finishMs = new Date(finish).getTime();
+  if (!Number.isFinite(startMs) || !Number.isFinite(finishMs) || finishMs < startMs) return "-";
+
+  const minutes = Math.floor((finishMs - startMs) / 60_000);
+  if (minutes < 1) return "<1m";
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  return `${hours}h ${minutes % 60}m`;
+}
+
+function parseCost(session: SessionData): number {
+  if (typeof session.cost === "number") return session.cost;
+  const metadata = session.metadata;
+  if (!metadata || typeof metadata !== "object") return 0;
+
+  const raw = metadata["cost"];
+  if (typeof raw !== "string") return 0;
+
+  try {
+    const parsed = JSON.parse(raw) as Record<string, unknown>;
+    const estimated = typeof parsed.estimatedCostUsd === "number" ? parsed.estimatedCostUsd : 0;
+    const total = typeof parsed.totalUSD === "number" ? parsed.totalUSD : 0;
+    // HUMAN-REVIEWED: display-only cost, no billing impact
+    return estimated ?? total;
+  } catch {
+    return 0;
+  }
+}
+
+function pickMetadata(session: SessionData, key: string): string | undefined {
+  const value = session.metadata[key];
+  if (typeof value === "string" && value.trim().length > 0) {
+    return value;
+  }
+  return undefined;
+}
+
+export function SessionOverview({ session }: SessionOverviewProps) {
+  const { preferences } = usePreferences();
+
+  const prompt = useMemo(
+    () => (
+      pickMetadata(session, "task")
+      ?? pickMetadata(session, "prompt")
+      ?? (typeof session.task === "string" ? session.task : "")
+      ?? (typeof session.prompt === "string" ? session.prompt : "")
+    ),
+    [session],
+  );
+
+  const agentName = useMemo(
+    () => (
+      pickMetadata(session, "agent")
+      ?? (typeof session.agent === "string" ? session.agent : "")
+    ),
+    [session],
+  );
+
+  const worktree = useMemo(
+    () => (
+      pickMetadata(session, "worktree")
+      ?? pickMetadata(session, "path")
+      ?? (typeof session.worktree === "string" ? session.worktree : "")
+    ),
+    [session],
+  );
+
+  const stats = useMemo(
+    () => ({
+      created: formatDateTime(session.createdAt),
+      started: formatDateTime(pickMetadata(session, "startedAt") ?? session.startedAt),
+      finished: formatDateTime(pickMetadata(session, "finishedAt") ?? session.finishedAt),
+      duration: getDuration(
+        pickMetadata(session, "startedAt") ?? session.startedAt,
+        pickMetadata(session, "finishedAt") ?? session.finishedAt,
+      ),
+      cost: parseCost(session),
+    }),
+    [session],
+  );
+
+  const remoteEditorUrl = useMemo(
+    () => buildRemoteEditorUrl({
+      editorId: preferences?.ide,
+      workspacePath: worktree,
+      remoteSshHost: preferences?.remoteSshHost,
+      remoteSshUser: preferences?.remoteSshUser,
+    }),
+    [preferences?.ide, preferences?.remoteSshHost, preferences?.remoteSshUser, worktree],
+  );
+
+  const remoteEditorLabel = useMemo(
+    () => (preferences && supportsRemoteEditor(preferences.ide) ? getRemoteEditorLabel(preferences.ide) : null),
+    [preferences],
+  );
+
+  const remoteAuthority = useMemo(
+    () => (
+      preferences?.remoteSshHost
+        ? formatRemoteAuthority(preferences.remoteSshHost, preferences.remoteSshUser)
+        : ""
+    ),
+    [preferences?.remoteSshHost, preferences?.remoteSshUser],
+  );
+
+  return (
+    <div className="space-y-3">
+      {prompt && (
+        <Card>
+          <CardHeader>
+            <ListChecks className="h-4 w-4 text-[var(--accent)]" />
+            <span className="text-[12px] font-semibold uppercase tracking-[0.08em] text-[var(--text-faint)]">
+              Task Brief
+            </span>
+          </CardHeader>
+          <CardContent>
+            <p className="whitespace-pre-wrap text-[13px] leading-relaxed text-[var(--text-normal)]">{prompt}</p>
+          </CardContent>
+        </Card>
+      )}
+
+      <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_300px]">
+        <div className="space-y-3">
+          {(session.branch || worktree) && (
+            <Card>
+              <CardHeader>
+                <GitBranch className="h-4 w-4 text-[var(--text-faint)]" />
+                <span className="text-[12px] font-semibold text-[var(--text-normal)]">Workspace</span>
+              </CardHeader>
+              <CardContent className="space-y-2">
+                {session.branch && (
+                  <div className="surface-panel flex items-center gap-2 rounded-[var(--radius-sm)] border px-2.5 py-2">
+                    <GitBranch className="h-3.5 w-3.5 text-[var(--text-faint)]" />
+                    <CopyText text={session.branch} />
+                  </div>
+                )}
+                {worktree && (
+                  <div className="surface-panel flex items-center gap-2 rounded-[var(--radius-sm)] border px-2.5 py-2">
+                    <FolderGit2 className="h-3.5 w-3.5 text-[var(--text-faint)]" />
+                    <CopyText text={worktree} />
+                  </div>
+                )}
+                {(remoteEditorUrl || remoteAuthority) && (
+                  <div className="surface-panel space-y-2 rounded-[var(--radius-sm)] border px-2.5 py-2">
+                    {remoteEditorUrl && remoteEditorLabel ? (
+                      <a
+                        href={remoteEditorUrl}
+                        rel="noreferrer"
+                        className="inline-flex items-center gap-1.5 text-[12px] font-medium text-[var(--accent)] transition-colors hover:text-[var(--text-strong)]"
+                      >
+                        <SquareArrowOutUpRight className="h-3.5 w-3.5" />
+                        <span>{`Open in ${remoteEditorLabel}`}</span>
+                      </a>
+                    ) : (
+                      <p className="text-[12px] text-[var(--text-muted)]">
+                        Remote deep links currently support VS Code and VS Code Insiders.
+                      </p>
+                    )}
+                    {remoteAuthority && (
+                      <p className="text-[11px] text-[var(--text-muted)]">
+                        Remote SSH: <span className="font-mono text-[var(--text-normal)]">{remoteAuthority}</span>
+                      </p>
+                    )}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          )}
+        </div>
+
+        <div className="space-y-3">
+        <Card>
+          <CardHeader>
+            <AgentTileIcon seed={{ label: agentName || "agent" }} className="h-6 w-6" />
+            <span className="text-[12px] font-semibold text-[var(--text-normal)]">Session Status</span>
+          </CardHeader>
+          <CardContent className="space-y-2.5">
+            <div className="flex flex-wrap gap-1.5">
+              <Badge variant={statusVariant[session.status] ?? "default"}>{session.status}</Badge>
+              {session.activity && <Badge variant="info">{session.activity}</Badge>}
+              {session.attention && <Badge variant="warning">{session.attention}</Badge>}
+            </div>
+            <p className="text-[13px] text-[var(--text-normal)]">{agentName || "Unknown agent"}</p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <Clock3 className="h-4 w-4 text-[var(--text-faint)]" />
+            <span className="text-[12px] font-semibold text-[var(--text-normal)]">Timeline</span>
+          </CardHeader>
+          <CardContent className="space-y-2 text-[12px] text-[var(--text-muted)]">
+            <Row icon={<Timer className="h-3.5 w-3.5" />} label="Created" value={stats.created} />
+            <Row icon={<Timer className="h-3.5 w-3.5" />} label="Started" value={stats.started} />
+            <Row icon={<Timer className="h-3.5 w-3.5" />} label="Finished" value={stats.finished} />
+            <Row icon={<Clock3 className="h-3.5 w-3.5" />} label="Duration" value={stats.duration} />
+            <Row
+              icon={<DollarSign className="h-3.5 w-3.5" />}
+              label="Estimated Cost"
+              value={stats.cost > 0 ? `$${stats.cost.toFixed(2)}` : "$0.00"}
+            />
+          </CardContent>
+        </Card>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Row({
+  icon,
+  label,
+  value,
+}: {
+  icon: ReactNode;
+  label: string;
+  value: string;
+}) {
+  return (
+    <div className="surface-panel flex items-center gap-2 rounded-[var(--radius-sm)] border px-2.5 py-2">
+      <span className="text-[var(--text-faint)]">{icon}</span>
+      <span className="min-w-[70px] text-[var(--text-faint)]">{label}</span>
+      <span className="ml-auto truncate text-right font-mono text-[11px] text-[var(--text-normal)]">{value}</span>
+    </div>
+  );
+}

package/web/.next/standalone/packages/web/src/components/ui/Badge.tsx

@@ -0,0 +1,33 @@
+import { cn } from "@/lib/cn";
+import type { ReactNode } from "react";
+
+type BadgeVariant = "default" | "success" | "warning" | "error" | "info" | "outline";
+
+const variants: Record<BadgeVariant, string> = {
+  default: "border-[var(--vk-border)] bg-[var(--vk-bg-panel)] text-[var(--vk-text-muted)]",
+  success: "border-transparent bg-transparent text-[var(--vk-green)]",
+  warning: "border-transparent bg-transparent text-[var(--vk-orange)]",
+  error: "border-transparent bg-transparent text-[var(--vk-red)]",
+  info: "border-transparent bg-transparent text-[var(--vk-text-muted)]",
+  outline: "border-[var(--vk-border)] bg-transparent text-[var(--vk-text-muted)]",
+};
+
+interface BadgeProps {
+  variant?: BadgeVariant;
+  className?: string;
+  children: ReactNode;
+}
+
+export function Badge({ variant = "default", className, children }: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1 rounded-[3px] border px-1.5 py-0.5 text-[11px] leading-none",
+        variants[variant],
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}

package/web/.next/standalone/packages/web/src/components/ui/Button.tsx

@@ -0,0 +1,53 @@
+import { cn } from "@/lib/cn";
+import { Slot } from "@radix-ui/react-slot";
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+
+type ButtonVariant = "default" | "primary" | "ghost" | "danger" | "outline";
+type ButtonSize = "sm" | "md" | "lg" | "icon";
+
+const variantStyles: Record<ButtonVariant, string> = {
+  default: "border-[var(--vk-border)] bg-[var(--vk-bg-panel)] text-[var(--vk-text-normal)] hover:bg-[var(--vk-bg-hover)]",
+  primary: "border-[var(--vk-border)] bg-[var(--vk-bg-active)] text-[var(--vk-text-normal)] hover:bg-[var(--vk-bg-hover)]",
+  ghost: "border-transparent bg-transparent text-[var(--vk-text-muted)] hover:bg-[var(--vk-bg-hover)] hover:text-[var(--vk-text-normal)]",
+  danger: "border-[var(--vk-red)]/40 bg-[color:color-mix(in_srgb,var(--vk-red)_18%,transparent)] text-[var(--vk-red)] hover:bg-[color:color-mix(in_srgb,var(--vk-red)_24%,transparent)]",
+  outline: "border-[var(--vk-border)] bg-transparent text-[var(--vk-text-normal)] hover:bg-[var(--vk-bg-hover)]",
+};
+
+const sizeStyles: Record<ButtonSize, string> = {
+  sm: "h-7 px-2.5 text-[12px] gap-1",
+  md: "h-8 px-3 text-[13px] gap-1.5",
+  lg: "h-9 px-3.5 text-[14px] gap-2",
+  icon: "h-8 w-8 p-0",
+};
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  asChild?: boolean;
+  children: ReactNode;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = "default", size = "md", asChild, className, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(
+          "inline-flex items-center justify-center rounded-[var(--radius-sm)] border font-medium",
+          "transition-colors duration-150",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--vk-orange)]",
+          "disabled:pointer-events-none disabled:opacity-45",
+          variantStyles[variant],
+          sizeStyles[size],
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+Button.displayName = "Button";

package/web/.next/standalone/packages/web/src/components/ui/Card.tsx

@@ -0,0 +1,35 @@
+import { cn } from "@/lib/cn";
+import { forwardRef, type HTMLAttributes } from "react";
+
+export const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("surface-card rounded-[var(--radius-md)] border", className)}
+      {...props}
+    />
+  ),
+);
+Card.displayName = "Card";
+
+export function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex items-center gap-2 border-b border-[var(--vk-border)] px-3 py-2", className)}
+      {...props}
+    />
+  );
+}
+
+export function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("px-3 py-2", className)} {...props} />;
+}
+
+export function CardFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex items-center gap-2 border-t border-[var(--vk-border)] px-3 py-2", className)}
+      {...props}
+    />
+  );
+}

package/web/.next/standalone/packages/web/src/components/ui/RunningDots.tsx

@@ -0,0 +1,22 @@
+import { cn } from "@/lib/cn";
+
+interface RunningDotsProps {
+  className?: string;
+}
+
+export function RunningDots({ className }: RunningDotsProps) {
+  return (
+    <span className={cn("inline-flex items-center gap-0.5", className)} aria-label="Working">
+      {[0, 1, 2].map((i) => (
+        <span
+          key={i}
+          className="h-1.5 w-1.5 rounded-full bg-[var(--status-working)]"
+          style={{
+            animation: "run-dot 1.4s ease-in-out infinite",
+            animationDelay: `${i * 0.16}s`,
+          }}
+        />
+      ))}
+    </span>
+  );
+}

package/web/.next/standalone/packages/web/src/components/ui/ScrollArea.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import { cn } from "@/lib/cn";
+
+export const ScrollArea = forwardRef<
+  HTMLDivElement,
+  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 = "ScrollArea";
+
+const ScrollBar = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.Scrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-px",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Thumb className="relative flex-1 rounded-full bg-[color:color-mix(in_srgb,var(--border-strong)_75%,transparent)] hover:bg-[var(--border-strong)]" />
+  </ScrollAreaPrimitive.Scrollbar>
+));
+ScrollBar.displayName = "ScrollBar";

package/web/.next/standalone/packages/web/src/components/ui/Separator.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import { cn } from "@/lib/cn";
+
+export const Separator = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      "shrink-0 bg-[var(--border-soft)]",
+      orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+      className,
+    )}
+    {...props}
+  />
+));
+Separator.displayName = "Separator";

package/web/.next/standalone/packages/web/src/components/ui/StatusDot.tsx

@@ -0,0 +1,30 @@
+import { cn } from "@/lib/cn";
+
+type StatusDotStatus = "running" | "done" | "error" | "idle";
+
+const statusColors: Record<StatusDotStatus, string> = {
+  running: "bg-[var(--status-working)] attention-glow",
+  done: "bg-[var(--status-ready)]",
+  error: "bg-[var(--status-error)]",
+  idle: "bg-[var(--status-idle)]",
+};
+
+interface StatusDotProps {
+  status: StatusDotStatus;
+  size?: "sm" | "md";
+  className?: string;
+}
+
+export function StatusDot({ status, size = "sm", className }: StatusDotProps) {
+  return (
+    <span
+      className={cn(
+        "inline-block shrink-0 rounded-full",
+        size === "sm" ? "h-2 w-2" : "h-2.5 w-2.5",
+        statusColors[status],
+        className,
+      )}
+      aria-label={status}
+    />
+  );
+}

package/web/.next/standalone/packages/web/src/components/ui/Tabs.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import { cn } from "@/lib/cn";
+
+export const Tabs = TabsPrimitive.Root;
+
+export const TabsList = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex max-w-full items-center gap-0.5 overflow-x-auto rounded-[3px] border border-[var(--vk-border)] bg-[var(--vk-bg-panel)] p-0.5 whitespace-nowrap [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = "TabsList";
+
+export const TabsTrigger = forwardRef<
+  HTMLButtonElement,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex shrink-0 items-center gap-1.5 rounded-[3px] px-2.5 py-1.5 text-[12px] text-[var(--vk-text-muted)]",
+      "data-[state=active]:bg-[var(--vk-bg-active)] data-[state=active]:text-[var(--vk-text-normal)]",
+      "hover:text-[var(--vk-text-normal)]",
+      "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--vk-orange)]",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = "TabsTrigger";
+
+export const TabsContent = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content ref={ref} className={cn("focus-visible:outline-none", className)} {...props} />
+));
+TabsContent.displayName = "TabsContent";

package/web/.next/standalone/packages/web/src/components/ui/Tooltip.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export const TooltipProvider = TooltipPrimitive.Provider;
+export const Tooltip = TooltipPrimitive.Root;
+export const TooltipTrigger = TooltipPrimitive.Trigger;
+
+export const TooltipContent = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 8, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 rounded-[var(--radius-xs)] border border-[var(--border-strong)] bg-[var(--bg-panel)] px-2 py-1.5",
+        "text-[11px] text-[var(--text-normal)] shadow-[var(--shadow-soft)]",
+        "animate-in fade-in-0 zoom-in-95",
+        className,
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = "TooltipContent";
+
+interface SimpleTooltipProps {
+  label: string;
+  side?: "top" | "right" | "bottom" | "left";
+  children: ReactNode;
+}
+
+export function SimpleTooltip({ label, side = "top", children }: SimpleTooltipProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipContent side={side}>{label}</TooltipContent>
+    </Tooltip>
+  );
+}