Sources

Web search lines and a list of cited sources.

import { OpencodeSources } from "../components/opencode-sources";
import { OpencodeWindow } from "../components/opencode-window";
import {
  OPENCODE_DEMO_QUERIES,
  OPENCODE_DEMO_SOURCES,
} from "../constants/opencode-demo";

export default function OpencodeSourcesExample() {
  return (
    <div className="w-full p-6">
      <OpencodeWindow className="px-[2ch] py-[1lh]">
        <OpencodeSources
          defaultOpen
          queries={OPENCODE_DEMO_QUERIES}
          sources={OPENCODE_DEMO_SOURCES}
        />
      </OpencodeWindow>
    </div>
  );
}

$ bunx --bun shadcn@latest add @notra/opencode-sources

Each query renders as a ◈ Web Search activity line, followed by a collapsible N cited sources list. Sources with an http or https URL open in a new tab. With sequential, the queries appear one at a time and the sources fade in with a stagger. Everything shows at once when reducedMotion is set or the user prefers reduced motion.

Prop	Default	Description
`sources`		The cited sources.
`queries`	`[]`	Search queries shown above the sources.
`open`, `defaultOpen`, `onOpenChange`	`defaultOpen={false}`	Whether the source list is expanded.
`sequential`	`false`	Reveals queries and sources over time.
`reducedMotion`	user preference	Turns off the sequenced reveal.
`labels`		`citedSources(count)` and `openSource(title, domain)` for translated copy.

interface OpencodeSource {
  domain: string;
  title: string;
  url?: string;
}

Used in

OpenCode

A recreation of an OpenCode terminal session with a transcript, the prompt and the sidebar.