fix: quest tree cleaned up a bit, Key's ratings not saving fixed

app.py

@@ -8,9 +8,66 @@ DB_PATH = "tarkov.db"
 def get_db():
     conn = sqlite3.connect(DB_PATH)
     conn.row_factory = sqlite3.Row
+    conn.execute("PRAGMA foreign_keys = ON")
     return conn
 
 
+def _migrate_key_ids_and_maps():
+    conn = sqlite3.connect(DB_PATH)
+    conn.row_factory = sqlite3.Row
+    conn.execute("PRAGMA foreign_keys = OFF")
+
+    # Backfill missing key IDs with their api_id so ratings can join correctly.
+    conn.execute("""
+        UPDATE keys
+        SET id = api_id
+        WHERE id IS NULL AND api_id IS NOT NULL
+    """)
+
+    # If key_maps was created with INTEGER key_id, migrate to TEXT to match keys.id.
+    cols = conn.execute("PRAGMA table_info(key_maps)").fetchall()
+    key_id_type = None
+    if cols:
+        for col in cols:
+            if col["name"] == "key_id":
+                key_id_type = (col["type"] or "").upper()
+                break
+    if key_id_type and key_id_type != "TEXT":
+        conn.execute("ALTER TABLE key_maps RENAME TO key_maps_old")
+        conn.execute("""
+            CREATE TABLE key_maps (
+              key_id TEXT NOT NULL,
+              map_id INTEGER NOT NULL,
+              PRIMARY KEY (key_id, map_id),
+              FOREIGN KEY (key_id) REFERENCES keys(id),
+              FOREIGN KEY (map_id) REFERENCES maps(id)
+            )
+        """)
+        conn.execute("""
+            INSERT OR IGNORE INTO key_maps (key_id, map_id)
+            SELECT CAST(key_id AS TEXT), map_id
+            FROM key_maps_old
+            WHERE key_id IS NOT NULL
+              AND EXISTS (SELECT 1 FROM keys WHERE id = CAST(key_id AS TEXT))
+        """)
+        conn.execute("DROP TABLE key_maps_old")
+
+    # Remove orphaned ratings created with "None" or missing keys.
+    conn.execute("""
+        DELETE FROM key_ratings
+        WHERE key_id IS NULL
+           OR key_id = 'None'
+           OR key_id NOT IN (SELECT id FROM keys)
+    """)
+
+    conn.commit()
+    conn.execute("PRAGMA foreign_keys = ON")
+    conn.close()
+
+
+_migrate_key_ids_and_maps()
+
+
 @app.route("/")
 def index():
     conn = get_db()
@@ -198,6 +255,7 @@ def rate_all():
 def quests():
     conn = get_db()
     only_collector = request.args.get("collector") == "1"
