diff --git a/v2/src-tauri/src/bttask.rs b/v2/src-tauri/src/bttask.rs
new file mode 100644
index 0000000..af4f833
--- /dev/null
+++ b/v2/src-tauri/src/bttask.rs
@@ -0,0 +1,169 @@
+// bttask — Read access to task board SQLite tables in btmsg.db
+// Tasks table created by bttask CLI, shared DB with btmsg
+
+use rusqlite::{params, Connection, OpenFlags};
+use serde::{Deserialize, Serialize};
+use std::path::PathBuf;
+
+fn db_path() -> PathBuf {
+    dirs::data_dir()
+        .unwrap_or_else(|| PathBuf::from("."))
+        .join("bterminal")
+        .join("btmsg.db")
+}
+
+fn open_db() -> Result<Connection, String> {
+    let path = db_path();
+    if !path.exists() {
+        return Err("btmsg database not found".into());
+    }
+    Connection::open_with_flags(&path, OpenFlags::SQLITE_OPEN_READ_WRITE)
+        .map_err(|e| format!("Failed to open btmsg.db: {e}"))
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct Task {
+    pub id: String,
+    pub title: String,
+    pub description: String,
+    pub status: String,
+    pub priority: String,
+    pub assigned_to: Option<String>,
+    pub created_by: String,
+    pub group_id: String,
+    pub parent_task_id: Option<String>,
+    pub sort_order: i32,
+    pub created_at: String,
+    pub updated_at: String,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct TaskComment {
+    pub id: String,
+    pub task_id: String,
+    pub agent_id: String,
+    pub content: String,
+    pub created_at: String,
+}
+
+/// Get all tasks for a group
+pub fn list_tasks(group_id: &str) -> Result<Vec<Task>, String> {
+    let db = open_db()?;
+    let mut stmt = db
+        .prepare(
+            "SELECT id, title, description, status, priority, assigned_to,
+                    created_by, group_id, parent_task_id, sort_order,
+                    created_at, updated_at
+             FROM tasks WHERE group_id = ?1
+             ORDER BY sort_order ASC, created_at DESC",
+        )
+        .map_err(|e| format!("Query error: {e}"))?;
+
+    let rows = stmt
+        .query_map(params![group_id], |row| {
+            Ok(Task {
+                id: row.get(0)?,
+                title: row.get(1)?,
+                description: row.get::<_, String>(2).unwrap_or_default(),
+                status: row.get::<_, String>(3).unwrap_or_else(|_| "todo".into()),
+                priority: row.get::<_, String>(4).unwrap_or_else(|_| "medium".into()),
+                assigned_to: row.get(5)?,
+                created_by: row.get(6)?,
+                group_id: row.get(7)?,
+                parent_task_id: row.get(8)?,
+                sort_order: row.get::<_, i32>(9).unwrap_or(0),
+                created_at: row.get::<_, String>(10).unwrap_or_default(),
+                updated_at: row.get::<_, String>(11).unwrap_or_default(),
+            })
+        })
+        .map_err(|e| format!("Query error: {e}"))?;
+
+    rows.collect::<Result<Vec<_>, _>>()
+        .map_err(|e| format!("Row error: {e}"))
+}
+
+/// Get comments for a task
+pub fn task_comments(task_id: &str) -> Result<Vec<TaskComment>, String> {
+    let db = open_db()?;
+    let mut stmt = db
+        .prepare(
+            "SELECT id, task_id, agent_id, content, created_at
+             FROM task_comments WHERE task_id = ?1
+             ORDER BY created_at ASC",
+        )
+        .map_err(|e| format!("Query error: {e}"))?;
+
+    let rows = stmt
+        .query_map(params![task_id], |row| {
+            Ok(TaskComment {
+                id: row.get(0)?,
+                task_id: row.get(1)?,
+                agent_id: row.get(2)?,
+                content: row.get(3)?,
+                created_at: row.get::<_, String>(4).unwrap_or_default(),
+            })
+        })
+        .map_err(|e| format!("Query error: {e}"))?;
+
+    rows.collect::<Result<Vec<_>, _>>()
+        .map_err(|e| format!("Row error: {e}"))
+}
+
+/// Update task status
+pub fn update_task_status(task_id: &str, status: &str) -> Result<(), String> {
+    let valid = ["todo", "progress", "review", "done", "blocked"];
+    if !valid.contains(&status) {
+        return Err(format!("Invalid status '{}'. Valid: {:?}", status, valid));
+    }
+    let db = open_db()?;
+    db.execute(
+        "UPDATE tasks SET status = ?1, updated_at = datetime('now') WHERE id = ?2",
+        params![status, task_id],
+    )
+    .map_err(|e| format!("Update error: {e}"))?;
+    Ok(())
+}
+
+/// Add a comment to a task
+pub fn add_comment(task_id: &str, agent_id: &str, content: &str) -> Result<String, String> {
+    let db = open_db()?;
+    let id = uuid::Uuid::new_v4().to_string();
+    db.execute(
+        "INSERT INTO task_comments (id, task_id, agent_id, content) VALUES (?1, ?2, ?3, ?4)",
+        params![id, task_id, agent_id, content],
+    )
+    .map_err(|e| format!("Insert error: {e}"))?;
+    Ok(id)
+}
+
+/// Create a new task
+pub fn create_task(
+    title: &str,
+    description: &str,
+    priority: &str,
+    group_id: &str,
+    created_by: &str,
+    assigned_to: Option<&str>,
+) -> Result<String, String> {
+    let db = open_db()?;
+    let id = uuid::Uuid::new_v4().to_string();
+    db.execute(
+        "INSERT INTO tasks (id, title, description, priority, group_id, created_by, assigned_to)
+         VALUES (?1, ?2, ?3, ?4, ?5, ?6, ?7)",
+        params![id, title, description, priority, group_id, created_by, assigned_to],
+    )
+    .map_err(|e| format!("Insert error: {e}"))?;
+    Ok(id)
+}
+
+/// Delete a task
+pub fn delete_task(task_id: &str) -> Result<(), String> {
+    let db = open_db()?;
+    db.execute("DELETE FROM task_comments WHERE task_id = ?1", params![task_id])
+        .map_err(|e| format!("Delete comments error: {e}"))?;
+    db.execute("DELETE FROM tasks WHERE id = ?1", params![task_id])
+        .map_err(|e| format!("Delete task error: {e}"))?;
+    Ok(())
+}
diff --git a/v2/src-tauri/src/commands/bttask.rs b/v2/src-tauri/src/commands/bttask.rs
new file mode 100644
index 0000000..395c69a
--- /dev/null
+++ b/v2/src-tauri/src/commands/bttask.rs
@@ -0,0 +1,38 @@
+use crate::bttask;
+
+#[tauri::command]
+pub fn bttask_list(group_id: String) -> Result<Vec<bttask::Task>, String> {
+    bttask::list_tasks(&group_id)
+}
+
+#[tauri::command]
+pub fn bttask_comments(task_id: String) -> Result<Vec<bttask::TaskComment>, String> {
+    bttask::task_comments(&task_id)
+}
+
+#[tauri::command]
+pub fn bttask_update_status(task_id: String, status: String) -> Result<(), String> {
+    bttask::update_task_status(&task_id, &status)
+}
+
+#[tauri::command]
+pub fn bttask_add_comment(task_id: String, agent_id: String, content: String) -> Result<String, String> {
+    bttask::add_comment(&task_id, &agent_id, &content)
+}
+
+#[tauri::command]
+pub fn bttask_create(
+    title: String,
+    description: String,
+    priority: String,
+    group_id: String,
+    created_by: String,
+    assigned_to: Option<String>,
+) -> Result<String, String> {
+    bttask::create_task(&title, &description, &priority, &group_id, &created_by, assigned_to.as_deref())
+}
+
+#[tauri::command]
+pub fn bttask_delete(task_id: String) -> Result<(), String> {
+    bttask::delete_task(&task_id)
+}
diff --git a/v2/src-tauri/src/commands/mod.rs b/v2/src-tauri/src/commands/mod.rs
index f18d757..76c49a6 100644
--- a/v2/src-tauri/src/commands/mod.rs
+++ b/v2/src-tauri/src/commands/mod.rs
@@ -10,3 +10,4 @@ pub mod files;
 pub mod remote;
 pub mod misc;
 pub mod btmsg;
+pub mod bttask;
diff --git a/v2/src-tauri/src/lib.rs b/v2/src-tauri/src/lib.rs
index 6761f1f..91bd9ad 100644
--- a/v2/src-tauri/src/lib.rs
+++ b/v2/src-tauri/src/lib.rs
@@ -1,4 +1,5 @@
 mod btmsg;
+mod bttask;
 mod commands;
 mod ctx;
 mod event_sink;
@@ -139,6 +140,13 @@ pub fn run() {
             commands::btmsg::btmsg_channel_send,
             commands::btmsg::btmsg_create_channel,
             commands::btmsg::btmsg_add_channel_member,
+            // bttask (task board)
+            commands::bttask::bttask_list,
+            commands::bttask::bttask_comments,
+            commands::bttask::bttask_update_status,
+            commands::bttask::bttask_add_comment,
+            commands::bttask::bttask_create,
+            commands::bttask::bttask_delete,
             // Misc
             commands::misc::cli_get_group,
             commands::misc::open_url,
diff --git a/v2/src/lib/adapters/bttask-bridge.ts b/v2/src/lib/adapters/bttask-bridge.ts
new file mode 100644
index 0000000..7146b8f
--- /dev/null
+++ b/v2/src/lib/adapters/bttask-bridge.ts
@@ -0,0 +1,57 @@
+// bttask Bridge — Tauri IPC adapter for task board
+
+import { invoke } from '@tauri-apps/api/core';
+
+export interface Task {
+  id: string;
+  title: string;
+  description: string;
+  status: 'todo' | 'progress' | 'review' | 'done' | 'blocked';
+  priority: 'low' | 'medium' | 'high' | 'critical';
+  assignedTo: string | null;
+  createdBy: string;
+  groupId: string;
+  parentTaskId: string | null;
+  sortOrder: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface TaskComment {
+  id: string;
+  taskId: string;
+  agentId: string;
+  content: string;
+  createdAt: string;
+}
+
+export async function listTasks(groupId: string): Promise<Task[]> {
+  return invoke<Task[]>('bttask_list', { groupId });
+}
+
+export async function getTaskComments(taskId: string): Promise<TaskComment[]> {
+  return invoke<TaskComment[]>('bttask_comments', { taskId });
+}
+
+export async function updateTaskStatus(taskId: string, status: string): Promise<void> {
+  return invoke('bttask_update_status', { taskId, status });
+}
+
+export async function addTaskComment(taskId: string, agentId: string, content: string): Promise<string> {
+  return invoke<string>('bttask_add_comment', { taskId, agentId, content });
+}
+
+export async function createTask(
+  title: string,
+  description: string,
+  priority: string,
+  groupId: string,
+  createdBy: string,
+  assignedTo?: string,
+): Promise<string> {
+  return invoke<string>('bttask_create', { title, description, priority, groupId, createdBy, assignedTo });
+}
+
+export async function deleteTask(taskId: string): Promise<void> {
+  return invoke('bttask_delete', { taskId });
+}
diff --git a/v2/src/lib/components/Workspace/ArchitectureTab.svelte b/v2/src/lib/components/Workspace/ArchitectureTab.svelte
new file mode 100644
index 0000000..1e04907
--- /dev/null
+++ b/v2/src/lib/components/Workspace/ArchitectureTab.svelte
@@ -0,0 +1,493 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { listDirectoryChildren, readFileContent, writeFileContent, type DirEntry } from '../../adapters/files-bridge';
+
+  interface Props {
+    cwd: string;
+  }
+
+  let { cwd }: Props = $props();
+
+  /** Directory where .puml files are stored */
+  const ARCH_DIR = '.architecture';
+
+  let diagrams = $state<DirEntry[]>([]);
+  let selectedFile = $state<string | null>(null);
+  let pumlSource = $state('');
+  let svgUrl = $state<string | null>(null);
+  let loading = $state(false);
+  let error = $state<string | null>(null);
+  let editing = $state(false);
+
+  // New diagram form
+  let showNewForm = $state(false);
+  let newName = $state('');
+
+  const DIAGRAM_TEMPLATES: Record<string, string> = {
+    'Class Diagram': `@startuml
+title Class Diagram
+
+class Service {
+  +start()
+  +stop()
+}
+
+class Database {
+  +query()
+  +connect()
+}
+
+Service --> Database : uses
+
+@enduml`,
+    'Sequence Diagram': `@startuml
+title Sequence Diagram
+
+actor User
+participant "Frontend" as FE
+participant "Backend" as BE
+participant "Database" as DB
+
+User -> FE: action
+FE -> BE: request
+BE -> DB: query
+DB --> BE: result
+BE --> FE: response
+FE --> User: display
+
+@enduml`,
+    'State Diagram': `@startuml
+title State Diagram
+
+[*] --> Idle
+Idle --> Running : start
+Running --> Idle : stop
+Running --> Error : failure
+Error --> Idle : reset
+
+@enduml`,
+    'Component Diagram': `@startuml
+title Component Diagram
+
+package "Frontend" {
+  [UI Components]
+  [State Store]
+}
+
+package "Backend" {
+  [API Server]
+  [Database]
+}
+
+[UI Components] --> [State Store]
+[State Store] --> [API Server]
+[API Server] --> [Database]
+
+@enduml`,
+  };
+
+  let archPath = $derived(`${cwd}/${ARCH_DIR}`);
+
+  async function loadDiagrams() {
+    try {
+      const entries = await listDirectoryChildren(archPath);
+      diagrams = entries.filter(e => e.name.endsWith('.puml') || e.name.endsWith('.plantuml'));
+    } catch {
+      // Directory might not exist yet
+      diagrams = [];
+    }
+  }
+
+  onMount(() => {
+    loadDiagrams();
+  });
+
+  async function selectDiagram(filePath: string) {
+    selectedFile = filePath;
+    loading = true;
+    error = null;
+    editing = false;
+    try {
+      const content = await readFileContent(filePath);
+      if (content.type === 'Text') {
+        pumlSource = content.content;
+        renderPlantUml(content.content);
+      } else {
+        error = 'Not a text file';
+      }
+    } catch (e) {
+      error = String(e);
+    } finally {
+      loading = false;
+    }
+  }
+
+  function renderPlantUml(source: string) {
+    // Encode PlantUML source for the server renderer
+    const encoded = plantumlEncode(source);
+    svgUrl = `https://www.plantuml.com/plantuml/svg/${encoded}`;
+  }
+
+  async function handleSave() {
+    if (!selectedFile) return;
+    try {
+      await writeFileContent(selectedFile, pumlSource);
+      renderPlantUml(pumlSource);
+      editing = false;
+    } catch (e) {
+      error = String(e);
+    }
+  }
+
+  async function handleCreate(template: string) {
+    if (!newName.trim()) return;
+    const fileName = newName.trim().replace(/\s+/g, '-').toLowerCase();
+    const filePath = `${archPath}/${fileName}.puml`;
+    try {
+      await writeFileContent(filePath, template);
+      showNewForm = false;
+      newName = '';
+      await loadDiagrams();
+      await selectDiagram(filePath);
+    } catch (e) {
+      error = String(e);
+    }
+  }
+
+  // PlantUML text encoder (deflate + base64 variant)
+  // Uses the PlantUML encoding scheme: https://plantuml.com/text-encoding
+  function plantumlEncode(text: string): string {
+    const data = unescape(encodeURIComponent(text));
+    const compressed = rawDeflate(data);
+    return encode64(compressed);
+  }
+
+  // Minimal raw deflate (store-only for simplicity — works with plantuml.com)
+  function rawDeflate(data: string): string {
+    // For PlantUML server compatibility, we use the ~h hex encoding as fallback
+    // which is simpler and doesn't require deflate
+    return data;
+  }
+
+  // PlantUML base64 encoding (6-bit alphabet: 0-9A-Za-z-_)
+  function encode64(data: string): string {
+    // Use hex encoding prefix for simplicity (supported by PlantUML server)
+    let hex = '~h';
+    for (let i = 0; i < data.length; i++) {
+      hex += data.charCodeAt(i).toString(16).padStart(2, '0');
+    }
+    return hex;
+  }
+</script>
+
+<div class="architecture-tab">
+  <div class="arch-sidebar">
+    <div class="sidebar-header">
+      <span class="sidebar-title">Diagrams</span>
+      <button class="btn-new" onclick={() => showNewForm = !showNewForm}>
+        {showNewForm ? '✕' : '+'}
+      </button>
+    </div>
+
+    {#if showNewForm}
+      <div class="new-form">
+        <input
+          class="new-name-input"
+          bind:value={newName}
+          placeholder="Diagram name"
+        />
+        <div class="template-list">
+          {#each Object.entries(DIAGRAM_TEMPLATES) as [name, template]}
+            <button
+              class="template-btn"
+              onclick={() => handleCreate(template)}
+              disabled={!newName.trim()}
+            >{name}</button>
+          {/each}
+        </div>
+      </div>
+    {/if}
+
+    <div class="diagram-list">
+      {#each diagrams as file (file.path)}
+        <button
+          class="diagram-item"
+          class:active={selectedFile === file.path}
+          onclick={() => selectDiagram(file.path)}
+        >
+          <span class="diagram-icon">📐</span>
+          <span class="diagram-name">{file.name.replace(/\.(puml|plantuml)$/, '')}</span>
+        </button>
+      {/each}
+      {#if diagrams.length === 0 && !showNewForm}
+        <div class="empty-hint">
+          No diagrams yet. The Architect agent creates .puml files in <code>{ARCH_DIR}/</code>
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  <div class="arch-content">
+    {#if !selectedFile}
+      <div class="empty-state">
+        Select a diagram or create a new one
+      </div>
+    {:else if loading}
+      <div class="empty-state">Loading...</div>
+    {:else if error}
+      <div class="empty-state error-text">{error}</div>
+    {:else}
+      <div class="content-header">
+        <span class="file-name">{selectedFile?.split('/').pop()}</span>
+        <button class="btn-toggle-edit" onclick={() => editing = !editing}>
+          {editing ? 'Preview' : 'Edit'}
+        </button>
+        {#if editing}
+          <button class="btn-save" onclick={handleSave}>Save</button>
+        {/if}
+      </div>
+
+      {#if editing}
+        <textarea
+          class="puml-editor"
+          bind:value={pumlSource}
+        ></textarea>
+      {:else if svgUrl}
+        <div class="diagram-preview">
+          <img src={svgUrl} alt="PlantUML diagram" class="diagram-img" />
+        </div>
+      {/if}
+    {/if}
+  </div>
+</div>
+
+<style>
+  .architecture-tab {
+    display: flex;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .arch-sidebar {
+    width: 10rem;
+    flex-shrink: 0;
+    border-right: 1px solid var(--ctp-surface0);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .sidebar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.375rem 0.5rem;
+    border-bottom: 1px solid var(--ctp-surface0);
+  }
+
+  .sidebar-title {
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: var(--ctp-subtext0);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .btn-new {
+    padding: 0.125rem 0.375rem;
+    background: var(--ctp-surface0);
+    border: 1px solid var(--ctp-surface1);
+    border-radius: 0.25rem;
+    color: var(--ctp-subtext0);
+    font-size: 0.7rem;
+    cursor: pointer;
+  }
+
+  .btn-new:hover {
+    background: var(--ctp-surface1);
+    color: var(--ctp-text);
+  }
+
+  .new-form {
+    padding: 0.375rem 0.5rem;
+    border-bottom: 1px solid var(--ctp-surface0);
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .new-name-input {
+    padding: 0.25rem 0.375rem;
+    background: var(--ctp-base);
+    border: 1px solid var(--ctp-surface1);
+    border-radius: 0.25rem;
+    color: var(--ctp-text);
+    font-size: 0.7rem;
+  }
+
+  .template-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .template-btn {
+    padding: 0.2rem 0.375rem;
+    background: var(--ctp-surface0);
+    border: 1px solid var(--ctp-surface1);
+    border-radius: 0.125rem;
+    color: var(--ctp-subtext0);
+    font-size: 0.6rem;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .template-btn:hover:not(:disabled) {
+    background: var(--ctp-surface1);
+    color: var(--ctp-text);
+  }
+
+  .template-btn:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+
+  .diagram-list {
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .diagram-item {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.3125rem 0.5rem;
+    background: transparent;
+    border: none;
+    color: var(--ctp-subtext0);
+    font-size: 0.7rem;
+    text-align: left;
+    cursor: pointer;
+    transition: background 0.1s;
+  }
+
+  .diagram-item:hover {
+    background: var(--ctp-surface0);
+    color: var(--ctp-text);
+  }
+
+  .diagram-item.active {
+    background: var(--ctp-surface0);
+    color: var(--ctp-text);
+    font-weight: 600;
+  }
+
+  .diagram-icon { font-size: 0.8rem; }
+
+  .diagram-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .empty-hint {
+    padding: 0.5rem;
+    font-size: 0.65rem;
+    color: var(--ctp-overlay0);
+    line-height: 1.4;
+  }
+
+  .empty-hint code {
+    background: var(--ctp-surface0);
+    padding: 0.0625rem 0.25rem;
+    border-radius: 0.125rem;
+    font-size: 0.6rem;
+  }
+
+  .arch-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .empty-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--ctp-overlay0);
+    font-size: 0.8rem;
+  }
+
+  .error-text { color: var(--ctp-red); }
+
+  .content-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.375rem 0.5rem;
+    border-bottom: 1px solid var(--ctp-surface0);
+    flex-shrink: 0;
+  }
+
+  .file-name {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--ctp-text);
+    flex: 1;
+  }
+
+  .btn-toggle-edit, .btn-save {
+    padding: 0.2rem 0.5rem;
+    background: var(--ctp-surface0);
+    border: 1px solid var(--ctp-surface1);
+    border-radius: 0.25rem;
+    color: var(--ctp-subtext0);
+    font-size: 0.65rem;
+    cursor: pointer;
+  }
+
+  .btn-toggle-edit:hover, .btn-save:hover {
+    background: var(--ctp-surface1);
+    color: var(--ctp-text);
+  }
+
+  .btn-save {
+    background: var(--ctp-green);
+    color: var(--ctp-base);
+    border-color: var(--ctp-green);
+  }
+
+  .puml-editor {
+    flex: 1;
+    padding: 0.5rem;
+    background: var(--ctp-mantle);
+    border: none;
+    color: var(--ctp-text);
+    font-family: var(--term-font-family, monospace);
+    font-size: 0.75rem;
+    line-height: 1.5;
+    resize: none;
+  }
+
+  .puml-editor:focus { outline: none; }
+
+  .diagram-preview {
+    flex: 1;
+    overflow: auto;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 0.5rem;
+    background: var(--ctp-mantle);
+  }
+
+  .diagram-img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 0.25rem;
+  }
+</style>
diff --git a/v2/src/lib/components/Workspace/ProjectBox.svelte b/v2/src/lib/components/Workspace/ProjectBox.svelte
index cf4565d..c3a0813 100644
--- a/v2/src/lib/components/Workspace/ProjectBox.svelte
+++ b/v2/src/lib/components/Workspace/ProjectBox.svelte
@@ -11,7 +11,10 @@
   import FilesTab from './FilesTab.svelte';
   import SshTab from './SshTab.svelte';
   import MemoriesTab from './MemoriesTab.svelte';
-  import { getTerminalTabs } from '../../stores/workspace.svelte';
+  import TaskBoardTab from './TaskBoardTab.svelte';
+  import ArchitectureTab from './ArchitectureTab.svelte';
+  import TestingTab from './TestingTab.svelte';
+  import { getTerminalTabs, getActiveGroup } from '../../stores/workspace.svelte';
   import { getProjectHealth, setStallThreshold } from '../../stores/health.svelte';
   import { fsWatchProject, fsUnwatchProject, onFsWriteDetected, fsWatcherStatus } from '../../adapters/fs-watcher-bridge';
   import { recordExternalWrite } from '../../stores/conflicts.svelte';
@@ -31,9 +34,13 @@
   let mainSessionId = $state<string | null>(null);
   let terminalExpanded = $state(false);
 
-  type ProjectTab = 'model' | 'docs' | 'context' | 'files' | 'ssh' | 'memories';
+  type ProjectTab = 'model' | 'docs' | 'context' | 'files' | 'ssh' | 'memories' | 'tasks' | 'architecture' | 'selenium' | 'tests';
   let activeTab = $state<ProjectTab>('model');
 
+  let activeGroup = $derived(getActiveGroup());
+  let agentRole = $derived(project.agentRole);
+  let isAgent = $derived(project.isAgent ?? false);
+
   // PERSISTED-LAZY: track which tabs have been activated at least once
   let everActivated = $state<Record<string, boolean>>({});
 
@@ -149,6 +156,16 @@
       class:active={activeTab === 'memories'}
       onclick={() => switchTab('memories')}
     >Memory</button>
+    {#if isAgent && agentRole === 'manager'}
+      <button class="ptab ptab-role" class:active={activeTab === 'tasks'} onclick={() => switchTab('tasks')}>Tasks</button>
+    {/if}
+    {#if isAgent && agentRole === 'architect'}
+      <button class="ptab ptab-role" class:active={activeTab === 'architecture'} onclick={() => switchTab('architecture')}>Arch</button>
+    {/if}
+    {#if isAgent && agentRole === 'tester'}
+      <button class="ptab ptab-role" class:active={activeTab === 'selenium'} onclick={() => switchTab('selenium')}>Selenium</button>
+      <button class="ptab ptab-role" class:active={activeTab === 'tests'} onclick={() => switchTab('tests')}>Tests</button>
+    {/if}
   </div>
 
   <div class="project-content-area">
@@ -182,6 +199,26 @@
         <MemoriesTab />
       </div>
     {/if}
+    {#if everActivated['tasks'] && activeGroup}
+      <div class="content-pane" style:display={activeTab === 'tasks' ? 'flex' : 'none'}>
+        <TaskBoardTab groupId={activeGroup.id} projectId={project.id} />
+      </div>
+    {/if}
+    {#if everActivated['architecture']}
+      <div class="content-pane" style:display={activeTab === 'architecture' ? 'flex' : 'none'}>
+        <ArchitectureTab cwd={project.cwd} />
+      </div>
+    {/if}
+    {#if everActivated['selenium']}
+      <div class="content-pane" style:display={activeTab === 'selenium' ? 'flex' : 'none'}>
+        <TestingTab cwd={project.cwd} mode="selenium" />
+      </div>
+    {/if}
+    {#if everActivated['tests']}
+      <div class="content-pane" style:display={activeTab === 'tests' ? 'flex' : 'none'}>
+        <TestingTab cwd={project.cwd} mode="tests" />
+      </div>
+    {/if}
   </div>
 
   <div class="terminal-section" style:display={activeTab === 'model' ? 'flex' : 'none'}>
@@ -267,6 +304,14 @@
     margin-bottom: -1px;
   }
 
+  .ptab-role {
+    color: var(--ctp-mauve);
+  }
+
+  .ptab-role:hover {
+    color: var(--ctp-text);
+  }
+
   .project-content-area {
     overflow: hidden;
     position: relative;
diff --git a/v2/src/lib/components/Workspace/TaskBoardTab.svelte b/v2/src/lib/components/Workspace/TaskBoardTab.svelte
new file mode 100644
index 0000000..9ca1299
--- /dev/null
+++ b/v2/src/lib/components/Workspace/TaskBoardTab.svelte
@@ -0,0 +1,572 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { listTasks, updateTaskStatus, createTask, deleteTask, addTaskComment, type Task, type TaskComment, getTaskComments } from '../../adapters/bttask-bridge';
+
+  interface Props {
+    groupId: string;
+    projectId?: string;
+  }
+
+  let { groupId, projectId }: Props = $props();
+
+  const STATUSES = ['todo', 'progress', 'review', 'done', 'blocked'] as const;
+  const STATUS_LABELS: Record<string, string> = {
+    todo: 'To Do',
+    progress: 'In Progress',
+    review: 'Review',
+    done: 'Done',
+    blocked: 'Blocked',
+  };
+  const STATUS_ICONS: Record<string, string> = {
+    todo: '○',
+    progress: '◐',
+    review: '◑',
+    done: '●',
+    blocked: '✗',
+  };
+  const PRIORITY_LABELS: Record<string, string> = {
+    critical: 'CRIT',
+    high: 'HIGH',
+    medium: 'MED',
+    low: 'LOW',
+  };
+
+  let tasks = $state<Task[]>([]);
+  let loading = $state(true);
+  let error = $state<string | null>(null);
+  let pollTimer: ReturnType<typeof setInterval> | null = null;
+
+  // New task form
+  let showAddForm = $state(false);
+  let newTitle = $state('');
+  let newDesc = $state('');
+  let newPriority = $state('medium');
+
+  // Expanded task detail
+  let expandedTaskId = $state<string | null>(null);
+  let taskComments = $state<TaskComment[]>([]);
+  let newComment = $state('');
+
+  let tasksByStatus = $derived.by(() => {
+    const map: Record<string, Task[]> = {};
+    for (const s of STATUSES) map[s] = [];
+    for (const t of tasks) {
+      if (map[t.status]) map[t.status].push(t);
+    }
+    return map;
+  });
+
+  let pendingCount = $derived(
+    tasks.filter(t => t.status !== 'done').length
+  );
+
+  async function loadTasks() {
+    try {
+      tasks = await listTasks(groupId);
+      error = null;
+    } catch (e) {
+      error = String(e);
+    } finally {
+      loading = false;
+    }
+  }
+
+  onMount(() => {
+    loadTasks();
+    pollTimer = setInterval(loadTasks, 5000);
+  });
+
+  onDestroy(() => {
+    if (pollTimer) clearInterval(pollTimer);
+  });
+
+  async function handleStatusChange(taskId: string, newStatus: string) {
+    try {
+      await updateTaskStatus(taskId, newStatus);
+      await loadTasks();
+    } catch (e) {
+      console.warn('Failed to update task status:', e);
+    }
+  }
+
+  async function handleAddTask() {
+    if (!newTitle.trim()) return;
+    try {
+      await createTask(newTitle.trim(), newDesc.trim(), newPriority, groupId, 'admin');
+      newTitle = '';
+      newDesc = '';
+      newPriority = 'medium';
+      showAddForm = false;
+      await loadTasks();
+    } catch (e) {
+      console.warn('Failed to create task:', e);
+    }
+  }
+
+  async function handleDelete(taskId: string) {
+    try {
+      await deleteTask(taskId);
+      if (expandedTaskId === taskId) expandedTaskId = null;
+      await loadTasks();
+    } catch (e) {
+      console.warn('Failed to delete task:', e);
+    }
+  }
+
+  async function toggleExpand(taskId: string) {
+    if (expandedTaskId === taskId) {
+      expandedTaskId = null;
+      return;
+    }
+    expandedTaskId = taskId;
+    try {
+      taskComments = await getTaskComments(taskId);
+    } catch {
+      taskComments = [];
+    }
+  }
+
+  async function handleAddComment() {
+    if (!expandedTaskId || !newComment.trim()) return;
+    try {
+      await addTaskComment(expandedTaskId, 'admin', newComment.trim());
+      newComment = '';
+      taskComments = await getTaskComments(expandedTaskId);
+    } catch (e) {
+      console.warn('Failed to add comment:', e);
+    }
+  }
+</script>
+
+<div class="task-board-tab">
+  <div class="board-header">
+    <span class="board-title">Task Board</span>
+    <span class="pending-badge" class:all-done={pendingCount === 0}>
+      {pendingCount === 0 ? 'All done' : `${pendingCount} pending`}
+    </span>
+    <button class="btn-add" onclick={() => showAddForm = !showAddForm}>
+      {showAddForm ? '✕' : '+ Task'}
+    </button>
+  </div>
+
+  {#if showAddForm}
+    <div class="add-task-form">
+      <input
+        class="task-title-input"
+        bind:value={newTitle}
+        placeholder="Task title"
+        onkeydown={e => { if (e.key === 'Enter') handleAddTask(); }}
+      />
+      <textarea
+        class="task-desc-input"
+        bind:value={newDesc}
+        placeholder="Description (optional)"
+        rows="2"
+      ></textarea>
+      <div class="form-row">
+        <select class="priority-select" bind:value={newPriority}>
+          <option value="low">Low</option>
+          <option value="medium">Medium</option>
+          <option value="high">High</option>
+          <option value="critical">Critical</option>
+        </select>
+        <button class="btn-create" onclick={handleAddTask} disabled={!newTitle.trim()}>Create</button>
+      </div>
+    </div>
+  {/if}
+
+  {#if loading}
+    <div class="loading">Loading tasks...</div>
+  {:else if error}
+    <div class="error">{error}</div>
+  {:else}
+    <div class="kanban">
+      {#each STATUSES as status}
+        <div class="kanban-column">
+          <div class="column-header">
+            <span class="column-icon">{STATUS_ICONS[status]}</span>
+            <span class="column-title">{STATUS_LABELS[status]}</span>
+            <span class="column-count">{tasksByStatus[status].length}</span>
+          </div>
+          <div class="column-cards">
+            {#each tasksByStatus[status] as task (task.id)}
+              <div
+                class="task-card"
+                class:expanded={expandedTaskId === task.id}
+                class:critical={task.priority === 'critical'}
+                class:high={task.priority === 'high'}
+              >
+                <button class="task-card-body" onclick={() => toggleExpand(task.id)}>
+                  <span class="task-priority priority-{task.priority}">{PRIORITY_LABELS[task.priority]}</span>
+                  <span class="task-title">{task.title}</span>
+                  {#if task.assignedTo}
+                    <span class="task-assignee">{task.assignedTo}</span>
+                  {/if}
+                </button>
+
+                {#if expandedTaskId === task.id}
+                  <div class="task-detail">
+                    {#if task.description}
+                      <p class="task-description">{task.description}</p>
+                    {/if}
+
+                    <div class="status-actions">
+                      {#each STATUSES as s}
+                        <button
+                          class="status-btn"
+                          class:active={task.status === s}
+                          onclick={() => handleStatusChange(task.id, s)}
+                        >{STATUS_ICONS[s]} {STATUS_LABELS[s]}</button>
+                      {/each}
+                    </div>
+
+                    {#if taskComments.length > 0}
+                      <div class="comments-list">
+                        {#each taskComments as comment}
+                          <div class="comment">
+                            <span class="comment-agent">{comment.agentId}</span>
+                            <span class="comment-text">{comment.content}</span>
+                          </div>
+                        {/each}
+                      </div>
+                    {/if}
+
+                    <div class="comment-form">
+                      <input
+                        class="comment-input"
+                        bind:value={newComment}
+                        placeholder="Add comment..."
+                        onkeydown={e => { if (e.key === 'Enter') handleAddComment(); }}
+                      />
+                    </div>
+
+                    <button class="btn-delete" onclick={() => handleDelete(task.id)}>Delete</button>
+                  </div>
+                {/if}
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .task-board-tab {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    padding: 0.5rem;
+    gap: 0.5rem;
+  }
+
+  .board-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-shrink: 0;
+  }
+
+  .board-title {
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--ctp-text);
+  }
+
+  .pending-badge {
+    font-size: 0.65rem;
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.5rem;
+    background: color-mix(in srgb, var(--ctp-yellow) 15%, transparent);
+    color: var(--ctp-yellow);
+    font-weight: 600;
+  }
+
+  .pending-badge.all-done {
+    background: color-mix(in srgb, var(--ctp-green) 15%, transparent);
+    color: var(--ctp-green);
+  }
+
+  .btn-add {
+    margin-left: auto;
+    padding: 0.2rem 0.5rem;
+    background: var(--ctp-surface0);
+    border: 1px solid var(--ctp-surface1);
+    border-radius: 0.25rem;
+    color: var(--ctp-subtext0);
+    font-size: 0.7rem;
+    cursor: pointer;
+  }
+
+  .btn-add:hover {
+    background: var(--ctp-surface1);
+    color: var(--ctp-text);
+  }
+
+  .add-task-form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    padding: 0.5rem;
+    background: var(--ctp-surface0);
+    border-radius: 0.375rem;
+    flex-shrink: 0;
+  }
+
+  .task-title-input, .task-desc-input, .comment-input {
+    padding: 0.3125rem 0.5rem;
+    background: var(--ctp-base);
+    border: 1px solid var(--ctp-surface1);
+    border-radius: 0.25rem;
+    color: var(--ctp-text);
+    font-size: 0.75rem;
+  }
+
+  .task-desc-input {
+    resize: vertical;
+    min-height: 2rem;
+    font-family: var(--ui-font-family, sans-serif);
+  }
+
+  .form-row {
+    display: flex;
+    gap: 0.375rem;
+    align-items: center;
+  }
+
+  .priority-select {
+    padding: 0.25rem 0.375rem;
+    background: var(--ctp-base);
+    border: 1px solid var(--ctp-surface1);
+    border-radius: 0.25rem;
+    color: var(--ctp-text);
+    font-size: 0.7rem;
+  }
+
+  .btn-create {
+    padding: 0.25rem 0.625rem;
+    background: var(--ctp-blue);
+    color: var(--ctp-base);
+    border: none;
+    border-radius: 0.25rem;
+    font-size: 0.7rem;
+    font-weight: 600;
+    cursor: pointer;
+  }
+
+  .btn-create:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+
+  .loading, .error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    font-size: 0.8rem;
+    color: var(--ctp-overlay0);
+  }
+
+  .error { color: var(--ctp-red); }
+
+  .kanban {
+    display: flex;
+    gap: 0.375rem;
+    flex: 1;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .kanban-column {
+    flex: 1;
+    min-width: 8rem;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .column-header {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.375rem;
+    font-size: 0.6rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--ctp-overlay0);
+    border-bottom: 1px solid var(--ctp-surface0);
+    flex-shrink: 0;
+  }
+
+  .column-icon { font-size: 0.7rem; }
+
+  .column-count {
+    margin-left: auto;
+    font-size: 0.55rem;
+    background: var(--ctp-surface0);
+    padding: 0 0.25rem;
+    border-radius: 0.5rem;
+  }
+
+  .column-cards {
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    padding: 0.25rem 0;
+  }
+
+  .task-card {
+    background: var(--ctp-surface0);
+    border: 1px solid var(--ctp-surface1);
+    border-radius: 0.25rem;
+    transition: border-color 0.15s;
+  }
+
+  .task-card:hover {
+    border-color: var(--ctp-surface2);
+  }
+
+  .task-card.critical {
+    border-left: 2px solid var(--ctp-red);
+  }
+
+  .task-card.high {
+    border-left: 2px solid var(--ctp-yellow);
+  }
+
+  .task-card-body {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.3125rem 0.375rem;
+    background: transparent;
+    border: none;
+    color: var(--ctp-text);
+    font-size: 0.7rem;
+    text-align: left;
+    cursor: pointer;
+    width: 100%;
+  }
+
+  .task-priority {
+    font-size: 0.5rem;
+    font-weight: 700;
+    padding: 0.0625rem 0.25rem;
+    border-radius: 0.125rem;
+    letter-spacing: 0.03em;
+    flex-shrink: 0;
+  }
+
+  .priority-critical { background: var(--ctp-red); color: var(--ctp-base); }
+  .priority-high { background: var(--ctp-yellow); color: var(--ctp-base); }
+  .priority-medium { background: var(--ctp-surface1); color: var(--ctp-subtext0); }
+  .priority-low { background: var(--ctp-surface0); color: var(--ctp-overlay0); }
+
+  .task-title {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .task-assignee {
+    font-size: 0.55rem;
+    color: var(--ctp-overlay0);
+    background: var(--ctp-base);
+    padding: 0.0625rem 0.25rem;
+    border-radius: 0.125rem;
+  }
+
+  .task-detail {
+    padding: 0.375rem;
+    border-top: 1px solid var(--ctp-surface1);
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+
+  .task-description {
+    margin: 0;
+    font-size: 0.7rem;
+    color: var(--ctp-subtext0);
+    line-height: 1.4;
+  }
+
+  .status-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+  }
+
+  .status-btn {
+    padding: 0.125rem 0.375rem;
+    background: var(--ctp-base);
+    border: 1px solid var(--ctp-surface1);
+    border-radius: 0.25rem;
+    color: var(--ctp-overlay0);
+    font-size: 0.6rem;
+    cursor: pointer;
+  }
+
+  .status-btn.active {
+    background: var(--ctp-surface1);
+    color: var(--ctp-text);
+    font-weight: 600;
+  }
+
+  .status-btn:hover {
+    border-color: var(--ctp-surface2);
+    color: var(--ctp-text);
+  }
+
+  .comments-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    max-height: 8rem;
+    overflow-y: auto;
+  }
+
+  .comment {
+    font-size: 0.65rem;
+    color: var(--ctp-subtext0);
+  }
+
+  .comment-agent {
+    font-weight: 600;
+    color: var(--ctp-blue);
+    margin-right: 0.25rem;
+  }
+
+  .comment-form {
+    display: flex;
+    gap: 0.25rem;
+  }
+
+  .comment-input {
+    flex: 1;
+    font-size: 0.65rem;
+  }
+
+  .btn-delete {
+    align-self: flex-end;
+    padding: 0.125rem 0.375rem;
+    background: transparent;
+    border: none;
+    color: var(--ctp-overlay0);
+    font-size: 0.6rem;
+    cursor: pointer;
+  }
+
+  .btn-delete:hover {
+    color: var(--ctp-red);
+  }
+</style>
diff --git a/v2/src/lib/components/Workspace/TestingTab.svelte b/v2/src/lib/components/Workspace/TestingTab.svelte
new file mode 100644
index 0000000..52ea06b
--- /dev/null
+++ b/v2/src/lib/components/Workspace/TestingTab.svelte
@@ -0,0 +1,427 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { listDirectoryChildren, readFileContent, type DirEntry } from '../../adapters/files-bridge';
+
+  interface Props {
+    cwd: string;
+    mode: 'selenium' | 'tests';
+  }
+
+  let { cwd, mode }: Props = $props();
+
+  // ─── Selenium mode ────────────────────────────────────────
+  let seleniumConnected = $state(false);
+  let screenshots = $state<string[]>([]);
+  let selectedScreenshot = $state<string | null>(null);
+  let seleniumLog = $state<string[]>([]);
+  let seleniumPollTimer: ReturnType<typeof setInterval> | null = null;
+
+  const SCREENSHOTS_DIR = '.selenium/screenshots';
+  const SELENIUM_LOG = '.selenium/session.log';
+
+  async function loadSeleniumState() {
+    const screenshotPath = `${cwd}/${SCREENSHOTS_DIR}`;
+    try {
+      const entries = await listDirectoryChildren(screenshotPath);
+      const imageFiles = entries
+        .filter(e => /\.(png|jpg|jpeg|webp)$/i.test(e.name))
+        .map(e => e.path)
+        .sort()
+        .reverse();
+      screenshots = imageFiles;
+
+      // Select latest if nothing selected
+      if (!selectedScreenshot && imageFiles.length > 0) {
+        selectedScreenshot = imageFiles[0];
+      }
+      seleniumConnected = imageFiles.length > 0;
+    } catch {
+      screenshots = [];
+      seleniumConnected = false;
+    }
+
+    // Load session log
+    try {
+      const content = await readFileContent(`${cwd}/${SELENIUM_LOG}`);
+      if (content.type === 'Text') {
+        seleniumLog = content.content.split('\n').filter(Boolean).slice(-50);
+      }
+    } catch {
+      seleniumLog = [];
+    }
+  }
+
+  // ─── Tests mode ───────────────────────────────────────────
+  let testFiles = $state<DirEntry[]>([]);
+  let selectedTestFile = $state<string | null>(null);
+  let testOutput = $state('');
+  let testRunning = $state(false);
+  let lastTestResult = $state<'pass' | 'fail' | null>(null);
+
+  const TEST_DIRS = ['tests', 'test', '__tests__', 'spec', 'e2e'];
+
+  async function loadTestFiles() {
+    for (const dir of TEST_DIRS) {
+      try {
+        const entries = await listDirectoryChildren(`${cwd}/${dir}`);
+        const tests = entries.filter(e =>
+          /\.(test|spec)\.(ts|js|py|rs)$/.test(e.name) ||
+          /test_.*\.py$/.test(e.name)
+        );
+        if (tests.length > 0) {
+          testFiles = tests;
+          return;
+        }
+      } catch {
+        // Directory doesn't exist, try next
+      }
+    }
+    testFiles = [];
+  }
+
+  async function viewTestFile(filePath: string) {
+    selectedTestFile = filePath;
+    try {
+      const content = await readFileContent(filePath);
+      if (content.type === 'Text') {
+        testOutput = content.content;
+      }
+    } catch (e) {
+      testOutput = `Error: ${e}`;
+    }
+  }
+
+  onMount(() => {
+    if (mode === 'selenium') {
+      loadSeleniumState();
+      seleniumPollTimer = setInterval(loadSeleniumState, 3000);
+    } else {
+      loadTestFiles();
+    }
+  });
+
+  onDestroy(() => {
+    if (seleniumPollTimer) clearInterval(seleniumPollTimer);
+  });
+</script>
+
+<div class="testing-tab">
+  {#if mode === 'selenium'}
+    <!-- Selenium Live View -->
+    <div class="selenium-view">
+      <div class="selenium-sidebar">
+        <div class="sidebar-header">
+          <span class="sidebar-title">Screenshots</span>
+          <span class="status-dot" class:connected={seleniumConnected}></span>
+        </div>
+        <div class="screenshot-list">
+          {#each screenshots as path}
+            <button
+              class="screenshot-item"
+              class:active={selectedScreenshot === path}
+              onclick={() => selectedScreenshot = path}
+            >
+              <span class="screenshot-name">{path.split('/').pop()}</span>
+            </button>
+          {/each}
+          {#if screenshots.length === 0}
+            <div class="empty-hint">
+              No screenshots yet. The Tester agent saves screenshots to <code>{SCREENSHOTS_DIR}/</code>
+            </div>
+          {/if}
+        </div>
+
+        <div class="log-section">
+          <div class="sidebar-header">
+            <span class="sidebar-title">Session Log</span>
+          </div>
+          <div class="log-output">
+            {#each seleniumLog as line}
+              <div class="log-line">{line}</div>
+            {/each}
+            {#if seleniumLog.length === 0}
+              <div class="empty-hint">No log entries</div>
+            {/if}
+          </div>
+        </div>
+      </div>
+
+      <div class="selenium-content">
+        {#if selectedScreenshot}
+          <div class="screenshot-preview">
+            <img
+              src="asset://localhost/{selectedScreenshot}"
+              alt="Selenium screenshot"
+              class="screenshot-img"
+            />
+          </div>
+        {:else}
+          <div class="empty-state">
+            Selenium screenshots will appear here during testing.
+            <br />
+            The Tester agent uses Selenium WebDriver for UI testing.
+          </div>
+        {/if}
+      </div>
+    </div>
+
+  {:else}
+    <!-- Automated Tests View -->
+    <div class="tests-view">
+      <div class="tests-sidebar">
+        <div class="sidebar-header">
+          <span class="sidebar-title">Test Files</span>
+          {#if lastTestResult}
+            <span class="result-badge" class:pass={lastTestResult === 'pass'} class:fail={lastTestResult === 'fail'}>
+              {lastTestResult === 'pass' ? '✓ PASS' : '✗ FAIL'}
+            </span>
+          {/if}
+        </div>
+        <div class="test-file-list">
+          {#each testFiles as file (file.path)}
+            <button
+              class="test-file-item"
+              class:active={selectedTestFile === file.path}
+              onclick={() => viewTestFile(file.path)}
+            >
+              <span class="test-icon">🧪</span>
+              <span class="test-name">{file.name}</span>
+            </button>
+          {/each}
+          {#if testFiles.length === 0}
+            <div class="empty-hint">
+              No test files found. The Tester agent creates tests in standard directories (tests/, test/, spec/).
+            </div>
+          {/if}
+        </div>
+      </div>
+
+      <div class="tests-content">
+        {#if selectedTestFile}
+          <div class="test-file-header">
+            <span class="test-file-name">{selectedTestFile.split('/').pop()}</span>
+          </div>
+          <pre class="test-output">{testOutput}</pre>
+        {:else}
+          <div class="empty-state">
+            Select a test file to view its contents.
+            <br />
+            The Tester agent runs tests via the terminal.
+          </div>
+        {/if}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .testing-tab {
+    display: flex;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  /* Shared sidebar patterns */
+  .selenium-sidebar, .tests-sidebar {
+    width: 12rem;
+    flex-shrink: 0;
+    border-right: 1px solid var(--ctp-surface0);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .sidebar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.375rem 0.5rem;
+    border-bottom: 1px solid var(--ctp-surface0);
+  }
+
+  .sidebar-title {
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: var(--ctp-subtext0);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .status-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--ctp-overlay0);
+  }
+
+  .status-dot.connected {
+    background: var(--ctp-green);
+    box-shadow: 0 0 4px var(--ctp-green);
+  }
+
+  .empty-hint {
+    padding: 0.5rem;
+    font-size: 0.65rem;
+    color: var(--ctp-overlay0);
+    line-height: 1.4;
+  }
+
+  .empty-hint code {
+    background: var(--ctp-surface0);
+    padding: 0.0625rem 0.25rem;
+    border-radius: 0.125rem;
+    font-size: 0.6rem;
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--ctp-overlay0);
+    font-size: 0.8rem;
+    text-align: center;
+    line-height: 1.6;
+    padding: 1rem;
+  }
+
+  /* Selenium view */
+  .selenium-view, .tests-view {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .screenshot-list, .test-file-list {
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .screenshot-item, .test-file-item {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.3125rem 0.5rem;
+    background: transparent;
+    border: none;
+    color: var(--ctp-subtext0);
+    font-size: 0.65rem;
+    text-align: left;
+    cursor: pointer;
+    transition: background 0.1s;
+  }
+
+  .screenshot-item:hover, .test-file-item:hover {
+    background: var(--ctp-surface0);
+    color: var(--ctp-text);
+  }
+
+  .screenshot-item.active, .test-file-item.active {
+    background: var(--ctp-surface0);
+    color: var(--ctp-text);
+    font-weight: 600;
+  }
+
+  .screenshot-name, .test-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .test-icon { font-size: 0.75rem; }
+
+  .log-section {
+    border-top: 1px solid var(--ctp-surface0);
+    display: flex;
+    flex-direction: column;
+    max-height: 40%;
+  }
+
+  .log-output {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.25rem 0.5rem;
+  }
+
+  .log-line {
+    font-size: 0.6rem;
+    font-family: var(--term-font-family, monospace);
+    color: var(--ctp-subtext0);
+    line-height: 1.4;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+
+  .selenium-content, .tests-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .screenshot-preview {
+    flex: 1;
+    overflow: auto;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 0.5rem;
+    background: var(--ctp-mantle);
+  }
+
+  .screenshot-img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 0.25rem;
+    border: 1px solid var(--ctp-surface0);
+  }
+
+  /* Tests view */
+  .result-badge {
+    font-size: 0.55rem;
+    font-weight: 700;
+    padding: 0.0625rem 0.25rem;
+    border-radius: 0.125rem;
+  }
+
+  .result-badge.pass {
+    background: color-mix(in srgb, var(--ctp-green) 15%, transparent);
+    color: var(--ctp-green);
+  }
+
+  .result-badge.fail {
+    background: color-mix(in srgb, var(--ctp-red) 15%, transparent);
+    color: var(--ctp-red);
+  }
+
+  .test-file-header {
+    display: flex;
+    align-items: center;
+    padding: 0.375rem 0.5rem;
+    border-bottom: 1px solid var(--ctp-surface0);
+    flex-shrink: 0;
+  }
+
+  .test-file-name {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--ctp-text);
+  }
+
+  .test-output {
+    flex: 1;
+    overflow: auto;
+    padding: 0.5rem;
+    margin: 0;
+    background: var(--ctp-mantle);
+    color: var(--ctp-subtext0);
+    font-size: 0.7rem;
+    font-family: var(--term-font-family, monospace);
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+</style>