Agent 工作台

"use client";

import {
  ChevronDown,
  ChevronLeft,
  ChevronRight,
  CircleAlert,
  Clock,
  Copy,
  Diff,
  FileText,
  Folder,
  GitBranch,
  GitCommitHorizontal,
  GitPullRequest,
  Globe,
  Image,
  Laptop,
  ListChecks,
  ListTodo,
  MessageCircle,
  Mic,
  PanelLeft,
  PanelRight,
  Plus,
  Search,
  SquarePen,
  SquareTerminal,
  Zap,
} from "lucide-react";
import { type ComponentType, useState } from "react";
import {
  Composer,
  ComposerAccessChip,
  ComposerEffortSlider,
  ComposerIconButton,
  ComposerModelPicker,
  ComposerSendButton,
  ComposerTextarea,
  ComposerToolbar,
} from "@/components/motion/agent-composer";
import {
  Thread,
  ThreadActionBar,
  ThreadActionButton,
  ThreadCardButton,
  ThreadCollapse,
  ThreadCommandRow,
  ThreadDiffCard,
  ThreadDiffRow,
  ThreadInlineCode,
  ThreadMessage,
  ThreadThinking,
  ThreadToolCall,
  ThreadTurnHeader,
  ThreadUserMessage,
} from "@/components/motion/agent-thread";
import {
  useWorkbench,
  Workbench,
  WorkbenchHeader,
  WorkbenchMain,
  WorkbenchPanel,
  WorkbenchSidebar,
  WorkbenchSummaryCard,
  WorkbenchSummarySection,
} from "@/components/motion/agent-workbench";
import { cn } from "@/lib/utils";

const NAV_ITEMS = [
  { icon: SquarePen, label: "New task" },
  { icon: Clock, label: "Scheduled" },
  { icon: GitPullRequest, label: "Pull requests" },
  { icon: MessageCircle, label: "Chats" },
];

const PINNED_TASKS = [
  "Refactor auth middleware",
  "Fix flaky CI on macOS runners",
  "Update onboarding docs",
  "Investigate memory leak in worker pool",
];

const PROJECTS = [
  { name: "web-app", children: ["main", "feature/cache-keys"] },
  { name: "infra-scripts", children: ["deploy.sh"] },
];

const TOOL_ROWS: { icon: ComponentType<{ className?: string }>; label: string; shortcut?: string }[] = [
  { icon: ListTodo, label: "Side tasks", shortcut: "⌥⌘S" },
  { icon: Globe, label: "Browser", shortcut: "⌘T" },
  { icon: SquareTerminal, label: "Terminal" },
];

const SUGGESTED_FILES: { icon: ComponentType<{ className?: string }>; name: string }[] = [
  { icon: FileText, name: "useCacheKey.ts" },
  { icon: FileText, name: "webpack.config.js" },
  { icon: FileText, name: "ci.yml" },
  { icon: Image, name: "screenshot.png" },
  { icon: FileText, name: "README.md" },
];

const ICON_BUTTON =
  "flex h-7 w-7 items-center justify-center rounded-lg text-foreground/70 hover:bg-black/5 dark:hover:bg-white/10";

interface ToolbarProps {
  onToggleSummary: () => void;
}

function Toolbar({ onToggleSummary }: ToolbarProps) {
  const { toggleSidebar, togglePanel } = useWorkbench();

  return (
    <WorkbenchHeader
      leading={
        <div className="flex items-center gap-1.5 pl-3">
          <span className="flex items-center gap-1.5">
            <span className="h-2.5 w-2.5 rounded-full bg-red-500/80" />
            <span className="h-2.5 w-2.5 rounded-full bg-yellow-500/80" />
            <span className="h-2.5 w-2.5 rounded-full bg-green-500/80" />
          </span>
          <button
            type="button"
            onClick={toggleSidebar}
            aria-label="Toggle sidebar"
            className={cn(ICON_BUTTON, "ml-1")}
          >
            <PanelLeft className="h-4 w-4" />
          </button>
          <ChevronLeft className="h-4 w-4 text-muted-foreground" />
          <ChevronRight className="h-4 w-4 text-muted-foreground" />
        </div>
      }
      trailing={
        <div className="flex items-center gap-0.5 pr-3">
          <button
            type="button"
            onClick={onToggleSummary}
            aria-label="Toggle summary"
            className={ICON_BUTTON}
          >
            <ListChecks className="h-4 w-4" />
          </button>
          <button type="button" onClick={togglePanel} aria-label="Toggle panel" className={ICON_BUTTON}>
            <PanelRight className="h-4 w-4" />
          </button>
        </div>
      }
    >
      <div className="flex h-full items-center gap-1.5 pl-3 text-xs text-muted-foreground">
        <span>Investigate build cache misses</span>
        <span>···</span>
      </div>
    </WorkbenchHeader>
  );
}

