[P3] App Config detail: full page instead of drawer #114

New Issue

claude · 2026-04-01T22:55:48+02:00

claude commented

2026-04-01 22:55:48 +02:00

Parent Epic

Problem

The App Config detail uses a right-side drawer overlay. The drawer can't be resized, and the content (settings, traces & taps, route recording with 24 toggles) is deep enough to require extensive scrolling within a narrow panel.

Current State (screenshot: `ux-audit/18-appconfig-detail.png`)

Slide-out drawer from right side
Fixed width, cannot be resized
Contains: Settings badges, Traces & Taps table, Route Recording toggles (24 routes)
Must scroll within the drawer to see all content
Drawer overlays the config list table

Proposed Solution

Option A: Full Page Detail (Recommended)

Navigate to a dedicated detail page: /admin/appconfig/sample-app

Admin / App Config / sample-app                    [← Back to list]

┌─ Settings ──────────────────────────────────────────────┐
│  APP LOG  AGENT LOG  ENGINE   PAYLOAD   METRICS  COMPR  │
│  [INFO]   [INFO]     [REG]    [NONE]    [ON]     [OFF]  │
│                                                         │
│  SAMPLING RATE: 1                              [✏ Edit] │
└─────────────────────────────────────────────────────────┘

┌─ Traces & Taps ──────────────── 2 traced · 1 tap ──────┐
│  ROUTE                PROCESSOR    CAPTURE    TAPS      │
│  complex-fulfillment  setHeader1   BOTH       EXAMPLE   │
│  complex-fulfillment  wireTap1     BOTH       —         │
│                                          [+ Add Trace]  │
└─────────────────────────────────────────────────────────┘

┌─ Route Recording ──────────── 24 of 24 recording ───────┐
│  ☑ Select all                                           │
│  ROUTE                                     RECORDING    │
│  complex-fulfillment                       ● ON         │
│  fulfillment-init                          ● ON         │
│  audit-log                                 ● ON         │
│  ...                                                    │
└─────────────────────────────────────────────────────────┘

This gives full-width layout for the config, better readability, and supports browser back navigation.

Option B: Resizable Drawer

Keep the drawer but make it resizable (drag handle on left edge) and wider by default. Less disruptive but still limited.

Recommendation

Option A — the config detail has enough depth to warrant its own page. The drawer pattern works for quick-peek scenarios (exchange detail already uses split pane well), but config editing needs full focus.

Acceptance Criteria

App config detail has full-width layout (page or wide panel)
Route recording toggles are readable without scrolling in a narrow panel
Browser back button returns to config list
URL reflects selected app config (for shareable links)

## Parent Epic #100 ## Problem The App Config detail uses a right-side drawer overlay. The drawer can't be resized, and the content (settings, traces & taps, route recording with 24 toggles) is deep enough to require extensive scrolling within a narrow panel. ## Current State (screenshot: `ux-audit/18-appconfig-detail.png`) - Slide-out drawer from right side - Fixed width, cannot be resized - Contains: Settings badges, Traces & Taps table, Route Recording toggles (24 routes) - Must scroll within the drawer to see all content - Drawer overlays the config list table ## Proposed Solution ### Option A: Full Page Detail (Recommended) Navigate to a dedicated detail page: `/admin/appconfig/sample-app` ``` Admin / App Config / sample-app [← Back to list] ┌─ Settings ──────────────────────────────────────────────┐ │ APP LOG AGENT LOG ENGINE PAYLOAD METRICS COMPR │ │ [INFO] [INFO] [REG] [NONE] [ON] [OFF] │ │ │ │ SAMPLING RATE: 1 [✏ Edit] │ └─────────────────────────────────────────────────────────┘ ┌─ Traces & Taps ──────────────── 2 traced · 1 tap ──────┐ │ ROUTE PROCESSOR CAPTURE TAPS │ │ complex-fulfillment setHeader1 BOTH EXAMPLE │ │ complex-fulfillment wireTap1 BOTH — │ │ [+ Add Trace] │ └─────────────────────────────────────────────────────────┘ ┌─ Route Recording ──────────── 24 of 24 recording ───────┐ │ ☑ Select all │ │ ROUTE RECORDING │ │ complex-fulfillment ● ON │ │ fulfillment-init ● ON │ │ audit-log ● ON │ │ ... │ └─────────────────────────────────────────────────────────┘ ``` This gives full-width layout for the config, better readability, and supports browser back navigation. ### Option B: Resizable Drawer Keep the drawer but make it resizable (drag handle on left edge) and wider by default. Less disruptive but still limited. ## Recommendation **Option A** — the config detail has enough depth to warrant its own page. The drawer pattern works for quick-peek scenarios (exchange detail already uses split pane well), but config editing needs full focus. ## Acceptance Criteria - [ ] App config detail has full-width layout (page or wide panel) - [ ] Route recording toggles are readable without scrolling in a narrow panel - [ ] Browser back button returns to config list - [ ] URL reflects selected app config (for shareable links)

claude added the ui ux labels 2026-04-01 22:55:48 +02:00

claude referenced this issue

2026-04-01 22:56:35 +02:00

Epic: UX Audit — PMF Readiness for First Market Offer #100

claude commented

2026-04-01 23:11:47 +02:00

Design Specification

New route: /admin/appconfig/:appName. Full-page detail replaces drawer. Breadcrumb: Admin / App Config / sample-app.

Layout: Toolbar (version + updated time + edit button), Settings section (4-col grid with badge-with-edit pattern), Traces & Taps table (full width), Route Recording (full width with Select All checkbox, search filter, DataTable with route + toggle).

Click row in AppConfigPage navigates to detail page instead of opening drawer. Browser back returns to list.

## Design Specification New route: `/admin/appconfig/:appName`. Full-page detail replaces drawer. Breadcrumb: `Admin / App Config / sample-app`. Layout: Toolbar (version + updated time + edit button), Settings section (4-col grid with badge-with-edit pattern), Traces & Taps table (full width), Route Recording (full width with Select All checkbox, search filter, DataTable with route + toggle). Click row in AppConfigPage navigates to detail page instead of opening drawer. Browser back returns to list.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: cameleer/cameleer-server#114

[P3] App Config detail: full page instead of drawer #114