# インフラ構成図

## 全体システム構成図

```mermaid
graph TB
    subgraph "Client"
        Browser[Web Browser]
        CLI[CLI Tool<br>@liam-hq/cli]
    end

    subgraph "Vercel Platform"
        subgraph "Edge Network"
            CDN[Vercel CDN]
            Edge[Edge Functions]
        end

        subgraph "Serverless"
            NextJS[Next.js App<br>@liam-hq/app<br>Port 3001]
            Docs[Documentation Site<br>@liam-hq/docs]
            Storybook[Storybook<br>@liam-hq/storybook]
        end
    end

    subgraph "Supabase"
        SupaAuth[Supabase Auth]
        SupaDB[(PostgreSQL 15<br>Port 54322)]
        SupaRealtime[Realtime<br>WebSocket]
        SupaStorage[Storage]
        SupaPooler[PgBouncer<br>Connection Pooler]
    end

    subgraph "External Services"
        GitHub[GitHub<br>OAuth / App]
        OpenAI[OpenAI API]
        LangSmith[LangSmith]
        Sentry[Sentry]
        Resend[Resend<br>Email Service]
        Slack[Slack<br>Notifications]
    end

    Browser --> CDN
    CDN --> NextJS
    CDN --> Docs
    CDN --> Storybook

    NextJS --> SupaAuth
    NextJS --> SupaPooler
    SupaPooler --> SupaDB
    NextJS --> SupaRealtime
    NextJS --> SupaStorage

    NextJS --> OpenAI
    NextJS --> LangSmith
    NextJS --> Sentry
    NextJS --> Resend
    NextJS --> GitHub

    SupaAuth --> GitHub

    CLI -.-> |"npm install"| Browser
```

## アプリケーション構成図

```mermaid
graph TB
    subgraph "Monorepo Structure"
        subgraph "Applications"
            App["@liam-hq/app<br>Main Web App"]
            DocsApp["@liam-hq/docs<br>Documentation"]
            ERDSample["@liam-hq/erd-sample"]
            Assets["@liam-hq/assets"]
        end

        subgraph "Public Packages"
            CLI["@liam-hq/cli<br>npm publish"]
            ERDCore["@liam-hq/erd-core<br>ERD Visualization"]
            Schema["@liam-hq/schema<br>Schema Parser"]
            UI["@liam-hq/ui<br>Component Library"]
        end

        subgraph "Internal Packages"
            Agent["@liam-hq/agent<br>LangGraph AI Agent"]
            DB["@liam-hq/db<br>Database Utilities"]
            MCPServer["@liam-hq/mcp-server"]
            GitHubPkg["@liam-hq/github"]
            Security["@liam-hq/security"]
            PgLite["@liam-hq/pglite-server"]
        end
    end

    App --> ERDCore
    App --> Schema
    App --> UI
    App --> Agent
    App --> DB
    App --> GitHubPkg
    App --> Security

    CLI --> ERDCore
    CLI --> Schema

    Agent --> DB
    Agent --> Schema
    Agent --> PgLite

    ERDCore --> UI
```

## デプロイメントパイプライン図

```mermaid
graph LR
    subgraph "Development"
        Dev[Local Development<br>localhost:3001]
        LocalSupabase[Local Supabase<br>Port 54321-54327]
    end

    subgraph "GitHub"
        PR[Pull Request]
        Main[main branch]
    end

    subgraph "CI/CD - GitHub Actions"
        FrontendCI[frontend-ci.yml<br>Lint, Test]
        DatabaseCI[database-ci.yml<br>PGTap Tests]
        E2E[e2e_tests.yml<br>Playwright]
        SchemaDrift[check-schema-drift.yml<br>Daily 9:00 JST]
    end

    subgraph "Vercel"
        Preview[Preview Deployment<br>PR Preview URLs]
        Production[Production<br>app.liambx.com]
    end

    subgraph "Supabase"
        SupaBranch[Supabase Branching<br>Preview Instances]
        SupaProd[Production Database]
    end

    Dev --> PR
    PR --> FrontendCI
    PR --> DatabaseCI
    FrontendCI --> Preview
    DatabaseCI --> SupaBranch
    Preview --> E2E

    PR --> Main
    Main --> Production
    Main --> SupaProd

    SchemaDrift --> |"Drift Detection"| Slack
```

## ネットワーク構成図

```mermaid
graph TB
    subgraph "Internet"
        User[End User]
    end

    subgraph "Vercel Edge Network"
        EdgeGlobal[Global Edge<br>CDN Nodes]
    end

    subgraph "Vercel Region"
        ServerlessFn[Serverless Functions]
        ServerActions[Server Actions]
    end

    subgraph "Supabase Cloud"
        SupaAPI[REST API<br>Port 54321]
        SupaPG[PostgreSQL<br>Port 54322]
        SupaWS[WebSocket<br>Realtime]
    end

    subgraph "OAuth Providers"
        GitHubOAuth[GitHub OAuth]
    end

    User -->|HTTPS| EdgeGlobal
    EdgeGlobal -->|Internal| ServerlessFn
    ServerlessFn --> ServerActions
    ServerActions -->|HTTPS| SupaAPI
    ServerActions -->|WSS| SupaWS
    SupaAPI --> SupaPG

    User -->|OAuth Flow| GitHubOAuth
    GitHubOAuth -->|Callback| SupaAPI
```

