Notebooklm Studio

.DS_Store
__pycache__/
*.py[cod]
.pytest_cache/
.mypy_cache/
.ruff_cache/

.env
.env.*
!.env.example

.venv/
venv/
env/

notebooklm_outputs/
outputs/
downloads/
tmp/
temp/

*.log
*.sqlite
*.sqlite3
*.db

*.token
*.secret
*.session
credentials.json
token.json

interface:
  display_name: "NotebookLM Studio"
  short_description: "Run NotebookLM artifacts and launch the local Studio dashboard from Codex."
  default_prompt: "Use NotebookLM Studio to ingest authorized sources, create or reuse notebooks, generate official NotebookLM artifacts, download outputs, launch the local dashboard when useful, and report source-grounded results with limitations."

const state = {
  notebooks: [],
  overviews: new Map(),
  loadingOverviews: new Set(),
  currentNotebook: null,
  filter: "all",
  query: "",
  jobs: [],
  copiedPrompts: new Set(),
};

const recipes = [
  {
    id: "executive-briefing-suite",
    name: "Executive Briefing Suite",
    purpose: "Help leadership quickly grasp key findings, decision rationale, and presentation-ready materials.",
    artifacts: ["Briefing Report", "Slide Deck", "Data Table", "Audio Overview"],
    native: ["report", "slide-deck", "data-table", "audio"],
  },
  {
    id: "visual-story-suite",
    name: "Visual Story Suite",
    purpose: "Turn complex material into a visual narrative for external presentations or internal alignment.",
    artifacts: ["Video Overview", "Slide Deck", "Infographic", "Mind Map"],
    native: ["video", "slide-deck", "infographic", "mind-map"],
  },
  {
    id: "learning-masterpack",
    name: "Learning Masterpack",
    purpose: "Convert sources into study and review materials for courses, training, and research.",
    artifacts: ["Study Guide Report", "Quiz", "Flashcards", "Mind Map", "Audio Overview"],
    native: ["report", "quiz", "flashcards", "mind-map", "audio"],
  },
  {
    id: "competitive-intel-suite",
    name: "Competitive Intel Suite",
    purpose: "Frame competitors, risks, differentiation, and market position with native NotebookLM artifacts.",
    artifacts: ["Custom Report", "Data Table", "Slide Deck", "Infographic"],
    native: ["report", "data-table", "slide-deck", "infographic"],
  },
  {
    id: "due-diligence-suite",
    name: "Due Diligence Review Suite",
    purpose: "Surface red flags, open questions, evidence maps, and decision summaries from large source sets.",
    artifacts: ["Custom Report", "Data Table", "Mind Map", "Quiz"],
    native: ["report", "data-table", "mind-map", "quiz"],
  },
  {
    id: "content-distribution-suite",
    name: "Content Distribution Suite",
    purpose: "Repurpose one source set into distribution-ready assets grounded in NotebookLM outputs.",
    artifacts: ["Blog-post Report", "Video Overview", "Infographic", "Slide Deck"],
    native: ["report", "video", "infographic", "slide-deck"],
  },
  {
    id: "research-synthesis-suite",
    name: "Research Synthesis Suite",
    purpose: "Turn large source libraries into a grounded research brief, evidence map, and reusable extraction table.",
    artifacts: ["Research Report", "Mind Map", "Data Table", "Audio Overview"],
    native: ["report", "mind-map", "data-table", "audio"],
  },
  {
    id: "stakeholder-qa-suite",
    name: "Stakeholder Q&A Suite",
    purpose: "Prepare for meetings, interviews, and reviews with crisp talking points plus recall checks.",
    artifacts: ["Briefing Report", "Slide Deck", "Quiz", "Flashcards"],
    native: ["report", "slide-deck", "quiz", "flashcards"],
  },
  {
    id: "knowledge-base-digest-suite",
    name: "Knowledge Base Digest Suite",
    purpose: "Refresh a notebook into a compact digest, structured table, map, and listenable summary.",
    artifacts: ["Digest Report", "Data Table", "Mind Map", "Audio Overview"],
    native: ["report", "data-table", "mind-map", "audio"],
  },
];

const studioActions = [
  ["audio", "Audio Overview", "Podcast-style summary"],
  ["slide-deck", "Slide Deck", "PDF + PPTX presentation"],
  ["video", "Video Overview", "Narrated visual explainer"],
  ["mind-map", "Mind Map", "Interactive concept graph"],
  ["report", "Report", "Briefing / study guide / blog post"],
  ["flashcards", "Flashcards", "Study card deck"],
  ["quiz", "Quiz", "Interactive assessment"],
  ["infographic", "Infographic", "Single visual summary"],
  ["data-table", "Data Table", "Structured CSV extraction"],
];

const PREVIEW_NOTE = "Preview only - not submitted to NotebookLM";
const REAL_NOTE = "Submitted through NotebookLM CLI";

const artifactLabels = {
  audio: "Audio",
  video: "Video",
  report: "Report",
  slides: "Slides",
  "slide-deck": "Slides",
  "mind-map": "Mind Map",
  table: "Table",
  "data-table": "Table",
  quiz: "Quiz",
  flashcards: "Cards",
  infographic: "Info",
};

const els = {};

document.addEventListener("DOMContentLoaded", async () => {
  bindElements();
  bindEvents();
  installWheelScrollFallback();
  renderRecipes();
  renderStudioActions();
  await loadNotebooks();
  await pollJobs();
  setInterval(pollJobs, 5000);
});

function bindElements() {
  [
    "libraryView",
    "detailView",
    "notebookGrid",
    "librarySearch",
    "filterPills",
    "totalNotebooks",
    "readyCount",
    "needsReviewCount",
    "backButton",
    "homeButton",
    "detailTitle",
    "detailMeta",
    "sourceList",
    "sourceCountBadge",
    "artifactCountBadge",
    "recipeList",
    "studioGrid",
    "timeline",
    "commandButton",
    "commandOverlay",
    "commandInput",
    "commandResults",
    "clearJobsButton",
    "recipeHelpButton",
    "runnerStatus",
  ].forEach((id) => (els[id] = document.getElementById(id)));
}

