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

feat(FN-863): tokenize create-row input and select styling in Agents View

Browse Source 
- Add tokenized input styling to AgentListModal create-row with themed placeholder and chip-like tokens
- Add custom select dropdown styling to AgentsView with color-matched appearance
- Add comprehensive tests for both AgentListModal and AgentsView token/select behavior
- Update Agents View README with tokenized input/select styling documentation
This commit is contained in:
gsxdsm
2026-04-04 06:01:35 -07:00
parent 911b7bd0c7
commit 904dfcbd9a
5 changed files with 159 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
packages/dashboard/app/components/AgentListModal.tsx
View File

@@ -570,6 +570,42 @@ export function AgentListModal({ isOpen, onClose, addToast, projectId }: AgentLi
.agent-create-form .input {
flex: 1;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 6px 10px;
font-size: 13px;
font-family: var(--font-primary);
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.agent-create-form .input:focus {
border-color: var(--todo);
box-shadow: var(--focus-ring);
}
.agent-create-form .input::placeholder {
color: var(--text-dim);
}
.agent-create-form .select {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 6px 10px;
font-size: 13px;
font-family: var(--font-primary);
cursor: pointer;
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.agent-create-form .select:focus {
border-color: var(--todo);
box-shadow: var(--focus-ring);
}
.agent-list {

36
packages/dashboard/app/components/AgentsView.tsx
View File

@@ -617,6 +617,42 @@ export function AgentsView({ addToast, projectId }: AgentsViewProps) {
.agent-create-form .input {
flex: 1;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 6px 10px;
font-size: 13px;
font-family: var(--font-primary);
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.agent-create-form .input:focus {
border-color: var(--todo);
box-shadow: var(--focus-ring);
}
.agent-create-form .input::placeholder {
color: var(--text-dim);
}
.agent-create-form .select {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 6px 10px;
font-size: 13px;
font-family: var(--font-primary);
cursor: pointer;
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.agent-create-form .select:focus {
border-color: var(--todo);
box-shadow: var(--focus-ring);
}
.agent-list {

46
packages/dashboard/app/components/__tests__/AgentListModal.test.tsx
View File

@@ -789,6 +789,52 @@ describe("AgentListModal", () => {
expect(foundCreateFormRule).toBe(true);
});
it("create form input and select use theme tokens", async () => {
render(
<AgentListModal
isOpen={true}
onClose={mockOnClose}
addToast={mockAddToast}
/>
);
await waitFor(() => {
expect(screen.getByText("New Agent")).toBeTruthy();
});
fireEvent.click(screen.getByText("New Agent"));
const styleElements = document.querySelectorAll("style");
let foundInputRule = false;
let foundSelectRule = false;
styleElements.forEach(styleEl => {
const css = styleEl.textContent ?? "";
if (css.includes(".agent-create-form .input")) {
foundInputRule = true;
// Assert theme token usage
expect(css).toContain("var(--surface)");
expect(css).toContain("var(--text)");
expect(css).toContain("var(--border)");
expect(css).toContain("var(--radius-sm)");
// Focus ring token
expect(css).toContain("var(--focus-ring)");
// Guard against hardcoded light-only styles
expect(css).not.toMatch(/background:\s*#fff/);
expect(css).not.toMatch(/background:\s*white/);
}
if (css.includes(".agent-create-form .select")) {
foundSelectRule = true;
expect(css).toContain("var(--surface)");
expect(css).toContain("var(--text)");
expect(css).toContain("var(--border)");
expect(css).toContain("var(--radius-sm)");
expect(css).toContain("var(--focus-ring)");
}
});
expect(foundInputRule).toBe(true);
expect(foundSelectRule).toBe(true);
});
it("renders filter with styled container matching AgentsView", async () => {
render(
<AgentListModal

40
packages/dashboard/app/components/__tests__/AgentsView.test.tsx
View File

@@ -376,6 +376,46 @@ describe("AgentsView", () => {
});
expect(foundCreateFormRule).toBe(true);
});
it("create form input and select use theme tokens", async () => {
render(<AgentsView addToast={mockAddToast} />);
await waitFor(() => {
expect(screen.getByText("New Agent")).toBeTruthy();
});
fireEvent.click(screen.getByText("New Agent"));
const styleElements = document.querySelectorAll("style");
let foundInputRule = false;
let foundSelectRule = false;
styleElements.forEach(styleEl => {
const css = styleEl.textContent ?? "";
if (css.includes(".agent-create-form .input")) {
foundInputRule = true;
// Assert theme token usage
expect(css).toContain("var(--surface)");
expect(css).toContain("var(--text)");
expect(css).toContain("var(--border)");
expect(css).toContain("var(--radius-sm)");
// Focus ring token
expect(css).toContain("var(--focus-ring)");
// Guard against hardcoded light-only styles
expect(css).not.toMatch(/background:\s*#fff/);
expect(css).not.toMatch(/background:\s*white/);
}
if (css.includes(".agent-create-form .select")) {
foundSelectRule = true;
expect(css).toContain("var(--surface)");
expect(css).toContain("var(--text)");
expect(css).toContain("var(--border)");
expect(css).toContain("var(--radius-sm)");
expect(css).toContain("var(--focus-ring)");
}
});
expect(foundInputRule).toBe(true);
expect(foundSelectRule).toBe(true);
});
});
describe("change agent state", () => {