generated from nhcarrigan/template
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>
This commit was merged in pull request #197.
This commit is contained in:
@@ -0,0 +1,323 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { get } from "svelte/store";
|
||||
import {
|
||||
projectContextStore,
|
||||
PROJECT_FILE_NAMES,
|
||||
type ProjectFile,
|
||||
} from "$lib/stores/projectContext";
|
||||
import { characterState } from "$lib/stores/character";
|
||||
import { claudeStore } from "$lib/stores/claude";
|
||||
|
||||
interface Props {
|
||||
onClose: () => void;
|
||||
onInject: (content: string) => void;
|
||||
workingDirectory: string;
|
||||
}
|
||||
|
||||
const { onClose, onInject, workingDirectory }: Props = $props();
|
||||
|
||||
const ALL_FILES: ProjectFile[] = ["PROJECT", "REQUIREMENTS", "ROADMAP", "STATE", "CODEBASE"];
|
||||
|
||||
const contents = $derived(projectContextStore.contents);
|
||||
const isLoading = $derived(projectContextStore.isLoading);
|
||||
const isSaving = $derived(projectContextStore.isSaving);
|
||||
const activeFile = $derived(projectContextStore.activeFile);
|
||||
const isMappingCodebase = $derived(projectContextStore.isMappingCodebase);
|
||||
|
||||
let editContent = $state("");
|
||||
let hasUnsavedChanges = $state(false);
|
||||
let previousCharacterState = $state<string>("idle");
|
||||
|
||||
onMount(() => {
|
||||
projectContextStore.loadAll(workingDirectory);
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
const file = $activeFile;
|
||||
const fileContent = $contents[file];
|
||||
if (file === "CODEBASE") {
|
||||
editContent = fileContent ?? "";
|
||||
} else {
|
||||
editContent = fileContent ?? projectContextStore.getTemplate(file);
|
||||
}
|
||||
hasUnsavedChanges = false;
|
||||
});
|
||||
|
||||
// Auto-reload CODEBASE.md when Claude finishes generating it
|
||||
$effect(() => {
|
||||
const currentState = $characterState;
|
||||
if ($isMappingCodebase && previousCharacterState !== "idle" && currentState === "idle") {
|
||||
projectContextStore.loadFile("CODEBASE", workingDirectory);
|
||||
projectContextStore.finishMapping();
|
||||
}
|
||||
previousCharacterState = currentState;
|
||||
});
|
||||
|
||||
function handleTabSwitch(file: ProjectFile): void {
|
||||
projectContextStore.setActiveFile(file);
|
||||
}
|
||||
|
||||
function handleUseTemplate(): void {
|
||||
editContent = projectContextStore.getTemplate($activeFile);
|
||||
hasUnsavedChanges = true;
|
||||
}
|
||||
|
||||
function handleInject(): void {
|
||||
onInject(editContent);
|
||||
}
|
||||
|
||||
async function handleSave(): Promise<void> {
|
||||
const saved = await projectContextStore.saveFile($activeFile, editContent, workingDirectory);
|
||||
if (saved) {
|
||||
hasUnsavedChanges = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleTextChange(event: Event): void {
|
||||
editContent = (event.target as HTMLTextAreaElement).value;
|
||||
hasUnsavedChanges = true;
|
||||
}
|
||||
|
||||
function fileExists(file: ProjectFile): boolean {
|
||||
return $contents[file] !== null;
|
||||
}
|
||||
|
||||
async function handleMapCodebase(): Promise<void> {
|
||||
const conversationId = get(claudeStore.activeConversationId);
|
||||
if (!conversationId) return;
|
||||
await projectContextStore.mapCodebase(workingDirectory, conversationId);
|
||||
}
|
||||
</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-4xl w-full max-h-[90vh] flex flex-col"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
onkeydown={(e) => e.stopPropagation()}
|
||||
role="dialog"
|
||||
aria-labelledby="project-context-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="project-context-title" class="text-xl font-semibold text-[var(--text-primary)]">
|
||||
Project Context
|
||||
</h2>
|
||||
{#if $activeFile === "CODEBASE"}
|
||||
{#if $isMappingCodebase}
|
||||
<span class="text-xs text-[var(--text-tertiary)]">Mapping codebase...</span>
|
||||
{:else if $isLoading[$activeFile]}
|
||||
<span class="text-xs text-[var(--text-tertiary)]">Loading...</span>
|
||||
{:else if fileExists($activeFile)}
|
||||
<span
|
||||
class="text-xs px-2 py-0.5 rounded-full bg-green-500/20 text-green-400 border border-green-500/30"
|
||||
>
|
||||
✓ File exists
|
||||
</span>
|
||||
{:else}
|
||||
<span
|
||||
class="text-xs px-2 py-0.5 rounded-full bg-amber-500/20 text-amber-400 border border-amber-500/30"
|
||||
>
|
||||
✗ Not generated
|
||||
</span>
|
||||
{/if}
|
||||
{:else if $isLoading[$activeFile]}
|
||||
<span class="text-xs text-[var(--text-tertiary)]">Loading...</span>
|
||||
{:else if fileExists($activeFile)}
|
||||
<span
|
||||
class="text-xs px-2 py-0.5 rounded-full bg-green-500/20 text-green-400 border border-green-500/30"
|
||||
>
|
||||
✓ File exists
|
||||
</span>
|
||||
{:else}
|
||||
<span
|
||||
class="text-xs px-2 py-0.5 rounded-full bg-amber-500/20 text-amber-400 border border-amber-500/30"
|
||||
>
|
||||
✗ Not created
|
||||
</span>
|
||||
{/if}
|
||||
{#if hasUnsavedChanges}
|
||||
<span class="text-xs text-[var(--text-tertiary)] italic">Unsaved changes</span>
|
||||
{/if}
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- Tab bar -->
|
||||
<div class="flex border-b border-[var(--border-color)] px-4">
|
||||
{#each ALL_FILES as file (file)}
|
||||
<button
|
||||
onclick={() => handleTabSwitch(file)}
|
||||
class="px-4 py-2 text-sm font-medium transition-colors relative {$activeFile === file
|
||||
? 'text-[var(--accent-primary)] border-b-2 border-[var(--accent-primary)] -mb-px'
|
||||
: 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'}"
|
||||
>
|
||||
{PROJECT_FILE_NAMES[file]}
|
||||
{#if !fileExists(file)}
|
||||
<span class="ml-1 text-amber-500">•</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Editor area -->
|
||||
<div class="flex-1 overflow-hidden p-4 min-h-0">
|
||||
{#if $activeFile === "CODEBASE" && !fileExists("CODEBASE") && !$isMappingCodebase}
|
||||
<!-- CODEBASE not generated yet — show prompt to map -->
|
||||
<div class="flex flex-col items-center justify-center h-full gap-4 text-center">
|
||||
<div class="text-4xl">🗺️</div>
|
||||
<h3 class="text-lg font-semibold text-[var(--text-primary)]">No Codebase Map Yet</h3>
|
||||
<p class="text-sm text-[var(--text-secondary)] max-w-md">
|
||||
Generate a <span class="font-mono text-xs">CODEBASE.md</span> file by asking Claude to analyse
|
||||
this project. Claude will scan the directory structure and create a comprehensive overview
|
||||
of the architecture and key components.
|
||||
</p>
|
||||
<button
|
||||
onclick={handleMapCodebase}
|
||||
class="px-5 py-2 text-sm btn-trans-gradient rounded-lg transition-colors"
|
||||
>
|
||||
Map Codebase
|
||||
</button>
|
||||
</div>
|
||||
{:else if $activeFile === "CODEBASE" && $isMappingCodebase}
|
||||
<!-- Mapping in progress -->
|
||||
<div class="flex flex-col items-center justify-center h-full gap-4 text-center">
|
||||
<div class="text-4xl animate-spin">⚙️</div>
|
||||
<h3 class="text-lg font-semibold text-[var(--text-primary)]">Mapping Codebase...</h3>
|
||||
<p class="text-sm text-[var(--text-secondary)]">
|
||||
Claude is analysing the project and writing <span class="font-mono text-xs"
|
||||
>CODEBASE.md</span
|
||||
>. This will auto-reload when complete.
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<textarea
|
||||
value={editContent}
|
||||
oninput={handleTextChange}
|
||||
readonly={$activeFile === "CODEBASE"}
|
||||
class="w-full h-full min-h-[400px] bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-4 font-mono text-sm text-[var(--text-primary)] resize-none focus:outline-none focus:border-[var(--accent-primary)] leading-relaxed {$activeFile ===
|
||||
'CODEBASE'
|
||||
? 'opacity-80 cursor-default'
|
||||
: ''}"
|
||||
placeholder="File content will appear here..."
|
||||
spellcheck="false"
|
||||
></textarea>
|
||||
{/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)]">
|
||||
<span class="font-mono">{workingDirectory}/{PROJECT_FILE_NAMES[$activeFile]}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
{#if $activeFile === "CODEBASE"}
|
||||
<button
|
||||
onclick={() => projectContextStore.loadFile("CODEBASE", workingDirectory)}
|
||||
disabled={$isLoading.CODEBASE || $isMappingCodebase}
|
||||
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"
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
<button
|
||||
onclick={handleMapCodebase}
|
||||
disabled={$isMappingCodebase}
|
||||
class="px-4 py-1.5 text-sm btn-trans-gradient rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{#if $isMappingCodebase}
|
||||
Mapping...
|
||||
{:else}
|
||||
{fileExists("CODEBASE") ? "Remap Codebase" : "Map Codebase"}
|
||||
{/if}
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
onclick={handleUseTemplate}
|
||||
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"
|
||||
>
|
||||
Use Template
|
||||
</button>
|
||||
<button
|
||||
onclick={handleInject}
|
||||
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"
|
||||
>
|
||||
Inject into Prompt
|
||||
</button>
|
||||
<button
|
||||
onclick={handleSave}
|
||||
disabled={$isSaving[$activeFile]}
|
||||
class="px-4 py-1.5 text-sm btn-trans-gradient rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{#if $isSaving[$activeFile]}
|
||||
Saving...
|
||||
{:else}
|
||||
Save
|
||||
{/if}
|
||||
</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>
|
||||
Reference in New Issue
Block a user