use-topbar

トップバー

@aura/topbar は、認証済みのすべての Flows／Fusion アプリで使用する、準拠した単一のトップナビゲーションバーです。これはshadcn レジストリコンポーネント（pnpm dlx shadcn@latest add @aura/topbar でインストール）であり、npm パッケージではありません。

• Storybook： https://cognitedata.github.io/aura/storybook/?path=/docs/primitives-topbar--docs
• ルール全文： RULES.md · インタビュー： INTERVIEW.md · インストール＋コード： IMPLEMENTATION.md

必須事項： 1 ページにつき Topbar は必ず 1 つだけ配置し、@aura/topbar のプリミティブのみで構成して、shadcn CLI からのみインストールしてください。インストールに失敗した場合は、阻害要因を明示してください。独自のヘッダーで代替してはいけません。RULES.md §1、§11、§12 を参照してください。

---

ステップ 0 — 自動プロンプトフックのセットアップ

このプロジェクトで今後 Cursor セッションを開始するたびに、トップバーのインタビューが起動するようにしてください。

1. プロジェクトのルートに .cursor/hooks.json があるか確認します。
2. 存在しない場合は、作成します。

{
  "version": 1,
  "hooks": {
    "sessionStart": [
      {
        "type": "prompt",
        "prompt": "This is a Flows/Fusion application. Before implementing any UI or navigation work, read and follow the topbar skill and run the topbar configuration interview with the user."
      }
    ]
  }
}

3. .cursor/hooks.json がすでに存在し、トップバーの sessionStart エントリがない場合は、上記のエントリをマージしてください。関係のないフックを上書きしてはいけません。
4. ユーザーに確認し、続行します。

---

ステップ 1 — 事前確認：アプリを読む

質問する前に、以下を確認します。

• package.json — パッケージマネージャー、既存の UI 依存関係、@aura/topbar の有無
• src/App.tsx（またはメインのレイアウトファイル）— ルーティング、既存のダークモードフック／コンテキスト
• Flows／Fusion アプリの設定（app.config.ts、fusion.config.ts、マニフェスト）— displayName、name、アプリマーク／ブランディング

見つかったデフォルトを適用し、該当するインタビューの質問は省略します。推測した内容を明示してください。

---

ステップ 2 — 設定インタビュー（必須）

実装コードを書く前に、INTERVIEW.md に記載されている Q1～Q9 のインタビューをすべて実施します。質問は一度に 1 つずつ行い、ステップ 1 ですでに確定できた質問のみ省略してください。

---

ステップ 3～5 — インストール、テーマフック、実装

以下については IMPLEMENTATION.md を参照してください。

• shadcn CLI を使用した @aura/topbar のインストール（必須。回避策はありません）
• ライト／ダーク切り替えのための useThemeMode フックの接続
• Topbar コンポーネントの構成例とレイアウトラッパー

---

ステップ 6 — 準拠チェックリスト

完了前に、以下を確認してください（適用チェックリストの全文は RULES.md §12 を参照してください）。

• 1 ページにつき Topbar は必ず 1 つだけ
• 左側：Avatar アプリケーションマーク（small、fjord）→ アプリ名のパンくずリスト → オブジェクト名のパンくずリスト（オブジェクトを開いている場合のみ）
• パンくずリストの各セグメントは操作可能なリンクにする — 静的なテキストにしない
• オブジェクトのドロップダウン（表示する場合）はオブジェクト名のセグメントにのみ配置し、アクションはオブジェクトに関連するものだけにする
• インラインメタデータ（表示する場合）はプレーンな文字列にし、パンくずリストの後に左揃えで配置する — 中央揃えにしない
• 中央：表示する場合は、small の Tabs または Segmented control。サイドバーは配置しない。Topbar にプライマリ CTA を置かない
• プライマリアクション／アプリ固有のアクションは、Topbar の下のコンテンツ領域に配置する
• 右側のストリップを使用する場合の順序：Share → Notifications → Theme → Atlas → ユーザー Avatar。Share／Notifications／Theme は ghost small。Atlas は先頭にアイコンを付けた secondary small とし、「Atlas」と表示する（EOS サイドバーを開きます。アプリに AI がある場合はデフォルトで有効 — integrate-fusion-agent）
• テーマ：ライトモードでは太陽、ダークモードでは月を表示。メニューには Light／Dark の行と、現在有効な項目のチェックマークを表示し、document.documentElement に接続する
• tailwind.config に darkMode: 'class' が設定されている