function bindEvents() {
  els.librarySearch.addEventListener("input", (event) => {
    state.query = event.target.value.trim().toLowerCase();
    renderNotebooks();
    hydrateVisibleOverviews();
  });

  els.filterPills.addEventListener("click", (event) => {
    const button = event.target.closest("button");
    if (!button) return;
    state.filter = button.dataset.filter;
    [...els.filterPills.querySelectorAll("button")].forEach((item) => item.classList.toggle("active", item === button));
    renderNotebooks();
    hydrateVisibleOverviews();
  });

  els.backButton.addEventListener("click", showLibrary);
  els.homeButton.addEventListener("click", showLibrary);
  els.commandButton.addEventListener("click", openCommand);
  els.commandOverlay.addEventListener("click", (event) => {
    if (event.target === els.commandOverlay) closeCommand();
  });
  els.commandInput.addEventListener("input", renderCommandResults);
  els.clearJobsButton.addEventListener("click", async () => {
    try {
      const result = await fetchJson("/api/jobs", { method: "DELETE" });
      state.jobs = (result.jobs || []).map(normalizeJob);
    } catch {
      state.jobs = [];
    }
    renderTimeline();
    updateRunnerStatus();
  });
  els.recipeHelpButton.addEventListener("click", () => {
    addLocalJob({
      label: "Background Runner onboarding",
      kind: "guide",
      artifacts: ["Start server", "Connect CLI", "Submit real jobs"],
      progress: 100,
      status: "ready",
      steps: [
        { name: "Prompt: Launch NotebookLM Dashboard", status: "done" },
        { name: "Server: python3 server.py --port 8765", status: "done" },
        { name: "Buttons: submit NotebookLM generate commands", status: "done" },
      ],
    });
  });

  document.addEventListener("keydown", (event) => {
    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
      event.preventDefault();
      openCommand();
    }
    if (event.key === "Escape") closePromptPanel();
    if (event.key === "Escape") closeCommand();
  });

  document.querySelectorAll("[data-theme-choice]").forEach((button) => {
    button.addEventListener("click", () => {
      document.body.dataset.theme = button.dataset.themeChoice;
      document.querySelectorAll("[data-theme-choice]").forEach((item) => item.classList.toggle("active", item === button));
    });
  });
}

function installWheelScrollFallback() {
  window.addEventListener("wheel", (event) => {
    if (event.defaultPrevented || (!event.deltaY && !event.deltaX)) return;
    const target = event.target instanceof Element ? event.target : null;
    const root = pageScroller();
    const scrollConsumer = findScrollableConsumer(target, event.deltaX, event.deltaY);
    if (scrollConsumer && scrollConsumer !== root) return;
    const beforeTop = root.scrollTop;
    const beforeLeft = root.scrollLeft;
    requestAnimationFrame(() => {
      if (root.scrollTop !== beforeTop || root.scrollLeft !== beforeLeft) return;
      try {
        root.scrollTop = beforeTop + event.deltaY;
        root.scrollLeft = beforeLeft + event.deltaX;
      } catch {
        // Some embedded browsers expose read-only document scroll APIs; native wheel scrolling still handles the app shell.
      }
    });
  }, { passive: true });
}

function pageScroller() {
  return document.querySelector(".app-shell") || document.scrollingElement || document.documentElement;
}

function findScrollableConsumer(target, deltaX, deltaY) {
  for (let node = target; node && node !== document.body; node = node.parentElement) {
    const style = getComputedStyle(node);
    const canScrollY = /(auto|scroll|overlay)/.test(style.overflowY) && node.scrollHeight > node.clientHeight;
    const canScrollX = /(auto|scroll|overlay)/.test(style.overflowX) && node.scrollWidth > node.clientWidth;
    const hasYRoom = deltaY < 0 ? node.scrollTop > 0 : node.scrollTop + node.clientHeight < node.scrollHeight;
    const hasXRoom = deltaX < 0 ? node.scrollLeft > 0 : node.scrollLeft + node.clientWidth < node.scrollWidth;
    if ((canScrollY && hasYRoom) || (canScrollX && hasXRoom)) return node;
  }
  return null;
}

async function loadNotebooks() {
  const data = await fetchJson("/api/notebooks");
  state.notebooks = data.notebooks || [];
  renderNotebooks();
  hydrateVisibleOverviews();
}

async function hydrateVisibleOverviews() {
  const visible = filteredNotebooks().slice(0, 12);
  for (const notebook of visible) {
    fetchOverview(notebook);
    await sleep(120);
  }
}

async function fetchOverview(notebook) {
  if (!notebook?.id || state.overviews.has(notebook.id) || state.loadingOverviews.has(notebook.id)) return null;
  state.loadingOverviews.add(notebook.id);
  try {
    const overview = await fetchJson(`/api/notebook/${notebook.id}/overview`);
    state.overviews.set(notebook.id, overview);
    renderNotebooks();
    updateStats();
    if (state.currentNotebook?.id === notebook.id) renderDetail();
    return overview;
  } catch {
    return null;
  } finally {
    state.loadingOverviews.delete(notebook.id);
  }
}

function filteredNotebooks() {
  return state.notebooks.filter((notebook) => {
    const overview = state.overviews.get(notebook.id);
    const haystack = `${notebook.display_title} ${notebook.id} ${notebook.created_at}`.toLowerCase();
    if (state.query && !haystack.includes(state.query)) return false;
    if (state.filter === "empty") return notebook.warnings?.empty_title;
    if (state.filter === "warning") return notebook.warnings?.empty_title || notebook.warnings?.possible_duplicate || overview?.failed_count;
    if (state.filter === "ready") return overview?.status === "Ready";
    return true;
  });
}

function renderNotebooks() {
  const template = document.getElementById("notebookCardTemplate");
  els.notebookGrid.innerHTML = "";
  for (const notebook of filteredNotebooks()) {
    const overview = state.overviews.get(notebook.id);
    const card = template.content.firstElementChild.cloneNode(true);
    const status = overview?.status || (notebook.warnings?.empty_title ? "Needs review" : "Scanning");
    const activityAt = overview?.last_activity || notebook.created_at;
    card.querySelector(".status-badge").textContent = status;
    card.querySelector(".status-badge").classList.toggle("status-ready", status === "Ready");
    card.querySelector(".status-badge").classList.toggle("status-warning", status !== "Ready" && status !== "Has failed artifact");
    card.querySelector(".status-badge").classList.toggle("status-failed", status === "Has failed artifact");
    card.querySelector(".date-chip").textContent = `Synced ${formatDate(notebook.created_at)}`;
    card.querySelector("h3").textContent = notebook.display_title;
    card.querySelector(".id-line").textContent = notebook.id;
    card.querySelector('[data-field="source-count"]').textContent = overview?.source_count ?? "…";
    card.querySelector('[data-field="artifact-count"]').textContent = overview?.artifact_count ?? "…";
    card.querySelector('[data-field="last-activity"]').textContent = activityAt ? formatDate(activityAt) : "sync";
    const strip = card.querySelector(".artifact-strip");
    const kinds = overview?.completed_kinds?.length ? overview.completed_kinds : ["audio", "video", "report", "slides", "table"].slice(0, 3);
    kinds.forEach((kind) => {
      const pill = document.createElement("span");
      pill.className = `artifact-pill ${overview?.completed_kinds?.includes(kind) ? "done" : ""}`;
      pill.textContent = artifactLabels[kind] || kind;
      strip.appendChild(pill);
    });
    card.addEventListener("click", () => openNotebook(notebook));
    els.notebookGrid.appendChild(card);
  }
  updateStats();
}

function updateStats() {
  const ready = [...state.overviews.values()].filter((overview) => overview.status === "Ready").length;
  const review = state.notebooks.filter((notebook) => notebook.warnings?.empty_title).length
    + [...state.overviews.values()].filter((overview) => overview.failed_count > 0).length;
  els.totalNotebooks.textContent = state.notebooks.length;
  els.readyCount.textContent = ready || "—";
  els.needsReviewCount.textContent = review;
}

async function openNotebook(notebook) {
  state.currentNotebook = notebook;
  els.libraryView.classList.remove("active");
  els.detailView.classList.add("active");
  renderDetail();
  if (!state.overviews.has(notebook.id)) {
    await fetchOverview(notebook);
  }
}

