# Tools

A tool is an app that appears as a tab in the dashboard instead of in the sidebar.

Tools know which app is selected and render in an iframe over the content area.

## making an app a tool

Add `toes.tool` to package.json:

```json
{
  "toes": {
    "tool": true,
    "icon": "🔧"
  },
  "scripts": {
    "toes": "bun run --watch index.tsx"
  }
}
```

## getting the selected app

Query param `?app=<name>` tells you which app the user selected:

```tsx
app.get('/', c => {
  const appName = c.req.query('app')
  if (!appName) {
    return c.html(<p>No app selected</p>)
  }
  // do something with appName
})
```

## environment

- `PORT` - your assigned port
- `APPS_DIR` - path to `/apps` directory
- `DATA_DIR` - per-app data directory (`toes/<tool-name>/`)
- `TOES_URL` - base URL of the Toes server
- `TOES_DIR` - path to the toes config directory

## accessing app files

```ts
const APPS_DIR = process.env.APPS_DIR!
const appPath = join(APPS_DIR, appName)
```

## linking to tools

Use `/tool/:name` URLs to link directly to tools with params:

```html
<a href="/tool/code?app=my-app">
  View in Code
</a>
```

## resize iframe

```js
window.parent.postMessage({
  type: 'resize-iframe',
  height: 500
}, '*')
```

## iframe behavior

- iframes are cached per tool+app combination
- Never recreated once loaded
- State persists across tab switches

## cli

```bash
toes list --tools    # list tools only
toes list --all      # list apps and tools
```
