beads-map 0.3.3 → 0.3.5

package/components/TutorialOverlay.tsx

@@ -27,7 +27,7 @@ export const TUTORIAL_STEPS: TutorialStep[] = [
     target: "view-controls",
     title: "View Controls",
     description:
-      "Collapse or expand epic groups, toggle cluster label overlays, and control auto-fit. When auto-fit is on (green), the camera re-centers after every update. Turn it off to stay focused on a specific area while data streams in.",
+      "Collapse or expand epic groups, toggle cluster label overlays, control auto-fit, and toggle the pulse animation. When auto-fit is on (green), the camera re-centers after every update. Pulse highlights the most recently active node with emerald ripples.",
   },
   {
     target: "legend",
@@ -51,14 +51,14 @@ export const TUTORIAL_STEPS: TutorialStep[] = [
     target: "graph",
     title: "Interacting with Nodes",
     description:
-      "Click a node to see details. Hover for a quick tooltip. Right-click for actions like viewing descriptions, commenting, claiming tasks, or collapsing epics.",
+      "Click a node to see details. Hover for a quick tooltip. Right-click for actions like viewing descriptions, commenting, claiming tasks, collapsing epics, or focusing on an epic to isolate its subgraph.",
     padding: 0,
   },
   {
     target: "nav-pills",
     title: "Navigation Bar",
     description:
-      "Replay steps through your project\u2019s history. Comments shows conversations. Activity is a real-time feed. And Learn brings you right back here.",
+      "Replay steps through your project\u2019s history. Comments shows conversations across your beads. Activity is a real-time feed filtered to only your local issues. And Learn brings you right back here.",
   },
 ];
 

package/lib/settings.ts

@@ -0,0 +1,42 @@
+// ============================================================================
+// User settings — persisted in localStorage
+// ============================================================================
+
+export interface BeadsMapSettings {
+  elevenLabsApiKey?: string;
+  elevenLabsVoiceId: string;
+  elevenLabsModel: string;
+}
+
+const STORAGE_KEY = "beads-map-settings";
+
+const DEFAULTS: BeadsMapSettings = {
+  elevenLabsVoiceId: "UgBBYS2sOqTuMpoF3BR0", // Mark - Natural Conversations
+  elevenLabsModel: "eleven_multilingual_v2",
+};
+
+/** Read settings from localStorage, merged with defaults */
+export function getSettings(): BeadsMapSettings {
+  if (typeof window === "undefined") return { ...DEFAULTS };
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return { ...DEFAULTS };
+    return { ...DEFAULTS, ...JSON.parse(raw) };
+  } catch {
+    return { ...DEFAULTS };
+  }
+}
+
+/** Write settings to localStorage */
+export function saveSettings(settings: Partial<BeadsMapSettings>): void {
+  if (typeof window === "undefined") return;
+  const current = getSettings();
+  const merged = { ...current, ...settings };
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(merged));
+}
+
+/** Check if ElevenLabs API key is configured */
+export function hasApiKey(): boolean {
+  const s = getSettings();
+  return !!s.elevenLabsApiKey && s.elevenLabsApiKey.trim().length > 0;
+}

package/lib/tts.ts

@@ -0,0 +1,137 @@
+// ============================================================================
+// ElevenLabs Text-to-Speech helper
+// ============================================================================
+
+import { getSettings } from "./settings";
+
+// --- Markdown stripping ---------------------------------------------------
+
+/** Strip Markdown syntax to produce clean plain text for TTS */
+export function stripMarkdown(md: string): string {
+  return (
+    md
+      // Remove code blocks (triple backtick)
+      .replace(/```[\s\S]*?```/g, "")
+      // Remove inline code
+      .replace(/`([^`]+)`/g, "$1")
+      // Remove images ![alt](url)
+      .replace(/!\[([^\]]*)\]\([^)]+\)/g, "$1")
+      // Convert links [text](url) to just text
+      .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+      // Remove headers (# ## ### etc)
+      .replace(/^#{1,6}\s+/gm, "")
+      // Remove bold/italic markers
+      .replace(/(\*{1,3}|_{1,3})(.*?)\1/g, "$2")
+      // Remove strikethrough
+      .replace(/~~(.*?)~~/g, "$1")
+      // Remove horizontal rules
+      .replace(/^[-*_]{3,}\s*$/gm, "")
+      // Remove blockquotes
+      .replace(/^>\s+/gm, "")
+      // Remove list markers
+      .replace(/^[\s]*[-*+]\s+/gm, "")
+      .replace(/^[\s]*\d+\.\s+/gm, "")
+      // Remove HTML tags
+      .replace(/<[^>]+>/g, "")
+      // Collapse multiple newlines
+      .replace(/\n{3,}/g, "\n\n")
+      .trim()
+  );
+}
+
+// --- Audio playback -------------------------------------------------------
+
+/** Current audio element for stop control */
+let currentAudio: HTMLAudioElement | null = null;
+let currentBlobUrl: string | null = null;
+
+export type TtsState = "idle" | "loading" | "playing" | "error";
+
+/** Set playback speed on the current audio element */
+export function setTtsPlaybackRate(rate: number): void {
+  if (currentAudio) {
+    currentAudio.playbackRate = rate;
+  }
+}
+
+/** Stop any currently playing TTS audio */
+export function stopTts(): void {
+  if (currentAudio) {
+    currentAudio.pause();
+    currentAudio.currentTime = 0;
+    currentAudio = null;
+  }
+  if (currentBlobUrl) {
+    URL.revokeObjectURL(currentBlobUrl);
+    currentBlobUrl = null;
+  }
+}
+
+/**
+ * Call ElevenLabs TTS API and play the result.
+ * @param text - Plain text to speak (already stripped of Markdown)
+ * @param onStateChange - Callback for state transitions
+ */
+export async function speakWithElevenLabs(
+  text: string,
+  onStateChange: (state: TtsState, error?: string) => void
+): Promise<void> {
+  // Stop any existing playback
+  stopTts();
+
+  const settings = getSettings();
+  if (!settings.elevenLabsApiKey) {
+    onStateChange("error", "No API key configured");
+    return;
+  }
+
+  onStateChange("loading");
+
+  try {
+    const voiceId = settings.elevenLabsVoiceId;
+    const res = await fetch(
+      `https://api.elevenlabs.io/v1/text-to-speech/${voiceId}?output_format=mp3_44100_128`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "xi-api-key": settings.elevenLabsApiKey,
+        },
+        body: JSON.stringify({
+          text,
+          model_id: settings.elevenLabsModel,
+        }),
+      }
+    );
+
+    if (!res.ok) {
+      const errorText = await res.text().catch(() => res.statusText);
+      throw new Error(`ElevenLabs API error (${res.status}): ${errorText}`);
+    }
+
+    const blob = await res.blob();
+    const blobUrl = URL.createObjectURL(blob);
+    currentBlobUrl = blobUrl;
+
+    const audio = new Audio(blobUrl);
+    currentAudio = audio;
+
+    onStateChange("playing");
+
+    audio.onended = () => {
+      stopTts();
+      onStateChange("idle");
+    };
+
+    audio.onerror = () => {
+      stopTts();
+      onStateChange("error", "Audio playback failed");
+    };
+
+    await audio.play();
+  } catch (err) {
+    stopTts();
+    const message = err instanceof Error ? err.message : "TTS failed";
+    onStateChange("error", message);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beads-map",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "Interactive dependency graph viewer for beads (bd) issues",
   "keywords": [
     "beads",