function showLibrary() {
  els.detailView.classList.remove("active");
  els.libraryView.classList.add("active");
  state.currentNotebook = null;
}

function renderDetail() {
  const notebook = state.currentNotebook;
  if (!notebook) return;
  const overview = state.overviews.get(notebook.id);
  els.detailTitle.textContent = notebook.display_title;
  const activityAt = overview?.last_activity || notebook.created_at;
  els.detailMeta.textContent = `${notebook.id} · Latest activity ${formatDate(activityAt)} · ${overview?.status || "Scanning"}`;
  renderSources(overview?.sources, Boolean(overview));
  renderArtifacts(overview?.artifacts || []);
  renderTimeline();
}

function renderSources(sources, hasSynced = true) {
  const sourceItems = Array.isArray(sources) ? sources : [];
  els.sourceCountBadge.textContent = hasSynced ? (sourceItems.length || "—") : "sync";
  els.sourceList.innerHTML = "";
  if (!hasSynced) {
    els.sourceList.innerHTML = `<div class="source-item"><strong>Syncing sources...</strong></div>`;
    return;
  }
  if (!sourceItems.length) {
    els.sourceList.innerHTML = `<div class="source-item"><strong>No sources found</strong></div>`;
    return;
  }
  sourceItems.forEach((source) => {
    const item = document.createElement("div");
    item.className = "source-item";
    item.innerHTML = `
      <strong>${escapeHtml(displaySourceTitle(source))}</strong>
    `;
    els.sourceList.appendChild(item);
  });
}

function displaySourceTitle(source) {
  const title = String(source?.title || "").trim();
  if (!title) return "Untitled source";
  if (title === "\u8cbc\u4e0a\u7684\u6587\u5b57") return "Pasted text";
  return title;
}

function displaySourceType(value) {
  const raw = String(value || "Source").trim();
  const known = {
    "SourceType.PASTED_TEXT": "Pasted text",
    PASTED_TEXT: "Pasted text",
    "SourceType.URL": "Web source",
    URL: "Web source",
    "SourceType.PDF": "PDF",
    PDF: "PDF",
    "SourceType.DOC": "Document",
    "SourceType.DOCX": "Document",
    DOC: "Document",
    DOCX: "Document",
  };
  if (known[raw]) return known[raw];
  return raw
    .replace(/^SourceType\./, "")
    .replace(/_/g, " ")
    .toLowerCase()
    .replace(/\b\w/g, (char) => char.toUpperCase());
}

function formatStatus(value) {
  return String(value || "unknown")
    .replace(/_/g, " ")
    .toLowerCase()
    .replace(/\b\w/g, (char) => char.toUpperCase());
}

function renderRecipes() {
  els.recipeList.innerHTML = "";
  recipes.forEach((recipe) => {
    const card = document.createElement("article");
    card.className = "recipe-card";
    card.innerHTML = `
      <h4>${escapeHtml(recipe.name)}</h4>
      <p>${escapeHtml(recipe.purpose)}</p>
      <div class="output-chips">${recipe.artifacts.map((item) => `<span>${escapeHtml(item)}</span>`).join("")}</div>
      <button class="run-button" type="button" aria-label="Start ${escapeHtml(recipe.name)}">Start</button>
    `;
    card.querySelector("button").addEventListener("click", () => startJob(recipe.name, "recipe", recipe.artifacts, recipe.native, recipe.purpose));
    els.recipeList.appendChild(card);
  });
}

function renderStudioActions() {
  els.studioGrid.innerHTML = "";
  studioActions.forEach(([id, label, description]) => {
    const button = document.createElement("button");
    button.className = "studio-button";
    button.type = "button";
    button.dataset.toolId = id;
    button.innerHTML = `
      <span class="studio-icon">${studioGlyph(id)}</span>
      <span class="studio-copy"><h4>${label}</h4><span class="studio-description">${description}</span></span>
      <span class="tool-arrow" aria-hidden="true">›</span>
    `;
    button.addEventListener("click", () => startJob(label, "native", [label], [id], description));
    els.studioGrid.appendChild(button);
  });
}

function renderArtifacts(artifacts) {
  els.artifactCountBadge.textContent = studioActions.length;
}

async function startJob(label, kind, artifacts, commands = [], purpose = "") {
  if (!state.currentNotebook) return;
  try {
    const result = await fetchJson("/api/jobs", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        notebook_id: state.currentNotebook.id,
        notebook_title: state.currentNotebook.display_title,
        label,
        kind,
        purpose,
        artifacts,
        commands,
      }),
    });
    if (result.job) addLocalJob(result.job);
  } catch {
    addLocalJob({ label, kind, artifacts, status: "queued", progress: 18, preview: true });
  }
}

function addLocalJob(job) {
  const normalized = normalizeJob(job);
  upsertJob(normalized);
  renderTimeline();
  updateRunnerStatus(normalized);
  document.querySelector(".timeline-panel")?.scrollIntoView({ behavior: "smooth", block: "start" });
  pollJobs();
}

function normalizeJob(job) {
  return {
    id: job.id || `local-${Date.now()}`,
    notebook_id: job.notebook_id,
    label: job.label,
    kind: job.kind || "task",
    purpose: job.purpose,
    artifacts: job.artifacts || [],
    commands: job.commands || [],
    outputs: job.outputs || [],
    status: job.status || "queued",
    progress: job.progress ?? 3,
    created_at: job.created_at || new Date().toISOString().slice(0, 19),
    updated_at: job.updated_at,
    steps: job.steps || [{ name: "Queued for NotebookLM", status: "active" }],
    preview: Boolean(job.preview),
    output_dir: job.output_dir,
    handoff_path: job.handoff_path,
    global_handoff_path: job.global_handoff_path,
    prompt_path: job.prompt_path || job.agent_prompt_path,
    handoff_status: job.handoff_status,
    prompt_copied: Boolean(job.prompt_copied) || state.copiedPrompts.has(job.id),
    prompt_error: job.prompt_error,
  };
}

function upsertJob(job) {
  const index = state.jobs.findIndex((item) => item.id === job.id);
  if (index >= 0) state.jobs.splice(index, 1, job);
  else state.jobs.unshift(job);
}

async function pollJobs() {
  try {
    const result = await fetchJson("/api/jobs");
    state.jobs = (result.jobs || []).map(normalizeJob);
    renderTimeline();
    updateRunnerStatus();
  } catch {
    // Keep the last visible state if the local runner is temporarily busy.
  }
}

function updateRunnerStatus(job = null) {
  const currentJobs = state.currentNotebook
    ? state.jobs.filter((item) => item.notebook_id === state.currentNotebook.id)
    : state.jobs;
  const latest = job || currentJobs[0];
  if (!latest) {
    els.runnerStatus.textContent = "Ready · submits jobs through NotebookLM CLI";
    return;
  }
  els.runnerStatus.textContent = `${latest.label} · ${latest.status} · ${latest.preview ? PREVIEW_NOTE : REAL_NOTE}`;
}

