feat: productivity suite — task loop, workflow, theming, docs & more (#197)

## Summary

A large productivity-focused feature branch delivering a suite of improvements across automation, project management, theming, performance, and documentation.

### Features

- **Guided Project Workflow** (#189) — Four-phase workflow panel (Discuss → Plan → Execute → Verify) to keep projects structured from idea to completion
- **Automated Task Loop** (#179) — Per-task conversation orchestration with wave-based parallel execution, blocked-task detection, and concurrency control
- **Wave-Based Parallel Execution** (#191) — Tasks run in dependency-aware waves with configurable concurrency; independent tasks execute in parallel
- **Auto-Commit After Task Completion** (#192) — Task Loop optionally commits after each completed task so progress is never lost
- **PRD Creator** (#180) — AI-assisted PRD and task list panel that outputs `hikari-tasks.json` for the Task Loop to consume
- **Project Context Panel** (#188) — Persistent `PROJECT.md`, `REQUIREMENTS.md`, `ROADMAP.md`, and `STATE.md` files injected into Claude's context automatically
- **Codebase Mapper** (#190) — Generates a `CODEBASE.md` architectural summary so Claude always understands the project structure
- **Community Preset Themes** (#181) — Six built-in community themes: Dracula, Catppuccin Mocha, Nord, Solarized Dark, Gruvbox Dark, and Rosé Pine
- **In-App Changelog Panel** (#193) — Fetches release notes from GitHub at runtime and displays them inside the app
- **Full Embedded Documentation** (#196) — Replaced the single-page help modal with a 12-page paginated docs browser featuring a sidebar TOC, prev/next navigation, keyboard navigation (arrow keys, `?` shortcut), and comprehensive coverage of every feature

### Performance & Fixes

- **Lazy Loading & Virtualisation** (#194) — Virtual windowing for conversation history, markdown memoisation, and debounced search for smooth rendering of large sessions
- **Ctrl+C Copy Fix** (#195) — `Ctrl+C` now copies selected text as expected; interrupt-Claude behaviour only fires when no text is selected

### UX

- Back-to-workflow button in PRD Creator and Task Loop panels for easy navigation
- Navigation icon cluster replaced with a single clean dropdown menu

## Closes

Closes #179
Closes #180
Closes #181
Closes #188
Closes #189
Closes #190
Closes #191
Closes #192
Closes #193
Closes #194
Closes #195
Closes #196

---

✨ This PR was created with help from Hikari~ 🌸

Reviewed-on: #197
Co-authored-by: Hikari <hikari@nhcarrigan.com>
Co-committed-by: Hikari <hikari@nhcarrigan.com>

src/lib/components/Markdown.test.ts

@@ -0,0 +1,163 @@
+/**
+ * Markdown Component Tests
+ *
+ * Tests the pure helper functions extracted from the Markdown component:
+ * - processSpoilers: wraps ||text|| syntax in spoiler spans, leaving code blocks untouched
+ * - highlightSearchMatches: injects <mark> tags for search terms, skipping code blocks
+ *
+ * Manual testing checklist:
+ * - [ ] Code blocks render with syntax highlighting and a copy button
+ * - [ ] ||spoiler text|| renders as a hidden span revealed on click
+ * - [ ] Search query highlights matching text in non-code content
+ * - [ ] Links open in the system browser via the Tauri opener
+ */
+
+import { describe, it, expect } from "vitest";
+
+// Mirror functions from Markdown.svelte for isolated testing
+
+function processSpoilers(html: string): string {
+  const codeBlockPlaceholders: string[] = [];
+
+  let processed = html.replace(/<(pre|code)[^>]*>[\s\S]*?<\/\1>/gi, (match) => {
+    codeBlockPlaceholders.push(match);
+    return `__CODE_PLACEHOLDER_${codeBlockPlaceholders.length - 1}__`;
+  });
+
+  processed = processed.replace(
+    /\|\|(.+?)\|\|/g,
+    '<span class="spoiler" role="button" tabindex="0">$1</span>'
+  );
+
+  processed = processed.replace(/__CODE_PLACEHOLDER_(\d+)__/g, (_, index) => {
+    return codeBlockPlaceholders[parseInt(index)];
+  });
+
+  return processed;
+}
+
+function highlightSearchMatches(html: string, query: string): string {
+  if (!query) return html;
+
+  const codeBlockPlaceholders: string[] = [];
+  const tagPlaceholders: string[] = [];
+
+  let processed = html.replace(/<(pre|code)[^>]*>[\s\S]*?<\/\1>/gi, (match) => {
+    codeBlockPlaceholders.push(match);
+    return `__CODE_SEARCH_PLACEHOLDER_${codeBlockPlaceholders.length - 1}__`;
+  });
+
+  processed = processed.replace(/<[^>]+>/g, (match) => {
+    tagPlaceholders.push(match);
+    return `__TAG_PLACEHOLDER_${tagPlaceholders.length - 1}__`;
+  });
+
+  const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const regex = new RegExp(`(${escapedQuery})`, "gi");
+  processed = processed.replace(regex, '<mark class="search-highlight">$1</mark>');
+
+  processed = processed.replace(/__TAG_PLACEHOLDER_(\d+)__/g, (_, index) => {
+    return tagPlaceholders[parseInt(index)];
+  });
+
+  processed = processed.replace(/__CODE_SEARCH_PLACEHOLDER_(\d+)__/g, (_, index) => {
+    return codeBlockPlaceholders[parseInt(index)];
+  });
+
+  return processed;
+}
+
+// ---
+
+describe("processSpoilers", () => {
+  it("wraps ||text|| in a spoiler span", () => {
+    const result = processSpoilers("<p>||secret||</p>");
+    expect(result).toContain('<span class="spoiler"');
+    expect(result).toContain("secret");
+  });
+
+  it("adds role=button and tabindex to spoiler spans", () => {
+    const result = processSpoilers("<p>||hidden||</p>");
+    expect(result).toContain('role="button"');
+    expect(result).toContain('tabindex="0"');
+  });
+
+  it("leaves content without spoiler markers unchanged", () => {
+    const html = "<p>Normal text here</p>";
+    expect(processSpoilers(html)).toBe(html);
+  });
+
+  it("handles multiple spoilers in the same string", () => {
+    const result = processSpoilers("<p>||a|| and ||b||</p>");
+    const matches = result.match(/class="spoiler"/g);
+    expect(matches).toHaveLength(2);
+  });
+
+  it("does not apply spoiler syntax inside code blocks", () => {
+    const html = "<pre><code>||not a spoiler||</code></pre>";
+    const result = processSpoilers(html);
+    expect(result).not.toContain('class="spoiler"');
+    expect(result).toContain("||not a spoiler||");
+  });
+
+  it("does not apply spoiler syntax inside inline code", () => {
+    const html = "<p>Example: <code>||inline||</code></p>";
+    const result = processSpoilers(html);
+    expect(result).not.toContain('class="spoiler"');
+  });
+
+  it("handles spoilers adjacent to code blocks correctly", () => {
+    const html = "<pre><code>code</code></pre><p>||revealed||</p>";
+    const result = processSpoilers(html);
+    expect(result).toContain('<span class="spoiler"');
+    expect(result).toContain("<pre><code>code</code></pre>");
+  });
+});
+
+describe("highlightSearchMatches", () => {
+  it("returns unchanged html when query is empty string", () => {
+    const html = "<p>hello world</p>";
+    expect(highlightSearchMatches(html, "")).toBe(html);
+  });
+
+  it("wraps matched text in a mark element", () => {
+    const result = highlightSearchMatches("<p>hello world</p>", "hello");
+    expect(result).toContain('<mark class="search-highlight">hello</mark>');
+  });
+
+  it("is case-insensitive", () => {
+    const result = highlightSearchMatches("<p>Hello World</p>", "hello");
+    expect(result).toContain('<mark class="search-highlight">Hello</mark>');
+  });
+
+  it("highlights all occurrences", () => {
+    const result = highlightSearchMatches("<p>cat and cat</p>", "cat");
+    const matches = result.match(/<mark class="search-highlight">/g);
+    expect(matches).toHaveLength(2);
+  });
+
+  it("does not highlight inside code blocks", () => {
+    const html = "<pre><code>hello inside code</code></pre>";
+    const result = highlightSearchMatches(html, "hello");
+    expect(result).not.toContain('<mark class="search-highlight">');
+    expect(result).toContain("hello inside code");
+  });
+
+  it("does not corrupt HTML tags", () => {
+    const result = highlightSearchMatches('<p class="foo">hello</p>', "hello");
+    expect(result).toContain('<p class="foo">');
+    expect(result).toContain('<mark class="search-highlight">hello</mark>');
+  });
+
+  it("escapes regex special characters in the query", () => {
+    const result = highlightSearchMatches("<p>price: $1.00</p>", "$1");
+    expect(result).toContain('<mark class="search-highlight">$1</mark>');
+  });
+
+  it("highlights text outside code blocks whilst leaving code intact", () => {
+    const html = "<pre><code>match here</code></pre><p>match here too</p>";
+    const result = highlightSearchMatches(html, "match");
+    expect(result).toContain("<pre><code>match here</code></pre>");
+    expect(result).toContain('<mark class="search-highlight">match</mark>');
+  });
+});