@dickpy/dsh-imagegen 1.5.0 → 1.5.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dickpy/dsh-imagegen",
   "description": "AI image generation plugin for the dsh web GUI: text-to-image and image-to-image through configurable provider channels (gpt-image-2 / grok-imagine-image / nanobanana series / seedream-5.0-pro / dall-e-3, with native xAI Grok Imagine, Google Nano Banana and ByteDance Seedream request shaping), with per-channel model catalogs and a New Session / Image Generation tab entry opening a three-column studio beside the native conversation.",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "type": "module",
   "main": "lib/index.js",
   "exports": {
@@ -15,9 +15,12 @@
     },
     "client": {
       "inject": [
-        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-store",
+        "@deepseek-ai/dsh-api-remotes",
+        "@deepseek-ai/dsh-api-session-controller",
         "@deepseek-ai/dsh-client-connection",
         "@deepseek-ai/dsh-client-ui-conversation",
+        "@deepseek-ai/dsh-client-ui-renderer",
         "@deepseek-ai/dsh-client-ui-settings",
         "@deepseek-ai/dsh-client-ui-tool"
       ],
@@ -28,21 +31,24 @@
     "schemastery": "^3.18.0"
   },
   "devDependencies": {
-    "@deepseek-ai/cordis": "^4.0.1",
-    "@deepseek-ai/dsh-attachment": "0.1.0-rc.7",
-    "@deepseek-ai/dsh-client-connection": "0.1.0-rc.7",
-    "@deepseek-ai/dsh-client-locale": "0.1.0-rc.7",
-    "@deepseek-ai/dsh-client-runtime": "0.1.0-rc.7",
-    "@deepseek-ai/dsh-client-ui-conversation": "0.1.0-rc.7",
-    "@deepseek-ai/dsh-client-ui-primitives": "0.1.0-rc.7",
-    "@deepseek-ai/dsh-client-ui-settings": "0.1.0-rc.7",
-    "@deepseek-ai/dsh-client-ui-slots": "0.1.0-rc.7",
-    "@deepseek-ai/dsh-commands": "0.1.0-rc.7",
-    "@deepseek-ai/dsh-host-webserver": "0.1.0-rc.7",
-    "@deepseek-ai/dsh-llm": "0.1.0-rc.7",
-    "@deepseek-ai/dsh-settings": "0.1.0-rc.7",
-    "@deepseek-ai/dsh-system-prompt": "0.1.0-rc.7",
-    "@deepseek-ai/dsh-tools": "0.1.0-rc.7",
+    "@deepseek-ai/cordis": "^4.0.2",
+    "@deepseek-ai/dsh-api-remotes": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-api-session-controller": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-attachment": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-client-connection": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-client-locale": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-client-store": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-client-ui-conversation": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-client-ui-primitives": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-client-ui-renderer": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-client-ui-settings": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-client-ui-slots": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-commands": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-host-webserver": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-llm": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-settings": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-system-prompt": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-tools": "0.1.2-alpha.2",
     "@types/node": "^22.20.0",
     "@types/react": "~18.3.1",
     "@types/react-dom": "^18.3.5",

package/src/client/ImageGenPanel.tsx

@@ -11,11 +11,13 @@
 import { useEffect, useRef, useState, type CSSProperties, type PointerEvent as ReactPointerEvent } from 'react'
 import { createPortal } from 'react-dom'
 import { Button, Pill } from '@deepseek-ai/dsh-client-ui-primitives'
-import type { ISessions, SessionId } from '@deepseek-ai/dsh-client-runtime/client'
+import type { SessionId } from '@deepseek-ai/dsh-api-remotes/client'
+import type { ISessions } from '@deepseek-ai/dsh-api-session-controller/client'
 import type { ImageAttachmentRef } from '@deepseek-ai/dsh-attachment'
 import type { ImageGenApi } from './api.ts'
 import { errorMessage, tt } from './helpers.ts'
 import { TemplateLibrary } from './TemplateLibrary.tsx'
+import { InspirationGallery } from './InspirationGallery.tsx'
 import type { EcommerceRefRole, GeneratedImage, GenerateMode, GenerateRequest, GenerationTask, GenerationTaskStatus, HistoryEntry, HistoryImageRef, ProductSetDraft, ProductSetSlot, UpdateInfo } from '../protocol.ts'
 import { AGENT_IMAGE_API } from '../protocol.ts'
 import type { ImageGenConfig, ImageGenScope } from './settings-scope.ts'
@@ -2427,13 +2429,13 @@ export function ImageGenPanel(props: {
           ) : null}
 
           {!generating && !error && images.length === 0 && workspace !== 'ecommerce' ? (
-            <div className={css.canvasState}>
-              <span className={css.canvasEmptyIcon}>
-                <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="3"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
-              </span>
-              <span className={css.canvasStateTitle}>{tt('canvas.emptyTitle')}</span>
-              <span className={css.canvasStateHint}>{tt('canvas.emptyHint')}</span>
-            </div>
+            <InspirationGallery
+              api={api}
+              onUse={(text) => {
+                setPrompt(text)
+                setError(null)
+              }}
+            />
           ) : null}
 
           {!generating && images.length > 0 && workspace !== 'ecommerce' ? (

package/src/client/InspirationGallery.tsx

@@ -0,0 +1,106 @@
+/**
+ * Inspiration wall for the studio's empty canvas: a small grid of random
+ * template cases sampled host-side across every library source. Clicking a
+ * card hands its prompt to the form; the 随机 button re-rolls the pick. On
+ * failure the wall collapses to nothing (the panel falls back to the plain
+ * empty-state hint).
+ */
+
+import { useEffect, useState } from 'react'
+import { Button } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { ImageGenApi } from './api.ts'
+import { tt } from './helpers.ts'
+import { TEMPLATES_API, type TemplateSample } from '../protocol.ts'
+import css from './inspiration.module.css'
+
+/** Card count per deal — a 4×3 wall that uses the canvas's spare width. */
+const SAMPLE_COUNT = 12
+
+/** Same-origin proxy URL of one sampled case's reference image. */
+function imageUrlOf(sample: TemplateSample): string {
+  return `${TEMPLATES_API.image}/${encodeURIComponent(sample.sourceId)}/${encodeURIComponent(sample.case.image)}`
+}
+
+/** One thumbnail that degrades to a text tile when the image 404s. */
+function SampleThumb(props: { sample: TemplateSample }) {
+  const [failed, setFailed] = useState(false)
+  return (
+    <span className={css.thumbWrap}>
+      {props.sample.case.image !== '' && !failed ? (
+        <img className={css.thumb} src={imageUrlOf(props.sample)} alt={props.sample.case.title} loading="lazy" onError={() => { setFailed(true) }} />
+      ) : (
+        <span className={css.thumbFallback} aria-hidden="true">{props.sample.case.title}</span>
+      )}
+      <span className={css.thumbTitle}>{props.sample.case.title}</span>
+    </span>
+  )
+}
+
+/** The random-case wall shown while the canvas has no results. */
+export function InspirationGallery(props: {
+  api: ImageGenApi
+  /** Hand the picked prompt back to the studio form. */
+  onUse: (prompt: string) => void
+}) {
+  const { api, onUse } = props
+  const [samples, setSamples] = useState<TemplateSample[] | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  const deal = (): void => {
+    if (loading) return
+    setLoading(true)
+    api.templatesSample(SAMPLE_COUNT)
+      .then(setSamples)
+      .catch(() => { setSamples(current => current ?? []) })
+      .finally(() => { setLoading(false) })
+  }
+
+  // Deal once on mount; shuffles re-use the same handler.
+  useEffect(() => {
+    deal()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // Sample fetch failed or the libraries are empty: collapse to the plain
+  // empty-state hint so the canvas never looks broken.
+  if (samples !== null && samples.length === 0) {
+    return (
+      <div className={css.wrap} aria-label={tt('inspiration.title')}>
+        <span className={css.emptyIcon}>
+          <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="3"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
+        </span>
+        <span className={css.emptyTitle}>{tt('canvas.emptyTitle')}</span>
+        <span className={css.emptyHint}>{tt('canvas.emptyHint')}</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className={css.wrap} aria-label={tt('inspiration.title')}>
+      <span className={css.title}>{tt('inspiration.title')}</span>
+      {samples === null ? (
+        <span className={css.spinner} aria-hidden="true" />
+      ) : (
+        <>
+          <div className={css.grid}>
+            {samples.map(sample => (
+              <button
+                key={`${sample.sourceId}:${sample.case.id}`}
+                type="button"
+                className={css.tile}
+                title={tt('inspiration.useHint')}
+                onClick={() => { onUse(sample.case.prompt) }}
+              >
+                <SampleThumb sample={sample} />
+              </button>
+            ))}
+          </div>
+          <Button variant="outline" size="sm" disabled={loading} onClick={deal}>
+            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M2 18h1.4c1.3 0 2.5-.6 3.3-1.7l6.1-8.6c.8-1.1 2-1.7 3.3-1.7H22"/><path d="m18 2 4 4-4 4"/><path d="M2 6h1.9c1.5 0 2.9.9 3.6 2.2"/><path d="M22 18h-5.9c-1.3 0-2.6-.7-3.3-1.8l-.5-.8"/><path d="m18 14 4 4-4 4"/></svg>
+            {loading ? tt('inspiration.shuffling') : tt('inspiration.shuffle')}
+          </Button>
+        </>
+      )}
+    </div>
+  )
+}

package/src/client/SettingsCard.tsx

@@ -14,7 +14,7 @@
 
 import { useEffect, useRef, useState } from 'react'
 import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
-import { createSnapshotStore, type SnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
+import { createSnapshotStore, type SnapshotStore } from '@deepseek-ai/dsh-client-store'
 import { CardForm, booleanField, secretField, textField, type CardActions, type CardShell, type FieldState as CardFieldState } from './settings-form.ts'
 import { ChannelsForm, type ChannelDraft, type ChannelsFormActions, type ChannelsFormState } from './channels-form.ts'
 import type { ImageGenScope } from './settings-scope.ts'

package/src/client/TemplateLibrary.tsx

@@ -1,10 +1,13 @@
 /**
- * Prompt-template library overlay: a searchable, category-filtered gallery of
- * the bundled awesome-gpt-image-2 cases. The case list is served by the host
- * (bundled snapshot, optionally refreshed online); reference images load
- * lazily through the host's caching proxy, so browsing progressively mirrors
- * the gallery onto the local disk. Picking a template hands its prompt back
- * to the studio form.
+ * Prompt-template library overlay: a multi-source, searchable, category-
+ * filtered gallery. Each registered source (TEMPLATE_SOURCES) renders as its
+ * own tab with an independent list, refresh state, and image pool; case lists
+ * are served by the host (bundled snapshot, optionally refreshed online or
+ * auto-synced in the background) and reference images load lazily through the
+ * host's caching proxy, so browsing progressively mirrors the gallery onto the
+ * local disk. Templates can be starred; favorites persist host-side as full
+ * case snapshots and are reachable through the ★ filter pill per tab. Picking
+ * a template hands its prompt back to the studio form.
  */
 
 import { useEffect, useMemo, useRef, useState } from 'react'
@@ -12,19 +15,24 @@ import { createPortal } from 'react-dom'
 import { Button } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ImageGenApi } from './api.ts'
 import { errorMessage, tt } from './helpers.ts'
-import { TEMPLATES_API, type TemplateCase, type TemplateListResult } from '../protocol.ts'
+import { TEMPLATE_SOURCES, TEMPLATES_API, type TemplateCase, type TemplateFavorite, type TemplateListResult } from '../protocol.ts'
 import css from './templates.module.css'
 
 /** Concurrent image downloads while caching the whole gallery offline. */
 const CACHE_ALL_CONCURRENCY = 4
 
+/** Stable favorites key of one case within a source. */
+function favoriteKeyOf(sourceId: string, item: TemplateCase): string {
+  return `${sourceId}:${item.id}`
+}
+
 /** Same-origin URL of one case's reference image (host caching proxy). */
-function imageUrlOf(item: TemplateCase): string {
-  return `${TEMPLATES_API.image}/${encodeURIComponent(item.image)}`
+function imageUrlOf(sourceId: string, item: TemplateCase): string {
+  return `${TEMPLATES_API.image}/${encodeURIComponent(sourceId)}/${encodeURIComponent(item.image)}`
 }
 
 /** A card thumbnail that falls back to a placeholder when the proxy 404s. */
-function TemplateThumb(props: { item: TemplateCase }) {
+function TemplateThumb(props: { sourceId: string; item: TemplateCase }) {
   const [failed, setFailed] = useState(false)
   if (props.item.image === '' || failed) {
     return (
@@ -36,7 +44,7 @@ function TemplateThumb(props: { item: TemplateCase }) {
   return (
     <img
       className={css.thumb}
-      src={imageUrlOf(props.item)}
+      src={imageUrlOf(props.sourceId, props.item)}
       alt={props.item.title}
       loading="lazy"
       onError={() => { setFailed(true) }}
@@ -44,6 +52,30 @@ function TemplateThumb(props: { item: TemplateCase }) {
   )
 }
 
+/** Card-corner star toggle; the click must not open the detail view. Rendered
+ *  as a span (a button cannot nest inside the card button). */
+function FavoriteStar(props: { active: boolean; title: string; onToggle: () => void }) {
+  return (
+    <span
+      role="button"
+      tabIndex={0}
+      className={css.favStar}
+      data-active={props.active ? '' : undefined}
+      aria-label={props.title}
+      title={props.title}
+      onClick={(event) => { event.stopPropagation(); props.onToggle() }}
+      onKeyDown={(event) => {
+        if (event.key !== 'Enter' && event.key !== ' ') return
+        event.stopPropagation()
+        event.preventDefault()
+        props.onToggle()
+      }}
+    >
+      <svg viewBox="0 0 24 24" width="15" height="15" fill={props.active ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 3.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L3.6 9.7l5.8-.8z"/></svg>
+    </span>
+  )
+}
+
 /** The template-library modal. Rendered through a portal above the studio. */
 export function TemplateLibrary(props: {
   api: ImageGenApi
@@ -52,31 +84,53 @@ export function TemplateLibrary(props: {
   onClose: () => void
 }) {
   const { api, onUse, onClose } = props
-  const [list, setList] = useState<TemplateListResult | null>(null)
-  const [loadError, setLoadError] = useState<string | null>(null)
+  const [activeSource, setActiveSource] = useState(TEMPLATE_SOURCES[0]!.id)
+  const [lists, setLists] = useState<Record<string, TemplateListResult>>({})
+  const [loadErrors, setLoadErrors] = useState<Record<string, string>>({})
+  const [favorites, setFavorites] = useState<TemplateFavorite[]>([])
   const [query, setQuery] = useState('')
   const [category, setCategory] = useState('')
+  const [favoritesOnly, setFavoritesOnly] = useState(false)
   const [selected, setSelected] = useState<TemplateCase | null>(null)
   const [copied, setCopied] = useState(false)
   const [refreshing, setRefreshing] = useState(false)
   const [notice, setNotice] = useState<string | null>(null)
   const [cacheAll, setCacheAll] = useState<{ running: boolean; done: number; total: number }>({ running: false, done: 0, total: 0 })
   const searchRef = useRef<HTMLInputElement>(null)
-  const load = (): void => {
-    api.templatesList()
-      .then(result => { setList(result); setLoadError(null) })
-      .catch(caught => { setLoadError(errorMessage(caught)) })
+
+  const list = lists[activeSource]
+  const loadError = loadErrors[activeSource] || null
+
+  /** Fetch one source's list into the per-source cache. */
+  const loadSource = (sourceId: string): void => {
+    api.templatesList(sourceId)
+      .then(result => {
+        setLists(current => ({ ...current, [sourceId]: result }))
+        setLoadErrors(current => ({ ...current, [sourceId]: '' }))
+      })
+      .catch(caught => { setLoadErrors(current => ({ ...current, [sourceId]: errorMessage(caught) })) })
   }
 
-  // Load once on open; focus the search box for immediate typing.
+  // Load the first source plus the favorites on open; focus the search box.
   useEffect(() => {
-    load()
+    loadSource(TEMPLATE_SOURCES[0]!.id)
+    api.favoritesList().then(setFavorites).catch(() => { /* favorites stay empty; toggling retries */ })
     searchRef.current?.focus()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  const switchSource = (sourceId: string): void => {
+    if (sourceId === activeSource) return
+    setActiveSource(sourceId)
+    setCategory('')
+    setFavoritesOnly(false)
+    setSelected(null)
+    setNotice(null)
+    if (lists[sourceId] === undefined) loadSource(sourceId)
+  }
+
   const categories = useMemo(() => {
-    if (list === null) return [] as Array<{ key: string; label: string; count: number }>
+    if (list === undefined) return [] as Array<{ key: string; label: string; count: number }>
     const counts = new Map<string, { label: string; count: number }>()
     for (const item of list.cases) {
       const entry = counts.get(item.category) ?? { label: item.categoryZh || item.category, count: 0 }
@@ -86,17 +140,24 @@ export function TemplateLibrary(props: {
     return [...counts.entries()].map(([key, value]) => ({ key, label: value.label, count: value.count }))
   }, [list])
 
+  /** Favorites of the active source, as standalone case snapshots. */
+  const activeFavorites = useMemo(
+    () => favorites.filter(entry => entry.sourceId === activeSource).map(entry => entry.case),
+    [favorites, activeSource],
+  )
+  const favKeys = useMemo(() => new Set(favorites.map(entry => entry.key)), [favorites])
+
   const filtered = useMemo(() => {
-    if (list === null) return [] as TemplateCase[]
+    const pool = favoritesOnly ? activeFavorites : list?.cases ?? []
     const needle = query.trim().toLowerCase()
-    return list.cases.filter(item => {
+    return pool.filter(item => {
       if (category !== '' && item.category !== category) return false
       if (needle === '') return true
       return item.title.toLowerCase().includes(needle)
         || item.prompt.toLowerCase().includes(needle)
         || item.sourceLabel.toLowerCase().includes(needle)
     })
-  }, [list, query, category])
+  }, [list, activeFavorites, favoritesOnly, query, category])
 
   // Escape backs out of the detail view first, then closes the modal.
   useEffect(() => {
@@ -115,10 +176,9 @@ export function TemplateLibrary(props: {
     setRefreshing(true)
     setNotice(null)
     try {
-      const result = await api.templatesRefresh()
-      const reloaded = await api.templatesList()
-      setList(reloaded)
-      setLoadError(null)
+      const result = await api.templatesRefresh(activeSource)
+      const reloaded = await api.templatesList(activeSource)
+      setLists(current => ({ ...current, [activeSource]: reloaded }))
       setNotice(tt('templates.refreshed', { count: result.total }))
     } catch (caught) {
       setNotice(tt('templates.refreshFailed', { error: errorMessage(caught) }))
@@ -127,9 +187,18 @@ export function TemplateLibrary(props: {
     }
   }
 
-  /** Mirror every reference image through the host cache (offline browsing). */
+  /** Star / unstar one template of the active source. */
+  const toggleFavorite = (item: TemplateCase): void => {
+    const key = favoriteKeyOf(activeSource, item)
+    const pending = favKeys.has(key)
+      ? api.favoritesRemove(key)
+      : api.favoritesAdd(activeSource, item)
+    pending.then(setFavorites).catch(() => { /* leave the star as-is on failure */ })
+  }
+
+  /** Mirror every reference image of the active source through the host cache. */
   const cacheAllImages = async (): Promise<void> => {
-    if (cacheAll.running || list === null) return
+    if (cacheAll.running || list === undefined) return
     const files = [...new Set(list.cases.map(item => item.image).filter(name => name !== ''))]
     setCacheAll({ running: true, done: 0, total: files.length })
     let index = 0
@@ -138,7 +207,7 @@ export function TemplateLibrary(props: {
         const file = files[index]!
         index += 1
         try {
-          await fetch(`${TEMPLATES_API.image}/${encodeURIComponent(file)}`)
+          await fetch(`${TEMPLATES_API.image}/${encodeURIComponent(activeSource)}/${encodeURIComponent(file)}`)
         } catch { /* individual failures are retried on the next run */ }
         setCacheAll(current => ({ ...current, done: current.done + 1 }))
       }
@@ -169,7 +238,8 @@ export function TemplateLibrary(props: {
     }
   }
 
-  const originLabel = list === null ? '' : tt(list.origin === 'refreshed' ? 'templates.origin.refreshed' : 'templates.origin.bundled')
+  const originLabel = list === undefined ? '' : tt(list.origin === 'refreshed' ? 'templates.origin.refreshed' : 'templates.origin.bundled')
+  const activeMeta = TEMPLATE_SOURCES.find(source => source.id === activeSource)!
 
   return createPortal(
     <div className={css.overlay} role="dialog" aria-modal="true" aria-label={tt('templates.title')} onClick={onClose}>
@@ -177,7 +247,7 @@ export function TemplateLibrary(props: {
         <header className={css.header}>
           <span className={css.heading}>
             <h3 className={css.title}>{tt('templates.title')}</h3>
-            {list !== null ? (
+            {list !== undefined ? (
               <span className={css.meta}>{tt('templates.meta', { count: list.total, origin: originLabel })}</span>
             ) : null}
           </span>
@@ -188,7 +258,7 @@ export function TemplateLibrary(props: {
             <Button
               variant="outline"
               size="sm"
-              disabled={list === null || cacheAll.running}
+              disabled={list === undefined || cacheAll.running}
               title={tt('templates.cacheAllHint')}
               onClick={() => { void cacheAllImages() }}
             >
@@ -204,6 +274,24 @@ export function TemplateLibrary(props: {
           </span>
         </header>
 
+        <div className={css.sourceTabs} role="tablist" aria-label={tt('templates.sources')}>
+          {TEMPLATE_SOURCES.map(source => (
+            <button
+              key={source.id}
+              type="button"
+              role="tab"
+              aria-selected={source.id === activeSource}
+              className={css.sourceTab}
+              data-active={source.id === activeSource ? '' : undefined}
+              title={source.description}
+              onClick={() => { switchSource(source.id) }}
+            >
+              {source.label}
+              {lists[source.id] !== undefined ? <span className={css.sourceTabCount}>{lists[source.id]!.total}</span> : null}
+            </button>
+          ))}
+        </div>
+
         <div className={css.toolbar}>
           <input
             ref={searchRef}
@@ -217,18 +305,27 @@ export function TemplateLibrary(props: {
             <button
               type="button"
               className={css.categoryPill}
-              data-active={category === '' ? '' : undefined}
-              onClick={() => { setCategory('') }}
+              data-active={favoritesOnly ? '' : undefined}
+              title={tt('templates.favoritesHint')}
+              onClick={() => { setFavoritesOnly(value => !value) }}
+            >
+              ★ {tt('templates.favorites')}{activeFavorites.length > 0 ? ` ${activeFavorites.length}` : ''}
+            </button>
+            <button
+              type="button"
+              className={css.categoryPill}
+              data-active={!favoritesOnly && category === '' ? '' : undefined}
+              onClick={() => { setFavoritesOnly(false); setCategory('') }}
             >
-              {tt('templates.all')}{list !== null ? ` ${list.total}` : ''}
+              {tt('templates.all')}{list !== undefined ? ` ${list.total}` : ''}
             </button>
             {categories.map(entry => (
               <button
                 key={entry.key}
                 type="button"
                 className={css.categoryPill}
-                data-active={category === entry.key ? '' : undefined}
-                onClick={() => { setCategory(entry.key) }}
+                data-active={!favoritesOnly && category === entry.key ? '' : undefined}
+                onClick={() => { setFavoritesOnly(false); setCategory(entry.key) }}
               >
                 {entry.label} {entry.count}
               </button>
@@ -239,7 +336,7 @@ export function TemplateLibrary(props: {
         {notice !== null ? <div className={css.notice} role="status">{notice}</div> : null}
 
         <div className={css.body}>
-          {list === null && loadError === null ? (
+          {list === undefined && loadError === null ? (
             <div className={css.state} role="status">
               <span className={css.spinner} />
               <span>{tt('templates.loading')}</span>
@@ -249,28 +346,35 @@ export function TemplateLibrary(props: {
           {loadError !== null ? (
             <div className={css.state} role="alert">
               <span>{tt('templates.loadFailed', { error: loadError })}</span>
-              <Button variant="outline" size="sm" onClick={() => { setLoadError(null); setList(null); load() }}>
+              <Button variant="outline" size="sm" onClick={() => { setLoadErrors(current => ({ ...current, [activeSource]: '' })); loadSource(activeSource) }}>
                 {tt('templates.retry')}
               </Button>
             </div>
           ) : null}
 
-          {list !== null && filtered.length === 0 ? (
-            <div className={css.state}>{tt('templates.empty')}</div>
+          {loadError === null && (list !== undefined || favoritesOnly) && filtered.length === 0 ? (
+            <div className={css.state}>
+              {favoritesOnly && activeFavorites.length === 0 ? tt('templates.favoritesEmpty') : tt('templates.empty')}
+            </div>
           ) : null}
 
-          {list !== null && filtered.length > 0 ? (
+          {filtered.length > 0 ? (
             <div className={css.grid}>
               {filtered.map(item => (
                 <button
-                  key={item.id}
+                  key={`${activeSource}:${item.id}`}
                   type="button"
                   className={css.card}
                   onClick={() => { setSelected(item); setCopied(false) }}
                 >
                   <span className={css.thumbWrap}>
-                    <TemplateThumb item={item} />
+                    <TemplateThumb sourceId={activeSource} item={item} />
                     {item.featured ? <span className={css.featuredBadge}>{tt('templates.featured')}</span> : null}
+                    <FavoriteStar
+                      active={favKeys.has(favoriteKeyOf(activeSource, item))}
+                      title={favKeys.has(favoriteKeyOf(activeSource, item)) ? tt('templates.favoriteRemove') : tt('templates.favoriteAdd')}
+                      onToggle={() => { toggleFavorite(item) }}
+                    />
                   </span>
                   <span className={css.cardBody}>
                     <span className={css.cardTitle}>{item.title}</span>
@@ -287,8 +391,8 @@ export function TemplateLibrary(props: {
 
         <footer className={css.footer}>
           <span className={css.attribution}>{tt('templates.attribution')}</span>
-          <a className={css.sourceLink} href="https://vibeui.top/" target="_blank" rel="noreferrer">
-            {tt('templates.source')}
+          <a className={css.sourceLink} href={activeMeta.homepage} target="_blank" rel="noreferrer">
+            {tt('templates.source', { label: activeMeta.label })}
           </a>
         </footer>
       </section>
@@ -298,7 +402,7 @@ export function TemplateLibrary(props: {
           <section className={css.detail} onClick={(event) => { event.stopPropagation() }}>
             <div className={css.detailMedia}>
               {selected.image !== '' ? (
-                <img className={css.detailImage} src={imageUrlOf(selected)} alt={selected.title} />
+                <img className={css.detailImage} src={imageUrlOf(activeSource, selected)} alt={selected.title} />
               ) : (
                 <span className={css.thumbPlaceholder} aria-hidden="true" />
               )}
@@ -322,6 +426,13 @@ export function TemplateLibrary(props: {
                 <Button variant="outline" size="md" onClick={() => { void copyPrompt(selected.prompt) }}>
                   {copied ? tt('templates.copied') : tt('templates.copy')}
                 </Button>
+                <Button
+                  variant="outline"
+                  size="md"
+                  onClick={() => { toggleFavorite(selected) }}
+                >
+                  {favKeys.has(favoriteKeyOf(activeSource, selected)) ? tt('templates.unfavorite') : tt('templates.favorite')}
+                </Button>
                 <Button variant="outline" size="md" onClick={() => { setSelected(null) }}>
                   {tt('templates.back')}
                 </Button>