async function copyPromptToAgent(jobId) {
  let result;
  try {
    result = await fetchJson("/api/handoff", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ job_id: jobId }),
    });
  } catch {
    const job = state.jobs.find((item) => item.id === jobId);
    if (job) {
      job.prompt_error = "Prompt request failed";
      renderTimeline();
    }
    return;
  }

  const job = state.jobs.find((item) => item.id === jobId);
  if (!job) return;
  job.handoff_path = result.path;
  job.global_handoff_path = result.global_path;
  job.prompt_path = result.prompt_path;

  if (result.ok) {
    showPromptPanel(result.prompt, result.prompt_path);
    job.handoff_status = "prompt_ready";
    job.prompt_error = "Prompt is selected in the popup. Press Command+C, then paste with Command+V.";
    updateRunnerStatus(job);
    renderTimeline();
  } else {
    job.prompt_error = result.error || "Prompt is not ready yet";
    renderTimeline();
  }
}

function showPromptPanel(prompt, promptPath) {
  let overlay = document.getElementById("promptOverlay");
  if (!overlay) {
    overlay = document.createElement("div");
    overlay.id = "promptOverlay";
    overlay.className = "prompt-overlay";
    overlay.innerHTML = `
      <section class="prompt-panel" role="dialog" aria-modal="true" aria-labelledby="promptPanelTitle">
        <div class="prompt-panel-head">
          <div>
            <p class="section-label">Agent Handoff</p>
            <h3 id="promptPanelTitle">Prompt ready</h3>
          </div>
          <button class="tiny-button" type="button" data-prompt-close>Close</button>
        </div>
        <p class="prompt-status" data-prompt-status></p>
        <textarea class="prompt-textarea" spellcheck="false" readonly data-prompt-text></textarea>
        <div class="prompt-footer">
          <small data-prompt-path></small>
          <div>
            <button class="tiny-button" type="button" data-prompt-select>Select all</button>
            <button class="tiny-button" type="button" data-prompt-close>Close</button>
          </div>
        </div>
      </section>
    `;
    overlay.addEventListener("click", (event) => {
      if (event.target === overlay || event.target.closest("[data-prompt-close]")) closePromptPanel();
    });
    overlay.querySelector("[data-prompt-select]").addEventListener("click", () => selectPromptText());
    document.body.appendChild(overlay);
  }

  overlay.querySelector("[data-prompt-text]").value = String(prompt ?? "");
  overlay.querySelector("[data-prompt-path]").textContent = promptPath || "";
  overlay.querySelector("[data-prompt-status]").textContent = "The prompt is selected. Press Command+C to copy, then paste it into Codex with Command+V.";
  overlay.classList.add("active");
  overlay.setAttribute("aria-hidden", "false");
  selectPromptText();
}

function selectPromptText() {
  const textarea = document.querySelector("#promptOverlay [data-prompt-text]");
  if (!textarea) return;
  setTimeout(() => {
    textarea.focus();
    textarea.setSelectionRange(0, textarea.value.length);
    textarea.scrollTop = 0;
    textarea.scrollLeft = 0;
  }, 20);
}

function closePromptPanel() {
  const overlay = document.getElementById("promptOverlay");
  if (!overlay) return;
  overlay.classList.remove("active");
  overlay.setAttribute("aria-hidden", "true");
}

function renderTimeline() {
  els.timeline.innerHTML = "";
  const overview = state.currentNotebook ? state.overviews.get(state.currentNotebook.id) : null;
  const artifactJobs = (overview?.artifacts || []).slice(0, 6).map((artifact) => ({
    id: artifact.id,
    label: artifact.title || artifact.type,
    kind: "native artifact",
    artifacts: [artifact.type],
    status: artifact.status,
    progress: artifact.status === "completed" ? 100 : artifact.status === "failed" ? 100 : 45,
    created_at: artifact.created_at,
    steps: [
      { name: "Submitted", status: "done" },
      { name: artifact.status === "failed" ? "Failed in NotebookLM" : "Generated", status: artifact.status === "failed" ? "failed" : "done" },
      { name: "Download available", status: artifact.status === "completed" ? "done" : "waiting" },
    ],
  }));
  const activeJobs = state.currentNotebook
    ? state.jobs.filter((job) => job.notebook_id === state.currentNotebook.id || job.kind === "guide")
    : state.jobs;
  const jobs = [...activeJobs, ...artifactJobs];
  if (!jobs.length) {
    const emptyTitle = state.currentNotebook && !overview ? "Syncing artifact history..." : "No jobs yet";
    const emptyBody = state.currentNotebook && !overview
      ? "Existing NotebookLM artifacts will appear here after metadata sync."
      : "Start a recipe or native Studio action to see live progress here.";
    els.timeline.innerHTML = `<div class="job-card"><div><strong>${emptyTitle}</strong><small>${emptyBody}</small></div></div>`;
    return;
  }
  jobs.forEach((job) => {
    const outputs = job.outputs || [];
    const hasDownloads = (job.outputs || []).some((output) => output.downloaded_files?.length);
    const isRunnerJob = !job.preview && (job.commands?.length || job.outputs?.length || job.output_dir);
    const isExternalArtifact = job.kind === "native artifact" && !outputs.length;
    const isSingleOutputJob = !isExternalArtifact && outputs.length === 1;
    const canCopyPrompt = isRunnerJob && ["completed", "completed with failures"].includes(job.status) && hasDownloads;
    const actionHint = canCopyPrompt
      ? "Prompt opens selected and ready for Command+C."
      : "Available after downloads finish.";
    const promptDetail = job.prompt_error || actionHint;
    const promptTitle = job.prompt_path || job.global_handoff_path || promptDetail;
    const outputsHtml = job.outputs?.length ? `
      <div class="output-list">${job.outputs.map((output) => `
        <span>
          <strong>${escapeHtml(output.label || output.command)}</strong>
          <em>${escapeHtml(output.status || "queued")}${output.artifact_id ? ` · ${escapeHtml(output.artifact_id)}` : ""}${output.download_status ? ` · ${escapeHtml(output.download_status)}` : ""}</em>
        </span>
      `).join("")}</div>
    ` : "";
    const stepsHtml = (job.steps || []).map((step) => `<span>${step.status === "done" ? "✓" : step.status === "failed" ? "!" : "·"} ${escapeHtml(step.name)}</span>`).join("");
    const card = document.createElement("div");
    card.className = `job-card${isExternalArtifact ? " job-card-summary" : ""}${isSingleOutputJob ? " job-card-single" : ""}`;
    if (isExternalArtifact) {
      const summaryStep = (job.steps || []).find((step) => step.status === "failed")
        || (job.steps || []).find((step) => step.name === "Download available")
        || (job.steps || [])[0];
      const summaryMark = summaryStep?.status === "failed" ? "!" : summaryStep?.status === "done" ? "✓" : "·";
      card.innerHTML = `
        <div class="job-summary-row">
          <div class="job-title-block">
            <strong>${escapeHtml(job.label || "NotebookLM artifact")}</strong>
            <small>${escapeHtml(job.kind || "native artifact")} · ${escapeHtml(job.status || "queued")} · ${formatDate(job.created_at)}</small>
          </div>
          <div class="job-summary-status">
            <span>${summaryMark} ${escapeHtml(summaryStep?.name || formatStatus(job.status))}</span>
            <em>${(job.artifacts || []).map((item) => escapeHtml(item)).join(" · ")}</em>
          </div>
        </div>
        <div class="progress-track"><i style="width:${job.progress || 0}%"></i></div>
      `;
    } else {
      card.innerHTML = `
      <div class="job-header-row">
        <div class="job-title-block">
          <strong>${escapeHtml(job.label || "NotebookLM job")}</strong>
          <small>${escapeHtml(job.kind || "task")} · ${escapeHtml(job.status || "queued")} · ${formatDate(job.created_at)}</small>
        </div>
        ${isRunnerJob ? `<div class="job-action-panel"><button type="button" class="handoff-button" data-job-id="${escapeHtml(job.id)}" ${canCopyPrompt ? "" : "disabled"}>Show Prompt for Codex</button><small title="${escapeHtml(promptTitle)}">${escapeHtml(promptDetail)}</small></div>` : ""}
      </div>
      <div class="job-body">
        <div class="output-chips">${(job.artifacts || []).map((item) => `<span>${escapeHtml(item)}</span>`).join("")}</div>
        ${job.preview ? `<div class="preview-warning">${PREVIEW_NOTE}</div>` : ""}
        <div class="job-status-grid">
          ${outputsHtml || "<div></div>"}
          <div class="step-list">
            ${stepsHtml}
          </div>
        </div>
        <div class="progress-track"><i style="width:${job.progress || 0}%"></i></div>
      </div>
    `;
    }
    card.querySelector(".handoff-button")?.addEventListener("click", (event) => {
      event.stopPropagation();
      if (!event.currentTarget.disabled) copyPromptToAgent(job.id);
    });
    els.timeline.appendChild(card);
  });
}

