@drscrewdriver/dsh-better-display 0.3.3-fork.1

package/src/client/StickyLane.tsx

@@ -0,0 +1,34 @@
+import { useLayoutEffect, useRef } from 'react';
+import type { ReactNode } from 'react';
+
+/** Publish real lane geometry; wrapped labels must not collide with statistics. */
+export function StickyLane({ kind, className, children }: { kind: 'toolbar' | 'status'; className: string; children: ReactNode }) {
+  const ref = useRef<HTMLDivElement>(null);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    const scope = el?.closest<HTMLElement>(kind === 'toolbar' ? '[data-dsh-better-display]' : '[data-reader-turn]');
+    if (!el || !scope) return;
+    const property = kind === 'toolbar' ? '--reader-toolbar-height' : '--reader-status-height';
+    const update = () => {
+      scope.style.setProperty(property, `${el.getBoundingClientRect().height}px`);
+      if (kind !== 'toolbar') return;
+      // The status lane is sized as calc(100% - --reader-control-width), so this
+      // must reserve the WHOLE control group. Measuring only the first button
+      // left every later control painted over by the status lane.
+      const controls = el.querySelectorAll('button');
+      let width = 80;
+      if (controls.length > 0) {
+        const first = controls[0]!.getBoundingClientRect();
+        const last = controls[controls.length - 1]!.getBoundingClientRect();
+        width = last.right - first.left;
+      }
+      scope.style.setProperty('--reader-control-width', `${width + 28}px`);
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(el);
+    if (kind === 'toolbar') for (const control of el.querySelectorAll('button')) observer.observe(control);
+    return () => { observer.disconnect(); scope.style.removeProperty(property); if (kind === 'toolbar') scope.style.removeProperty('--reader-control-width'); };
+  }, [kind]);
+  return <div ref={ref} className={className} data-reader-lane={kind} data-ud-check={kind === 'toolbar' ? 'reader-toolbar' : undefined}>{children}</div>;
+}

package/src/client/TimelineRail.module.css

