docs: fix README images + some refinements

.githooks/pre-commit

@@ -3,12 +3,4 @@ set -eu
 
 pnpm hooks:pre-commit
 
-# Auto-fix formatting on staged files and re-stage them
-STAGED=$(git diff --cached --name-only --diff-filter=ACMR)
-if [ -n "$STAGED" ]; then
-  WWW_STAGED=$(echo "$STAGED" | grep '^apps/www/' || true)
-  if [ -n "$WWW_STAGED" ]; then
-    echo "$WWW_STAGED" | sed 's|^apps/www/||' | (cd apps/www && xargs oxfmt 2>/dev/null) || true
-    echo "$WWW_STAGED" | xargs git add
-  fi
-fi
+pnpm lint-staged

README.md

@@ -1,48 +1,57 @@
-# Tool UI
+<a href="https://tool-ui.com">
+  <img src=".github/assets/header.png" alt="Tool UI" width="100%">
+</a>
 
 Copy/paste React components for rendering tool calls in AI chat interfaces. Built by [assistant-ui](https://github.com/assistant-ui).
 
-When a model calls a tool, most apps dump raw JSON into the conversation. These components turn tool payloads into interactive UI — approvals, forms, tables, charts, media cards, and receipts — so users can understand and act without leaving the chat.
+**[Docs](https://tool-ui.com/docs/overview)** · **[Gallery](https://tool-ui.com/docs/gallery)** · **[Quick Start](https://tool-ui.com/docs/quick-start)**
 
-<p align="center">
-  <img src="public/assets/homepage.png" alt="Tool UI – UI components for AI interfaces" width="880">
-</p>
+When a model calls a tool, most apps dump raw JSON into the conversation. These components turn tool payloads into interactive UI like approvals, forms, tables, charts, and media cards so users can understand and act without leaving the chat.
 
-**[tool-ui.com](https://tool-ui.com)** | [Docs](https://tool-ui.com/docs/overview) | [Gallery](https://tool-ui.com/docs/gallery) | [Quick Start](https://tool-ui.com/docs/quick-start)
+## Featured Components
 
-## Gallery
-
-<p align="center">
-  <img src="public/assets/gallery.png" alt="Tool UI component gallery – weather, message draft, code block, image gallery, order summary, chart, and plan components" width="900">
-</p>
-
-## Featured components
-
-<table>
+<table border="0" cellspacing="0" cellpadding="0">
   <tr>
-    <td align="center" width="50%">
-      <strong>Option List</strong><br>
-      <em>Let users select from multiple choices</em><br>
-      <img src="public/assets/option-list.png" alt="Option List component" width="400">
+    <td valign="top" width="50%">
+      <strong><a href="https://www.tool-ui.com/docs/option-list">Option List</a></strong><br>
+      Let users select from multiple choices<br><br>
+      <a href="https://tool-ui.com/docs/option-list">
+        <img src=".github/assets/option-list.png" alt="Option List component" width="100%">
+      </a>
     </td>
-    <td align="center" width="50%">
-      <strong>Question Flow</strong><br>
-      <em>Multi-step guided questions with branching</em><br>
-      <img src="public/assets/question-flow.png" alt="Question Flow component" width="400">
+    <td valign="top" width="50%">
+      <strong><a href="https://www.tool-ui.com/docs/question-flow">Question Flow</a></strong><br>
+      Multi-step guided questions with branching<br><br>
+      <a href="https://tool-ui.com/docs/question-flow">
+        <img src=".github/assets/question-flow.png" alt="Question Flow component" width="100%">
+      </a>
     </td>
   </tr>
 </table>
 
+
+## Why Tool UI?
+
+- **Copy/paste, not install** — shadcn/ui model. Components live in your codebase. No dependency lock-in.
+- **Schema-validated** — Every component has a Zod schema. Parse tool output, render when valid, fail safely when not.
+- **Interactive with receipts** — Components aren't just displays. Users make choices that flow back to the assistant. Choices persist as receipts.
+- **Built on shadcn/ui** — Radix primitives, Tailwind styling, your theme. No new design system to learn.
+
 ## Components
 
-- **Decision/Confirmation**: Approval Card, Order Summary, Message Draft, Option List
-- **Input/Configuration**: Parameter Slider, Preferences Panel, Question Flow
-- **Display/Artifacts**: Data Table, Chart, Citation, Link Preview, Stats Display, Code Block, Code Diff, Terminal
-- **Media/Creative**: Image, Image Gallery, Video, Audio, Instagram Post, LinkedIn Post, X Post
-- **Progress/Execution**: Plan, Progress Tracker, Weather Widget
+- **Progress**: Plan, Progress Tracker
+- **Input**: Option List, Parameter Slider, Preferences Panel, Question Flow
+- **Display**: Citation, Geo Map, Item Carousel, Link Preview, Stats Display, Terminal, Weather Widget
+- **Artifacts**: Chart, Code Block, Code Diff, Data Table, Instagram Post, LinkedIn Post, Message Draft, X Post
+- **Confirmation**: Approval Card, Order Summary
+- **Media**: Audio, Image, Image Gallery, Video
 
 Each component includes a Zod schema for payload validation and presets for realistic example data. Browse them all in the [Gallery](https://tool-ui.com/docs/gallery).
 
+<a href="https://tool-ui.com/docs/gallery">
+  <img src=".github/assets/gallery.png" alt="Tool UI component gallery" width="100%">
+</a>
+
 ## License
 
-MIT License. See [LICENSE](LICENSE) for details.
+MIT License. See [LICENSE](LICENSE.md) for details.

package.json

@@ -34,11 +34,15 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
+    "lint-staged": "^16.4.0",
     "tsx": "^4.21.0"
   },
   "engines": {
     "node": ">=20",
     "pnpm": ">=8.0.0"
   },
+  "lint-staged": {
+    "apps/www/**/*.{ts,tsx,js,jsx,mjs,cjs,css,json,jsonc}": "npx oxfmt --no-error-on-unmatched-pattern"
+  },
   "packageManager": "pnpm@10.11.0"
 }