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/PrdPanel.svelte

@@ -0,0 +1,375 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { get } from "svelte/store";
+  import { prdStore, type PrdTask } from "$lib/stores/prd";
+  import { characterState } from "$lib/stores/character";
+  import { claudeStore } from "$lib/stores/claude";
+
+  interface Props {
+    onClose: () => void;
+    workingDirectory: string;
+    onBackToWorkflow?: () => void;
+  }
+
+  const { onClose, workingDirectory, onBackToWorkflow }: Props = $props();
+
+  const tasks = $derived(prdStore.tasks);
+  const goal = $derived(prdStore.goal);
+  const isGenerating = $derived(prdStore.isGenerating);
+  const isLoaded = $derived(prdStore.isLoaded);
+  const isLoading = $derived(prdStore.isLoading);
+  const isSaving = $derived(prdStore.isSaving);
+
+  let goalInput = $state("");
+  let previousCharacterState = $state<string>("idle");
+
+  onMount(() => {
+    prdStore.loadFromFile(workingDirectory);
+  });
+
+  $effect(() => {
+    if ($isLoaded) {
+      goalInput = $goal;
+    }
+  });
+
+  // Auto-reload hikari-tasks.json when Claude finishes generating it
+  $effect(() => {
+    const currentState = $characterState;
+    if ($isGenerating && previousCharacterState !== "idle" && currentState === "idle") {
+      void prdStore.loadFromFile(workingDirectory).then(() => {
+        prdStore.finishGenerating();
+      });
+    }
+    previousCharacterState = currentState;
+  });
+
+  async function handleGenerate(): Promise<void> {
+    if (!goalInput.trim()) return;
+    const conversationId = get(claudeStore.activeConversationId);
+    if (!conversationId) return;
+    await prdStore.generatePrd(goalInput.trim(), workingDirectory, conversationId);
+  }
+
+  function handleRegenerate(): void {
+    prdStore.reset();
+    goalInput = "";
+  }
+
+  async function handleSave(): Promise<void> {
+    await prdStore.saveToFile(workingDirectory);
+  }
+
+  async function handleExecute(): Promise<void> {
+    const conversationId = get(claudeStore.activeConversationId);
+    if (!conversationId) return;
+    await prdStore.executePrd(workingDirectory, conversationId);
+    onClose();
+  }
+
+  function handleUpdateTask(id: string, field: keyof Omit<PrdTask, "id">, value: string): void {
+    if (field === "priority") {
+      prdStore.updateTask(id, { priority: value as PrdTask["priority"] });
+    } else {
+      prdStore.updateTask(id, { [field]: value });
+    }
+  }
+
+  function priorityColour(priority: PrdTask["priority"]): string {
+    switch (priority) {
+      case "high":
+        return "bg-red-500/20 text-red-400 border-red-500/30";
+      case "medium":
+        return "bg-amber-500/20 text-amber-400 border-amber-500/30";
+      case "low":
+        return "bg-green-500/20 text-green-400 border-green-500/30";
+    }
+  }
+</script>
+
+<div
+  class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
+  onclick={onClose}
+  role="button"
+  tabindex="0"
+  onkeydown={(e) => e.key === "Escape" && onClose()}
+>
+  <div
+    class="bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg shadow-xl max-w-3xl w-full max-h-[90vh] flex flex-col"
+    onclick={(e) => e.stopPropagation()}
+    onkeydown={(e) => e.stopPropagation()}
+    role="dialog"
+    aria-labelledby="prd-panel-title"
+    tabindex="-1"
+  >
+    <!-- Header -->
+    <div class="flex items-center justify-between p-6 pb-4 border-b border-[var(--border-color)]">
+      <div class="flex items-center gap-3">
+        <h2 id="prd-panel-title" class="text-xl font-semibold text-[var(--text-primary)]">
+          PRD Creator
+        </h2>
+        {#if $isGenerating}
+          <span class="text-xs text-[var(--text-tertiary)]">Generating tasks...</span>
+        {:else if $isLoading}
+          <span class="text-xs text-[var(--text-tertiary)]">Loading...</span>
+        {:else if $isLoaded}
+          <span
+            class="text-xs px-2 py-0.5 rounded-full bg-green-500/20 text-green-400 border border-green-500/30"
+          >
+            {$tasks.length} task{$tasks.length === 1 ? "" : "s"}
+          </span>
+        {/if}
+      </div>
+      <div class="flex items-center gap-2">
+        {#if onBackToWorkflow}
+          <button
+            onclick={onBackToWorkflow}
+            class="px-2 py-1 text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)] bg-[var(--bg-secondary)] hover:bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded-md transition-colors"
+          >
+            ← Workflow
+          </button>
+        {/if}
+        <button
+          onclick={onClose}
+          class="p-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
+          aria-label="Close"
+        >
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Body -->
+    <div class="flex-1 overflow-y-auto p-4 min-h-0">
+      {#if $isGenerating}
+        <!-- Generating -->
+        <div class="flex flex-col items-center justify-center h-full gap-4 text-center py-16">
+          <div class="text-4xl animate-spin">⚙️</div>
+          <h3 class="text-lg font-semibold text-[var(--text-primary)]">Generating Tasks...</h3>
+          <p class="text-sm text-[var(--text-secondary)]">
+            Claude is breaking down your goal into actionable tasks and writing
+            <span class="font-mono text-xs">hikari-tasks.json</span>. This will auto-reload when
+            complete.
+          </p>
+        </div>
+      {:else if $isLoaded}
+        <!-- Task review -->
+        <div class="flex flex-col gap-3">
+          <div
+            class="text-sm text-[var(--text-secondary)] bg-[var(--bg-secondary)] rounded-lg px-4 py-2 border border-[var(--border-color)]"
+          >
+            <span class="text-[var(--text-tertiary)] font-medium">Goal:</span>
+            {$goal}
+          </div>
+          {#each $tasks as task, index (task.id)}
+            <div
+              class="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-4 flex flex-col gap-3"
+            >
+              <!-- Task header row -->
+              <div class="flex items-center gap-2">
+                <span class="text-xs text-[var(--text-tertiary)] font-mono w-8 shrink-0"
+                  >#{index + 1}</span
+                >
+                <input
+                  type="text"
+                  value={task.title}
+                  oninput={(e) =>
+                    handleUpdateTask(task.id, "title", (e.target as HTMLInputElement).value)}
+                  class="flex-1 bg-transparent text-sm font-medium text-[var(--text-primary)] border-b border-transparent hover:border-[var(--border-color)] focus:border-[var(--accent-primary)] focus:outline-none transition-colors py-0.5"
+                  placeholder="Task title"
+                />
+                <select
+                  value={task.priority}
+                  onchange={(e) =>
+                    handleUpdateTask(task.id, "priority", (e.target as HTMLSelectElement).value)}
+                  class="text-xs px-2 py-1 rounded-full border {priorityColour(
+                    task.priority
+                  )} bg-transparent cursor-pointer focus:outline-none"
+                >
+                  <option value="high">high</option>
+                  <option value="medium">medium</option>
+                  <option value="low">low</option>
+                </select>
+                <div class="flex items-center gap-1 shrink-0">
+                  <button
+                    onclick={() => prdStore.moveTaskUp(task.id)}
+                    disabled={index === 0}
+                    class="p-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+                    title="Move up"
+                    aria-label="Move task up"
+                  >
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M5 15l7-7 7 7"
+                      />
+                    </svg>
+                  </button>
+                  <button
+                    onclick={() => prdStore.moveTaskDown(task.id)}
+                    disabled={index === $tasks.length - 1}
+                    class="p-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+                    title="Move down"
+                    aria-label="Move task down"
+                  >
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M19 9l-7 7-7-7"
+                      />
+                    </svg>
+                  </button>
+                  <button
+                    onclick={() => prdStore.removeTask(task.id)}
+                    class="p-1 text-[var(--text-secondary)] hover:text-red-400 transition-colors"
+                    title="Remove task"
+                    aria-label="Remove task"
+                  >
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <!-- Prompt textarea -->
+              <textarea
+                value={task.prompt}
+                oninput={(e) =>
+                  handleUpdateTask(task.id, "prompt", (e.target as HTMLTextAreaElement).value)}
+                rows={3}
+                class="w-full bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg p-3 font-mono text-xs text-[var(--text-secondary)] resize-y focus:outline-none focus:border-[var(--accent-primary)] leading-relaxed"
+                placeholder="Prompt for Claude Code..."
+              ></textarea>
+            </div>
+          {/each}
+          {#if $tasks.length === 0}
+            <p class="text-sm text-[var(--text-tertiary)] text-center py-4">
+              No tasks — all removed. Click Regenerate to start over.
+            </p>
+          {/if}
+        </div>
+      {:else}
+        <!-- Input form -->
+        <div class="flex flex-col gap-4">
+          <div>
+            <label
+              for="prd-goal"
+              class="block text-sm font-medium text-[var(--text-secondary)] mb-2"
+            >
+              What do you want to build?
+            </label>
+            <textarea
+              id="prd-goal"
+              bind:value={goalInput}
+              rows={5}
+              class="w-full bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-4 text-sm text-[var(--text-primary)] resize-none focus:outline-none focus:border-[var(--accent-primary)] leading-relaxed"
+              placeholder="Describe the feature or project you want Claude to break down into tasks…"
+              spellcheck="false"
+            ></textarea>
+          </div>
+          <p class="text-xs text-[var(--text-tertiary)]">
+            Claude will analyse your goal and write a
+            <span class="font-mono">hikari-tasks.json</span> file with 3–10 actionable tasks, each with
+            a detailed prompt ready to execute.
+          </p>
+        </div>
+      {/if}
+    </div>
+
+    <!-- Footer -->
+    <div
+      class="flex items-center justify-between p-4 pt-2 border-t border-[var(--border-color)] gap-3"
+    >
+      <div class="text-xs text-[var(--text-tertiary)] font-mono">
+        {workingDirectory}/hikari-tasks.json
+      </div>
+      <div class="flex items-center gap-2">
+        {#if $isLoaded}
+          <button
+            onclick={handleRegenerate}
+            class="px-3 py-1.5 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] bg-[var(--bg-secondary)] hover:bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded-lg transition-colors"
+          >
+            Regenerate
+          </button>
+          <button
+            onclick={handleSave}
+            disabled={$isSaving}
+            class="px-3 py-1.5 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] bg-[var(--bg-secondary)] hover:bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {$isSaving ? "Saving..." : "Save"}
+          </button>
+          <button
+            onclick={handleExecute}
+            disabled={$tasks.length === 0}
+            class="px-4 py-1.5 text-sm btn-trans-gradient rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            Execute
+          </button>
+        {:else if !$isGenerating}
+          <button
+            onclick={handleGenerate}
+            disabled={!goalInput.trim()}
+            class="px-4 py-1.5 text-sm btn-trans-gradient rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            Generate PRD
+          </button>
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  [role="dialog"] {
+    animation: slideIn 0.2s ease-out;
+  }
+
+  @keyframes slideIn {
+    from {
+      opacity: 0;
+      transform: scale(0.95) translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+
+  textarea {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-color) transparent;
+  }
+
+  textarea::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  textarea::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  textarea::-webkit-scrollbar-thumb {
+    background-color: var(--border-color);
+    border-radius: 4px;
+  }
+
+  textarea::-webkit-scrollbar-thumb:hover {
+    background-color: var(--accent-primary);
+  }
+</style>