AI Interfaces block

Knowledge Source Picker

Choosing what the assistant may read, with indexing state told honestly — a half-indexed source says so rather than showing a green tick — and the footer stating the effect of the selection, not its cardinality.

345 lineslucide-reactAdded 13 Aug 2026Updated 2 Sept 2026

knowledge base
sources
indexing
connectors
rag

What's included

components/knowledge-source-picker.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add knowledge-source-picker

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

What can the assistant read?

Only selected sources are searched. Everything else stays invisible to it.

Company handbookReadyGoogle Drive · 214 documents
Analytics warehouseReady18 tables · schema only, no row data
product/apiIndexingGitHub · main branch, docs/ and README44%44% indexed — answers from this source will be incomplete until it finishes
help.acme.comReadyCrawled weekly · 480 pages
Contracts archiveFailedSharePoint · 1,902 filesAccess denied — the connector account cannot read this folder.
Design wikiPausedPaused by you on 2 August

Searching 3 sources

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/knowledge-source-picker.tsx

/**
 * <KnowledgeSourcePicker> — choosing what an assistant is allowed to read,
 * with indexing state per source.
 *
 * The block that decides whether answers are any good, and it has an
 * unusual requirement: it has to show *work in progress* honestly. A source
 * that is 40% indexed will answer questions badly, and hiding that behind a
 * green tick is how a user concludes the product is stupid rather than
 * still ingesting.
 *
 *  - Every source states its state in words — Ready, Indexing, Failed,
 *    Paused — beside the icon. Never colour alone.
 *  - Indexing rows carry a `<progress>` with an accessible name that
 *    includes the source, so five simultaneous bars are distinguishable.
 *  - A failed source explains itself inline and offers a fix, rather than
 *    a red dot and a support link.
 *  - The search field is `type="search"` with a label, and filtering is
 *    announced through a `role="status"` count — otherwise a keyboard user
 *    types and hears nothing change.
 *  - Selection is checkboxes in a `<fieldset>` with a `<legend>`, which is
 *    what turns eleven loose checkboxes into one answerable question.
 *
 * The footer states the *effect* of the current selection in plain language,
 * because "6 selected" does not tell anyone what the assistant will do.
 */

'use client'

import * as React from 'react'
import {
  AlertCircle,
  Check,
  Database,
  FileText,
  Github,
  Globe,
  Loader2,
  Pause,
  Plus,
  RotateCw,
  Search,
} from 'lucide-react'

export type IndexState = 'ready' | 'indexing' | 'failed' | 'paused'

export interface KnowledgeSource {
  id: string
  label: string
  kind: 'drive' | 'repo' | 'table' | 'site'
  detail: string
  state: IndexState
  /** 0–100, when indexing. */
  progress?: number
  /** Shown under a failed source. */
  error?: string
}

export interface KnowledgeSourcePickerProps {
  heading?: string
  sources?: KnowledgeSource[]
  className?: string
}

const KIND_ICON = {
  drive: FileText,
  repo: Github,
  table: Database,
  site: Globe,
} as const

const STATE_LABEL = {
  ready: 'Ready',
  indexing: 'Indexing',
  failed: 'Failed',
  paused: 'Paused',
} as const

const DEFAULT_SOURCES: KnowledgeSource[] = [
  {
    id: 'handbook',
    label: 'Company handbook',
    kind: 'drive',
    detail: 'Google Drive · 214 documents',
    state: 'ready',
  },
  {
    id: 'warehouse',
    label: 'Analytics warehouse',
    kind: 'table',
    detail: '18 tables · schema only, no row data',
    state: 'ready',
  },
  {
    id: 'repo',
    label: 'product/api',
    kind: 'repo',
    detail: 'GitHub · main branch, docs/ and README',
    state: 'indexing',
    progress: 44,
  },
  {
    id: 'helpsite',
    label: 'help.acme.com',
    kind: 'site',
    detail: 'Crawled weekly · 480 pages',
    state: 'ready',
  },
  {
    id: 'legal',
    label: 'Contracts archive',
    kind: 'drive',
    detail: 'SharePoint · 1,902 files',
    state: 'failed',
    error: 'Access denied — the connector account cannot read this folder.',
  },
  {
    id: 'notion',
    label: 'Design wiki',
    kind: 'site',
    detail: 'Paused by you on 2 August',
    state: 'paused',
  },
]

