TUI Implementation #9

Aarekaz · 2025-12-11T02:05:43Z

This pull request introduces a new interactive TUI (Text User Interface) dashboard for managing and browsing local sessions, along with the necessary CLI command and supporting UI components. The dashboard provides a user-friendly way to view session statistics, browse sessions, filter/search, and navigate using keyboard shortcuts. The implementation includes new React components, hooks, and updates to documentation and dependencies.

Major additions and changes:

1. Interactive Dashboard Feature

Added a new CLI command sessionbase dashboard to launch an interactive dashboard for session management, including keyboard navigation and platform filtering. (README.md, src/commands/dashboard.ts, src/index.ts) [1] [2] [3] [4]

2. Dashboard UI Architecture

Implemented the main React app (App.tsx) for the dashboard, handling state, keyboard shortcuts, view switching (dashboard/sessions), search, filtering, and session detail navigation.
Added a MainContent component to switch between the dashboard view and sessions view based on user input.
Introduced a Sidebar and other supporting UI elements for navigation and context (not shown in the diff but referenced in App.tsx).

3. Session Browsing and Search

Created a SessionList component for listing sessions with platform icons, previews, and details, supporting navigation and paging.
Added a SearchBar component for searching/filtering sessions interactively.

4. Dashboard Statistics and Visualization

Implemented an ActivityHeatmap component to visualize session activity over the last 28 days, showing active days and intensity.
Added a reusable BorderedBox component for consistent UI framing.

5. Dependency and Documentation Updates

Updated package.json to include new dependencies required for the TUI (e.g., ink, react, date-fns, and related types).
Expanded the README.md with usage instructions, dashboard features, and keyboard shortcuts. [1] [2]

These changes collectively provide a robust, interactive way for users to manage and explore their sessions directly from the terminal.

- Introduced state management for detail expansion and pagination in the App component. - Updated the SessionsView to conditionally render either a preview or a full transcript based on the detailExpanded state. - Implemented a new function to handle the rendering of the full transcript with pagination support. - Enhanced the useSessionDetail hook to include fullLines for detailed session data.

owenmccadden · 2025-12-12T06:11:48Z

This is very cool, wonder if we could make it more central / a bigger part of the dashboard?

Nit. I think the spacing might be a bit off here – should the [1] go left of "dashboard"?

I think the q option to quit conflicts with the q option for Q chat if you go to the "sessions" menu

Page 21 / 10 (200 lines) • use [[/] or PageUp/PageDown]

It looks like I can exceed the boundaries here, i.e. pagedown past page 10. Also not super clear to me what the use [/] option means. I tried to use / but that triggers the search menu.

I wonder if we should show the full transcript in the sessions view of the dashboard, it feels a bit cluttered for long sessions. Maybe instead have a key shortcut to upload or view in the web UI?

- Updated README to include detailed descriptions of the interactive TUI dashboard and its features. - Added a new file to .gitignore for todo.md. - Improved session listing in the TUI by adding date grouping for better organization. - Enhanced the SessionsView layout for improved readability and navigation. - Added keyboard shortcuts and usage hints for a better user experience.

- Updated ActivityHeatmap to use double-width blocks for better visual representation of activity levels. - Adjusted layout in DashboardView to provide a more compact and informative header with inline stats. - Added calculation for activity streak and average sessions per active day in DashboardView. - Improved platform breakdown and recent sessions display for clearer insights.

- Enhanced search focus handling in the App component to switch views more intuitively. - Updated Sidebar component to include separators for better visual organization. - Improved navigation menu layout and shortcut display for clearer user guidance. - Compactified authentication status display for a cleaner look.

Aarekaz · 2025-12-17T05:53:33Z

@owenmccadden, working on some design improvements.

Dashboard:

Session view:

Transcript:

I did fix the q issue too.

- Changed Sidebar component to use minWidth for better responsiveness. - Reduced maxHeight in SessionsView's SessionList for a more compact display.

Copilot

Pull request overview

This PR introduces a comprehensive interactive TUI (Text User Interface) dashboard for SessionBase, enabling users to browse, search, filter, and manage AI coding sessions directly from the terminal. The implementation includes a full React-based interface using Ink, custom hooks for data management, and extensive keyboard navigation support.

Key changes:

Interactive dashboard command with real-time session statistics, activity heatmaps, and platform breakdowns
Sessions browser with search, filtering, sorting, and detailed session views
Keyboard-first navigation system with shortcuts for all major operations

Reviewed changes

Copilot reviewed 17 out of 21 changed files in this pull request and generated 28 comments.

Show a summary per file