function openCommand() {
  els.commandOverlay.classList.add("active");
  els.commandOverlay.setAttribute("aria-hidden", "false");
  els.commandInput.value = "";
  renderCommandResults();
  setTimeout(() => els.commandInput.focus(), 20);
}

function closeCommand() {
  els.commandOverlay.classList.remove("active");
  els.commandOverlay.setAttribute("aria-hidden", "true");
}

function renderCommandResults() {
  const query = els.commandInput.value.trim().toLowerCase();
  const artifactQuery = {
    audio: "audio",
    video: "video",
    report: "report",
    slides: "slides",
    slide: "slides",
    table: "table",
    data: "table",
    mindmap: "mind-map",
    "mind map": "mind-map",
    infographic: "infographic",
    quiz: "quiz",
    flashcards: "flashcards",
  }[query];
  const results = state.notebooks.filter((notebook) => {
    if (!query) return true;
    if (query === "untitled") return notebook.warnings?.empty_title;
    if (/^\d{4}-\d{2}$/.test(query)) return String(notebook.created_at || "").startsWith(query);
    if (artifactQuery) return state.overviews.get(notebook.id)?.completed_kinds?.includes(artifactQuery);
    return `${notebook.display_title} ${notebook.id}`.toLowerCase().includes(query);
  }).slice(0, 10);
  els.commandResults.innerHTML = "";
  results.forEach((notebook) => {
    const row = document.createElement("button");
    row.className = "command-result";
    row.type = "button";
    row.innerHTML = `
      <span><strong>${escapeHtml(notebook.display_title)}</strong><small>${escapeHtml(notebook.id)} · ${formatDate(notebook.created_at)}</small></span>
      <span class="icon-arrow"></span>
    `;
    row.addEventListener("click", () => {
      closeCommand();
      openNotebook(notebook);
    });
    els.commandResults.appendChild(row);
  });
}

async function fetchJson(url, options) {
  const response = await fetch(url, options);
  if (!response.ok) throw new Error(`Request failed: ${response.status}`);
  return response.json();
}

function formatDate(value) {
  if (!value) return "—";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return String(value).slice(0, 10);
  return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" }).format(date);
}

function studioGlyph(id) {
  const icons = {
    audio: `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 13v-2m4 6V7m4 13V4m4 12V8m4 5v-2"/><path d="M17 4l.8 1.8L20 6.5l-1.8.8L17.5 9l-.8-1.8L15 6.5l1.8-.7L17 4Z"/></svg>`,
    video: `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 7h12v10H5z"/><path d="M9 4h7M8 20h8M10 10l4 2-4 2z"/></svg>`,
    report: `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4h9l3 3v13H7z"/><path d="M16 4v4h4M10 11h6M10 15h6M10 18h4"/></svg>`,
    "slide-deck": `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16v11H4z"/><path d="M8 20h8M12 17v3"/></svg>`,
    "mind-map": `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 6v5M7 17l5-6 5 6"/><path d="M9 4h6v4H9zM4 15h6v5H4zM14 15h6v5h-6z"/></svg>`,
    "data-table": `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 5h14v14H5zM5 10h14M5 15h14M10 5v14M15 5v14"/></svg>`,
    quiz: `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 5h14v14H5z"/><path d="M9.5 10a2.5 2.5 0 1 1 4.2 1.8c-.8.7-1.2 1-1.2 2.2M12.5 17h.1"/></svg>`,
    flashcards: `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7h10v12H7z"/><path d="M4 4h10v12M10 11h4M10 15h3"/><path d="M16 4l.6 1.4L18 6l-1.4.6L16 8l-.6-1.4L14 6l1.4-.6L16 4Z"/></svg>`,
    infographic: `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 19V9M12 19V5M19 19v-8"/><path d="M4 19h16M9 9h6M16 11h6M2 9h6"/></svg>`,
  };
  return icons[id] || `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 5h14v14H5z"/></svg>`;
}

