open-index/open-npm huggingface dataset:
npm package: @houston-ai/board
Description: Kanban board for AI agent task management. Cards glow with a rotating conic-gradient border when agents are running.
Latest version: 0.2.0

# @houston-ai/board

Kanban board for AI agent task management. Cards glow with a rotating conic-gradient border when agents are running.

## Install

```bash
pnpm add @houston-ai/board
```

## Usage

```tsx
import { KanbanBoard } from "@houston-ai/board"
import "@houston-ai/board/src/styles.css"

const columns = [
  { id: "todo",    label: "To Do",   statuses: ["todo"] },
  { id: "running", label: "Running", statuses: ["running"] },
  { id: "done",    label: "Done",    statuses: ["completed"] },
]

<KanbanBoard
  columns={columns}
  items={tasks}
  onSelect={(item) => openDetail(item.id)}
  onApprove={(item) => approve(item.id)}
  runningStatuses={["running"]}
/>
```

## Exports

- `KanbanBoard` -- renders columns from a `columns` config and `items` array
- `KanbanColumn` -- single column with header and card list
- `KanbanCard` -- individual card with glow, delete, approve actions
- `KanbanDetailPanel` -- slide-in detail view for selected items
- Types: `KanbanItem`, `KanbanColumn` (config)

## The Glow

Cards matching `runningStatuses` get the `card-running-glow` CSS class: a `conic-gradient` border animated with `@property --glow-angle`, spinning at 2.5s. Blue, indigo, orange, gold. Pure CSS, no JS animation loop.

## Peer Dependencies

- React 19+
- @houston-ai/core

---

Part of [Houston](../../README.md).
npm package: @houston-ai/chat
Description: Full-featured AI chat interface. Streaming markdown, thinking blocks, tool activity, prompt input -- one component or pick individual pieces.
Latest version: 0.2.0

# @houston-ai/chat

Full-featured AI chat interface. Streaming markdown, thinking blocks, tool activity, prompt input -- one component or pick individual pieces.

## Install

```bash
pnpm add @houston-ai/chat
```

## Usage

```tsx
import { ChatPanel } from "@houston-ai/chat"
import "@houston-ai/chat/src/styles.css"

<ChatPanel
  sessionKey={session.id}
  feedItems={feedItems}
  onSend={(text) => sendMessage(text)}
  onStop={() => stopSession()}
  isLoading={isStreaming}
/>
```

## Exports

**Top-level:** ChatPanel, ChatInput, ToolActivity, ToolsAndCards, Typewriter, feedItemsToMessages

**AI Elements:** Conversation, ConversationContent, ConversationScrollButton, Message, MessageContent, MessageResponse, MessageToolbar, Reasoning, ReasoningTrigger, ReasoningContent, PromptInput (with 30+ sub-components), Shimmer, Suggestions

**Types:** FeedItem, RunStatus, ChatMessage, ToolEntry

## How it works

`ChatPanel` accepts an array of `FeedItem` discriminated unions (user messages, assistant text, thinking, tool calls, tool results, final results) and renders the full conversation. Status is derived automatically from the feed, or you can override it.

The AI Elements are composable -- use `ChatPanel` for the batteries-included experience, or build your own layout with the primitives.

## Peer Dependencies

- React 19+
- @houston-ai/core

---

Part of [Houston](../../README.md).
npm package: @houston-ai/connections
Description: External service connections management. Display connected services, manage OAuth tokens, handle connection status.
Latest version: 0.2.0

# @houston-ai/connections

External service connections management. Display connected services, manage OAuth tokens, handle connection status.

## Install

```bash
pnpm add @houston-ai/connections
```

## Usage

```tsx
import { ConnectionsView } from "@houston-ai/connections"

<ConnectionsView
  connections={connections}
  onConnect={(id) => startOAuth(id)}
  onDisconnect={(id) => revokeConnection(id)}
/>
```

## Exports

- `ConnectionsView` -- full connections list with status indicators
- `ConnectionRow` -- single connection with connect/disconnect actions
- Types: `Connection`, `ConnectionsResult`

## Peer Dependencies

- React 19+
- @houston-ai/core

---

Part of [Houston](../../README.md).
npm package: @houston-ai/core
Description: Foundation layer for Houston UI. 36 shadcn/ui components, design tokens, CSS animations, and utilities.
Latest version: 0.2.0

# @houston-ai/core

Foundation layer for Houston UI. 36 shadcn/ui components, design tokens, CSS animations, and utilities.

## Install

```bash
pnpm add @houston-ai/core
```

## Usage

```tsx
import { Button, Badge, Card, Tooltip } from "@houston-ai/core"
import "@houston-ai/core/src/globals.css"

<Button variant="default">Run Agent</Button>
<Badge>3 tasks</Badge>
```

## What's included

**Components:** Accordion, AgentAvatar, Alert, AlertDialog, Avatar, Badge, Button, ButtonGroup, Card, Carousel, Collapsible, Command, ConfirmDialog, Dialog, DropdownMenu, Empty, ErrorBoundary, HoverCard, Input, InputGroup, Popover, Progress, Resizable, ScrollArea, Select, Separator, Sheet, Sidebar, Skeleton, Sonner, Spinner, Switch, Tabs, Textarea, ToastContainer, Tooltip

**Utilities:** `cn()` (clsx + tailwind-merge), `useMobile()` hook

**Styles:** `globals.css` with design tokens, running card glow animation, typing dots, tool pulse, custom scrollbars