export function KnowledgeSourcePicker({
  heading = 'What can the assistant read?',
  sources = DEFAULT_SOURCES,
  className = '',
}: KnowledgeSourcePickerProps) {
  const [query, setQuery] = React.useState('')
  const [selected, setSelected] = React.useState<string[]>(
    sources.filter((s) => s.state === 'ready').map((s) => s.id),
  )

  const visible = React.useMemo(() => {
    const term = query.trim().toLowerCase()
    if (!term) return sources
    return sources.filter(
      (s) =>
        s.label.toLowerCase().includes(term) || s.detail.toLowerCase().includes(term),
    )
  }, [sources, query])

  const chosen = sources.filter((s) => selected.includes(s.id))
  const pending = chosen.filter((s) => s.state === 'indexing').length
  const searchId = React.useId()

  return (
    <div className={`mx-auto w-full max-w-xl p-6 ${className}`}>
      <div className="overflow-hidden rounded-2xl border border-border/60 bg-card">
        {/* -- Header ---------------------------------------------------- */}
        <div className="border-b border-border/60 px-5 py-4">
          <h3 data-stress-ignore className="text-sm font-semibold">{heading}</h3>
          <p className="mt-1 text-xs text-muted-foreground">
            Only selected sources are searched. Everything else stays invisible to it.
          </p>

          <div className="mt-3 flex items-center gap-2 rounded-xl border border-border/60 bg-background px-3 focus-within:ring-2 focus-within:ring-ring">
            <Search aria-hidden className="h-4 w-4 shrink-0 text-muted-foreground" />
            <label htmlFor={searchId} className="sr-only">
              Filter sources
            </label>
            <input
              id={searchId}
              type="search"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="Filter sources"
              className="flex-1 bg-transparent py-2 text-sm outline-none placeholder:text-muted-foreground"
            />
          </div>

          {/* Without this a keyboard user types into the filter and gets no
              feedback that anything happened. */}
          <p role="status" className="sr-only">
            {visible.length} of {sources.length} sources shown
          </p>
        </div>

        {/* -- Sources --------------------------------------------------- */}
        {/* Sized to clear the failed source rather than clipping it. A
            connector that cannot be read is the row a user most needs to
            see, and it was the one falling below the fold. */}
        <fieldset className="max-h-[48rem] overflow-y-auto">
          <legend className="sr-only">Sources the assistant may read</legend>

          {visible.length === 0 ? (
            <p className="px-5 py-10 text-center text-sm text-muted-foreground">
              Nothing matches “{query}”.
            </p>
          ) : (
            <ul className="divide-y divide-border/40">
              {visible.map((source) => {
                const Icon = KIND_ICON[source.kind]
                const on = selected.includes(source.id)
                const blocked = source.state === 'failed'

                return (
                  <li key={source.id}>
                    <label
                      className={`flex items-start gap-3 px-5 py-3 transition-colors ${
                        blocked ? 'opacity-70' : 'cursor-pointer hover:bg-muted/40'
                      } has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-ring`}
                    >
                      <input
                        type="checkbox"
                        checked={on}
                        disabled={blocked}
                        onChange={() =>
                          setSelected((list) =>
                            list.includes(source.id)
                              ? list.filter((x) => x !== source.id)
                              : [...list, source.id],
                          )
                        }
                        className="mt-1 h-4 w-4 shrink-0 accent-primary"
                      />

                      <Icon aria-hidden className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />

                      <span className="min-w-0 flex-1">
                        <span className="flex flex-wrap items-center gap-2">
                          <span className="text-sm font-medium">{source.label}</span>
                          <StateBadge state={source.state} />
                        </span>

                        <span className="mt-0.5 block text-xs text-muted-foreground">
                          {source.detail}
                        </span>

                        {source.state === 'indexing' && typeof source.progress === 'number' ? (
                          <span className="mt-2 block">
                            <progress
                              value={source.progress}
                              max={100}
                              aria-label={`Indexing ${source.label}`}
                              className="h-1 w-full appearance-none overflow-hidden rounded-full [&::-moz-progress-bar]:bg-primary [&::-webkit-progress-bar]:rounded-full [&::-webkit-progress-bar]:bg-muted [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:bg-primary"
                            >
                              {source.progress}%
                            </progress>
                            <span className="mt-1 block text-[11px] text-muted-foreground">
                              {source.progress}% indexed — answers from this source will be
                              incomplete until it finishes
                            </span>
                          </span>
                        ) : null}

                        {source.error ? (
                          <span className="mt-1.5 flex items-start gap-2 text-[11px] leading-relaxed text-rose-600 dark:text-rose-400">
                            <AlertCircle aria-hidden className="mt-px h-3 w-3 shrink-0" />
                            {source.error}
                          </span>
                        ) : null}
                      </span>

                      {blocked ? (
                        <button
                          type="button"
                          className="inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-border/60 px-2.5 py-1 text-xs font-medium transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                        >
                          <RotateCw aria-hidden className="h-3 w-3" />
                          Reconnect
                          <span className="sr-only"> {source.label}</span>
                        </button>
                      ) : null}
                    </label>
                  </li>
                )
              })}
            </ul>
          )}
        </fieldset>

        {/* -- Footer ---------------------------------------------------- */}
        <div className="flex flex-wrap items-center gap-3 border-t border-border/60 bg-muted/30 px-5 py-3">
          {/* The effect of the selection, not its cardinality. */}
          <p role="status" className="text-xs text-muted-foreground">
            {chosen.length === 0 ? (
              'Nothing selected — the assistant will answer from the conversation alone.'
            ) : (
              <>
                Searching{' '}
                <span className="font-medium text-foreground">
                  {chosen.length} {chosen.length === 1 ? 'source' : 'sources'}
                </span>
                {pending > 0 ? `, ${pending} still indexing` : ''}
              </>
            )}
          </p>

          <button
            type="button"
            className="ms-auto inline-flex items-center gap-1.5 rounded-xl border border-border/60 px-3 py-1.5 text-xs font-medium transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
          >
            <Plus aria-hidden className="h-3.5 w-3.5" />
            Connect a source
          </button>
        </div>
      </div>
    </div>
  )
}

