feat: consolidate flows UI into collapsible sidebar with tabs#74
Open
tekram wants to merge 8 commits intogrp06:mainfrom
Open
feat: consolidate flows UI into collapsible sidebar with tabs#74tekram wants to merge 8 commits intogrp06:mainfrom
tekram wants to merge 8 commits intogrp06:mainfrom
Conversation
- Cron management page (/cron): create/edit/delete/toggle scheduled jobs, reports viewer per job, configurable Telegram delivery - TODO assignments: assign project-tagged items to Claude Code from Studio - Sessions page (/sessions): view active/paused/completed Claude sessions - Captures/TODOs page (/todos): manage items from CAPTURES.md with assign button - Dashboard widgets: CronWidget, SessionsWidget, TodosWidget on main page - API routes: /api/cron, /api/cron/reports, /api/assign, /api/sessions, /api/todos Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…ction - Cron: "Run Now" button on job cards, spawns job immediately - Sessions: rewrite parser to track each START as separate instance (fixes collapsed/missing sessions bug) - Sessions: auto-detect stale sessions (4+ hours with no update) - Sessions: add status legend explaining each state - Sessions: fix React keys for duplicate project names Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Stale check now uses lastActivityTime instead of startTime, so resumed sessions reset the 4-hour clock - Hide interrupted and completed sessions older than 24 hours from the dashboard (still in sessions.log for history) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Previously, Studio's cron page wrote directly to jobs.json, bypassing the gateway. This caused sync issues - jobs added in Studio wouldn't appear in the gateway dashboard and vice versa. Changes: - Add updateCronJob() function to types.ts for cron.update RPC - Add outputDir field to CronJobSummary type (returned by gateway) - Remove file-based /api/cron route (replaced by gateway RPC) - Cron page now uses GatewayClient for all operations Result: One source of truth. Jobs stay synchronized between Studio and gateway dashboard. Both UIs now work together seamlessly. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Redesigned the Studio UI to provide a unified automation/monitoring interface without requiring page navigation. All flows features are now accessible from the main agent view via a collapsible right sidebar. Before: - Three banner widgets (Sessions, TODOs, Cron) took vertical space - Separate pages required navigation (/cron, /sessions, /todos) - Context switching between agent work and automation management After: - Single collapsible sidebar (480px) on the right edge - Three tabs: Cron Jobs, Sessions, Captures - All functionality accessible without leaving agent interface - Toggle button for show/hide (starts open by default) New Components: - FlowsSidebar: Main container with tab navigation - CronTab: Full cron job management (migrated from /cron page) - SessionsTab: Real-time Claude Code session tracking - TodosTab: Captures from Telegram with quick-add and checkboxes Deleted: - Page routes: /cron, /sessions, /todos - Widget components: SessionsWidget, TodosWidget, CronWidget Benefits: - Reduced UI clutter (no banner widgets) - Better workflow (no navigation required) - Consistent layout (sidebar pattern like VS Code/Cursor) - Room for future expansion (more tabs as needed) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 941a66749c
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
|
|
||
| function isSafePath(filePath: string): boolean { | ||
| const resolved = path.resolve(filePath); | ||
| return ALLOWED_BASES.some(base => resolved.startsWith(path.resolve(base))); |
There was a problem hiding this comment.
isSafePath currently allows any path whose resolved string starts with the allowed base, which also matches sibling paths like .../workspace-backup and lets /api/cron/reports read files outside the intended workspace tree when dir is user-controlled. This should validate a real path boundary (resolved === base or resolved.startsWith(base + path.sep)) rather than a raw prefix match.
Useful? React with 👍 / 👎.
| } | ||
|
|
||
| return ( | ||
| <div className="fixed top-14 right-0 bottom-0 w-[480px] bg-background border-l border-border z-[170] flex flex-col shadow-xl"> |
There was a problem hiding this comment.
The sidebar uses z-[170], which is above the existing full-screen lock modals in src/app/page.tsx (z-[100] for create/restart blocks), so users can still interact with cron/todos while the app is supposed to be frozen. This bypasses the mutation safety lock and can trigger side effects during critical restart/create windows.
Useful? React with 👍 / 👎.
Implements comprehensive session management system with rich context, categorization, and analytics capabilities. Backend enhancements: - Add InterruptReason type with 6 categories (manual, crash, superseded, timeout, dismissed, unknown) - Auto-convert stale (4h+ inactive) sessions to exited with timeout reason - Calculate duration for all ended sessions - Add POST /api/sessions endpoint for dismiss/markDone/addNote actions - Add /api/sessions/stats endpoint with comprehensive analytics - Add /api/sessions/export endpoint (JSON/CSV formats) UI enhancements: - Rich session cards with color-coded reason icons and labels - Duration badges and last activity timestamps - Action buttons (Mark Done, Dismiss) on hover - Show/hide dismissed sessions toggle - Stats button to view analytics dashboard - Export dropdown for JSON/CSV download - Auto-refresh on tab selection Documentation: - Add CLAUDE.md with repository-specific guidance - Add PLAN-advanced-session-tracking.md with implementation details Files: - Modified: src/types/sessions.ts, src/app/api/sessions/route.ts, src/components/FlowsSidebar.tsx, src/components/FlowsSidebar/SessionsTab.tsx - Created: src/lib/sessions/formatting.ts, src/lib/sessions/actions.ts, src/app/api/sessions/stats/route.ts, src/app/api/sessions/export/route.ts, CLAUDE.md, PLAN-advanced-session-tracking.md Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Notes that this is a personal fork (tekram/openclaw-studio) maintained alongside contributing to the upstream open-source project (grp06/openclaw-studio). Documents development approach and workflow for balancing fork-specific customizations with upstream contributions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
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
1 participant
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.
Summary
Redesigned the Studio UI to consolidate all automation/monitoring features (Cron Jobs, Sessions, Captures) into a unified collapsible sidebar, plus added comprehensive session tracking with analytics and export capabilities.
Supersedes #73 with a better UX approach.
Screenshots
Flows Sidebar - Cron Jobs Tab
Full cron job management with schedule builder, Telegram notifications, and reports viewer.
Sessions Tab
Real-time Claude Code activity tracking with enhanced session management:
Captures Tab
Telegram captures with quick-add input, checkboxes, and delete actions.
Sidebar Collapsed
Toggle button on the right edge when sidebar is closed.
Changes
Gateway Consolidation (Commit 1)
UI Redesign (Commit 2)
Advanced Session Tracking (Commits 3-4)
/api/sessions/statswith comprehensive statistics--reasonflag in session loggingNew API Endpoints
POST /api/sessions- Session actions (dismiss, markDone, addNote)GET /api/sessions/stats- Session analytics (total, by status, by project, interruption reasons)GET /api/sessions/export- Export sessions (JSON or CSV format)Benefits
Testing
Documentation
CLAUDE.mdwith repository-specific guidance for future developmentPLAN-advanced-session-tracking.mdwith implementation detailsBreaking Changes
None - only internal UI reorganization and additive features. All existing API routes preserved.
Files Changed
Total: 10 files changed, 1,690 insertions (+), 51 deletions (-)
Modified:
src/types/sessions.ts- Extended session typessrc/app/api/sessions/route.ts- Enhanced with POST endpointsrc/components/FlowsSidebar.tsx- Minor updatesrc/components/FlowsSidebar/SessionsTab.tsx- Major enhancementsCreated:
src/lib/sessions/formatting.ts- Display utilitiessrc/lib/sessions/actions.ts- API clientsrc/app/api/sessions/stats/route.ts- Analytics endpointsrc/app/api/sessions/export/route.ts- Export endpointCLAUDE.md- Repository guidePLAN-advanced-session-tracking.md- Implementation planCommits
🤖 Generated with Claude Code