feat(agent): resizable, undockable assistant panel (#1467)
* feat(agent): resizable, undockable assistant panel User report: the assistant chat sheet sometimes covers the page content the user is asking about, with no way to resize or move it. - Docked mode is now drag-resizable from its left edge (380-800px, clamped so the page keeps a 480px readable column) and the page reflows beside it via the existing --agent-dock-w reservation. - Expanded (focus) mode reserves page margin like the compact dock instead of overlaying up to 1100px of the page. - New undock toggle turns the sheet into a floating window that can be dragged by its header and resized from edges/corners, clamped so the header always stays reachable. Desktop only; mobile keeps the full-screen sheet. - Geometry (mode, dock width, float rect) persists per user in user_preferences.ui_state.agent_panel, server-seeded to avoid a first-paint jump; the ui-state API schema gains a strict agent_panel key with nested merge. - Pure clamp/resize math lives in lib/agent-panel/geometry with unit tests; drag frames write styles imperatively and commit one preference update on release. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(agent): address review findings on panel drag, a11y, and persistence CodeRabbit round 1, all six findings fixed: - Bind drag listeners to window (plus lostpointercapture) so a failed pointer capture or mid-drag unmount can never leave the transition suppression and data-agent-resizing stuck for the session. - Keyboard resize now steps from the visible width (expandedW in focus mode) instead of jumping to the persisted dock width. - The width handle exposes window-splitter semantics: aria-valuenow, aria-valuemin, aria-valuemax. - --nav-w is read reactively via a MutationObserver on #dash-shell instead of computed-style reads in the render body and per drag frame. - The ui-state POST in updatePanelPrefs gets a 300ms trailing debounce (state stays immediate) so key auto-repeat cannot produce one read-merge-write per repeat; pending write flushes on unmount. - globals.css keeps one :root token block; the agent-resizing rule moved below it. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(agent): filter drag events by pointer id, clear fired debounce timer CodeRabbit round 2, both findings fixed: - Window-level drag listeners now ignore events from pointers other than the initiating one, so a second touch or pen cannot move the panel or end the first pointer's drag. - The persist debounce timer ref is nulled when the timer fires, so the unmount flush only writes genuinely pending values instead of replaying an already-persisted (possibly stale) geometry. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Mattsson
co-authored by
Claude Fable 5
Claude Fable 5
parent
39f4ecdad4
commit
b4b7549004
@@ -47,6 +47,74 @@ describe('POST /api/user/ui-state', () => {
|
||||
expect(res.status).toBe(400)
|
||||
})
|
||||
|
||||
it('returns 400 on unknown agent_panel keys (strict schema)', async () => {
|
||||
const res = await POST(request({ agent_panel: { mode: 'docked', evil: 1 } }))
|
||||
expect(res.status).toBe(400)
|
||||
})
|
||||
|
||||
it('returns 400 on an invalid agent_panel mode', async () => {
|
||||
const res = await POST(request({ agent_panel: { mode: 'popup' } }))
|
||||
expect(res.status).toBe(400)
|
||||
})
|
||||
|
||||
it('returns 400 on fractional float pixels', async () => {
|
||||
const res = await POST(
|
||||
request({ agent_panel: { float: { x: 10.5, y: 0, w: 400, h: 500 } } }),
|
||||
)
|
||||
expect(res.status).toBe(400)
|
||||
})
|
||||
|
||||
it('returns 400 on an incomplete float rect', async () => {
|
||||
const res = await POST(request({ agent_panel: { float: { x: 10, y: 0, w: 400 } } }))
|
||||
expect(res.status).toBe(400)
|
||||
})
|
||||
|
||||
it('merges agent_panel keys instead of replacing the object', async () => {
|
||||
enqueue({
|
||||
data: {
|
||||
ui_state: {
|
||||
agent_panel: { mode: 'docked', dock_width: 620 },
|
||||
},
|
||||
},
|
||||
})
|
||||
enqueue({ data: null })
|
||||
|
||||
const { status, body } = await parseJsonResponse<{
|
||||
data: { ui_state: { agent_panel: Record<string, unknown> } }
|
||||
}>(await POST(request({ agent_panel: { mode: 'floating' } })))
|
||||
|
||||
expect(status).toBe(200)
|
||||
// dock_width survives a mode-only patch: undocking must not forget the
|
||||
// user's chosen docked width.
|
||||
expect(body.data.ui_state.agent_panel).toEqual({ mode: 'floating', dock_width: 620 })
|
||||
})
|
||||
|
||||
it('accepts a full agent_panel geometry payload', async () => {
|
||||
enqueue({ data: null })
|
||||
enqueue({ data: null })
|
||||
|
||||
const { status, body } = await parseJsonResponse<{
|
||||
data: { ui_state: { agent_panel: Record<string, unknown> } }
|
||||
}>(
|
||||
await POST(
|
||||
request({
|
||||
agent_panel: {
|
||||
mode: 'floating',
|
||||
dock_width: 480,
|
||||
float: { x: 1200, y: 300, w: 420, h: 640 },
|
||||
},
|
||||
}),
|
||||
),
|
||||
)
|
||||
|
||||
expect(status).toBe(200)
|
||||
expect(body.data.ui_state.agent_panel).toEqual({
|
||||
mode: 'floating',
|
||||
dock_width: 480,
|
||||
float: { x: 1200, y: 300, w: 420, h: 640 },
|
||||
})
|
||||
})
|
||||
|
||||
it('merges the patch into the existing ui_state', async () => {
|
||||
// select existing row
|
||||
enqueue({
|
||||
|
||||
@@ -16,6 +16,25 @@ const BodySchema = z
|
||||
.strict()
|
||||
.optional(),
|
||||
create_mode: z.record(z.string(), z.string().max(64)).optional(),
|
||||
// Assistant panel geometry. Bounds are deliberately looser than the
|
||||
// client's viewport clamps: a size saved on a large screen must round-trip
|
||||
// even when later read on a small one (the client re-clamps on use).
|
||||
agent_panel: z
|
||||
.object({
|
||||
mode: z.enum(['docked', 'floating']).optional(),
|
||||
dock_width: z.number().int().min(320).max(1600).optional(),
|
||||
float: z
|
||||
.object({
|
||||
x: z.number().int().min(-8000).max(16000),
|
||||
y: z.number().int().min(-8000).max(16000),
|
||||
w: z.number().int().min(280).max(4000),
|
||||
h: z.number().int().min(280).max(4000),
|
||||
})
|
||||
.strict()
|
||||
.optional(),
|
||||
})
|
||||
.strict()
|
||||
.optional(),
|
||||
})
|
||||
.strict()
|
||||
|
||||
@@ -57,6 +76,9 @@ export async function POST(request: Request) {
|
||||
...(patch.create_mode
|
||||
? { create_mode: { ...current.create_mode, ...patch.create_mode } }
|
||||
: {}),
|
||||
...(patch.agent_panel
|
||||
? { agent_panel: { ...current.agent_panel, ...patch.agent_panel } }
|
||||
: {}),
|
||||
}
|
||||
|
||||
const { error: upsertError } = await supabase
|
||||
|
||||
Reference in New Issue
Block a user