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

fix: only required mods are applied to guns for weight management.

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"])
@@ -357,7 +460,7 @@ def loadout():
     tab  = request.args.get("tab", "guns")
     sort = request.args.get("sort", "weight_asc")
 
-    guns = armor = helmets = headwear = backpacks = rigs = []
+    guns = armor = helmets = headwear = backpacks = rigs = plates = []
     builder_guns = builder_armor = builder_helmets = builder_rigs = builder_backpacks = []
     requires = request.args.getlist("requires")  # list of slot_nameids that must exist
     min_class    = request.args.get("min_class",    0, type=int)
@@ -443,6 +546,14 @@ def loadout():
             ORDER BY {sort_frag}
         """, (min_capacity, min_capacity, min_class, min_class)).fetchall()
 
+    elif tab == "plates":
+        plates = conn.execute(f"""
+            SELECT * FROM gear_items
+            WHERE category = 'plate'
+              AND (? = 0 OR armor_class >= ?)
+            ORDER BY {sort_frag}
+        """, (min_class, min_class)).fetchall()
+
     elif tab == "builder":
         builder_guns      = conn.execute("SELECT id, name, weight_kg FROM gear_items WHERE category='gun'      ORDER BY name").fetchall()
         builder_armor     = conn.execute("SELECT id, name, weight_kg FROM gear_items WHERE category='armor'    ORDER BY name").fetchall()
@@ -450,12 +561,16 @@ def loadout():
         builder_rigs      = conn.execute("SELECT id, name, weight_kg FROM gear_items WHERE category='rig'      ORDER BY name").fetchall()
         builder_backpacks = conn.execute("SELECT id, name, weight_kg FROM gear_items WHERE category='backpack' ORDER BY name").fetchall()
 
+    # IDs of carriers that have at least one open plate slot (shell weight only)
+    open_slot_rows = conn.execute("SELECT DISTINCT carrier_id FROM armor_open_slots").fetchall()
+    carrier_ids_with_open_slots = {row["carrier_id"] for row in open_slot_rows}
+
     conn.close()
     return render_template(
         "loadout.html",
         tab=tab, sort=sort,
         guns=guns, armor=armor, helmets=helmets, headwear=headwear,
-        backpacks=backpacks, rigs=rigs,
+        backpacks=backpacks, rigs=rigs, plates=plates,
         slot_filters=LOADOUT_SLOT_FILTERS,
         requires=requires,
         min_class=min_class, min_capacity=min_capacity,
@@ -464,6 +579,7 @@ def loadout():
         builder_helmets=builder_helmets,
         builder_rigs=builder_rigs,
         builder_backpacks=builder_backpacks,
+        carrier_ids_with_open_slots=carrier_ids_with_open_slots,
     )
 
 
@@ -506,17 +622,19 @@ def gun_detail(gun_id):
         if row["mod_id"]:
             slots[sid]["mods"].append(dict(row))
 
-    # Key slots to show at top (highlighted)
+    # Split into required vs optional slots
     KEY_SLOTS = {"mod_muzzle", "mod_magazine"}
     ordered_slots = [slots[s] for s in slot_order]
-    key_slots   = [s for s in ordered_slots if s["slot_nameid"] in KEY_SLOTS]
+    # Required slots (always needed) shown at top — key slots (magazine/muzzle) highlighted
-    other_slots = [s for s in ordered_slots if s["slot_nameid"] not in KEY_SLOTS]
+    key_slots      = [s for s in ordered_slots if s["required"] and s["slot_nameid"] in KEY_SLOTS]
+    req_slots      = [s for s in ordered_slots if s["required"] and s["slot_nameid"] not in KEY_SLOTS]
+    optional_slots = [s for s in ordered_slots if not s["required"]]
 
-    # Lightest total (base + lightest per slot)
+    # Lightest total (base + lightest per REQUIRED slot only)
     lightest_total = (gun["weight_kg"] or 0) + sum(
         s["mods"][0]["weight_kg"]
         for s in ordered_slots
-        if s["mods"] and s["mods"][0]["weight_kg"] is not None
+        if s["required"] and s["mods"] and s["mods"][0]["weight_kg"] is not None
     )
 
     conn.close()
@@ -524,7 +642,8 @@ def gun_detail(gun_id):
         "gun_detail.html",
         gun=gun,
         key_slots=key_slots,
-        other_slots=other_slots,
+        req_slots=req_slots,
+        optional_slots=optional_slots,
         lightest_total=lightest_total,
     )
 
@@ -571,6 +690,45 @@ def gun_slots_json(gun_id):
     return jsonify(result)
 
 
+@app.route("/loadout/carrier/<carrier_id>/slots.json")
+def carrier_slots_json(carrier_id):
+    """Returns open plate slots and allowed plates for a carrier (armor or rig)."""
+    conn = get_db()
+    rows = conn.execute("""
+        SELECT aos.slot_nameid, aos.zones,
+               p.id AS plate_id, p.name AS plate_name, p.short_name AS plate_short,
+               p.weight_kg, p.armor_class, p.durability, p.material
+        FROM armor_open_slots aos
+        LEFT JOIN armor_slot_plates asp ON asp.carrier_id = aos.carrier_id
+            AND asp.slot_nameid = aos.slot_nameid
+        LEFT JOIN gear_items p ON p.id = asp.plate_id
+        WHERE aos.carrier_id = ?
+        ORDER BY aos.slot_nameid, p.armor_class DESC, p.weight_kg ASC
+    """, (carrier_id,)).fetchall()
+    conn.close()
+
+    # Group by slot
+    slots = {}
+    slot_order = []
+    for row in rows:
+        sn = row["slot_nameid"]
+        if sn not in slots:
+            slots[sn] = {"slot_nameid": sn, "zones": row["zones"], "plates": []}
+            slot_order.append(sn)
+        if row["plate_id"]:
+            slots[sn]["plates"].append({
+                "id":         row["plate_id"],
+                "name":       row["plate_name"],
+                "short_name": row["plate_short"],
+                "weight_kg":  row["weight_kg"],
+                "armor_class": row["armor_class"],
+                "durability": row["durability"],
+                "material":   row["material"],
+            })
+
+    return jsonify([slots[s] for s in slot_order])
+
+
 @app.route("/loadout/save-build", methods=["POST"])
 def save_build():
     data = request.get_json() or {}

import_gear.py

@@ -64,6 +64,14 @@ GRAPHQL_QUERY_GEAR = """
         durability
         material { name }
         zones