@@ -0,0 +1,170 @@
+/* Zero-height sticky slot: floats over the transcript right gutter */
+.slot {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  height: 0;
+  pointer-events: none;
+}
+
+.frame {
+  --turn-rail-band: calc(
+    var(--dsh-conversation-viewport-height, 100dvh) - var(--dsh-composer-height, 152px)
+  );
+  --turn-preview-height: 100px;
+
+  position: absolute;
+  top: calc(var(--turn-rail-band) / 2);
+  /* .root is the containing block (container-type creates layout containment)
+     and already reserves the right gutter via its own padding, so a small
+     positive inset keeps the rail inside the gutter, clear of the text. */
+  right: 6px;
+  width: 26px;
+  height: min(
+    var(--turn-natural-height),
+    max(0px, calc(var(--turn-rail-band) - 64px)),
+    420px
+  );
+  cursor: pointer;
+  pointer-events: auto;
+  transform: translateY(-50%);
+  transition: height 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.scroller {
+  position: absolute;
+  inset: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+}
+
+.scroller::-webkit-scrollbar {
+  display: none;
+}
+
+.fadeTop {
+  mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 100%);
+  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 100%);
+}
+
+.fadeBottom {
+  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), transparent 100%);
+  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), transparent 100%);
+}
+
+.fadeTop.fadeBottom {
+  mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
+  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
+}
+
+.marks {
+  position: relative;
+  height: var(--turn-natural-height);
+}
+
+.markPosition {
+  position: absolute;
+  top: calc(var(--turn-natural-position) + var(--turn-rail-inset));
+  right: 0;
+  left: 0;
+  height: 12px;
+  transform: translateY(-50%);
+  transition: top 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.mark {
+  position: absolute;
+  inset: 0 0 0 auto;
+  width: 24px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.tick {
+  border-radius: 2px;
+  flex: none;
+  transition: width 100ms cubic-bezier(0.16, 1, 0.3, 1),
+              height 100ms cubic-bezier(0.16, 1, 0.3, 1),
+              opacity 100ms ease,
+              background-color 140ms ease;
+}
+
+.markBusy .tick {
+  animation: markBusyPulse 1s ease-in-out infinite alternate;
+}
+
+@keyframes markBusyPulse {
+  from { width: 8px; opacity: 0.4; }
+  to { width: 18px; opacity: 1; }
+}
+
+.preview {
+  position: absolute;
+  top: clamp(
+    0px,
+    calc(
+      var(--turn-natural-position) + var(--turn-rail-inset)
+      - var(--turn-scroll-top, 0px) - var(--turn-preview-height) / 2
+    ),
+    calc(100% - var(--turn-preview-height))
+  );
+  right: calc(100% + 10px);
+  box-sizing: border-box;
+  width: min(280px, calc(100cqw - 120px));
+  max-height: var(--turn-preview-height);
+  overflow: hidden;
+  padding: 10px 12px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 10px;
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-base);
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
+  backdrop-filter: blur(12px);
+  pointer-events: none;
+  animation: previewFadeIn 120ms ease-out;
+  transition: top 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  z-index: 40;
+}
+
+@keyframes previewFadeIn {
+  from { opacity: 0; transform: translateX(4px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+.previewPrompt {
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+}
+
+.previewResponse {
+  margin-top: 4px;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+  line-height: 16px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+}
+
+@media (max-width: 960px) {
+  .slot {
+    display: none !important;
+  }
+}

package/src/client/TimelineRail.tsx

@@ -0,0 +1,262 @@
+import {
+  memo, useEffect, useId, useRef, useState,
+  type CSSProperties, type MouseEvent, type PointerEvent,
+} from 'react';
+import type { TimelineItem } from './timeline.js';
+import css from './TimelineRail.module.css';
+
+interface TimelineRailProps {
+  items: readonly TimelineItem[];
+  activeTurn: number | null;
+  busyTurn?: number | null;
+  onNavigate: (item: TimelineItem) => void;
+}
+
+const TURN_SPACING_PX = 12;
+const RAIL_INSET_PX = 6;
+const FADE_PX = 24;
+
+type TurnPositionStyle = CSSProperties & {
+  readonly '--turn-natural-position': string;
+};
+
+type TurnFrameStyle = CSSProperties & {
+  readonly '--turn-natural-height': string;
+  readonly '--turn-rail-inset': string;
+  readonly '--turn-scroll-top': string;
+};
+
+function itemPosition(index: number): TurnPositionStyle {
+  return { '--turn-natural-position': `${index * TURN_SPACING_PX}px` };
+}
+
+function frameStyle(count: number, scrollTop: number): TurnFrameStyle {
+  return {
+    '--turn-natural-height': `${(count - 1) * TURN_SPACING_PX + 2 * RAIL_INSET_PX}px`,
+    '--turn-rail-inset': `${RAIL_INSET_PX}px`,
+    '--turn-scroll-top': `${scrollTop}px`,
+  };
+}
+
+function itemIndexAtPointer(
+  items: readonly TimelineItem[],
+  frame: HTMLElement,
+  scrollTop: number,
+  clientY: number,
+): number {
+  const rect = frame.getBoundingClientRect();
+  const offset = clientY - rect.top + scrollTop - RAIL_INSET_PX;
+  return Math.max(0, Math.min(items.length - 1, Math.round(offset / TURN_SPACING_PX)));
+}
+
+interface RailScrollState {
+  readonly top: number;
+  readonly canScrollUp: boolean;
+  readonly canScrollDown: boolean;
+}
+
+const RAIL_AT_REST: RailScrollState = { top: 0, canScrollUp: false, canScrollDown: false };
+
+function railScrollState(scroller: HTMLElement): RailScrollState {
+  const top = scroller.scrollTop;
+  return {
+    top,
+    canScrollUp: top > 1,
+    canScrollDown: top < scroller.scrollHeight - scroller.clientHeight - 1,
+  };
+}
+
+export const TimelineRail = memo(function TimelineRail({
+  items,
+  activeTurn,
+  busyTurn,
+  onNavigate,
+}: TimelineRailProps) {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const [scrollState, setScrollState] = useState<RailScrollState>(RAIL_AT_REST);
+  const scrollerRef = useRef<HTMLDivElement | null>(null);
+  const pointerInsideRef = useRef(false);
+  const previewId = useId();
+
+  const syncScrollState = () => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+    const next = railScrollState(scroller);
+    setScrollState(cur => (cur.top === next.top && cur.canScrollUp === next.canScrollUp && cur.canScrollDown === next.canScrollDown ? cur : next));
+  };
+
+  useEffect(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller || typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(syncScrollState);
+    observer.observe(scroller);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(syncScrollState, [items.length]);
+
+  // Keep active mark visible
+  useEffect(() => {
+    const scroller = scrollerRef.current;
+    const index = items.findIndex(item => item.turn === activeTurn);
+    if (!scroller || index < 0 || pointerInsideRef.current) return;
+    const markTop = index * TURN_SPACING_PX + RAIL_INSET_PX;
+    const viewTop = scroller.scrollTop;
+    const viewHeight = scroller.clientHeight;
+    if (viewHeight <= 0 || (markTop >= viewTop + FADE_PX && markTop <= viewTop + viewHeight - FADE_PX)) return;
+    const target = Math.max(0, markTop - viewHeight / 2);
+    if (typeof scroller.scrollTo === 'function') {
+      scroller.scrollTo({ top: target, behavior: 'smooth' });
+    } else {
+      scroller.scrollTop = target;
+    }
+    syncScrollState();
+  }, [activeTurn, items]);
+
+  if (items.length < 2) return null;
+
+  const preview = hoveredIndex !== null && hoveredIndex >= 0 ? items[hoveredIndex] : undefined;
+  const previewPosition = hoveredIndex !== null && hoveredIndex >= 0 ? itemPosition(hoveredIndex) : undefined;
+
+  const onPointerMove = (event: PointerEvent<HTMLElement>) => {
+    const scroller = scrollerRef.current;
+    const scrollTop = scroller?.scrollTop ?? 0;
+    const idx = itemIndexAtPointer(items, event.currentTarget, scrollTop, event.clientY);
+    setHoveredIndex(idx);
+  };
+
+  const onPointerLeave = () => {
+    pointerInsideRef.current = false;
+    setHoveredIndex(null);
+  };
+
+  const navigateAtPointer = (event: MouseEvent<HTMLElement>) => {
+    const scroller = scrollerRef.current;
+    const scrollTop = scroller?.scrollTop ?? 0;
+    const idx = itemIndexAtPointer(items, event.currentTarget, scrollTop, event.clientY);
+    const item = items[idx];
+    if (item !== undefined) onNavigate(item);
+  };
+
+  const fadeClasses = [css.scroller];
+  if (scrollState.canScrollUp) fadeClasses.push(css.fadeTop);
+  if (scrollState.canScrollDown) fadeClasses.push(css.fadeBottom);
+
+  return (
+    <div className={css.slot}>
+      <nav
+        className={css.frame}
+        style={frameStyle(items.length, scrollState.top)}
+        aria-label="轮次导航时间轴"
+        onClick={navigateAtPointer}
+        onPointerMove={onPointerMove}
+        onPointerEnter={() => { pointerInsideRef.current = true; }}
+        onPointerLeave={onPointerLeave}
+        onMouseDown={event => { event.preventDefault(); }}
+      >
+        <div
+          ref={scrollerRef}
+          className={fadeClasses.join(' ')}
+          onScroll={syncScrollState}
+        >
+          <div className={css.marks}>
+            {items.map((item, index) => {
+              const isBusy = busyTurn === item.turn;
+              const isActive = activeTurn === item.turn;
+              const isUnloaded = item.anchor.kind === 'unloaded';
+
+              // Wave calculation: peak at cursor, smoothly tapering off in width and height
+              let width = isUnloaded ? 6 : 8;
+              let height = 2;
+              let opacity = isUnloaded ? 0.3 : 0.45;
+              let background = 'var(--dsw-alias-label-tertiary)';
+
+              if (hoveredIndex !== null) {
+                const diff = Math.abs(index - hoveredIndex);
+                if (diff === 0) {
+                  // Cursor peak (最长最高)
+                  width = 26;
+                  height = 2.8;
+                  opacity = 1.0;
+                  background = 'var(--dsw-alias-label-primary)';
+                } else if (diff === 1) {
+                  // 旁边第 1 阶 (次长次高)
+                  width = 18;
+                  height = 2.2;
+                  opacity = 0.8;
+                  background = 'var(--dsw-alias-label-primary)';
+                } else if (diff === 2) {
+                  // 旁边第 2 阶 (继续变矮变短)
+                  width = 13;
+                  height = 1.8;
+                  opacity = 0.6;
+                  background = 'var(--dsw-alias-label-secondary)';
+                } else if (diff === 3) {
+                  // 旁边第 3 阶 (平缓过渡)
+                  width = 9;
+                  height = 1.6;
+                  opacity = 0.45;
+                  background = 'var(--dsw-alias-label-tertiary)';
+                } else {
+                  // 远离光标的基线
+                  width = 8;
+                  height = 2;
+                  opacity = 0.35;
+                  background = 'var(--dsw-alias-label-tertiary)';
+                }
+              } else if (isActive) {
+                width = 20;
+                height = 2.4;
+                opacity = 0.95;
+                background = 'var(--dsw-alias-label-primary)';
+              }
+
+              const tickStyle: CSSProperties = {
+                width: `${width}px`,
+                height: `${height}px`,
+                opacity,
+                backgroundColor: background,
+              };
+
+              const markClasses = [css.mark];
+              if (isBusy) markClasses.push(css.markBusy);
+
+              return (
+                <div key={item.turn} className={css.markPosition} style={itemPosition(index)}>
+                  <button
+                    type="button"
+                    className={markClasses.join(' ')}
+                    aria-label={`第 ${item.turn + 1} 轮`}
+                    aria-current={isActive ? 'true' : undefined}
+                    aria-busy={isBusy ? 'true' : undefined}
+                    aria-describedby={hoveredIndex === index ? previewId : undefined}
+                    onMouseDown={event => { event.preventDefault(); }}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onNavigate(item);
+                    }}
+                    onFocus={() => setHoveredIndex(index)}
+                    onBlur={() => setHoveredIndex(null)}
+                  >
+                    <span className={css.tick} style={tickStyle} />
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {preview !== undefined && previewPosition !== undefined && (
+          <div id={previewId} role="tooltip" className={css.preview} style={previewPosition}>
+            <div className={css.previewPrompt}>
+              {preview.prompt || `第 ${preview.turn + 1} 轮`}
+            </div>
+            {preview.response !== '' && (
+              <div className={css.previewResponse}>{preview.response}</div>
+            )}
+          </div>
+        )}
+      </nav>
+    </div>
+  );
+});