@cyber-dash-tech/revela 0.16.4 → 0.17.1

package/lib/qa/checks.ts

@@ -23,9 +23,10 @@ import { CANVAS_W, CANVAS_H } from "./measure"
 export type IssueSeverity = "error" | "warning" | "info"
 
 export interface LayoutIssue {
-  type: "canvas" | "scrollbar" | "overflow" | "text_overflow" | "density" | "balance" | "symmetry" | "rhythm" | "compliance" | "asset"
+  type: "canvas" | "scrollbar" | "navigation" | "overflow" | "text_overflow" | "overlap" | "density" | "balance" | "symmetry" | "rhythm" | "compliance" | "asset"
   /** Sub-category within the dimension */
-  sub?: "size_mismatch" | "page_scroll" | "text_clipped" | "thin_content"
+  sub?: "size_mismatch" | "page_scroll" | "fixed_overlay_slides" | "hidden_paging" | "unreachable_slides" | "text_clipped" | "thin_content"
+      | "element_collision" | "major_overlap" | "possible_overlay"
       | "centroid_offset" | "bottom_gap" | "sparse"
       | "height_mismatch" | "density_mismatch"
       | "gap_variance"
@@ -81,6 +82,12 @@ const T = {
   CANVAS_TOLERANCE: 1,
   DENSITY_MIN_TEXT_POINTS: 70,
   DENSITY_MIN_UNITS: 2,
+  OVERLAP_MIN_AREA: 1600,
+  OVERLAP_MIN_ELEMENT_AREA: 5000,
+  OVERLAP_WARN_RATIO: 0.08,
+  OVERLAP_ERROR_RATIO: 0.18,
+  OVERLAP_TEXT_WARN_RATIO: 0.05,
+  OVERLAP_TEXT_ERROR_RATIO: 0.12,
 }
 
 // ── Geometry helpers ──────────────────────────────────────────────────────────
@@ -205,15 +212,78 @@ function checkCanvas(metrics: SlideMetrics): LayoutIssue[] {
 }
 
 function checkScrollbars(metrics: SlideMetrics): LayoutIssue[] {
-  if (!metrics.hasScrollbars) return []
+  const scrollbars = metrics.scrollbars
+  const totalSlides = metrics.navigation?.totalSlides ?? 1
+  const hasAllowedMultiSlideVerticalScroll = totalSlides > 1
+
+  if (scrollbars) {
+    const hasBlockingScrollbars =
+      scrollbars.documentHorizontal ||
+      scrollbars.bodyHorizontal ||
+      scrollbars.slideHorizontal ||
+      scrollbars.slideVertical ||
+      (!hasAllowedMultiSlideVerticalScroll && (scrollbars.documentVertical || scrollbars.bodyVertical))
+
+    if (!hasBlockingScrollbars) return []
+  } else if (!metrics.hasScrollbars) {
+    return []
+  }
+
   return [{
     type: "scrollbar",
     sub: "page_scroll",
     severity: "error",
-    detail: "Rendered slide/page has scrollbars at 1920x1080. Deck slides must fit the fixed canvas without document, body, or slide scrolling.",
+    detail: "Rendered slide/page has blocking scrollbars at 1920x1080. Normal vertical document scroll is allowed for multi-slide navigation, but horizontal document/body scroll and slide-internal scroll must be removed.",
   }]
 }
 
+function checkNavigationModel(allMetrics: SlideMetrics[]): LayoutIssue[] {
+  if (allMetrics.length <= 1) return []
+
+  const nav = allMetrics.map((metrics) => metrics.navigation).filter((item): item is NonNullable<SlideMetrics["navigation"]> => Boolean(item))
+  if (nav.length <= 1) return []
+
+  const positioned = nav.filter((item) => item.position === "fixed" || item.position === "absolute")
+  const hiddenByAria = nav.filter((item) => item.ariaHidden === "true" || item.visibility === "hidden" || item.display === "none")
+  const uniqueTops = new Set(nav.map((item) => Math.round(item.initialTop)))
+  const stacked = uniqueTops.size <= 1
+  const documentCanScroll = nav[0].documentScrollHeight > nav[0].viewportHeight + 2
+  const overflowHidden = nav[0].bodyOverflowY === "hidden" || nav[0].documentOverflowY === "hidden"
+
+  const issues: LayoutIssue[] = []
+  if (positioned.length === nav.length && stacked) {
+    issues.push({
+      type: "navigation",
+      sub: "fixed_overlay_slides",
+      severity: "error",
+      detail: "Slides are stacked with fixed/absolute positioning. Revela decks must keep each .slide in normal document flow so scrollIntoView and keyboard navigation can reach every slide.",
+      data: { slideCount: nav.length, positionedSlides: positioned.length },
+    })
+  }
+
+  if (positioned.length === nav.length && hiddenByAria.length > 0) {
+    issues.push({
+      type: "navigation",
+      sub: "hidden_paging",
+      severity: "error",
+      detail: "Slides use aria-hidden/visibility toggles with fixed overlay pagination. Do not make slide visibility depend on aria-hidden; keep slides visible in normal flow and navigate with scrollIntoView.",
+      data: { hiddenSlides: hiddenByAria.length, slideCount: nav.length },
+    })
+  }
+
+  if (!documentCanScroll && overflowHidden && allMetrics.length > 1) {
+    issues.push({
+      type: "navigation",
+      sub: "unreachable_slides",
+      severity: "error",
+      detail: "Multi-slide deck disables document vertical scrolling. Normal slide flow needs enough document height for all slides; fix slide overflow locally instead of hiding body/html overflow.",
+      data: { slideCount: nav.length, documentScrollHeight: nav[0].documentScrollHeight, viewportHeight: nav[0].viewportHeight },
+    })
+  }
+
+  return issues
+}
+
 /**
  * Check 1: Overflow — elements extending beyond canvas boundaries.
  * Hard correctness check; applies to all slide types.
@@ -270,6 +340,132 @@ function checkTextOverflow(metrics: SlideMetrics): LayoutIssue[] {
   return issues
 }
 
+const SEMANTIC_COMPONENT_CLASSES = [
+  "box",
+  "text-panel",
+  "media",
+  "echart-panel",
+  "data-table",
+  "stat-card",
+  "quote",
+  "hero",
+  "toc",
+  "steps",
+  "roadmap-horizontal",
+  "roadmap-vertical",
+]
+
+const DECORATIVE_CLASSES = [
+  "page-number",
+  "brand-watermark",
+  "watermark",
+  "background",
+  "decorative",
+  "motif",
+]
+
+function checkElementOverlap(metrics: SlideMetrics): LayoutIssue[] {
+  const candidates = overlapCandidates(metrics.elements)
+  const issues: LayoutIssue[] = []
+
+  for (let i = 0; i < candidates.length; i++) {
+    for (let j = i + 1; j < candidates.length; j++) {
+      const a = candidates[i]
+      const b = candidates[j]
+      if (isIntentionalOverlayPair(a, b)) continue
+
+      const overlap = intersection(a.rect, b.rect)
+      if (!overlap) continue
+
+      const intersectionArea = overlap.width * overlap.height
+      if (intersectionArea < T.OVERLAP_MIN_AREA) continue
+
+      const minArea = Math.min(area(a.rect), area(b.rect))
+      if (minArea <= 0) continue
+
+      const ratio = intersectionArea / minArea
+      const textSensitive = hasText(a) || hasText(b)
+      const errorRatio = textSensitive ? T.OVERLAP_TEXT_ERROR_RATIO : T.OVERLAP_ERROR_RATIO
+      const warnRatio = textSensitive ? T.OVERLAP_TEXT_WARN_RATIO : T.OVERLAP_WARN_RATIO
+      if (ratio < warnRatio) continue
+
+      const severity: IssueSeverity = ratio >= errorRatio ? "error" : "warning"
+      issues.push({
+        type: "overlap",
+        sub: severity === "error" ? "element_collision" : "possible_overlay",
+        severity,
+        detail: `Elements \`${a.selector}\` and \`${b.selector}\` overlap by ${Math.round(ratio * 100)}% of the smaller element (${Math.round(intersectionArea)}px²). Separate the components, reduce content, or choose a layout with more space.`,
+        data: {
+          elementA: a.selector,
+          elementB: b.selector,
+          overlapRatioPct: Math.round(ratio * 100),
+          intersectionArea: Math.round(intersectionArea),
+          rectA: rectData(a.rect),
+          rectB: rectData(b.rect),
+        },
+      })
+    }
+  }
+
+  return issues
+}
+
+function overlapCandidates(elements: ElementInfo[]): ElementInfo[] {
+  const semantic = elements.flatMap((element) => semanticDescendants(element))
+  const base = semantic.length > 1 ? semantic : elements.filter((element) => element.visible)
+  return base.filter((element) => {
+    if (!element.visible) return false
+    if (area(element.rect) < T.OVERLAP_MIN_ELEMENT_AREA) return false
+    if (isDecorative(element)) return false
+    return true
+  })
+}
+
+function semanticDescendants(element: ElementInfo): ElementInfo[] {
+  if (!element.visible || isDecorative(element)) return []
+  if (isSemanticComponent(element)) return [element]
+  return element.children.flatMap((child) => semanticDescendants(child))
+}
+
+function isSemanticComponent(element: ElementInfo): boolean {
+  return element.classList.some((className) =>
+    SEMANTIC_COMPONENT_CLASSES.includes(className) || className.startsWith("roadmap-")
+  )
+}
+
+function isDecorative(element: ElementInfo): boolean {
+  return element.classList.some((className) =>
+    DECORATIVE_CLASSES.includes(className) || className.startsWith("decorative-") || className.startsWith("background-")
+  )
+}
+
+function isIntentionalOverlayPair(a: ElementInfo, b: ElementInfo): boolean {
+  const classes = new Set([...a.classList, ...b.classList])
+  return classes.has("hero") && (classes.has("media") || classes.has("text-panel"))
+}
+
+function intersection(a: Rect, b: Rect): Rect | undefined {
+  const left = Math.max(a.left, b.left)
+  const top = Math.max(a.top, b.top)
+  const right = Math.min(a.right, b.right)
+  const bottom = Math.min(a.bottom, b.bottom)
+  if (right <= left || bottom <= top) return undefined
+  return { left, top, right, bottom, width: right - left, height: bottom - top }
+}
+
+function area(rect: Rect): number {
+  return Math.max(0, rect.width) * Math.max(0, rect.height)
+}
+
+function hasText(element: ElementInfo): boolean {
+  if (element.text?.trim()) return true
+  return element.children.some(hasText)
+}
+
+function rectData(rect: Rect): string {
+  return `${Math.round(rect.left)},${Math.round(rect.top)},${Math.round(rect.right)},${Math.round(rect.bottom)}`
+}
+
 function checkContentDensity(metrics: SlideMetrics): LayoutIssue[] {
   if (!metrics.slideQa) return []
   const { bodyTextPoints, contentUnits, supportReferences } = metrics.contentStats
@@ -621,13 +817,16 @@ export function runChecks(
   _options?: RunChecksOptions,
 ): QAReport {
   const slides: SlideReport[] = []
+  const navigationIssues = checkNavigationModel(allMetrics)
 
   for (const metrics of allMetrics) {
     const issues: LayoutIssue[] = [
+      ...(metrics.index === 0 ? navigationIssues : []),
       ...checkCanvas(metrics),
       ...checkScrollbars(metrics),
       ...checkOverflow(metrics),
       ...checkTextOverflow(metrics),
+      ...checkElementOverlap(metrics),
       ...checkContentDensity(metrics),
     ]
 
@@ -693,9 +892,11 @@ export function formatReport(report: QAReport): string {
     ``,
     `Please fix the above hard-error issues in the HTML file. For each issue type:`,
     `- **canvas**: ensure each slide and .slide-canvas render exactly 1920x1080px, not merely any 16:9 size.`,
-    `- **scrollbar**: remove document/body/slide scrolling; content must fit inside the fixed 1920x1080 canvas.`,
+    `- **scrollbar**: remove horizontal document/body scrolling and slide-internal scrolling. Multi-slide decks may use normal vertical document scroll for navigation.`,
+    `- **navigation**: keep every .slide in normal document flow; do not stack slides with fixed/absolute positioning or rely on aria-hidden/visibility toggles for pagination. Use scrollIntoView-based navigation.`,
     `- **overflow**: reduce font size, padding, or content amount for the affected element.`,
     `- **text_overflow**: increase the text container size, reduce copy, or adjust font/line-height so text is not clipped.`,
+    `- **overlap**: separate overlapping components, reduce copy, resize media/table/chart blocks, or use a layout with more space.`,
     `- **density/thin_content**: add concrete claim/evidence points, metrics, chart/table support, or source/caveat text. This is a warning for content substance, not a blank-space failure.`,
     `- **compliance/unknown_class**: an HTML element uses a CSS class not defined in the active design. Replace it with a class from the Component Index or Layout Index. Fetch the component/layout details with the \`revela-designs\` tool if needed.`,
     `- **compliance/novel_css_rule**: \`<style>\` defines a CSS class that is not part of the active design. Remove the custom rule and use the design's existing component styles. For minor spacing/sizing adjustments, use inline \`style=""\` instead.`,

package/lib/qa/measure.ts

@@ -64,6 +64,29 @@ export interface SlideContentStats {
   supportReferences: number
 }
 
+export interface ScrollbarMetrics {
+  documentHorizontal: boolean
+  documentVertical: boolean
+  bodyHorizontal: boolean
+  bodyVertical: boolean
+  slideHorizontal: boolean
+  slideVertical: boolean
+}
+
+export interface SlideNavigationMetrics {
+  totalSlides: number
+  initialTop: number
+  initialLeft: number
+  position: string
+  visibility: string
+  display: string
+  ariaHidden: string | null
+  bodyOverflowY: string
+  documentOverflowY: string
+  documentScrollHeight: number
+  viewportHeight: number
+}
+
 export interface SlideMetrics {
   /** 0-based slide index */
   index: number
@@ -82,6 +105,10 @@ export interface SlideMetrics {
   slideRect: Rect
   /** whether document/body/slide has scrollbars at 1920x1080 */
   hasScrollbars: boolean
+  /** detailed scrollbar source signals for document/body/slide */
+  scrollbars?: ScrollbarMetrics
+  /** deck navigation model signals captured before per-slide scrolling */
+  navigation?: SlideNavigationMetrics
   /** top-level visible children of .slide-canvas */
   elements: ElementInfo[]
   /** union bounding box of all visible leaf elements */
@@ -163,6 +190,31 @@ export async function measureSlides(htmlFilePath: string): Promise<MeasurementRe
       () => document.querySelectorAll(".slide").length
     )
 
+    const navigationData = await page.evaluate(() => {
+      const doc = document.documentElement
+      const body = document.body
+      const docStyle = window.getComputedStyle(doc)
+      const bodyStyle = window.getComputedStyle(body)
+      const slides = Array.from(document.querySelectorAll(".slide")) as HTMLElement[]
+      return slides.map((slide) => {
+        const rect = slide.getBoundingClientRect()
+        const style = window.getComputedStyle(slide)
+        return {
+          totalSlides: slides.length,
+          initialTop: rect.top,
+          initialLeft: rect.left,
+          position: style.position,
+          visibility: style.visibility,
+          display: style.display,
+          ariaHidden: slide.getAttribute("aria-hidden"),
+          bodyOverflowY: bodyStyle.overflowY,
+          documentOverflowY: docStyle.overflowY,
+          documentScrollHeight: doc.scrollHeight,
+          viewportHeight: window.innerHeight,
+        }
+      })
+    })
+
     const metrics: SlideMetrics[] = []
 
     for (let idx = 0; idx < slideCount; idx++) {
@@ -370,6 +422,15 @@ export async function measureSlides(htmlFilePath: string): Promise<MeasurementRe
             slideEl.scrollWidth > slideEl.clientWidth + 2 ||
             slideEl.scrollHeight > slideEl.clientHeight + 2
 
+          const scrollbars = {
+            documentHorizontal: doc.scrollWidth > window.innerWidth + 2,
+            documentVertical: doc.scrollHeight > window.innerHeight + 2,
+            bodyHorizontal: body.scrollWidth > window.innerWidth + 2,
+            bodyVertical: body.scrollHeight > window.innerHeight + 2,
+            slideHorizontal: slideEl.scrollWidth > slideEl.clientWidth + 2,
+            slideVertical: slideEl.scrollHeight > slideEl.clientHeight + 2,
+          }
+
           const titleEl = canvas.querySelector("h1, h2")
           const title = titleEl
             ? (titleEl.textContent || "").replace(/\s+/g, " ").trim().slice(0, 80)
@@ -382,6 +443,7 @@ export async function measureSlides(htmlFilePath: string): Promise<MeasurementRe
             canvasRect,
             slideRect,
             hasScrollbars,
+            scrollbars,
             elements,
             contentRect: unionRect(elements),
             contentStats: { bodyTextPoints, contentUnits, supportReferences },
@@ -390,7 +452,7 @@ export async function measureSlides(htmlFilePath: string): Promise<MeasurementRe
         idx
       )
 
-      if (slideData) metrics.push(slideData as SlideMetrics)
+      if (slideData) metrics.push({ ...(slideData as SlideMetrics), navigation: navigationData[idx] })
     }
 
     // Extract all CSS class names defined in <style> blocks.