function StateBadge({ state }: { state: IndexState }) {
  const shared =
    'inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide'

  if (state === 'ready') {
    return (
      <span className={`${shared} bg-emerald-500/10 text-emerald-600 dark:text-emerald-400`}>
        <Check aria-hidden className="h-2.5 w-2.5" />
        {STATE_LABEL.ready}
      </span>
    )
  }

  if (state === 'indexing') {
    return (
      <span className={`${shared} bg-primary/10 text-primary`}>
        <Loader2
          aria-hidden
          className="h-2.5 w-2.5 animate-spin motion-reduce:[animation-duration:2.4s]"
        />
        {STATE_LABEL.indexing}
      </span>
    )
  }

  if (state === 'failed') {
    return (
      <span className={`${shared} bg-rose-500/10 text-rose-600 dark:text-rose-400`}>
        <AlertCircle aria-hidden className="h-2.5 w-2.5" />
        {STATE_LABEL.failed}
      </span>
    )
  }

  return (
    <span className={`${shared} bg-muted text-muted-foreground`}>
      <Pause aria-hidden className="h-2.5 w-2.5" />
      {STATE_LABEL.paused}
    </span>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/knowledge-source-picker.tsx and import it where you need the section:

import { KnowledgeSourcePicker } from '@/components/knowledge-source-picker'

Customize

1 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`heading`	`string`	`'What can the assistant read?'`
`sources`	`KnowledgeSource[]`	`DEFAULT_SOURCES`
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.

knowledge-source-picker.html

<!--
  Knowledge Source Picker — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block is interactive in React and the handlers are NOT here.
  Buttons, toggles and menus render in their initial state and do
  nothing until you wire them up.
-->
<div class="mx-auto w-full max-w-xl p-6 ">
  <div class="overflow-hidden rounded-2xl border border-border/60 bg-card">
    <div class="border-b border-border/60 px-5 py-4">
      <h3 data-stress-ignore="true" class="text-sm font-semibold">What can the assistant read?</h3>
      <p class="mt-1 text-xs text-muted-foreground">Only selected sources are searched. Everything else stays invisible to it.</p>
      <div class="mt-3 flex items-center gap-2 rounded-xl border border-border/60 bg-background px-3 focus-within:ring-2 focus-within:ring-ring">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true">
          <path d="m21 21-4.34-4.34"></path>
          <circle cx="11" cy="11" r="8"></circle>
        </svg>
        <label for="_R_0_" class="sr-only">Filter sources</label>
        <input id="_R_0_" type="search" placeholder="Filter sources" class="flex-1 bg-transparent py-2 text-sm outline-none placeholder:text-muted-foreground" value="" />
      </div>
      <p role="status" class="sr-only">6 of 6 sources shown</p>
    </div>
    <fieldset class="max-h-[48rem] overflow-y-auto">
      <legend class="sr-only">Sources the assistant may read</legend>
      <ul class="divide-y divide-border/40">
        <li>
          <label class="flex items-start gap-3 px-5 py-3 transition-colors cursor-pointer hover:bg-muted/40 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-ring">
            <input type="checkbox" class="mt-1 h-4 w-4 shrink-0 accent-primary" checked="" />
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true">
              <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
              <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
              <path d="M10 9H8"></path>
              <path d="M16 13H8"></path>
              <path d="M16 17H8"></path>
            </svg>
            <span class="min-w-0 flex-1">
              <span class="flex flex-wrap items-center gap-2">
                <span class="text-sm font-medium">Company handbook</span>
                <span class="inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check h-2.5 w-2.5" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>Ready</span>
              </span>
              <span class="mt-0.5 block text-xs text-muted-foreground">Google Drive · 214 documents</span>
            </span>
          </label>
        </li>
        <li>
          <label class="flex items-start gap-3 px-5 py-3 transition-colors cursor-pointer hover:bg-muted/40 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-ring">
            <input type="checkbox" class="mt-1 h-4 w-4 shrink-0 accent-primary" checked="" />
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-database mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true">
              <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
              <path d="M3 5V19A9 3 0 0 0 21 19V5"></path>
              <path d="M3 12A9 3 0 0 0 21 12"></path>
            </svg>
            <span class="min-w-0 flex-1">
              <span class="flex flex-wrap items-center gap-2">
                <span class="text-sm font-medium">Analytics warehouse</span>
                <span class="inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check h-2.5 w-2.5" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>Ready</span>
              </span>
              <span class="mt-0.5 block text-xs text-muted-foreground">18 tables · schema only, no row data</span>
            </span>
          </label>
        </li>
        <li>
          <label class="flex items-start gap-3 px-5 py-3 transition-colors cursor-pointer hover:bg-muted/40 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-ring">
            <input type="checkbox" class="mt-1 h-4 w-4 shrink-0 accent-primary" />
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true">
              <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
              <path d="M9 18c-4.51 2-5-2-7-2"></path>
            </svg>
            <span class="min-w-0 flex-1">
              <span class="flex flex-wrap items-center gap-2">
                <span class="text-sm font-medium">product/api</span>
                <span class="inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-primary/10 text-primary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-loader-circle h-2.5 w-2.5 animate-spin motion-reduce:[animation-duration:2.4s]" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>Indexing</span>
              </span>
              <span class="mt-0.5 block text-xs text-muted-foreground">GitHub · main branch, docs/ and README</span>
              <span class="mt-2 block">
                <progress value="44" max="100" aria-label="Indexing product/api" class="h-1 w-full appearance-none overflow-hidden rounded-full [&amp;amp;::-moz-progress-bar]:bg-primary [&amp;amp;::-webkit-progress-bar]:rounded-full [&amp;amp;::-webkit-progress-bar]:bg-muted [&amp;amp;::-webkit-progress-value]:rounded-full [&amp;amp;::-webkit-progress-value]:bg-primary">44%</progress>
                <span class="mt-1 block text-[11px] text-muted-foreground">44% indexed — answers from this source will be incomplete until it finishes</span>
              </span>
            </span>
          </label>
        </li>
        <li>
          <label class="flex items-start gap-3 px-5 py-3 transition-colors cursor-pointer hover:bg-muted/40 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-ring">
            <input type="checkbox" class="mt-1 h-4 w-4 shrink-0 accent-primary" checked="" />
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true">
              <circle cx="12" cy="12" r="10"></circle>
              <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
              <path d="M2 12h20"></path>
            </svg>
            <span class="min-w-0 flex-1">
              <span class="flex flex-wrap items-center gap-2">
                <span class="text-sm font-medium">help.acme.com</span>
                <span class="inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check h-2.5 w-2.5" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>Ready</span>
              </span>
              <span class="mt-0.5 block text-xs text-muted-foreground">Crawled weekly · 480 pages</span>
            </span>
          </label>
        </li>
        <li>
          <label class="flex items-start gap-3 px-5 py-3 transition-colors opacity-70 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-ring">
            <input type="checkbox" disabled="" class="mt-1 h-4 w-4 shrink-0 accent-primary" />
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true">
              <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
              <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
              <path d="M10 9H8"></path>
              <path d="M16 13H8"></path>
              <path d="M16 17H8"></path>
            </svg>
            <span class="min-w-0 flex-1">
              <span class="flex flex-wrap items-center gap-2">
                <span class="text-sm font-medium">Contracts archive</span>
                <span class="inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-rose-500/10 text-rose-600 dark:text-rose-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-alert h-2.5 w-2.5" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" x2="12" y1="8" y2="12"></line><line x1="12" x2="12.01" y1="16" y2="16"></line></svg>Failed</span>
              </span>
              <span class="mt-0.5 block text-xs text-muted-foreground">SharePoint · 1,902 files</span>
              <span class="mt-1.5 flex items-start gap-2 text-[11px] leading-relaxed text-rose-600 dark:text-rose-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-alert mt-px h-3 w-3 shrink-0" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" x2="12" y1="8" y2="12"></line><line x1="12" x2="12.01" y1="16" y2="16"></line></svg>Access denied — the connector account cannot read this folder.</span>
            </span>
            <button type="button" class="inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-border/60 px-2.5 py-1 text-xs font-medium transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-cw h-3 w-3" aria-hidden="true"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path></svg>Reconnect<span class="sr-only"> Contracts archive</span></button>
          </label>
        </li>
        <li>
          <label class="flex items-start gap-3 px-5 py-3 transition-colors cursor-pointer hover:bg-muted/40 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-ring">
            <input type="checkbox" class="mt-1 h-4 w-4 shrink-0 accent-primary" />
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true">
              <circle cx="12" cy="12" r="10"></circle>
              <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
              <path d="M2 12h20"></path>
            </svg>
            <span class="min-w-0 flex-1">
              <span class="flex flex-wrap items-center gap-2">
                <span class="text-sm font-medium">Design wiki</span>
                <span class="inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-muted text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pause h-2.5 w-2.5" aria-hidden="true"><rect x="14" y="4" width="4" height="16" rx="1"></rect><rect x="6" y="4" width="4" height="16" rx="1"></rect></svg>Paused</span>
              </span>
              <span class="mt-0.5 block text-xs text-muted-foreground">Paused by you on 2 August</span>
            </span>
          </label>
        </li>
      </ul>
    </fieldset>
    <div class="flex flex-wrap items-center gap-3 border-t border-border/60 bg-muted/30 px-5 py-3">
      <p role="status" class="text-xs text-muted-foreground">Searching <span class="font-medium text-foreground">3 sources</span></p>
      <button type="button" class="ms-auto inline-flex items-center gap-1.5 rounded-xl border border-border/60 px-3 py-1.5 text-xs font-medium transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus h-3.5 w-3.5" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>Connect a source</button>
    </div>
  </div>
</div>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

AI Assistant Screen7 blocks

Want the whole screen instead of this one section? Open a page and copy it entire.

8 more blocks in Retrieval & Context

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Retrieval & Context

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Retrieval & Context blocks

View category

Retrieved context

4 chunks for “why did northwind not get the volume price”, ranked by similarity

Document: Pricing handbook· §4.2 — Volume breaksStrong match0.910.91
Accounts above 1,200 units per order qualify for the tier-two rate of $8.40, held for the duration of the contract year. The break is applied per order, not per quarter, so a single large order beats two smaller ones of the same total volume.
Support ticket: Ticket #4192· Northwind Retail · resolvedPartial match0.780.78
Customer asked why their November order did not get the tier-two price. Their October and November orders were 700 units each — combined they clear the break, individually they do not. Confirmed with finance that this is working as intended.
Table: warehouse.orders· 2,481 rows scannedPartial match0.640.64
Aggregated order volume by account for the trailing four quarters, filtered to accounts with more than one order in the period.
Web page: supplier.example.com· Lead times · fetched todayWeak match0.410.41
Standard lead time for the winter blend is 21 days from purchase order. Expedited shipping is available at a 15% surcharge and reduces this to 9 days.

Retrieved Context Chunks

The RAG debugging surface: ranked passages with similarity as a meter, matched spans in real mark elements, and filter chips wired as a radiogroup so arrows move between them.

Retrieval & Context327 lines1 dep2 Sept

Sources(4)

Database table: Q3 revenue cohortswarehouse.arr_monthly
Supports: The 6.1% churn figure for accounts under 20 seats
2,463 accounts · lost ARR $1.24M · seat_band < 20
Read 2 hours ago
Database table: Activation funnel, Jul–Sepwarehouse.events
Supports: The claim that a second integration predicts retention
Accounts with ≥2 connected sources churned at 1.6%; with 1 source, 6.4%.
Read 2 hours ago
Document: Pricing handbookdocs/pricing-handbook.md
Supports: That the volume break applies per order rather than per quarter
The break is applied per order, not per quarter, so a single large order beats two smaller ones of the same total volume.
Read 4 months ago
This document has changed twice since it was indexed.
Web page: Supplier lead times (opens in a new tab)supplier.example.com
Supports: The 21-day reorder window
Read 2 hours ago

Every figure above traces to one of these. Nothing was inferred without a source.

Answer Source Citations

The published footnotes under an answer — ordered list, real cite and time elements, the claim each source supports, and a staleness warning written in words rather than shown as an amber dot.

Retrieval & Context231 lines1 dep2 Sept

I could not find this in anything I can read.

Rather than guess at a number that has to be exact, here is where I looked and what came closest.

what is our EU VAT registration number

Searched

Company handbook214 documents· 0 matches
Analytics warehouse18 tables· 0 matches
help.acme.com480 pages· 0 matches

Closest, but below the threshold

Tax registrations usually live in the finance drive, which is not connected.

Nothing Found, Answered Honestly

The refusal screen: says plainly that nothing was found, shows where it looked and the near-misses below threshold, and offers the two real ways out instead of inventing an answer.

Retrieval & Context180 lines1 dep2 Sept

Context for this reply

27.0k of 32.0k tokens · 84%

System promptAgent role and house rules1.4k4%
Tool definitions9 tools, JSON schema3.1k10%
ConversationLast 14 turns8.2k26%
refunds-policy.mdWhole file · pinned by you4.8k15%
Q3-support-metrics.csvRows 1–200 of 4,8124.4k14%
escalation-runbook.md3 of 9 sections, ranked by the query2.9k9%
Held for the replyRoom the answer needs2.2k7%

Left out to make it fit

The model did not see any of this. If an answer looks like it ignored a document, start here.

Q3-support-metrics.csv — rows 201–4,812Too large for the window. Only the first 200 rows were sent.96.0k
contract-meridian-2024.pdfRanked 8th; seven chunks fitted. Pin it to force it in.18.3k
Conversation turns 1–6Aged out of the rolling history window.7.1k

Context Window Budget

What is in the context and what fell out of it — a stacked budget with the reply reserve drawn as a segment, and the dropped chunks named with the reason, which is the part nobody ships.

Retrieval & Context309 lines1 dep10 Sept

Knowledge freshness

Answers can only be as current as the source they come from. The oldest connected source was last read 6 weeks ago, so anything changed since then may not be reflected yet.

Help centre
Website · 4 domains
Up to date · last read 11 minutes ago
486 docs
Internal handbook
Notion workspace
Partly indexed · last read 2 hours ago
812 of 1,340 documents searchable — the remaining 528 cannot be cited yet.
1,340 docs
Past tickets
Zendesk · resolved only
Behind · last read 9 days ago
22,190 docs
Policy documents
Google Drive folder
Not syncing · last read 6 weeks ago
The connected account lost access to the folder on 3 August. The 74 documents already indexed are still being answered from, at the age above.
74 docs

Index Freshness Panel

A green tick means the connector works, not that the answers are current. Freshness as an age in words per source, the headline taken from the stalest one, and a failed sync that still says what age it is answering from.

Retrieval & Context246 lines1 dep

How old the sources are

Relevance ranking says which document matched. It says nothing about whether the document is still true, and that is the question a reader has once the answer surprises them.

Retrieval Freshness List

Retrieved sources ranked by how stale they are, because a confident answer from a two-year-old document is the failure people do not catch.

Retrieval & Context151 linesNo deps10 Sept

What it can see

Citations tell you what an answer used. Scope tells you what it could have used, which is the question behind "why did it not know that".

Context Scope List

Which sources this answer may draw on, shown as a scope the user can read before asking rather than a citation list after.

Retrieval & Context152 linesNo deps10 Sept

Grounding

Every claim points at something

The interesting half of a retrieval system is not what it does when it finds the answer. It is what it does when it does not.

Citations on the sentenceNot a source list at the bottom. The claim and its evidence are next to each other or the citation is decoration.
Quoted, not paraphrasedThe retrieved passage is shown as written, so you can see whether it says what the answer claims.
It says when it does not knowNo passage above the relevance floor produces "I could not find this", not a fluent guess.
Stale sources are flaggedAge travels with the passage. A confident answer from a two-year-old document is the failure nobody catches.

Grounding Split

How an answer is tied to its sources, and what the system does when it cannot find any.

Retrieval & Context156 linesNo deps