@youtyan/code-viewer 0.1.35 → 0.1.37

package/web/index.html

@@ -146,6 +146,26 @@
       <button id="annotation-clear" type="button" title="delete all annotations">clear</button>
       <button id="annotation-panel-close" type="button">close</button>
     </div>
+    <div id="annotation-player" hidden>
+      <button id="annotation-player-toggle" type="button" title="Play / Pause">▶</button>
+      <button id="annotation-player-prev" type="button" title="Previous">‹</button>
+      <button id="annotation-player-next" type="button" title="Next">›</button>
+      <span id="annotation-player-progress"></span>
+      <button id="annotation-player-mute" type="button" title="Mute">🔊</button>
+      <select id="annotation-player-rate" title="Speed" aria-label="Playback speed">
+        <option value="0.5">0.5x</option>
+        <option value="0.75">0.75x</option>
+        <option value="1" selected>1x</option>
+        <option value="1.25">1.25x</option>
+        <option value="1.5">1.5x</option>
+        <option value="2">2x</option>
+      </select>
+    </div>
+    <div class="annotation-list-head">
+      <strong>Sessions</strong>
+      <span id="annotation-list-count"></span>
+    </div>
+    <div id="annotation-sessions"></div>
     <div id="annotation-detail" hidden>
       <div class="annotation-detail-head">
         <span id="annotation-detail-session"></span>
@@ -157,11 +177,6 @@
       <a id="annotation-detail-location" href="#"></a>
       <div id="annotation-detail-body" class="markdown-body"></div>
     </div>
-    <div class="annotation-list-head">
-      <strong>Sessions</strong>
-      <span id="annotation-list-count"></span>
-    </div>
-    <div id="annotation-sessions"></div>
   </aside>
 
   <main id="content">

package/web/style.css

@@ -4051,6 +4051,63 @@ body.annotation-panel-open #content {
   color: var(--danger);
   border-color: var(--danger);
 }
+/* ---- Annotation playback toolbar ---- */
+#annotation-player {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-bottom: 1px solid var(--border);
+  font-size: 12px;
+  flex-shrink: 0;
+}
+#annotation-player[hidden] { display: none; }
+#annotation-player-toggle,
+#annotation-player-prev,
+#annotation-player-next,
+#annotation-player-mute {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-soft);
+  color: var(--fg-muted);
+  font-size: 12px;
+  padding: 2px 8px;
+  cursor: pointer;
+  line-height: 1;
+}
+#annotation-player-toggle:hover,
+#annotation-player-prev:hover,
+#annotation-player-next:hover,
+#annotation-player-mute:hover {
+  border-color: var(--border-strong);
+  background: var(--bg-mute);
+  color: var(--fg);
+}
+#annotation-player-progress {
+  margin-left: auto;
+  opacity: .7;
+  font-variant-numeric: tabular-nums;
+}
+#annotation-player.playing #annotation-player-toggle {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+#annotation-player-rate {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-soft);
+  color: var(--fg);
+  font: inherit;
+  font-size: 12px;
+  padding: 2px 4px;
+  cursor: pointer;
+}
+#annotation-player-rate:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-muted);
+}
+/* ---- end annotation playback toolbar ---- */
 #annotation-sessions {
   flex: 1;
   overflow-y: auto;
