docs: update README to reflect phases 1-3

- Fix Badge/Card/Button/StatusDot prop documentation
- Add Table, Tabs, ProgressBar, Tooltip, Select component docs
- Update imports section with all 11 components + type exports
- Add test and Storybook commands to local dev section
- Update repo layout to show real file structure
- Add omnibioai-control-center to related packages

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: man4ish

README.md

@@ -1,6 +1,6 @@
 # @man4ish/ui
 
-Shared React component library for the [OmniBioAI](https://github.com/man4ish/omnibioai-studio) platform. Provides `Button`, `Badge`, `Card`, `Input`, `StatusDot`, and `Spinner` components built on unified design tokens with zero hardcoded colors.
+Shared React component library for the [OmniBioAI](https://github.com/man4ish/omnibioai-studio) platform. Provides `Button`, `Badge`, `Card`, `Input`, `StatusDot`, `Spinner`, `Table`, `Tabs`, `ProgressBar`, `Tooltip`, and `Select` components built on unified design tokens with zero hardcoded colors.
 
 ---
 
@@ -10,6 +10,9 @@ Shared React component library for the [OmniBioAI](https://github.com/man4ish/om
 - **Design-token driven** — all colors, spacing, and radii come from `@man4ish/design-tokens`; no hardcoded hex values anywhere in the library
 - **Tree-shakeable** — built as ES module + CJS with Vite library mode; only import what you use
 - **React 18+ peer dep** — works with any React 18+ project including the OmniBioAI Electron app and any downstream consumer
+- **Fully tested** — 50+ unit tests with Vitest + React Testing Library
+- **Storybook catalogue** — visual stories for every component and variant
+- **Type-safe exports** — full `.d.ts` declarations via vite-plugin-dts
 
 ---
 
@@ -76,6 +79,8 @@ import { Button } from '@man4ish/ui';
 | `disabled` | `boolean` | `false` | Disables button |
 | `onClick` | `() => void` | — | Click handler |
 
+> **Note:** When `loading` is `true`, a `Spinner` is shown and the button is automatically disabled.
+
 ---
 
 ### `Badge`
@@ -92,7 +97,9 @@ import { Badge } from '@man4ish/ui';
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `variant` | `'success' \| 'warning' \| 'danger' \| 'info' \| 'neutral'` | `'neutral'` | Semantic color |
+| `variant` | `'success' \| 'warning' \| 'danger' \| 'info' \| 'neutral' \| 'default'` | `'neutral'` | Semantic color |
+
+> **Note:** `'default'` is a legacy alias for `'neutral'` and maps to the same visual style.
 
 ---
 
@@ -162,11 +169,14 @@ import { StatusDot } from '@man4ish/ui';
 <StatusDot status="failed" />
 <StatusDot status="queued" />
 <StatusDot status="idle" />
+
+<StatusDot status="running" label="Job in progress" />
 ```
 
-| Prop | Type | Description |
-|---|---|---|
-| `status` | `'running' \| 'success' \| 'failed' \| 'queued' \| 'idle'` | Determines color and animation |
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `status` | `'running' \| 'success' \| 'failed' \| 'queued' \| 'idle'` | — | Determines color and animation |
+| `label` | `string` | — | Optional text label beside the dot |
 
 ---
 
@@ -186,12 +196,157 @@ import { Spinner } from '@man4ish/ui';
 
 ---
 
+### `Table`
+
+Generic sortable, paginated table. Columns are fully typed.
+
+```tsx
+import { Table } from '@man4ish/ui';
+import type { Column } from '@man4ish/ui';
+
+const columns: Column<MyRow>[] = [
+  { key: 'name',   label: 'Repository', sortable: true },
+  { key: 'code',   label: 'Code lines', sortable: true, align: 'right' },
+  { key: 'status', label: 'Status',
+    render: (v) => <Badge variant="success">{String(v)}</Badge> },
+];
+
+<Table columns={columns} data={rows} pageSize={10} />
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `columns` | `Column<T>[]` | — | Column definitions |
+| `data` | `T[]` | — | Row data |
+| `pageSize` | `number` | `10` | Rows per page |
+| `emptyMessage` | `string` | `'No results'` | Empty state text |
+
+**Column definition:**
+
+| Key | Type | Default | Description |
+|---|---|---|---|
+| `key` | `keyof T` | — | Data key |
+| `label` | `string` | — | Column header text |
+| `sortable` | `boolean` | `false` | Enable sort on click |
+| `align` | `'left' \| 'right'` | `'left'` | Text alignment |
+| `render` | `(value, row) => ReactNode` | — | Custom cell renderer |
+
+---
+
+### `Tabs`
+
+```tsx
+import { Tabs } from '@man4ish/ui';
+import type { Tab } from '@man4ish/ui';
+
+<Tabs
+  tabs={[
+    { key: 'arch',   label: 'Architecture', content: <ArchView /> },
+    { key: 'health', label: 'Health',        content: <HealthView /> },
+  ]}
+  defaultTab="arch"
+  onChange={(key) => console.log('switched to', key)}
+/>
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `tabs` | `Tab[]` | — | Tab definitions |
+| `defaultTab` | `string` | first | Initially active tab key |
+| `onChange` | `(key: string) => void` | — | Called on tab switch |
+
+**Tab definition:**
+
+| Key | Type | Default | Description |
+|---|---|---|---|
+| `key` | `string` | — | Unique identifier |
+| `label` | `string` | — | Tab button text |
+| `content` | `ReactNode` | — | Panel content |
+
+---
+
+### `ProgressBar`
+
+```tsx
+import { ProgressBar } from '@man4ish/ui';
+
+<ProgressBar value={98.7} variant="success" label="98.7%" />
+<ProgressBar value={60}   variant="accent" />
+<ProgressBar value={25}   variant="danger" size="lg" />
+```
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `value` | `number` | — | Current value (0–max) |
+| `max` | `number` | `100` | Maximum value |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Bar height |
+| `variant` | `'success' \| 'danger' \| 'warning' \| 'accent' \| 'info'` | `'accent'` | Fill color |
+| `showLabel` | `boolean` | `true` | Show percentage label |
+| `label` | `string` | — | Override auto label text |
+
+---
+
+### `Tooltip`
+
+```tsx
+import { Tooltip } from '@man4ish/ui';
+
+<Tooltip content="27/27 services healthy">
+  <Badge variant="success">UP</Badge>
+</Tooltip>
+```
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `content` | `string` | — | Tooltip text shown on hover |
+| `children` | `ReactNode` | — | Element that triggers hover |
+
+---
+
+### `Select`
+
+```tsx
+import { Select } from '@man4ish/ui';
+import type { SelectOption } from '@man4ish/ui';
+
+<Select
+  label="Category"
+  options={[
+    { value: 'all',  label: 'All categories' },
+    { value: 'core', label: 'Core'           },
+  ]}
+  value={selected}
+  onChange={setSelected}
+  placeholder="Choose a category"
+/>
+```
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `options` | `SelectOption[]` | — | Option list |
+| `value` | `string` | — | Controlled value |
+| `onChange` | `(v: string) => void` | — | Change handler |
+| `label` | `string` | — | Label above the select |
+| `placeholder` | `string` | — | Placeholder option |
+| `disabled` | `boolean` | `false` | Disables the select |
+
+---
+
 ## Importing
 
 Everything is exported from the package root:
 
 ```ts
-import { Button, Badge, Card, Input, StatusDot, Spinner } from '@man4ish/ui';
+import {
+  Button, Badge, Card, Input, StatusDot, Spinner,
+  Table, Tabs, ProgressBar, Tooltip, Select,
+} from '@man4ish/ui';
+
+import type { Column, Tab, SelectOption } from '@man4ish/ui';
 ```
 
 Tree-shaking is automatic — unused components are excluded from your bundle at build time.
@@ -210,6 +365,15 @@ npm run build
 
 # Watch mode (rebuilds on every save)
 npm run dev
+
+# Run tests
+npm run test
+
+# Watch mode
+npm run test:watch
+
+# View Storybook (visual catalogue of all components)
+npm run storybook
 ```
 
 Output lands in `dist/` as `index.js` (ES module) and `index.cjs` (CommonJS) with `index.d.ts` type declarations.
@@ -232,17 +396,26 @@ npm link @man4ish/ui
 ```
 omnibioai-ui/
 ├── src/
-│   ├── index.ts          ← package entry — re-exports all components
-│   ├── Button/
-│   ├── Badge/
-│   ├── Card/
-│   ├── Input/
-│   ├── StatusDot/
-│   └── Spinner/
-├── vite.config.ts        ← library build config (ES + CJS, React external)
+│   ├── index.ts
+│   ├── test-setup.ts
+│   ├── components/
+│   │   ├── Button/      (Button.tsx, Button.css, Button.test.tsx, Button.stories.tsx)
+│   │   ├── Badge/       (Badge.tsx, Badge.css, Badge.test.tsx, Badge.stories.tsx)
+│   │   ├── Card/        (Card.tsx, Card.css, Card.test.tsx, Card.stories.tsx)
+│   │   ├── Input/       (Input.tsx, Input.css, Input.test.tsx, Input.stories.tsx)
+│   │   ├── StatusDot/   (StatusDot.tsx, StatusDot.css, StatusDot.test.tsx, StatusDot.stories.tsx)
+│   │   ├── Spinner/     (Spinner.tsx, Spinner.css, Spinner.test.tsx, Spinner.stories.tsx)
+│   │   ├── Table/       (Table.tsx, Table.css, Table.test.tsx, Table.stories.tsx)
+│   │   ├── Tabs/        (Tabs.tsx, Tabs.css, Tabs.test.tsx, Tabs.stories.tsx)
+│   │   ├── ProgressBar/ (ProgressBar.tsx, ProgressBar.css, ProgressBar.test.tsx, ProgressBar.stories.tsx)
+│   │   ├── Tooltip/     (Tooltip.tsx, Tooltip.css, Tooltip.test.tsx, Tooltip.stories.tsx)
+│   │   └── Select/      (Select.tsx, Select.css, Select.test.tsx, Select.stories.tsx)
+├── .storybook/
+├── vite.config.ts        ← library build config
+├── vitest.config.ts      ← test config (separate from vite)
 ├── tsconfig.json
-├── package.json          ← published as @man4ish/ui to GitHub Packages
-└── .npmrc                ← scoped registry config
+├── CHANGELOG.md
+└── package.json
 ```
 
 ---
@@ -264,6 +437,7 @@ Components reference CSS custom properties from `@man4ish/design-tokens`. No com
 | [`@man4ish/design-tokens`](https://github.com/man4ish/omnibioai-design-tokens) | CSS custom properties — required peer dependency |
 | [`omnibioai-studio`](https://github.com/man4ish/omnibioai-studio) | Electron + React app — primary consumer |
 | [`omnibioai`](https://github.com/man4ish/omnibioai) | Django backend — 150+ plugin bioinformatics platform |
+| `omnibioai-control-center` | Health dashboard + ecosystem report (consumes design tokens) |
 
 ---