# Todo 18 Prompt Modal and Tool UI Plan

**Status:** done

## Goal

Move prompt editing into a modal, expose matching ChatAgent/EventAgent controls, and make tools/audit activity visible in the frontend.

## Design

- Keep existing prompt-set, system prompt, and pre-message DOM ids so saved prompt behavior remains stable.
- Add a top-level Prompt Config button that opens a native `<dialog>`.
- Add matching ChatAgent/EventAgent controls for model, temperature, max tokens, system prompt, and `extra_body`.
- Render tool metadata from `/api/tools` as selectable rows with description and required parameter names.
- Render backend `audit` events in the transcript as lightweight chain logs.

## Files

- Modify: `src/agent_lab/presentation/static/index.html`
- Modify: `src/agent_lab/presentation/static/app.js`
- Modify: `src/agent_lab/presentation/static/styles.css`
- Modify: `tests/test_websocket_api.py`
- Modify: `docs/plans/todos.md`

## Verification

- Static tests prove modal hooks, matching agent controls, tool metadata UI, and audit handling are wired.
- Full suite passes with `uv run pytest`.

## Result

- Moved prompt workspace controls into a native modal opened by `Prompt Config`.
- Added matching ChatAgent/EventAgent fields for model, temperature, max tokens, system prompt, and extra body.
- Rendered tool cards with descriptions, required parameter metadata, selected count, and select-all/clear actions.
- Added frontend handling for backend `audit` events.
- Verified with focused static tests, `uv run pytest` (`46 passed`), and a local browser check at `http://127.0.0.1:8001`.