# 画面遷移図

## 概要

Giselle Studio の画面遷移を示す図です。

## 全体画面遷移図

```mermaid
flowchart TB
    subgraph Auth["認証フロー"]
        Login["ログイン画面"]
        Signup["サインアップ画面"]
        SignupEmail["メールサインアップ画面"]
        VerifyEmail["メール確認画面"]
        PasswordReset["パスワードリセット要求画面"]
        PasswordSent["パスワードリセットメール送信完了画面"]
        NewPassword["新パスワード設定画面"]
        PasswordComplete["パスワードリセット完了画面"]
    end

    subgraph JoinTeam["チーム招待フロー"]
        JoinPage["チーム招待画面"]
        JoinLogin["チーム招待ログイン画面"]
        JoinSignup["チーム招待サインアップ画面"]
        JoinVerify["チーム招待メール確認画面"]
        JoinSuccess["チーム参加成功画面"]
    end

    subgraph Main["メイン機能"]
        Lobby["ロビー画面"]
        LobbyV2["ロビー画面（V2）"]
        Workspaces["ワークスペース一覧画面"]
        WorkspaceEditor["ワークフローエディタ画面"]
        Playground["プレイグラウンド画面"]
        Tasks["タスク一覧画面"]
        TaskDetail["タスク詳細画面"]
        TasksDeprecated["タスク一覧画面（非推奨）"]
    end

    subgraph Stage["ステージ機能"]
        Showcase["ショーケース画面"]
        AppDetail["アプリ詳細画面"]
        PlaylistDetail["プレイリスト詳細画面"]
    end

    subgraph Settings["設定"]
        SettingsRoot["設定画面"]
        TeamSettings["チーム設定画面"]
        TeamMembers["チームメンバー管理画面"]
        Integrations["インテグレーション設定画面"]
        ApiKeys["APIキー管理画面"]
        Usage["利用状況画面"]
        VectorStores["GitHub Vector Store設定画面"]
        DocumentVectorStores["ドキュメントVector Store設定画面"]
        DataStores["データストア設定画面"]
        AccountSettings["アカウント設定画面"]
        AccountGeneral["アカウント一般設定画面"]
        AccountAuth["認証設定画面"]
    end

    subgraph Other["その他"]
        Connected["接続完了画面"]
        GithubInstalled["GitHub連携完了画面"]
        Maintenance["メンテナンス画面"]
    end

    %% 認証フロー
    Login <--> Signup
    Signup --> SignupEmail
    SignupEmail --> VerifyEmail
    Login --> PasswordReset
    PasswordReset --> PasswordSent
    PasswordSent --> Login
    NewPassword --> PasswordComplete
    PasswordComplete --> Workspaces

    %% チーム招待フロー
    JoinPage <--> JoinLogin
    JoinPage <--> JoinSignup
    JoinSignup --> JoinVerify
    JoinVerify --> JoinSuccess
    JoinLogin --> JoinSuccess
    JoinSuccess --> Playground

    %% 認証後のメインフロー
    Login --> Lobby
    Login --> LobbyV2
    Login --> Workspaces
    VerifyEmail --> Workspaces

    %% メイン機能間の遷移
    Lobby --> Workspaces
    LobbyV2 --> Workspaces
    Workspaces --> WorkspaceEditor
    Workspaces --> Playground
    Playground --> Tasks
    Playground --> TaskDetail
    Tasks --> TaskDetail
    TaskDetail --> Playground

    %% ステージ機能
    Showcase --> AppDetail
    Showcase --> PlaylistDetail

    %% 設定画面間の遷移
    SettingsRoot --> TeamSettings
    SettingsRoot --> AccountSettings
    TeamSettings --> TeamMembers
    TeamSettings --> Integrations
    TeamSettings --> ApiKeys
    TeamSettings --> Usage
    TeamSettings --> VectorStores
    TeamSettings --> DataStores
    VectorStores --> DocumentVectorStores
    AccountSettings --> AccountGeneral
    AccountSettings --> AccountAuth

    %% ヘッダーからのグローバルナビゲーション
    Main -.-> Settings
    Main -.-> Stage
```

## 認証フロー詳細

```mermaid
flowchart LR
    Start((開始)) --> Login["ログイン画面"]
    Start --> Signup["サインアップ画面"]

    Login -->|"OAuth認証"| OAuth{{"OAuth Provider"}}
    Login -->|"メール認証"| EmailAuth["メール/パスワード入力"]
    Login -->|"パスワード忘れ"| PasswordReset["パスワードリセット"]

    Signup -->|"OAuth"| OAuth
    Signup -->|"メール"| SignupEmail["メールサインアップ"]

    SignupEmail --> VerifyEmail["メール確認"]
    VerifyEmail --> Complete((認証完了))

    OAuth --> Complete
    EmailAuth --> Complete

    PasswordReset --> PasswordSent["メール送信完了"]
    PasswordSent -->|"メールリンク"| NewPassword["新パスワード設定"]
    NewPassword --> PasswordComplete["完了"]
    PasswordComplete --> Complete

    Complete --> Dashboard["ワークスペース一覧"]
```

## チーム招待フロー詳細

```mermaid
flowchart LR
    Invitation["招待メール"] --> JoinPage["チーム招待画面"]

    JoinPage -->|"既存アカウント"| JoinLogin["ログイン"]
    JoinPage -->|"新規アカウント"| JoinSignup["サインアップ"]
    JoinPage -->|"ログイン済み"| Accept["参加承諾"]
    JoinPage -->|"辞退"| Decline["辞退"]

    JoinLogin --> JoinSuccess["参加成功"]
    JoinSignup --> JoinVerify["メール確認"]
    JoinVerify --> JoinSuccess
    Accept --> JoinSuccess

    JoinSuccess --> Playground["プレイグラウンド"]
    Decline --> End((終了))
```

## メイン機能フロー詳細

```mermaid
flowchart TB
    subgraph Dashboard["ダッシュボード"]
        Lobby["ロビー"]
        Workspaces["ワークスペース一覧"]
    end

    subgraph WorkflowManagement["ワークフロー管理"]
        Editor["ワークフローエディタ"]
        Playground["プレイグラウンド"]
    end

    subgraph TaskManagement["タスク管理"]
        Tasks["タスク一覧"]
        TaskDetail["タスク詳細"]
    end

    Lobby --> Workspaces
    Workspaces -->|"新規作成/編集"| Editor
    Workspaces -->|"実行"| Playground

    Playground -->|"タスク作成"| Tasks
    Tasks --> TaskDetail
    TaskDetail -->|"再実行"| Playground
```

## 設定画面フロー詳細

```mermaid
flowchart TB
    Settings["設定"]

    subgraph TeamSettings["チーム設定"]
        TeamGeneral["一般設定"]
        Members["メンバー管理"]
        Integrations["連携設定"]
        ApiKeys["APIキー"]
        Usage["利用状況"]
    end

    subgraph StorageSettings["ストレージ設定"]
        VectorStores["GitHub Vector Store"]
        DocumentStores["ドキュメント Vector Store"]
        DataStores["データストア"]
    end

    subgraph AccountSettings["アカウント設定"]
        AccountGeneral["一般"]
        AccountAuth["認証連携"]
    end

    Settings --> TeamGeneral
    Settings --> AccountGeneral

    TeamGeneral --> Members
    TeamGeneral --> Integrations
    TeamGeneral --> ApiKeys
    TeamGeneral --> Usage
    TeamGeneral --> VectorStores

    VectorStores --> DocumentStores
    VectorStores --> DataStores

    AccountGeneral --> AccountAuth
```
