feat(ui): redesign to Trail Reader centered layout (#1)

* feat(ui): redesign to Trail Reader centered layout

- Remove sidebar in favor of centered layout (max-width 800px)
- Add Forest Trail color palette with forest greens and amber accents
- Add new typography: Fraunces (display), IBM Plex Sans (body), JetBrains Mono (code)
- Implement session grouping by date (Today, Yesterday, This Week, Older)
- Add micro-interactions: staggered card reveal, breathing status indicators, hover lift
- Add subtle grain texture overlay
- Update E2E tests for new selectors and add coverage for date grouping and filter counts
- Fix modal and detail-view visibility conflicts with hidden class
- Add null checks for removed sidebar elements

* feat(ui): improve session browsing and bash blocks

Add filters drawer (tags/directories/projects) with chips and grouping toggle; surface pinned/needs-input sections; replace projects chip-wall with search + browse modal; render Bash tool output as preformatted code with $ prompts.

* chore(ui): align tailwind tokens with forest theme

* feat(ui): apply tailwind layout for header and shell

* feat(ui): tailwindize dynamic list and detail components

* refactor(ui): shift styling to tailwind utilities

* chore(ui): polish interactive microdetails

* chore(ui): tune contrast and readability

* chore(ui): refine typography details

* chore(ui): refine hierarchy sizes

* chore(ui): add cursor for thinking block

* feat(ui): full-width detail view and dark neutral theme

* feat(ui): cloister-style layout with list header search

* feat(ui): expandable tool calls with input/output

Author: leonardocouy

public/app.js

@@ -12,4 +12,4 @@
   "server": {
     "port": 9847
   }
-}
+}

public/index.html

@@ -1,2 +1,2 @@
 {"type":"user","message":{"content":[{"type":"text","text":"Fix the bug in login"}]},"timestamp":"2026-01-26T12:00:00.000Z"}
-{"type":"assistant","message":{"content":[{"type":"text","text":"I'll take a look."}]},"timestamp":"2026-01-26T12:01:00.000Z"}
+{"type":"assistant","message":{"content":[{"type":"text","text":"I'll take a look."},{"type":"tool_use","name":"Bash","id":"tool-1","input":{"command":"echo \"hello\""}}]},"timestamp":"2026-01-26T12:01:00.000Z"}

public/styles.css

@@ -6,22 +6,36 @@ test.describe('Home Page', () => {
     await expect(page.locator('.logo')).toContainText('AgentTrail');
   });
 
-  test('shows sidebar filters', async ({ page }) => {
+  test('shows header filter buttons', async ({ page }) => {
     await page.goto('/');
-    await expect(page.locator('text=All Sessions')).toBeVisible();
-    await expect(page.locator('text=Today')).toBeVisible();
-    await expect(page.locator('text=This Week')).toBeVisible();
+    await expect(page.locator('.filter-btn[data-filter="all"]')).toBeVisible();
+    await expect(page.locator('.filter-btn[data-filter="today"]')).toBeVisible();
+    await expect(page.locator('.filter-btn[data-filter="week"]')).toBeVisible();
   });
 
   test('has search input', async ({ page }) => {
     await page.goto('/');
     await expect(page.locator('#search-input')).toBeVisible();
   });
 
+  test('shows filters and grouping controls', async ({ page }) => {
+    await page.goto('/');
+    await expect(page.locator('#filters-toggle')).toBeVisible();
+    await expect(page.locator('.group-btn[data-group="date"]')).toBeVisible();
+  });
+
   test('renders session cards', async ({ page }) => {
     await page.goto('/');
     await page.waitForSelector('.session-card');
     const count = await page.locator('.session-card').count();
     expect(count).toBeGreaterThan(0);
   });
+
+  test('shows date grouping headers', async ({ page }) => {
+    await page.goto('/');
+    await page.waitForSelector('.session-card');
+    const dateHeaders = page.locator('.date-divider');
+    const count = await dateHeaders.count();
+    expect(count).toBeGreaterThan(0);
+  });
 });

tests/e2e/fixtures/config.json

@@ -23,8 +23,38 @@ test.describe('Search and Filters', () => {
 
   test('filters by time - Today', async ({ page }) => {
     await page.goto('/');
-    const todayFilter = page.locator('#time-filters .filter-item[data-filter="today"]');
+    const todayFilter = page.locator('.filter-btn[data-filter="today"]');
     await todayFilter.click();
     await expect(todayFilter).toHaveClass(/active/);
   });
+
+  test('toggles filters drawer', async ({ page }) => {
+    await page.goto('/');
+    const toggle = page.locator('#filters-toggle');
+    const drawer = page.locator('#filters-drawer');
+    await expect(toggle).toBeVisible();
+    const wasOpen = await drawer.evaluate(el => el.classList.contains('open'));
+    await toggle.click();
+    if (wasOpen) {
+      await expect(drawer).not.toHaveClass(/open/);
+    } else {
+      await expect(drawer).toHaveClass(/open/);
+    }
+  });
+
+  test('displays filter counts', async ({ page }) => {
+    await page.goto('/');
+    await page.waitForSelector('.session-card');
+
+    const allCount = page.locator('#count-all');
+    const todayCount = page.locator('#count-today');
+    const weekCount = page.locator('#count-week');
+
+    await expect(allCount).toBeVisible();
+    await expect(todayCount).toBeVisible();
+    await expect(weekCount).toBeVisible();
+
+    const allText = await allCount.textContent();
+    expect(Number(allText)).toBeGreaterThanOrEqual(0);
+  });
 });

tests/e2e/fixtures/sessions/project-a/session-1.jsonl

@@ -14,4 +14,11 @@ test.describe('Session Detail', () => {
     await page.locator('.session-card').first().click();
     await expect(page.locator('.message')).toHaveCount(2);
   });
+
+  test('prefixes bash commands with $', async ({ page }) => {
+    await page.goto('/');
+    await page.waitForSelector('.session-card');
+    await page.locator('.session-card').first().click();
+    await expect(page.locator('.bash-content code')).toContainText('$ echo "hello"');
+  });
 });

tests/e2e/home.spec.ts

@@ -40,6 +40,7 @@ test.describe('Settings Modal', () => {
     await page.goto('/');
     await page.locator('#settings-btn').click();
 
+    await page.locator('#add-directory-btn').scrollIntoViewIfNeeded();
     await page.locator('#add-directory-btn').click();
     await page.fill('#new-dir-path', 'tests/e2e/fixtures/sessions-extra');
     await page.fill('#new-dir-label', 'Extra');