Phase 2-D: Frontend Codex/GPT Provider Experience #44

New Issue

Open

opened 2026-05-24 16:55:17 -05:00 by null · 0 comments

null commented

2026-05-24 16:55:17 -05:00

Owner

Source plan: /home/kaspa/.claude/plans/with-our-backend-created-precious-owl.md

Feature context: Feature 2: Tool Use Analytics

Scope

Phase 2-D — Frontend: Codex/GPT Provider Experience

Summary

Extend the /claude-code command center into a provider-aware AI sessions surface that can show Claude Code, Codex CLI, and OpenAI/GPT session analytics while preserving the current Claude look, feel, and interaction model.

Problem

Duplicating the Claude page for Codex would create two experiences that drift apart. Users should be able to switch providers while keeping the same mental model: sessions, message detail, tool analytics, date ranges, copy controls, and readable operational dashboards.

Affected area

UI page: existing /claude-code command center, or a renamed/generalized AI sessions route if chosen
UI components: provider switcher, source status cards, shared session/analytics components
URL state for selected provider/source, tab, and date range

Affected files

frontend/src/app/claude-code/page.tsx — add provider/source switcher while keeping Claude as the default
frontend/src/app/claude-code/sessions/[id]/page.tsx — support source-aware session detail links, or add a provider-aware route
frontend/src/components/claude/ToolAnalyticsPanel.tsx — accept source/provider props and fetch matching analytics
frontend/src/components/claude/SessionMessageThread.tsx — keep shared rendering for Claude and Codex/GPT normalized messages
frontend/src/components/claude/SessionHeroHeader.tsx — show source/provider label
frontend/src/components/claude/SourceSwitcher.tsx — new provider/source switcher component
frontend/src/components/claude/SourceStatusStrip.tsx — new source availability/status summary
frontend/src/lib/api/claude-code.ts — add Codex/OpenAI API functions or rename/extract to frontend/src/lib/api/agent-sessions.ts

Affected routes or endpoints

Depending on backend choice:

Calls Claude endpoints by default:
- GET /api/v1/claude-code/sessions
- GET /api/v1/claude-code/analytics/tools?days=...
Calls Codex endpoints when source is codex_cli:
- GET /api/v1/codex/sessions
- GET /api/v1/codex/analytics/tools?days=...
Optional source discovery:
- GET /api/v1/agent-sessions/sources

URL behavior

Preserve existing Claude URLs:
- /claude-code
- /claude-code?tab=analytics&days=30
Add provider/source query state:
- /claude-code?source=claude_code&tab=sessions
- /claude-code?source=codex_cli&tab=analytics&days=90
- /claude-code?source=openai_api&tab=analytics&days=30
If source is omitted, default to claude_code.
If a selected source is unavailable, show source status and setup guidance while keeping the page shell intact.

Expected behavior

/claude-code keeps the same visual language introduced in Phase 1-B and Phase 2-B.
A provider/source switcher appears near the top of the command center:
- Claude Code
- Codex CLI
- OpenAI API or GPT
Claude Code remains the default and existing behavior remains unchanged.
Switching to Codex CLI updates the URL and re-fetches sessions/analytics from the Codex backend source.
Switching to OpenAI API shows available sessions only if backend reports an owned event source; otherwise it shows an honest unavailable/setup state.
The Sessions and Tool Analytics tabs remain consistent across providers.
Session rows, message detail, tool call blocks, chart bars, ranked lists, copy controls, loading states, empty states, and error states all behave like the Claude implementation.
Source labels are visible in summary/header areas so users always know which provider they are inspecting.

Visual and interaction direction

Keep this feeling like one product surface, not separate Claude/Codex/GPT pages.
The provider switcher should be compact, polished, and operational:
- segmented control or source cards depending on available width
- clear status indicator per source
- no oversized marketing-style provider tiles
If a source is unavailable, use a calm setup panel:
- what was checked
- why no data is available
- where to configure/import data
Keep color balanced:
- Claude/Codex/GPT source accents can differ subtly
- do not let provider branding overpower the app's own UI
Mobile layout should keep provider switcher, tabs, and range controls reachable without stacking into a confusing tower.

Accessibility and performance

Provider switcher must be keyboard accessible and announce selected source/status.
Source unavailable states must be readable by screen readers.
Do not fetch all providers' session history by default; fetch the selected source, plus lightweight source status if available.
Shared components should not assume Claude-specific labels in empty/error text.

Steps to reproduce (acceptance criteria)

Open /claude-code
Confirm Claude Code remains the default source and existing Sessions tab works
Switch to Tool Analytics and confirm Claude analytics still works
Switch source to Codex CLI
Confirm URL updates to include source=codex_cli
Confirm Codex sessions or a clear source-unavailable state appears
Switch to Codex CLI analytics and confirm it uses Codex analytics data when available
Load /claude-code?source=codex_cli&tab=analytics&days=90 directly and confirm source/tab/range are selected
Confirm OpenAI API / GPT source shows data only when backend reports an owned event source
Confirm mobile layout has no overlapping text and provider/tabs/range controls remain usable

New opportunity to add

Add a small Compare sources summary when more than one source has data:
- sessions by source
- tool calls by source
- most-used tool per source
- last activity per source
This should be a compact overview, not a full comparison dashboard yet.

