hikari-desktop/src/lib/components/docs/DocsTaskLoop.svelte

<h3 class="text-lg font-semibold text-[var(--text-primary)] mb-4">Task Loop & Automation</h3>

<div class="space-y-4 text-sm text-[var(--text-secondary)]">
  <p>
    Hikari Desktop includes a full project automation suite — open any of these tools from the menu.
  </p>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Guided Workflow</h4>
    <p>A four-phase project workflow that orchestrates the other automation tools:</p>
    <ol class="space-y-1.5 mt-2 list-none">
      <li>
        <strong>1. Discuss</strong> — describe your project; Hikari writes a
        <code class="code">CONTEXT.md</code> file capturing requirements and goals
      </li>
      <li>
        <strong>2. Plan</strong> — use the PRD Creator to break the project into tasks
      </li>
      <li>
        <strong>3. Execute</strong> — run the Task Loop to complete all tasks automatically
      </li>
      <li>
        <strong>4. Verify</strong> — check acceptance criteria; Hikari writes
        <code class="code">VERIFY.md</code>
      </li>
    </ol>
    <p class="mt-2">
      Enable <strong>Quick Mode</strong> to skip Claude interactions in steps 1 and 4.
    </p>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">PRD Creator</h4>
    <p>
      Describe your project in plain English and Hikari will generate a structured
      <code class="code">hikari-tasks.json</code> task list. Tasks include titles, prompts, priorities,
      and dependency relationships.
    </p>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Task Loop</h4>
    <p>
      Executes tasks from <code class="code">hikari-tasks.json</code> automatically. Features include:
    </p>
    <ul class="space-y-1 mt-2">
      <li>
        • <strong>Wave-based parallelism</strong> — independent tasks run concurrently; dependent tasks
        wait for their prerequisites
      </li>
      <li>
        • <strong>Concurrency control</strong> — adjust the <kbd class="kbd">[−] N [+]</kbd> control to
        limit how many tasks run in parallel
      </li>
      <li>• <strong>Blocked detection</strong> — tasks whose dependencies failed are marked ⊘</li>
      <li>
        • <strong>Auto-commit</strong> — optionally commit changes after each task completes, with a configurable
        prefix and optional SUMMARY.md
      </li>
    </ul>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Project Context Panel</h4>
    <p>
      Manage persistent context files that are injected into every conversation:
      <code class="code">PROJECT.md</code>, <code class="code">REQUIREMENTS.md</code>,
      <code class="code">ROADMAP.md</code>, and <code class="code">STATE.md</code>. These help
      Hikari maintain consistent project understanding across sessions.
    </p>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Codebase Mapper</h4>
    <p>
      Generates a <code class="code">CODEBASE.md</code> architectural summary of your project — directory
      structure, key files, and their roles. Useful for onboarding Hikari to large codebases quickly.
    </p>
  </div>
</div>

<style>
  kbd.kbd {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    font-size: 0.75rem;
    font-family: monospace;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-primary);
  }

  code.code {
    font-family: monospace;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 0.05rem 0.3rem;
    color: var(--text-primary);
  }
</style>