function escapeHtml(value) {
  return String(value ?? "").replace(/[&<>"']/g, (char) => ({
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': "&quot;",
    "'": "&#39;",
  })[char]);
}

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>NotebookLM Studio Dashboard</title>
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body data-theme="obsidian">
    <div class="ambient ambient-one"></div>
    <div class="ambient ambient-two"></div>
    <div class="grain"></div>

    <main class="app-shell">
      <header class="topbar">
        <button class="brand" id="homeButton" type="button" aria-label="Back to library">
          <span class="brand-mark">
            <img src="/assets/NotebookLM_logo.png" alt="" />
          </span>
          <span>
            <strong>NotebookLM Studio</strong>
            <small>Research control room</small>
          </span>
        </button>
        <div class="top-actions">
          <button class="ghost-button" id="commandButton" type="button">
            <span class="icon-search"></span>
            Command
            <kbd>⌘K</kbd>
          </button>
          <div class="theme-switcher" aria-label="Design variants">
            <button type="button" data-theme-choice="obsidian" class="active">Obsidian</button>
            <button type="button" data-theme-choice="pearl">Pearl</button>
            <button type="button" data-theme-choice="signal">Signal</button>
          </div>
        </div>
      </header>

      <section class="library-view view active" id="libraryView">
        <div class="hero-panel">
          <div>
            <p class="section-label">Library Dashboard</p>
            <h1>NotebookLM Studio by Prompt Case</h1>
          </div>
          <div class="hero-stats">
            <div><strong id="totalNotebooks">—</strong><span>Notebooks</span></div>
            <div><strong id="readyCount">—</strong><span>Ready</span></div>
            <div><strong id="needsReviewCount">—</strong><span>Needs review</span></div>
          </div>
        </div>

        <div class="library-toolbar">
          <label class="search-box">
            <span class="icon-search"></span>
            <input id="librarySearch" placeholder="Search notebooks, IDs, topics..." />
          </label>
          <div class="filter-pills" id="filterPills">
            <button class="active" data-filter="all">All</button>
            <button data-filter="ready">Ready</button>
            <button data-filter="warning">Warnings</button>
            <button data-filter="empty">Untitled</button>
          </div>
        </div>

        <div class="notebook-grid" id="notebookGrid"></div>
      </section>

      <section class="detail-view view" id="detailView">
        <div class="detail-header">
          <button class="back-button" id="backButton" type="button">
            <span class="icon-arrow icon-arrow-left"></span>
            Library
          </button>
          <div>
            <p class="section-label">Notebook Data Room</p>
            <h2 id="detailTitle">Notebook</h2>
            <p id="detailMeta" class="muted">Loading notebook metadata...</p>
          </div>
          <div class="runner-card">
            <span class="pulse-dot"></span>
            <div>
              <strong>Real Runner</strong>
              <small id="runnerStatus">Ready · submits jobs through NotebookLM CLI</small>
            </div>
          </div>
        </div>

        <div class="data-room">
          <aside class="sources-panel panel">
            <div class="panel-head">
              <div>
                <p class="section-label">Left rail</p>
                <h3>Sources</h3>
              </div>
              <span id="sourceCountBadge" class="count-badge">—</span>
            </div>
            <div id="sourceList" class="source-list"></div>
          </aside>

          <section class="recipes-panel panel">
            <div class="panel-head">
              <div>
                <p class="section-label">One-click Recipes</p>
                <h3>Goal-Based Workflows</h3>
              </div>
              <button class="tiny-button" id="recipeHelpButton" type="button">Runner guide</button>
            </div>
            <div id="recipeList" class="recipe-list"></div>
          </section>

          <aside class="studio-panel panel">
            <div class="panel-head">
              <div>
                <p class="section-label">Native Studio</p>
                <h3>NotebookLM Native Tools</h3>
              </div>
              <span class="count-badge" id="artifactCountBadge">—</span>
            </div>
            <div id="studioGrid" class="studio-grid"></div>
          </aside>
        </div>

        <section class="timeline-panel panel">
          <div class="panel-head">
            <div>
              <p class="section-label">Status Timeline</p>
              <h3>Generation Status and Output Files</h3>
            </div>
            <button class="tiny-button" id="clearJobsButton" type="button">Clear completed jobs</button>
          </div>
          <div id="timeline" class="timeline"></div>
        </section>
      </section>
    </main>

    <div class="command-overlay" id="commandOverlay" aria-hidden="true">
      <div class="command-palette">
        <div class="command-input">
          <span class="icon-search"></span>
          <input id="commandInput" placeholder="Search notebooks or type: untitled / video / 2026-03 / AI Agent" />
        </div>
        <div id="commandResults" class="command-results"></div>
      </div>
    </div>

    <template id="notebookCardTemplate">
      <button class="notebook-card" type="button">
        <div class="card-topline">
          <span class="status-badge">Ready</span>
          <span class="date-chip"></span>
        </div>
        <h3></h3>
        <p class="id-line"></p>
        <div class="card-metrics">
          <span><strong data-field="source-count">—</strong> sources</span>
          <span><strong data-field="artifact-count">—</strong> artifacts</span>
          <span><strong data-field="last-activity">—</strong> activity</span>
        </div>
        <div class="artifact-strip"></div>
        <div class="card-actions">
          <span>Open Data Room</span>
          <span class="icon-arrow"></span>
        </div>
      </button>
    </template>

    <script src="/app.js"></script>
  </body>
</html>

:root {
  color-scheme: dark;
  --bg: #10100f;
  --bg-2: #161614;
  --surface: rgba(247, 246, 238, 0.08);
  --surface-strong: rgba(247, 246, 238, 0.13);
  --surface-soft: rgba(247, 246, 238, 0.055);
  --text: #f7f3e8;
  --muted: rgba(247, 243, 232, 0.62);
  --faint: rgba(247, 243, 232, 0.38);
  --border: rgba(247, 243, 232, 0.14);
  --accent: #b8f56d;
  --accent-2: #73e0d4;
  --accent-3: #ff8d6c;
  --danger: #ff6f83;
  --warning: #ffd166;
  --ok: #9cf27d;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
  --radius: 22px;
  --font-display: "New York", "Iowan Old Style", Georgia, serif;
  --font-ui: "Avenir Next", "SF Pro Display", "Helvetica Neue", sans-serif;
}

body[data-theme="pearl"] {
  color-scheme: light;
  --bg: #f4f5f0;
  --bg-2: #ebece4;
  --surface: rgba(255, 255, 255, 0.76);
  --surface-strong: rgba(255, 255, 255, 0.94);
  --surface-soft: rgba(255, 255, 255, 0.55);
  --text: #171813;
  --muted: rgba(23, 24, 19, 0.62);
  --faint: rgba(23, 24, 19, 0.38);
  --border: rgba(23, 24, 19, 0.12);
  --accent: #205d4f;
  --accent-2: #b0522f;
  --accent-3: #7d5ef2;
  --shadow: 0 24px 80px rgba(60, 66, 48, 0.16);
}

body[data-theme="signal"] {
  --bg: #111111;
  --bg-2: #171514;
  --surface: rgba(255, 255, 255, 0.075);
  --surface-strong: rgba(255, 255, 255, 0.13);
  --surface-soft: rgba(255, 255, 255, 0.05);
  --text: #fffaf2;
  --muted: rgba(255, 250, 242, 0.65);
  --accent: #ffcc32;
  --accent-2: #3ce3ff;
  --accent-3: #ff5a88;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

body {
  margin: 0;
  height: 100%;
  background:
    radial-gradient(circle at 16% 5%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 26rem),
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 24rem),
    linear-gradient(135deg, var(--bg), var(--bg-2));
  color: var(--text);
  font-family: var(--font-ui);
  letter-spacing: 0;
  overflow-x: clip;
  overflow-y: hidden;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

.ambient {
  position: fixed;
  pointer-events: none;
  filter: blur(46px);
  opacity: 0.54;
  border-radius: 999px;
  transform: translateZ(0);
  animation: breathe 8s ease-in-out infinite;
}

.ambient-one {
  width: 19rem;
  height: 19rem;
  right: 12vw;
  top: 9vh;
  background: color-mix(in srgb, var(--accent) 34%, transparent);
}

.ambient-two {
  width: 17rem;
  height: 17rem;
  left: 8vw;
  bottom: 5vh;
  background: color-mix(in srgb, var(--accent-3) 25%, transparent);
  animation-delay: -3s;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.11;
  mix-blend-mode: overlay;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.app-shell {
  position: relative;
  z-index: 1;
  width: min(1480px, calc(100vw - 40px));
  height: 100vh;
  margin: 0 auto;
  padding: 22px 0 44px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 70px;
}

.brand,
.ghost-button,
.back-button,
.tiny-button,
.theme-switcher button,
.filter-pills button {
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(22px);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.brand:hover,
.ghost-button:hover,
.back-button:hover,
.tiny-button:hover,
.filter-pills button:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 8px 16px 8px 9px;
  text-align: left;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 7px;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 24%, transparent);
  overflow: hidden;
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand strong {
  display: block;
  font-size: 15px;
  line-height: 1.1;
}

.brand small,
.runner-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ghost-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  font-size: 13px;
}

kbd {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 1px 6px;
  color: var(--muted);
  font-size: 11px;
  background: var(--surface-soft);
}

.theme-switcher {
  display: flex;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  backdrop-filter: blur(24px);
}

.theme-switcher button {
  border: 0;
  background: transparent;
  padding: 8px 11px;
  color: var(--muted);
  font-size: 12px;
}

.theme-switcher button.active {
  color: var(--text);
  background: var(--surface-strong);
  box-shadow: inset 0 0 0 1px var(--border);
}

.view {
  display: none;
  animation: liftIn 420ms ease both;
}

.view.active {
  display: block;
}

.hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(290px, 0.7fr);
  gap: 24px;
  align-items: stretch;
  margin: 18px 0 22px;
  padding: 34px;
  border: 1px solid var(--border);
  border-radius: 32px;
  background:
    linear-gradient(135deg, var(--surface-strong), var(--surface-soft)),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 20rem);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.section-label {
  margin: 0 0 8px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 700;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: 0;
}

