generated from nhcarrigan/template
hikari
e6e9f7ae59
## 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>
376 lines
14 KiB
Svelte
376 lines
14 KiB
Svelte
<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>
|