## Theming

Override CSS variables in `globals.css` to customize the entire design system. See the [main README](../../README.md#theming) for details.

## Peer Dependencies

- React 19+
- Tailwind CSS 4+

---

Part of [Houston](../../README.md).
npm package: @houston-ai/layout
Description: App-level layout primitives. Sidebar for navigation, tab bar for view switching, split view for panels.
Latest version: 0.2.0

# @houston-ai/layout

App-level layout primitives. Sidebar for navigation, tab bar for view switching, split view for panels.

## Install

```bash
pnpm add @houston-ai/layout
```

## Usage

```tsx
import { AppSidebar, TabBar, SplitView } from "@houston-ai/layout"
import "@houston-ai/layout/src/styles.css"

<AppSidebar
  logo={<Logo />}
  items={projects}
  selectedId={activeId}
  onSelect={setActiveId}
  onAdd={createProject}
/>

<TabBar
  tabs={[
    { id: "board", label: "Board" },
    { id: "chat", label: "Chat", badge: 2 },
  ]}
  activeTab={currentTab}
  onTabChange={setCurrentTab}
/>
```

## Exports

- `AppSidebar` -- project/chat list sidebar with logo, add, delete, keyboard shortcuts
- `TabBar` -- horizontal tab strip with badges and action slots
- `SplitView` -- two-pane layout with resizable divider
- `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle` -- lower-level resizable primitives

## Peer Dependencies

- React 19+
- @houston-ai/core

---

Part of [Houston](../../README.md).
npm package: @houston-ai/review
Description: Code review and deliverables UI. Split-pane review interface with sidebar navigation, detail views, and deliverable acceptance workflow.
Latest version: 0.2.0

# @houston-ai/review

Code review and deliverables UI. Split-pane review interface with sidebar navigation, detail views, and deliverable acceptance workflow.

## Install

```bash
pnpm add @houston-ai/review
```

## Usage

```tsx
import { ReviewSplit } from "@houston-ai/review"

<ReviewSplit
  items={reviewItems}
  selectedId={selectedId}
  onSelect={setSelectedId}
  onApprove={(id) => approveDeliverable(id)}
  onReject={(id) => rejectDeliverable(id)}
/>
```

## Exports

- `ReviewSplit` -- master-detail split layout for review workflow
- `ReviewSidebar` -- navigable list of review items
- `ReviewDetailPanel` -- slide-in detail panel
- `ReviewDetail` -- full review content with markdown rendering
- `ReviewItem` -- single review item in the sidebar
- `ReviewEmpty` -- empty state placeholder
- `DeliverableCard` -- deliverable with accept/reject actions
- `UserFeedback` -- user feedback display component
- Types: `ReviewItemData`, `RunStatus`

## Peer Dependencies

- React 19+
- @houston-ai/core

---

Part of [Houston](../../README.md).
npm package: @houston-ai/routines
Description: Automated routine management. Create, edit, run, and review recurring agent tasks with trigger scheduling and approval controls.
Latest version: 0.2.0

# @houston-ai/routines

Automated routine management. Create, edit, run, and review recurring agent tasks with trigger scheduling and approval controls.

## Install

```bash
pnpm add @houston-ai/routines
```

## Usage

```tsx
import { RoutinesGrid, RoutineDetailPage } from "@houston-ai/routines"

<RoutinesGrid
  routines={routines}
  loading={false}
  onRoutineClick={(r) => navigate(`/routines/${r.id}`)}
  onCreateRoutine={() => openCreateDialog()}
/>
```

## Exports

- `RoutinesGrid` -- card grid of all routines
- `RoutineCard` -- single routine card with status indicator
- `RoutineDetailPage` -- full detail with description, triggers, run history
- `RoutineEditForm` -- create/edit form for routine configuration
- `RoutineDetailActions` -- action buttons (run, edit, delete)
- `RoutineRunPage` -- live view of a running routine
- `RunHistory` -- past run list with status and duration
- Types: `Routine`, `RoutineRun`, `RoutineFormState`, `TriggerType`, `RoutineStatus`, `ApprovalMode`, `RunStatus`

## Peer Dependencies

- React 19+
- @houston-ai/core

---

Part of [Houston](../../README.md).
npm package: @houston-ai/skills
Description: Skills management UI. Browse installed skills, view details, search and install from the community marketplace.
Latest version: 0.2.0

# @houston-ai/skills

Skills management UI. Browse installed skills, view details, search and install from the community marketplace.

## Install

```bash
pnpm add @houston-ai/skills
```

## Usage

```tsx
import { SkillsGrid } from "@houston-ai/skills"

<SkillsGrid
  skills={installedSkills}
  loading={false}
  onSkillClick={(skill) => navigate(`/skills/${skill.id}`)}
  community={{
    onSearch: (q) => searchCommunitySkills(q),
    onInstall: (skill) => installSkill(skill),
  }}
/>
```

## Exports

- `SkillsGrid` -- main view with installed list + optional community section
- `SkillRow` -- single skill row with name, description, icon
- `SkillDetailPage` -- full detail view for a selected skill
- `CommunitySkillsSection` -- search and browse community skills
- `CommunitySkillRow` -- single community skill with install button
- `LearningRow` -- skill learning/memory display
- Types: `Skill`, `CommunitySkill`, `LearningCategory`, `SkillLearning`

## Peer Dependencies

- React 19+
- @houston-ai/core

---

Part of [Houston](../../README.md).