loop-canvas 0.1.4 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/cli.mjs +10 -8
  2. package/package.json +1 -1
  3. package/public/app.css +1 -1
  4. package/public/app.js +104 -81
  5. package/public/index.html +14 -17
  6. package/server.mjs +26 -21
  7. package/skills/loop-canvas/SKILL.md +8 -1
package/public/index.html CHANGED
@@ -38,12 +38,13 @@
38
38
  <div class="brand">
39
39
  <span class="logo" aria-hidden="true" title="Loop"><svg viewBox="0 0 32 32"><rect x="3" y="3" width="26" height="26" rx="7"/><circle cx="16" cy="16" r="6.5"/></svg></span>
40
40
  <span id="canvas-name" class="canvas-name" title="Rename canvas"></span>
41
+ <button id="history-btn" class="hist-btn" title="Canvas history: bring back the canvas as it was" hidden><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 12a8.5 8.5 0 1 0 2.6-6.1"/><path d="M3.5 4v4.5H8"/><path d="M12 7.5V12l3 2"/></svg></button>
41
42
  </div>
42
43
  <div class="top-right">
43
44
  <div id="presence" class="presence"></div>
44
45
  <button id="comments-btn" class="pill comments-btn" title="All comments"><i data-i="comments"></i><span id="comments-count"></span></button>
45
- <button id="agent-pill" class="pill" title="Agent connection">
46
- <span class="agent-dot"></span><span id="agent-label">Agent</span>
46
+ <button id="agent-pill" class="pill">
47
+ <span class="agent-mark"><svg class="ctx-ring" viewBox="0 0 24 24" aria-hidden="true" hidden><circle class="cr-track" cx="12" cy="12" r="10.5"/><circle class="cr-fill" cx="12" cy="12" r="10.5" pathLength="100"/></svg><span class="agent-logo"></span><span class="agent-dot"></span></span><span id="agent-label">Agent</span><span id="reconnect-btn" class="reconnect-btn" role="button" tabindex="0" hidden>Reconnect</span>
47
48
  </button>
48
49
  <button id="update-pill" class="pill update-pill" hidden></button>
49
50
  <button id="share-btn" class="pill share-btn">Share</button>
@@ -51,19 +52,15 @@
51
52
  </header>
52
53
 
53
54
  <div id="agent-menu" class="menu" hidden>
54
- <div class="menu-title">Comments go to</div>
55
- <button class="menu-item" data-mode="headless" data-runner="claude">
56
- <span class="radio"></span>
57
- <span><b>Claude Code, run by Loop</b><small>Each comment starts Claude Code in the background on that frame. Hands-free.</small></span>
58
- </button>
59
- <button class="menu-item" data-mode="headless" data-runner="codex">
60
- <span class="radio"></span>
61
- <span><b>Codex, run by Loop</b><small>Each comment starts Codex in the background on that frame. Hands-free.</small></span>
62
- </button>
63
- <button class="menu-item" data-mode="inbox">
64
- <span class="radio"></span>
65
- <span><b>The chat that launched Loop</b><small>Comments go to that chat, with everything it already knows, and it replies here. If the chat isn't listening, comments carry on in the background.</small></span>
66
- </button>
55
+ <div id="am-card"></div>
56
+ <div class="am-sec">
57
+ <div class="am-title">Comments go to</div>
58
+ <div class="am-opts">
59
+ <button class="am-opt" data-mode="inbox"><span class="am-ic am-chat"></span><span class="am-txt"><b>Your chat</b><small>Knows the project, replies here</small></span><span class="am-check"></span></button>
60
+ <button class="am-opt" data-mode="headless" data-runner="claude"><span class="am-ic" data-logo="claude"></span><span class="am-txt"><b>Claude Code</b><small>Runs in the background</small></span><span class="am-check"></span></button>
61
+ <button class="am-opt" data-mode="headless" data-runner="codex"><span class="am-ic" data-logo="codex"></span><span class="am-txt"><b>Codex</b><small>Runs in the background</small></span><span class="am-check"></span></button>
62
+ </div>
63
+ </div>
67
64
  <div id="agent-allowed" class="agent-allowed" hidden></div>
68
65
  </div>
69
66
 
@@ -96,7 +93,7 @@
96
93
 
97
94
  <nav id="toolbar" aria-label="Tools">
98
95
  <div class="tb-group"><button id="move-btn" data-tool="select" title="Select (V)"><i data-i="select"></i></button><button class="tb-caret" id="move-caret" title="Select or Hand"><i data-i="down"></i></button></div>
99
- <button data-tool="use" title="Interact (I)"><i data-i="point"></i></button>
96
+ <button data-tool="use" title="Interact (X)"><i data-i="point"></i></button>
100
97
  <button data-tool="pen" title="Draw (P)"><i data-i="pen"></i></button>
101
98
  <button data-tool="erase" title="Erase marks (E)"><i data-i="erase"></i></button>
102
99
  <button data-tool="comment" title="Point & comment (C)"><i data-i="comment"></i></button>
@@ -116,7 +113,7 @@
116
113
  <div id="zoom">
117
114
  <button id="theme-btn" title="Light or dark (⇧D)"><i data-i="sun"></i></button>
118
115
  <button id="zoom-out" title="Zoom out (−)">−</button>
119
- <button id="zoom-level" title="Fit all (Shift+1)">100%</button>
116
+ <button id="zoom-level" title="Fit the selection, or everything (⇧2 / ⇧1)">100%</button>
120
117
  <button id="zoom-in" title="Zoom in (+)">+</button>
121
118
  </div>
122
119