"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
import { ContextPopover } from "./ContextPopover";
import { ConfigureMenu } from "./ConfigureMenu";
import { ModelSelector } from "../models/ModelSelector";
import { HarnessSelector } from "../models/HarnessSelector";
import { PaperclipIcon, WorkspaceIcon, ArrowUpIcon, SpinnerIcon, } from "./icons";
/**
 * Composer toolbar — Zone 3 of the SessionComposer.
 *
 * Renders a two-tier toolbar following the frequency-of-interaction principle:
 *
 * **Tier 1 (always visible):** Workspace, Attach
 * **Tier 2 (behind Configure menu):** Agent, MCP, Skills, Secrets
 * **Right edge:** Runner Picker, Model Selector, Send
 *
 * Workspace precedes Attach because it is the higher-signal context setter
 * (defines the codebase scope for the session). Attach is supplementary.
 *
 * Separators are placed between conceptual groups using Gestalt proximity.
 */
export function ComposerToolbar({ disabled, isSubmitting, canSend, onSend, showAttach, attachmentCount, onAttachClick, showWorkspace, workspaceCount, workspaceContent, configureItems, configOpen, onConfigOpenChange, configActivePanel, onConfigActivePanelChange, renderConfigPanel, showHarnessSelector, harness, onHarnessChange, showModelSelector, modelId, onModelChange, }) {
    const hasTier1 = showAttach || showWorkspace;
    const hasTier2 = configureItems.length > 0;
    const showHarnessSeparate = showHarnessSelector && !showModelSelector;
    const hasExecParams = showHarnessSeparate || showModelSelector;
    const harnessLocked = harness !== undefined;
    return (_jsxs("div", { className: "flex items-center justify-between gap-2 border-t border-border-muted px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [showWorkspace && (_jsx(ContextPopover, { icon: _jsx(WorkspaceIcon, {}), label: "Workspace", count: workspaceCount, disabled: disabled, hideLabel: true, children: workspaceContent })), showAttach && (_jsxs("button", { type: "button", disabled: disabled, onClick: onAttachClick, className: cn("inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-xs transition-colors", "text-muted-foreground hover:text-foreground hover:bg-accent-hover", "disabled:pointer-events-none disabled:opacity-50"), "aria-label": "Attach files", children: [_jsx(PaperclipIcon, {}), _jsx("span", { className: "max-sm:hidden", children: "Attach" }), attachmentCount > 0 && (_jsx("span", { className: "rounded-full bg-primary-subtle px-1.5 text-[0.6rem] font-medium text-primary", children: attachmentCount }))] })), hasTier1 && hasTier2 && (_jsx("div", { className: "mx-0.5 h-4 w-px bg-border/50", "aria-hidden": "true" })), _jsx(ConfigureMenu, { open: configOpen, onOpenChange: onConfigOpenChange, activePanel: configActivePanel, onActivePanelChange: onConfigActivePanelChange, items: configureItems, renderPanel: renderConfigPanel, disabled: disabled }), (hasTier1 || hasTier2) && hasExecParams && (_jsx("div", { className: "mx-0.5 h-4 w-px bg-border/50", "aria-hidden": "true" })), showHarnessSeparate && (_jsx(HarnessSelector, { value: harness ?? "native", onValueChange: onHarnessChange, disabled: disabled })), showModelSelector && (_jsx(ModelSelector, { value: modelId, onValueChange: onModelChange, harness: harnessLocked ? harness : undefined, onHarnessResolved: harnessLocked ? undefined : onHarnessChange, disabled: disabled }))] }), _jsx("button", { type: "button", disabled: !canSend, onClick: onSend, className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-colors hover:bg-primary-hover disabled:pointer-events-none disabled:opacity-40", "aria-label": "Send message", children: isSubmitting ? _jsx(SpinnerIcon, {}) : _jsx(ArrowUpIcon, {}) })] }));
}
//# sourceMappingURL=ComposerToolbar.js.map