malkuthro-ComfyUI-Koolook/web/guide/index.html

<!--
SPDX-FileCopyrightText: 2025-2026 Kforge Labs <https://github.com/malkuthro/ComfyUI-Koolook>
SPDX-License-Identifier: GPL-3.0-only
-->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kforge Labs Sidebar Guide</title>
  <link rel="stylesheet" href="./guide.css">
</head>
<body>
  <header class="hero">
    <p class="eyebrow">Kforge Labs</p>
    <h1>Use the sidebar as a project kit.</h1>
    <p class="lead">Save the nodes, modules, workflows, tags, and snapshot state you need for a project, then load that setup again when the work comes back.</p>
  </header>

  <main>
    <section class="section">
      <div class="section-copy">
        <p class="eyebrow">Start here</p>
        <h2>The sidebar has six main areas.</h2>
        <p>Snapshot, Tools, Search, Nodes, Workflows, and saved lists work together to keep each project kit easy to save, find, and reload.</p>
      </div>
      <figure class="visual">
        <div class="overview-map">
          <div class="overview-shot">
            <img src="./img/screenshots/sidebar-overview.png" alt="Kforge Labs sidebar overview screenshot">
            <span class="overview-box overview-snapshot" aria-hidden="true"></span>
            <span class="overview-box overview-tools" aria-hidden="true"></span>
            <span class="overview-box overview-search" aria-hidden="true"></span>
            <span class="overview-box overview-nodes" aria-hidden="true"></span>
            <span class="overview-box overview-workflows" aria-hidden="true"></span>
            <span class="overview-box overview-saved" aria-hidden="true"></span>
          </div>
          <div class="overview-callouts" aria-label="Sidebar sections">
            <article class="overview-callout snapshot">
              <h3>Snapshot row</h3>
              <p>Load, Quick Save, Save, Settings.</p>
            </article>
            <article class="overview-callout tools">
              <h3>Tools row</h3>
              <p>Maintenance plus the Help guide.</p>
            </article>
            <article class="overview-callout search">
              <h3>Search</h3>
              <p>Find nodes, workflows, folders, and tags.</p>
            </article>
            <article class="overview-callout nodes">
              <h3>Nodes action bar</h3>
              <p>Arrange nodes by Git repo name or theme, and add favorite nodes to the side panel.</p>
            </article>
            <article class="overview-callout workflows">
              <h3>Workflows action bar</h3>
              <p>Save the entire canvas or selected nodes.</p>
            </article>
            <article class="overview-callout saved">
              <h3>Saved lists</h3>
              <p>Nodes, Workflows, and Tags stay visible below.</p>
            </article>
          </div>
        </div>
        <figcaption>First read the sidebar from top to bottom: Snapshot, Tools, Search, Nodes, Workflows, Tags.</figcaption>
      </figure>
    </section>

    <section class="band">
      <div>
        <p class="eyebrow">Most important idea</p>
        <h2>Snapshot saves the whole project kit.</h2>
      </div>
      <p>A snapshot saves your favorite nodes, workflows, modules, tags, and the current sidebar organization. Use one named snapshot per project, shot, client, or experiment.</p>
      <figure class="visual full">
        <img src="./img/snapshot-flow.svg" alt="Snapshot flow from sidebar state to saved file to project library and later reload">
      </figure>
    </section>

    <section class="band band-text">
      <div>
        <p class="eyebrow">Two-layer save</p>
        <h2>Save when you mean it. Auto-save catches the rest.</h2>
      </div>
      <p>Your named snapshot only changes when you click <strong>Save</strong> or <strong>Quick Save</strong>. Auto-save runs every 5 minutes in the background — but only when something has actually changed — and writes a separate recovery copy under <code>&lt;snapshot&gt;_autosave/</code>. If you load a snapshot whose auto-save is newer than the saved version, Kforge Labs asks YES (load auto-save) or NO (load saved version). Every Load also writes a pre-load recovery file first, so destructive Loads are reversible from the Recovery section.</p>
    </section>

    <section class="section">
      <div class="section-copy">
        <p class="eyebrow">Project rhythm</p>
        <h2>A simple workflow</h2>
        <ol class="steps">
          <li>Load or create a snapshot, for example <strong>Client_Shot010</strong>.</li>
          <li>Add favorite nodes while building the shot.</li>
          <li>Save reusable node clusters as modules.</li>
          <li>Quick Save during the session.</li>
          <li>Save named snapshots for each project, shot, or task.</li>
          <li>Load the right snapshot when you return.</li>
        </ol>
      </div>
      <figure class="visual">
        <img src="./img/project-workflow.svg" alt="Six step project workflow for snapshots and modules">
        <figcaption>The goal is not to remember every button. The goal is to keep each project setup reusable.</figcaption>
      </figure>
    </section>

    <section class="cards" aria-label="Main sidebar functions">
      <article>
        <h3>Snapshots</h3>
        <p>Save and reload the whole project kit.</p>
        <ul class="function-list" aria-label="Snapshot functions">
          <li>Load</li>
          <li>Quick Save</li>
          <li>Save</li>
          <li>Settings</li>
        </ul>
      </article>
      <article>
        <h3>Nodes</h3>
        <p>Keep favorite nodes organized and easy to update.</p>
        <ul class="function-list" aria-label="Node functions">
          <li>Search</li>
          <li>Add</li>
          <li>Remove</li>
          <li>Smart view</li>
        </ul>
      </article>
      <article>
        <h3>Search</h3>
        <p>Find by name, repo, or tag — partial matches OK.</p>
        <ul class="function-list" aria-label="Search functions">
          <li>Nodes</li>
          <li>Workflows</li>
          <li>Folders</li>
          <li>Tags</li>
        </ul>
      </article>
      <article>
        <h3>Workflows</h3>
        <p>Save full scripts or reusable node selections.</p>
        <ul class="function-list" aria-label="Workflow functions">
          <li>Save script</li>
          <li>Save selection</li>
          <li>Load</li>
          <li>Insert module</li>
        </ul>
      </article>
      <article>
        <h3>Smart organization</h3>
        <p>Reshape your saved work folders, drag-drop, and move.</p>
        <ul class="function-list" aria-label="Organization functions">
          <li>Create folders</li>
          <li>Drag and drop</li>
          <li>Move setups</li>
          <li>Rename or archive</li>
        </ul>
      </article>
    </section>

    <section class="recipes">
      <div class="section-copy wide">
        <p class="eyebrow">Visual recipes</p>
        <h2>Common things you will do</h2>
      </div>
      <figure class="visual recipe-real">
        <div class="recipe-shot">
          <img src="./img/screenshots/save-snapshot.png" alt="Save snapshot dialog showing library folder and save options">
          <span class="focus-dot focus-save" aria-hidden="true"></span>
        </div>
        <div class="recipe-callout blue" aria-label="Save snapshot notes">
          <p><strong>Save</strong> updates the current project kit.</p>
          <p><strong>Save as new</strong> creates another named snapshot.</p>
        </div>
        <figcaption>Save the current sidebar state as a named project snapshot.</figcaption>
      </figure>
      <figure class="visual recipe-real">
        <div class="recipe-shot">
          <img src="./img/screenshots/load-snapshot.png" alt="Load snapshot dialog showing saved snapshots and recovery autosaves">
          <span class="focus-dot focus-load" aria-hidden="true"></span>
        </div>
        <div class="recipe-callout blue" aria-label="Load snapshot notes">
          <p><strong>Load snapshot</strong> row restores that saved project kit.</p>
          <p><strong>Recovery auto-saves</strong> are available below.</p>
        </div>
        <figcaption>Load a snapshot when you switch projects or return to a shot.</figcaption>
      </figure>
      <figure class="visual recipe-real module-recipe">
        <div class="recipe-shot">
          <img src="./img/screenshots/all-icons-new.png" alt="Sidebar toolbar screenshot with workflow save-selection highlighted">
          <span class="focus-dot focus-module" aria-hidden="true"></span>
        </div>
        <div class="recipe-callout amber" aria-label="Save selected nodes as module notes">
          <p><strong>Save</strong> saves the entire canvas under the workflows tree.</p>
          <p><strong>Save selection</strong> stores only the selected canvas nodes. Tag it with 'Module' to insert it back into another canvas later.</p>
        </div>
        <figcaption>Save selected nodes as a module, then insert that module into another canvas.</figcaption>
      </figure>
      <figure class="visual recipe-real">
        <div class="recipe-shot">
          <img src="./img/screenshots/search-C.png" alt="Search results showing matching favorite nodes">
          <span class="focus-dot focus-node-search" aria-hidden="true"></span>
        </div>
        <div class="recipe-callout green" aria-label="Node search notes">
          <p><strong>Search</strong> narrows displayed items so useful nodes and workflows are easier to find.</p>
        </div>
        <figcaption>Search narrows the Nodes list so useful favorites are easier to scan and add.</figcaption>
      </figure>
      <figure class="visual recipe-real">
        <div class="recipe-shot">
          <img src="./img/screenshots/right-click-functions.png" alt="Right-click context menu on a saved workflow showing available actions">
        </div>
        <div class="recipe-callout purple" aria-label="Right-click actions notes">
          <p><strong>Right-click</strong> any saved workflow or module for a full action menu.</p>
          <p><strong>Load</strong>, rename, retag, move between folders, or archive — all without leaving the sidebar.</p>
        </div>
        <figcaption>Manage saved workflows and modules directly from the right-click menu.</figcaption>
      </figure>
      <figure class="visual recipe-real">
        <div class="recipe-shot">
          <img src="./img/screenshots/folder-actions.png" alt="Sidebar showing folder actions — create, rename, delete, drag-and-drop">
        </div>
        <div class="recipe-callout green" aria-label="Folder actions notes">
          <p><strong>Create</strong> or <strong>delete</strong> folders to shape your library.</p>
          <p><strong>Drag and drop</strong> to rearrange items between folders.</p>
        </div>
        <figcaption>Organize your saved kit with folders — group, rename, or rearrange anytime.</figcaption>
      </figure>
    </section>
  </main>
</body>
</html>