@@ -4076,13 +4133,29 @@ body.annotation-panel-open #content {
   font-size: 12px;
 }
 .annotation-session {
-  margin-bottom: 14px;
+  /* Each session is a distinct card: a bordered group whose header doubles
+     as the "show this walkthrough inline" toggle. */
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+.annotation-session.active {
+  border-color: var(--accent);
 }
 .annotation-session-head {
   display: flex;
   align-items: center;
   gap: 6px;
-  margin: 6px 0;
+  margin: 0;
+  padding: 4px 6px;
+  background: var(--bg-soft);
+  border-bottom: 1px solid var(--border);
+}
+.annotation-session.active .annotation-session-head {
+  background: var(--accent-subtle);
+  border-bottom-color: var(--accent);
 }
 .annotation-session-select {
   flex: 1;
@@ -4093,39 +4166,46 @@ body.annotation-panel-open #content {
   font-size: 12px;
   font-weight: 600;
   text-align: left;
-  padding: 2px 4px;
+  padding: 3px 4px;
   border-radius: 6px;
   cursor: pointer;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.annotation-session-select:hover {
-  background: var(--accent-subtle);
-}
 .annotation-session.active .annotation-session-select {
-  background: var(--accent-subtle);
   color: var(--accent);
 }
+.annotation-session-time {
+  flex: none;
+  font-size: 10px;
+  color: var(--fg-subtle);
+  white-space: nowrap;
+}
 .annotation-entries {
   list-style: none;
   margin: 0;
-  padding: 0;
+  padding: 4px;
   counter-reset: annotation-step;
 }
 .annotation-entries li {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 4px;
   border-radius: 6px;
   counter-increment: annotation-step;
 }
+.annotation-entries li:hover {
+  background: var(--bg-soft);
+}
 .annotation-entries li.active {
   background: var(--accent-subtle);
 }
 .annotation-entry-open {
   flex: 1;
-  display: block;
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr);
+  column-gap: 4px;
   text-align: left;
   border: 0;
   background: none;
@@ -4135,17 +4215,28 @@ body.annotation-panel-open #content {
   min-width: 0;
 }
 .annotation-entry-open::before {
-  content: counter(annotation-step) ". ";
+  content: counter(annotation-step);
+  grid-row: 1 / span 2;
   color: var(--fg-subtle);
   font-size: 11px;
+  line-height: 1.6;
+  text-align: center;
+}
+.annotation-entries li.active .annotation-entry-open::before {
+  color: var(--accent);
+  font-weight: 600;
 }
 .annotation-entry-location {
+  grid-column: 2;
   font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
   font-size: 11px;
   color: var(--accent);
-  word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .annotation-entry-summary {
+  grid-column: 2;
   display: block;
   font-size: 12px;
   color: var(--fg-muted);
@@ -4153,6 +4244,21 @@ body.annotation-panel-open #content {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* Per-row actions stay quiet until the row (or the panel item) is hovered,
+   so the list reads as content, not as a wall of trash cans. */
+.annotation-session-head .annotation-icon-btn,
+.annotation-entries li .annotation-icon-btn {
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+.annotation-session-head:hover .annotation-icon-btn,
+.annotation-entries li:hover .annotation-icon-btn,
+.annotation-icon-btn:focus-visible {
+  opacity: 1;
+}
+.annotation-entries li .annotation-icon-btn {
+  margin-right: 4px;
+}
 .annotation-delete {
   border: 1px solid transparent;
   border-radius: 6px;
@@ -4168,11 +4274,15 @@ body.annotation-panel-open #content {
 }
 
 #annotation-detail {
+  /* Docked under the session list with a FIXED height: the list above never
+     moves when the entry body is longer or shorter, so click targets stay
+     put while stepping through a walkthrough. */
   flex: none;
   display: flex;
   flex-direction: column;
-  max-height: 55%;
-  border-bottom: 1px solid var(--border);
+  height: 45%;
+  min-height: 220px;
+  border-top: 1px solid var(--border);
   background: var(--bg-soft);
 }
 .annotation-detail-head {
@@ -4223,6 +4333,7 @@ body.annotation-panel-open #content {
   text-decoration: underline;
 }
 #annotation-detail-body {
+  flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
   padding: 8px 12px 12px;
@@ -4242,6 +4353,12 @@ body.annotation-panel-open #content {
   background: var(--bg-soft);
 }
 .gdp-annotation-inline {
+  /* The code table can scroll horizontally; keep the note pinned to the
+     visible area (width is synced to the scroll container in
+     annotations-ui.ts). */
+  position: sticky;
+  left: 8px;
+  box-sizing: border-box;
   margin: 4px 8px;
   padding: 8px 12px;
   border: 1px solid var(--border);
@@ -4271,3 +4388,75 @@ body.annotation-panel-open #content {
 .gdp-annotation-inline-body p:last-child {
   margin-bottom: 0;
 }
+
+/* Annotation editing + AI-ready reference copy */
+.gdp-annotation-inline {
+  position: sticky;
+}
+.annotation-icon-btn {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--fg-muted);
+  line-height: 1;
+  padding: 3px 6px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+}
+.annotation-icon-btn svg {
+  width: 13px;
+  height: 13px;
+  display: block;
+}
+.annotation-icon-btn:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+.annotation-icon-btn.copied {
+  color: var(--success);
+  border-color: var(--success);
+}
+.annotation-icon-btn.failed {
+  color: var(--danger);
+  border-color: var(--danger);
+}
+.gdp-annotation-inline-copy {
+  float: right;
+  margin-left: 8px;
+}
+.annotation-edit-form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  height: 100%;
+}
+.annotation-edit-form input,
+.annotation-edit-form textarea {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--fg);
+  font-size: 12px;
+  padding: 6px 8px;
+}
+.annotation-edit-form textarea {
+  flex: 1;
+  resize: vertical;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+}
+.annotation-edit-buttons {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.gdp-annotation-spacer td {
+  padding: 0;
+  background: var(--bg-soft);
+}
+.gdp-annotation-spacer td > div {
+  height: 0;
+}