@@ -3,6 +3,7 @@ import type {
   MarketFileContent,
   MarketInstalledFilter,
   MarketListResponse,
+  MarketScope,
   MarketSecurityFilter,
   MarketSource,
   MarketSourceFilter,
@@ -12,6 +13,9 @@ import type {
 } from '../types/market'
 
 export type MarketListParams = {
+  scope?: MarketScope
+  /** Catalog category key; ignored by the server in `market` scope. */
+  category?: string
   q?: string
   source?: MarketSourceFilter
   security?: MarketSecurityFilter
@@ -23,6 +27,8 @@ export type MarketListParams = {
 export const marketApi = {
   list: (params: MarketListParams = {}) => {
     const search = new URLSearchParams()
+    if (params.scope) search.set('scope', params.scope)
+    if (params.category && params.category !== 'all') search.set('category', params.category)
     if (params.q) search.set('q', params.q)
     if (params.source && params.source !== 'all') search.set('source', params.source)
     if (params.security && params.security !== 'all') search.set('security', params.security)
@@ -33,22 +39,30 @@ export const marketApi = {
     return api.get<MarketListResponse>(`/api/market/skills${query ? `?${query}` : ''}`, { timeout: 30_000 })
   },
 
-  detail: (source: MarketSource, slug: string) =>
+  /**
+   * `owner` pins a ClawHub read to one publisher: ClawHub slugs are not unique,
+   * so the slug alone can resolve to a different skill than the card showed.
+   */
+  detail: (source: MarketSource, slug: string, options: { owner?: string } = {}) =>
     api.get<{ skill: NormalizedSkillDetail; sourceStatus: SourceStatusInfo }>(
-      `/api/market/skills/${source}/${encodeURIComponent(slug)}`,
+      `/api/market/skills/${source}/${encodeURIComponent(slug)}${
+        options.owner ? `?owner=${encodeURIComponent(options.owner)}` : ''
+      }`,
       { timeout: 30_000 },
     ),
 
-  fileContent: (source: MarketSource, slug: string, path: string) =>
+  fileContent: (source: MarketSource, slug: string, path: string, owner?: string) =>
     api.get<{ file: MarketFileContent }>(
-      `/api/market/skills/${source}/${encodeURIComponent(slug)}/file?path=${encodeURIComponent(path)}`,
+      `/api/market/skills/${source}/${encodeURIComponent(slug)}/file?path=${encodeURIComponent(path)}${
+        owner ? `&owner=${encodeURIComponent(owner)}` : ''
+      }`,
       { timeout: 30_000 },
     ),
 
-  install: (id: string) =>
+  install: (id: string, owner?: string) =>
     api.post<{ ok: boolean; installedPath: string; skill: NormalizedSkill }>(
       '/api/market/install',
-      { id },
+      owner ? { id, owner } : { id },
       { timeout: 120_000 },
     ),
 
 
@@ -0,0 +1,49 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, within } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { useSettingsStore } from '../../stores/settingsStore'
+import type { Capability } from '../../lib/skillInsights'
+import { CapabilityPanel } from './CapabilityPanel'
+
+const CAPABILITIES: Capability[] = [
+  { kind: 'shell', level: 'high', evidence: ['scripts/extract-skill.sh', 'mkdir', 'printf'] },
+  { kind: 'hooks', level: 'high', evidence: ['hooks/', '~/.openclaw/hooks'] },
+  { kind: 'binaries', level: 'low', evidence: ['git'] },
+]
+
+beforeEach(() => {
+  useSettingsStore.setState({ locale: 'en' })
+})
+
+describe('CapabilityPanel', () => {
+  it('names each capability with its evidence and risk level', () => {
+    render(<CapabilityPanel capabilities={CAPABILITIES} />)
+
+    expect(screen.getByRole('heading', { name: 'Before installing: what this skill does' })).toBeInTheDocument()
+    const shell = screen.getByTestId('market-capability-shell')
+    expect(within(shell).getByText('Runs commands or scripts')).toBeInTheDocument()
+    // Commands join with a slash, everything else with the list separator.
+    expect(shell).toHaveTextContent('scripts/extract-skill.sh / mkdir / printf')
+    expect(shell).toHaveTextContent('High')
+    expect(screen.getByTestId('market-capability-hooks')).toHaveTextContent('Touches hooks/、~/.openclaw/hooks')
+    expect(screen.getByTestId('market-capability-binaries')).toHaveTextContent('Low')
+  })
+
+  it('links to the full report only when asked to', () => {
+    const onViewReport = vi.fn()
+    const { rerender } = render(<CapabilityPanel capabilities={CAPABILITIES} onViewReport={onViewReport} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Full report →' }))
+    expect(onViewReport).toHaveBeenCalledTimes(1)
+
+    rerender(<CapabilityPanel capabilities={CAPABILITIES} />)
+    expect(screen.queryByRole('button', { name: 'Full report →' })).not.toBeInTheDocument()
+  })
+
+  it('renders nothing when no rule fired', () => {
+    render(<CapabilityPanel capabilities={[]} />)
+
+    expect(screen.queryByTestId('market-capability-panel')).not.toBeInTheDocument()
+  })
+})
@@ -0,0 +1,114 @@
+import { useMemo } from 'react'
+import { TriangleAlert } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import { Badge, type Tone } from '@/components/ui/Badge'
+import { Button } from '@/components/ui/Button'
+import {
+  detectCapabilities,
+  extractTriggers,
+  type Capability,
+  type CapabilityLevel,
+} from '../../lib/skillInsights'
+import type { NormalizedSkillDetail } from '../../types/market'
+
+type Translate = ReturnType<typeof useTranslation>
+
+export const CAPABILITY_LEVEL_TONES: Record<CapabilityLevel, Tone> = {
+  high: 'danger',
+  medium: 'warning',
+  low: 'neutral',
+}
+
+/** One capability, phrased with its evidence. */
+export function capabilityText(t: Translate, capability: Capability): { title: string; detail: string } {
+  const evidence = capability.evidence.join(capability.kind === 'shell' ? ' / ' : '、')
+  return {
+    title: t(`market.cap.${capability.kind}`),
+    detail: t(`market.cap.${capability.kind}.detail`, { evidence }),
+  }
+}
+
+/** Capabilities and triggers, read once per detail off its own SKILL.md and file list. */
+export function useSkillInsights(detail: NormalizedSkillDetail | null | undefined): {
+  capabilities: Capability[]
+  triggers: string[]
+} {
+  return useMemo(() => {
+    if (!detail) return { capabilities: [], triggers: [] }
+    const description = detail.descriptionFrontmatter?.description
+    return {
+      capabilities: detectCapabilities({
+        markdown: detail.description,
+        frontmatter: detail.descriptionFrontmatter,
+        files: detail.files,
+      }),
+      triggers: extractTriggers(typeof description === 'string' ? description : undefined),
+    }
+  }, [detail])
+}
+
+/**
+ * "Before installing: what this skill does."
+ *
+ * Every card cites the file, command, variable or host it came from, so the
+ * reader can check the claim rather than trust it. Renders nothing when no
+ * rule fired: an empty "nothing risky here" panel would be a verdict these
+ * rules cannot make.
+ */
+export function CapabilityPanel({
+  capabilities,
+  onViewReport,
+}: {
+  capabilities: readonly Capability[]
+  /** Shown as the header link; omitted where the panel already sits in the report. */
+  onViewReport?: () => void
+}) {
+  const t = useTranslation()
+  if (capabilities.length === 0) return null
+
+  return (
+    <section
+      aria-labelledby="market-capabilities-title"
+      data-testid="market-capability-panel"
+      className="flex-shrink-0 rounded-[var(--radius-xl)] border border-[var(--color-warning)] bg-[var(--color-warning-container)] px-5 py-[18px]"
+    >
+      <header className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
+        <h2
+          id="market-capabilities-title"
+          className="flex items-center gap-2 text-[15px] font-semibold text-[var(--color-on-warning-container)]"
+        >
+          <TriangleAlert className="h-[17px] w-[17px] flex-shrink-0" strokeWidth={1.8} aria-hidden="true" />
+          {t('market.cap.title')}
+        </h2>
+        {onViewReport && (
+          <Button variant="link" size="sm" data-testid="market-capability-view-report" onClick={onViewReport}>
+            {t('market.cap.viewReport')}
+          </Button>
+        )}
+      </header>
+      <ul className="mt-3.5 grid gap-2.5 grid-cols-[repeat(auto-fill,minmax(200px,1fr))]">
+        {capabilities.map((capability) => {
+          const text = capabilityText(t, capability)
+          return (
+            <li
+              key={capability.kind}
+              data-testid={`market-capability-${capability.kind}`}
+              className="flex min-w-0 flex-col gap-1.5 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3.5 py-3"
+            >
+              <span className="flex items-center justify-between gap-2">
+                <strong className="text-[13.5px] font-semibold text-[var(--color-text-primary)]">{text.title}</strong>
+                <Badge tone={CAPABILITY_LEVEL_TONES[capability.level]} size="xs" pill={false}>
+                  {t(`market.cap.level.${capability.level}`)}
+                </Badge>
+              </span>
+              <span className="break-words font-mono text-xs leading-5 text-[var(--color-text-secondary)]">
+                {text.detail}
+              </span>
+            </li>
+          )
+        })}
+      </ul>
+      <p className="mt-3 text-xs leading-5 text-[var(--color-on-warning-container)]">{t('market.cap.note')}</p>
+    </section>
+  )
+}
@@ -0,0 +1,50 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { useSettingsStore } from '../../stores/settingsStore'
+import type { MarketCategory } from '../../types/market'
+import { CategoryBar } from './CategoryBar'
+
+const CATEGORIES: MarketCategory[] = [
+  { key: 'dev', name: '开发编程', nameEn: 'Development', count: 40 },
+  { key: 'office', name: '办公文档', nameEn: 'Office', count: 36 },
+]
+
+beforeEach(() => {
+  useSettingsStore.setState({ locale: 'en' })
+})
+
+describe('CategoryBar', () => {
+  it('renders "All" plus one counted chip per catalog category', () => {
+    render(<CategoryBar categories={CATEGORIES} value="all" onChange={vi.fn()} />)
+
+    const group = screen.getByRole('radiogroup', { name: 'Category' })
+    expect(group).toBeInTheDocument()
+    expect(screen.getAllByRole('radio')).toHaveLength(3)
+    expect(screen.getByRole('radio', { name: 'All' })).toHaveAttribute('aria-checked', 'true')
+    expect(screen.getByRole('radio', { name: 'Development 40' })).toBeInTheDocument()
+  })
+
+  it('uses the Chinese category names for Chinese readers', () => {
+    useSettingsStore.setState({ locale: 'zh-TW' })
+    render(<CategoryBar categories={CATEGORIES} value="dev" onChange={vi.fn()} />)
+
+    expect(screen.getByRole('radio', { name: '全部' })).toBeInTheDocument()
+    expect(screen.getByRole('radio', { name: '开发编程 40' })).toHaveAttribute('aria-checked', 'true')
+  })
+
+  it('reports the picked category key', () => {
+    const onChange = vi.fn()
+    render(<CategoryBar categories={CATEGORIES} value="all" onChange={onChange} />)
+
+    fireEvent.click(screen.getByRole('radio', { name: 'Office 36' }))
+    expect(onChange).toHaveBeenCalledWith('office')
+  })
+
+  it('renders nothing before the server sent any categories', () => {
+    render(<CategoryBar categories={[]} value="all" onChange={vi.fn()} />)
+
+    expect(screen.queryByTestId('market-category-bar')).not.toBeInTheDocument()
+  })
+})
@@ -0,0 +1,55 @@
+import { useTranslation } from '../../i18n'
+import { SegmentedControl } from '@/components/ui/SegmentedControl'
+import type { MarketCategory } from '../../types/market'
+import { categoryLabel, useMarketLocale } from './catalogLocale'
+
+/**
+ * Category chips above the curated catalog.
+ *
+ * The categories are the catalog's own, so every chip has skills behind it and
+ * its count is exact (static over the whole catalog, not the current filter).
+ * Nothing renders until the server has sent them; a bar of "All" alone would
+ * be a control with nothing to choose.
+ *
+ * Chips stay clickable while a page loads: the store drops superseded
+ * responses, and dimming the whole row on every switch of a local list would
+ * flicker for nothing.
+ */
+export function CategoryBar({
+  categories,
+  value,
+  onChange,
+}: {
+  categories: readonly MarketCategory[]
+  value: string
+  onChange: (key: string) => void
+}) {
+  const t = useTranslation()
+  const locale = useMarketLocale()
+  if (categories.length === 0) return null
+
+  const items = [
+    { value: 'all', label: t('market.category.all') },
+    ...categories.map((category) => ({
+      value: category.key,
+      label: (
+        <>
+          {categoryLabel(category, locale)}
+          <span className="text-[11px] font-normal tabular-nums opacity-60">{category.count}</span>
+        </>
+      ),
+    })),
+  ]
+
+  return (
+    <div data-testid="market-category-bar">
+      <SegmentedControl
+        items={items}
+        value={value}
+        onChange={onChange}
+        label={t('market.category.label')}
+        appearance="chip"
+      />
+    </div>
+  )
+}
@@ -0,0 +1,44 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { useSettingsStore } from '../../stores/settingsStore'
+import { ChangelogPanel } from './ChangelogPanel'
+
+beforeEach(() => {
+  useSettingsStore.setState({ locale: 'en' })
+})
+
+describe('ChangelogPanel', () => {
+  it('shows the release version, date and note as written', () => {
+    render(
+      <ChangelogPanel
+        changelog={{ version: '4.0.2', text: 'Hook is now opt-in.\nFixed paths.', publishedAt: Date.UTC(2026, 7, 6) }}
+        pageUrl="https://clawhub.ai/x"
+      />,
+    )
+
+    const panel = screen.getByTestId('market-changelog-panel')
+    expect(panel).toHaveTextContent('v4.0.2')
+    expect(panel).toHaveTextContent('2026-08-06')
+    expect(screen.getByText(/Hook is now opt-in\./)).toHaveClass('whitespace-pre-wrap')
+    expect(screen.getByRole('link', { name: /Source page/ })).toHaveAttribute('href', 'https://clawhub.ai/x')
+  })
+
+  it('falls back to the skill version and does not double the v prefix', () => {
+    const { unmount } = render(<ChangelogPanel changelog={{ text: 'Notes' }} version="1.2.0" />)
+    expect(screen.getByTestId('market-changelog-panel')).toHaveTextContent('v1.2.0')
+    unmount()
+
+    render(<ChangelogPanel changelog={{ version: 'v2.0.0', text: 'Notes' }} />)
+    expect(screen.getByTestId('market-changelog-panel')).toHaveTextContent('v2.0.0')
+    expect(screen.getByTestId('market-changelog-panel')).not.toHaveTextContent('vv2.0.0')
+  })
+
+  it('says there is no note, and drops a link that is not http(s)', () => {
+    render(<ChangelogPanel pageUrl="file:///etc/passwd" />)
+
+    expect(screen.getByText('Upstream has no release note for this version.')).toBeInTheDocument()
+    expect(screen.queryByRole('link')).not.toBeInTheDocument()
+  })
+})