feat(copilot): integrate Copilot SDK agent with chat UI, tests, and code review fixes (#183)

Adds Copilot SDK as an agent backend with a chat UI inside the tab
system. The SDK session runs alongside a companion PTY terminal that
users can toggle between.

Key changes:
- CopilotService backend wrapping @github/copilot-sdk with session
management
- WebSocket protocol for all copilot.* message types
- Chat UI with subagent grouping, tool call rendering, and GitHub-style
diff viewer
- Session resume with choice between terminal and agent UI modes
- 141 new unit tests covering copilot-sdk, routes, websocket, and
sessions
- Fixed 14 code review findings (race conditions, resource leaks, auth,
cleanup)

Closes #182

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: dorlugasigal

.gitignore

@@ -14,3 +14,5 @@ frontend/node_modules/
 # Build output from src/frontend/ (rebuilt by prepublishOnly)
 public/
 *.tsbuildinfo
+.playwright-mcp/
+test-diff.md

README.md

@@ -121,6 +121,22 @@ flowchart LR
 
 For all flags, subcommands, and environment variables, see the [Configuration docs](https://dorlugasigal.github.io/TermBeam/configuration/).
 
+## Background Service
+
+Run TermBeam as an always-on background service using the built-in PM2 integration:
+
+```bash
+termbeam service install     # interactive wizard — configures PM2, password, tunnel, boot auto-start
+termbeam service status      # check process info, uptime, memory
+termbeam service logs        # tail live logs
+termbeam service restart     # restart after config changes
+termbeam service uninstall   # stop and remove the service
+```
+
+The installer checks for [PM2](https://pm2.keymetrics.io/) (and offers to install it), then walks you through password, port, access mode, and boot auto-start options. Config is saved to `~/.termbeam/ecosystem.config.js`.
+
+For systemd, launchd, and Windows Task Scheduler setup, see the [Running in Background docs](https://dorlugasigal.github.io/TermBeam/running-in-background/).
+
 ## Security
 
 TermBeam auto-generates a password and creates a secure tunnel by default, binding to `127.0.0.1` (localhost only). Auth uses httpOnly cookies with 24-hour expiry, login is rate-limited to 5 attempts per minute, QR codes contain single-use share tokens (5-min expiry), and security headers (X-Frame-Options, CSP, nosniff) are set on all responses.

package-lock.json

@@ -1,13 +1,13 @@
 #!/usr/bin/env node
 'use strict';
 
+const path = require('path');
 const { chromium } = require(
-  require.resolve('playwright', { paths: ['/Users/dorlugasigal/Projects/termbeam'] })
+  require.resolve('playwright', { paths: [path.resolve(__dirname, '../../..')] }),
 );
 const { execSync } = require('child_process');
 const http = require('http');
 const fs = require('fs');
-const path = require('path');
 
 const BASE_URL = 'http://localhost:3456';
 const FFMPEG = '/opt/homebrew/bin/ffmpeg';
@@ -107,12 +107,12 @@ async function saveVideo(capture, outputName) {
     `"${FFMPEG}" -y -framerate ${CAPTURE_FPS} -i "${capture.dir}/frame-%05d.png" ` +
       `-c:v libx264 -crf 22 -preset slow -r ${OUTPUT_FPS} ` +
       `-an -movflags +faststart -pix_fmt yuv420p "${mp4Path}"`,
-    { stdio: 'pipe' }
+    { stdio: 'pipe' },
   );
   fs.rmSync(capture.dir, { recursive: true, force: true });
   const stat = fs.statSync(mp4Path);
   const dur = execSync(
-    `"${FFMPEG}" -i "${mp4Path}" 2>&1 | grep Duration | sed 's/.*Duration: //' | sed 's/,.*//'`
+    `"${FFMPEG}" -i "${mp4Path}" 2>&1 | grep Duration | sed 's/.*Duration: //' | sed 's/,.*//'`,
   )
     .toString()
     .trim();
@@ -126,11 +126,15 @@ async function focusTerminal(page, timeout = 5000) {
         const rows = document.querySelector('.xterm-rows');
         return rows && rows.textContent && rows.textContent.trim().length > 5;
       },
-      { timeout }
+      { timeout },
     )
     .catch(() => {});
   await page.waitForTimeout(300);
-  await page.locator('.xterm-screen').first().click().catch(() => {});
+  await page
+    .locator('.xterm-screen')
+    .first()
+    .click()
+    .catch(() => {});
   await page.waitForTimeout(150);
 }
 
@@ -194,9 +198,9 @@ async function recordAgentsDesktop(browser) {
     const btn = page.locator('[data-testid="hub-new-session-btn"]');
     await btn.waitFor({ timeout: 5000 }).catch(() => {});
     await btn.click().catch(() => {});
-    await page.waitForSelector('[data-testid="new-session-modal"]', { timeout: 5000 }).catch(
-      () => {}
-    );
+    await page
+      .waitForSelector('[data-testid="new-session-modal"]', { timeout: 5000 })
+      .catch(() => {});
     // Let user see the modal with agent cards
     await page.waitForTimeout(2500);
     // Look for Claude Code agent card and click it
@@ -444,7 +448,10 @@ async function recordResumeDesktop(browser) {
       const resumeCards = page.locator('[class*="card"]').filter({ hasText: /.+/ });
       const cardCount = await resumeCards.count();
       if (cardCount > 0) {
-        await resumeCards.first().click().catch(() => {});
+        await resumeCards
+          .first()
+          .click()
+          .catch(() => {});
         await page.waitForTimeout(1500);
       } else {
         await page.waitForTimeout(1500);
@@ -485,14 +492,18 @@ async function recordGitdiffDesktop(browser) {
     await paletteTrigger.click().catch(() => {});
     await page.waitForTimeout(800);
     // Click "Git changes" action
-    const gitAction = page.locator('[data-testid="palette-action"]:has-text("Git changes")').first();
+    const gitAction = page
+      .locator('[data-testid="palette-action"]:has-text("Git changes")')
+      .first();
     const hasGitAction = await gitAction.count();
     if (hasGitAction > 0) {
       await gitAction.click().catch(() => {});
       await page.waitForTimeout(1500);
       // Code viewer opens with git changes panel — click a non-binary file
       // Look for files with .js, .ts, .json, .css, .md extensions
-      const fileButtons = page.locator('button[aria-label*=".js"], button[aria-label*=".ts"], button[aria-label*=".json"], button[aria-label*=".css"], button[aria-label*=".md"], button[aria-label*=".cjs"]');
+      const fileButtons = page.locator(
+        'button[aria-label*=".js"], button[aria-label*=".ts"], button[aria-label*=".json"], button[aria-label*=".css"], button[aria-label*=".md"], button[aria-label*=".cjs"]',
+      );
       const fileCount = await fileButtons.count();
       if (fileCount > 0) {
         await fileButtons.first().click();
@@ -507,7 +518,9 @@ async function recordGitdiffDesktop(browser) {
       }
     } else {
       // Fallback: open "View code" instead
-      const codeAction = page.locator('[data-testid="palette-action"]:has-text("View code")').first();
+      const codeAction = page
+        .locator('[data-testid="palette-action"]:has-text("View code")')
+        .first();
       if ((await codeAction.count()) > 0) {
         await codeAction.click().catch(() => {});
         await page.waitForTimeout(1500);

packages/landing/scripts/record-showcase.cjs

@@ -0,0 +1,61 @@
+import type { AgentMessage as AgentMessageType, AgentStatus } from '@/stores/agentStore';
+import { useAgentStore } from '@/stores/agentStore';
+import { AgentMessage } from './AgentMessage';
+import { AgentThinking } from './AgentThinking';
+import styles from './AgentView.module.css';
+
+interface AgentChatPanelProps {
+  messages: AgentMessageType[];
+  status: AgentStatus;
+  thinkingStartTime: number | null;
+  scrollRef: React.RefObject<HTMLDivElement | null>;
+}
+
+const isThinkingOrWorking = (s: AgentStatus): s is 'thinking' | 'working' =>
+  s === 'thinking' || s === 'working';
+
+export function AgentChatPanel({
+  messages,
+  status,
+  thinkingStartTime,
+  scrollRef,
+}: AgentChatPanelProps) {
+  const toggleToolCallCollapse = useAgentStore((s) => s.toggleToolCallCollapse);
+  const isThinking = isThinkingOrWorking(status);
+
+  if (messages.length === 0 && !isThinking) {
+    return (
+      <div className={styles.chatPanel}>
+        <div className={styles.emptyState}>
+          <span className={styles.emptyIcon}>💬</span>
+          <span className={styles.emptyTitle}>Start a conversation with your agent</span>
+          <span className={styles.emptyHint}>
+            Type a message below to get started. The agent can edit files, run commands, and answer
+            questions about your project.
+          </span>
+        </div>
+        <div ref={scrollRef} className={styles.scrollAnchor} />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.chatPanel}>
+      <div className={styles.chatPanelInner}>
+        <div className={styles.messageList}>
+          {messages.map((msg) => (
+            <AgentMessage
+              key={msg.id}
+              message={msg}
+              onToggleToolCallCollapse={(tcId) => toggleToolCallCollapse(msg.id, tcId)}
+            />
+          ))}
+          {isThinkingOrWorking(status) && (
+            <AgentThinking startTime={thinkingStartTime} status={status} />
+          )}
+        </div>
+      </div>
+      <div ref={scrollRef} className={styles.scrollAnchor} />
+    </div>
+  );
+}