h1 {
  max-width: 820px;
  font-size: clamp(42px, 7vw, 86px);
  line-height: 0.94;
  font-weight: 600;
}

.hero-panel h1 {
  max-width: 760px;
  font-family: var(--font-ui);
  font-size: 72px;
  line-height: 1.06;
  font-weight: 800;
  text-wrap: balance;
}

h2 {
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1;
}

h3 {
  font-size: 23px;
  line-height: 1.08;
}

.hero-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.hero-stats div,
.panel,
.notebook-card,
.runner-card {
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(26px);
  box-shadow: var(--shadow);
}

.hero-stats div {
  padding: 18px;
  border-radius: 20px;
}

.hero-stats strong {
  display: block;
  font-size: 32px;
  line-height: 1;
}

.hero-stats span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.library-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.search-box,
.command-input {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  backdrop-filter: blur(24px);
}

.search-box input,
.command-input input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
}

.search-box input::placeholder,
.command-input input::placeholder {
  color: var(--faint);
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.filter-pills button {
  padding: 10px 13px;
  color: var(--muted);
  font-size: 13px;
}

.filter-pills button.active {
  color: #12130f;
  background: var(--accent);
}

.notebook-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.notebook-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 260px;
  padding: 18px;
  border-radius: 24px;
  text-align: left;
  overflow: hidden;
}

.notebook-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  opacity: 0;
  background: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 15rem);
  transition: opacity 200ms ease;
}

.notebook-card > * {
  position: relative;
}

.notebook-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
}

.notebook-card:hover::before {
  opacity: 1;
}

.card-topline,
.card-actions,
.detail-header,
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.status-badge,
.date-chip,
.count-badge,
.artifact-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 11px;
  white-space: nowrap;
}

.status-ready {
  color: var(--ok);
}

.status-warning {
  color: var(--warning);
}

.status-failed {
  color: var(--danger);
}

.notebook-card h3 {
  display: -webkit-box;
  min-height: 54px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.id-line {
  margin: 0;
  color: var(--faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.card-metrics span {
  min-height: 54px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 15px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 11px;
}

.card-metrics strong {
  display: block;
  color: var(--text);
  font-size: 17px;
}

.artifact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
}

.artifact-pill.done {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
}

.card-actions {
  margin-top: auto;
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
}

.detail-view {
  padding-top: 18px;
}

.detail-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(260px, auto);
  align-items: center;
}

.detail-header h2 {
  max-width: 980px;
  line-height: 0.96;
}

.back-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
}

.muted {
  color: var(--muted);
}

.runner-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
  padding: 12px 14px;
  border-radius: 18px;
}

.pulse-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
  animation: pulse 1.8s ease infinite;
}

.data-room {
  display: grid;
  grid-template-columns: minmax(240px, 0.74fr) minmax(520px, 1.55fr) minmax(320px, 0.95fr);
  gap: 16px;
  margin-top: 18px;
  align-items: start;
}

.panel {
  border-radius: 26px;
  padding: 18px;
}

.data-room > .panel {
  display: flex;
  flex-direction: column;
  height: clamp(560px, calc(100vh - 252px), 720px);
  min-height: 0;
}

.panel-head {
  flex: 0 0 auto;
}

.source-list,
.recipe-list,
.studio-grid,
.timeline {
  margin-top: 16px;
}

.source-list {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-gutter: stable;
}

.source-item,
.recipe-card,
.studio-button,
.job-card,
.command-result {
  border: 1px solid var(--border);
  background: var(--surface-soft);
  border-radius: 18px;
}

.source-item {
  padding: 11px 12px;
}

.source-item strong,
.job-card strong {
  display: block;
  line-height: 1.25;
}

.source-item strong {
  display: -webkit-box;
  font-size: 14px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.source-item span,
.source-item small,
.job-card small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.recipe-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  grid-auto-rows: minmax(136px, auto);
  align-items: stretch;
  min-height: 0;
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-gutter: stable;
}

.recipe-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 136px;
  padding: 11px;
  overflow: hidden;
}

.recipe-card::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -50px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-2) 18%, transparent);
}

.recipe-card h4,
.studio-button h4 {
  position: relative;
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.15;
}

.recipe-card p {
  display: none;
}

.recipe-card .output-chips {
  align-content: start;
  margin: 6px 0 9px;
  min-height: 0;
}

.output-chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 6px 0 10px;
}

.output-chips span {
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  background: var(--surface);
}

.run-button,
.studio-button {
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.run-button {
  position: relative;
  width: 100%;
  align-self: end;
  min-height: 34px;
  border: 0;
  border-radius: 13px;
  padding: 8px 10px;
  color: #11130f;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent-2) 68%, var(--accent)));
  font-weight: 800;
}

.run-button:hover,
.studio-button:hover {
  transform: translateY(-2px);
}

.studio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-gutter: stable;
}

.studio-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  width: 100%;
  min-height: 94px;
  padding: 11px;
  text-align: left;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--tool-tint) 18%, transparent), transparent 7rem),
    color-mix(in srgb, var(--tool-bg) 38%, var(--surface-soft));
}

.studio-icon {
  display: block;
  width: 25px;
  height: 25px;
  color: var(--tool-tint);
  background: transparent;
  grid-column: 1;
  grid-row: 1;
}

.studio-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.studio-button h4 {
  margin: 0;
  font-size: 13px;
  line-height: 1.12;
}

.studio-copy {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

.studio-description {
  display: none;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.25;
}

.tool-arrow {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--text);
  background: color-mix(in srgb, var(--text) 9%, transparent);
  font-size: 24px;
  line-height: 1;
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  align-self: center;
}

.studio-button[data-tool-id="audio"] {
  --tool-tint: #e6ddff;
  --tool-bg: #59536f;
}

.studio-button[data-tool-id="slide-deck"] {
  --tool-tint: #fff4a6;
  --tool-bg: #5d5940;
}

.studio-button[data-tool-id="video"] {
  --tool-tint: #cdf6df;
  --tool-bg: #405d4b;
}

