# Model issues

A React block (a whole screen) in [Beamline](https://beamline.io/)'s [AI workspace](https://beamline.io/components/apps/ai-workspace) app. Live demo: https://beamline.io/components/model-issues

Issues pinned to the objects of a design model. The queue says the scope beside every count (open in the project, on the loaded models, on this version), hides Done issues and says how many with Include, keeps the selected issue by its number through filtering (outside the scope, said), and says an issue was removed while open instead of opening another. An issue is raised only on an object picked on the plan, and a failed raise keeps everything typed. Ready for review is its own state apart from Done; replies are said to be permanent; an issue whose object is gone from the latest version shows it where it was in its original version, not a broken pin.

## Use it for

- Raising and triaging issues attached to objects of a building, product or site model.
- Any issue list where counts must say what they count and items can vanish under you.

## Not for

- One software error under investigation ([issue-workbench](https://beamline.io/components/issue-workbench)).
- Inspecting an object's properties ([model-inspector](https://beamline.io/components/model-inspector)).

## Anatomy

- header: the product's mark, Issues, the model and version, New issue (needs a picked object)
- queue: the scope; the three counts; Done hidden with Include; outside the scope; each issue with number, title, model and object, state
- detail: the plan with numbered pins; title, raised by whom on which version; the object; gone from this version with Show the original; the description; Ready for review, Mark done, Reopen; replies, permanent; the new-issue form

## States

- scope: project, loaded models, this version; Done hidden or included; empty
- issue: open, ready for review, done; status refused (put back)
- object here, or gone (shown in its original version)
- removed while open; selected but outside the scope
- raising: needs an object, no title, raising, refused (kept), raised
- phone: the queue, then the issue with Back
- right to left: mirrors; the plan doesn't

## Keyboard

- Tab through New issue, the scope, Include, each issue, then the issue's actions, the reply and Post

## Motion

None of its own.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `model` (required) | `string` | — | The model and version, as the header says it. |
| `version` (required) | `number` | — | The version loaded now. |
| `levels` (required) | `PlanLevel[]` | — |  |
| `objects` (required) | `ModelObject[]` | — | The objects of the version loaded now. |
| `previousObjects` | `ModelObject[]` | — | Objects as they were in older versions, for issues whose object is gone now. |
| `loadedModels` (required) | `string[]` | — | The models loaded in the scene ("Architecture", "Structure"). |
| `issues` (required) | `ModelIssue[]` | — |  |
| `user` | `string` | — |  |
| `onStatus` | `((id: number, status: "done" \| "open" \| "review") => Promise<void>)` | — |  |
| `onReply` | `((id: number, body: string) => Promise<void>)` | — |  |
| `onCreate` | `((draft: IssueDraft) => Promise<number>)` | — | Raise an issue; resolve with its number. Reject to keep the form as typed. |
| `defaultScope` | `Scope` | — |  |
| `defaultSelected` | `number \| null` | — | An issue open at first; one that no longer exists says it was removed. |
| `defaultIncludeDone` | `boolean` | — |  |
| `product` | `string` | — |  |
| `className` | `string` | — | Classes on the documented visual root; no override by default. |
| `ref` | `Ref<HTMLDivElement>` | — | Receives the documented native target or imperative handle; omitted by default. |

## Built from

- [Avatar](https://beamline.io/components/avatar.md)
- [Button](https://beamline.io/components/button.md)
- [Checkbox](https://beamline.io/components/checkbox.md)
- [Empty state](https://beamline.io/components/empty-state.md)
- [Glow](https://beamline.io/components/glow.md)
- [Input](https://beamline.io/components/input.md)
- [Kbd](https://beamline.io/components/kbd.md)
- [Label](https://beamline.io/components/label.md)
- [Search field](https://beamline.io/components/search-field.md)
- [Segmented control](https://beamline.io/components/segmented-control.md)
- [Select](https://beamline.io/components/select.md)
- [Spinner](https://beamline.io/components/spinner.md)
- [Switch](https://beamline.io/components/switch.md)
- [Text morph](https://beamline.io/components/text-morph.md)
- [Textarea](https://beamline.io/components/textarea.md)
- [Tooltip](https://beamline.io/components/tooltip.md)

## Dependencies

`lucide-react`

## Import

```tsx
import { ModelIssues } from "@beamline/model-issues";
```

## Get it

Model issues is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in AI workspace

- [AI agent workspace](https://beamline.io/components/agent-workspace): Threads, a conversation that opens on the thread's earlier turns (each with its trace, the tools the agent called, a cited answer and any table it…
- [Agent runs monitor](https://beamline.io/components/agent-runs): Every run of your agents in one place: success rate, run time, tokens and spend; the last runs as a strip of status blocks; a live table where running…
- [Agent monitor](https://beamline.io/components/agent-monitor): Agents in production and on test. Monitor shows every agent or one over 24 hours, 7 or 14 days: runs, tokens, estimated cost and average run time counted…
- [Conversation history](https://beamline.io/components/conversation-history): Past conversations with an assistant, ready to pick up again: the list by day with bookmarks and unsent drafts, a search through every message that…
- [Knowledge base manager](https://beamline.io/components/knowledge-base): What your assistant knows and whether it is fresh: sources with live sync status (syncing with progress, out of date, failed with the reason and Retry)…
- [Reading library](https://beamline.io/components/reading-library): A read-it-later library: saved views that are live filters (a query with every unreadable part named, the number that matches now, saved with a name; a…
- [Artifact workbench](https://beamline.io/components/artifact-workbench): Where the things an assistant makes are checked before they leave: every document, piece of code, small app and data result from a conversation, each…
- [AI image studio](https://beamline.io/components/image-studio): Write a prompt, pick a shape, a style and how many, and watch the variations generate side by side; each one opens full screen and can be upscaled or…
- [Voice agent](https://beamline.io/components/voice-agent): A voice agent in three layouts on one session: a workspace with the agent's orb large on a stage (the line being said shows under it, questions to ask…
- [Model playground](https://beamline.io/components/model-playground): Try one prompt on up to three models side by side: pick each model with its price and speed in view, set the system prompt, temperature and length once…
- [Model inspector](https://beamline.io/components/model-inspector): A design model's objects without needing the 3D view: the model tree, where objects with the same name are told apart by id and path; the selected…
- [Agent builder](https://beamline.io/components/agent-builder): An agent's configuration beside an assistant that proposes tools. Ask for what the agent should do and the assistant's proposal lists each tool with why…
- [Workflow composer](https://beamline.io/components/workflow-composer): A workflow drafted from a sentence and finished by hand. The prompt drafts steps that arrive one by one on the graph (a draft cut short keeps what came…
- [Data binding](https://beamline.io/components/data-binding): Bind an object's properties to a view model. Each property says whether it is bound, incomplete or mismatched. A binding takes its source from the…

Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).
