---
title: "Workspace page"
description: "Workspace page は workspace navigation から開く、アプリ所有の完全な画面です。Core は install 済み lane の current app execution を resolve し、routing と mount boundary を所有して export component を描画します。Bounda…"
url: "https://sotaagents.ai/ja/manual/developer-guide/workspace-pages"
generated_by: "sotaagents-ldp"
docs_index: "https://sotaagents.ai/manual/llms.txt"
locale: "ja"
---

# Workspace page

Workspace page は workspace navigation から開く、アプリ所有の完全な画面です。Core は install 済み lane の current app execution を resolve し、routing と mount boundary を所有して export component を描画します。Boundary 内の表示はアプリ所有であり、Core は artifact launcher、environment badge、use case 固有の control を挿入しません。

YAML

```
contributes:
  ui:
    - id: reports-page
      kind: nativeModule
      surface: page
      slot: workspace.nav
      sectionId: reports
      label: Reports
      icon: chart
      route: /reports/*
      module:
        entry: dist/ui/app.js
        export: ReportsPage
        styles: dist/ui/app.css
```

通常の entry には `workspace.nav`、section placement には `workspace.nav.section` を使います。Route は `/` から始め、`/*` で子 route を許可します。Navigation slot には route または `sectionId` が必要です。

TSX

```
import { useAppContext } from '@sota/platform';

type PageProps = { route?: string; subroute?: string };

export function ReportsPage({ route, subroute }: PageProps) {
  const { workspaceId, ui } = useAppContext();
  return (
    <main>
      <h1>Reports</h1>
      <button type="button" onClick={() => ui.openArtifact('reports.viewer')}>
        Open latest report
      </button>
      <small>Workspace: {workspaceId}</small>
      <small>Route: {subroute ?? route}</small>
    </main>
  );
}
```

Core は選択した app route を `route`/`subroute` props として渡します。App-local router の input に使い、exact execution は route から推測しません。Identity、locale、theme、backend access、lifecycle、host action は platform hook から取得します。