backtrack/index.html at main · AlmostEfficient/backtrack · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="/src/styles.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>backtrack</title>
    <script type="module" src="/src/main.ts" defer></script>
  </head>
  <body>
    <div id="app">
      <aside id="sidebar">
        <div class="drag-region" data-tauri-drag-region></div>
        <div class="sidebar-header" data-tauri-drag-region>
          <div class="brand-mark" aria-hidden="true" data-tauri-drag-region>
            <svg viewBox="0 0 24 24" fill="none">
              <path d="M9 7 4 12l5 5" />
              <path d="M5 12h8.5a5.5 5.5 0 1 1 0 11H12" />
              <path d="M12 5.5h7M12 9h5" />
            </svg>
          </div>
          <div class="brand-copy" data-tauri-drag-region>
            <strong>Backtrack</strong>
            <span>Conversation archive</span>
          </div>
          <button id="refresh" class="refresh-btn" type="button" title="Refresh histories (⌃R)" aria-label="Refresh histories">
            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <path d="M20 11a8 8 0 1 0-2.3 5.7" />
              <path d="M20 5v6h-6" />
            </svg>
          </button>
        </div>
        <div class="search-wrap">
          <div class="search-row">
            <svg class="search-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <circle cx="11" cy="11" r="6.5" />
              <path d="m16 16 4 4" />
            </svg>
            <input id="search" type="search" placeholder="Search conversations" aria-label="Search all conversations" autocomplete="off" spellcheck="false" />
            <kbd class="search-shortcut">⌘K</kbd>
          </div>
          <div id="filters" class="filters">
            <select id="f-source" class="filter" title="Source">
              <option value="">All sources</option>
              <option value="claude">Claude Code</option>
              <option value="codex">Codex</option>
            </select>
            <select id="f-role" class="filter" title="Who spoke">
              <option value="">Anyone</option>
              <option value="user">You</option>
              <option value="assistant">Agent</option>
            </select>
            <select id="f-project" class="filter" title="Project">
              <option value="">All projects</option>
            </select>
            <select id="f-since" class="filter" title="When">
              <option value="">Any time</option>
              <option value="1">Today</option>
              <option value="7">Last 7 days</option>
              <option value="30">Last 30 days</option>
              <option value="90">Last 90 days</option>
            </select>
          </div>
        </div>
        <div class="list-heading">
          <span>Your projects</span>
          <span id="project-count"></span>
        </div>
        <nav id="list" class="list" tabindex="0"></nav>
        <div id="project-picker" class="project-picker hidden">
          <div class="project-picker-row">
            <svg class="search-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <circle cx="11" cy="11" r="6.5" />
              <path d="m16 16 4 4" />
            </svg>
            <input id="project-search" type="search" placeholder="Find a project to add" aria-label="Find a project to add" autocomplete="off" spellcheck="false" />
          </div>
          <div id="project-results" class="project-results hidden"></div>
        </div>
        <button id="project-picker-toggle" class="project-picker-toggle" type="button" aria-label="Add a project" aria-expanded="false" aria-controls="project-picker" title="Add a project">
          <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path d="M12 5v14M5 12h14" />
          </svg>
        </button>
      </aside>
      <div id="sidebar-resizer" class="sidebar-resizer" role="separator" aria-label="Resize project sidebar" aria-orientation="vertical" aria-valuemin="220" aria-valuemax="520" aria-valuenow="328" tabindex="0" title="Drag to resize · Double-click to reset"></div>
      <main id="main">
        <div id="tabbar" class="tabbar"></div>
        <div id="find" class="find hidden">
          <input id="find-input" type="text" placeholder="Find in session" autocomplete="off" spellcheck="false" />
          <span id="find-count" class="find-count">0/0</span>
          <button id="find-prev" class="find-btn" type="button" aria-label="Previous match" title="Previous (⇧⏎)">↑</button>
          <button id="find-next" class="find-btn" type="button" aria-label="Next match" title="Next (⏎)">↓</button>
          <button id="find-close" class="find-btn" type="button" aria-label="Close find" title="Close (Esc)">✕</button>
        </div>
        <header id="transcript-head" data-tauri-drag-region></header>
        <div id="transcript" class="transcript" tabindex="0"></div>
        <footer id="hint" class="hint">
          <span><kbd>j</kbd><kbd>k</kbd> move</span>
          <span><kbd>⌘F</kbd> find</span>
          <span><kbd>[</kbd><kbd>]</kbd> sessions</span>
          <span class="hint-more"><kbd>?</kbd> shortcuts</span>
        </footer>
      </main>
    </div>

    <dialog id="delete-dialog" class="delete-dialog" aria-labelledby="delete-title" aria-describedby="delete-copy">
      <form method="dialog" class="delete-card">
        <h2 id="delete-title">Delete this session?</h2>
        <p id="delete-copy">This permanently removes the conversation log from disk.</p>
        <p id="delete-error" class="delete-error" role="alert"></p>
        <div class="delete-actions">
          <button value="cancel" class="dialog-btn" type="submit">Cancel</button>
          <button id="delete-confirm" value="confirm" class="dialog-btn danger" type="submit">Delete session</button>
        </div>
      </form>
    </dialog>

    <div id="legend" class="legend hidden" role="dialog" aria-modal="true" aria-labelledby="keyboard-title">
      <div class="legend-card">
        <div class="legend-kicker">Backtrack</div>
        <h2 id="keyboard-title">Keyboard shortcuts</h2>
        <div class="legend-grid">
          <kbd>⌘K</kbd><span>Search everything</span>
          <kbd>⌘F</kbd><span>Find within open session</span>
          <kbd>⌃R</kbd><span>Refresh histories</span>
          <kbd>Tab</kbd><span>Switch between list and transcript</span>
          <kbd>↑ / ↓</kbd><span>Move in list / messages</span>
          <kbd>j / k</kbd><span>Next / previous message</span>
          <kbd>J / K</kbd><span>Next / previous user message</span>
          <kbd>w</kbd><span>Expand / collapse selected worklog</span>
          <kbd>→ / ⏎</kbd><span>Open selected (expand / open session)</span>
          <kbd>←</kbd><span>Collapse project</span>
          <kbd>[ / ]</kbd><span>Previous / next session in project</span>
          <kbd>⌃Tab / ⌃⇧Tab</kbd><span>Next / previous tab</span>
          <kbd>⌃PgDn / ⌃PgUp</kbd><span>Next / previous tab</span>
          <kbd>⌘W</kbd><span>Close current tab</span>
          <kbd>⌘+ / ⌘-</kbd><span>Increase / decrease text size</span>
          <kbd>⌘0</kbd><span>Reset text size</span>
          <kbd>⏎ / ⇧⏎</kbd><span>Next / previous find match</span>
          <kbd>Esc</kbd><span>Close find · clear search · back out</span>
          <kbd>?</kbd><span>Toggle this help</span>
        </div>
        <div class="legend-foot">Esc to close</div>
      </div>
    </div>
  </body>
</html>