fix(ui): improve routine properties panel and history UX #5703

Thinking Path

• Paperclip orchestrates AI agents for zero-human companies.
• Routines are the recurring-work surface where operators configure schedules, executions, activity, and revision history.
• The routine detail view uses a contextual right properties panel for triggers, runs, activity, and history.
• That panel was too cramped for routine workflows: the routine header could collapse at constrained widths, and revision previews/comparisons were trying to live inside the same narrow panel.
• This pull request makes the routine properties panel wider and responsive without changing the default panel behavior for other pages.
• It also moves routine revision viewing and comparison into focused dialogs so history stays usable instead of rendering dense revision content inside the right panel.
• The benefit is a cleaner routine workflow: triggers remain scannable, the main routine stays readable, and revisions can be inspected, compared, and restored without fighting the sidebar width.

What Changed

• Added optional per-panel layout options for storage key, default width, min/max width, and compact viewport behavior.
• Set the routine properties panel to use its own 400px default width and persistence key, while compacting to 320px on narrower viewports.
• Made the shared resizable sidebar support right-side panes, custom width bounds, compact max width, and keyboard resizing.
• Fixed the routine detail header so title text and action controls remain readable beside the properties panel at constrained widths.
• Reworked routine history so selecting a revision opens a read-only snapshot dialog instead of trying to render the whole revision inside the right panel.
• Added a side-by-side current-vs-selected revision comparison dialog with clearer diff markers for structured fields, triggers, and variables.
• Added focused tests for the resizable pane and routine history behavior.

Verification

• pnpm vitest run ui/src/components/RoutineHistoryTab.test.tsx ui/src/components/ResizableSidebarPane.test.tsx
• pnpm --filter @paperclipai/ui typecheck
• pnpm -r typecheck
• git diff --check
• Browser E2E in TestCo at http://localhost:3100/TES/dashboard:
  • created and edited a routine
  • added, edited, toggled, and deleted schedule triggers
  • paused automation
  • ran the routine and stopped the live run
  • verified runs, activity, history, snapshot dialog, compare mode, restore confirmation, routine list, recent runs, row actions, panel close/reopen, and constrained-width layout

Screenshots

Trigger Panel Width

Before	After

History Panel

Before, selecting a revision attempted to show dense revision content inside the already narrow right panel. After, history remains a compact list and revision details open separately.

Before	After

Revision Snapshot

The selected revision now opens in a dedicated read-only dialog instead of crowding the properties panel.

Revision Compare

Historical revisions can be compared side-by-side with the current revision, including changed structured fields and trigger differences.

Risks

• Low to moderate UI risk: the shared resizable pane API gained optional layout parameters, but existing callers keep the previous defaults.
• Routine history now uses dialogs for revision viewing and comparison, so reviewers should confirm the new workflow feels right for restore and compare.
• Routine panel width now persists under a routine-specific key, so previous global properties panel width preferences do not carry into routines.

For core feature work, check ROADMAP.md first and discuss it in #dev before opening the PR. Feature PRs that overlap with planned core work may need to be redirected — check the roadmap first. See CONTRIBUTING.md.

Model Used

• OpenAI Codex, GPT-5 coding agent in Codex Desktop, tool-enabled with local shell, git, and in-app browser automation. Context window size was not exposed in this session.

Checklist

• I have included a thinking path that traces from project context to this change
• I have specified the model used (with version and capability details)
• I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work
• I have run tests locally and they pass
• I have added or updated tests where applicable
• If this change affects the UI, I have included before/after screenshots
• I have updated relevant documentation to reflect my changes
• I have considered and documented any risks above
• I will address all Greptile and reviewer comments before requesting merge

Cutter Summary

The properties panel close button now carries an accessible name where it previously had none. Clicking a revision row renders the historical view inline within the properties panel instead of opening a dialog, and the compare action now presents a side-by-side two-column layout in place of the prior picker-and-line-diff modal.