File	Description
src/tui/App.tsx	Main React application orchestrating state management, keyboard input handling, and view routing
src/tui/views/DashboardView.tsx	Dashboard statistics view with activity heatmap and platform breakdown
src/tui/views/SessionsView.tsx	Sessions browser with search, filters, and split-screen detail view
src/tui/components/SessionList.tsx	Session listing component with date grouping and rich metadata display
src/tui/components/SearchBar.tsx	Interactive search bar component with focus management
src/tui/components/Sidebar.tsx	Navigation sidebar with auth status and keyboard shortcuts reference
src/tui/components/ActivityHeatmap.tsx	Visual heatmap showing session activity over 28 days
src/tui/components/StatsCard.tsx	Reusable statistics card with number formatting
src/tui/components/Box.tsx	Bordered box wrapper component for consistent UI framing
src/tui/components/MainContent.tsx	Router component switching between dashboard and sessions views
src/tui/hooks/useSessionData.ts	Data fetching hook managing sessions, stats, and auth state
src/tui/hooks/useSessionDetail.ts	Session detail loading hook with caching and platform-specific parsing
src/tui/types.ts	TypeScript type definitions for TUI state and data structures
src/commands/dashboard.ts	CLI command implementation launching the Ink-based TUI
src/index.ts	CLI command registration for the new dashboard command
package.json	Dependencies added for React, Ink, date-fns, and related UI libraries
README.md	Comprehensive documentation of dashboard features and keyboard shortcuts
.gitignore	Added todo.md to ignored files

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-17T06:11:22Z

src/tui/hooks/useSessionDetail.ts

+        // #region agent log
+        fetch('http://127.0.0.1:7242/ingest/2512feb5-b2b3-442f-865d-ae88255c8b60',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({sessionId:'debug-session',runId:'m-toggle',hypothesisId:'H3',location:'useSessionDetail',message:'detail-loaded',data:{filePath:session.filePath,previewCount:previewLines.length,fullCount:fullLines.length},timestamp:Date.now()})}).catch(()=>{});
+        // #endregion
+        if (!cancelled) {
+          setDetail(data);
+        }
+      } catch (err: any) {
+        if (!cancelled) {
+          setError(err?.message || 'Failed to load session detail');
+          // #region agent log
+          fetch('http://127.0.0.1:7242/ingest/2512feb5-b2b3-442f-865d-ae88255c8b60',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({sessionId:'debug-session',runId:'m-toggle',hypothesisId:'H3',location:'useSessionDetail',message:'detail-error',data:{filePath:session?.filePath || null,error:err?.message || 'unknown'},timestamp:Date.now()})}).catch(()=>{});
+          // #endregion


This file contains hardcoded debugging/telemetry code that sends data to a localhost endpoint. These fetch calls appear to be agent logging for development purposes and should be removed before merging to production. The hardcoded endpoint and UUID will cause unnecessary network requests in production.

Suggested change

// #region agent log

fetch('http://127.0.0.1:7242/ingest/2512feb5-b2b3-442f-865d-ae88255c8b60',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({sessionId:'debug-session',runId:'m-toggle',hypothesisId:'H3',location:'useSessionDetail',message:'detail-loaded',data:{filePath:session.filePath,previewCount:previewLines.length,fullCount:fullLines.length},timestamp:Date.now()})}).catch(()=>{});

// #endregion

