From 508c85b5ed01702b136dde69e75675e3a2b47eb5 Mon Sep 17 00:00:00 2001
From: caoimhinr <kevin@welvaert.org>
Date: Mon, 25 May 2026 20:24:05 +0200
Subject: [PATCH] refactor: split tickets.html into tickets_base.html + thin
 wrapper

tickets_base.html is the canonical implementation; tickets.html just
extends it with no overrides, used by the standalone app.
The dashboard can now extend tickets_base.html directly.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 corvid/templates/tickets.html      | 1171 +---------------------------
 corvid/templates/tickets_base.html | 1170 +++++++++++++++++++++++++++
 2 files changed, 1171 insertions(+), 1170 deletions(-)
 create mode 100644 corvid/templates/tickets_base.html

diff --git a/corvid/templates/tickets.html b/corvid/templates/tickets.html
index c86d6f1..93f112f 100644
--- a/corvid/templates/tickets.html
+++ b/corvid/templates/tickets.html
@@ -1,1170 +1 @@
-{% extends "base.html" %}
-{% block title %}Tickets{% endblock %}
-{% block page_title %}Tickets{% endblock %}
-{% block topbar_meta %}<span id="ticket-count" class="muted"></span>{% endblock %}
-
-{% block head %}
-<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
-<style>
-.ticket-filters {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  flex-shrink: 1;
-  min-width: 0;
-}
-.filter-btn {
-  padding: 4px 12px;
-  border-radius: 20px;
-  border: 1px solid var(--border);
-  background: transparent;
-  color: var(--fg-sec);
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all .15s;
-}
-.filter-btn:hover { background: var(--raised); color: var(--fg); opacity: 1; }
-.filter-btn.active { background: var(--primary); color: #000; border-color: var(--primary); opacity: 1; }
-
-/* ── Ticket list rows ── */
-.ticket-list { display: flex; flex-direction: column; }
-.ticket-row {
-  padding: 10px 20px;
-  border-bottom: 1px solid var(--divider);
-  cursor: pointer;
-  transition: background .1s;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.ticket-row:last-child { border-bottom: none; }
-.ticket-row:hover { background: var(--raised); }
-.tr-top { display: flex; align-items: baseline; gap: 10px; }
-.tr-id { font-family: monospace; font-size: 11px; color: var(--fg-sec); flex-shrink: 0; width: 72px; }
-.tr-title { flex: 1; font-size: 13px; font-weight: 500; color: var(--fg); }
-.tr-bottom { display: flex; align-items: center; gap: 8px; padding-left: 82px; font-size: 12px; color: var(--fg-sec); }
-.tr-sep { color: var(--border); }
-.att-chip { font-size: 11px; color: var(--fg-sec); font-family: monospace; }
-.child-toggle {
-  font-size: 11px; color: var(--fg-sec); background: none; border: none;
-  cursor: pointer; padding: 0 4px; line-height: 1; opacity: .7;
-}
-.child-toggle:hover { opacity: 1; color: var(--fg); }
-.child-count { font-size: 11px; color: var(--fg-sec); font-family: monospace; }
-.child-rows { border-left: 2px solid var(--divider); margin-left: 20px; }
-.child-rows .ticket-row { padding-left: 14px; }
-.child-rows .ticket-row:last-child { border-bottom: none; }
-.child-rows .tr-bottom { padding-left: 82px; }
-
-.badge-open      { background: #4f8ef718; color: var(--primary); }
-.badge-ongoing   { background: #f59e0b18; color: var(--yellow); }
-.badge-completed { background: #22c55e18; color: var(--green); }
-.badge-abandoned { background: #ffffff0f; color: var(--fg-sec); }
-.badge-feature   { background: #4f8ef718; color: var(--primary); }
-.badge-bug       { background: #ef444418; color: var(--red); }
-.badge-chore     { background: #a78bfa18; color: var(--purple); }
-.badge-project   { background: #10b98118; color: var(--green); }
-
-.effort-pip {
-  display: inline-flex; align-items: center; justify-content: center;
-  width: 18px; height: 18px; border-radius: 4px;
-  font-size: 10px; font-weight: 700; font-family: monospace; flex-shrink: 0;
-}
-.effort-lo { background: #22c55e22; color: var(--green); }
-.effort-md { background: #f59e0b22; color: var(--yellow); }
-.effort-hi { background: #ef444422; color: var(--red); }
-
-.sort-bar {
-  display: flex; gap: 6px; align-items: center; margin-top: 6px;
-  font-size: 11px; color: var(--fg-sec);
-}
-.sort-btn {
-  padding: 2px 8px; border-radius: 20px; border: 1px solid var(--border);
-  background: transparent; color: var(--fg-sec); font-size: 11px;
-  font-weight: 600; cursor: pointer; transition: all .15s;
-}
-.sort-btn:hover { background: var(--raised); color: var(--fg); }
-.sort-btn.active { background: var(--raised); color: var(--fg); border-color: var(--fg-sec); }
-
-.parent-link { font-size: 12px; color: var(--fg-sec); }
-.parent-link a { color: var(--primary); text-decoration: none; cursor: pointer; }
-.parent-link a:hover { text-decoration: underline; }
-.children-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
-.child-link { font-size: 12px; color: var(--primary); cursor: pointer; text-decoration: none; }
-.child-link:hover { text-decoration: underline; }
-
-.md-body { font-size: 13px; line-height: 1.6; color: var(--fg); }
-.md-body h1,.md-body h2,.md-body h3 { margin: 12px 0 6px; font-size: 14px; }
-.md-body p { margin: 6px 0; }
-.md-body code { background: var(--raised); padding: 1px 5px; border-radius: 3px; font-family: monospace; font-size: 12px; }
-.md-body pre { background: var(--raised); padding: 10px; border-radius: 4px; overflow-x: auto; }
-.md-body pre code { background: none; padding: 0; }
-.md-body ul, .md-body ol { padding-left: 18px; margin: 4px 0; }
-.md-body a { color: var(--primary); }
-
-/* ── Detail panel (fixed right drawer) ── */
-.detail-panel {
-  position: fixed;
-  top: 48px;
-  right: 0;
-  bottom: 0;
-  width: 440px;
-  max-width: 100vw;
-  background: var(--surface);
-  border-left: 1px solid var(--border);
-  overflow-y: auto;
-  transform: translateX(100%);
-  transition: transform .25s ease;
-  z-index: 50;
-  padding: 24px;
-}
-.detail-panel.open { transform: translateX(0); }
-.detail-header {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-.detail-header h2 { font-size: 16px; font-weight: 700; flex: 1; }
-.detail-meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; font-size: 12px; color: var(--fg-sec); }
-.detail-meta span b { color: var(--fg); }
-.detail-description { border-top: 1px solid var(--divider); padding-top: 16px; margin-top: 4px; }
-.detail-actions { display: flex; gap: 8px; align-items: center; }
-
-.modal-fields { display: flex; flex-direction: column; gap: 14px; }
-textarea.desc-input {
-  min-height: 140px;
-  resize: vertical;
-  font-family: monospace;
-  font-size: 12px;
-}
-
-/* ── Attachments in detail pane ── */
-.att-section-hdr {
-  display: flex; align-items: center; justify-content: space-between;
-  border-top: 1px solid var(--divider); padding-top: 16px; margin-top: 16px; margin-bottom: 8px;
-  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-sec);
-}
-.att-item {
-  display: flex; align-items: center; gap: 8px;
-  padding: 8px 0; border-bottom: 1px solid var(--divider);
-}
-.att-item:last-child { border-bottom: none; }
-.att-item-info { flex: 1; min-width: 0; }
-.att-item-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.att-item-meta { font-size: 11px; color: var(--fg-sec); margin-top: 1px; }
-.att-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
-
-/* ── Attachment view modal ── */
-.att-view-modal {
-  width: min(760px, calc(100vw - 32px));
-  max-height: calc(100vh - 80px);
-  overflow-y: auto;
-  display: flex; flex-direction: column;
-}
-.att-view-header {
-  display: flex; align-items: baseline; gap: 12px;
-  margin-bottom: 12px; padding-bottom: 12px;
-  border-bottom: 1px solid var(--border); flex-shrink: 0;
-}
-.att-view-header h3 { flex: 1; font-size: 15px; font-weight: 700; }
-.att-view-meta { font-size: 11px; color: var(--fg-sec); white-space: nowrap; }
-
-@media (max-width: 600px) {
-  .tr-bottom { padding-left: 0; }
-  .d-guid-wrap { display: none; }
-  .detail-panel { width: 100vw; top: 48px; }
-}
-
-.search-wrap {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-.search-wrap input[type="search"] {
-  width: 200px;
-  padding: 5px 10px 5px 30px;
-  border-radius: 20px;
-  border: 1px solid var(--border);
-  background: var(--surface);
-  color: var(--fg);
-  font-size: 12px;
-  transition: width .2s, border-color .15s;
-}
-.search-wrap input[type="search"]:focus {
-  outline: none;
-  border-color: var(--primary);
-  width: 260px;
-}
-.search-wrap::before {
-  content: '⌕';
-  position: absolute;
-  left: 9px;
-  font-size: 14px;
-  color: var(--fg-sec);
-  pointer-events: none;
-}
-.search-match { background: #4f8ef733; border-radius: 2px; }
-
-/* ── Environment selector ── */
-.env-selector { position: relative; display: inline-block; }
-.env-pill {
-  display: flex; align-items: center; gap: 6px;
-  padding: 5px 12px; border-radius: 20px;
-  border: 1px solid var(--primary); background: #4f8ef710;
-  color: var(--primary); font-size: 12px; font-weight: 600;
-  cursor: pointer; transition: background .15s;
-}
-.env-pill:hover { background: #4f8ef720; opacity: 1; }
-.env-dropdown {
-  display: none; position: absolute; top: calc(100% + 4px); left: 0;
-  background: var(--surface); border: 1px solid var(--border);
-  border-radius: 6px; box-shadow: 0 4px 16px #0006;
-  min-width: 210px; z-index: 200; overflow: hidden;
-}
-.env-dropdown.open { display: block; }
-.env-dd-item {
-  padding: 8px 14px; font-size: 12px; cursor: pointer;
-  display: flex; align-items: center; gap: 8px; transition: background .1s;
-}
-.env-dd-item:hover { background: var(--raised); }
-.env-dd-item.active { color: var(--primary); font-weight: 600; }
-.env-dd-divider { border-top: 1px solid var(--divider); margin: 2px 0; }
-.env-prefix-badge {
-  font-family: monospace; font-size: 10px; background: var(--raised);
-  padding: 1px 5px; border-radius: 3px; color: var(--fg-sec); flex-shrink: 0;
-}
-</style>
-{% endblock %}
-
-{% block content %}
-
-<!-- Environment selector -->
-<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
-  <div class="env-selector" id="env-selector">
-    <button class="env-pill" id="env-pill" onclick="toggleEnvDropdown(); event.stopPropagation()">
-      <span id="env-pill-name">…</span>
-      <span style="font-size:9px;opacity:.7">▾</span>
-    </button>
-    <div class="env-dropdown" id="env-dropdown"></div>
-  </div>
-  <button class="btn btn-subtle btn-sm" onclick="openEnvCreate(); event.stopPropagation()">+ Env</button>
-</div>
-
-<!-- Toolbar -->
-<div style="display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap;">
-  <div style="display:flex; flex-direction:column; gap:6px;">
-    <div class="ticket-filters">
-      <button class="filter-btn active" data-filter="status" data-value="open">Open</button>
-      <button class="filter-btn active" data-filter="status" data-value="ongoing">Ongoing</button>
-      <button class="filter-btn" data-filter="status" data-value="completed">Completed</button>
-      <button class="filter-btn" data-filter="status" data-value="abandoned">Abandoned</button>
-    </div>
-    <div class="ticket-filters">
-      <button class="filter-btn" data-filter="type" data-value="feature">Feature</button>
-      <button class="filter-btn" data-filter="type" data-value="bug">Bug</button>
-      <button class="filter-btn" data-filter="type" data-value="chore">Chore</button>
-      <button class="filter-btn" data-filter="type" data-value="project">Project</button>
-    </div>
-    <div class="sort-bar">
-      <span>Sort:</span>
-      <button class="sort-btn active" data-sort="newest">Newest</button>
-      <button class="sort-btn" data-sort="oldest">Oldest</button>
-      <button class="sort-btn" data-sort="effort-asc">Effort ↑</button>
-      <button class="sort-btn" data-sort="effort-desc">Effort ↓</button>
-    </div>
-  </div>
-  <div style="display:flex;gap:8px;align-items:center">
-    <div class="search-wrap">
-      <input type="search" id="search-input" placeholder="Search tickets…" autocomplete="off" title="Search title & description (/)">
-    </div>
-    <button class="btn btn-primary btn-sm" onclick="openCreate(); event.stopPropagation()">+ New Ticket</button>
-  </div>
-</div>
-
-<!-- Ticket list -->
-<div class="section">
-  <div class="ticket-list" id="ticket-list">
-    <div class="empty">Loading…</div>
-  </div>
-</div>
-
-<!-- Detail panel (fixed right drawer) -->
-<div class="detail-panel" id="detail-panel">
-  <div class="detail-header">
-    <div style="flex:1;min-width:0">
-      <div class="tr-id" id="d-human-id" style="margin-bottom:4px"></div>
-      <h2 id="d-title" style="word-break:break-word"></h2>
-    </div>
-    <div class="detail-actions" style="flex-shrink:0">
-      <button class="btn btn-subtle btn-sm" onclick="openEdit()">Edit</button>
-      <button class="btn btn-danger btn-sm" onclick="deleteTicket()">Delete</button>
-      <button class="btn btn-subtle btn-sm" onclick="closeDetail()">✕</button>
-    </div>
-  </div>
-  <div class="detail-meta">
-    <span>Status: <b id="d-status-label"></b></span>
-    <span>Type: <b id="d-type-label"></b></span>
-    <span>Effort: <b id="d-effort-label"></b></span>
-    <span>By: <b id="d-user"></b></span>
-    <span>Submitted: <b id="d-submitted"></b></span>
-    <span id="d-parent-wrap" style="display:none">Parent: <span class="parent-link"><a id="d-parent-link" onclick="navToParent()"></a></span></span>
-    <span id="d-children-wrap" style="display:none">Children: <div class="children-list" id="d-children-list"></div></span>
-    <span class="d-guid-wrap">GUID: <b id="d-guid" class="mono" style="font-size:11px"></b></span>
-  </div>
-  <div class="detail-description">
-    <div class="md-body" id="d-description"></div>
-  </div>
-  <div id="d-startup-wrap" style="display:none">
-    <div class="att-section-hdr">
-      <span>Startup Script</span>
-      <button class="btn btn-subtle btn-sm" id="copy-script-btn" onclick="copyStartupScript(); event.stopPropagation()">Copy</button>
-    </div>
-    <pre id="d-startup-script" style="font-size:11px;background:var(--raised);padding:10px;border-radius:4px;overflow-x:auto;white-space:pre;margin:0;line-height:1.5"></pre>
-  </div>
-  <div class="att-section-hdr">
-    <span>Attachments <span id="att-count-label" class="muted" style="font-weight:400;text-transform:none;letter-spacing:0"></span></span>
-    <button class="btn btn-subtle btn-sm" onclick="openAttachCreate(); event.stopPropagation()">+ Add</button>
-  </div>
-  <div id="att-list"></div>
-</div>
-
-<!-- Attachment view overlay -->
-<div class="overlay" id="att-view-overlay">
-  <div class="modal att-view-modal" onclick="event.stopPropagation()">
-    <div class="att-view-header">
-      <h3 id="av-title"></h3>
-      <span class="att-view-meta" id="av-meta"></span>
-      <button class="btn btn-subtle btn-sm" onclick="openAttachEditFromView()">Edit</button>
-      <button class="btn btn-subtle btn-sm" onclick="closeAttachView()">✕</button>
-    </div>
-    <div class="md-body" id="av-content"></div>
-  </div>
-</div>
-
-<!-- Attachment create/edit overlay -->
-<div class="overlay" id="att-edit-overlay">
-  <div class="modal" style="min-width:560px" onclick="event.stopPropagation()">
-    <h3 id="ae-overlay-title">New Attachment</h3>
-    <div class="modal-fields">
-      <div class="field">
-        <label>Title</label>
-        <input type="text" id="ae-title" placeholder="e.g. Implementation Proposal v1" autocomplete="off">
-      </div>
-      <div class="field">
-        <label>Content (Markdown)</label>
-        <textarea class="desc-input" id="ae-content" style="min-height:260px" placeholder="# Title&#10;&#10;Your markdown here…"></textarea>
-      </div>
-      <div class="field" id="ae-user-field">
-        <label>Author</label>
-        <select id="ae-user">
-          <option value="kevin">kevin</option>
-          <option value="claude">claude</option>
-        </select>
-      </div>
-    </div>
-    <div class="actions">
-      <button class="btn btn-subtle" onclick="closeAttachEdit()">Cancel</button>
-      <button class="btn btn-primary" onclick="submitAttach()">Save</button>
-    </div>
-  </div>
-</div>
-
-<!-- Create modal -->
-<div class="overlay" id="create-overlay">
-  <div class="modal" style="min-width:520px" onclick="event.stopPropagation()">
-    <h3>New Ticket</h3>
-    <div class="modal-fields">
-      <div class="field">
-        <label>Title</label>
-        <input type="text" id="c-title" placeholder="Short summary…" autocomplete="off">
-      </div>
-      <div class="field">
-        <label>Description (Markdown)</label>
-        <textarea class="desc-input" id="c-desc" placeholder="Details, context, links…"></textarea>
-      </div>
-      <div style="display:flex;gap:12px">
-        <div class="field" style="flex:1">
-          <label>Type</label>
-          <select id="c-type">
-            <option value="feature">Feature</option>
-            <option value="bug">Bug</option>
-            <option value="chore">Chore</option>
-            <option value="project">Project</option>
-          </select>
-        </div>
-        <div class="field" style="flex:1">
-          <label>Status</label>
-          <select id="c-status">
-            <option value="open">Open</option>
-            <option value="ongoing">Ongoing</option>
-            <option value="completed">Completed</option>
-            <option value="abandoned">Abandoned</option>
-          </select>
-        </div>
-        <div class="field" style="flex:1">
-          <label>Submitted by</label>
-          <select id="c-user">
-            <option value="kevin">kevin</option>
-            <option value="claude">claude</option>
-          </select>
-        </div>
-      </div>
-      <div style="display:flex;gap:12px">
-        <div class="field" style="flex:1">
-          <label>Parent ticket</label>
-          <select id="c-parent"><option value="">— none —</option></select>
-        </div>
-        <div class="field" style="width:100px;flex-shrink:0">
-          <label>Effort (1–10)</label>
-          <input type="number" id="c-effort" min="1" max="10" placeholder="—" autocomplete="off">
-        </div>
-      </div>
-    </div>
-    <div class="actions">
-      <button class="btn btn-subtle" onclick="closeCreate()">Cancel</button>
-      <button class="btn btn-primary" onclick="submitCreate()">Create</button>
-    </div>
-  </div>
-</div>
-
-<!-- New Environment modal -->
-<div class="overlay" id="env-create-overlay">
-  <div class="modal" style="min-width:400px" onclick="event.stopPropagation()">
-    <h3>New Environment</h3>
-    <div class="modal-fields">
-      <div class="field">
-        <label>Prefix <span class="muted" style="font-weight:400;font-size:11px">(e.g. PROJ, LAB — max 16 chars)</span></label>
-        <input type="text" id="env-prefix" placeholder="HOME" autocomplete="off" style="text-transform:uppercase" maxlength="16">
-      </div>
-      <div class="field">
-        <label>Name</label>
-        <input type="text" id="env-name" placeholder="My Project" autocomplete="off">
-      </div>
-      <div class="field">
-        <label>Description <span class="muted" style="font-weight:400;font-size:11px">(optional)</span></label>
-        <input type="text" id="env-desc" placeholder="Short description…" autocomplete="off">
-      </div>
-    </div>
-    <div class="actions">
-      <button class="btn btn-subtle" onclick="closeEnvCreate()">Cancel</button>
-      <button class="btn btn-primary" onclick="submitEnvCreate()">Create</button>
-    </div>
-  </div>
-</div>
-
-<!-- Edit modal -->
-<div class="overlay" id="edit-overlay">
-  <div class="modal" style="min-width:520px" onclick="event.stopPropagation()">
-    <h3>Edit Ticket <span id="e-human-id" class="muted" style="font-weight:400;font-size:13px"></span></h3>
-    <div class="modal-fields">
-      <div class="field">
-        <label>Title</label>
-        <input type="text" id="e-title" autocomplete="off">
-      </div>
-      <div class="field">
-        <label>Description (Markdown)</label>
-        <textarea class="desc-input" id="e-desc"></textarea>
-      </div>
-      <div style="display:flex;gap:12px">
-        <div class="field" style="flex:1">
-          <label>Type</label>
-          <select id="e-type">
-            <option value="feature">Feature</option>
-            <option value="bug">Bug</option>
-            <option value="chore">Chore</option>
-            <option value="project">Project</option>
-          </select>
-        </div>
-        <div class="field" style="flex:1">
-          <label>Status</label>
-          <select id="e-status">
-            <option value="open">Open</option>
-            <option value="ongoing">Ongoing</option>
-            <option value="completed">Completed</option>
-            <option value="abandoned">Abandoned</option>
-          </select>
-        </div>
-        <div class="field" style="flex:1">
-          <label>By</label>
-          <select id="e-user">
-            <option value="kevin">kevin</option>
-            <option value="claude">claude</option>
-          </select>
-        </div>
-      </div>
-      <div style="display:flex;gap:12px">
-        <div class="field" style="flex:1">
-          <label>Parent ticket</label>
-          <select id="e-parent"><option value="">— none —</option></select>
-        </div>
-        <div class="field" style="width:100px;flex-shrink:0">
-          <label>Effort (1–10)</label>
-          <input type="number" id="e-effort" min="1" max="10" placeholder="—" autocomplete="off">
-        </div>
-      </div>
-    </div>
-    <div class="actions">
-      <button class="btn btn-subtle" onclick="closeEdit()">Cancel</button>
-      <button class="btn btn-primary" onclick="submitEdit()">Save</button>
-    </div>
-  </div>
-</div>
-
-{% endblock %}
-
-{% block scripts %}
-<script>
-let activeFilters = new Set(['open', 'ongoing']);
-let activeTypeFilters = new Set();
-let currentSort = 'newest';
-let searchQuery = '';
-let currentTicket = null;
-let expandedParents = new Set();
-let currentAttach = null;
-let tickets = [];
-let attachments = [];
-let environments = [];
-let currentEnvironmentId = null;
-
-const STATUS_COLORS = {
-  open:      'badge-open',
-  ongoing:   'badge-ongoing',
-  completed: 'badge-completed',
-  abandoned: 'badge-abandoned',
-};
-const TYPE_COLORS = {
-  feature: 'badge-feature',
-  bug:     'badge-bug',
-  chore:   'badge-chore',
-  project: 'badge-project',
-};
-
-function statusBadge(s) {
-  return `<span class="badge ${STATUS_COLORS[s] || ''}">${s}</span>`;
-}
-function typeBadge(t) {
-  return `<span class="badge ${TYPE_COLORS[t] || ''}">${t}</span>`;
-}
-function effortPip(e) {
-  if (!e) return '';
-  const cls = e <= 3 ? 'effort-lo' : e <= 6 ? 'effort-md' : 'effort-hi';
-  return `<span class="effort-pip ${cls}" title="Effort ${e}/10">${e}</span>`;
-}
-
-function sortTickets(arr) {
-  const copy = [...arr];
-  if (currentSort === 'newest') {
-    copy.sort((a, b) => new Date(b.submitted_at) - new Date(a.submitted_at));
-  } else if (currentSort === 'oldest') {
-    copy.sort((a, b) => new Date(a.submitted_at) - new Date(b.submitted_at));
-  } else if (currentSort === 'effort-asc') {
-    copy.sort((a, b) => {
-      if (a.effort == null && b.effort == null) return 0;
-      if (a.effort == null) return 1;
-      if (b.effort == null) return -1;
-      return a.effort - b.effort;
-    });
-  } else if (currentSort === 'effort-desc') {
-    copy.sort((a, b) => {
-      if (a.effort == null && b.effort == null) return 0;
-      if (a.effort == null) return 1;
-      if (b.effort == null) return -1;
-      return b.effort - a.effort;
-    });
-  }
-  return copy;
-}
-
-function fmt_date(iso) {
-  if (!iso) return '—';
-  const d = new Date(iso);
-  return d.toLocaleDateString('en-IE', {year:'numeric',month:'short',day:'numeric'});
-}
-
-// ── Environment selector ─────────────────────────────────────────────────────
-
-async function loadEnvironments() {
-  try {
-    environments = await api('/api/environments');
-    if (!environments.length) { await loadTickets(); return; }
-    if (currentEnvironmentId === null || !environments.find(e => e.id === currentEnvironmentId)) {
-      currentEnvironmentId = environments[0].id;
-    }
-    renderEnvPill();
-    renderEnvDropdown();
-    await loadTickets();
-  } catch(err) {
-    toast(err.message, true);
-  }
-}
-
-function renderEnvPill() {
-  const env = environments.find(e => e.id === currentEnvironmentId);
-  document.getElementById('env-pill-name').textContent = env
-    ? `${env.prefix} · ${env.name}` : '…';
-}
-
-function renderEnvDropdown() {
-  const dd = document.getElementById('env-dropdown');
-  dd.innerHTML = environments.map(e => `
-    <div class="env-dd-item${e.id === currentEnvironmentId ? ' active' : ''}"
-         onclick="selectEnvironment(${e.id}); event.stopPropagation()">
-      <span class="env-prefix-badge">${escHtml(e.prefix)}</span>
-      <span style="flex:1">${escHtml(e.name)}</span>
-    </div>
-  `).join('') + `
-    <div class="env-dd-divider"></div>
-    <div class="env-dd-item" onclick="openEnvCreate(); closeEnvDropdown(); event.stopPropagation()">
-      <span style="color:var(--primary);font-weight:600">+ New environment</span>
-    </div>
-  `;
-}
-
-function toggleEnvDropdown() {
-  document.getElementById('env-dropdown').classList.toggle('open');
-}
-
-function closeEnvDropdown() {
-  document.getElementById('env-dropdown').classList.remove('open');
-}
-
-function selectEnvironment(id) {
-  currentEnvironmentId = id;
-  closeDetail();
-  closeEnvDropdown();
-  renderEnvPill();
-  renderEnvDropdown();
-  loadTickets();
-}
-
-function openEnvCreate() {
-  document.getElementById('env-prefix').value = '';
-  document.getElementById('env-name').value = '';
-  document.getElementById('env-desc').value = '';
-  document.getElementById('env-create-overlay').classList.add('active');
-  document.getElementById('env-prefix').focus();
-}
-
-function closeEnvCreate() {
-  document.getElementById('env-create-overlay').classList.remove('active');
-}
-
-async function submitEnvCreate() {
-  const prefix = document.getElementById('env-prefix').value.trim().toUpperCase();
-  const name   = document.getElementById('env-name').value.trim();
-  if (!prefix) { toast('Prefix is required', true); return; }
-  if (!name)   { toast('Name is required', true); return; }
-  try {
-    const created = await api('/api/environments', {
-      method: 'POST',
-      headers: {'Content-Type': 'application/json'},
-      body: JSON.stringify({ prefix, name, description: document.getElementById('env-desc').value.trim() || null }),
-    });
-    environments.push(created);
-    currentEnvironmentId = created.id;
-    renderEnvPill();
-    renderEnvDropdown();
-    closeEnvCreate();
-    await loadTickets();
-    toast('Environment created');
-  } catch(err) {
-    toast(err.message, true);
-  }
-}
-
-async function loadTickets() {
-  try {
-    const parts = [
-      ...[...activeFilters].map(s => `status=${encodeURIComponent(s)}`),
-      ...[...activeTypeFilters].map(t => `type=${encodeURIComponent(t)}`),
-    ];
-    if (currentEnvironmentId !== null) parts.push(`environment_id=${currentEnvironmentId}`);
-    const url = parts.length ? `/api/tickets?${parts.join('&')}` : '/api/tickets';
-    tickets = await api(url);
-    renderList();
-    const ticketIds = new Set(tickets.map(t => t.id));
-    const rootCount = tickets.filter(t => !t.parent_id || !ticketIds.has(t.parent_id)).length;
-    const total = tickets.length;
-    document.getElementById('ticket-count').textContent =
-      rootCount === total
-        ? `${total} ticket${total !== 1 ? 's' : ''}`
-        : `${rootCount} ticket${rootCount !== 1 ? 's' : ''} (${total} total)`;
-  } catch(e) {
-    toast(e.message, true);
-  }
-}
-
-function renderTicketRow(t) {
-  const visibleChildIds = (t.child_ids || []).filter(cid => tickets.some(c => c.id === cid));
-  const childCount = visibleChildIds.length;
-  const expanded = expandedParents.has(t.id);
-  return `
-    <div class="ticket-row" onclick="showDetail(${t.id}); event.stopPropagation()">
-      <div class="tr-top">
-        <span class="tr-id">${t.human_id}</span>
-        <span class="tr-title">${escHtml(t.title)}</span>
-        ${childCount ? `<button class="child-toggle" onclick="toggleChildren(${t.id}); event.stopPropagation()" title="${expanded ? 'Collapse' : 'Expand'} child tickets">${expanded ? '▾' : '▸'}</button><span class="child-count">${childCount}</span>` : ''}
-      </div>
-      <div class="tr-bottom">
-        ${typeBadge(t.type)}
-        ${statusBadge(t.status)}
-        ${t.effort != null ? effortPip(t.effort) : ''}
-        <span class="tr-sep">·</span>
-        <span>${escHtml(t.user)}</span>
-        <span class="tr-sep">·</span>
-        <span>${fmt_date(t.submitted_at)}</span>
-        ${t.attachment_count ? `<span class="tr-sep">·</span><span class="att-chip">${t.attachment_count} file${t.attachment_count !== 1 ? 's' : ''}</span>` : ''}
-      </div>
-    </div>
-    ${childCount && expanded ? `<div class="child-rows">${visibleChildIds.map(cid => renderTicketRow(tickets.find(c => c.id === cid))).join('')}</div>` : ''}
-  `;
-}
-
-function toggleChildren(id) {
-  if (expandedParents.has(id)) expandedParents.delete(id);
-  else expandedParents.add(id);
-  renderList();
-}
-
-function matchesSearch(t) {
-  if (!searchQuery) return true;
-  const q = searchQuery.toLowerCase();
-  return t.title.toLowerCase().includes(q)
-    || (t.description || '').toLowerCase().includes(q)
-    || t.human_id.toLowerCase().includes(q);
-}
-
-function renderList() {
-  const list = document.getElementById('ticket-list');
-  const filtered = tickets.filter(matchesSearch);
-  if (!filtered.length) {
-    list.innerHTML = `<div class="empty">${searchQuery ? 'No tickets match your search.' : 'No tickets'}</div>`;
-    return;
-  }
-  const ticketIds = new Set(filtered.map(t => t.id));
-  const sorted = sortTickets(filtered);
-  const roots = sorted.filter(t => !t.parent_id || !ticketIds.has(t.parent_id));
-  list.innerHTML = roots.map(renderTicketRow).join('');
-}
-
-function showDetail(id) {
-  currentTicket = tickets.find(t => t.id === id);
-  if (!currentTicket) return;
-  const t = currentTicket;
-  document.getElementById('d-human-id').textContent = t.human_id;
-  document.getElementById('d-title').textContent = t.title;
-  document.getElementById('d-status-label').innerHTML = statusBadge(t.status);
-  document.getElementById('d-type-label').innerHTML = typeBadge(t.type);
-  document.getElementById('d-effort-label').innerHTML = t.effort != null ? effortPip(t.effort) + ` <span style="font-size:11px;color:var(--fg-sec)">/10</span>` : '<span class="muted">—</span>';
-  document.getElementById('d-user').textContent = t.user;
-  document.getElementById('d-submitted').textContent = fmt_date(t.submitted_at);
-  document.getElementById('d-guid').textContent = t.guid;
-
-  // Parent link
-  const parentWrap = document.getElementById('d-parent-wrap');
-  if (t.parent_id) {
-    const parent = tickets.find(p => p.id === t.parent_id);
-    const label = parent ? `${parent.human_id} ${parent.title}` : `#${t.parent_id}`;
-    document.getElementById('d-parent-link').textContent = label;
-    parentWrap.style.display = '';
-  } else {
-    parentWrap.style.display = 'none';
-  }
-
-  // Children list
-  const childWrap = document.getElementById('d-children-wrap');
-  if (t.child_ids && t.child_ids.length) {
-    const childList = document.getElementById('d-children-list');
-    childList.innerHTML = t.child_ids.map(cid => {
-      const child = tickets.find(c => c.id === cid);
-      const label = child ? `${child.human_id} ${escHtml(child.title)}` : `#${cid}`;
-      return `<a class="child-link" onclick="showDetail(${cid}); event.stopPropagation()">${label}</a>`;
-    }).join('');
-    childWrap.style.display = '';
-  } else {
-    childWrap.style.display = 'none';
-  }
-
-  const descEl = document.getElementById('d-description');
-  if (t.description) {
-    descEl.innerHTML = DOMPurify.sanitize(marked.parse(t.description));
-  } else {
-    descEl.innerHTML = '<span class="muted">No description.</span>';
-  }
-  const scriptWrap = document.getElementById('d-startup-wrap');
-  const scriptEl = document.getElementById('d-startup-script');
-  if (t.startup_script) {
-    scriptEl.textContent = t.startup_script;
-    scriptWrap.style.display = '';
-  } else {
-    scriptWrap.style.display = 'none';
-  }
-
-  document.getElementById('detail-panel').classList.add('open');
-  loadAttachments(t.id);
-}
-
-function copyStartupScript() {
-  const script = currentTicket?.startup_script;
-  if (!script) return;
-  navigator.clipboard.writeText(script).then(() => {
-    const btn = document.getElementById('copy-script-btn');
-    btn.textContent = 'Copied!';
-    setTimeout(() => { btn.textContent = 'Copy'; }, 1500);
-  }).catch(() => toast('Failed to copy', true));
-}
-
-function navToParent() {
-  if (currentTicket?.parent_id) showDetail(currentTicket.parent_id);
-}
-
-function closeDetail() {
-  document.getElementById('detail-panel').classList.remove('open');
-  currentTicket = null;
-  attachments = [];
-}
-
-// ── Create ────────────────────────────────────────────────────────────────────
-
-function _populateParentSelect(selectId, excludeId = null) {
-  const sel = document.getElementById(selectId);
-  sel.innerHTML = '<option value="">— none —</option>';
-  tickets
-    .filter(t => t.id !== excludeId)
-    .forEach(t => {
-      const opt = document.createElement('option');
-      opt.value = t.id;
-      opt.textContent = `${t.human_id} ${t.title}`;
-      sel.appendChild(opt);
-    });
-}
-
-function openCreate() {
-  document.getElementById('c-title').value = '';
-  document.getElementById('c-desc').value = '';
-  document.getElementById('c-type').value = 'feature';
-  document.getElementById('c-status').value = 'open';
-  document.getElementById('c-user').value = 'kevin';
-  document.getElementById('c-effort').value = '';
-  _populateParentSelect('c-parent');
-  document.getElementById('c-parent').value = '';
-  document.getElementById('create-overlay').classList.add('active');
-  document.getElementById('c-title').focus();
-}
-
-function closeCreate() {
-  document.getElementById('create-overlay').classList.remove('active');
-}
-
-async function submitCreate() {
-  const title = document.getElementById('c-title').value.trim();
-  if (!title) { toast('Title is required', true); return; }
-  try {
-    const parentVal = document.getElementById('c-parent').value;
-    const effortVal = document.getElementById('c-effort').value;
-    await api('/api/tickets', {
-      method: 'POST',
-      headers: {'Content-Type': 'application/json'},
-      body: JSON.stringify({
-        title,
-        description: document.getElementById('c-desc').value || null,
-        type: document.getElementById('c-type').value,
-        status: document.getElementById('c-status').value,
-        user: document.getElementById('c-user').value,
-        parent_id: parentVal ? parseInt(parentVal) : null,
-        effort: effortVal ? parseInt(effortVal) : null,
-        environment_id: currentEnvironmentId,
-      }),
-    });
-    closeCreate();
-    await loadTickets();
-    toast('Ticket created');
-  } catch(e) {
-    toast(e.message, true);
-  }
-}
-
-// ── Edit ──────────────────────────────────────────────────────────────────────
-
-function openEdit() {
-  if (!currentTicket) return;
-  const t = currentTicket;
-  document.getElementById('e-human-id').textContent = t.human_id;
-  document.getElementById('e-title').value = t.title;
-  document.getElementById('e-desc').value = t.description || '';
-  document.getElementById('e-type').value = t.type;
-  document.getElementById('e-status').value = t.status;
-  document.getElementById('e-user').value = t.user;
-  document.getElementById('e-effort').value = t.effort != null ? t.effort : '';
-  _populateParentSelect('e-parent', t.id);
-  document.getElementById('e-parent').value = t.parent_id || '';
-  document.getElementById('edit-overlay').classList.add('active');
-  document.getElementById('e-title').focus();
-}
-
-function closeEdit() {
-  document.getElementById('edit-overlay').classList.remove('active');
-}
-
-async function submitEdit() {
-  if (!currentTicket) return;
-  const title = document.getElementById('e-title').value.trim();
-  if (!title) { toast('Title is required', true); return; }
-  try {
-    const parentVal = document.getElementById('e-parent').value;
-    const effortVal = document.getElementById('e-effort').value;
-    const updated = await api(`/api/tickets/${currentTicket.id}`, {
-      method: 'PATCH',
-      headers: {'Content-Type': 'application/json'},
-      body: JSON.stringify({
-        title,
-        description: document.getElementById('e-desc').value || null,
-        type: document.getElementById('e-type').value,
-        status: document.getElementById('e-status').value,
-        user: document.getElementById('e-user').value,
-        parent_id: parentVal ? parseInt(parentVal) : null,
-        effort: effortVal ? parseInt(effortVal) : null,
-      }),
-    });
-    closeEdit();
-    const idx = tickets.findIndex(t => t.id === currentTicket.id);
-    if (idx >= 0) tickets[idx] = updated;
-    currentTicket = updated;
-    renderList();
-    showDetail(updated.id);
-    toast('Ticket updated');
-  } catch(e) {
-    toast(e.message, true);
-  }
-}
-
-// ── Delete ────────────────────────────────────────────────────────────────────
-
-async function deleteTicket() {
-  if (!currentTicket) return;
-  if (!confirm(`Delete ${currentTicket.human_id}? This cannot be undone.`)) return;
-  try {
-    await api(`/api/tickets/${currentTicket.id}`, {method: 'DELETE'});
-    closeDetail();
-    await loadTickets();
-    toast('Ticket deleted');
-  } catch(e) {
-    toast(e.message, true);
-  }
-}
-
-// ── Attachments ───────────────────────────────────────────────────────────────
-
-async function loadAttachments(ticketId) {
-  document.getElementById('att-list').innerHTML = '';
-  document.getElementById('att-count-label').textContent = '';
-  try {
-    attachments = await api(`/api/tickets/${ticketId}/attachments`);
-    renderAttachments();
-  } catch(e) {
-    toast(e.message, true);
-  }
-}
-
-function renderAttachments() {
-  const list = document.getElementById('att-list');
-  const label = document.getElementById('att-count-label');
-  label.textContent = attachments.length ? `(${attachments.length})` : '';
-  if (!attachments.length) {
-    list.innerHTML = '<div style="font-size:12px;color:var(--fg-sec);padding:8px 0">None yet</div>';
-    return;
-  }
-  list.innerHTML = attachments.map(a => `
-    <div class="att-item">
-      <div class="att-item-info">
-        <div class="att-item-title">${escHtml(a.title)}</div>
-        <div class="att-item-meta">${escHtml(a.created_by)} · ${fmt_date(a.created_at)}</div>
-      </div>
-      <div class="att-item-actions">
-        <button class="btn btn-subtle btn-sm" onclick="openAttachView(${a.id}); event.stopPropagation()">View</button>
-        <button class="btn btn-subtle btn-sm" onclick="openAttachEdit(${a.id}); event.stopPropagation()">Edit</button>
-        <button class="btn btn-danger btn-sm" onclick="deleteAttach(${a.id}); event.stopPropagation()">✕</button>
-      </div>
-    </div>
-  `).join('');
-}
-
-function _syncAttachCountInList() {
-  const t = tickets.find(t => t.id === currentTicket?.id);
-  if (t) { t.attachment_count = attachments.length; renderList(); }
-}
-
-function openAttachView(id) {
-  currentAttach = attachments.find(a => a.id === id);
-  if (!currentAttach) return;
-  document.getElementById('av-title').textContent = currentAttach.title;
-  document.getElementById('av-meta').textContent =
-    `${currentAttach.created_by} · ${fmt_date(currentAttach.created_at)}`;
-  document.getElementById('av-content').innerHTML =
-    DOMPurify.sanitize(marked.parse(currentAttach.content));
-  document.getElementById('att-view-overlay').classList.add('active');
-}
-function closeAttachView() {
-  document.getElementById('att-view-overlay').classList.remove('active');
-}
-function openAttachEditFromView() {
-  const id = currentAttach?.id;
-  closeAttachView();
-  if (id != null) openAttachEdit(id);
-}
-
-function openAttachCreate() {
-  currentAttach = null;
-  document.getElementById('ae-overlay-title').textContent = 'New Attachment';
-  document.getElementById('ae-title').value = '';
-  document.getElementById('ae-content').value = '';
-  document.getElementById('ae-user').value = 'kevin';
-  document.getElementById('ae-user-field').style.display = '';
-  document.getElementById('att-edit-overlay').classList.add('active');
-  document.getElementById('ae-title').focus();
-}
-function openAttachEdit(id) {
-  currentAttach = attachments.find(a => a.id === id);
-  if (!currentAttach) return;
-  document.getElementById('ae-overlay-title').textContent = 'Edit Attachment';
-  document.getElementById('ae-title').value = currentAttach.title;
-  document.getElementById('ae-content').value = currentAttach.content;
-  document.getElementById('ae-user-field').style.display = 'none';
-  document.getElementById('att-edit-overlay').classList.add('active');
-  document.getElementById('ae-title').focus();
-}
-function closeAttachEdit() {
-  document.getElementById('att-edit-overlay').classList.remove('active');
-}
-
-async function submitAttach() {
-  const title = document.getElementById('ae-title').value.trim();
-  const content = document.getElementById('ae-content').value.trim();
-  if (!title)   { toast('Title is required', true); return; }
-  if (!content) { toast('Content is required', true); return; }
-  try {
-    if (currentAttach) {
-      const updated = await api(
-        `/api/tickets/${currentTicket.id}/attachments/${currentAttach.id}`,
-        { method: 'PATCH', headers: {'Content-Type':'application/json'},
-          body: JSON.stringify({ title, content }) }
-      );
-      const idx = attachments.findIndex(a => a.id === currentAttach.id);
-      if (idx >= 0) attachments[idx] = updated;
-      toast('Attachment updated');
-    } else {
-      const created = await api(
-        `/api/tickets/${currentTicket.id}/attachments`,
-        { method: 'POST', headers: {'Content-Type':'application/json'},
-          body: JSON.stringify({ title, content, created_by: document.getElementById('ae-user').value }) }
-      );
-      attachments.push(created);
-      toast('Attachment added');
-    }
-    closeAttachEdit();
-    renderAttachments();
-    _syncAttachCountInList();
-  } catch(e) { toast(e.message, true); }
-}
-
-async function deleteAttach(id) {
-  if (!confirm('Delete this attachment? This cannot be undone.')) return;
-  try {
-    await api(`/api/tickets/${currentTicket.id}/attachments/${id}`, { method: 'DELETE' });
-    attachments = attachments.filter(a => a.id !== id);
-    renderAttachments();
-    _syncAttachCountInList();
-    toast('Attachment deleted');
-  } catch(e) { toast(e.message, true); }
-}
-
-// ── Filters ───────────────────────────────────────────────────────────────────
-
-document.querySelectorAll('.filter-btn').forEach(btn => {
-  btn.addEventListener('click', e => {
-    e.stopPropagation();
-    const { filter, value } = btn.dataset;
-    const set = filter === 'type' ? activeTypeFilters : activeFilters;
-    if (set.has(value)) { set.delete(value); btn.classList.remove('active'); }
-    else                { set.add(value);    btn.classList.add('active'); }
-    closeDetail();
-    loadTickets();
-  });
-});
-
-document.querySelectorAll('.sort-btn').forEach(btn => {
-  btn.addEventListener('click', e => {
-    e.stopPropagation();
-    document.querySelectorAll('.sort-btn').forEach(b => b.classList.remove('active'));
-    btn.classList.add('active');
-    currentSort = btn.dataset.sort;
-    renderList();
-  });
-});
-
-// ── Click outside to dismiss detail pane ─────────────────────────────────────
-
-document.addEventListener('click', () => {
-  if (document.getElementById('detail-panel').classList.contains('open')) {
-    closeDetail();
-  }
-});
-document.getElementById('detail-panel').addEventListener('click', e => e.stopPropagation());
-
-// ── Search ────────────────────────────────────────────────────────────────────
-
-document.getElementById('search-input').addEventListener('input', e => {
-  searchQuery = e.target.value.trim();
-  renderList();
-});
-
-// ── Keyboard ──────────────────────────────────────────────────────────────────
-
-document.addEventListener('keydown', e => {
-  if (e.key === 'Escape') {
-    if (document.getElementById('att-edit-overlay').classList.contains('active')) closeAttachEdit();
-    else if (document.getElementById('att-view-overlay').classList.contains('active')) closeAttachView();
-    else if (document.getElementById('env-create-overlay').classList.contains('active')) closeEnvCreate();
-    else if (document.getElementById('env-dropdown').classList.contains('open')) closeEnvDropdown();
-    else if (document.getElementById('edit-overlay').classList.contains('active')) closeEdit();
-    else if (document.getElementById('create-overlay').classList.contains('active')) closeCreate();
-    else if (searchQuery) {
-      searchQuery = '';
-      document.getElementById('search-input').value = '';
-      renderList();
-    } else closeDetail();
-    return;
-  }
-  if (e.key === '/' && document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') {
-    e.preventDefault();
-    document.getElementById('search-input').focus();
-  }
-});
-
-document.getElementById('create-overlay').addEventListener('click', e => {
-  if (e.target === e.currentTarget) closeCreate();
-});
-document.getElementById('edit-overlay').addEventListener('click', e => {
-  if (e.target === e.currentTarget) closeEdit();
-});
-document.getElementById('att-view-overlay').addEventListener('click', e => {
-  if (e.target === e.currentTarget) closeAttachView();
-});
-document.getElementById('att-edit-overlay').addEventListener('click', e => {
-  if (e.target === e.currentTarget) closeAttachEdit();
-});
-document.getElementById('env-create-overlay').addEventListener('click', e => {
-  if (e.target === e.currentTarget) closeEnvCreate();
-});
-
-document.addEventListener('click', () => closeEnvDropdown());
-document.getElementById('env-selector').addEventListener('click', e => e.stopPropagation());
-
-loadEnvironments();
-</script>
-{% endblock %}
+{% extends "tickets_base.html" %}
diff --git a/corvid/templates/tickets_base.html b/corvid/templates/tickets_base.html
new file mode 100644
index 0000000..c86d6f1
--- /dev/null
+++ b/corvid/templates/tickets_base.html
@@ -0,0 +1,1170 @@
+{% extends "base.html" %}
+{% block title %}Tickets{% endblock %}
+{% block page_title %}Tickets{% endblock %}
+{% block topbar_meta %}<span id="ticket-count" class="muted"></span>{% endblock %}
+
+{% block head %}
+<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
+<style>
+.ticket-filters {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  flex-shrink: 1;
+  min-width: 0;
+}
+.filter-btn {
+  padding: 4px 12px;
+  border-radius: 20px;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--fg-sec);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all .15s;
+}
+.filter-btn:hover { background: var(--raised); color: var(--fg); opacity: 1; }
+.filter-btn.active { background: var(--primary); color: #000; border-color: var(--primary); opacity: 1; }
+
+/* ── Ticket list rows ── */
+.ticket-list { display: flex; flex-direction: column; }
+.ticket-row {
+  padding: 10px 20px;
+  border-bottom: 1px solid var(--divider);
+  cursor: pointer;
+  transition: background .1s;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.ticket-row:last-child { border-bottom: none; }
+.ticket-row:hover { background: var(--raised); }
+.tr-top { display: flex; align-items: baseline; gap: 10px; }
+.tr-id { font-family: monospace; font-size: 11px; color: var(--fg-sec); flex-shrink: 0; width: 72px; }
+.tr-title { flex: 1; font-size: 13px; font-weight: 500; color: var(--fg); }
+.tr-bottom { display: flex; align-items: center; gap: 8px; padding-left: 82px; font-size: 12px; color: var(--fg-sec); }
+.tr-sep { color: var(--border); }
+.att-chip { font-size: 11px; color: var(--fg-sec); font-family: monospace; }
+.child-toggle {
+  font-size: 11px; color: var(--fg-sec); background: none; border: none;
+  cursor: pointer; padding: 0 4px; line-height: 1; opacity: .7;
+}
+.child-toggle:hover { opacity: 1; color: var(--fg); }
+.child-count { font-size: 11px; color: var(--fg-sec); font-family: monospace; }
+.child-rows { border-left: 2px solid var(--divider); margin-left: 20px; }
+.child-rows .ticket-row { padding-left: 14px; }
+.child-rows .ticket-row:last-child { border-bottom: none; }
+.child-rows .tr-bottom { padding-left: 82px; }
+
+.badge-open      { background: #4f8ef718; color: var(--primary); }
+.badge-ongoing   { background: #f59e0b18; color: var(--yellow); }
+.badge-completed { background: #22c55e18; color: var(--green); }
+.badge-abandoned { background: #ffffff0f; color: var(--fg-sec); }
+.badge-feature   { background: #4f8ef718; color: var(--primary); }
+.badge-bug       { background: #ef444418; color: var(--red); }
+.badge-chore     { background: #a78bfa18; color: var(--purple); }
+.badge-project   { background: #10b98118; color: var(--green); }
+
+.effort-pip {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 18px; height: 18px; border-radius: 4px;
+  font-size: 10px; font-weight: 700; font-family: monospace; flex-shrink: 0;
+}
+.effort-lo { background: #22c55e22; color: var(--green); }
+.effort-md { background: #f59e0b22; color: var(--yellow); }
+.effort-hi { background: #ef444422; color: var(--red); }
+
+.sort-bar {
+  display: flex; gap: 6px; align-items: center; margin-top: 6px;
+  font-size: 11px; color: var(--fg-sec);
+}
+.sort-btn {
+  padding: 2px 8px; border-radius: 20px; border: 1px solid var(--border);
+  background: transparent; color: var(--fg-sec); font-size: 11px;
+  font-weight: 600; cursor: pointer; transition: all .15s;
+}
+.sort-btn:hover { background: var(--raised); color: var(--fg); }
+.sort-btn.active { background: var(--raised); color: var(--fg); border-color: var(--fg-sec); }
+
+.parent-link { font-size: 12px; color: var(--fg-sec); }
+.parent-link a { color: var(--primary); text-decoration: none; cursor: pointer; }
+.parent-link a:hover { text-decoration: underline; }
+.children-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
+.child-link { font-size: 12px; color: var(--primary); cursor: pointer; text-decoration: none; }
+.child-link:hover { text-decoration: underline; }
+
+.md-body { font-size: 13px; line-height: 1.6; color: var(--fg); }
+.md-body h1,.md-body h2,.md-body h3 { margin: 12px 0 6px; font-size: 14px; }
+.md-body p { margin: 6px 0; }
+.md-body code { background: var(--raised); padding: 1px 5px; border-radius: 3px; font-family: monospace; font-size: 12px; }
+.md-body pre { background: var(--raised); padding: 10px; border-radius: 4px; overflow-x: auto; }
+.md-body pre code { background: none; padding: 0; }
+.md-body ul, .md-body ol { padding-left: 18px; margin: 4px 0; }
+.md-body a { color: var(--primary); }
+
+/* ── Detail panel (fixed right drawer) ── */
+.detail-panel {
+  position: fixed;
+  top: 48px;
+  right: 0;
+  bottom: 0;
+  width: 440px;
+  max-width: 100vw;
+  background: var(--surface);
+  border-left: 1px solid var(--border);
+  overflow-y: auto;
+  transform: translateX(100%);
+  transition: transform .25s ease;
+  z-index: 50;
+  padding: 24px;
+}
+.detail-panel.open { transform: translateX(0); }
+.detail-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+.detail-header h2 { font-size: 16px; font-weight: 700; flex: 1; }
+.detail-meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; font-size: 12px; color: var(--fg-sec); }
+.detail-meta span b { color: var(--fg); }
+.detail-description { border-top: 1px solid var(--divider); padding-top: 16px; margin-top: 4px; }
+.detail-actions { display: flex; gap: 8px; align-items: center; }
+
+.modal-fields { display: flex; flex-direction: column; gap: 14px; }
+textarea.desc-input {
+  min-height: 140px;
+  resize: vertical;
+  font-family: monospace;
+  font-size: 12px;
+}
+
+/* ── Attachments in detail pane ── */
+.att-section-hdr {
+  display: flex; align-items: center; justify-content: space-between;
+  border-top: 1px solid var(--divider); padding-top: 16px; margin-top: 16px; margin-bottom: 8px;
+  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-sec);
+}
+.att-item {
+  display: flex; align-items: center; gap: 8px;
+  padding: 8px 0; border-bottom: 1px solid var(--divider);
+}
+.att-item:last-child { border-bottom: none; }
+.att-item-info { flex: 1; min-width: 0; }
+.att-item-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.att-item-meta { font-size: 11px; color: var(--fg-sec); margin-top: 1px; }
+.att-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
+
+/* ── Attachment view modal ── */
+.att-view-modal {
+  width: min(760px, calc(100vw - 32px));
+  max-height: calc(100vh - 80px);
+  overflow-y: auto;
+  display: flex; flex-direction: column;
+}
+.att-view-header {
+  display: flex; align-items: baseline; gap: 12px;
+  margin-bottom: 12px; padding-bottom: 12px;
+  border-bottom: 1px solid var(--border); flex-shrink: 0;
+}
+.att-view-header h3 { flex: 1; font-size: 15px; font-weight: 700; }
+.att-view-meta { font-size: 11px; color: var(--fg-sec); white-space: nowrap; }
+
+@media (max-width: 600px) {
+  .tr-bottom { padding-left: 0; }
+  .d-guid-wrap { display: none; }
+  .detail-panel { width: 100vw; top: 48px; }
+}
+
+.search-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.search-wrap input[type="search"] {
+  width: 200px;
+  padding: 5px 10px 5px 30px;
+  border-radius: 20px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--fg);
+  font-size: 12px;
+  transition: width .2s, border-color .15s;
+}
+.search-wrap input[type="search"]:focus {
+  outline: none;
+  border-color: var(--primary);
+  width: 260px;
+}
+.search-wrap::before {
+  content: '⌕';
+  position: absolute;
+  left: 9px;
+  font-size: 14px;
+  color: var(--fg-sec);
+  pointer-events: none;
+}
+.search-match { background: #4f8ef733; border-radius: 2px; }
+
+/* ── Environment selector ── */
+.env-selector { position: relative; display: inline-block; }
+.env-pill {
+  display: flex; align-items: center; gap: 6px;
+  padding: 5px 12px; border-radius: 20px;
+  border: 1px solid var(--primary); background: #4f8ef710;
+  color: var(--primary); font-size: 12px; font-weight: 600;
+  cursor: pointer; transition: background .15s;
+}
+.env-pill:hover { background: #4f8ef720; opacity: 1; }
+.env-dropdown {
+  display: none; position: absolute; top: calc(100% + 4px); left: 0;
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: 6px; box-shadow: 0 4px 16px #0006;
+  min-width: 210px; z-index: 200; overflow: hidden;
+}
+.env-dropdown.open { display: block; }
+.env-dd-item {
+  padding: 8px 14px; font-size: 12px; cursor: pointer;
+  display: flex; align-items: center; gap: 8px; transition: background .1s;
+}
+.env-dd-item:hover { background: var(--raised); }
+.env-dd-item.active { color: var(--primary); font-weight: 600; }
+.env-dd-divider { border-top: 1px solid var(--divider); margin: 2px 0; }
+.env-prefix-badge {
+  font-family: monospace; font-size: 10px; background: var(--raised);
+  padding: 1px 5px; border-radius: 3px; color: var(--fg-sec); flex-shrink: 0;
+}
+</style>
+{% endblock %}
+
+{% block content %}
+
+<!-- Environment selector -->
+<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
+  <div class="env-selector" id="env-selector">
+    <button class="env-pill" id="env-pill" onclick="toggleEnvDropdown(); event.stopPropagation()">
+      <span id="env-pill-name">…</span>
+      <span style="font-size:9px;opacity:.7">▾</span>
+    </button>
+    <div class="env-dropdown" id="env-dropdown"></div>
+  </div>
+  <button class="btn btn-subtle btn-sm" onclick="openEnvCreate(); event.stopPropagation()">+ Env</button>
+</div>
+
+<!-- Toolbar -->
+<div style="display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap;">
+  <div style="display:flex; flex-direction:column; gap:6px;">
+    <div class="ticket-filters">
+      <button class="filter-btn active" data-filter="status" data-value="open">Open</button>
+      <button class="filter-btn active" data-filter="status" data-value="ongoing">Ongoing</button>
+      <button class="filter-btn" data-filter="status" data-value="completed">Completed</button>
+      <button class="filter-btn" data-filter="status" data-value="abandoned">Abandoned</button>
+    </div>
+    <div class="ticket-filters">
+      <button class="filter-btn" data-filter="type" data-value="feature">Feature</button>
+      <button class="filter-btn" data-filter="type" data-value="bug">Bug</button>
+      <button class="filter-btn" data-filter="type" data-value="chore">Chore</button>
+      <button class="filter-btn" data-filter="type" data-value="project">Project</button>
+    </div>
+    <div class="sort-bar">
+      <span>Sort:</span>
+      <button class="sort-btn active" data-sort="newest">Newest</button>
+      <button class="sort-btn" data-sort="oldest">Oldest</button>
+      <button class="sort-btn" data-sort="effort-asc">Effort ↑</button>
+      <button class="sort-btn" data-sort="effort-desc">Effort ↓</button>
+    </div>
+  </div>
+  <div style="display:flex;gap:8px;align-items:center">
+    <div class="search-wrap">
+      <input type="search" id="search-input" placeholder="Search tickets…" autocomplete="off" title="Search title & description (/)">
+    </div>
+    <button class="btn btn-primary btn-sm" onclick="openCreate(); event.stopPropagation()">+ New Ticket</button>
+  </div>
+</div>
+
+<!-- Ticket list -->
+<div class="section">
+  <div class="ticket-list" id="ticket-list">
+    <div class="empty">Loading…</div>
+  </div>
+</div>
+
+<!-- Detail panel (fixed right drawer) -->
+<div class="detail-panel" id="detail-panel">
+  <div class="detail-header">
+    <div style="flex:1;min-width:0">
+      <div class="tr-id" id="d-human-id" style="margin-bottom:4px"></div>
+      <h2 id="d-title" style="word-break:break-word"></h2>
+    </div>
+    <div class="detail-actions" style="flex-shrink:0">
+      <button class="btn btn-subtle btn-sm" onclick="openEdit()">Edit</button>
+      <button class="btn btn-danger btn-sm" onclick="deleteTicket()">Delete</button>
+      <button class="btn btn-subtle btn-sm" onclick="closeDetail()">✕</button>
+    </div>
+  </div>
+  <div class="detail-meta">
+    <span>Status: <b id="d-status-label"></b></span>
+    <span>Type: <b id="d-type-label"></b></span>
+    <span>Effort: <b id="d-effort-label"></b></span>
+    <span>By: <b id="d-user"></b></span>
+    <span>Submitted: <b id="d-submitted"></b></span>
+    <span id="d-parent-wrap" style="display:none">Parent: <span class="parent-link"><a id="d-parent-link" onclick="navToParent()"></a></span></span>
+    <span id="d-children-wrap" style="display:none">Children: <div class="children-list" id="d-children-list"></div></span>
+    <span class="d-guid-wrap">GUID: <b id="d-guid" class="mono" style="font-size:11px"></b></span>
+  </div>
+  <div class="detail-description">
+    <div class="md-body" id="d-description"></div>
+  </div>
+  <div id="d-startup-wrap" style="display:none">
+    <div class="att-section-hdr">
+      <span>Startup Script</span>
+      <button class="btn btn-subtle btn-sm" id="copy-script-btn" onclick="copyStartupScript(); event.stopPropagation()">Copy</button>
+    </div>
+    <pre id="d-startup-script" style="font-size:11px;background:var(--raised);padding:10px;border-radius:4px;overflow-x:auto;white-space:pre;margin:0;line-height:1.5"></pre>
+  </div>
+  <div class="att-section-hdr">
+    <span>Attachments <span id="att-count-label" class="muted" style="font-weight:400;text-transform:none;letter-spacing:0"></span></span>
+    <button class="btn btn-subtle btn-sm" onclick="openAttachCreate(); event.stopPropagation()">+ Add</button>
+  </div>
+  <div id="att-list"></div>
+</div>
+
+<!-- Attachment view overlay -->
+<div class="overlay" id="att-view-overlay">
+  <div class="modal att-view-modal" onclick="event.stopPropagation()">
+    <div class="att-view-header">
+      <h3 id="av-title"></h3>
+      <span class="att-view-meta" id="av-meta"></span>
+      <button class="btn btn-subtle btn-sm" onclick="openAttachEditFromView()">Edit</button>
+      <button class="btn btn-subtle btn-sm" onclick="closeAttachView()">✕</button>
+    </div>
+    <div class="md-body" id="av-content"></div>
+  </div>
+</div>
+
+<!-- Attachment create/edit overlay -->
+<div class="overlay" id="att-edit-overlay">
+  <div class="modal" style="min-width:560px" onclick="event.stopPropagation()">
+    <h3 id="ae-overlay-title">New Attachment</h3>
+    <div class="modal-fields">
+      <div class="field">
+        <label>Title</label>
+        <input type="text" id="ae-title" placeholder="e.g. Implementation Proposal v1" autocomplete="off">
+      </div>
+      <div class="field">
+        <label>Content (Markdown)</label>
+        <textarea class="desc-input" id="ae-content" style="min-height:260px" placeholder="# Title&#10;&#10;Your markdown here…"></textarea>
+      </div>
+      <div class="field" id="ae-user-field">
+        <label>Author</label>
+        <select id="ae-user">
+          <option value="kevin">kevin</option>
+          <option value="claude">claude</option>
+        </select>
+      </div>
+    </div>
+    <div class="actions">
+      <button class="btn btn-subtle" onclick="closeAttachEdit()">Cancel</button>
+      <button class="btn btn-primary" onclick="submitAttach()">Save</button>
+    </div>
+  </div>
+</div>
+
+<!-- Create modal -->
+<div class="overlay" id="create-overlay">
+  <div class="modal" style="min-width:520px" onclick="event.stopPropagation()">
+    <h3>New Ticket</h3>
+    <div class="modal-fields">
+      <div class="field">
+        <label>Title</label>
+        <input type="text" id="c-title" placeholder="Short summary…" autocomplete="off">
+      </div>
+      <div class="field">
+        <label>Description (Markdown)</label>
+        <textarea class="desc-input" id="c-desc" placeholder="Details, context, links…"></textarea>
+      </div>
+      <div style="display:flex;gap:12px">
+        <div class="field" style="flex:1">
+          <label>Type</label>
+          <select id="c-type">
+            <option value="feature">Feature</option>
+            <option value="bug">Bug</option>
+            <option value="chore">Chore</option>
+            <option value="project">Project</option>
+          </select>
+        </div>
+        <div class="field" style="flex:1">
+          <label>Status</label>
+          <select id="c-status">
+            <option value="open">Open</option>
+            <option value="ongoing">Ongoing</option>
+            <option value="completed">Completed</option>
+            <option value="abandoned">Abandoned</option>
+          </select>
+        </div>
+        <div class="field" style="flex:1">
+          <label>Submitted by</label>
+          <select id="c-user">
+            <option value="kevin">kevin</option>
+            <option value="claude">claude</option>
+          </select>
+        </div>
+      </div>
+      <div style="display:flex;gap:12px">
+        <div class="field" style="flex:1">
+          <label>Parent ticket</label>
+          <select id="c-parent"><option value="">— none —</option></select>
+        </div>
+        <div class="field" style="width:100px;flex-shrink:0">
+          <label>Effort (1–10)</label>
+          <input type="number" id="c-effort" min="1" max="10" placeholder="—" autocomplete="off">
+        </div>
+      </div>
+    </div>
+    <div class="actions">
+      <button class="btn btn-subtle" onclick="closeCreate()">Cancel</button>
+      <button class="btn btn-primary" onclick="submitCreate()">Create</button>
+    </div>
+  </div>
+</div>
+
+<!-- New Environment modal -->
+<div class="overlay" id="env-create-overlay">
+  <div class="modal" style="min-width:400px" onclick="event.stopPropagation()">
+    <h3>New Environment</h3>
+    <div class="modal-fields">
+      <div class="field">
+        <label>Prefix <span class="muted" style="font-weight:400;font-size:11px">(e.g. PROJ, LAB — max 16 chars)</span></label>
+        <input type="text" id="env-prefix" placeholder="HOME" autocomplete="off" style="text-transform:uppercase" maxlength="16">
+      </div>
+      <div class="field">
+        <label>Name</label>
+        <input type="text" id="env-name" placeholder="My Project" autocomplete="off">
+      </div>
+      <div class="field">
+        <label>Description <span class="muted" style="font-weight:400;font-size:11px">(optional)</span></label>
+        <input type="text" id="env-desc" placeholder="Short description…" autocomplete="off">
+      </div>
+    </div>
+    <div class="actions">
+      <button class="btn btn-subtle" onclick="closeEnvCreate()">Cancel</button>
+      <button class="btn btn-primary" onclick="submitEnvCreate()">Create</button>
+    </div>
+  </div>
+</div>
+
+<!-- Edit modal -->
+<div class="overlay" id="edit-overlay">
+  <div class="modal" style="min-width:520px" onclick="event.stopPropagation()">
+    <h3>Edit Ticket <span id="e-human-id" class="muted" style="font-weight:400;font-size:13px"></span></h3>
+    <div class="modal-fields">
+      <div class="field">
+        <label>Title</label>
+        <input type="text" id="e-title" autocomplete="off">
+      </div>
+      <div class="field">
+        <label>Description (Markdown)</label>
+        <textarea class="desc-input" id="e-desc"></textarea>
+      </div>
+      <div style="display:flex;gap:12px">
+        <div class="field" style="flex:1">
+          <label>Type</label>
+          <select id="e-type">
+            <option value="feature">Feature</option>
+            <option value="bug">Bug</option>
+            <option value="chore">Chore</option>
+            <option value="project">Project</option>
+          </select>
+        </div>
+        <div class="field" style="flex:1">
+          <label>Status</label>
+          <select id="e-status">
+            <option value="open">Open</option>
+            <option value="ongoing">Ongoing</option>
+            <option value="completed">Completed</option>
+            <option value="abandoned">Abandoned</option>
+          </select>
+        </div>
+        <div class="field" style="flex:1">
+          <label>By</label>
+          <select id="e-user">
+            <option value="kevin">kevin</option>
+            <option value="claude">claude</option>
+          </select>
+        </div>
+      </div>
+      <div style="display:flex;gap:12px">
+        <div class="field" style="flex:1">
+          <label>Parent ticket</label>
+          <select id="e-parent"><option value="">— none —</option></select>
+        </div>
+        <div class="field" style="width:100px;flex-shrink:0">
+          <label>Effort (1–10)</label>
+          <input type="number" id="e-effort" min="1" max="10" placeholder="—" autocomplete="off">
+        </div>
+      </div>
+    </div>
+    <div class="actions">
+      <button class="btn btn-subtle" onclick="closeEdit()">Cancel</button>
+      <button class="btn btn-primary" onclick="submitEdit()">Save</button>
+    </div>
+  </div>
+</div>
+
+{% endblock %}
+
+{% block scripts %}
+<script>
+let activeFilters = new Set(['open', 'ongoing']);
+let activeTypeFilters = new Set();
+let currentSort = 'newest';
+let searchQuery = '';
+let currentTicket = null;
+let expandedParents = new Set();
+let currentAttach = null;
+let tickets = [];
+let attachments = [];
+let environments = [];
+let currentEnvironmentId = null;
+
+const STATUS_COLORS = {
+  open:      'badge-open',
+  ongoing:   'badge-ongoing',
+  completed: 'badge-completed',
+  abandoned: 'badge-abandoned',
+};
+const TYPE_COLORS = {
+  feature: 'badge-feature',
+  bug:     'badge-bug',
+  chore:   'badge-chore',
+  project: 'badge-project',
+};
+
+function statusBadge(s) {
+  return `<span class="badge ${STATUS_COLORS[s] || ''}">${s}</span>`;
+}
+function typeBadge(t) {
+  return `<span class="badge ${TYPE_COLORS[t] || ''}">${t}</span>`;
+}
+function effortPip(e) {
+  if (!e) return '';
+  const cls = e <= 3 ? 'effort-lo' : e <= 6 ? 'effort-md' : 'effort-hi';
+  return `<span class="effort-pip ${cls}" title="Effort ${e}/10">${e}</span>`;
+}
+
+function sortTickets(arr) {
+  const copy = [...arr];
+  if (currentSort === 'newest') {
+    copy.sort((a, b) => new Date(b.submitted_at) - new Date(a.submitted_at));
+  } else if (currentSort === 'oldest') {
+    copy.sort((a, b) => new Date(a.submitted_at) - new Date(b.submitted_at));
+  } else if (currentSort === 'effort-asc') {
+    copy.sort((a, b) => {
+      if (a.effort == null && b.effort == null) return 0;
+      if (a.effort == null) return 1;
+      if (b.effort == null) return -1;
+      return a.effort - b.effort;
+    });
+  } else if (currentSort === 'effort-desc') {
+    copy.sort((a, b) => {
+      if (a.effort == null && b.effort == null) return 0;
+      if (a.effort == null) return 1;
+      if (b.effort == null) return -1;
+      return b.effort - a.effort;
+    });
+  }
+  return copy;
+}
+
+function fmt_date(iso) {
+  if (!iso) return '—';
+  const d = new Date(iso);
+  return d.toLocaleDateString('en-IE', {year:'numeric',month:'short',day:'numeric'});
+}
+
+// ── Environment selector ─────────────────────────────────────────────────────
+
+async function loadEnvironments() {
+  try {
+    environments = await api('/api/environments');
+    if (!environments.length) { await loadTickets(); return; }
+    if (currentEnvironmentId === null || !environments.find(e => e.id === currentEnvironmentId)) {
+      currentEnvironmentId = environments[0].id;
+    }
+    renderEnvPill();
+    renderEnvDropdown();
+    await loadTickets();
+  } catch(err) {
+    toast(err.message, true);
+  }
+}
+
+function renderEnvPill() {
+  const env = environments.find(e => e.id === currentEnvironmentId);
+  document.getElementById('env-pill-name').textContent = env
+    ? `${env.prefix} · ${env.name}` : '…';
+}
+
+function renderEnvDropdown() {
+  const dd = document.getElementById('env-dropdown');
+  dd.innerHTML = environments.map(e => `
+    <div class="env-dd-item${e.id === currentEnvironmentId ? ' active' : ''}"
+         onclick="selectEnvironment(${e.id}); event.stopPropagation()">
+      <span class="env-prefix-badge">${escHtml(e.prefix)}</span>
+      <span style="flex:1">${escHtml(e.name)}</span>
+    </div>
+  `).join('') + `
+    <div class="env-dd-divider"></div>
+    <div class="env-dd-item" onclick="openEnvCreate(); closeEnvDropdown(); event.stopPropagation()">
+      <span style="color:var(--primary);font-weight:600">+ New environment</span>
+    </div>
+  `;
+}
+
+function toggleEnvDropdown() {
+  document.getElementById('env-dropdown').classList.toggle('open');
+}
+
+function closeEnvDropdown() {
+  document.getElementById('env-dropdown').classList.remove('open');
+}
+
+function selectEnvironment(id) {
+  currentEnvironmentId = id;
+  closeDetail();
+  closeEnvDropdown();
+  renderEnvPill();
+  renderEnvDropdown();
+  loadTickets();
+}
+
+function openEnvCreate() {
+  document.getElementById('env-prefix').value = '';
+  document.getElementById('env-name').value = '';
+  document.getElementById('env-desc').value = '';
+  document.getElementById('env-create-overlay').classList.add('active');
+  document.getElementById('env-prefix').focus();
+}
+
+function closeEnvCreate() {
+  document.getElementById('env-create-overlay').classList.remove('active');
+}
+
+async function submitEnvCreate() {
+  const prefix = document.getElementById('env-prefix').value.trim().toUpperCase();
+  const name   = document.getElementById('env-name').value.trim();
+  if (!prefix) { toast('Prefix is required', true); return; }
+  if (!name)   { toast('Name is required', true); return; }
+  try {
+    const created = await api('/api/environments', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({ prefix, name, description: document.getElementById('env-desc').value.trim() || null }),
+    });
+    environments.push(created);
+    currentEnvironmentId = created.id;
+    renderEnvPill();
+    renderEnvDropdown();
+    closeEnvCreate();
+    await loadTickets();
+    toast('Environment created');
+  } catch(err) {
+    toast(err.message, true);
+  }
+}
+
+async function loadTickets() {
+  try {
+    const parts = [
+      ...[...activeFilters].map(s => `status=${encodeURIComponent(s)}`),
+      ...[...activeTypeFilters].map(t => `type=${encodeURIComponent(t)}`),
+    ];
+    if (currentEnvironmentId !== null) parts.push(`environment_id=${currentEnvironmentId}`);
+    const url = parts.length ? `/api/tickets?${parts.join('&')}` : '/api/tickets';
+    tickets = await api(url);
+    renderList();
+    const ticketIds = new Set(tickets.map(t => t.id));
+    const rootCount = tickets.filter(t => !t.parent_id || !ticketIds.has(t.parent_id)).length;
+    const total = tickets.length;
+    document.getElementById('ticket-count').textContent =
+      rootCount === total
+        ? `${total} ticket${total !== 1 ? 's' : ''}`
+        : `${rootCount} ticket${rootCount !== 1 ? 's' : ''} (${total} total)`;
+  } catch(e) {
+    toast(e.message, true);
+  }
+}
+
+function renderTicketRow(t) {
+  const visibleChildIds = (t.child_ids || []).filter(cid => tickets.some(c => c.id === cid));
+  const childCount = visibleChildIds.length;
+  const expanded = expandedParents.has(t.id);
+  return `
+    <div class="ticket-row" onclick="showDetail(${t.id}); event.stopPropagation()">
+      <div class="tr-top">
+        <span class="tr-id">${t.human_id}</span>
+        <span class="tr-title">${escHtml(t.title)}</span>
+        ${childCount ? `<button class="child-toggle" onclick="toggleChildren(${t.id}); event.stopPropagation()" title="${expanded ? 'Collapse' : 'Expand'} child tickets">${expanded ? '▾' : '▸'}</button><span class="child-count">${childCount}</span>` : ''}
+      </div>
+      <div class="tr-bottom">
+        ${typeBadge(t.type)}
+        ${statusBadge(t.status)}
+        ${t.effort != null ? effortPip(t.effort) : ''}
+        <span class="tr-sep">·</span>
+        <span>${escHtml(t.user)}</span>
+        <span class="tr-sep">·</span>
+        <span>${fmt_date(t.submitted_at)}</span>
+        ${t.attachment_count ? `<span class="tr-sep">·</span><span class="att-chip">${t.attachment_count} file${t.attachment_count !== 1 ? 's' : ''}</span>` : ''}
+      </div>
+    </div>
+    ${childCount && expanded ? `<div class="child-rows">${visibleChildIds.map(cid => renderTicketRow(tickets.find(c => c.id === cid))).join('')}</div>` : ''}
+  `;
+}
+
+function toggleChildren(id) {
+  if (expandedParents.has(id)) expandedParents.delete(id);
+  else expandedParents.add(id);
+  renderList();
+}
+
+function matchesSearch(t) {
+  if (!searchQuery) return true;
+  const q = searchQuery.toLowerCase();
+  return t.title.toLowerCase().includes(q)
+    || (t.description || '').toLowerCase().includes(q)
+    || t.human_id.toLowerCase().includes(q);
+}
+
+function renderList() {
+  const list = document.getElementById('ticket-list');
+  const filtered = tickets.filter(matchesSearch);
+  if (!filtered.length) {
+    list.innerHTML = `<div class="empty">${searchQuery ? 'No tickets match your search.' : 'No tickets'}</div>`;
+    return;
+  }
+  const ticketIds = new Set(filtered.map(t => t.id));
+  const sorted = sortTickets(filtered);
+  const roots = sorted.filter(t => !t.parent_id || !ticketIds.has(t.parent_id));
+  list.innerHTML = roots.map(renderTicketRow).join('');
+}
+
+function showDetail(id) {
+  currentTicket = tickets.find(t => t.id === id);
+  if (!currentTicket) return;
+  const t = currentTicket;
+  document.getElementById('d-human-id').textContent = t.human_id;
+  document.getElementById('d-title').textContent = t.title;
+  document.getElementById('d-status-label').innerHTML = statusBadge(t.status);
+  document.getElementById('d-type-label').innerHTML = typeBadge(t.type);
+  document.getElementById('d-effort-label').innerHTML = t.effort != null ? effortPip(t.effort) + ` <span style="font-size:11px;color:var(--fg-sec)">/10</span>` : '<span class="muted">—</span>';
+  document.getElementById('d-user').textContent = t.user;
+  document.getElementById('d-submitted').textContent = fmt_date(t.submitted_at);
+  document.getElementById('d-guid').textContent = t.guid;
+
+  // Parent link
+  const parentWrap = document.getElementById('d-parent-wrap');
+  if (t.parent_id) {
+    const parent = tickets.find(p => p.id === t.parent_id);
+    const label = parent ? `${parent.human_id} ${parent.title}` : `#${t.parent_id}`;
+    document.getElementById('d-parent-link').textContent = label;
+    parentWrap.style.display = '';
+  } else {
+    parentWrap.style.display = 'none';
+  }
+
+  // Children list
+  const childWrap = document.getElementById('d-children-wrap');
+  if (t.child_ids && t.child_ids.length) {
+    const childList = document.getElementById('d-children-list');
+    childList.innerHTML = t.child_ids.map(cid => {
+      const child = tickets.find(c => c.id === cid);
+      const label = child ? `${child.human_id} ${escHtml(child.title)}` : `#${cid}`;
+      return `<a class="child-link" onclick="showDetail(${cid}); event.stopPropagation()">${label}</a>`;
+    }).join('');
+    childWrap.style.display = '';
+  } else {
+    childWrap.style.display = 'none';
+  }
+
+  const descEl = document.getElementById('d-description');
+  if (t.description) {
+    descEl.innerHTML = DOMPurify.sanitize(marked.parse(t.description));
+  } else {
+    descEl.innerHTML = '<span class="muted">No description.</span>';
+  }
+  const scriptWrap = document.getElementById('d-startup-wrap');
+  const scriptEl = document.getElementById('d-startup-script');
+  if (t.startup_script) {
+    scriptEl.textContent = t.startup_script;
+    scriptWrap.style.display = '';
+  } else {
+    scriptWrap.style.display = 'none';
+  }
+
+  document.getElementById('detail-panel').classList.add('open');
+  loadAttachments(t.id);
+}
+
+function copyStartupScript() {
+  const script = currentTicket?.startup_script;
+  if (!script) return;
+  navigator.clipboard.writeText(script).then(() => {
+    const btn = document.getElementById('copy-script-btn');
+    btn.textContent = 'Copied!';
+    setTimeout(() => { btn.textContent = 'Copy'; }, 1500);
+  }).catch(() => toast('Failed to copy', true));
+}
+
+function navToParent() {
+  if (currentTicket?.parent_id) showDetail(currentTicket.parent_id);
+}
+
+function closeDetail() {
+  document.getElementById('detail-panel').classList.remove('open');
+  currentTicket = null;
+  attachments = [];
+}
+
+// ── Create ────────────────────────────────────────────────────────────────────
+
+function _populateParentSelect(selectId, excludeId = null) {
+  const sel = document.getElementById(selectId);
+  sel.innerHTML = '<option value="">— none —</option>';
+  tickets
+    .filter(t => t.id !== excludeId)
+    .forEach(t => {
+      const opt = document.createElement('option');
+      opt.value = t.id;
+      opt.textContent = `${t.human_id} ${t.title}`;
+      sel.appendChild(opt);
+    });
+}
+
+function openCreate() {
+  document.getElementById('c-title').value = '';
+  document.getElementById('c-desc').value = '';
+  document.getElementById('c-type').value = 'feature';
+  document.getElementById('c-status').value = 'open';
+  document.getElementById('c-user').value = 'kevin';
+  document.getElementById('c-effort').value = '';
+  _populateParentSelect('c-parent');
+  document.getElementById('c-parent').value = '';
+  document.getElementById('create-overlay').classList.add('active');
+  document.getElementById('c-title').focus();
+}
+
+function closeCreate() {
+  document.getElementById('create-overlay').classList.remove('active');
+}
+
+async function submitCreate() {
+  const title = document.getElementById('c-title').value.trim();
+  if (!title) { toast('Title is required', true); return; }
+  try {
+    const parentVal = document.getElementById('c-parent').value;
+    const effortVal = document.getElementById('c-effort').value;
+    await api('/api/tickets', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({
+        title,
+        description: document.getElementById('c-desc').value || null,
+        type: document.getElementById('c-type').value,
+        status: document.getElementById('c-status').value,
+        user: document.getElementById('c-user').value,
+        parent_id: parentVal ? parseInt(parentVal) : null,
+        effort: effortVal ? parseInt(effortVal) : null,
+        environment_id: currentEnvironmentId,
+      }),
+    });
+    closeCreate();
+    await loadTickets();
+    toast('Ticket created');
+  } catch(e) {
+    toast(e.message, true);
+  }
+}
+
+// ── Edit ──────────────────────────────────────────────────────────────────────
+
+function openEdit() {
+  if (!currentTicket) return;
+  const t = currentTicket;
+  document.getElementById('e-human-id').textContent = t.human_id;
+  document.getElementById('e-title').value = t.title;
+  document.getElementById('e-desc').value = t.description || '';
+  document.getElementById('e-type').value = t.type;
+  document.getElementById('e-status').value = t.status;
+  document.getElementById('e-user').value = t.user;
+  document.getElementById('e-effort').value = t.effort != null ? t.effort : '';
+  _populateParentSelect('e-parent', t.id);
+  document.getElementById('e-parent').value = t.parent_id || '';
+  document.getElementById('edit-overlay').classList.add('active');
+  document.getElementById('e-title').focus();
+}
+
+function closeEdit() {
+  document.getElementById('edit-overlay').classList.remove('active');
+}
+
+async function submitEdit() {
+  if (!currentTicket) return;
+  const title = document.getElementById('e-title').value.trim();
+  if (!title) { toast('Title is required', true); return; }
+  try {
+    const parentVal = document.getElementById('e-parent').value;
+    const effortVal = document.getElementById('e-effort').value;
+    const updated = await api(`/api/tickets/${currentTicket.id}`, {
+      method: 'PATCH',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({
+        title,
+        description: document.getElementById('e-desc').value || null,
+        type: document.getElementById('e-type').value,
+        status: document.getElementById('e-status').value,
+        user: document.getElementById('e-user').value,
+        parent_id: parentVal ? parseInt(parentVal) : null,
+        effort: effortVal ? parseInt(effortVal) : null,
+      }),
+    });
+    closeEdit();
+    const idx = tickets.findIndex(t => t.id === currentTicket.id);
+    if (idx >= 0) tickets[idx] = updated;
+    currentTicket = updated;
+    renderList();
+    showDetail(updated.id);
+    toast('Ticket updated');
+  } catch(e) {
+    toast(e.message, true);
+  }
+}
+
+// ── Delete ────────────────────────────────────────────────────────────────────
+
+async function deleteTicket() {
+  if (!currentTicket) return;
+  if (!confirm(`Delete ${currentTicket.human_id}? This cannot be undone.`)) return;
+  try {
+    await api(`/api/tickets/${currentTicket.id}`, {method: 'DELETE'});
+    closeDetail();
+    await loadTickets();
+    toast('Ticket deleted');
+  } catch(e) {
+    toast(e.message, true);
+  }
+}
+
+// ── Attachments ───────────────────────────────────────────────────────────────
+
+async function loadAttachments(ticketId) {
+  document.getElementById('att-list').innerHTML = '';
+  document.getElementById('att-count-label').textContent = '';
+  try {
+    attachments = await api(`/api/tickets/${ticketId}/attachments`);
+    renderAttachments();
+  } catch(e) {
+    toast(e.message, true);
+  }
+}
+
+function renderAttachments() {
+  const list = document.getElementById('att-list');
+  const label = document.getElementById('att-count-label');
+  label.textContent = attachments.length ? `(${attachments.length})` : '';
+  if (!attachments.length) {
+    list.innerHTML = '<div style="font-size:12px;color:var(--fg-sec);padding:8px 0">None yet</div>';
+    return;
+  }
+  list.innerHTML = attachments.map(a => `
+    <div class="att-item">
+      <div class="att-item-info">
+        <div class="att-item-title">${escHtml(a.title)}</div>
+        <div class="att-item-meta">${escHtml(a.created_by)} · ${fmt_date(a.created_at)}</div>
+      </div>
+      <div class="att-item-actions">
+        <button class="btn btn-subtle btn-sm" onclick="openAttachView(${a.id}); event.stopPropagation()">View</button>
+        <button class="btn btn-subtle btn-sm" onclick="openAttachEdit(${a.id}); event.stopPropagation()">Edit</button>
+        <button class="btn btn-danger btn-sm" onclick="deleteAttach(${a.id}); event.stopPropagation()">✕</button>
+      </div>
+    </div>
+  `).join('');
+}
+
+function _syncAttachCountInList() {
+  const t = tickets.find(t => t.id === currentTicket?.id);
+  if (t) { t.attachment_count = attachments.length; renderList(); }
+}
+
+function openAttachView(id) {
+  currentAttach = attachments.find(a => a.id === id);
+  if (!currentAttach) return;
+  document.getElementById('av-title').textContent = currentAttach.title;
+  document.getElementById('av-meta').textContent =
+    `${currentAttach.created_by} · ${fmt_date(currentAttach.created_at)}`;
+  document.getElementById('av-content').innerHTML =
+    DOMPurify.sanitize(marked.parse(currentAttach.content));
+  document.getElementById('att-view-overlay').classList.add('active');
+}
+function closeAttachView() {
+  document.getElementById('att-view-overlay').classList.remove('active');
+}
+function openAttachEditFromView() {
+  const id = currentAttach?.id;
+  closeAttachView();
+  if (id != null) openAttachEdit(id);
+}
+
+function openAttachCreate() {
+  currentAttach = null;
+  document.getElementById('ae-overlay-title').textContent = 'New Attachment';
+  document.getElementById('ae-title').value = '';
+  document.getElementById('ae-content').value = '';
+  document.getElementById('ae-user').value = 'kevin';
+  document.getElementById('ae-user-field').style.display = '';
+  document.getElementById('att-edit-overlay').classList.add('active');
+  document.getElementById('ae-title').focus();
+}
+function openAttachEdit(id) {
+  currentAttach = attachments.find(a => a.id === id);
+  if (!currentAttach) return;
+  document.getElementById('ae-overlay-title').textContent = 'Edit Attachment';
+  document.getElementById('ae-title').value = currentAttach.title;
+  document.getElementById('ae-content').value = currentAttach.content;
+  document.getElementById('ae-user-field').style.display = 'none';
+  document.getElementById('att-edit-overlay').classList.add('active');
+  document.getElementById('ae-title').focus();
+}
+function closeAttachEdit() {
+  document.getElementById('att-edit-overlay').classList.remove('active');
+}
+
+async function submitAttach() {
+  const title = document.getElementById('ae-title').value.trim();
+  const content = document.getElementById('ae-content').value.trim();
+  if (!title)   { toast('Title is required', true); return; }
+  if (!content) { toast('Content is required', true); return; }
+  try {
+    if (currentAttach) {
+      const updated = await api(
+        `/api/tickets/${currentTicket.id}/attachments/${currentAttach.id}`,
+        { method: 'PATCH', headers: {'Content-Type':'application/json'},
+          body: JSON.stringify({ title, content }) }
+      );
+      const idx = attachments.findIndex(a => a.id === currentAttach.id);
+      if (idx >= 0) attachments[idx] = updated;
+      toast('Attachment updated');
+    } else {
+      const created = await api(
+        `/api/tickets/${currentTicket.id}/attachments`,
+        { method: 'POST', headers: {'Content-Type':'application/json'},
+          body: JSON.stringify({ title, content, created_by: document.getElementById('ae-user').value }) }
+      );
+      attachments.push(created);
+      toast('Attachment added');
+    }
+    closeAttachEdit();
+    renderAttachments();
+    _syncAttachCountInList();
+  } catch(e) { toast(e.message, true); }
+}
+
+async function deleteAttach(id) {
+  if (!confirm('Delete this attachment? This cannot be undone.')) return;
+  try {
+    await api(`/api/tickets/${currentTicket.id}/attachments/${id}`, { method: 'DELETE' });
+    attachments = attachments.filter(a => a.id !== id);
+    renderAttachments();
+    _syncAttachCountInList();
+    toast('Attachment deleted');
+  } catch(e) { toast(e.message, true); }
+}
+
+// ── Filters ───────────────────────────────────────────────────────────────────
+
+document.querySelectorAll('.filter-btn').forEach(btn => {
+  btn.addEventListener('click', e => {
+    e.stopPropagation();
+    const { filter, value } = btn.dataset;
+    const set = filter === 'type' ? activeTypeFilters : activeFilters;
+    if (set.has(value)) { set.delete(value); btn.classList.remove('active'); }
+    else                { set.add(value);    btn.classList.add('active'); }
+    closeDetail();
+    loadTickets();
+  });
+});
+
+document.querySelectorAll('.sort-btn').forEach(btn => {
+  btn.addEventListener('click', e => {
+    e.stopPropagation();
+    document.querySelectorAll('.sort-btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    currentSort = btn.dataset.sort;
+    renderList();
+  });
+});
+
+// ── Click outside to dismiss detail pane ─────────────────────────────────────
+
+document.addEventListener('click', () => {
+  if (document.getElementById('detail-panel').classList.contains('open')) {
+    closeDetail();
+  }
+});
+document.getElementById('detail-panel').addEventListener('click', e => e.stopPropagation());
+
+// ── Search ────────────────────────────────────────────────────────────────────
+
+document.getElementById('search-input').addEventListener('input', e => {
+  searchQuery = e.target.value.trim();
+  renderList();
+});
+
+// ── Keyboard ──────────────────────────────────────────────────────────────────
+
+document.addEventListener('keydown', e => {
+  if (e.key === 'Escape') {
+    if (document.getElementById('att-edit-overlay').classList.contains('active')) closeAttachEdit();
+    else if (document.getElementById('att-view-overlay').classList.contains('active')) closeAttachView();
+    else if (document.getElementById('env-create-overlay').classList.contains('active')) closeEnvCreate();
+    else if (document.getElementById('env-dropdown').classList.contains('open')) closeEnvDropdown();
+    else if (document.getElementById('edit-overlay').classList.contains('active')) closeEdit();
+    else if (document.getElementById('create-overlay').classList.contains('active')) closeCreate();
+    else if (searchQuery) {
+      searchQuery = '';
+      document.getElementById('search-input').value = '';
+      renderList();
+    } else closeDetail();
+    return;
+  }
+  if (e.key === '/' && document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') {
+    e.preventDefault();
+    document.getElementById('search-input').focus();
+  }
+});
+
+document.getElementById('create-overlay').addEventListener('click', e => {
+  if (e.target === e.currentTarget) closeCreate();
+});
+document.getElementById('edit-overlay').addEventListener('click', e => {
+  if (e.target === e.currentTarget) closeEdit();
+});
+document.getElementById('att-view-overlay').addEventListener('click', e => {
+  if (e.target === e.currentTarget) closeAttachView();
+});
+document.getElementById('att-edit-overlay').addEventListener('click', e => {
+  if (e.target === e.currentTarget) closeAttachEdit();
+});
+document.getElementById('env-create-overlay').addEventListener('click', e => {
+  if (e.target === e.currentTarget) closeEnvCreate();
+});
+
+document.addEventListener('click', () => closeEnvDropdown());
+document.getElementById('env-selector').addEventListener('click', e => e.stopPropagation());
+
+loadEnvironments();
+</script>
+{% endblock %}