## データベース構成図

```mermaid
graph TB
    subgraph "Supabase Platform"
        subgraph "Connection Layer"
            PgBouncer[PgBouncer<br>Pool Mode: transaction<br>Max Pool: 20<br>Max Conn: 100]
        end

        subgraph "PostgreSQL 15"
            PublicSchema[public schema]
            GraphQLSchema[graphql_public schema]
            ExtSchema[extensions schema]
        end

        subgraph "Supabase Services"
            Auth[Auth Service<br>JWT: 3600s expiry]
            Realtime[Realtime Service]
            Storage[Storage Service<br>Max: 50MiB]
            Analytics[Analytics<br>Port 54327]
        end
    end

    subgraph "Application"
        NextJS[Next.js App]
        Agent[AI Agent]
    end

    NextJS --> PgBouncer
    Agent --> PgBouncer
    PgBouncer --> PublicSchema

    NextJS --> Auth
    NextJS --> Realtime
    NextJS --> Storage

    PublicSchema --> ExtSchema
```

## CI/CD詳細構成図

```mermaid
graph TB
    subgraph "Triggers"
        PRTrigger[Pull Request]
        MergeTrigger[Merge to main]
        DeployTrigger[Deployment Status]
        ScheduleTrigger[Scheduled<br>Daily 9:00 JST]
    end

    subgraph "GitHub Actions Workflows"
        subgraph "PR Checks"
            SetupJob[setup-job<br>Change Detection]
            FrontendLint[frontend-lint]
            FrontendCI[frontend-ci<br>Test, Type Gen]
            DatabaseCI[database-ci<br>PGTap Tests]
        end

        subgraph "Post-Deploy"
            E2ETests[e2e_tests<br>Playwright<br>Chromium, Mobile Safari]
        end

        subgraph "Scheduled"
            SchemaDrift[check-schema-drift]
        end

        subgraph "Release"
            Release[release.yml]
        end
    end

    subgraph "Notifications"
        SlackNotify[Slack Webhook]
        GitHubStatus[GitHub Status Checks]
    end

    PRTrigger --> SetupJob
    SetupJob --> FrontendLint
    SetupJob --> FrontendCI
    PRTrigger --> DatabaseCI

    DeployTrigger --> E2ETests

    ScheduleTrigger --> SchemaDrift

    MergeTrigger --> Release

    E2ETests -->|Failure| SlackNotify
    SchemaDrift -->|Drift Detected| SlackNotify

    FrontendCI --> GitHubStatus
    DatabaseCI --> GitHubStatus
    E2ETests --> GitHubStatus
```

## 監視・ログ構成図

```mermaid
graph TB
    subgraph "Application"
        NextJS[Next.js App]
        Agent[AI Agent]
    end

    subgraph "Monitoring Services"
        subgraph "Sentry"
            SentrySDK[Sentry SDK]
            SentryDashboard[Sentry Dashboard]
            SentrySourcemaps[Source Maps]
            CronMonitors[Cron Monitors]
        end

        subgraph "LangSmith"
            LangTrace[LLM Tracing]
            LangProject[Project Dashboard]
        end
    end

    subgraph "Platform Dashboards"
        VercelDash[Vercel Dashboard<br>Deployments, Functions]
        SupaDash[Supabase Dashboard<br>DB, Auth, Storage]
        GitHubActions[GitHub Actions<br>CI/CD Status]
    end

    subgraph "Alerting"
        SlackAlerts[Slack Alerts]
    end

    NextJS --> SentrySDK
    SentrySDK --> SentryDashboard
    SentrySDK --> SentrySourcemaps
    SentrySDK --> CronMonitors

    Agent --> LangTrace
    LangTrace --> LangProject

    GitHubActions -->|Failure| SlackAlerts
    SentryDashboard -->|Error| SlackAlerts
```

## ローカル開発環境構成図

```mermaid
graph TB
    subgraph "Developer Machine"
        subgraph "Tools"
            pnpm[pnpm 10.18.3]
            Turbo[Turborepo 2.5.8]
            Node[Node.js]
        end

        subgraph "Local Servers"
            NextDev[Next.js Dev Server<br>Port 3001]
            SupaLocal[Supabase Local]
        end

        subgraph "Supabase Local Stack"
            LocalAPI[API<br>Port 54321]
            LocalDB[PostgreSQL<br>Port 54322]
            LocalStudio[Studio<br>Port 54323]
            LocalInbucket[Inbucket<br>Port 54324]
            LocalAnalytics[Analytics<br>Port 54327]
        end
    end

    subgraph "Environment Files"
        EnvTemplate[.env.template]
        EnvLocal[.env.local]
    end

    pnpm --> Turbo
    Turbo --> NextDev
    Turbo --> SupaLocal

    SupaLocal --> LocalAPI
    SupaLocal --> LocalDB
    SupaLocal --> LocalStudio
    SupaLocal --> LocalInbucket
    SupaLocal --> LocalAnalytics

    NextDev --> LocalAPI

    EnvTemplate --> EnvLocal
    EnvLocal --> NextDev
```