package/lib/refine/server.ts

@@ -253,35 +253,105 @@ async function handleAssetSave(req: Request, session: EditSession): Promise<Resp
   const candidate = normalizeImageCandidate(body?.candidate ?? body)
   if (!candidate) return jsonResponse({ ok: false, error: "Valid image candidate is required" }, 400)
   const purpose = normalizeMediaPurpose(body?.purpose) || candidate.purpose || "illustration"
-  const result = await saveMediaAsset({
-    topic: session.deck,
+  const brief = body?.brief || `Saved from ${candidate.provider} for Review asset placement.`
+  const saved = await saveAssetCandidateUrls({
+    session,
+    candidate,
     id: body?.id || candidate.candidateId,
-    type: "image",
     purpose,
-    brief: body?.brief || `Saved from ${candidate.provider} for Review asset placement.`,
-    status: "success",
-    sourceUrl: candidate.imageUrl,
+    brief,
     alt: body?.alt || candidate.alt || candidate.title,
     notes: body?.notes,
-    provider: candidate.provider,
-    sourcePageUrl: candidate.sourcePageUrl,
-    license: candidate.license,
-    attribution: candidate.attribution,
-    width: candidate.width,
-    height: candidate.height,
-  }, session.workspaceRoot)
+  })
 
   session.lastActiveAt = Date.now()
   scheduleIdleStop()
