# Oddkin > Oddkin is a modular frontend framework built on custom elements and browser APIs. Agent kits generated from each package's published metadata, for the versions this site documents. Read a package's guide first; it links one reference per component. The same kit ships in the package, in `node_modules//agent/`. ## @oddkin/ai 1.0.0-beta.1 Optional AI interaction elements, headless controllers, and stream adapters for conversation, inline assistance, research, and agent workflows. - [@oddkin/ai guide](https://www.oddkin.dev/agent/oddkin-ai/GUIDE.md): install, register, the components by category, and the rules - [Choosing components](https://www.oddkin.dev/agent/oddkin-ai/references/choosing-components.md) - [odd-action-approval](https://www.oddkin.dev/agent/oddkin-ai/references/components/odd-action-approval.md): Review an action, its target, and its changes, then approve or reject it. - [odd-activity](https://www.oddkin.dev/agent/oddkin-ai/references/components/odd-activity.md): Status of the current attempt, separating the work's state from the connection: active tools, approvals, stopping, disconnection, and interruption, with the recovery actions the adapter actually supports (stop, resume, retry). - [odd-ai-label](https://www.oddkin.dev/agent/oddkin-ai/references/components/odd-ai-label.md): A provenance label for generated or assisted content, with the origin details the application supplied in a native disclosure. - [odd-artifact](https://www.oddkin.dev/agent/oddkin-ai/references/components/odd-artifact.md): A generated artifact with a stable identity across revisions: revision history, preview and source modes, application-provided renderers, and export actions. - [odd-change-review](https://www.oddkin.dev/agent/oddkin-ai/references/components/odd-change-review.md): Review proposed edits as before/after or inline word or line diffs; accept, reject, or undo each one. - [odd-checkpoint](https://www.oddkin.dev/agent/oddkin-ai/references/components/odd-checkpoint.md): A restore point: what it restores, a confirmed restore request, pending work, and the outcome the application confirms. - [odd-citation](https://www.oddkin.dev/agent/oddkin-ai/references/components/odd-citation.md): An inline citation marker with an accessible preview of its source. - [odd-context-picker](https://www.oddkin.dev/agent/oddkin-ai/references/components/odd-context-picker.md): Select, inspect, and remove the context sent with a request: files, documents, links, and selected text. - [odd-conversation](https://www.oddkin.dev/agent/oddkin-ai/references/components/odd-conversation.md): A conversation surface: messages as an ARIA feed, history loading, a follow-latest scrolling policy that respects reading earlier content, a visible-anchor guarantee when history is prepended or content above changes size, an explicit "Jump to latest", the run status bar, one announcer for the whole surface, and a slot for the composer. - [odd-inline-assist](https://www.oddkin.dev/agent/oddkin-ai/references/components/odd-inline-assist.md): Selection-based assistance: rewrite, explain, summarize, translate, and expand (or host actions). - [odd-message](https://www.oddkin.dev/agent/oddkin-ai/references/components/odd-message.md): One message: its role, structured parts in order (text, reasoning, files, sources, tools, approvals, artifacts, data), and message actions (copy, regenerate, edit, versions, feedback, provenance). - [odd-message-branch](https://www.oddkin.dev/agent/oddkin-ai/references/components/odd-message-branch.md): Navigate between alternative versions of a message (regenerated answers, edited prompts). - [odd-model-select](https://www.oddkin.dev/agent/oddkin-ai/references/components/odd-model-select.md): Choose among application-provided models, with capabilities and availability. - [odd-prompt-input](https://www.oddkin.dev/agent/oddkin-ai/references/components/odd-prompt-input.md): The prompt composer: an expanding text area with attachments (button, paste, and drop), toolbar slots, send and stop, and a draft that survives failures. - [odd-question](https://www.oddkin.dev/agent/oddkin-ai/references/components/odd-question.md): A clarifying question from an assistant or agent: choices, a structured form, or free text, with an optional custom answer. - [odd-response](https://www.oddkin.dev/agent/oddkin-ai/references/components/odd-response.md): Streamed rich text (Oddkin Markdown) with partial-output, completion, interruption, and error states. - [odd-response-feedback](https://www.oddkin.dev/agent/oddkin-ai/references/components/odd-response-feedback.md): Feedback on one response: a rating, optional reasons and comment, a pending state, and the confirmed outcome from the feedback record. - [odd-sources](https://www.oddkin.dev/agent/oddkin-ai/references/components/odd-sources.md): The list of sources behind a response. - [odd-suggestions](https://www.oddkin.dev/agent/oddkin-ai/references/components/odd-suggestions.md): Suggested prompts. - [odd-task-plan](https://www.oddkin.dev/agent/oddkin-ai/references/components/odd-task-plan.md): An agent's plan: ordered steps, parallel tasks within a step, blockers, progress, and requests for input. - [odd-tool-call](https://www.oddkin.dev/agent/oddkin-ai/references/components/odd-tool-call.md): One tool call: identity, purpose, streamed arguments, execution state, result or failure, and the recovery actions the host supports. - [odd-transcript](https://www.oddkin.dev/agent/oddkin-ai/references/components/odd-transcript.md): A transcript with final segments (optionally editable) and interim text that may still change. - [odd-usage-meter](https://www.oddkin.dev/agent/oddkin-ai/references/components/odd-usage-meter.md): Token, context, quota, and cost figures exactly as the host supplies them, each marked measured, estimated, or unknown. - [odd-voice-input](https://www.oddkin.dev/agent/oddkin-ai/references/components/odd-voice-input.md): Voice capture with transcription: start, stop (keep), and cancel (discard), with permission, device, interruption, and processing states. ## @oddkin/components 1.0.0-beta.1 Themed custom elements, Oddkin layout presets, and component metadata. - [@oddkin/components guide](https://www.oddkin.dev/agent/oddkin-components/GUIDE.md): install, register, the components by category, and the rules - [Choosing components](https://www.oddkin.dev/agent/oddkin-components/references/choosing-components.md) - [Interfaces as data (composition documents)](https://www.oddkin.dev/agent/oddkin-components/references/composition.md) - [odd-alert](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-alert.md): A persistent inline message about the page or a region: a tone glyph, a title, a message, and optional actions. - [odd-avatar](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-avatar.md): A person or group marker: a picture (`src`) or, without one or when it fails to load, the initials of `label`. - [odd-badge](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-badge.md): A passive status or count: words with a tone colour and a glyph, so the meaning never rests on colour alone. - [odd-breadcrumbs](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-breadcrumbs.md): A location trail: links to the pages above this one, then the current page as text. - [odd-button](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-button.md): A button for actions. - [odd-calendar](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-calendar.md): A month of dates to choose one from: the WAI-ARIA date grid, with the month and buttons to the months before and after above it, and Today and Clear below. - [odd-card](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-card.md): A surface that groups related content, with optional header and footer. - [odd-carousel](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-carousel.md): A carousel (APG carousel, manual only): one slide at a time, with previous and next, the position, and a button per slide. - [odd-checkbox](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-checkbox.md): A checkbox that participates in forms like a native one: a native checkbox in the shadow root, drawn by the shared control-indicator module, labelled by the slotted text. - [odd-checkbox-group](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-checkbox-group.md): A named group of `odd-checkbox` choices with one legend, description, and error. - [odd-chip](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-chip.md): A compact token for a value, filter, or tag, with an explicit remove button when `removable`. - [odd-color-picker](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-color-picker.md): One colour, typed as hex or chosen in a popup: a saturation-and-brightness area, a hue slider, hex and opacity entry, the RGB values, and suggested swatches, applied or cancelled. - [odd-combobox](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-combobox.md): An editable input with a popup listbox (APG combobox, list autocomplete): typing filters the options and the first match becomes active; Enter or a click chooses. - [odd-command-palette](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-command-palette.md): A command palette: a modal dialog with a search input and the matching commands below it (APG combobox with a listbox popup that is always shown). - [odd-container](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-container.md): A content measure and an inline-size container: container queries and layout recipe conditions inside it resolve against its width, not the viewport's. - [odd-copy-button](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-copy-button.md): A button that copies text to the clipboard: `value`, or the form value or text of the element named by `from`. - [odd-date-picker](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-date-picker.md): One date, typed in the page language's numeric order or chosen from a calendar in a popup: the WAI-ARIA date picker dialog. - [odd-dialog](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-dialog.md): A modal dialog: a native `` shown modally, so the rest of the page is inert until it closes. - [odd-disclosure](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-disclosure.md): One trigger that shows or hides one related region: a native `
` and ``. - [odd-drawer](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-drawer.md): A panel at an inline edge of the viewport: odd-dialog with a side-sheet layout. - [odd-empty-state](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-empty-state.md): Explains why a region is empty and offers the next useful step: first use, no results, nothing left to do. - [odd-file-input](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-file-input.md): A file chooser over a native ``: a drop zone with a title, the help text, the browser's own picker button, and the chosen files as rows with their size and a remove button. - [odd-icon](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-icon.md): An icon drawn in the current text colour: an SVG file by URL (`src`), or an inline `` placed inside. - [odd-input](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-input.md): A labelled single-line text field that participates in forms like a native input. - [odd-listbox](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-listbox.md): Persistent choices in a form (APG listbox): the listbox keeps focus and the active option is its `aria-activedescendant`. - [odd-menu](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-menu.md): A menu button (APG): a button that opens a menu of actions, with groups, separators, and submenus. - [odd-one-time-code](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-one-time-code.md): A one-time code (a verification code sent by text message or email) entered into `maxlength` cells (default six). - [odd-pagination](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-pagination.md): Page navigation: the position as text, previous and next, and the first, last, and nearby pages with ellipses between. - [odd-picker](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-picker.md): A field that opens a list or a hierarchy to choose from (APG select-only combobox): a popup listbox of options, or, with `items`, a popup tree whose rows expand and collapse without selecting. - [odd-popover](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-popover.md): A non-modal surface anchored to the control that opens it. - [odd-progress](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-progress.md): Progress of a task. - [odd-radio-group](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-radio-group.md): One value from a short set of visible options, each a native radio with its label and description. - [odd-rating](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-rating.md): A score from one to `max` stars (default five), with the chosen value beside the stars ("3 of 5"): the radio-group behavior drawn as stars, each filled up to the chosen one. - [odd-relative-time](https://www.oddkin.dev/agent/oddkin-components/references/components/odd-relative-time.md): A date and time said relative to now ("3 hours ago", "in 2 days", "now") in the page's language, as a `