Source plan: `/home/kaspa/.claude/plans/with-our-backend-created-precious-owl.md` Feature context: **Feature 2: Tool Use Analytics** ## Scope ### Phase 2-D — Frontend: Codex/GPT Provider Experience #### Summary Extend the `/claude-code` command center into a provider-aware AI sessions surface that can show Claude Code, Codex CLI, and OpenAI/GPT session analytics while preserving the current Claude look, feel, and interaction model. #### Problem Duplicating the Claude page for Codex would create two experiences that drift apart. Users should be able to switch providers while keeping the same mental model: sessions, message detail, tool analytics, date ranges, copy controls, and readable operational dashboards. #### Affected area - UI page: existing `/claude-code` command center, or a renamed/generalized AI sessions route if chosen - UI components: provider switcher, source status cards, shared session/analytics components - URL state for selected provider/source, tab, and date range #### Affected files - `frontend/src/app/claude-code/page.tsx` — add provider/source switcher while keeping Claude as the default - `frontend/src/app/claude-code/sessions/[id]/page.tsx` — support source-aware session detail links, or add a provider-aware route - `frontend/src/components/claude/ToolAnalyticsPanel.tsx` — accept source/provider props and fetch matching analytics - `frontend/src/components/claude/SessionMessageThread.tsx` — keep shared rendering for Claude and Codex/GPT normalized messages - `frontend/src/components/claude/SessionHeroHeader.tsx` — show source/provider label - `frontend/src/components/claude/SourceSwitcher.tsx` — new provider/source switcher component - `frontend/src/components/claude/SourceStatusStrip.tsx` — new source availability/status summary - `frontend/src/lib/api/claude-code.ts` — add Codex/OpenAI API functions or rename/extract to `frontend/src/lib/api/agent-sessions.ts` #### Affected routes or endpoints Depending on backend choice: - Calls Claude endpoints by default: - `GET /api/v1/claude-code/sessions` - `GET /api/v1/claude-code/analytics/tools?days=...` - Calls Codex endpoints when source is `codex_cli`: - `GET /api/v1/codex/sessions` - `GET /api/v1/codex/analytics/tools?days=...` - Optional source discovery: - `GET /api/v1/agent-sessions/sources` #### URL behavior - Preserve existing Claude URLs: - `/claude-code` - `/claude-code?tab=analytics&days=30` - Add provider/source query state: - `/claude-code?source=claude_code&tab=sessions` - `/claude-code?source=codex_cli&tab=analytics&days=90` - `/claude-code?source=openai_api&tab=analytics&days=30` - If source is omitted, default to `claude_code`. - If a selected source is unavailable, show source status and setup guidance while keeping the page shell intact. #### Expected behavior - `/claude-code` keeps the same visual language introduced in Phase 1-B and Phase 2-B. - A provider/source switcher appears near the top of the command center: - `Claude Code` - `Codex CLI` - `OpenAI API` or `GPT` - `Claude Code` remains the default and existing behavior remains unchanged. - Switching to `Codex CLI` updates the URL and re-fetches sessions/analytics from the Codex backend source. - Switching to `OpenAI API` shows available sessions only if backend reports an owned event source; otherwise it shows an honest unavailable/setup state. - The `Sessions` and `Tool Analytics` tabs remain consistent across providers. - Session rows, message detail, tool call blocks, chart bars, ranked lists, copy controls, loading states, empty states, and error states all behave like the Claude implementation. - Source labels are visible in summary/header areas so users always know which provider they are inspecting. #### Visual and interaction direction - Keep this feeling like one product surface, not separate Claude/Codex/GPT pages. - The provider switcher should be compact, polished, and operational: - segmented control or source cards depending on available width - clear status indicator per source - no oversized marketing-style provider tiles - If a source is unavailable, use a calm setup panel: - what was checked - why no data is available - where to configure/import data - Keep color balanced: - Claude/Codex/GPT source accents can differ subtly - do not let provider branding overpower the app's own UI - Mobile layout should keep provider switcher, tabs, and range controls reachable without stacking into a confusing tower. #### Accessibility and performance - Provider switcher must be keyboard accessible and announce selected source/status. - Source unavailable states must be readable by screen readers. - Do not fetch all providers' session history by default; fetch the selected source, plus lightweight source status if available. - Shared components should not assume Claude-specific labels in empty/error text. #### Steps to reproduce (acceptance criteria) 1. Open `/claude-code` 2. Confirm Claude Code remains the default source and existing Sessions tab works 3. Switch to `Tool Analytics` and confirm Claude analytics still works 4. Switch source to `Codex CLI` 5. Confirm URL updates to include `source=codex_cli` 6. Confirm Codex sessions or a clear source-unavailable state appears 7. Switch to `Codex CLI` analytics and confirm it uses Codex analytics data when available 8. Load `/claude-code?source=codex_cli&tab=analytics&days=90` directly and confirm source/tab/range are selected 9. Confirm `OpenAI API` / `GPT` source shows data only when backend reports an owned event source 10. Confirm mobile layout has no overlapping text and provider/tabs/range controls remain usable #### New opportunity to add - Add a small `Compare sources` summary when more than one source has data: - sessions by source - tool calls by source - most-used tool per source - last activity per source - This should be a compact overview, not a full comparison dashboard yet. ---