Faza 3: Agent UI - ModelSelector and StatusBar improvements - #5
Open
Finfinder wants to merge 3 commits into
Open
Faza 3: Agent UI - ModelSelector and StatusBar improvements#5Finfinder wants to merge 3 commits into
Finfinder wants to merge 3 commits into
Conversation
There was a problem hiding this comment.
Pull request overview
This PR advances the Phase 3 “Agent UI” work by moving agent/model controls into the chat input footer, introducing a new ModelSelector, and improving connection status UX to be less noisy during SSE reconnects.
Changes:
- Added
ModelSelector(grouped by provider + search) and integrated it intoChatInputnext toAgentSelector. - Added upward-opening dropdown support (
position="top") for selectors used in the bottom footer. - Debounced SSE error display in
StatusBarand added a “Working…” status during generation.
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/lib/opencode/config.ts | Adds sessionModelToConfig helper to convert API session model into ModelConfig. |
| src/components/StatusBar/StatusBar.tsx | Debounces SSE error display and shows “Working…” during generation. |
| src/components/StatusBar/StatusBar.test.tsx | Updates/extends tests for debounced error and working state. |
| src/components/StatusBar/StatusBar.module.css | Adds styling for the new sse_working state. |
| src/components/ModelSelector/ModelSelector.tsx | Introduces new model dropdown UI with provider grouping and search. |
| src/components/ModelSelector/ModelSelector.module.css | Styles for ModelSelector dropdown/search/grouped list. |
| src/components/ModelSelector/index.ts | Exports the new ModelSelector component/types. |
| src/components/Chat/ChatPanel.tsx | Extends props to pass agent/model change handlers to ChatInput. |
| src/components/Chat/ChatInput.tsx | Renders AgentSelector/ModelSelector in the footer instead of static labels. |
| src/components/Chat/ChatInput.module.css | Allows footer dropdowns to overflow outside the input box. |
| src/components/AgentSelector/AgentSelector.tsx | Adds position prop and adjusts dropdown rendering for upward opening. |
| src/components/AgentSelector/AgentSelector.module.css | Adds .dropdownTop positioning style. |
| src/App.tsx | Wires agent change handler into chat footer; adds model conversion + (currently stubbed) model change handler. |
| .github/Issue/agent-first-ide-faza-3-agent-ui.plan.md | Updates Phase 3 implementation log/notes. |
Comments suppressed due to low confidence (3)
src/components/ModelSelector/ModelSelector.tsx:27
PREDEFINED_AGENTScurrently has noglobalentry and (in this repo) no agents definemodel, soallModelsends up empty and the dropdown shows “No models found.”. Seed the map with the default + currently selected model so the selector always has options.
// Add global default model
const globalModel = PREDEFINED_AGENTS.find(a => a.name === 'global')?.model || {
model: 'gpt-4',
provider: 'openai',
};
src/components/ModelSelector/ModelSelector.tsx:50
allModelsnow depends on the currently selectedvalue(to ensure it’s included in the list). With an empty dependency array, switching sessions/models won’t update the available options.
}, []);
src/components/ModelSelector/ModelSelector.tsx:104
- Selection state should include
provideras well asmodel; otherwise the wrong option can appear selected if two providers expose the same model ID.
aria-selected={model.model === value.model}
className={`${styles.option} ${model.model === value.model ? styles.selected : ''}`}
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // ─── OpenCode Configuration ───────────────────────────────────────────────── | ||
| // Configuration types for compaction, model selection, and agent settings. | ||
|
|
||
| import { Session } from './types'; |
| @@ -0,0 +1,123 @@ | |||
| import { useMemo, useState } from 'react'; | |||
| import { PREDEFINED_AGENTS, getEffectiveModel, type ModelConfig } from '@/lib/opencode/config'; | |||
Comment on lines
+113
to
+118
| <ChatPanel | ||
| agentName={agent} | ||
| onAgentChange={setAgent} | ||
| model={activeModel} | ||
| onModelChange={() => { /* Handle model change - would update session */ }} | ||
| /> |
Comment on lines
+76
to
+86
| it("shows 'Error' when SSE is in error state after debounce", () => { | ||
| vi.useFakeTimers(); | ||
| mockUseAgent.mockReturnValue( | ||
| mockAgentState({ state: { sseStatus: "error" } }), | ||
| ); | ||
| render(<StatusBar />); | ||
| // Fast-forward past the 4s debounce | ||
| act(() => vi.advanceTimersByTime(4000)); | ||
| expect(screen.getByText(/Error/)).toBeInTheDocument(); | ||
| vi.useRealTimers(); | ||
| }); |
Finfinder
force-pushed
the
feat/0.0.1/Issue/3
branch
3 times, most recently
from
July 27, 2026 22:59
b6f6839 to
93011c3
Compare
… in chat footer; implement SSE error debounce in StatusBar
Finfinder
force-pushed
the
feat/0.0.1/Issue/3
branch
from
July 27, 2026 23:12
93011c3 to
675ec6a
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implements:
Related to Issue #3 - Phase 3 Agent UI implementation