+        armorSlots {
+          __typename
+          ... on ItemArmorSlotOpen {
+            nameId
+            zones
+            allowedPlates { id }
+          }
+        }
       }
     }
   }
@@ -112,6 +120,26 @@ GRAPHQL_QUERY_GEAR = """
         class
         durability
         zones
+        armorSlots {
+          __typename
+          ... on ItemArmorSlotOpen {
+            nameId
+            zones
+            allowedPlates { id }
+          }
+        }
+      }
+    }
+  }
+
+  plates: items(types: [armorPlate]) {
+    id name shortName weight gridImageLink wikiLink
+    properties {
+      ... on ItemPropertiesArmorAttachment {
+        class
+        durability
+        material { name }
+        zones
       }
     }
   }
@@ -211,6 +239,7 @@ def import_weapons(conn, weapons):
 def import_armor(conn, items):
     cursor = conn.cursor()
     counts = {"inserted": 0, "updated": 0, "skipped": 0}
+    slot_data = {}  # carrier_id -> armorSlots list
     for item in items:
         item_id = item.get("id")
         name = item.get("name")
@@ -229,8 +258,11 @@ def import_armor(conn, items):
             zones=zones,
         )
         counts[result] += 1
+        armor_slots = props.get("armorSlots") or []
+        if armor_slots:
+            slot_data[item_id] = armor_slots
     conn.commit()
-    return counts
+    return counts, slot_data
 
 
 def import_helmets(conn, items):
@@ -291,6 +323,7 @@ def import_backpacks(conn, items):
 def import_rigs(conn, items):
     cursor = conn.cursor()
     counts = {"inserted": 0, "updated": 0, "skipped": 0}
+    slot_data = {}  # carrier_id -> armorSlots list
     for item in items:
         item_id = item.get("id")
         name = item.get("name")
@@ -308,10 +341,75 @@ def import_rigs(conn, items):
             zones=zones,
         )
         counts[result] += 1
+        armor_slots = props.get("armorSlots") or []
+        if armor_slots:
+            slot_data[item_id] = armor_slots
+    conn.commit()
+    return counts, slot_data
+
+
+def import_plates(conn, items):
+    cursor = conn.cursor()
+    counts = {"inserted": 0, "updated": 0, "skipped": 0}
+    for item in items:
+        item_id = item.get("id")
+        name = item.get("name")
+        if not item_id or not name:
+            counts["skipped"] += 1
+            continue
+        props = item.get("properties") or {}
+        material = (props.get("material") or {}).get("name")
+        zones = ",".join(props.get("zones") or []) or None
+        result = upsert_item(
+            cursor, item_id, name, item.get("shortName"), "plate", item.get("weight"),
+            item.get("gridImageLink"), item.get("wikiLink"),
+            armor_class=props.get("class"),
+            durability=props.get("durability"),
+            material=material,
+            zones=zones,
+        )
+        counts[result] += 1
     conn.commit()
     return counts
 
 
+def import_armor_open_slots(conn, carrier_id, armor_slots):
+    """
+    Insert open plate slots and their compatible plates for a carrier item.
+    armor_slots: list of armorSlots from the API (only ItemArmorSlotOpen are relevant).
+    """
+    cursor = conn.cursor()
+    slot_count = 0
+    plate_count = 0
+    # Build set of known item IDs for fast lookup
+    known_ids = {row[0] for row in cursor.execute("SELECT id FROM gear_items").fetchall()}
+
+    for slot in armor_slots:
+        if slot.get("__typename") != "ItemArmorSlotOpen":
+            continue
+        slot_nameid = slot.get("nameId")
+        if not slot_nameid:
+            continue
+        zones = ",".join(slot.get("zones") or []) or None
+        cursor.execute("""
+            INSERT OR REPLACE INTO armor_open_slots (carrier_id, slot_nameid, zones)
+            VALUES (?, ?, ?)
+        """, (carrier_id, slot_nameid, zones))
+        slot_count += 1
+
+        for plate in (slot.get("allowedPlates") or []):
+            plate_id = plate.get("id")
+            if not plate_id or plate_id not in known_ids:
+                continue
+            cursor.execute("""
+                INSERT OR IGNORE INTO armor_slot_plates (carrier_id, slot_nameid, plate_id)
+                VALUES (?, ?, ?)
+            """, (carrier_id, slot_nameid, plate_id))
+            plate_count += 1
+
+    return slot_count, plate_count
+
+
 def import_suppressors(conn, items):
     cursor = conn.cursor()
     counts = {"inserted": 0, "updated": 0, "skipped": 0}
@@ -438,6 +536,7 @@ def main():
     rigs        = gear_data.get("rigs", [])
     suppressors = gear_data.get("suppressors", [])
     mods        = gear_data.get("mods", [])
+    plates      = gear_data.get("plates", [])
 
     # Wearables: only keep those whose properties resolved to ItemPropertiesHelmet
     # (i.e. they have 'class' or 'headZones' set — not decorative items)
@@ -451,7 +550,8 @@ def main():
         and (w["properties"].get("class") or w["properties"].get("headZones"))
     ]
     print(f"  armor={len(armor)}, helmets={len(helmets)}, wearable_helmets={len(wearable_helmets)}, "
-          f"backpacks={len(backpacks)}, rigs={len(rigs)}, suppressors={len(suppressors)}, mods={len(mods)}")
+          f"backpacks={len(backpacks)}, rigs={len(rigs)}, suppressors={len(suppressors)}, "
+          f"mods={len(mods)}, plates={len(plates)})")
 
     # Phase 2: insert into DB
     conn = sqlite3.connect(DB_PATH)
@@ -462,8 +562,12 @@ def main():
         wcounts, slot_data = import_weapons(conn, weapons)
         print(f"  guns:        +{wcounts['inserted']} inserted, ~{wcounts['updated']} updated, -{wcounts['skipped']} skipped")
 
+        print("Importing plates (armorPlate items)...")
+        c = import_plates(conn, plates)
+        print(f"  plates:      +{c['inserted']} inserted, ~{c['updated']} updated, -{c['skipped']} skipped")
+
         print("Importing armor...")
-        c = import_armor(conn, armor)
+        c, armor_slot_data = import_armor(conn, armor)
         print(f"  armor:       +{c['inserted']} inserted, ~{c['updated']} updated, -{c['skipped']} skipped")
 
         print("Importing helmets...")
@@ -479,7 +583,7 @@ def main():
         print(f"  backpacks:   +{c['inserted']} inserted, ~{c['updated']} updated, -{c['skipped']} skipped")
 
         print("Importing rigs...")
-        c = import_rigs(conn, rigs)
+        c, rig_slot_data = import_rigs(conn, rigs)
         print(f"  rigs:        +{c['inserted']} inserted, ~{c['updated']} updated, -{c['skipped']} skipped")
 
         print("Importing suppressors...")
@@ -496,6 +600,19 @@ def main():
         print(f"  gun_slots:      {slots_ins} rows")
         print(f"  gun_slot_items: {slot_items_ins} rows inserted, {slot_items_skip} skipped (item not in DB)")
 
+        # Phase 3b: armor open slots (needs plates in DB first)
+        print("Importing armor open plate slots...")
+        total_open_slots = 0
+        total_plate_links = 0
+        all_carrier_slots = {**armor_slot_data, **rig_slot_data}
+        for carrier_id, armor_slots in all_carrier_slots.items():
+            sc, pc = import_armor_open_slots(conn, carrier_id, armor_slots)
+            total_open_slots += sc
+            total_plate_links += pc
+        conn.commit()
+        print(f"  armor_open_slots: {total_open_slots} rows")
+        print(f"  armor_slot_plates: {total_plate_links} rows")
+
         # Phase 4: classify mod_type for mods based on which slots they appear in
         print("Classifying mod types from slot data...")
         cursor = conn.cursor()

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
 

migration_add_plates.sql

@@ -0,0 +1,21 @@
+-- Migration: add armor plates support
+-- Run: sqlite3 tarkov.db < migration_add_plates.sql
+
+PRAGMA foreign_keys = ON;
+
+CREATE TABLE IF NOT EXISTS armor_open_slots (
+    carrier_id  TEXT NOT NULL REFERENCES gear_items(id) ON DELETE CASCADE,
+    slot_nameid TEXT NOT NULL,
+    zones       TEXT,
+    PRIMARY KEY (carrier_id, slot_nameid)
+);
+
+CREATE TABLE IF NOT EXISTS armor_slot_plates (
+    carrier_id  TEXT NOT NULL,
+    slot_nameid TEXT NOT NULL,
+    plate_id    TEXT NOT NULL REFERENCES gear_items(id) ON DELETE CASCADE,
+    PRIMARY KEY (carrier_id, slot_nameid, plate_id),
+    FOREIGN KEY (carrier_id, slot_nameid) REFERENCES armor_open_slots(carrier_id, slot_nameid) ON DELETE CASCADE
+);
+
+CREATE INDEX IF NOT EXISTS idx_armor_slot_plates_plate ON armor_slot_plates(plate_id);

migrations_v2.sql

@@ -60,6 +60,26 @@ CREATE TABLE IF NOT EXISTS gun_slot_items (
 
 CREATE INDEX IF NOT EXISTS idx_gun_slot_items_item ON gun_slot_items(item_id);
 
+-- Open plate slots on armor/rig carriers (ItemArmorSlotOpen from tarkov API)
+-- Weight of a carrier does NOT include plates in these slots
+CREATE TABLE IF NOT EXISTS armor_open_slots (
+    carrier_id  TEXT NOT NULL REFERENCES gear_items(id) ON DELETE CASCADE,
+    slot_nameid TEXT NOT NULL,  -- e.g. "front_plate", "back_plate", "left_side_plate"
+    zones       TEXT,           -- comma-separated zone names e.g. "FR. PLATE,BCK. PLATE"
+    PRIMARY KEY (carrier_id, slot_nameid)
+);
+
+-- Which plates are compatible with each open slot on a carrier
+CREATE TABLE IF NOT EXISTS armor_slot_plates (
+    carrier_id  TEXT NOT NULL,
+    slot_nameid TEXT NOT NULL,
+    plate_id    TEXT NOT NULL REFERENCES gear_items(id) ON DELETE CASCADE,
+    PRIMARY KEY (carrier_id, slot_nameid, plate_id),
+    FOREIGN KEY (carrier_id, slot_nameid) REFERENCES armor_open_slots(carrier_id, slot_nameid) ON DELETE CASCADE
+);
+
+CREATE INDEX IF NOT EXISTS idx_armor_slot_plates_plate ON armor_slot_plates(plate_id);
+
 -- Saved loadout builds
 CREATE TABLE IF NOT EXISTS saved_builds (
     id          INTEGER PRIMARY KEY AUTOINCREMENT,

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 %}
+
-      </span>
+{% 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,27 +440,70 @@
     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 => {
-      .then(r => r.json())
+      section.classList.toggle('collapsed', collapsed);
-      .then(() => {
+    });
-        row.dataset.done = nowDone;
+    persistCollapsed();
-        if (nowDone) {
+  }
-          row.classList.add('done');
+
-          btn.textContent = '✓ Done';
+  const COLLAPSE_KEY = 'collector.collapsedTraders2';
-          doneCount++;
+
-        } else {
+  function persistCollapsed() {
-          row.classList.remove('done');
+    const collapsed = Array.from(document.querySelectorAll('.trader-section.collapsed'))
-          btn.textContent = 'Mark done';
+      .map(s => s.id);
-          doneCount--;
+    localStorage.setItem(COLLAPSE_KEY, JSON.stringify(collapsed));
-        }
+  }
-        updateProgress();
+
+  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(() => {
+      document.querySelectorAll(`[data-id="${id}"]`).forEach(n => {
+        n.dataset.done = nowDone;
+        const b = n.querySelector('.toggle-btn');
+        if (b) {
+          if (nowDone) { n.classList.add('done'); b.textContent = '✓'; }
+          else          { n.classList.remove('done'); b.textContent = '○'; }
+        }
+      });
+
+      if (node.dataset.counted === '1') {
+        doneCount += nowDone ? 1 : -1;
+        updateProgress();
+      }
+    });
   }
 </script>
 </body>

templates/gun_detail.html

@@ -197,106 +197,75 @@
   <div class="total-bar">
     <span class="lbl">Lightest possible build:</span>
     <span class="big">{{ "%.3f"|format(lightest_total) }} kg</span>
-    <span class="breakdown">base {{ "%.3f"|format(gun.weight_kg or 0) }} kg + lightest mod per slot</span>
+    <span class="breakdown">base {{ "%.3f"|format(gun.weight_kg or 0) }} kg + lightest mod per required slot</span>
   </div>
 
-  {% if key_slots %}
+  {# ---- Macro to render a slot card ---- #}
-  <div class="slot-section">
+  {% macro slot_card(slot, extra_class='', open=False) %}
-    <div class="section-hdr">Key slots</div>
+    {% set lightest = slot.mods[0] if slot.mods else none %}
-    {% for slot in key_slots %}
+    <div class="slot-card {{ extra_class }} {% if open %}open{% endif %}" id="slot-{{ slot.slot_id }}">
-      {% set lightest = slot.mods[0] if slot.mods else none %}
+      <div class="slot-header" onclick="toggleSlot('slot-{{ slot.slot_id }}')">
-      <div class="slot-card key-slot {% if loop.first %}open{% endif %}" id="slot-{{ slot.slot_id }}">
+        <span class="slot-name">{{ slot.slot_name }}</span>
-        <div class="slot-header" onclick="toggleSlot('slot-{{ slot.slot_id }}')">
+        {% if extra_class == 'key-slot' %}<span class="key-badge">key slot</span>{% endif %}
-          <span class="slot-name">{{ slot.slot_name }}</span>
+        <span class="slot-count">{{ slot.mods | length }} mods</span>
-          <span class="key-badge">key slot</span>
+        <span class="slot-lightest">
-          {% if slot.required %}<span class="required-badge">required</span>{% endif %}
+          {% if lightest and lightest.weight_kg is not none %}
-          <span class="slot-count">{{ slot.mods | length }} mods</span>
+            lightest {{ "%.3f"|format(lightest.weight_kg) }} kg
-          <span class="slot-lightest">
+          {% else %}—{% endif %}
-            {% if lightest and lightest.weight_kg is not none %}
+        </span>
-              lightest {{ "%.3f"|format(lightest.weight_kg) }} kg
+        <span class="chevron">▶</span>
-            {% else %}—{% endif %}
-          </span>
-          <span class="chevron">▶</span>
-        </div>
-        <div class="mod-list">
-          {% if slot.mods %}
-            {% for mod in slot.mods %}
-            <div class="mod-row">
-              {% if mod.grid_image_url %}
-                <img src="{{ mod.grid_image_url }}" loading="lazy" alt="">
-              {% else %}
-                <div style="width:36px;height:36px;background:#222;border-radius:4px;flex-shrink:0"></div>
-              {% endif %}
-              <div class="mod-name">
-                {{ mod.mod_name }}
-                {% if mod.mod_short and mod.mod_short != mod.mod_name %}
-                  <small>{{ mod.mod_short }}</small>
-                {% endif %}
-              </div>
-              {% if mod.wiki_url %}
-                <a class="mod-wiki" href="{{ mod.wiki_url }}" target="_blank">wiki</a>
-              {% endif %}
-              <span class="mod-weight {% if loop.first %}lightest{% endif %}">
-                {% if mod.weight_kg is not none %}{{ "%.3f"|format(mod.weight_kg) }} kg{% else %}—{% endif %}
-              </span>
-            </div>
-            {% endfor %}
-          {% else %}
-            <div class="no-mods">No compatible mods found in database.</div>
-          {% endif %}
-        </div>
       </div>
+      <div class="mod-list">
+        {% if slot.mods %}
+          {% for mod in slot.mods %}
+          <div class="mod-row">
+            {% if mod.grid_image_url %}
+              <img src="{{ mod.grid_image_url }}" loading="lazy" alt="">
+            {% else %}
+              <div style="width:36px;height:36px;background:#222;border-radius:4px;flex-shrink:0"></div>
+            {% endif %}
+            <div class="mod-name">
+              {{ mod.mod_name }}
+              {% if mod.mod_short and mod.mod_short != mod.mod_name %}
+                <small>{{ mod.mod_short }}</small>
+              {% endif %}
+            </div>
+            {% if mod.wiki_url %}
+              <a class="mod-wiki" href="{{ mod.wiki_url }}" target="_blank">wiki</a>
+            {% endif %}
+            <span class="mod-weight {% if loop.first %}lightest{% endif %}">
+              {% if mod.weight_kg is not none %}{{ "%.3f"|format(mod.weight_kg) }} kg{% else %}—{% endif %}
+            </span>
+          </div>
+          {% endfor %}
+        {% else %}
+          <div class="no-mods">No compatible mods found in database.</div>
+        {% endif %}
+      </div>
+    </div>
+  {% endmacro %}
+
+  {# ---- Required slots (key slots highlighted, open by default) ---- #}
+  {% if key_slots or req_slots %}
+  <div class="slot-section">
+    <div class="section-hdr">Required slots <span style="font-weight:normal;color:#666">(counted in lightest build weight)</span></div>
+    {% for slot in key_slots %}
+      {{ slot_card(slot, 'key-slot', open=True) }}
+    {% endfor %}
+    {% for slot in req_slots %}
+      {{ slot_card(slot, '', open=False) }}
     {% endfor %}
   </div>
   {% endif %}
 
-  {% if other_slots %}
+  {# ---- Optional slots (collapsed behind toggle) ---- #}
-  <button class="toggle-other" onclick="toggleOther(this)">Show {{ other_slots | length }} other slots ▼</button>
+  {% if optional_slots %}
+  <button class="toggle-other" onclick="toggleOther(this)">Show {{ optional_slots | length }} optional slots ▼</button>
   <div id="other-slots">
     <div class="slot-section">
-      <div class="section-hdr">All other slots</div>
+      <div class="section-hdr">Optional slots <span style="font-weight:normal;color:#666">(not counted in lightest build weight)</span></div>
-      {% for slot in other_slots %}
+      {% for slot in optional_slots %}
-        {% set lightest = slot.mods[0] if slot.mods else none %}
+        {{ slot_card(slot) }}
-        <div class="slot-card" id="slot-{{ slot.slot_id }}">
-          <div class="slot-header" onclick="toggleSlot('slot-{{ slot.slot_id }}')">
-            <span class="slot-name">{{ slot.slot_name }}</span>
-            {% if slot.required %}<span class="required-badge">required</span>{% endif %}
-            <span class="slot-count">{{ slot.mods | length }} mods</span>
-            <span class="slot-lightest">
-              {% if lightest and lightest.weight_kg is not none %}
-                lightest {{ "%.3f"|format(lightest.weight_kg) }} kg
-              {% else %}—{% endif %}
-            </span>
-            <span class="chevron">▶</span>
-          </div>
-          <div class="mod-list">
-            {% if slot.mods %}
-              {% for mod in slot.mods %}
-              <div class="mod-row">
-                {% if mod.grid_image_url %}
-                  <img src="{{ mod.grid_image_url }}" loading="lazy" alt="">
-                {% else %}
-                  <div style="width:36px;height:36px;background:#222;border-radius:4px;flex-shrink:0"></div>
-                {% endif %}
-                <div class="mod-name">
-                  {{ mod.mod_name }}
-                  {% if mod.mod_short and mod.mod_short != mod.mod_name %}
-                    <small>{{ mod.mod_short }}</small>
-                  {% endif %}
-                </div>
-                {% if mod.wiki_url %}
-                  <a class="mod-wiki" href="{{ mod.wiki_url }}" target="_blank">wiki</a>
-                {% endif %}
-                <span class="mod-weight {% if loop.first %}lightest{% endif %}">
-                  {% if mod.weight_kg is not none %}{{ "%.3f"|format(mod.weight_kg) }} kg{% else %}—{% endif %}
-                </span>
-              </div>
-              {% endfor %}
-            {% else %}
-              <div class="no-mods">No compatible mods found in database.</div>
-            {% endif %}
-          </div>
-        </div>
       {% endfor %}
     </div>
   </div>
@@ -311,8 +280,8 @@
     const div = document.getElementById('other-slots');
     div.classList.toggle('visible');
     btn.textContent = div.classList.contains('visible')
-      ? 'Hide other slots ▲'
+      ? 'Hide optional slots ▲'
-      : 'Show {{ other_slots | length }} other slots ▼';
+      : 'Show {{ optional_slots | length }} optional slots ▼';
   }
 </script>
 </body>

templates/loadout.html

@@ -231,7 +231,7 @@
   </p>
 
   <div class="tab-bar">
-    {% for t_id, t_label in [('guns','Guns'),('armor','Armor'),('helmets','Helmets'),('headwear','Headwear'),('backpacks','Backpacks'),('rigs','Rigs'),('builder','Build Builder')] %}
+    {% for t_id, t_label in [('guns','Guns'),('armor','Armor'),('helmets','Helmets'),('headwear','Headwear'),('backpacks','Backpacks'),('rigs','Rigs'),('plates','Plates'),('builder','Build Builder')] %}
       <a href="/loadout?tab={{ t_id }}" class="{% if tab == t_id %}active{% endif %}">{{ t_label }}</a>
     {% endfor %}
   </div>
@@ -328,6 +328,7 @@
       border-radius: 6px; padding: 5px 10px; font-size: 0.8rem; min-width: 110px;
     }
     .slot-pill.key { border-color: #5a7a3a; background: #141e10; }
+    .slot-pill.optional { opacity: 0.55; }
     .slot-pill .sp-name { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
     .slot-pill .sp-mod { font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
     .slot-pill .sp-w { color: var(--amber); font-size: 0.82rem; font-weight: bold; margin-top: 2px; }
@@ -382,23 +383,39 @@
       const baseCell = document.querySelector('[data-gun-id="' + gunId + '"] td:nth-child(6)');
       if (baseCell) baseWeight = parseFloat(baseCell.textContent) || 0;
 
+      // Only sum required slots for the lightest build weight
       let total = baseWeight;
-      let pills = '';
+      let reqPills = '';
+      let optPills = '';
       for (const s of slots) {
         const isKey = KEY.has(s.slot_nameid);
         const w = s.weight_kg != null ? s.weight_kg.toFixed(3) + ' kg' : '—';
-        if (s.weight_kg != null) total += s.weight_kg;
+        if (s.required) {
-        pills += `<div class="slot-pill${isKey ? ' key' : ''}">
+          if (s.weight_kg != null) total += s.weight_kg;
-          <span class="sp-name">${s.slot_name}</span>
+          reqPills += `<div class="slot-pill${isKey ? ' key' : ''}">
-          <span class="sp-mod">${s.mod_name || '—'}</span>
+            <span class="sp-name">${s.slot_name}</span>
-          <span class="sp-w">${w}</span>
+            <span class="sp-mod">${s.mod_name || '—'}</span>
-        </div>`;
+            <span class="sp-w">${w}</span>
+          </div>`;
+        } else {
+          optPills += `<div class="slot-pill optional">
+            <span class="sp-name">${s.slot_name}</span>
+            <span class="sp-mod">${s.mod_name || '—'}</span>
+            <span class="sp-w">${w}</span>
+          </div>`;
+        }
       }
 
+      const optSection = optPills
+        ? `<div style="font-size:0.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin:8px 0 4px">Optional slots (not included in weight)</div>
+           <div class="slot-summary">${optPills}</div>`
+        : '';
+
       inner.innerHTML = `
-        <div class="slot-summary">${pills}</div>
+        <div class="slot-summary">${reqPills || '<span style="color:var(--muted);font-size:0.82rem">No required slots</span>'}</div>
+        ${optSection}
         <div class="expand-footer">
-          <span class="expand-total">Lightest build: ${total.toFixed(3)} kg</span>
+          <span class="expand-total">Lightest build (required slots): ${total.toFixed(3)} kg</span>
           <a class="expand-link" href="/loadout/gun/${gunId}">Full breakdown →</a>
         </div>`;
     }
@@ -450,7 +467,10 @@
         <td class="muted">{{ item.durability | int if item.durability else '—' }}</td>
         <td class="muted">{{ item.material or '—' }}</td>
         <td class="muted" style="font-size:0.8rem">{{ item.zones or '—' }}</td>
-        <td class="w">{% if item.weight_kg is not none %}{{ "%.3f"|format(item.weight_kg) }} kg{% else %}—{% endif %}</td>
+        <td class="w">
+          {% if item.weight_kg is not none %}{{ "%.3f"|format(item.weight_kg) }} kg{% else %}—{% endif %}
+          {% if item.id in carrier_ids_with_open_slots %}<br><small class="muted">no plates</small>{% endif %}
+        </td>
       </tr>
     {% else %}
       <tr><td colspan="7" class="empty">No armor found.</td></tr>
@@ -653,7 +673,10 @@
         </td>
         <td class="muted">{{ item.capacity or '—' }}</td>
         <td class="muted" style="font-size:0.8rem">{{ item.zones or '—' }}</td>
-        <td class="w">{% if item.weight_kg is not none %}{{ "%.3f"|format(item.weight_kg) }} kg{% else %}—{% endif %}</td>
+        <td class="w">
+          {% if item.weight_kg is not none %}{{ "%.3f"|format(item.weight_kg) }} kg{% else %}—{% endif %}
+          {% if item.id in carrier_ids_with_open_slots %}<br><small class="muted">no plates</small>{% endif %}
+        </td>
       </tr>
     {% else %}
       <tr><td colspan="6" class="empty">No rigs found.</td></tr>
@@ -662,6 +685,63 @@
   </table>
   {% endif %}
 
+  {# =============================== PLATES TAB =============================== #}
+  {% if tab == "plates" %}
+  <p style="color:var(--muted);font-size:0.85rem;margin-bottom:12px;">
+    Armor plates that slot into plate carriers. Carrier shell weight does <em>not</em> include plates — add them separately when building your loadout.
+  </p>
+  <form method="get" class="filter-bar">
+    <input type="hidden" name="tab" value="plates">
+    <label>Min class</label>
+    <select name="min_class">
+      <option value="0" {% if min_class==0 %}selected{% endif %}>Any</option>
+      {% for c in range(1,7) %}
+        <option value="{{ c }}" {% if min_class==c %}selected{% endif %}>Class {{ c }}+</option>
+      {% endfor %}
+    </select>
+    <label>Sort</label>
+    <select name="sort">
+      <option value="weight_asc"  {% if sort=='weight_asc'  %}selected{% endif %}>Weight ↑</option>
+      <option value="weight_desc" {% if sort=='weight_desc' %}selected{% endif %}>Weight ↓</option>
+      <option value="class_desc"  {% if sort=='class_desc'  %}selected{% endif %}>Class ↓</option>
+      <option value="class_asc"   {% if sort=='class_asc'   %}selected{% endif %}>Class ↑</option>
+      <option value="name_asc"    {% if sort=='name_asc'    %}selected{% endif %}>Name A→Z</option>
+    </select>
+    <button type="submit">Filter</button>
+  </form>
+  <table class="gear-table">
+    <thead>
+      <tr>
+        <th></th><th>Name</th><th>Class</th>
+        <th>Durability</th><th>Material</th><th>Zones</th><th>Weight</th>
+      </tr>
+    </thead>
+    <tbody>
+    {% for item in plates %}
+      <tr>
+        <td>{% if item.grid_image_url %}<img src="{{ item.grid_image_url }}" loading="lazy" alt="">{% endif %}</td>
+        <td class="name-cell">
+          <strong>{{ item.short_name or item.name }}</strong>
+          {% if item.short_name and item.short_name != item.name %}<small>{{ item.name }}</small>{% endif %}
+          {% if item.wiki_url %}<a href="{{ item.wiki_url }}" target="_blank" style="font-size:0.78rem;margin-left:4px">wiki</a>{% endif %}
+        </td>
+        <td>
+          {% if item.armor_class %}
+            <span class="cls cls-{{ item.armor_class }}">{{ item.armor_class }}</span>
+          {% else %}—{% endif %}
+        </td>
+        <td class="muted">{{ item.durability | int if item.durability else '—' }}</td>
+        <td class="muted">{{ item.material or '—' }}</td>
+        <td class="muted" style="font-size:0.8rem">{{ item.zones or '—' }}</td>
+        <td class="w">{% if item.weight_kg is not none %}{{ "%.3f"|format(item.weight_kg) }} kg{% else %}—{% endif %}</td>
+      </tr>
+    {% else %}
+      <tr><td colspan="7" class="empty">No plates found.</td></tr>
+    {% endfor %}
+    </tbody>
+  </table>
+  {% endif %}
+
   {# =============================== BUILD BUILDER TAB =============================== #}
   {% if tab == "builder" %}
   <script>
@@ -671,6 +751,15 @@
       {% endfor %}
     };
 
+    // carriers that have open plate slots (shell weight only)
+    const CARRIERS_WITH_OPEN_SLOTS = new Set({{ carrier_ids_with_open_slots | list | tojson }});
+
+    // plate weight cache: id -> weight_kg
+    const PLATE_WEIGHTS = {};
+
+    // currently selected plate weights per open slot, keyed by "carrierSlot|slotNameId"
+    const _plateSlotWeights = {};
+
     function recalcWeight() {
       const slots = ['gun', 'armor', 'helmet', 'rig', 'backpack'];
       let total = 0;
@@ -679,12 +768,85 @@
         const id = sel ? sel.value : '';
         const w = id ? (WEIGHTS[id] || 0) : 0;
         const disp = document.getElementById('sw_' + slot);
-        if (disp) disp.textContent = id ? w.toFixed(3) + ' kg' : '';
+        if (disp) {
+          if (id) {
+            const isCarrier = CARRIERS_WITH_OPEN_SLOTS.has(id);
+            disp.textContent = w.toFixed(3) + ' kg' + (isCarrier ? ' (shell only)' : '');
+          } else {
+            disp.textContent = '';
+          }
+        }
         total += w;
       }
+      // Add plate weights
+      for (const pw of Object.values(_plateSlotWeights)) {
+        total += pw;
+      }
       document.getElementById('total-weight').textContent = total.toFixed(3);
     }
 
+    const _carrierSlotCache = {};
+
+    function onCarrierChange(slot) {
+      const sel = document.getElementById('slot_' + slot);
+      const carrierId = sel ? sel.value : '';
+      const container = document.getElementById('plates_' + slot);
+      container.innerHTML = '';
+      // Clear plate slot weights for this carrier slot
+      for (const key of Object.keys(_plateSlotWeights)) {
+        if (key.startsWith(slot + '|')) delete _plateSlotWeights[key];
+      }
+      if (!carrierId || !CARRIERS_WITH_OPEN_SLOTS.has(carrierId)) {
+        recalcWeight();
+        return;
+      }
+      if (_carrierSlotCache[carrierId]) {
+        renderPlateSlots(slot, carrierId, _carrierSlotCache[carrierId]);
+        return;
+      }
+      fetch('/loadout/carrier/' + carrierId + '/slots.json')
+        .then(r => r.json())
+        .then(data => {
+          _carrierSlotCache[carrierId] = data;
+          renderPlateSlots(slot, carrierId, data);
+        });
+    }
+
+    function renderPlateSlots(carrierSlot, carrierId, slots) {
+      const container = document.getElementById('plates_' + carrierSlot);
+      container.innerHTML = '';
+      for (const slot of slots) {
+        const key = carrierSlot + '|' + slot.slot_nameid;
+        const label = document.createElement('label');
+        label.style.cssText = 'display:block;margin-top:8px;font-size:0.82rem;color:var(--muted)';
+        label.textContent = slot.slot_nameid.replace(/_/g, ' ') + (slot.zones ? ' (' + slot.zones + ')' : '');
+        const sel = document.createElement('select');
+        sel.style.cssText = 'width:100%;margin-top:2px';
+        const none = document.createElement('option');
+        none.value = '';
+        none.textContent = '— No plate —';
+        sel.appendChild(none);
+        for (const p of slot.plates) {
+          PLATE_WEIGHTS[p.id] = p.weight_kg || 0;
+          const opt = document.createElement('option');
+          opt.value = p.id;
+          opt.textContent = (p.short_name || p.name) +
+            ' (Cls ' + (p.armor_class || '?') + ', ' +
+            (p.weight_kg != null ? p.weight_kg.toFixed(3) : '?') + ' kg)';
+          sel.appendChild(opt);
+        }
+        sel.addEventListener('change', () => {
+          const pid = sel.value;
+          _plateSlotWeights[key] = pid ? (PLATE_WEIGHTS[pid] || 0) : 0;
+          recalcWeight();
+        });
+        container.appendChild(label);
+        container.appendChild(sel);
+        _plateSlotWeights[key] = 0;
+      }
+      recalcWeight();
+    }
+
     function saveBuild() {
       const slots = ['gun', 'armor', 'helmet', 'rig', 'backpack'];
       const payload = { name: document.getElementById('build-name').value.trim() || 'My Build' };
@@ -714,24 +876,25 @@
 
   <div class="builder-grid">
     {% set slot_defs = [
-      ('gun',      'Primary Weapon', builder_guns),
+      ('gun',      'Primary Weapon', builder_guns,      false),
-      ('armor',    'Body Armor',     builder_armor),
+      ('armor',    'Body Armor',     builder_armor,     true),
-      ('helmet',   'Helmet',         builder_helmets),
+      ('helmet',   'Helmet',         builder_helmets,   false),
-      ('rig',      'Chest Rig',      builder_rigs),
+      ('rig',      'Chest Rig',      builder_rigs,      true),
-      ('backpack', 'Backpack',       builder_backpacks),
+      ('backpack', 'Backpack',       builder_backpacks, false),
     ] %}
-    {% for slot_id, slot_label, items in slot_defs %}
+    {% for slot_id, slot_label, items, has_plates in slot_defs %}
     <div class="slot-card">
       <h3>{{ slot_label }}</h3>
-      <select id="slot_{{ slot_id }}" onchange="recalcWeight()">
+      <select id="slot_{{ slot_id }}" onchange="{% if has_plates %}onCarrierChange('{{ slot_id }}'){% else %}recalcWeight(){% endif %}">
         <option value="">— None —</option>
         {% for item in items %}
           <option value="{{ item.id }}">
-            {{ item.name }}{% if item.weight_kg is not none %} ({{ "%.3f"|format(item.weight_kg) }} kg){% endif %}
+            {{ item.name }}{% if item.weight_kg is not none %} ({{ "%.3f"|format(item.weight_kg) }} kg{% if item.id in carrier_ids_with_open_slots %} shell{% endif %}){% endif %}
           </option>
         {% endfor %}
       </select>
       <div class="slot-weight" id="sw_{{ slot_id }}"></div>
+      {% if has_plates %}<div id="plates_{{ slot_id }}"></div>{% endif %}
     </div>
     {% endfor %}
   </div>

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 = '○'; }
       });