.studio-button[data-tool-id="mind-map"] {
  --tool-tint: #ffd0f2;
  --tool-bg: #604356;
}

.studio-button[data-tool-id="report"] {
  --tool-tint: #eef5be;
  --tool-bg: #565b3d;
}

.studio-button[data-tool-id="flashcards"] {
  --tool-tint: #ffd8cf;
  --tool-bg: #604a43;
}

.studio-button[data-tool-id="quiz"] {
  --tool-tint: #c8f7ff;
  --tool-bg: #40515d;
}

.studio-button[data-tool-id="infographic"] {
  --tool-tint: #f2c7ee;
  --tool-bg: #604156;
}

.studio-button[data-tool-id="data-table"] {
  --tool-tint: #dadcff;
  --tool-bg: #494c63;
}

.timeline-panel {
  margin-top: 14px;
}

.timeline {
  display: grid;
  gap: 7px;
}

.job-card {
  display: grid;
  gap: 6px;
  padding: 9px 10px 10px;
  font-family: "Sohne", "Avenir Next", "SF Pro Text", "Helvetica Neue", sans-serif;
  border-radius: 16px;
}

.job-card strong {
  font-size: 12.5px;
}

.job-header-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(172px, auto);
  gap: 10px;
  align-items: start;
}

.job-title-block {
  min-width: 0;
}

.job-title-block strong,
.job-title-block small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-title-block small {
  margin-top: 3px;
}

.job-body {
  min-width: 0;
}

.job-card .output-chips {
  margin: 3px 0 5px;
}

.job-card-single .output-chips {
  display: none;
}

.job-status-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(172px, 0.16fr);
  gap: 10px;
  align-items: start;
}

.job-card-single .job-status-grid {
  margin-top: 2px;
}

.progress-track {
  height: 5px;
  margin-top: 6px;
  border-radius: 99px;
  background: var(--surface-soft);
  overflow: hidden;
}

.preview-warning {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--border));
  border-radius: 12px;
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  font-size: 12px;
}

.output-list {
  display: grid;
  gap: 5px;
  margin-top: 0;
}

.output-list span {
  display: grid;
  grid-template-columns: minmax(120px, 0.35fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
}

.output-list strong {
  color: var(--text);
  font-size: 11.5px;
}

.output-list em {
  min-width: 0;
  color: var(--muted);
  font-size: 10.5px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-action-panel {
  display: grid;
  justify-items: end;
  min-width: 0;
}

.job-action-panel small {
  display: none;
  max-width: 230px;
  min-width: 0;
  color: var(--faint);
  font-size: 10px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.handoff-button {
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 999px;
  padding: 7px 11px;
  color: #10120e;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.job-card-summary {
  padding: 9px 10px;
}

.job-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
  gap: 12px;
  align-items: center;
}

.job-summary-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.job-summary-status em {
  max-width: 120px;
  color: var(--faint);
  font-size: 10.5px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.handoff-button:disabled {
  color: var(--muted);
  background: var(--surface-soft);
  border-color: var(--border);
  cursor: not-allowed;
  opacity: 0.58;
}

.prompt-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  place-items: center;
  padding: 32px;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(20px);
  overflow: auto;
}

.prompt-overlay.active {
  display: grid;
}

.prompt-panel {
  display: grid;
  grid-template-rows: auto auto minmax(260px, 1fr) auto;
  gap: 14px;
  width: min(920px, calc(100vw - 64px));
  max-height: calc(100vh - 64px);
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg-2) 91%, transparent);
  box-shadow: 0 28px 120px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.prompt-panel-head,
.prompt-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  min-width: 0;
}

.prompt-panel h3,
.prompt-status {
  margin: 0;
}

.prompt-status,
.prompt-footer small {
  color: var(--muted);
  font-size: 12px;
}

.prompt-textarea {
  display: block;
  width: 100%;
  min-width: 0;
  height: clamp(320px, 52vh, 520px);
  resize: none;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  color: var(--text);
  background: var(--surface-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  overflow: auto;
}

.prompt-footer small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prompt-footer div {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  .prompt-overlay {
    padding: 16px;
  }

  .prompt-panel {
    width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
  }

  .prompt-panel-head,
  .prompt-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .prompt-footer small {
    white-space: normal;
  }
}

.progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.step-list {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.step-list span {
  display: flex;
  align-items: center;
  min-height: 26px;
  padding: 0 0 0 2px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tiny-button {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--muted);
}

.command-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  place-items: start center;
  padding-top: 9vh;
  background: rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(18px);
}

.command-overlay.active {
  display: grid;
}

.command-palette {
  width: min(760px, calc(100vw - 36px));
  border: 1px solid var(--border);
  border-radius: 26px;
  background: color-mix(in srgb, var(--bg-2) 82%, transparent);
  box-shadow: 0 28px 120px rgba(0, 0, 0, 0.45);
  padding: 12px;
}

.command-input {
  border-radius: 18px;
}

.command-results {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 50vh;
  overflow: auto;
}

.command-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
}

.command-result strong {
  display: block;
}

.command-result small {
  color: var(--muted);
}

.icon-search,
.icon-arrow {
  display: inline-block;
  width: 16px;
  height: 16px;
}

.icon-search {
  border: 2px solid currentColor;
  border-radius: 50%;
  position: relative;
  opacity: 0.75;
}

.icon-search::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 2px;
  right: -5px;
  bottom: -2px;
  border-radius: 4px;
  background: currentColor;
  transform: rotate(45deg);
}

.icon-arrow::before {
  content: "→";
  font-size: 17px;
}

.icon-arrow-left::before {
  content: "←";
}

@keyframes liftIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes breathe {
  50% {
    transform: scale(1.08) translate3d(2vw, -1vh, 0);
  }
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent);
  }
}

@media (max-width: 1100px) {
  .hero-panel h1 {
    font-size: 58px;
  }

  .detail-header {
    grid-template-columns: 1fr;
  }

  .notebook-grid,
  .data-room {
    grid-template-columns: 1fr 1fr;
  }

  .data-room > .panel {
    height: auto;
    max-height: none;
  }

  .recipes-panel {
    grid-column: 1 / -1;
    order: -1;
  }

  .source-list,
  .recipe-list,
  .studio-grid {
    max-height: 520px;
  }
}

@media (max-width: 780px) {
  .app-shell {
    width: min(100vw - 24px, 720px);
  }

  .topbar,
  .detail-header,
  .library-toolbar,
  .hero-panel {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .top-actions,
  .filter-pills {
    justify-content: flex-start;
  }

  .notebook-grid,
  .data-room,
  .recipe-list,
  .studio-grid,
  .job-card {
    grid-template-columns: 1fr;
  }

  .hero-panel {
    padding: 24px;
  }

  .hero-panel h1 {
    font-size: 42px;
    line-height: 1.04;
  }
}

@media (max-width: 560px) {
  .job-header-row,
  .job-status-grid,
  .job-summary-row {
    grid-template-columns: 1fr;
  }

  .job-action-panel {
    justify-items: start;
  }

  .job-action-panel small {
    max-width: 100%;
    text-align: left;
  }

  .job-summary-status {
    justify-content: flex-start;
  }
}