function SidebarContent() {
  return (
    <div className="flex flex-col gap-5 px-3 pb-4">
      <div className="flex items-center justify-between px-1 pt-1">
        <span className="text-sm font-bold text-foreground">Workbench</span>
        <Search className="h-4 w-4 text-muted-foreground" />
      </div>

      <nav className="flex flex-col gap-0.5">
        {NAV_ITEMS.map(({ icon: Icon, label }) => (
          <div
            key={label}
            className="flex h-[30px] items-center gap-2 rounded-full px-2.5 text-sm text-foreground/80 hover:bg-black/5 dark:hover:bg-white/10"
          >
            <Icon className="h-4 w-4" />
            <span>{label}</span>
          </div>
        ))}
      </nav>

      <div className="flex flex-col gap-0.5">
        <span className="px-2.5 text-[11px] font-medium text-muted-foreground">Pinned</span>
        {PINNED_TASKS.map((title) => (
          <div
            key={title}
            className="truncate rounded-lg px-2.5 py-1.5 text-sm text-foreground/70 hover:bg-black/5 dark:hover:bg-white/10"
          >
            {title}
          </div>
        ))}
      </div>

      <div className="flex flex-col gap-0.5">
        <span className="px-2.5 text-[11px] font-medium text-muted-foreground">Projects</span>
        {PROJECTS.map((project) => (
          <div key={project.name}>
            <div className="flex items-center gap-2 rounded-lg px-2.5 py-1.5 text-sm text-foreground/80 hover:bg-black/5 dark:hover:bg-white/10">
              <Folder className="h-4 w-4" />
              <span>{project.name}</span>
            </div>
            <div className="flex flex-col gap-0.5 pl-8">
              {project.children.map((child) => (
                <span key={child} className="truncate py-0.5 text-xs text-muted-foreground">
                  {child}
                </span>
              ))}
            </div>
          </div>
        ))}
      </div>

      <div className="mt-2 flex items-center gap-2 px-2.5 py-1.5">
        <span className="h-6 w-6 shrink-0 rounded-full bg-gradient-to-br from-violet to-accent" />
        <span className="text-sm text-foreground/80">Acme Workspace</span>
      </div>
    </div>
  );
}

const EFFORT_LABELS = ["Minimal", "Low", "Standard", "High", "Max"];

/** Main column composed from the agent-thread and agent-composer blocks — the full app shape. */
function MainContent() {
  const [draft, setDraft] = useState("");
  const [effort, setEffort] = useState(3); // "High"
  const [logOpen, setLogOpen] = useState(true);

  return (
    <>
      <div className="flex-1 overflow-y-auto pt-[54px] pb-4">
        <Thread>
          <ThreadUserMessage>Read the handoff doc and prep the release.</ThreadUserMessage>

          <div className="group/turn flex flex-col">
            <ThreadTurnHeader open={logOpen} onOpenChange={setLogOpen}>
              Worked for 2m 4s
            </ThreadTurnHeader>
            <ThreadCollapse open={logOpen}>
              <ThreadThinking label="Thought for 8s">
                Validating the build first keeps the riskier deploy steps behind a checkpoint.
              </ThreadThinking>
              <ThreadToolCall icon={<Globe className="h-4 w-4" />}>
                Searched the web · 2 searches
              </ThreadToolCall>
            </ThreadCollapse>
            <ThreadMessage>
              <p>
                Pulled the handoff notes at <ThreadInlineCode>efd14fb</ThreadInlineCode> and staged
                the release diff below.
              </p>
            </ThreadMessage>
            <ThreadDiffCard
              icon={<SquarePen className="h-5 w-5" />}
              title="Edited 3 files"
              added={29}
              removed={5}
              actions={
                <>
                  <ThreadCardButton variant="ghost">Undo</ThreadCardButton>
                  <ThreadCardButton>Review</ThreadCardButton>
                </>
              }
            >
              <ThreadDiffRow path="backend/pom.xml" added={23} removed={0} />
              <ThreadDiffRow path="CHANGELOG.md" added={2} removed={0} />
            </ThreadDiffCard>
            <ThreadCommandRow icon={<SquareTerminal className="h-4 w-4" />} running>
              Running <span className="font-mono text-[13px]">./mvnw -q verify</span>
            </ThreadCommandRow>
            <ThreadActionBar timestamp="Thu 22:09">
              <ThreadActionButton aria-label="Copy">
                <Copy className="h-3.5 w-3.5" />
              </ThreadActionButton>
            </ThreadActionBar>
          </div>
        </Thread>
      </div>

      <div className="px-4 pb-4">
        <Composer>
          <ComposerTextarea
            value={draft}
            onChange={setDraft}
            placeholder="Describe your next change…"
            aria-label="Message"
          />
          <ComposerToolbar>
            <ComposerIconButton aria-label="Add files and more">
              <Plus className="h-4 w-4" />
            </ComposerIconButton>
            <ComposerAccessChip icon={<CircleAlert className="h-4 w-4" />}>
              Full access
            </ComposerAccessChip>
            <div className="ml-auto" />
            <ComposerModelPicker label={`5.6 · ${EFFORT_LABELS[effort]}`}>
              <div className="flex items-center justify-between px-2 pt-1 text-muted-foreground text-xs">
                <span>Reasoning effort</span>
                <Zap className="h-3.5 w-3.5" />
              </div>
              <div className="px-2 pt-1 pb-2">
                <ComposerEffortSlider
                  value={effort}
                  onChange={setEffort}
                  labels={EFFORT_LABELS}
                  aria-label="Reasoning effort"
                />
              </div>
            </ComposerModelPicker>
            <ComposerIconButton aria-label="Dictate">
              <Mic className="h-4 w-4" />
            </ComposerIconButton>
            <ComposerSendButton disabled={draft.trim().length === 0} />
          </ComposerToolbar>
        </Composer>
      </div>
    </>
  );
}

