フロントエンドガイド

Astar Management のフロントエンドは Nuxt 4 / Vue 3 / TypeScript strict（any 禁止）で書かれています。パッケージマネージャは Bun。SPA 専用構成（ssr: false）で、サーバーサイドレンダリングは前提にしていません。

コードの実体は frontend/app/ 配下にあります。中心になるのは次の3つです。

• app/modules/ — 46 個のドメインモジュール（tag, table, document, ai, organize, workspace …）。各モジュールが1つの業務ドメインを担当します。
• app/foundation/ — shadcn-vue ベースの UI プリミティブ（ui/）と Astar 独自の共通コンポーネント（common/）。
• app/shared/ — API クライアント・SSE・通知・i18n などの技術基盤。ドメインを持たない横断的な仕組みはここに置きます。

このガイドを読む前提として、まだ手元でアプリを起動していない場合は先にセットアップ手順を確認してください。ここから先はコードの構造と規約に絞って説明します。

このセクションの構成

1. モジュール内部構造 — 1モジュールの中身（components / composables / repositories / types）と、モジュール間 import のルール
2. API アクセスの一本道 — Component → composable → repository のチェーンと、OpenAPI 型生成
3. i18n — foundation / module の二層 + glossary 構造
4. デザインシステム — デザイントークン、ブランド、bun run lint によるトークン検査

迷ったら app/modules/tag/

tag（タグ付け機能）モジュールは、このガイドが繰り返し参照する 参照実装 です。規約に最も忠実で、かつ小さく完結しているため、新しいモジュールを作るときはまず app/modules/tag/ の構造をコピーするところから始めます。困ったら本文の説明より先に、実際のファイルを開いて確認してください。

全体像（モジュール索引）

「このコードはどのモジュールにあるか」を調べたいときは、backend/frontend 全モジュールの対応表である モジュール索引 を見てください。このセクションはモジュールの中身の作り方、モジュール索引はモジュールの地図という役割分担です。