if (!cancelled) {

setDetail(data);

}

} catch (err: any) {

if (!cancelled) {

setError(err?.message || 'Failed to load session detail');

// #region agent log

fetch('http://127.0.0.1:7242/ingest/2512feb5-b2b3-442f-865d-ae88255c8b60',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({sessionId:'debug-session',runId:'m-toggle',hypothesisId:'H3',location:'useSessionDetail',message:'detail-error',data:{filePath:session?.filePath || null,error:err?.message || 'unknown'},timestamp:Date.now()})}).catch(()=>{});

// #endregion

if (!cancelled) {

setDetail(data);

}

} catch (err: any) {

if (!cancelled) {

setError(err?.message || 'Failed to load session detail');

Copilot · 2025-12-17T06:11:22Z

src/tui/views/SessionsView.tsx

+  const platforms = [
+    { key: 'all', label: 'All', emoji: '📋' },
+    { key: 'claude-code', label: 'Claude', emoji: '🟠' },
+    { key: 'gemini-cli', label: 'Gemini', emoji: '🔷' },
+    { key: 'qchat', label: 'Q Chat', emoji: '🤖' },
+    { key: 'codex', label: 'Codex', emoji: '💜' },
+  ];


The platform configuration array with keys, labels, and emojis is duplicated across multiple files (DashboardView.tsx, SessionList.tsx, and SessionsView.tsx). This should be extracted to a shared constants file to maintain consistency and make updates easier.

Copilot · 2025-12-17T06:11:23Z

src/tui/views/SessionsView.tsx

+  detailOpen: boolean;
+  detailExpanded: boolean;
+  detailPage: number;
+  detail?: any;


The type 'any' is used for the 'detail' prop. Consider creating a proper interface or importing SessionDetailData from the useSessionDetail hook for better type safety.

Copilot · 2025-12-17T06:11:23Z

src/tui/components/MainContent.tsx

+  detailOpen: boolean;
+  detailExpanded: boolean;
+  detailPage: number;
+  detail?: any;


The type 'any' is used for the 'detail' prop. This should use the SessionDetailData type from the useSessionDetail hook for better type safety.

Copilot · 2025-12-17T06:11:23Z

src/tui/components/Sidebar.tsx

+
+      {/* Separator */}
+      <Box marginBottom={1}>
+        <Text dimColor>{'─'.repeat(18)}</Text>


The magic number 18 for separator width is hardcoded. This should match the minWidth property (20) minus padding, or be calculated dynamically to ensure the separator line properly fits within the sidebar.

Copilot · 2025-12-17T06:11:28Z

package.json

  },
  "dependencies": {
    "@modelcontextprotocol/sdk": "^1.17.1",
+    "@types/react": "^19.2.7",


The @types/react package is listed in dependencies rather than devDependencies. Type definitions are typically development dependencies as they are not needed at runtime. Consider moving this to devDependencies unless there's a specific reason it needs to be a runtime dependency.

Copilot · 2025-12-17T06:11:28Z

src/tui/views/SessionsView.tsx

+            >
+              <Text bold color="cyan">Session Details</Text>
+              <Text dimColor>
+                m: more/less • [{`[`}/{`]`} or PageUp/PageDown]: page transcript • Esc: close detail


The keyboard shortcut display uses escaped square brackets ('[[]' and '[]]') which may be confusing. Consider simplifying this to make it more readable, or add a comment explaining this escaping is necessary for the template literal.

Suggested change

m: more/less • [{`[`}/{`]`} or PageUp/PageDown]: page transcript • Esc: close detail

m: more/less • [ [ / ] or PageUp/PageDown ]: page transcript • Esc: close detail

Copilot · 2025-12-17T06:11:28Z

src/tui/components/Box.tsx

+  height,
+  padding = 1,
+}) => {
+  const colorFn = (chalk as any)[borderColor] || chalk.cyan;


Unused variable colorFn.

Copilot · 2025-12-17T06:11:28Z

src/tui/components/ActivityHeatmap.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { format, getDay } from 'date-fns';


Unused import format.

Suggested change

import { format, getDay } from 'date-fns';

import { getDay } from 'date-fns';

Copilot · 2025-12-17T06:11:29Z

src/tui/components/ActivityHeatmap.tsx

+  };
+
+  // Count active days (days with at least one session)
+  const activeDays = last28Days.filter(d => d.count > 0).length;


Unused variable activeDays.

Suggested change

const activeDays = last28Days.filter(d => d.count > 0).length;

…ed organization and responsiveness - Moved platform emoji and name functions to constants for better code reuse. - Updated Sidebar component to dynamically calculate separator width for consistent layout. - Replaced hardcoded platform data in SessionsView with a centralized PLATFORMS constant for easier maintenance. - Removed redundant platform functions from SessionList and DashboardView for cleaner code.

Aarekaz added 6 commits December 10, 2025 16:39

initial design for a TUI

f39f3c3

added initial details pane for sessions

538facf

Refine global quit shortcut to avoid conflicts in sessions view

7826437

added transcript view

ef3e696

added enter to search

a1a7676

Aarekaz marked this pull request as draft December 11, 2025 02:06

desloped

e2d6254

Aarekaz linked an issue Dec 11, 2025 that may be closed by this pull request

sb push UX enhancement #5

Open

Aarekaz added the enhancement New feature or request label Dec 11, 2025

Aarekaz self-assigned this Dec 11, 2025

Aarekaz added 4 commits December 16, 2025 19:57

Refactor SearchBar component for improved focus handling

144db8d

Aarekaz added 2 commits December 17, 2025 00:53

Update Sidebar and SessionsView components for layout adjustments

a2cb261

- Changed Sidebar component to use minWidth for better responsiveness. - Reduced maxHeight in SessionsView's SessionList for a more compact display.

updated some mirnor issues and then the screenshot too for the readme

96f5054

Aarekaz marked this pull request as ready for review December 17, 2025 05:57

Aarekaz requested a review from Copilot December 17, 2025 05:57

Copilot started reviewing on behalf of Aarekaz December 17, 2025 05:58 View session

Copilot AI reviewed Dec 17, 2025

View reviewed changes

	m: more/less • [{`[`}/{`]`} or PageUp/PageDown]: page transcript • Esc: close detail
	m: more/less • [ [ / ] or PageUp/PageDown ]: page transcript • Esc: close detail

	import { format, getDay } from 'date-fns';
	import { getDay } from 'date-fns';

TUI Implementation #9

Are you sure you want to change the base?

TUI Implementation #9

Uh oh!

Conversation

Aarekaz commented Dec 11, 2025

Uh oh!

owenmccadden commented Dec 12, 2025

Uh oh!

Aarekaz commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Aarekaz commented Dec 17, 2025 •

edited

Loading