+    view = request.args.get("view", "flow")  # "flow" or "list"
 
     # All quests + done state
     all_quests = conn.execute("""
@@ -243,7 +301,7 @@ def quests():
 
     # Filter to collector-only if requested
     if only_collector:
-        visible = collector_prereqs | {collector_row["id"]}
+        visible = set(collector_prereqs)
     else:
         visible = set(quest_by_id.keys())
 
@@ -270,12 +328,14 @@ def quests():
         visible=visible,
         collector_prereqs=collector_prereqs,
         only_collector=only_collector,
+        view=view,
     )
 
 
 @app.route("/collector")
 def collector():
     conn = get_db()
+    view = request.args.get("view", "flow")
     collector = conn.execute(
         "SELECT id FROM quests WHERE name = 'Collector'"
     ).fetchone()
@@ -284,33 +344,76 @@ def collector():
         conn.close()
         return "Run import_quests.py first to populate quest data.", 503
 
-    # Recursive CTE: all transitive prerequisites, then keep only leaves
+    # All quests + done state
-    # (quests that are not themselves a dependency of another prereq)
+    all_quests = conn.execute("""
-    prereqs = conn.execute("""
+        SELECT q.id, q.name, q.trader, q.wiki_link,
+               COALESCE(qp.done, 0) AS done
+        FROM quests q
+        LEFT JOIN quest_progress qp ON q.id = qp.quest_id
+        ORDER BY q.trader, q.name
+    """).fetchall()
+
+    # All dependency edges
+    all_deps = conn.execute("SELECT quest_id, depends_on FROM quest_deps").fetchall()
+
+    # Collector prereq set (transitive)
+    rows = conn.execute("""
         WITH RECURSIVE deps(quest_id) AS (
             SELECT depends_on FROM quest_deps WHERE quest_id = ?
             UNION
             SELECT qd.depends_on FROM quest_deps qd
             JOIN deps d ON qd.quest_id = d.quest_id
         )
-        SELECT q.id, q.name, q.trader, q.wiki_link,
+        SELECT quest_id FROM deps
-               COALESCE(qp.done, 0) AS done
-        FROM quests q
-        JOIN deps d ON q.id = d.quest_id
-        LEFT JOIN quest_progress qp ON q.id = qp.quest_id
-        WHERE q.id NOT IN (
-            SELECT qd2.depends_on
-            FROM quest_deps qd2
-            WHERE qd2.quest_id IN (SELECT quest_id FROM deps)
-              AND qd2.depends_on IN (SELECT quest_id FROM deps)
-        )
-        ORDER BY q.trader, q.name
     """, (collector["id"],)).fetchall()
+    collector_prereqs = {r[0] for r in rows}
 
     conn.close()
-    total = len(prereqs)
+
-    done = sum(1 for q in prereqs if q["done"])
+    # Build lookup structures
-    return render_template("collector.html", quests=prereqs, total=total, done=done)
+    quest_by_id = {q["id"]: q for q in all_quests}
+    # children[parent_id] = [child_id, ...]  (child depends_on parent)
+    children = {}
+    parents = {}
+    for dep in all_deps:
+        child, parent = dep["quest_id"], dep["depends_on"]
+        children.setdefault(parent, []).append(child)
+        parents.setdefault(child, []).append(parent)
+    # Sort each child list by quest name
+    for parent_id in children:
+        children[parent_id].sort(key=lambda i: quest_by_id[i]["name"] if i in quest_by_id else "")
+
+    visible = set(collector_prereqs)
+
+    # Root quests: in visible set and have no parents also in visible set
+    roots = [
+        qid for qid in visible
+        if not any(p in visible for p in parents.get(qid, []))
+    ]
+
+    # Group roots by trader, sorted
+    trader_roots = {}
+    for qid in sorted(roots, key=lambda i: (quest_by_id[i]["trader"], quest_by_id[i]["name"])):
+        t = quest_by_id[qid]["trader"]
+        trader_roots.setdefault(t, []).append(qid)
+
+    traders = sorted(trader_roots.keys())
+
+    total = len(collector_prereqs)
+    done = sum(1 for qid in collector_prereqs if qid in quest_by_id and quest_by_id[qid]["done"])
+    return render_template(
+        "collector.html",
+        quest_by_id=quest_by_id,
+        children=children,
+        trader_roots=trader_roots,
+        traders=traders,
+        visible=visible,
+        collector_prereqs=collector_prereqs,
+        collector_id=collector["id"],
+        total=total,
+        done=done,
+        view=view,
+    )
 
 
 @app.route("/collector/toggle", methods=["POST"])

import_keys.py

@@ -62,9 +62,7 @@ def upsert_keys(conn, keys):
             continue
 
         cursor.execute(
-            """
+            "SELECT id FROM keys WHERE api_id = ?",
-            SELECT id FROM keys WHERE api_id = ?
-            """,
             (api_id,)
         )
         row = cursor.fetchone()
@@ -73,19 +71,20 @@ def upsert_keys(conn, keys):
             cursor.execute(
                 """
                 UPDATE keys
-                SET name = ?, short_name = ?, weight_kg = ?, uses = ?, wiki_url = ?, grid_image_url = ?
+                SET id = COALESCE(id, ?),
+                    name = ?, short_name = ?, weight_kg = ?, uses = ?, wiki_url = ?, grid_image_url = ?
                 WHERE api_id = ?
                 """,
-                (name, short_name, weight, uses, wiki_url, grid_image_url, api_id)
+                (api_id, name, short_name, weight, uses, wiki_url, grid_image_url, api_id)
             )
             updated += 1
         else:
             cursor.execute(
                 """
-                INSERT INTO keys (api_id, name, short_name, weight_kg, uses, wiki_url, grid_image_url)
+                INSERT INTO keys (id, api_id, name, short_name, weight_kg, uses, wiki_url, grid_image_url)
-                VALUES (?, ?, ?, ?, ?, ?, ?)
+                VALUES (?, ?, ?, ?, ?, ?, ?, ?)
                 """,
-                (api_id, name, short_name, weight, uses, wiki_url, grid_image_url)
+                (api_id, api_id, name, short_name, weight, uses, wiki_url, grid_image_url)
             )
             inserted += 1
 

templates/collector.html

@@ -1,3 +1,62 @@
+{# ══════════════════════════════════════════════
+   MACROS — must come before first use in Jinja2
+══════════════════════════════════════════════ #}
+
+{# List view: indented tree with ├── / └── connector lines.
+   open_stack: list of booleans — True = ancestor has more siblings (draw vert), False = last (draw blank).
+   is_last: whether this node is the last sibling among its parent's children. #}
+{% macro render_list_item(qid, quest_by_id, children, visible, collector_prereqs, open_stack, is_last, collector_id) %}
+{% set q = quest_by_id[qid] %}
+{% set visible_kids = [] %}
+{% for cid in children.get(qid, []) %}
+  {% if cid in visible %}{% set _ = visible_kids.append(cid) %}{% endif %}
+{% endfor %}
+<div class="list-item">
+  <div class="list-indent">
+    {% for open in open_stack %}
+      <div class="list-indent-seg {{ 'vert' if open else 'blank' }}"></div>
+    {% endfor %}
+    {% if open_stack %}
+      <div class="list-indent-seg {{ 'elbow' if is_last else 'tee' }}"></div>
+    {% endif %}
+  </div>
+  <div class="list-row{% if q.done %} done{% endif %}"
+       data-id="{{ qid }}" data-done="{{ '1' if q.done else '0' }}"
+       data-counted="{{ '1' if qid in collector_prereqs else '0' }}">
+    {% if qid in collector_prereqs %}<span class="kappa-star">★</span>{% endif %}
+    <span class="list-name">{{ q.name }}</span>
+    {% if q.wiki_link %}<a class="list-wiki" href="{{ q.wiki_link }}" target="_blank">wiki</a>{% endif %}
+    {% if qid != collector_id %}<button class="toggle-btn" onclick="toggle(this)">{{ '✓' if q.done else '○' }}</button>{% endif %}
+  </div>
+</div>
+{% set child_stack = open_stack + [not is_last] %}
+{% for cid in visible_kids %}
+  {% set child = quest_by_id[cid] %}
+  {% set child_last = loop.last %}
+  {% if child.trader != q.trader %}
+    <div class="list-item">
+      <div class="list-indent">
+        {% for open in child_stack %}
+          <div class="list-indent-seg {{ 'vert' if open else 'blank' }}"></div>
+        {% endfor %}
+        <div class="list-indent-seg {{ 'elbow' if child_last else 'tee' }}"></div>
+      </div>
+      <div class="list-row{% if child.done %} done{% endif %}"
+           data-id="{{ cid }}" data-done="{{ '1' if child.done else '0' }}"
+           data-counted="{{ '1' if cid in collector_prereqs else '0' }}">
+        {% if cid in collector_prereqs %}<span class="kappa-star">★</span>{% endif %}
+        <span class="list-name">{{ child.name }}</span>
+        {% if child.wiki_link %}<a class="list-wiki" href="{{ child.wiki_link }}" target="_blank">wiki</a>{% endif %}
+        <span class="cross-badge">{{ child.trader }}</span>
+        {% if cid != collector_id %}<button class="toggle-btn" onclick="toggle(this)">{{ '✓' if child.done else '○' }}</button>{% endif %}
+      </div>
+    </div>
+  {% else %}
+    {{ render_list_item(cid, quest_by_id, children, visible, collector_prereqs, child_stack, child_last, collector_id) }}
+  {% endif %}
+{% endfor %}
+{% endmacro %}
+
 <!doctype html>
 <html>
 <head>
@@ -8,12 +67,15 @@
       --bg: #121212;
       --panel: #1a1a1a;
       --text: #eee;
-      --muted: #bbb;
+      --muted: #888;
-      --border: #333;
+      --border: #2a2a2a;
       --accent: #9ccfff;
-      --done-bg: #1a2a1a;
       --done-text: #6ec96e;
+      --done-bg: #1a2a1a;
+      --kappa: #f0c040;
+      --line: #333;
     }
+    * { box-sizing: border-box; }
     body {
       font-family: sans-serif;
       background: var(--bg);
@@ -21,11 +83,29 @@
       margin: 0;
       padding: 16px;
     }
-    .page {
+    .page { max-width: 960px; margin: 0 auto; }
-      max-width: 780px;
+    nav { margin-bottom: 16px; font-size: 0.9rem; }
-      margin: 0 auto;
+    nav a { color: var(--accent); }
+    h1 { margin: 0 0 4px; }
+    .toolbar {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+      margin-bottom: 12px;
     }
-    h1 { margin-bottom: 4px; }
+    .filter-btn {
+      background: var(--panel);
+      border: 1px solid #444;
+      color: var(--text);
+      border-radius: 6px;
+      padding: 5px 14px;
+      cursor: pointer;
+      font-size: 0.85rem;
+      text-decoration: none;
+    }
+    .filter-btn.active { border-color: var(--kappa); color: var(--kappa); }
+    .sep { color: var(--border); }
     .subtitle {
       color: var(--muted);
       margin: 0 0 16px;
@@ -45,58 +125,166 @@
       border-radius: 999px;
       transition: width 0.3s;
     }
-    .trader-group { margin-bottom: 8px; }
+    .legend {
-    .trader-header {
+      display: flex;
+      gap: 16px;
       font-size: 0.8rem;
-      font-weight: bold;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
       color: var(--muted);
-      padding: 12px 0 4px;
+      flex-wrap: wrap;
-      border-bottom: 1px solid var(--border);
+      margin-bottom: 16px;
-      margin-bottom: 4px;
     }
-    .quest-row {
+    .legend span { display: flex; align-items: center; gap: 5px; }
+
+    /* Trader section */
+    .trader-section { margin-bottom: 8px; }
+    .trader-header {
       display: flex;
       align-items: center;
-      gap: 10px;
+      gap: 8px;
-      padding: 8px 4px;
+      padding: 10px 8px;
-      border-bottom: 1px solid #222;
+      background: var(--panel);
-      border-radius: 4px;
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      user-select: none;
     }
-    .quest-row.done {
+    .trader-header:hover { border-color: #444; }
-      background: var(--done-bg);
+    .trader-name {
-    }
+      font-weight: bold;
-    .quest-row.done .quest-name {
-      text-decoration: line-through;
-      color: var(--done-text);
-    }
-    .quest-name {
-      flex: 1;
       font-size: 0.95rem;
+      flex: 1;
     }
-    .quest-name a {
+    .trader-counts { font-size: 0.8rem; color: var(--muted); }
-      color: var(--accent);
+    .chevron { color: var(--muted); font-size: 0.8rem; transition: transform 0.15s; }
-      font-size: 0.8rem;
+    .trader-section.collapsed .chevron { transform: rotate(-90deg); }
-      margin-left: 6px;
+    .trader-body { padding: 6px 0 6px 8px; }
+    .trader-section.collapsed .trader-body { display: none; }
+
+    /* Flow tree */
+    .tree-root {
+      margin: 6px 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+    }
+    .tree-children {
+      display: flex;
+      gap: 14px;
+      align-items: flex-start;
+      justify-content: center;
+      position: relative;
+      padding-top: 18px;
+      flex-wrap: wrap;
+    }
+    .tree-children:before {
+      content: "";
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      right: 8px;
+      height: 1px;
+      background: var(--border);
+      opacity: 0.9;
+    }
+    .tree-children > .tree-root {
+      padding-top: 8px;
+    }
+    .tree-children > .tree-root:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 50%;
+      width: 1px;
+      height: 8px;
+      background: var(--border);
+    }
+    .quest-node {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 5px 6px;
+      border-radius: 4px;
+      margin: 2px 0;
+      position: relative;
+      background: #141820;
+      border: 1px solid #1b2230;
+    }
+    .quest-node.has-children:after {
+      content: "";
+      position: absolute;
+      left: 50%;
+      bottom: -8px;
+      width: 1px;
+      height: 8px;
+      background: var(--border);
+    }
+    .quest-node:hover { background: #1e1e1e; }
+    .quest-node.done .quest-label { text-decoration: line-through; color: var(--done-text); }
+    .quest-node.done { background: var(--done-bg); }
+    .quest-label { flex: 1; font-size: 0.9rem; }
+    .quest-label a { color: var(--accent); font-size: 0.75rem; margin-left: 6px; }
+    .kappa-star { color: var(--kappa); font-size: 0.75rem; flex-shrink: 0; }
+    .cross-trader {
+      font-size: 0.75rem;
+      color: var(--muted);
+      font-style: italic;
+      flex-shrink: 0;
     }
     .toggle-btn {
-      background: #2a2a2a;
+      background: transparent;
-      color: var(--text);
       border: 1px solid #444;
-      border-radius: 6px;
+      color: var(--muted);
-      padding: 4px 10px;
+      border-radius: 4px;
+      padding: 2px 7px;
       cursor: pointer;
-      font-size: 0.85rem;
+      font-size: 0.75rem;
-      white-space: nowrap;
+      flex-shrink: 0;
     }
-    .quest-row.done .toggle-btn {
+    .quest-node.done .toggle-btn {
-      background: #1e3a1e;
       border-color: #3a6a3a;
       color: var(--done-text);
     }
-    nav { margin-bottom: 20px; }
+
-    nav a { color: var(--accent); font-size: 0.9rem; }
+    /* ── LIST VIEW ──
+       Classic file-manager tree: ├── and └── connectors. */
+    .list-view .trader-body { padding: 4px 0; }
+    .list-tree { padding: 0; margin: 0; }
+    .list-item { display: flex; align-items: flex-start; }
+    .list-indent { display: flex; flex-shrink: 0; }
+    .list-indent-seg { width: 20px; flex-shrink: 0; position: relative; min-height: 30px; }
+    .list-indent-seg.vert::before {
+      content: ""; position: absolute; top: 0; bottom: 0; left: 9px; width: 1px; background: var(--line);
+    }
+    .list-indent-seg.tee::before {
+      content: ""; position: absolute; top: 0; bottom: 0; left: 9px; width: 1px; background: var(--line);
+    }
+    .list-indent-seg.tee::after {
+      content: ""; position: absolute; top: 50%; left: 9px; width: 11px; height: 1px; background: var(--line);
+    }
+    .list-indent-seg.elbow::before {
+      content: ""; position: absolute; top: 0; bottom: 50%; left: 9px; width: 1px; background: var(--line);
+    }
+    .list-indent-seg.elbow::after {
+      content: ""; position: absolute; top: 50%; left: 9px; width: 11px; height: 1px; background: var(--line);
+    }
+    .list-indent-seg.blank {}
+    .list-row {
+      flex: 1; display: flex; align-items: center; gap: 6px;
+      padding: 4px 6px 4px 2px; border-radius: 4px; margin: 1px 0;
+      background: transparent; min-height: 30px;
+    }
+    .list-row:hover { background: #1a1a1a; }
+    .list-row.done .list-name { text-decoration: line-through; color: var(--done-text); }
+    .list-name { font-size: 0.85rem; flex: 1; }
+    .list-wiki { color: var(--accent); font-size: 0.72rem; text-decoration: none; flex-shrink: 0; }
+    .list-wiki:hover { text-decoration: underline; }
+    .list-row .kappa-star { font-size: 0.72rem; }
+    .list-row .cross-badge { font-size: 0.7rem; }
+    .list-row .toggle-btn { font-size: 0.72rem; }
+    .list-row.done .toggle-btn { border-color: #3a6a3a; color: var(--done-text); }
+
+    .flow-view.hidden, .list-view.hidden { display: none; }
   </style>
 </head>
 <body>
@@ -117,30 +305,131 @@
     <div class="progress-bar-fill" style="width: {{ (done / total * 100) | round(1) if total else 0 }}%"></div>
   </div>
 
-  {% set ns = namespace(current_trader=None) %}
+  <div class="toolbar">
-  {% for quest in quests %}
+    <a class="filter-btn {% if view != 'list' %}active{% endif %}" href="/collector?view=flow">Flow</a>
-    {% if quest.trader != ns.current_trader %}
+    <a class="filter-btn {% if view == 'list' %}active{% endif %}" href="/collector?view=list">List</a>
-      {% if ns.current_trader is not none %}</div>{% endif %}
+    <span class="sep">|</span>
-      <div class="trader-group">
+    <button class="filter-btn" type="button" onclick="setAllTradersCollapsed(true)">Collapse all</button>
-      <div class="trader-header">{{ quest.trader }}</div>
+    <button class="filter-btn" type="button" onclick="setAllTradersCollapsed(false)">Expand all</button>
-      {% set ns.current_trader = quest.trader %}
+  </div>
-    {% endif %}
 
-    <div class="quest-row {% if quest.done %}done{% endif %}" id="quest-{{ quest.id }}" data-id="{{ quest.id }}" data-done="{{ '1' if quest.done else '0' }}">
+  <div class="legend">
-      <span class="quest-name">
+    <span><span style="color:var(--kappa)">★</span> Required for Collector</span>
-        {{ quest.name }}
+    <span><span style="color:var(--done-text)">✓</span> Marked done</span>
-        {% if quest.wiki_link %}
+    <span><span style="color:var(--muted);font-style:italic">← Trader</span> Cross-trader dependency</span>
-          <a href="{{ quest.wiki_link }}" target="_blank">wiki</a>
+  </div>
-        {% endif %}
+
+{% macro render_node(qid, quest_by_id, children, visible, collector_prereqs, collector_id, is_root=False) %}
+{% set q = quest_by_id[qid] %}
+{% set visible_kids = [] %}
+{% for cid in children.get(qid, []) %}
+  {% if cid in visible %}{% set _ = visible_kids.append(cid) %}{% endif %}
+{% endfor %}
+<div class="tree-root">
+  <div class="quest-node {% if q.done %}done{% endif %} {% if is_root %}root-node{% endif %}{% if visible_kids %} has-children{% endif %}"
+       id="qnode-{{ qid }}"
+       data-id="{{ qid }}"
+       data-done="{{ '1' if q.done else '0' }}"
+       data-counted="{{ '1' if qid in collector_prereqs else '0' }}">
+    {% if qid in collector_prereqs %}<span class="kappa-star" title="Required for Collector">★</span>{% endif %}
+    <span class="quest-label">
+      {{ q.name }}
+      {% if q.wiki_link %}<a href="{{ q.wiki_link }}" target="_blank">wiki</a>{% endif %}
     </span>
+    {% if qid != collector_id %}
       <button class="toggle-btn" onclick="toggle(this)">
-        {{ '✓ Done' if quest.done else 'Mark done' }}
+        {{ '✓' if q.done else '○' }}
       </button>
+    {% endif %}
+  </div>
+  {% if visible_kids %}
+  <div class="tree-children">
+    {% for cid in visible_kids %}
+      {% set child = quest_by_id[cid] %}
+      {% if child.trader != q.trader %}
+        <div class="quest-node {% if child.done %}done{% endif %}"
+             data-id="{{ cid }}"
+             data-done="{{ '1' if child.done else '0' }}"
+             data-counted="{{ '1' if cid in collector_prereqs else '0' }}">
+          {% if cid in collector_prereqs %}<span class="kappa-star">★</span>{% endif %}
+          <span class="quest-label">
+            {{ child.name }}
+            {% if child.wiki_link %}<a href="{{ child.wiki_link }}" target="_blank">wiki</a>{% endif %}
+          </span>
+          <span class="cross-trader">← {{ child.trader }}</span>
+          {% if cid != collector_id %}
+            <button class="toggle-btn" onclick="toggle(this)">{{ '✓' if child.done else '○' }}</button>
+          {% endif %}
+        </div>
+      {% else %}
+        {{ render_node(cid, quest_by_id, children, visible, collector_prereqs, collector_id, false) }}
+      {% endif %}
+    {% endfor %}
+  </div>
+  {% endif %}
+</div>
+{% endmacro %}
+
+  {# ── FLOW VIEW ── #}
+  <div class="flow-view {% if view == 'list' %}hidden{% endif %}">
+  {% for trader in traders %}
+    {% set roots = trader_roots[trader] %}
+    {% set total_trader = namespace(n=0) %}
+    {% set done_trader = namespace(n=0) %}
+    {% for qid in visible %}
+      {% if quest_by_id[qid].trader == trader and qid in collector_prereqs %}
+        {% set total_trader.n = total_trader.n + 1 %}
+        {% if quest_by_id[qid].done %}{% set done_trader.n = done_trader.n + 1 %}{% endif %}
+      {% endif %}
+    {% endfor %}
+
+    <div class="trader-section" id="flow-{{ trader | replace(' ', '-') }}">
+      <div class="trader-header" onclick="toggleTrader(this)">
+        <span class="trader-name">{{ trader }}</span>
+        <span class="trader-counts">{{ done_trader.n }} / {{ total_trader.n }}</span>
+        <span class="chevron">▾</span>
+      </div>
+      <div class="trader-body">
+        {% for root_id in roots %}
+          {{ render_node(root_id, quest_by_id, children, visible, collector_prereqs, collector_id, true) }}
+        {% endfor %}
+      </div>
     </div>
   {% endfor %}
-  {% if ns.current_trader is not none %}</div>{% endif %}
+  </div>
+
+  {# ── LIST VIEW ── #}
+  <div class="list-view {% if view != 'list' %}hidden{% endif %}">
+  {% for trader in traders %}
+    {% set roots = trader_roots[trader] %}
+    {% set total_trader = namespace(n=0) %}
+    {% set done_trader = namespace(n=0) %}
+    {% for qid in visible %}
+      {% if quest_by_id[qid].trader == trader and qid in collector_prereqs %}
+        {% set total_trader.n = total_trader.n + 1 %}
+        {% if quest_by_id[qid].done %}{% set done_trader.n = done_trader.n + 1 %}{% endif %}
+      {% endif %}
+    {% endfor %}
+
+    <div class="trader-section" id="list-{{ trader | replace(' ', '-') }}">
+      <div class="trader-header" onclick="toggleTrader(this)">
+        <span class="trader-name">{{ trader }}</span>
+        <span class="trader-counts">{{ done_trader.n }} / {{ total_trader.n }}</span>
+        <span class="chevron">▾</span>
+      </div>
+      <div class="trader-body">
+        <div class="list-tree">
+          {% for root_id in roots %}
+            {{ render_list_item(root_id, quest_by_id, children, visible, collector_prereqs, [], loop.last, collector_id) }}
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  {% endfor %}
+  </div>
 
 </div>
+
 <script>
   let doneCount = {{ done }};
   const total = {{ total }};
@@ -151,26 +440,69 @@
     document.querySelector('.progress-bar-fill').style.width = pct + '%';
   }
 
-  function toggle(btn) {
+  function toggleTrader(header) {
-    const row = btn.closest('.quest-row');
+    const section = header.closest('.trader-section');
-    const id = row.dataset.id;
+    section.classList.toggle('collapsed');
-    const nowDone = row.dataset.done === '1' ? 0 : 1;
+    persistCollapsed();
+  }
 
-    const body = new URLSearchParams({ quest_id: id, done: nowDone });
+  function setAllTradersCollapsed(collapsed) {
-    fetch('/collector/toggle', { method: 'POST', body })
+    document.querySelectorAll('.trader-section').forEach(section => {
+      section.classList.toggle('collapsed', collapsed);
+    });
+    persistCollapsed();
+  }
+
+  const COLLAPSE_KEY = 'collector.collapsedTraders2';
+
+  function persistCollapsed() {
+    const collapsed = Array.from(document.querySelectorAll('.trader-section.collapsed'))
+      .map(s => s.id);
+    localStorage.setItem(COLLAPSE_KEY, JSON.stringify(collapsed));
+  }
+
+  function restoreCollapsed() {
+    try {
+      const raw = localStorage.getItem(COLLAPSE_KEY);
+      if (!raw) return;
+      const ids = JSON.parse(raw);
+      if (!Array.isArray(ids)) return;
+      ids.forEach(id => {
+        const section = document.getElementById(id);
+        if (section) section.classList.add('collapsed');
+      });
+    } catch (e) {
+      // ignore storage/parse errors
+    }
+  }
+
+  restoreCollapsed();
+
+  function toggle(btn) {
+    const node = btn.closest('[data-id]');
+    const id = node.dataset.id;
+    const wasDone = node.dataset.done === '1';
+    const nowDone = wasDone ? 0 : 1;
+
+    fetch('/collector/toggle', {
+      method: 'POST',
+      body: new URLSearchParams({ quest_id: id, done: nowDone })
+    })
     .then(r => r.json())
     .then(() => {
-        row.dataset.done = nowDone;
+      document.querySelectorAll(`[data-id="${id}"]`).forEach(n => {
-        if (nowDone) {
+        n.dataset.done = nowDone;
-          row.classList.add('done');
+        const b = n.querySelector('.toggle-btn');
-          btn.textContent = '✓ Done';
+        if (b) {
-          doneCount++;
+          if (nowDone) { n.classList.add('done'); b.textContent = '✓'; }
-        } else {
+          else          { n.classList.remove('done'); b.textContent = '○'; }
-          row.classList.remove('done');
-          btn.textContent = 'Mark done';
-          doneCount--;
         }
+      });
+
+      if (node.dataset.counted === '1') {
+        doneCount += nowDone ? 1 : -1;
         updateProgress();
+      }
     });
   }
 </script>

templates/quests.html

@@ -1,3 +1,102 @@
+{# ══════════════════════════════════════════════
+   MACROS — must come before first use in Jinja2
+══════════════════════════════════════════════ #}
+
+{# Flow view: depth-indented vertical chain with connector lines #}
+{% macro render_chain(qid, quest_by_id, children, visible, collector_prereqs, depth) %}
+{% set q = quest_by_id[qid] %}
+{% set visible_kids = [] %}
+{% for cid in children.get(qid, []) %}
+  {% if cid in visible %}{% set _ = visible_kids.append(cid) %}{% endif %}
+{% endfor %}
+{% if depth > 0 %}<div class="fnode-connector" style="margin-left:{{ depth * 22 + 10 }}px"></div>{% endif %}
+<div class="fnode-wrap" style="padding-left:{{ depth * 22 }}px">
+  <div class="fnode{% if q.done %} done{% endif %}{% if qid in collector_prereqs %} kappa-node{% endif %}"
+       data-id="{{ qid }}" data-done="{{ '1' if q.done else '0' }}">
+    <div class="fnode-top">
+      {% if qid in collector_prereqs %}<span class="kappa-star" title="Collector req">★</span>{% endif %}
+      <span class="fnode-name">{{ q.name }}</span>
+      {% if q.wiki_link %}<a class="fnode-wiki" href="{{ q.wiki_link }}" target="_blank">wiki</a>{% endif %}
+      <button class="toggle-btn" onclick="toggle(this)">{{ '✓' if q.done else '○' }}</button>
+    </div>
+  </div>
+</div>
+{% for cid in visible_kids %}
+  {% set child = quest_by_id[cid] %}
+  {% if child.trader != q.trader %}
+    <div class="fnode-connector" style="margin-left:{{ (depth+1)*22 + 10 }}px"></div>
+    <div class="fnode-wrap" style="padding-left:{{ (depth+1)*22 }}px">
+      <div class="fnode{% if child.done %} done{% endif %}{% if cid in collector_prereqs %} kappa-node{% endif %}"
+           data-id="{{ cid }}" data-done="{{ '1' if child.done else '0' }}">
+        <div class="fnode-top">
+          {% if cid in collector_prereqs %}<span class="kappa-star">★</span>{% endif %}
+          <span class="fnode-name">{{ child.name }}</span>
+          {% if child.wiki_link %}<a class="fnode-wiki" href="{{ child.wiki_link }}" target="_blank">wiki</a>{% endif %}
+          <button class="toggle-btn" onclick="toggle(this)">{{ '✓' if child.done else '○' }}</button>
+        </div>
+        <div class="fnode-meta"><span class="cross-badge">{{ child.trader }}</span></div>
+      </div>
+    </div>
+  {% else %}
+    {{ render_chain(cid, quest_by_id, children, visible, collector_prereqs, depth + 1) }}
+  {% endif %}
+{% endfor %}
+{% endmacro %}
+
+
+{# List view: indented tree with ├── / └── connector lines.
+   open_stack: list of booleans — True = ancestor has more siblings (draw vert), False = last (draw blank).
+   is_last: whether this node is the last sibling among its parent's children. #}
+{% macro render_list_item(qid, quest_by_id, children, visible, collector_prereqs, open_stack, is_last) %}
+{% set q = quest_by_id[qid] %}
+{% set visible_kids = [] %}
+{% for cid in children.get(qid, []) %}
+  {% if cid in visible %}{% set _ = visible_kids.append(cid) %}{% endif %}
+{% endfor %}
+<div class="list-item">
+  <div class="list-indent">
+    {% for open in open_stack %}
+      <div class="list-indent-seg {{ 'vert' if open else 'blank' }}"></div>
+    {% endfor %}
+    {% if open_stack %}
+      <div class="list-indent-seg {{ 'elbow' if is_last else 'tee' }}"></div>
+    {% endif %}
+  </div>
+  <div class="list-row{% if q.done %} done{% endif %}"
+       data-id="{{ qid }}" data-done="{{ '1' if q.done else '0' }}">
+    {% if qid in collector_prereqs %}<span class="kappa-star">★</span>{% endif %}
+    <span class="list-name">{{ q.name }}</span>
+    {% if q.wiki_link %}<a class="list-wiki" href="{{ q.wiki_link }}" target="_blank">wiki</a>{% endif %}
+    <button class="toggle-btn" onclick="toggle(this)">{{ '✓' if q.done else '○' }}</button>
+  </div>
+</div>
+{% set child_stack = open_stack + [not is_last] %}
+{% for cid in visible_kids %}
+  {% set child = quest_by_id[cid] %}
+  {% set child_last = loop.last %}
+  {% if child.trader != q.trader %}
+    <div class="list-item">
+      <div class="list-indent">
+        {% for open in child_stack %}
+          <div class="list-indent-seg {{ 'vert' if open else 'blank' }}"></div>
+        {% endfor %}
+        <div class="list-indent-seg {{ 'elbow' if child_last else 'tee' }}"></div>
+      </div>
+      <div class="list-row{% if child.done %} done{% endif %}"
+           data-id="{{ cid }}" data-done="{{ '1' if child.done else '0' }}">
+        {% if cid in collector_prereqs %}<span class="kappa-star">★</span>{% endif %}
+        <span class="list-name">{{ child.name }}</span>
+        {% if child.wiki_link %}<a class="list-wiki" href="{{ child.wiki_link }}" target="_blank">wiki</a>{% endif %}
+        <span class="cross-badge">{{ child.trader }}</span>
+        <button class="toggle-btn" onclick="toggle(this)">{{ '✓' if child.done else '○' }}</button>
+      </div>
+    </div>
+  {% else %}
+    {{ render_list_item(cid, quest_by_id, children, visible, collector_prereqs, child_stack, child_last) }}
+  {% endif %}
+{% endfor %}
+{% endmacro %}
+
 <!doctype html>
 <html>
 <head>
@@ -14,115 +113,115 @@
       --done-text: #6ec96e;
       --done-bg: #1a2a1a;
       --kappa: #f0c040;
+      --line: #333;
     }
     * { box-sizing: border-box; }
-    body {
+    body { font-family: sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 16px; }
-      font-family: sans-serif;
+    .page { max-width: 1100px; margin: 0 auto; }
-      background: var(--bg);
-      color: var(--text);
-      margin: 0;
-      padding: 16px;
-    }
-    .page { max-width: 960px; margin: 0 auto; }
     nav { margin-bottom: 16px; font-size: 0.9rem; }
     nav a { color: var(--accent); }
     h1 { margin: 0 0 4px; }
-    .toolbar {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      flex-wrap: wrap;
-      margin-bottom: 20px;
-    }
-    .filter-btn {
-      background: var(--panel);
-      border: 1px solid #444;
-      color: var(--text);
-      border-radius: 6px;
-      padding: 6px 14px;
-      cursor: pointer;
-      font-size: 0.9rem;
-      text-decoration: none;
-    }
-    .filter-btn.active {
-      border-color: var(--kappa);
-      color: var(--kappa);
-    }
-    .legend {
-      display: flex;
-      gap: 16px;
-      font-size: 0.8rem;
-      color: var(--muted);
-      flex-wrap: wrap;
-    }
-    .legend span { display: flex; align-items: center; gap: 5px; }
 
-    /* Trader section */
+    /* toolbar */
+    .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
+    .filter-btn {
+      background: var(--panel); border: 1px solid #444; color: var(--text);
+      border-radius: 6px; padding: 5px 14px; cursor: pointer; font-size: 0.85rem; text-decoration: none;
+    }
+    .filter-btn.active { border-color: var(--kappa); color: var(--kappa); }
+    .sep { color: var(--border); }
+    .legend { display: flex; gap: 14px; font-size: 0.78rem; color: var(--muted); flex-wrap: wrap; margin-left: auto; }
+    .legend span { display: flex; align-items: center; gap: 4px; }
+
+    /* trader sections */
     .trader-section { margin-bottom: 8px; }
     .trader-header {
-      display: flex;
+      display: flex; align-items: center; gap: 8px; padding: 9px 10px;
-      align-items: center;
+      background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
-      gap: 8px;
+      cursor: pointer; user-select: none;
-      padding: 10px 8px;
-      background: var(--panel);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      cursor: pointer;
-      user-select: none;
     }
     .trader-header:hover { border-color: #444; }
-    .trader-name {
+    .trader-name { font-weight: bold; font-size: 0.9rem; flex: 1; }
-      font-weight: bold;
-      font-size: 0.95rem;
-      flex: 1;
-    }
     .trader-counts { font-size: 0.8rem; color: var(--muted); }
-    .chevron { color: var(--muted); font-size: 0.8rem; transition: transform 0.15s; }
+    .chevron { color: var(--muted); font-size: 0.75rem; transition: transform 0.15s; }
     .trader-section.collapsed .chevron { transform: rotate(-90deg); }
-    .trader-body { padding: 6px 0 6px 8px; }
+    .trader-body { padding: 4px 0; }
     .trader-section.collapsed .trader-body { display: none; }
 
-    /* Tree nodes */
+    /* ── FLOW VIEW ──
-    .tree-root { margin: 4px 0; }
+       Quests rendered as a depth-indented vertical chain.
-    .tree-children {
+       Parent → children flow top-to-bottom with indent + short vert connector. */
-      margin-left: 20px;
+    .flow-view .trader-body { padding: 8px 0 4px; }
-      border-left: 1px solid var(--border);
+    .fnode-connector {
-      padding-left: 10px;
+      width: 1px; height: 10px; background: var(--line); flex-shrink: 0;
     }
-    .quest-node {
+    .fnode-wrap { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
-      display: flex;
+    .fnode {
-      align-items: center;
+      width: calc(100% - 8px); margin: 0 4px; padding: 5px 8px;
-      gap: 8px;
+      border-radius: 5px; background: #141820; border: 1px solid #1e2535;
-      padding: 5px 6px;
-      border-radius: 4px;
-      margin: 2px 0;
     }
-    .quest-node:hover { background: #1e1e1e; }
+    .fnode:hover { background: #1c2030; }
-    .quest-node.done .quest-label { text-decoration: line-through; color: var(--done-text); }
+    .fnode.done { background: var(--done-bg); border-color: #2a4a2a; }
-    .quest-node.done { background: var(--done-bg); }
+    .fnode.kappa-node { border-color: #5a4a10; }
-    .quest-label { flex: 1; font-size: 0.9rem; }
+    .fnode-top { display: flex; align-items: center; gap: 5px; min-height: 20px; }
-    .quest-label a { color: var(--accent); font-size: 0.75rem; margin-left: 6px; }
+    .fnode-name { font-size: 0.83rem; flex: 1; line-height: 1.3; word-break: break-word; }
-    .kappa-star { color: var(--kappa); font-size: 0.75rem; flex-shrink: 0; }
+    .fnode.done .fnode-name { text-decoration: line-through; color: var(--done-text); }
-    .cross-trader {
+    .fnode-wiki { color: var(--accent); font-size: 0.7rem; text-decoration: none; flex-shrink: 0; }
-      font-size: 0.75rem;
+    .fnode-wiki:hover { text-decoration: underline; }
-      color: var(--muted);
+    .fnode-meta { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
-      font-style: italic;
+    .kappa-star { color: var(--kappa); font-size: 0.7rem; flex-shrink: 0; }
-      flex-shrink: 0;
+    .cross-badge {
+      font-size: 0.65rem; color: var(--muted); font-style: italic;
+      background: #222; border-radius: 3px; padding: 1px 4px;
     }
     .toggle-btn {
-      background: transparent;
+      background: transparent; border: 1px solid #444; color: var(--muted);
-      border: 1px solid #444;
+      border-radius: 3px; padding: 1px 5px; cursor: pointer; font-size: 0.7rem;
-      color: var(--muted);
+      flex-shrink: 0; margin-left: auto;
-      border-radius: 4px;
-      padding: 2px 7px;
-      cursor: pointer;
-      font-size: 0.75rem;
-      flex-shrink: 0;
     }
-    .quest-node.done .toggle-btn {
+    .fnode.done .toggle-btn { border-color: #3a6a3a; color: var(--done-text); }
-      border-color: #3a6a3a;
+
-      color: var(--done-text);
+    /* ── LIST VIEW ──
+       Classic file-manager tree: ├── and └── connectors. */
+    .list-view .trader-body { padding: 4px 0; }
+    .list-tree { padding: 0; margin: 0; }
+    .list-item { display: flex; align-items: flex-start; }
+    .list-indent { display: flex; flex-shrink: 0; }
+    .list-indent-seg { width: 20px; flex-shrink: 0; position: relative; min-height: 30px; }
+    .list-indent-seg.vert::before {
+      content: ""; position: absolute; top: 0; bottom: 0; left: 9px; width: 1px; background: var(--line);
     }
+    .list-indent-seg.tee::before {
+      content: ""; position: absolute; top: 0; bottom: 0; left: 9px; width: 1px; background: var(--line);
+    }
+    .list-indent-seg.tee::after {
+      content: ""; position: absolute; top: 50%; left: 9px; width: 11px; height: 1px; background: var(--line);
+    }
+    .list-indent-seg.elbow::before {
+      content: ""; position: absolute; top: 0; bottom: 50%; left: 9px; width: 1px; background: var(--line);
+    }
+    .list-indent-seg.elbow::after {
+      content: ""; position: absolute; top: 50%; left: 9px; width: 11px; height: 1px; background: var(--line);
+    }
+    /* blank: spacer only, no line */
+    .list-indent-seg.blank {}
+
+    .list-row {
+      flex: 1; display: flex; align-items: center; gap: 6px;
+      padding: 4px 6px 4px 2px; border-radius: 4px; margin: 1px 0;
+      background: transparent; min-height: 30px;
+    }
+    .list-row:hover { background: #1a1a1a; }
+    .list-row.done .list-name { text-decoration: line-through; color: var(--done-text); }
+    .list-name { font-size: 0.85rem; flex: 1; }
+    .list-wiki { color: var(--accent); font-size: 0.72rem; text-decoration: none; flex-shrink: 0; }
+    .list-wiki:hover { text-decoration: underline; }
+    .list-row .kappa-star { font-size: 0.72rem; }
+    .list-row .cross-badge { font-size: 0.7rem; }
+    .list-row .toggle-btn { font-size: 0.72rem; }
+    .list-row.done .toggle-btn { border-color: #3a6a3a; color: var(--done-text); }
+
+    .flow-view.hidden, .list-view.hidden { display: none; }
   </style>
 </head>
 <body>
@@ -131,109 +230,135 @@
     <a href="/">← Keys</a>
     &nbsp;|&nbsp;
     <a href="/collector">Collector Checklist</a>
+    &nbsp;|&nbsp;
+    <a href="/loadout">Loadout Planner</a>
   </nav>
   <h1>Quest Trees</h1>
 
   <div class="toolbar">
-    <a class="filter-btn {% if not only_collector %}active{% endif %}" href="/quests">All quests</a>
+    <a class="filter-btn {% if not only_collector %}active{% endif %}"
-    <a class="filter-btn {% if only_collector %}active{% endif %}" href="/quests?collector=1">★ Collector only</a>
+       href="/quests?view={{ view }}">All quests</a>
+    <a class="filter-btn {% if only_collector %}active{% endif %}"
+       href="/quests?collector=1&view={{ view }}">★ Collector only</a>
+
+    <span class="sep">|</span>
+
+    <a class="filter-btn {% if view != 'list' %}active{% endif %}"
+       href="/quests?{% if only_collector %}collector=1&{% endif %}view=flow">Flow</a>
+    <a class="filter-btn {% if view == 'list' %}active{% endif %}"
+       href="/quests?{% if only_collector %}collector=1&{% endif %}view=list">List</a>
+
+    <span class="sep">|</span>
+
+    <button class="filter-btn" type="button" onclick="setAllTradersCollapsed(true)">Collapse all</button>
+    <button class="filter-btn" type="button" onclick="setAllTradersCollapsed(false)">Expand all</button>
+
     <div class="legend">
-      <span><span style="color:var(--kappa)">★</span> Required for Collector</span>
+      <span><span style="color:var(--kappa)">★</span> Collector req</span>
-      <span><span style="color:var(--done-text)">✓</span> Marked done</span>
+      <span><span style="color:var(--done-text)">✓</span> Done</span>
-      <span><span style="color:var(--muted);font-style:italic">← Trader</span> Cross-trader dependency</span>
+      <span><span style="color:var(--muted);font-style:italic">cross</span> Other trader</span>
     </div>
   </div>
 
-{% macro render_node(qid, quest_by_id, children, visible, collector_prereqs) %}
+  {# ── FLOW VIEW ── #}
-{% set q = quest_by_id[qid] %}
+  <div class="flow-view {% if view == 'list' %}hidden{% endif %}">
-{% set visible_kids = [] %}
-{% for cid in children.get(qid, []) %}
-  {% if cid in visible %}{% set _ = visible_kids.append(cid) %}{% endif %}
-{% endfor %}
-<div class="tree-root">
-  <div class="quest-node {% if q.done %}done{% endif %}"
-       id="qnode-{{ qid }}" data-id="{{ qid }}" data-done="{{ '1' if q.done else '0' }}">
-    {% if qid in collector_prereqs %}<span class="kappa-star" title="Required for Collector">★</span>{% endif %}
-    <span class="quest-label">
-      {{ q.name }}
-      {% if q.wiki_link %}<a href="{{ q.wiki_link }}" target="_blank">wiki</a>{% endif %}
-    </span>
-    <button class="toggle-btn" onclick="toggle(this)">
-      {{ '✓' if q.done else '○' }}
-    </button>
-  </div>
-  {% if visible_kids %}
-  <div class="tree-children">
-    {% for cid in visible_kids %}
-      {% set child = quest_by_id[cid] %}
-      {% if child.trader != q.trader %}
-        <div class="quest-node {% if child.done %}done{% endif %}"
-             data-id="{{ cid }}" data-done="{{ '1' if child.done else '0' }}">
-          {% if cid in collector_prereqs %}<span class="kappa-star">★</span>{% endif %}
-          <span class="quest-label">
-            {{ child.name }}
-            {% if child.wiki_link %}<a href="{{ child.wiki_link }}" target="_blank">wiki</a>{% endif %}
-          </span>
-          <span class="cross-trader">← {{ child.trader }}</span>
-          <button class="toggle-btn" onclick="toggle(this)">{{ '✓' if child.done else '○' }}</button>
-        </div>
-      {% else %}
-        {{ render_node(cid, quest_by_id, children, visible, collector_prereqs) }}
-      {% endif %}
-    {% endfor %}
-  </div>
-  {% endif %}
-</div>
-{% endmacro %}
-
   {% for trader in traders %}
   {% set roots = trader_roots[trader] %}
-  {% set total_trader = namespace(n=0) %}
+  {% set total_t = namespace(n=0) %}
-  {% set done_trader = namespace(n=0) %}
+  {% set done_t  = namespace(n=0) %}
-  {# count visible quests for this trader #}
   {% for qid in visible %}
     {% if quest_by_id[qid].trader == trader %}
-      {% set total_trader.n = total_trader.n + 1 %}
+      {% set total_t.n = total_t.n + 1 %}
-      {% if quest_by_id[qid].done %}{% set done_trader.n = done_trader.n + 1 %}{% endif %}
+      {% if quest_by_id[qid].done %}{% set done_t.n = done_t.n + 1 %}{% endif %}
     {% endif %}
   {% endfor %}
-
+  <div class="trader-section" id="flow-{{ trader | replace(' ', '-') }}">
-  <div class="trader-section" id="trader-{{ trader | replace(' ', '-') }}">
     <div class="trader-header" onclick="toggleTrader(this)">
       <span class="trader-name">{{ trader }}</span>
-      <span class="trader-counts">{{ done_trader.n }} / {{ total_trader.n }}</span>
+      <span class="trader-counts">{{ done_t.n }} / {{ total_t.n }}</span>
       <span class="chevron">▾</span>
     </div>
     <div class="trader-body">
       {% for root_id in roots %}
-        {{ render_node(root_id, quest_by_id, children, visible, collector_prereqs) }}
+        {{ render_chain(root_id, quest_by_id, children, visible, collector_prereqs, 0) }}
       {% endfor %}
     </div>
   </div>
   {% endfor %}
+  </div>
+
+  {# ── LIST VIEW ── #}
+  <div class="list-view {% if view != 'list' %}hidden{% endif %}">
+  {% for trader in traders %}
+  {% set roots = trader_roots[trader] %}
+  {% set total_t = namespace(n=0) %}
+  {% set done_t  = namespace(n=0) %}
+  {% for qid in visible %}
+    {% if quest_by_id[qid].trader == trader %}
+      {% set total_t.n = total_t.n + 1 %}
+      {% if quest_by_id[qid].done %}{% set done_t.n = done_t.n + 1 %}{% endif %}
+    {% endif %}
+  {% endfor %}
+  <div class="trader-section" id="list-{{ trader | replace(' ', '-') }}">
+    <div class="trader-header" onclick="toggleTrader(this)">
+      <span class="trader-name">{{ trader }}</span>
+      <span class="trader-counts">{{ done_t.n }} / {{ total_t.n }}</span>
+      <span class="chevron">▾</span>
+    </div>
+    <div class="trader-body">
+      <div class="list-tree">
+        {% for root_id in roots %}
+          {{ render_list_item(root_id, quest_by_id, children, visible, collector_prereqs, [], loop.last) }}
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+  {% endfor %}
+  </div>
 
 </div>
 
 <script>
   function toggleTrader(header) {
     header.closest('.trader-section').classList.toggle('collapsed');
+    persistCollapsed();
   }
 
+  function setAllTradersCollapsed(collapsed) {
+    document.querySelectorAll('.trader-section').forEach(s => s.classList.toggle('collapsed', collapsed));
+    persistCollapsed();
+  }
+
+  const COLLAPSE_KEY = 'quests.collapsedTraders2';
+
+  function persistCollapsed() {
+    const ids = Array.from(document.querySelectorAll('.trader-section.collapsed')).map(s => s.id);
+    localStorage.setItem(COLLAPSE_KEY, JSON.stringify(ids));
+  }
+
+  (function restoreCollapsed() {
+    try {
+      JSON.parse(localStorage.getItem(COLLAPSE_KEY) || '[]').forEach(id => {
+        const s = document.getElementById(id);
+        if (s) s.classList.add('collapsed');
+      });
+    } catch(e) {}
+  })();
+
   function toggle(btn) {
-    const node = btn.closest('.quest-node');
+    const node = btn.closest('[data-id]');
     const id = node.dataset.id;
     const nowDone = node.dataset.done === '1' ? 0 : 1;
-
     fetch('/collector/toggle', {
       method: 'POST',
       body: new URLSearchParams({ quest_id: id, done: nowDone })
     })
     .then(r => r.json())
     .then(() => {
-      // Update all nodes with this quest id (may appear as cross-trader duplicate)
+      document.querySelectorAll(`[data-id="${id}"]`).forEach(n => {
-      document.querySelectorAll(`.quest-node[data-id="${id}"]`).forEach(n => {
         n.dataset.done = nowDone;
         const b = n.querySelector('.toggle-btn');
+        if (!b) return;
         if (nowDone) { n.classList.add('done'); b.textContent = '✓'; }
         else          { n.classList.remove('done'); b.textContent = '○'; }
       });