root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FN-888): implement actions dropdown in QuickEntryBox

Browse Source 
- Refactor QuickEntryBox to use an actions dropdown (⋯) for advanced controls (deps, models, save)
- Move dependency picker and model selection (plan/executor/validator) into nested dropdown menus
- Add Plan (lightbulb) and Subtask (list) quick-action buttons to the input bar
- Update ListView and QuickEntryBox tests for new dropdown-driven UI
- Add CSS styles for dropdown menus, nested submenus, and action buttons
- Update AGENTS.md and README.md docs for the new QuickEntryBox layout
This commit is contained in:
gsxdsm
2026-04-04 23:48:00 -07:00
parent 7b59df34fb
commit 559cbf6cdb
6 changed files with 625 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

501
packages/dashboard/app/components/QuickEntryBox.tsx
View File

@@ -4,7 +4,7 @@ import type { ToastType } from "../hooks/useToast";
import type { Task, TaskCreateInput, Settings } from "@fusion/core";
import type { ModelInfo, RefinementType } from "../api";
import { fetchModels, fetchSettings, refineText, getRefineErrorMessage, updateGlobalSettings } from "../api";
import { Link, Brain, Lightbulb, ListTree, Sparkles, Save, ChevronDown, ChevronUp, ChevronRight } from "lucide-react";
import { Link, Brain, Lightbulb, ListTree, Sparkles, Save, ChevronDown, ChevronUp, ChevronRight, MoreHorizontal } from "lucide-react";
import { CustomModelDropdown } from "./CustomModelDropdown";
const STORAGE_KEY = "kb-quick-entry-text";
@@ -117,6 +117,12 @@ export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels,
const refineMenuPortalRef = useRef<HTMLDivElement>(null);
const [refineMenuPosition, setRefineMenuPosition] = useState<{ top: number; left: number } | null>(null);
// Actions dropdown state (Deps/Models/Save behind a single dropdown)
const [isActionsDropdownOpen, setIsActionsDropdownOpen] = useState(false);
const actionsDropdownRef = useRef<HTMLDivElement>(null);
const actionsDropdownPortalRef = useRef<HTMLDivElement>(null);
const [actionsDropdownPosition, setActionsDropdownPosition] = useState<{ top: number; left: number; width: number } | null>(null);
// Use parent-provided favorites when available, otherwise internal state
const effectiveFavoriteProviders = parentFavoriteProviders ?? favoriteProviders;
const effectiveFavoriteModels = parentFavoriteModels ?? favoriteModels;
@@ -317,6 +323,7 @@ export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels,
setIsRefining(false);
setIsExpanded(false); // Collapse textarea height on reset
setIsDisclosureExpanded(false); // Always reset controls to collapsed after creation
setIsActionsDropdownOpen(false); // Close actions dropdown on reset
justResetRef.current = true;
if (textareaRef.current) {
textareaRef.current.style.height = "auto";
@@ -390,12 +397,17 @@ export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels,
setIsModelMenuOpen(false);
return;
}
// Close dropdowns first if open
// Close dependency or refine popover if open
if (showDeps || isRefineMenuOpen) {
setShowDeps(false);
setIsRefineMenuOpen(false);
return;
}
// Close actions dropdown if open
if (isActionsDropdownOpen) {
setIsActionsDropdownOpen(false);
return;
}
// Clear non-empty input on Escape and clear localStorage
if (description.trim()) {
setDescription("");
@@ -422,6 +434,7 @@ export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels,
isModelMenuOpen,
activeModelSubmenu,
isRefineMenuOpen,
isActionsDropdownOpen,
setIsDisclosureExpanded,
],
);
@@ -499,6 +512,88 @@ export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels,
});
}, [updateModelMenuPosition]);
const updateActionsDropdownPosition = useCallback(() => {
const trigger = actionsDropdownRef.current?.querySelector(".quick-entry-actions-trigger") as HTMLElement | null;
if (!trigger) return;
const rect = trigger.getBoundingClientRect();
const viewportWidth = window.innerWidth;
const isMobile = viewportWidth <= 640;
if (isMobile) {
const mobileWidth = Math.min(viewportWidth - 32, 320);
const left = Math.max((viewportWidth - mobileWidth) / 2, 16);
setActionsDropdownPosition({
top: rect.bottom + 4,
left,
width: mobileWidth,
});
} else {
setActionsDropdownPosition({
top: rect.bottom + 4,
left: rect.left,
width: Math.max(rect.width, 200),
});
}
}, []);
const toggleActionsDropdown = useCallback(() => {
setIsActionsDropdownOpen((prev) => {
const next = !prev;
if (next) {
updateActionsDropdownPosition();
} else {
setActionsDropdownPosition(null);
// Also close any child popovers
setShowDeps(false);
setIsModelMenuOpen(false);
setActiveModelSubmenu(null);
}
return next;
});
}, [updateActionsDropdownPosition]);
// Close actions dropdown when clicking outside
useEffect(() => {
if (!isActionsDropdownOpen) return;
const handleClickOutside = (e: MouseEvent) => {
const target = e.target as Node;
const clickedInsideTrigger = actionsDropdownRef.current?.contains(target);
const clickedInsidePortal = actionsDropdownPortalRef.current?.contains(target);
// Also check for clicks inside child popovers (model menu, dep dropdown)
const clickedInsideModelMenu = (target instanceof Element) && (
target.closest?.(".model-nested-menu--portal") != null ||
target.closest?.(".model-combobox-dropdown--portal") != null
);
const clickedInsideDepDropdown = (target instanceof Element) && (
target.closest?.(".dep-dropdown") != null
);
if (!clickedInsideTrigger && !clickedInsidePortal && !clickedInsideModelMenu && !clickedInsideDepDropdown) {
setIsActionsDropdownOpen(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, [isActionsDropdownOpen]);
// Keep actions dropdown portal anchored during scroll/resize
useEffect(() => {
if (!isActionsDropdownOpen) return;
const handleReposition = () => updateActionsDropdownPosition();
window.addEventListener("resize", handleReposition);
window.addEventListener("scroll", handleReposition, true);
return () => {
window.removeEventListener("resize", handleReposition);
window.removeEventListener("scroll", handleReposition, true);
};
}, [isActionsDropdownOpen, updateActionsDropdownPosition]);
const updateRefineMenuPosition = useCallback(() => {
const trigger = refineMenuRef.current?.querySelector(".refine-button") as HTMLElement | null;
if (!trigger) return;
@@ -838,217 +933,249 @@ export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels,
aria-hidden={!showExpandedControls}
>
<div className="quick-entry-controls-left">
<div className="dep-trigger-wrap">
<div className="quick-entry-actions-wrap" ref={actionsDropdownRef}>
<button
type="button"
className="btn btn-sm dep-trigger"
onClick={toggleDepsDropdown}
data-testid="quick-entry-deps-button"
>
<Link size={12} style={{ verticalAlign: "middle" }} />
{dependencies.length > 0 ? ` ${dependencies.length} deps` : " Deps"}
</button>
{showDeps && (() => {
const term = depSearch.toLowerCase();
const filtered = (term
? tasks.filter((t) =>
t.id.toLowerCase().includes(term) ||
(t.title && t.title.toLowerCase().includes(term)) ||
(t.description && t.description.toLowerCase().includes(term))
)
: [...tasks]
).sort((a, b) => {
const cmp = b.createdAt.localeCompare(a.createdAt);
if (cmp !== 0) return cmp;
const aNum = parseInt(a.id.slice(a.id.lastIndexOf("-") + 1), 10) || 0;
const bNum = parseInt(b.id.slice(b.id.lastIndexOf("-") + 1), 10) || 0;
return bNum - aNum;
});
return (
<div className="dep-dropdown" onMouseDown={(e) => e.preventDefault()}>
<input
className="dep-dropdown-search"
placeholder="Search tasks…"
autoFocus
value={depSearch}
onChange={(e) => setDepSearch(e.target.value)}
onClick={(e) => e.stopPropagation()}
/>
{filtered.length === 0 ? (
<div className="dep-dropdown-empty">No existing tasks</div>
) : (
filtered.map((t) => (
<div
key={t.id}
className={`dep-dropdown-item${dependencies.includes(t.id) ? " selected" : ""}`}
onMouseDown={(e) => e.preventDefault()}
onClick={() => toggleDep(t.id)}
>
<span className="dep-dropdown-id">{t.id}</span>
<span className="dep-dropdown-title">{truncate(t.title || t.description || t.id, 30)}</span>
</div>
))
)}
</div>
);
})()}
</div>
<div className="quick-entry-model-wrap" ref={modelMenuRef}>
<button
type="button"
className="btn btn-sm quick-entry-model-trigger"
onClick={toggleModelMenu}
aria-expanded={isModelMenuOpen}
className="btn btn-sm quick-entry-actions-trigger"
onClick={toggleActionsDropdown}
aria-expanded={isActionsDropdownOpen}
aria-haspopup="menu"
data-testid="quick-entry-models-button"
data-testid="quick-entry-actions-button"
title="Dependencies, models, and save"
>
<Brain size={12} style={{ verticalAlign: "middle" }} />
{selectedPreset
? ` ${selectedPreset.name}`
: selectedModelCount > 0
? ` ${selectedModelCount} model${selectedModelCount === 1 ? "" : "s"}`
: " Models"}
<MoreHorizontal size={12} style={{ verticalAlign: "middle" }} />
Actions
</button>
{isModelMenuOpen && portalRoot && modelMenuPosition && createPortal(
{isActionsDropdownOpen && portalRoot && actionsDropdownPosition && createPortal(
<div
ref={modelMenuPortalRef}
className="model-nested-menu model-nested-menu--portal"
ref={actionsDropdownPortalRef}
className="actions-dropdown actions-dropdown--portal"
onMouseDown={(e) => e.preventDefault()}
data-testid="model-nested-menu"
data-testid="actions-dropdown"
style={{
position: "fixed",
top: `${modelMenuPosition.top}px`,
left: `${modelMenuPosition.left}px`,
width: `${modelMenuPosition.width}px`,
top: `${actionsDropdownPosition.top}px`,
left: `${actionsDropdownPosition.left}px`,
width: `${actionsDropdownPosition.width}px`,
}}
>
{activeModelSubmenu === null ? (
// Top-level menu with Plan/Executor/Validator choices
<div className="model-menu-items">
<div className="actions-dropdown-items">
<div className="dep-trigger-wrap">
<button
type="button"
className={`model-menu-item ${hasPlanningOverride ? "model-menu-item--active" : ""}`}
onClick={() => setActiveModelSubmenu("plan")}
data-testid="model-menu-plan"
className="btn btn-sm dep-trigger"
onClick={toggleDepsDropdown}
data-testid="quick-entry-deps-button"
>
<span className="model-menu-item-label">
<Lightbulb size={12} style={{ verticalAlign: "middle", marginRight: 6 }} />
Plan
</span>
<span className="model-menu-item-value">
{hasPlanningOverride
? getModelBadgeLabel(planningProvider, planningModelId)
: "Using default"}
</span>
<ChevronRight size={12} style={{ marginLeft: "auto", color: "var(--text-dim)" }} />
</button>
<button
type="button"
className={`model-menu-item ${hasExecutorOverride ? "model-menu-item--active" : ""}`}
onClick={() => setActiveModelSubmenu("executor")}
data-testid="model-menu-executor"
>
<span className="model-menu-item-label">
<Sparkles size={12} style={{ verticalAlign: "middle", marginRight: 6 }} />
Executor
</span>
<span className="model-menu-item-value">
{hasExecutorOverride
? getModelBadgeLabel(executorProvider, executorModelId)
: "Using default"}
</span>
<ChevronRight size={12} style={{ marginLeft: "auto", color: "var(--text-dim)" }} />
</button>
<button
type="button"
className={`model-menu-item ${hasValidatorOverride ? "model-menu-item--active" : ""}`}
onClick={() => setActiveModelSubmenu("validator")}
data-testid="model-menu-validator"
>
<span className="model-menu-item-label">
<Brain size={12} style={{ verticalAlign: "middle", marginRight: 6 }} />
Validator
</span>
<span className="model-menu-item-value">
{hasValidatorOverride
? getModelBadgeLabel(validatorProvider, validatorModelId)
: "Using default"}
</span>
<ChevronRight size={12} style={{ marginLeft: "auto", color: "var(--text-dim)" }} />
<Link size={12} style={{ verticalAlign: "middle" }} />
{dependencies.length > 0 ? ` ${dependencies.length} deps` : " Deps"}
</button>
{showDeps && (() => {
const term = depSearch.toLowerCase();
const filtered = (term
? tasks.filter((t) =>
t.id.toLowerCase().includes(term) ||
(t.title && t.title.toLowerCase().includes(term)) ||
(t.description && t.description.toLowerCase().includes(term))
)
: [...tasks]
).sort((a, b) => {
const cmp = b.createdAt.localeCompare(a.createdAt);
if (cmp !== 0) return cmp;
const aNum = parseInt(a.id.slice(a.id.lastIndexOf("-") + 1), 10) || 0;
const bNum = parseInt(b.id.slice(b.id.lastIndexOf("-") + 1), 10) || 0;
return bNum - aNum;
});
return (
<div className="dep-dropdown" onMouseDown={(e) => e.preventDefault()}>
<input
className="dep-dropdown-search"
placeholder="Search tasks…"
autoFocus
value={depSearch}
onChange={(e) => setDepSearch(e.target.value)}
onClick={(e) => e.stopPropagation()}
/>
{filtered.length === 0 ? (
<div className="dep-dropdown-empty">No existing tasks</div>
) : (
filtered.map((t) => (
<div
key={t.id}
className={`dep-dropdown-item${dependencies.includes(t.id) ? " selected" : ""}`}
onMouseDown={(e) => e.preventDefault()}
onClick={() => toggleDep(t.id)}
>
<span className="dep-dropdown-id">{t.id}</span>
<span className="dep-dropdown-title">{truncate(t.title || t.description || t.id, 30)}</span>
</div>
))
)}
</div>
);
})()}
</div>
) : (
// Submenu with CustomModelDropdown for the selected target
<div className="model-submenu">
<div className="quick-entry-model-wrap" ref={modelMenuRef}>
<button
type="button"
className="model-submenu-back"
onClick={() => setActiveModelSubmenu(null)}
data-testid="model-submenu-back"
className="btn btn-sm quick-entry-model-trigger"
onClick={toggleModelMenu}
aria-expanded={isModelMenuOpen}
aria-haspopup="menu"
data-testid="quick-entry-models-button"
>
<ChevronDown size={12} style={{ transform: "rotate(90deg)", marginRight: 4 }} />
Back
<Brain size={12} style={{ verticalAlign: "middle" }} />
{selectedPreset
? ` ${selectedPreset.name}`
: selectedModelCount > 0
? ` ${selectedModelCount} model${selectedModelCount === 1 ? "" : "s"}`
: " Models"}
</button>
<div className="model-submenu-header">
{activeModelSubmenu === "plan" && "Plan Model"}
{activeModelSubmenu === "executor" && "Executor Model"}
{activeModelSubmenu === "validator" && "Validator Model"}
</div>
<CustomModelDropdown
models={loadedModels}
value={
activeModelSubmenu === "plan"
? planningSelectionValue
: activeModelSubmenu === "executor"
? executorSelectionValue
: validatorSelectionValue
}
onChange={
activeModelSubmenu === "plan"
? handlePlanningModelChange
: activeModelSubmenu === "executor"
? handleExecutorChange
: handleValidatorChange
}
placeholder="Using default"
disabled={modelsLoading}
id={`model-${activeModelSubmenu}-select`}
label={`${activeModelSubmenu} model`}
favoriteProviders={effectiveFavoriteProviders}
onToggleFavorite={handleToggleFavorite}
favoriteModels={effectiveFavoriteModels}
onToggleModelFavorite={handleToggleModelFavorite}
/>
{modelsError && (
<div className="model-submenu-error">
<span>{modelsError}</span>
<button type="button" className="btn btn-sm" onClick={loadModels}>
Retry
</button>
</div>
{isModelMenuOpen && portalRoot && modelMenuPosition && createPortal(
<div
ref={modelMenuPortalRef}
className="model-nested-menu model-nested-menu--portal"
onMouseDown={(e) => e.preventDefault()}
data-testid="model-nested-menu"
style={{
position: "fixed",
top: `${modelMenuPosition.top}px`,
left: `${modelMenuPosition.left}px`,
width: `${modelMenuPosition.width}px`,
}}
>
{activeModelSubmenu === null ? (
// Top-level menu with Plan/Executor/Validator choices
<div className="model-menu-items">
<button
type="button"
className={`model-menu-item ${hasPlanningOverride ? "model-menu-item--active" : ""}`}
onClick={() => setActiveModelSubmenu("plan")}
data-testid="model-menu-plan"
>
<span className="model-menu-item-label">
<Lightbulb size={12} style={{ verticalAlign: "middle", marginRight: 6 }} />
Plan
</span>
<span className="model-menu-item-value">
{hasPlanningOverride
? getModelBadgeLabel(planningProvider, planningModelId)
: "Using default"}
</span>
<ChevronRight size={12} style={{ marginLeft: "auto", color: "var(--text-dim)" }} />
</button>
<button
type="button"
className={`model-menu-item ${hasExecutorOverride ? "model-menu-item--active" : ""}`}
onClick={() => setActiveModelSubmenu("executor")}
data-testid="model-menu-executor"
>
<span className="model-menu-item-label">
<Sparkles size={12} style={{ verticalAlign: "middle", marginRight: 6 }} />
Executor
</span>
<span className="model-menu-item-value">
{hasExecutorOverride
? getModelBadgeLabel(executorProvider, executorModelId)
: "Using default"}
</span>
<ChevronRight size={12} style={{ marginLeft: "auto", color: "var(--text-dim)" }} />
</button>
<button
type="button"
className={`model-menu-item ${hasValidatorOverride ? "model-menu-item--active" : ""}`}
onClick={() => setActiveModelSubmenu("validator")}
data-testid="model-menu-validator"
>
<span className="model-menu-item-label">
<Brain size={12} style={{ verticalAlign: "middle", marginRight: 6 }} />
Validator
</span>
<span className="model-menu-item-value">
{hasValidatorOverride
? getModelBadgeLabel(validatorProvider, validatorModelId)
: "Using default"}
</span>
<ChevronRight size={12} style={{ marginLeft: "auto", color: "var(--text-dim)" }} />
</button>
</div>
) : (
// Submenu with CustomModelDropdown for the selected target
<div className="model-submenu">
<button
type="button"
className="model-submenu-back"
onClick={() => setActiveModelSubmenu(null)}
data-testid="model-submenu-back"
>
<ChevronDown size={12} style={{ transform: "rotate(90deg)", marginRight: 4 }} />
Back
</button>
<div className="model-submenu-header">
{activeModelSubmenu === "plan" && "Plan Model"}
{activeModelSubmenu === "executor" && "Executor Model"}
{activeModelSubmenu === "validator" && "Validator Model"}
</div>
<CustomModelDropdown
models={loadedModels}
value={
activeModelSubmenu === "plan"
? planningSelectionValue
: activeModelSubmenu === "executor"
? executorSelectionValue
: validatorSelectionValue
}
onChange={
activeModelSubmenu === "plan"
? handlePlanningModelChange
: activeModelSubmenu === "executor"
? handleExecutorChange
: handleValidatorChange
}
placeholder="Using default"
disabled={modelsLoading}
id={`model-${activeModelSubmenu}-select`}
label={`${activeModelSubmenu} model`}
favoriteProviders={effectiveFavoriteProviders}
onToggleFavorite={handleToggleFavorite}
favoriteModels={effectiveFavoriteModels}
onToggleModelFavorite={handleToggleModelFavorite}
/>
{modelsError && (
<div className="model-submenu-error">
<span>{modelsError}</span>
<button type="button" className="btn btn-sm" onClick={loadModels}>
Retry
</button>
</div>
)}
</div>
)}
</div>,
portalRoot,
)}
</div>
)}
{!isSubmitting && (
<button
type="button"
className="btn btn-task-create btn-sm"
onClick={handleSaveClick}
onMouseDown={(e) => e.preventDefault()}
disabled={!description.trim() || isSubmitting}
data-testid="save-button"
title="Create task"
>
<Save size={12} style={{ verticalAlign: "middle", marginRight: 4 }} />
Save
</button>
)}
</div>
</div>,
portalRoot,
)}
</div>
{!isSubmitting && (
<button
type="button"
className="btn btn-task-create btn-sm"
onClick={handleSaveClick}
onMouseDown={(e) => e.preventDefault()}
disabled={!description.trim() || isSubmitting}
data-testid="save-button"
title="Create task"
>
<Save size={12} style={{ verticalAlign: "middle", marginRight: 4 }} />
Save
</button>
)}
</div>
<div className="quick-entry-hint">
Enter to create · Esc to cancel

20
packages/dashboard/app/components/__tests__/ListView.test.tsx
View File

@@ -1452,7 +1452,7 @@ describe("ListView Quick Entry", () => {
expect(tableContainer?.contains(quickEntry)).toBe(true);
});
it("shows model selector button when QuickEntryBox is expanded", async () => {
it("shows model selector button when QuickEntryBox is expanded and actions dropdown is open", async () => {
const mockOnQuickCreate = vi.fn().mockResolvedValue(undefined);
renderListView({ onQuickCreate: mockOnQuickCreate });
@@ -1462,14 +1462,18 @@ describe("ListView Quick Entry", () => {
// Click the disclosure toggle to expand the QuickEntryBox controls
const toggleButton = screen.getByTestId("quick-entry-toggle");
fireEvent.click(toggleButton);
// Open the actions dropdown to access Deps/Models/Save
const actionsButton = screen.getByTestId("quick-entry-actions-button");
fireEvent.click(actionsButton);
// Model selector button should be visible
const modelButton = await screen.findByTestId("quick-entry-models-button");
expect(modelButton).toBeDefined();
expect(document.getElementById("quick-entry-controls")?.hasAttribute("hidden")).toBe(false);
});
it("shows dependency selector button when QuickEntryBox is expanded", async () => {
it("shows dependency selector button when QuickEntryBox is expanded and actions dropdown is open", async () => {
const mockOnQuickCreate = vi.fn().mockResolvedValue(undefined);
renderListView({ onQuickCreate: mockOnQuickCreate });
@@ -1479,7 +1483,11 @@ describe("ListView Quick Entry", () => {
// Click the disclosure toggle to expand the QuickEntryBox controls
const toggleButton = screen.getByTestId("quick-entry-toggle");
fireEvent.click(toggleButton);
// Open the actions dropdown to access Deps/Models/Save
const actionsButton = screen.getByTestId("quick-entry-actions-button");
fireEvent.click(actionsButton);
// Dependency selector button should be visible
const depsButton = await screen.findByTestId("quick-entry-deps-button");
expect(depsButton).toBeDefined();
@@ -2076,6 +2084,10 @@ describe("ListView - Bulk Selection", () => {
const toggleButton = screen.getByTestId("quick-entry-toggle");
fireEvent.click(toggleButton);
// Open the actions dropdown to access Deps/Models/Save
const actionsButton = screen.getByTestId("quick-entry-actions-button");
fireEvent.click(actionsButton);
const modelButton = await screen.findByTestId("quick-entry-models-button");
fireEvent.click(modelButton);

261
packages/dashboard/app/components/__tests__/QuickEntryBox.test.tsx
View File

@@ -92,6 +92,7 @@ vi.mock("lucide-react", () => ({
ChevronDown: () => null,
ChevronUp: () => null,
ChevronRight: () => null,
MoreHorizontal: () => null,
}));
// Mock ModelSelectionModal (kept for backward compatibility - no longer directly rendered)
@@ -160,6 +161,12 @@ function expandQuickEntry() {
fireEvent.click(toggleButton);
}
// Helper to open the actions dropdown (which contains Deps/Models/Save)
function openActionsDropdown() {
const actionsButton = screen.getByTestId("quick-entry-actions-button");
fireEvent.click(actionsButton);
}
describe("QuickEntryBox", () => {
beforeEach(() => {
vi.useFakeTimers({ shouldAdvanceTime: true });
@@ -500,7 +507,7 @@ describe("QuickEntryBox", () => {
});
describe("Rich creation features", () => {
it("shows dependency button when expanded", () => {
it("shows dependency button when expanded and actions dropdown is open", () => {
renderQuickEntryBox({});
// Initially, controls region is collapsed/hidden
@@ -511,11 +518,14 @@ describe("QuickEntryBox", () => {
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task with deps" } });
// Open the actions dropdown to access Deps/Models/Save
openActionsDropdown();
// Now the dependency button should be visible
expect(screen.getByTestId("quick-entry-deps-button")).toBeTruthy();
});
it("shows model selector button when expanded", () => {
it("shows model selector button when expanded and actions dropdown is open", () => {
renderQuickEntryBox({});
// Initially, controls region is collapsed/hidden
@@ -526,6 +536,9 @@ describe("QuickEntryBox", () => {
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task with models" } });
// Open the actions dropdown to access Deps/Models/Save
openActionsDropdown();
// Now the model selector button should be visible
expect(screen.getByTestId("quick-entry-models-button")).toBeTruthy();
});
@@ -549,6 +562,7 @@ describe("QuickEntryBox", () => {
it("opens dependency dropdown when clicking deps button", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task with deps" } });
@@ -562,6 +576,7 @@ describe("QuickEntryBox", () => {
it("opens model menu when clicking models button", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task with models" } });
@@ -579,6 +594,7 @@ describe("QuickEntryBox", () => {
it("shows Plan, Executor, and Validator options in model menu", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task with models" } });
@@ -592,6 +608,7 @@ describe("QuickEntryBox", () => {
it("clicking Executor opens submenu with CustomModelDropdown", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task with models" } });
@@ -607,6 +624,7 @@ describe("QuickEntryBox", () => {
it("clicking Plan opens submenu with CustomModelDropdown", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task with models" } });
@@ -619,6 +637,7 @@ describe("QuickEntryBox", () => {
it("clicking Validator opens submenu with CustomModelDropdown", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task with models" } });
@@ -631,6 +650,7 @@ describe("QuickEntryBox", () => {
it("back button returns to top-level model menu", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task with models" } });
@@ -649,6 +669,7 @@ describe("QuickEntryBox", () => {
it("Escape from submenu returns to top-level menu without closing it", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task with models" } });
@@ -672,6 +693,7 @@ describe("QuickEntryBox", () => {
it("selecting Plan model updates the Plan menu item value", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task with models" } });
@@ -695,6 +717,7 @@ describe("QuickEntryBox", () => {
it("selecting Validator model updates the Validator menu item value", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task with models" } });
@@ -716,6 +739,7 @@ describe("QuickEntryBox", () => {
it("clearing Plan model returns menu item to default state", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task with models" } });
@@ -738,6 +762,7 @@ describe("QuickEntryBox", () => {
it("selects dependencies and includes them in submit payload", async () => {
const { props } = renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task with deps" } });
@@ -880,6 +905,7 @@ describe("QuickEntryBox", () => {
it("includes selected models in submit payload", async () => {
const { props } = renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task with model" } });
@@ -914,6 +940,7 @@ describe("QuickEntryBox", () => {
it("closes model menu on Escape when open", async () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task with menu" } });
@@ -1211,6 +1238,7 @@ describe("QuickEntryBox", () => {
it("does not clear localStorage on first Escape when closing dropdowns", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
// Type something and open dropdown
@@ -1465,7 +1493,7 @@ describe("QuickEntryBox", () => {
});
describe("Save button", () => {
it("shows save button when expanded and text is entered", () => {
it("shows save button when expanded and actions dropdown is open", () => {
renderQuickEntryBox({});
// Initially, controls region is collapsed/hidden
@@ -1476,6 +1504,9 @@ describe("QuickEntryBox", () => {
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task to save" } });
// Open actions dropdown to access Save
openActionsDropdown();
// Now the save button should be visible
expect(screen.getByTestId("save-button")).toBeTruthy();
});
@@ -1483,6 +1514,7 @@ describe("QuickEntryBox", () => {
it("save button is disabled when textarea is empty", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
// Type something
@@ -1505,6 +1537,7 @@ describe("QuickEntryBox", () => {
props.onCreate.mockImplementation(() => new Promise((resolve) => setTimeout(resolve, 100)));
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "New task" } });
@@ -1524,6 +1557,7 @@ describe("QuickEntryBox", () => {
it("clicking save button persists to localStorage", async () => {
const { props } = renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Draft task description" } });
@@ -1546,6 +1580,7 @@ describe("QuickEntryBox", () => {
it("clicking save button creates the task", async () => {
const { props } = renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task to save" } });
@@ -1567,6 +1602,7 @@ describe("QuickEntryBox", () => {
it("save button has correct test id", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task to save" } });
@@ -1581,6 +1617,7 @@ describe("QuickEntryBox", () => {
it("save button has correct title attribute", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task to save" } });
@@ -1592,6 +1629,7 @@ describe("QuickEntryBox", () => {
it("save button prevents textarea blur on mousedown", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task to save" } });
@@ -1638,9 +1676,9 @@ describe("QuickEntryBox", () => {
// Now controls should be visible
expect(document.getElementById("quick-entry-controls")?.hasAttribute("hidden")).toBe(false);
// And buttons inside should be accessible
expect(screen.getByTestId("quick-entry-deps-button")).toBeTruthy();
expect(screen.getByTestId("quick-entry-models-button")).toBeTruthy();
// Actions button should be accessible (Deps/Models/Save are inside it)
expect(screen.getByTestId("quick-entry-actions-button")).toBeTruthy();
// Plan/Subtask are always visible in description-actions when expanded
expect(screen.getByTestId("plan-button")).toBeTruthy();
expect(screen.getByTestId("subtask-button")).toBeTruthy();
});
@@ -1651,7 +1689,7 @@ describe("QuickEntryBox", () => {
// Expand
expandQuickEntry();
expect(document.getElementById("quick-entry-controls")?.hasAttribute("hidden")).toBe(false);
expect(screen.getByTestId("quick-entry-deps-button")).toBeTruthy();
expect(screen.getByTestId("quick-entry-actions-button")).toBeTruthy();
// Collapse
expandQuickEntry();
@@ -1660,11 +1698,12 @@ describe("QuickEntryBox", () => {
expect(document.getElementById("quick-entry-controls")?.hasAttribute("hidden")).toBe(true);
});
it("verifies all buttons are accessible when expanded", () => {
it("verifies all buttons are accessible when expanded and actions dropdown is open", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
// All buttons should be accessible when expanded
// All buttons should be accessible when expanded + actions dropdown open
expect(screen.getByTestId("quick-entry-deps-button")).toBeTruthy();
expect(screen.getByTestId("quick-entry-models-button")).toBeTruthy();
expect(screen.getByTestId("plan-button")).toBeTruthy();
@@ -1696,26 +1735,28 @@ describe("QuickEntryBox", () => {
expect(screen.queryByTestId("quick-entry-description-actions")).toBeNull();
});
it("Save button remains in the expanded controls area, not description-actions", () => {
it("Save button is in the actions dropdown, not description-actions", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const actionsContainer = screen.getByTestId("quick-entry-description-actions");
const saveButton = screen.getByTestId("save-button");
// Save button should NOT be in the description-actions area
// Save button should NOT be in the description-actions area (it's in the actions dropdown)
expect(actionsContainer.contains(saveButton)).toBe(false);
});
it("Deps and Models buttons remain in the expanded controls area, not description-actions", () => {
it("Deps and Models buttons are in the actions dropdown, not description-actions", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const actionsContainer = screen.getByTestId("quick-entry-description-actions");
const depsButton = screen.getByTestId("quick-entry-deps-button");
const modelsButton = screen.getByTestId("quick-entry-models-button");
// Deps and Models should NOT be in the description-actions area
// Deps and Models should NOT be in the description-actions area (they're in the actions dropdown)
expect(actionsContainer.contains(depsButton)).toBe(false);
expect(actionsContainer.contains(modelsButton)).toBe(false);
});
@@ -1753,6 +1794,7 @@ describe("QuickEntryBox", () => {
// Don't pass availableModels so component fetches settings itself
renderQuickEntryBox({ availableModels: undefined });
expandQuickEntry();
openActionsDropdown();
// Open model menu
fireEvent.click(screen.getByTestId("quick-entry-models-button"));
@@ -1785,6 +1827,7 @@ describe("QuickEntryBox", () => {
const onCreate = vi.fn().mockResolvedValue(undefined);
renderQuickEntryBox({ onCreate, availableModels: undefined });
expandQuickEntry();
openActionsDropdown();
// Open model menu and select an executor via submenu
fireEvent.click(screen.getByTestId("quick-entry-models-button"));
@@ -1839,6 +1882,7 @@ describe("QuickEntryBox", () => {
it("renders model menu as a portal in document.body (not inside QuickEntryBox)", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
fireEvent.click(screen.getByTestId("quick-entry-models-button"));
@@ -1857,6 +1901,7 @@ describe("QuickEntryBox", () => {
it("positions the portaled menu with fixed positioning to escape column overflow", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
fireEvent.click(screen.getByTestId("quick-entry-models-button"));
@@ -1874,6 +1919,7 @@ describe("QuickEntryBox", () => {
it("does not close model menu when clicking inside CustomModelDropdown portal", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
fireEvent.click(screen.getByTestId("quick-entry-models-button"));
expect(screen.getByTestId("model-nested-menu")).toBeTruthy();
@@ -1907,6 +1953,7 @@ describe("QuickEntryBox", () => {
it("does not close model menu when clicking inside the model-nested-menu portal itself", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
fireEvent.click(screen.getByTestId("quick-entry-models-button"));
const menu = screen.getByTestId("model-nested-menu");
@@ -1922,6 +1969,7 @@ describe("QuickEntryBox", () => {
it("closes model menu on outside click (click outside both trigger and portal)", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task with menu" } });
@@ -1944,6 +1992,7 @@ describe("QuickEntryBox", () => {
it("repositions portaled menu on window resize while open", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
fireEvent.click(screen.getByTestId("quick-entry-models-button"));
const menu = screen.getByTestId("model-nested-menu");
@@ -1965,6 +2014,7 @@ describe("QuickEntryBox", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
fireEvent.click(screen.getByTestId("quick-entry-models-button"));
const menu = screen.getByTestId("model-nested-menu");
@@ -1979,6 +2029,7 @@ describe("QuickEntryBox", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
fireEvent.click(screen.getByTestId("quick-entry-models-button"));
const menu = screen.getByTestId("model-nested-menu");
@@ -1994,6 +2045,7 @@ describe("QuickEntryBox", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
fireEvent.click(screen.getByTestId("quick-entry-models-button"));
const menu = screen.getByTestId("model-nested-menu");
@@ -2011,6 +2063,7 @@ describe("QuickEntryBox", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
fireEvent.click(screen.getByTestId("quick-entry-models-button"));
const menu = screen.getByTestId("model-nested-menu");
@@ -2026,6 +2079,7 @@ describe("QuickEntryBox", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
fireEvent.click(screen.getByTestId("quick-entry-models-button"));
const menu = screen.getByTestId("model-nested-menu");
@@ -2044,4 +2098,185 @@ describe("QuickEntryBox", () => {
expect(mobileWidth).toBeGreaterThan(desktopWidth);
});
});
describe("Actions dropdown (FN-888)", () => {
it("shows actions trigger button when expanded", () => {
renderQuickEntryBox({});
expandQuickEntry();
// Actions trigger should be visible in controls area
expect(screen.getByTestId("quick-entry-actions-button")).toBeTruthy();
});
it("does not show Deps/Models/Save directly when expanded without opening actions dropdown", () => {
renderQuickEntryBox({});
expandQuickEntry();
// These should NOT be visible until actions dropdown is opened
expect(screen.queryByTestId("quick-entry-deps-button")).toBeNull();
expect(screen.queryByTestId("quick-entry-models-button")).toBeNull();
expect(screen.queryByTestId("save-button")).toBeNull();
});
it("opens actions dropdown on click and shows Deps/Models/Save", () => {
renderQuickEntryBox({});
expandQuickEntry();
// Click the actions trigger
openActionsDropdown();
// Actions dropdown should be visible
expect(screen.getByTestId("actions-dropdown")).toBeTruthy();
// Deps, Models, Save should now be accessible
expect(screen.getByTestId("quick-entry-deps-button")).toBeTruthy();
expect(screen.getByTestId("quick-entry-models-button")).toBeTruthy();
expect(screen.getByTestId("save-button")).toBeTruthy();
});
it("closes actions dropdown on second click", () => {
renderQuickEntryBox({});
expandQuickEntry();
// Open
openActionsDropdown();
expect(screen.getByTestId("actions-dropdown")).toBeTruthy();
// Close by clicking trigger again
fireEvent.click(screen.getByTestId("quick-entry-actions-button"));
expect(screen.queryByTestId("actions-dropdown")).toBeNull();
});
it("closes actions dropdown on Escape (after child popovers are closed)", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Test" } });
// Actions dropdown should be open
expect(screen.getByTestId("actions-dropdown")).toBeTruthy();
// Press Escape — should close actions dropdown
fireEvent.keyDown(textarea, { key: "Escape" });
// Actions dropdown should be closed
expect(screen.queryByTestId("actions-dropdown")).toBeNull();
// Input should still have the value
expect((textarea as HTMLTextAreaElement).value).toBe("Test");
});
it("Escape hierarchy: model submenu → model menu → deps popover → actions dropdown → input clear", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Hierarchy test" } });
// Open model menu
fireEvent.click(screen.getByTestId("quick-entry-models-button"));
expect(screen.getByTestId("model-nested-menu")).toBeTruthy();
// Open executor submenu
fireEvent.click(screen.getByTestId("model-menu-executor"));
expect(screen.getByTestId("model-submenu-back")).toBeTruthy();
// Escape 1: close submenu → back to model menu top level
fireEvent.keyDown(textarea, { key: "Escape" });
expect(screen.queryByTestId("model-submenu-back")).toBeNull();
expect(screen.getByTestId("model-nested-menu")).toBeTruthy();
// Escape 2: close model menu
fireEvent.keyDown(textarea, { key: "Escape" });
expect(screen.queryByTestId("model-nested-menu")).toBeNull();
expect(screen.getByTestId("actions-dropdown")).toBeTruthy();
// Escape 3: close actions dropdown
fireEvent.keyDown(textarea, { key: "Escape" });
expect(screen.queryByTestId("actions-dropdown")).toBeNull();
// Escape 4: clear input and collapse
fireEvent.keyDown(textarea, { key: "Escape" });
expect((textarea as HTMLTextAreaElement).value).toBe("");
expect(textarea.classList.contains("quick-entry-input--expanded")).toBe(false);
});
it("actions dropdown has proper aria attributes on trigger", () => {
renderQuickEntryBox({});
expandQuickEntry();
const trigger = screen.getByTestId("quick-entry-actions-button");
expect(trigger.getAttribute("aria-expanded")).toBe("false");
expect(trigger.getAttribute("aria-haspopup")).toBe("menu");
// Open
openActionsDropdown();
expect(trigger.getAttribute("aria-expanded")).toBe("true");
});
it("renders actions dropdown as a portal in document.body", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const dropdown = screen.getByTestId("actions-dropdown");
expect(dropdown).toBeTruthy();
// The dropdown should be in document.body, NOT inside the QuickEntryBox
const quickEntryBox = screen.getByTestId("quick-entry-box");
expect(quickEntryBox.contains(dropdown)).toBe(false);
expect(document.body.contains(dropdown)).toBe(true);
});
it("positions the actions dropdown with fixed positioning", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const dropdown = screen.getByTestId("actions-dropdown");
expect(dropdown.style.position).toBe("fixed");
expect(dropdown.style.top).toBeTruthy();
expect(dropdown.style.left).toBeTruthy();
expect(dropdown.style.width).toBeTruthy();
});
it("closes actions dropdown when clicking outside", () => {
renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
expect(screen.getByTestId("actions-dropdown")).toBeTruthy();
// Click outside
const outsideElement = document.createElement("div");
document.body.appendChild(outsideElement);
try {
fireEvent.mouseDown(outsideElement);
} finally {
document.body.removeChild(outsideElement);
}
expect(screen.queryByTestId("actions-dropdown")).toBeNull();
});
it("resets actions dropdown state on form reset after creation", async () => {
const { props } = renderQuickEntryBox({});
expandQuickEntry();
openActionsDropdown();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task to create" } });
// Submit
fireEvent.keyDown(textarea, { key: "Enter" });
await waitFor(() => {
expect(props.onCreate).toHaveBeenCalled();
});
// After creation, actions dropdown should be closed
expect(screen.queryByTestId("actions-dropdown")).toBeNull();
});
});
});