+  const result = saved.result
   if (!result.ok) return jsonResponse({ ok: false, error: result.error }, 400)
   if (result.status !== "success" || !result.path) {
-    return jsonResponse({ ok: false, error: `Failed to save asset: ${result.status}` }, 400)
+    return jsonResponse({ ok: false, error: failedAssetSaveMessage(result.status, saved.failures) }, 400)
   }
   const asset = savedAssetForResult(session, result.assetId)
+    ?? savedAssetFallback(session, {
+      id: result.assetId,
+      path: result.path,
+      sourceUrl: saved.sourceUrl,
+      purpose,
+      brief,
+      candidate,
+    })
   if (!asset) return jsonResponse({ ok: false, error: "Saved asset was not found in workspace assets." }, 500)
   return jsonResponse({ ok: true, asset, result })
 }
 
+async function saveAssetCandidateUrls(input: {
+  session: EditSession
+  candidate: ImageCandidate
+  id: string
+  purpose: MediaPurpose
+  brief: string
+  alt?: string
+  notes?: string
+}): Promise<{
+  result: Awaited<ReturnType<typeof saveMediaAsset>>
+  sourceUrl?: string
+  failures: Array<{ url: string; status: string }>
+}> {
+  const urls = uniqueAssetUrls([input.candidate.imageUrl, input.candidate.thumbnailUrl])
+  const failures: Array<{ url: string; status: string }> = []
+  let lastResult: Awaited<ReturnType<typeof saveMediaAsset>> | undefined
+
+  for (const sourceUrl of urls) {
+    const result = await saveMediaAsset({
+      topic: input.session.deck,
+      id: input.id,
+      type: "image",
+      purpose: input.purpose,
+      brief: input.brief,
+      status: "success",
+      sourceUrl,
+      alt: input.alt,
+      notes: input.notes,
+      provider: input.candidate.provider,
+      sourcePageUrl: input.candidate.sourcePageUrl,
+      license: input.candidate.license,
+      attribution: input.candidate.attribution,
+      width: input.candidate.width,
+      height: input.candidate.height,
+    }, input.session.workspaceRoot)
+    lastResult = result
+    if (result.ok && result.status === "success" && result.path) return { result, sourceUrl, failures }
+    failures.push({ url: sourceUrl, status: result.ok ? result.failureReason ?? result.status : result.error })
+  }
+
+  return {
+    result: lastResult ?? { ok: false, error: "No downloadable image URL was provided" },
+    failures,
+  }
+}
+
+function uniqueAssetUrls(values: Array<string | undefined>): string[] {
+  const seen = new Set<string>()
+  return values.flatMap((value) => {
+    const url = value?.trim()
+    if (!url || seen.has(url)) return []
+    seen.add(url)
+    return [url]
+  })
+}
+
+function failedAssetSaveMessage(status: string, failures: Array<{ url: string; status: string }>): string {
+  if (!failures.length) return `Failed to save asset: ${status}`
+  const details = failures
+    .map((failure) => `${shortUrl(failure.url)}: ${failure.status}`)
+    .join("; ")
+  return `Failed to save asset: ${status} (${details})`
+}
+
+function shortUrl(value: string): string {
+  return value.length <= 96 ? value : `${value.slice(0, 93)}...`
+}
+
 function handleAssetList(session: EditSession): Response {
   session.lastActiveAt = Date.now()
   scheduleIdleStop()
@@ -292,6 +362,39 @@ function savedAssetForResult(session: EditSession, assetId: string): (MediaAsset
   return listSavedAssets(session).find((asset) => asset.id === assetId) ?? null
 }
 
+function savedAssetFallback(
+  session: EditSession,
+  input: {
+    id: string
+    path: string | null
+    sourceUrl?: string
+    purpose: MediaPurpose
+    brief: string
+    candidate: ImageCandidate
+  },
+): (MediaAssetRecord & { previewUrl?: string; deckPath?: string }) | null {
+  if (!input.path) return null
+  return {
+    id: input.id,
+    type: "image",
+    purpose: input.purpose,
+    brief: input.brief,
+    status: "success",
+    path: input.path,
+    sourceUrl: input.sourceUrl ?? input.candidate.imageUrl,
+    alt: input.candidate.alt || input.candidate.title,
+    provider: input.candidate.provider,
+    sourcePageUrl: input.candidate.sourcePageUrl,
+    license: input.candidate.license,
+    attribution: input.candidate.attribution,
+    width: input.candidate.width,
+    height: input.candidate.height,
+    savedAt: new Date().toISOString(),
+    previewUrl: assetUrlForRef(input.path, session, session.workspaceRoot) ?? undefined,
+    deckPath: relative(dirname(session.absoluteFile), resolve(session.workspaceRoot, input.path)).replace(/\\/g, "/"),
+  }
+}
+
 function listSavedAssets(session: EditSession): Array<MediaAssetRecord & { previewUrl?: string; deckPath?: string }> {
   const manifestPath = resolve(session.workspaceRoot, "assets", slugify(session.deck), "media-manifest.json")
   if (!existsSync(manifestPath)) return []
@@ -891,6 +994,7 @@ export function renderRefineShell(token: string, defaultMode: RefineMode = "edit
     .skeleton-line.long { width: 92%; }
     .asset-card.is-saving::after { content: ""; position: absolute; inset: 0; background: rgba(15,23,42,.32); }
     .asset-card.is-saving .asset-save { z-index: 1; }
+    .asset-card.is-saved-candidate .asset-thumb { opacity: .72; }
     @keyframes spin { to { transform: rotate(360deg); } }
     @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
     .asset-search { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 8px; }
@@ -913,6 +1017,7 @@ export function renderRefineShell(token: string, defaultMode: RefineMode = "edit
     .asset-search-title span { color: #756f66; font-size: 12px; line-height: 1.35; }
     .asset-back { width: auto; padding: 9px 11px; border-radius: 999px; background: #ebe4d8; color: #111827; box-shadow: none; }
     .asset-save { position: absolute; left: 7px; right: 7px; bottom: 7px; width: auto; padding: 7px 8px; border-radius: 10px; font-size: 11px; background: rgba(17,24,39,.9); color: #fbfaf7; box-shadow: 0 8px 16px rgba(31,41,51,.2); opacity: .96; }
+    .asset-save.saved { background: rgba(77,97,56,.94); color: #fbfaf7; cursor: default; }
     .asset-empty { grid-column: 1 / -1; margin: 0; color: #756f66; font-size: 12px; line-height: 1.45; }
     .edit-assets { padding: 10px; border: 1px solid #d8d2c6; border-radius: 16px; background: #f7f3ea; }
     .edit-assets .panel { gap: 8px; }
@@ -2000,9 +2105,13 @@ export function renderRefineShell(token: string, defaultMode: RefineMode = "edit
         }
         state.assetCandidates.forEach((candidate, index) => {
           const card = assetCard(candidate, false, index);
+          const savedAsset = savedAssetForCandidate(candidate);
           if (state.assetSavingIndex === index) {
             card.classList.add('is-saving');
             appendAssetSaveButton(card, 'Saving...', 'Saving to workspace', () => {}, true);
+          } else if (savedAsset) {
+            card.classList.add('is-saved-candidate');
+            appendAssetSaveButton(card, '✅ Saved', 'Asset already saved to Local Assets', () => {}, false, 'saved');
           } else {
             appendAssetSaveButton(card, 'Save', 'Save to workspace', () => saveCandidate(index));
           }
@@ -2025,7 +2134,11 @@ export function renderRefineShell(token: string, defaultMode: RefineMode = "edit
           });
           const body = await res.json().catch(() => ({}));
           if (!res.ok || !body.ok) throw new Error(body.error || 'Failed to save asset');
-          await loadSavedAssets();
+          const listed = await loadSavedAssets();
+          if (body.asset && (!listed || !findSavedAsset(body.asset.id))) {
+            mergeSavedAsset(body.asset);
+            renderSavedAssets();
+          }
           const path = body.asset && (body.asset.path || body.asset.deckPath);
           setStatus(path ? 'Saved to ' + path + '. Use it from Local Assets.' : 'Asset saved. Use it from Local Assets.');
         } catch (error) {
@@ -2043,12 +2156,36 @@ export function renderRefineShell(token: string, defaultMode: RefineMode = "edit
           if (!res.ok || !body.ok) throw new Error(body.error || 'Failed to list assets');
           state.savedAssets = Array.isArray(body.assets) ? body.assets : [];
           renderSavedAssets();
+          return true;
         } catch (error) {
-          const message = '<p class="asset-empty">' + escapeHtml(error && error.message ? error.message : String(error)) + '</p>';
-          els.editSavedAssets.innerHTML = message;
+          if (!state.savedAssets.length) {
+            const message = '<p class="asset-empty">' + escapeHtml(error && error.message ? error.message : String(error)) + '</p>';
+            els.editSavedAssets.innerHTML = message;
+          }
+          return false;
         }
       }
 
+      function mergeSavedAsset(asset) {
+        if (!asset || !asset.id) return;
+        const next = state.savedAssets.filter((existing) => existing.id !== asset.id);
+        next.unshift(asset);
+        state.savedAssets = next;
+      }
+
+      function savedAssetForCandidate(candidate) {
+        const id = slugifyAssetId(candidate && candidate.candidateId);
+        if (!id) return null;
+        return state.savedAssets.find((asset) => asset.id === id) || null;
+      }
+
+      function slugifyAssetId(value) {
+        return String(value || '')
+          .toLowerCase()
+          .replace(/[^a-z0-9]+/g, '-')
+          .replace(/^-+|-+$/g, '');
+      }
+
       function renderSavedAssets() {
         renderSavedAssetGrid(els.editSavedAssets, 'No local assets yet. Click + to search assets.');
       }
@@ -2108,12 +2245,12 @@ export function renderRefineShell(token: string, defaultMode: RefineMode = "edit
         }
       }
 
-      function appendAssetSaveButton(card, text, label, onClick, loading) {
+      function appendAssetSaveButton(card, text, label, onClick, loading, variant) {
         const button = document.createElement('button');
         button.type = 'button';
-        button.className = 'asset-save';
+        button.className = variant ? 'asset-save ' + variant : 'asset-save';
         button.innerHTML = loading ? '<span class="spinner" aria-hidden="true"></span><span>' + escapeHtml(text) + '</span>' : escapeHtml(text);
-        button.disabled = !!loading;
+        button.disabled = !!loading || variant === 'saved';
         button.setAttribute('aria-label', label);
         button.title = label;
         button.addEventListener('click', onClick);