function PanelContent() {
  return (
    <div className="flex flex-col gap-4 px-3 py-3">
      <div className="flex flex-col gap-0.5">
        {TOOL_ROWS.map(({ icon: Icon, label, shortcut }) => (
          <div
            key={label}
            className="flex h-9 items-center justify-between rounded-lg px-2.5 hover:bg-black/5 dark:hover:bg-white/10"
          >
            <div className="flex items-center gap-2 text-sm text-foreground/80">
              <Icon className="h-4 w-4" />
              <span>{label}</span>
            </div>
            {shortcut ? (
              <kbd className="rounded border border-border bg-background px-1.5 py-0.5 text-[10px] text-muted-foreground">
                {shortcut}
              </kbd>
            ) : null}
          </div>
        ))}
      </div>

      <div className="flex flex-col">
        <span className="px-2.5 pb-1 text-[11px] font-medium text-muted-foreground">Suggested</span>
        {SUGGESTED_FILES.map(({ icon: Icon, name }, index) => (
          <div
            key={name}
            className={cn(
              "flex items-center gap-2 border-black/5 px-2.5 py-2 text-sm text-foreground/80 dark:border-white/10",
              index < SUGGESTED_FILES.length - 1 && "border-b",
            )}
          >
            <Icon className="h-4 w-4 text-muted-foreground" />
            <span className="truncate font-mono text-xs">{name}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

const SUMMARY_ROW_BASE = "flex h-7 w-full items-center gap-2 rounded-lg px-1.5 text-sm";
const SUMMARY_ROW = cn(SUMMARY_ROW_BASE, "hover:bg-black/5 dark:hover:bg-white/10");

function SummaryContent() {
  return (
    <WorkbenchSummarySection
      title="Environment"
      action={
        <button
          type="button"
          aria-label="Add"
          className="flex h-5 w-5 items-center justify-center rounded-md text-muted-foreground hover:bg-black/5 dark:hover:bg-white/10"
        >
          <Plus className="h-3.5 w-3.5" />
        </button>
      }
    >
      <button type="button" className={SUMMARY_ROW}>
        <Diff className="h-4 w-4 text-muted-foreground" />
        <span>Changes</span>
        <span className="ml-auto rounded-full bg-black/5 px-1.5 text-[10px] dark:bg-white/10">2</span>
      </button>
      <button type="button" className={SUMMARY_ROW}>
        <Laptop className="h-4 w-4 text-muted-foreground" />
        <span>Local</span>
        <ChevronDown className="ml-auto h-3.5 w-3.5 text-muted-foreground" />
      </button>
      <button type="button" className={SUMMARY_ROW}>
        <GitBranch className="h-4 w-4 text-muted-foreground" />
        <span>main</span>
        <ChevronDown className="ml-auto h-3.5 w-3.5 text-muted-foreground" />
      </button>
      <button type="button" className={SUMMARY_ROW}>
        <GitCommitHorizontal className="h-4 w-4 text-muted-foreground" />
        <span>Commit or push</span>
      </button>
      <div aria-disabled className={cn(SUMMARY_ROW_BASE, "text-muted-foreground/60")}>
        <GitPullRequest className="h-4 w-4 text-muted-foreground" />
        <span>Can&apos;t fetch pull request status</span>
      </div>
    </WorkbenchSummarySection>
  );
}

/** Desktop-wallpaper backdrop behind the (transparent) workbench shell. */
function Backdrop() {
  return (
    <>
      <div
        className="absolute inset-0 dark:hidden"
        style={{
          background:
            "radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.25), transparent 55%), " +
            "radial-gradient(ellipse at 80% 15%, rgba(236, 72, 153, 0.18), transparent 50%), " +
            "radial-gradient(ellipse at 50% 100%, rgba(45, 212, 191, 0.2), transparent 55%), " +
            "linear-gradient(180deg, #eef1f5, #e4e8ef)",
        }}
      />
      <div
        className="absolute inset-0 hidden dark:block"
        style={{
          background:
            "radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.28), transparent 55%), " +
            "radial-gradient(ellipse at 80% 15%, rgba(217, 70, 160, 0.22), transparent 50%), " +
            "radial-gradient(ellipse at 50% 100%, rgba(20, 184, 166, 0.22), transparent 55%), " +
            "linear-gradient(180deg, #17181d, #0e0f12)",
        }}
      />
    </>
  );
}

export function AgentWorkbenchPreview() {
  const [summaryOpen, setSummaryOpen] = useState(true);

  return (
    <div className="relative h-[560px] w-full overflow-hidden rounded-xl border border-border">
      <Backdrop />
      <div className="relative h-full w-full">
        <Workbench defaultPanelOpen className="h-full">
          <Toolbar onToggleSummary={() => setSummaryOpen((open) => !open)} />
          <WorkbenchSidebar>
            <SidebarContent />
          </WorkbenchSidebar>
          <WorkbenchMain>
            <MainContent />
            <WorkbenchSummaryCard open={summaryOpen}>
              <SummaryContent />
            </WorkbenchSummaryCard>
          </WorkbenchMain>
          <WorkbenchPanel>
            <PanelContent />
          </WorkbenchPanel>
        </Workbench>
      </div>
    </div>
  );
}

"use client";
// ui-lab-ten.vercel.app/components/blocks/agent-workbench

import { motion, useReducedMotion } from "motion/react";
import {
  createContext,
  type ReactNode,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import useMeasure from "react-use-measure";
import { EASE_OUT, EASE_OUT_CSS, SPRING_PANEL } from "@/lib/ease";
import { cn } from "@/lib/utils";
import { ResizeHandle } from "./resize-handle";

/** Height of the overlay toolbar (`WorkbenchHeader`), in pixels. */
export const HEADER_HEIGHT = 46;
/** Sidebar width when `defaultSidebarWidth` is unset, and its reset target. */
export const SIDEBAR_DEFAULT_WIDTH = 275;
export const SIDEBAR_MIN_WIDTH = 240;
export const SIDEBAR_MAX_WIDTH = 520;
/** Panel width when `defaultPanelWidth` is unset, and its reset target. */
export const PANEL_DEFAULT_WIDTH = 384;
export const PANEL_MIN_WIDTH = 320;
/** Floor kept for the main column — sidebar/panel can never squeeze past it. */
export const MAIN_MIN_WIDTH = 320;

// Static ceiling used for the panel's aria-valuemax before the container has
// been measured (first paint only — react-use-measure reports 0 until its
// ResizeObserver fires).
const PANEL_MAX_FALLBACK = 960;

export type WorkbenchLayoutMode = "desktop" | "tablet" | "mobile";

// Drag (or arrow-key nudge) a pane this far past its own minimum and it
// collapses instead of clamping at the minimum — the "drag past the edge to
// close" gesture native three-pane app shells use.
const COLLAPSE_MARGIN = 40;

const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));

interface WorkbenchContextValue {
  layoutMode: WorkbenchLayoutMode;
  sidebarOpen: boolean;
  panelOpen: boolean;
  toggleSidebar: () => void;
  togglePanel: () => void;
  setSidebarOpen: (open: boolean) => void;
  setPanelOpen: (open: boolean) => void;
  sidebarWidth: number;
  panelWidth: number;
  // Internal wiring for WorkbenchSidebar / WorkbenchPanel / WorkbenchHeader.
  // Not part of the public useWorkbench() contract.
  containerWidth: number;
  sidebarDefault: number;
  panelDefault: number;
  sidebarDragging: boolean;
  panelDragging: boolean;
  setSidebarDragging: (dragging: boolean) => void;
  setPanelDragging: (dragging: boolean) => void;
  resizeSidebar: (rawWidth: number) => void;
  resizePanel: (rawWidth: number) => void;
  resetSidebarWidth: () => void;
  resetPanelWidth: () => void;
}

const WorkbenchContext = createContext<WorkbenchContextValue | null>(null);

function useWorkbenchInternal(component: string): WorkbenchContextValue {
  const ctx = useContext(WorkbenchContext);
  if (!ctx) throw new Error(`${component} must be used inside <Workbench>`);
  return ctx;
}

/** Reads the workbench's open/close and width state. Must be used inside `<Workbench>`. */
export function useWorkbench() {
  const {
    layoutMode,
    sidebarOpen,
    panelOpen,
    toggleSidebar,
    togglePanel,
    setSidebarOpen,
    setPanelOpen,
    sidebarWidth,
    panelWidth,
  } = useWorkbenchInternal("useWorkbench");
  return {
    layoutMode,
    sidebarOpen,
    panelOpen,
    toggleSidebar,
    togglePanel,
    setSidebarOpen,
    setPanelOpen,
    sidebarWidth,
    panelWidth,
  };
}

export interface WorkbenchProps {
  sidebarOpen?: boolean;
  defaultSidebarOpen?: boolean;
  onSidebarOpenChange?: (open: boolean) => void;
  panelOpen?: boolean;
  defaultPanelOpen?: boolean;
  onPanelOpenChange?: (open: boolean) => void;
  /** Initial sidebar width, and its double-click/Enter reset target. Defaults to `SIDEBAR_DEFAULT_WIDTH`. */
  defaultSidebarWidth?: number;
  /** Initial panel width, and its double-click/Enter reset target. Defaults to `PANEL_DEFAULT_WIDTH`. */
  defaultPanelWidth?: number;
  /** Width at which the inline three-column layout begins. Defaults to 1200px. */
  desktopBreakpoint?: number;
  /** Width below which the workbench shows one task surface at a time. Defaults to 720px. */
  tabletBreakpoint?: number;
  className?: string;
  children?: ReactNode;
}

/**
 * Three-pane app shell root: a resizable sidebar, a flexible main column and
 * a resizable utility panel, laid out as a single flex row. Compose it with
 * `WorkbenchHeader` (an absolutely-positioned overlay), `WorkbenchSidebar`,
 * `WorkbenchMain` and `WorkbenchPanel` as children, in whatever DOM order —
 * only the header's position is order-independent by design.
 */
export function Workbench({
  sidebarOpen: sidebarOpenProp,
  defaultSidebarOpen = true,
  onSidebarOpenChange,
  panelOpen: panelOpenProp,
  defaultPanelOpen = false,
  onPanelOpenChange,
  defaultSidebarWidth,
  defaultPanelWidth,
  desktopBreakpoint = 1200,
  tabletBreakpoint = 720,
  className,
  children,
}: WorkbenchProps) {
  const [containerRef, bounds] = useMeasure();
  const containerWidth = bounds.width;
  const layoutMode: WorkbenchLayoutMode =
    containerWidth > 0 && containerWidth < tabletBreakpoint
      ? "mobile"
      : containerWidth > 0 && containerWidth < desktopBreakpoint
        ? "tablet"
        : "desktop";

  const sidebarDefault = defaultSidebarWidth ?? SIDEBAR_DEFAULT_WIDTH;
  const panelDefault = defaultPanelWidth ?? PANEL_DEFAULT_WIDTH;

  const [internalSidebarOpen, setInternalSidebarOpen] = useState(defaultSidebarOpen);
  const [internalPanelOpen, setInternalPanelOpen] = useState(defaultPanelOpen);
  const sidebarControlled = sidebarOpenProp !== undefined;
  const panelControlled = panelOpenProp !== undefined;
  const sidebarOpen = sidebarControlled ? sidebarOpenProp : internalSidebarOpen;
  const panelOpen = panelControlled ? panelOpenProp : internalPanelOpen;

  // Which side pane the user opened last — the other one yields when the
  // desktop container can't fit both (see the auto-yield effect below).
  const lastOpenedRef = useRef<"sidebar" | "panel">("sidebar");

  const setSidebarOpen = useCallback(
    (open: boolean) => {
      if (open) lastOpenedRef.current = "sidebar";
      if (open && layoutMode !== "desktop") {
        if (!panelControlled) setInternalPanelOpen(false);
        onPanelOpenChange?.(false);
      }
      if (!sidebarControlled) setInternalSidebarOpen(open);
      onSidebarOpenChange?.(open);
    },
    [
      layoutMode,
      panelControlled,
      onPanelOpenChange,
      sidebarControlled,
      onSidebarOpenChange,
    ],
  );
  const setPanelOpen = useCallback(
    (open: boolean) => {
      if (open) lastOpenedRef.current = "panel";
      if (open && layoutMode !== "desktop") {
        if (!sidebarControlled) setInternalSidebarOpen(false);
        onSidebarOpenChange?.(false);
      }
      if (!panelControlled) setInternalPanelOpen(open);
      onPanelOpenChange?.(open);
    },
    [
      layoutMode,
      sidebarControlled,
      onSidebarOpenChange,
      panelControlled,
      onPanelOpenChange,
    ],
  );
  const toggleSidebar = useCallback(
    () => setSidebarOpen(!sidebarOpen),
    [setSidebarOpen, sidebarOpen],
  );
  const togglePanel = useCallback(() => setPanelOpen(!panelOpen), [setPanelOpen, panelOpen]);

  const [sidebarWidth, setSidebarWidth] = useState(sidebarDefault);
  const [panelWidth, setPanelWidth] = useState(panelDefault);
  const [sidebarDragging, setSidebarDragging] = useState(false);
  const [panelDragging, setPanelDragging] = useState(false);

  const resizeSidebar = useCallback(
    (rawWidth: number) => {
      if (rawWidth < SIDEBAR_MIN_WIDTH - COLLAPSE_MARGIN) {
        setSidebarOpen(false);
        return;
      }
      const spaceLimit =
        containerWidth > 0 ? containerWidth - MAIN_MIN_WIDTH : SIDEBAR_MAX_WIDTH;
      const max = Math.max(SIDEBAR_MIN_WIDTH, Math.min(SIDEBAR_MAX_WIDTH, spaceLimit));
      setSidebarWidth(clamp(rawWidth, SIDEBAR_MIN_WIDTH, max));
    },
    [setSidebarOpen, containerWidth],
  );

  const resizePanel = useCallback(
    (rawWidth: number) => {
      if (rawWidth < PANEL_MIN_WIDTH - COLLAPSE_MARGIN) {
        setPanelOpen(false);
        return;
      }
      const reserved = sidebarOpen ? sidebarWidth : 0;
      const max =
        containerWidth > 0
          ? Math.max(PANEL_MIN_WIDTH, containerWidth - reserved - MAIN_MIN_WIDTH)
          : PANEL_MAX_FALLBACK;
      setPanelWidth(clamp(rawWidth, PANEL_MIN_WIDTH, max));
    },
    [setPanelOpen, sidebarOpen, sidebarWidth, containerWidth],
  );

  const resetSidebarWidth = useCallback(() => setSidebarWidth(sidebarDefault), [sidebarDefault]);
  const resetPanelWidth = useCallback(() => setPanelWidth(panelDefault), [panelDefault]);

  const previousLayoutModeRef = useRef<WorkbenchLayoutMode>(layoutMode);

  // A narrow workbench starts with its navigation out of the way. This is an
  // intentional mode transition rather than a width-fitting fallback: the
  // panel remains open when an application controls it, and can be shown as an
  // overlay without squeezing the task surface.
  useEffect(() => {
    const previous = previousLayoutModeRef.current;
    previousLayoutModeRef.current = layoutMode;
    if (layoutMode === "desktop" || previous === layoutMode) return;
    setSidebarOpen(false);
  }, [layoutMode, setSidebarOpen]);

  // Re-clamp (never collapse) whenever the measured container shrinks, so a
  // narrower window can't leave the sidebar/panel wider than there's room for.
  useEffect(() => {
    if (containerWidth <= 0 || layoutMode !== "desktop") return;
    setSidebarWidth((w) =>
      clamp(w, SIDEBAR_MIN_WIDTH, Math.max(SIDEBAR_MIN_WIDTH, containerWidth - MAIN_MIN_WIDTH)),
    );
  }, [containerWidth, layoutMode]);

  useEffect(() => {
    if (containerWidth <= 0 || layoutMode !== "desktop") return;
    const reserved = sidebarOpen ? sidebarWidth : 0;
    setPanelWidth((w) =>
      clamp(w, PANEL_MIN_WIDTH, Math.max(PANEL_MIN_WIDTH, containerWidth - reserved - MAIN_MIN_WIDTH)),
    );
  }, [containerWidth, layoutMode, sidebarOpen, sidebarWidth]);

  // Both side panes plus the main floor can exceed a narrow container even at
  // their minimum widths. When they do, the pane opened less recently yields —
  // the narrow-window rule desktop three-pane shells use — so opening one side
  // swaps the other out instead of crushing the main column.
  useEffect(() => {
    if (layoutMode !== "desktop" || containerWidth <= 0 || !sidebarOpen || !panelOpen) return;
    if (sidebarWidth + panelWidth + MAIN_MIN_WIDTH <= containerWidth) return;
    if (lastOpenedRef.current === "panel") setSidebarOpen(false);
    else setPanelOpen(false);
  }, [layoutMode, containerWidth, sidebarOpen, panelOpen, sidebarWidth, panelWidth, setSidebarOpen, setPanelOpen]);

  const value = useMemo<WorkbenchContextValue>(
    () => ({
      layoutMode,
      sidebarOpen,
      panelOpen,
      toggleSidebar,
      togglePanel,
      setSidebarOpen,
      setPanelOpen,
      sidebarWidth,
      panelWidth,
      containerWidth,
      sidebarDefault,
      panelDefault,
      sidebarDragging,
      panelDragging,
      setSidebarDragging,
      setPanelDragging,
      resizeSidebar,
      resizePanel,
      resetSidebarWidth,
      resetPanelWidth,
    }),
    [
      layoutMode,
      sidebarOpen,
      panelOpen,
      toggleSidebar,
      togglePanel,
      setSidebarOpen,
      setPanelOpen,
      sidebarWidth,
      panelWidth,
      containerWidth,
      sidebarDefault,
      panelDefault,
      sidebarDragging,
      panelDragging,
      resizeSidebar,
      resizePanel,
      resetSidebarWidth,
      resetPanelWidth,
    ],
  );

  return (
    <WorkbenchContext.Provider value={value}>
      <div
        ref={containerRef}
        data-layout-mode={layoutMode}
        className={cn("relative isolate flex h-full min-h-0 w-full overflow-hidden", className)}
      >
        {children}
      </div>
    </WorkbenchContext.Provider>
  );
}

export interface WorkbenchSidebarProps {
  className?: string;
  children?: ReactNode;
}

/** Translucent, resizable left pane. Drag its right-edge handle past the
 * minimum to collapse it; double-click the handle to reset its width. */
export function WorkbenchSidebar({ className, children }: WorkbenchSidebarProps) {
  const {
    layoutMode,
    sidebarOpen,
    sidebarWidth,
    sidebarDragging,
    containerWidth,
    resizeSidebar,
    resetSidebarWidth,
    setSidebarDragging,
    setSidebarOpen,
  } = useWorkbenchInternal("WorkbenchSidebar");
  const reduce = useReducedMotion() ?? false;
  const ariaMax =
    containerWidth > 0
      ? Math.max(SIDEBAR_MIN_WIDTH, Math.min(SIDEBAR_MAX_WIDTH, containerWidth - MAIN_MIN_WIDTH))
      : SIDEBAR_MAX_WIDTH;

  if (layoutMode !== "desktop") {
    const mobile = layoutMode === "mobile";
    return (
      <>
        {sidebarOpen ? (
          <button
            type="button"
            aria-label="Close sidebar overlay"
            className="absolute inset-x-0 bottom-0 top-[46px] z-10 cursor-default bg-[var(--wb-overlay-scrim)]"
            onClick={() => setSidebarOpen(false)}
          />
        ) : null}
        <motion.aside
          inert={!sidebarOpen}
          aria-label="Navigation overlay"
          initial={false}
          animate={{ x: sidebarOpen ? "0%" : "-100%", opacity: sidebarOpen ? 1 : 0 }}
          transition={{ x: reduce ? { duration: 0 } : SPRING_PANEL, opacity: reduce ? { duration: 0.15, ease: EASE_OUT } : SPRING_PANEL }}
          className={cn(
            "absolute inset-y-0 left-0 z-20 overflow-hidden bg-[var(--wb-surface-translucent)] backdrop-blur-xl",
            mobile ? "w-full" : "max-w-[min(86vw,520px)]",
            className,
          )}
          style={mobile ? undefined : { width: sidebarWidth }}
        >
          <div className="h-full overflow-y-auto pt-[46px]">{children}</div>
        </motion.aside>
      </>
    );
  }

  return (
    <motion.aside
      inert={!sidebarOpen}
      initial={false}
      animate={{ width: sidebarOpen ? sidebarWidth : 0, opacity: sidebarOpen ? 1 : 0 }}
      transition={{
        width: sidebarDragging || reduce ? { duration: 0 } : SPRING_PANEL,
        opacity: reduce ? { duration: 0.15, ease: EASE_OUT } : SPRING_PANEL,
      }}
      className={cn(
        // overflow stays visible so the resize handle can straddle the edge
        // (z-10 keeps that overhang hit-testable above the main column);
        // clipping happens one div down.
        "relative isolate z-10 shrink-0 overflow-visible bg-[var(--wb-surface-translucent)] backdrop-blur-xl",
        className,
      )}
    >
      <div className="absolute inset-0 overflow-hidden">
        {/* Content is laid out at the pane's resting width so open/close only
            clips it instead of re-wrapping every line mid-animation. */}
        <div
          className="h-full overflow-y-auto pt-[46px] [mask-image:linear-gradient(to_bottom,transparent_0,black_16px,black_calc(100%-24px),transparent_100%)]"
          style={{ width: sidebarWidth }}
        >
          {children}
        </div>
      </div>
      {sidebarOpen ? (
        <ResizeHandle
          edge="right"
          value={sidebarWidth}
          min={SIDEBAR_MIN_WIDTH}
          max={ariaMax}
          onResize={resizeSidebar}
          onReset={resetSidebarWidth}
          onDraggingChange={setSidebarDragging}
          aria-label="Resize sidebar"
        />
      ) : null}
    </motion.aside>
  );
}

export interface WorkbenchMainProps {
  className?: string;
  children?: ReactNode;
}

/** Opaque, flexible main column — takes up whatever width the sidebar/panel leave behind. */
export function WorkbenchMain({ className, children }: WorkbenchMainProps) {
  const { layoutMode, sidebarOpen, panelOpen } = useWorkbenchInternal("WorkbenchMain");
  return (
    <main
      inert={layoutMode !== "desktop" && (sidebarOpen || panelOpen)}
      className={cn(
        "relative flex min-h-0 min-w-0 flex-1 flex-col bg-[var(--wb-surface)]",
        className,
      )}
    >
      <div className="flex min-h-0 flex-1 flex-col pt-[46px]">{children}</div>
    </main>
  );
}

export interface WorkbenchPanelProps {
  className?: string;
  children?: ReactNode;
}

/** Opaque, resizable right pane, squeezed in-flow (not floated). Drag its
 * left-edge handle past the minimum to collapse it; double-click to reset. */
export function WorkbenchPanel({ className, children }: WorkbenchPanelProps) {
  const {
    layoutMode,
    panelOpen,
    panelWidth,
    panelDragging,
    sidebarOpen,
    sidebarWidth,
    containerWidth,
    resizePanel,
    resetPanelWidth,
    setPanelDragging,
    setPanelOpen,
  } = useWorkbenchInternal("WorkbenchPanel");
  const reduce = useReducedMotion() ?? false;
  const reserved = sidebarOpen ? sidebarWidth : 0;
  const ariaMax =
    containerWidth > 0
      ? Math.max(PANEL_MIN_WIDTH, containerWidth - reserved - MAIN_MIN_WIDTH)
      : PANEL_MAX_FALLBACK;

  if (layoutMode !== "desktop") {
    const mobile = layoutMode === "mobile";
    return (
      <>
        {panelOpen ? (
          <button
            type="button"
            aria-label="Close artifact overlay"
            className="absolute inset-x-0 bottom-0 top-[46px] z-10 cursor-default bg-[var(--wb-overlay-scrim)]"
            onClick={() => setPanelOpen(false)}
          />
        ) : null}
        <motion.aside
          inert={!panelOpen}
          aria-label="Artifact overlay"
          initial={false}
          animate={{ x: panelOpen ? "0%" : "100%", opacity: panelOpen ? 1 : 0 }}
          transition={{ x: reduce ? { duration: 0 } : SPRING_PANEL, opacity: reduce ? { duration: 0.15, ease: EASE_OUT } : SPRING_PANEL }}
          className={cn(
            "absolute inset-y-0 right-0 z-20 overflow-hidden border-[var(--wb-border-subtle)] border-l bg-[var(--wb-surface)]",
            mobile ? "w-full" : "max-w-[min(86vw,560px)]",
            className,
          )}
          style={mobile ? undefined : { width: panelWidth }}
        >
          <div className="h-full overflow-y-auto pt-[46px]">{children}</div>
        </motion.aside>
      </>
    );
  }

  return (
    <motion.aside
      inert={!panelOpen}
      initial={false}
      animate={{ width: panelOpen ? panelWidth : 0, opacity: panelOpen ? 1 : 0 }}
      transition={{
        width: panelDragging || reduce ? { duration: 0 } : SPRING_PANEL,
        opacity: reduce ? { duration: 0.15, ease: EASE_OUT } : SPRING_PANEL,
      }}
      className={cn(
        "relative isolate z-10 shrink-0 overflow-visible border-[var(--wb-border-subtle)] border-l bg-[var(--wb-surface)]",
        className,
      )}
    >
      <div className="absolute inset-0 overflow-hidden">
        <div className="h-full overflow-y-auto pt-[46px]" style={{ width: panelWidth }}>
          {children}
        </div>
      </div>
      {panelOpen ? (
        <ResizeHandle
          edge="left"
          value={panelWidth}
          min={PANEL_MIN_WIDTH}
          max={ariaMax}
          onResize={resizePanel}
          onReset={resetPanelWidth}
          onDraggingChange={setPanelDragging}
          aria-label="Resize panel"
        />
      ) : null}
    </motion.aside>
  );
}

export interface WorkbenchHeaderProps {
  /** Rendered above the sidebar; its wrapper width tracks `sidebarWidth` while open. */
  leading?: ReactNode;
  trailing?: ReactNode;
  children?: ReactNode;
  className?: string;
}

/** Full-width, 46px overlay toolbar. Absolutely positioned so it sits above
 * the sidebar/main/panel row regardless of where it's placed in the DOM. */
export function WorkbenchHeader({ leading, trailing, children, className }: WorkbenchHeaderProps) {
  const { layoutMode, sidebarOpen, sidebarWidth, sidebarDragging } = useWorkbenchInternal("WorkbenchHeader");
  const reduce = useReducedMotion() ?? false;

  return (
    <header
      className={cn(
        "pointer-events-none absolute inset-x-0 top-0 z-30 flex h-[46px] items-center",
        className,
      )}
    >
      <div
        className="pointer-events-auto flex h-full shrink-0 items-center overflow-hidden"
        style={{
          width: layoutMode === "desktop" && sidebarOpen ? sidebarWidth : "auto",
          transitionProperty: "width",
          transitionDuration: sidebarDragging || reduce ? "0ms" : "300ms",
          transitionTimingFunction: EASE_OUT_CSS,
        }}
      >
        {leading}
      </div>
      <div className="pointer-events-auto min-w-0 flex-1">{children}</div>
      <div className="pointer-events-auto flex shrink-0 items-center">{trailing}</div>
    </header>
  );
}

export { WorkbenchSummaryCard, WorkbenchSummarySection } from "./summary-card";