# アーキテクチャ構成図

## システム全体構成図

```mermaid
graph TB
    subgraph Client["クライアント"]
        Browser["ブラウザ"]
        WFDesigner["workflow-designer-ui<br/>(React Flow)"]
    end

    subgraph Apps["アプリケーション層"]
        NextJS["Next.js 16<br/>(App Router)"]
        AuthMW["Supabase Middleware"]
        APIRoutes["API Routes"]
    end

    subgraph SDK["SDK層 (@giselles-ai/*)"]
        HTTP["@giselles-ai/http<br/>(Router)"]
        Giselle["@giselles-ai/giselle<br/>(Engine)"]
        ReactSDK["@giselles-ai/react<br/>(Hooks)"]
        NextjsSDK["@giselles-ai/nextjs<br/>(Integration)"]
    end

    subgraph Protocol["プロトコル層"]
        Proto["@giselles-ai/protocol<br/>(Zod Schemas)"]
    end

    subgraph Infrastructure["インフラストラクチャ層"]
        Storage["@giselles-ai/storage"]
        RAG["@giselles-ai/rag"]
        LMRegistry["@giselles-ai/language-model-registry"]
        GHTools["@giselles-ai/github-tool"]
    end

    subgraph External["外部サービス"]
        Supabase["Supabase Auth"]
        Postgres["PostgreSQL<br/>(Vercel Postgres)"]
        pgvector["pgvector"]
        LLM["LLM Providers<br/>(OpenAI, Anthropic, Google)"]
        GitHub["GitHub API"]
        Stripe["Stripe"]
        Blob["Vercel Blob"]
    end

    Browser --> WFDesigner
    WFDesigner --> NextJS
    NextJS --> AuthMW
    AuthMW --> APIRoutes
    APIRoutes --> HTTP
    HTTP --> Giselle
    Giselle --> Proto
    ReactSDK --> Giselle
    NextjsSDK --> Giselle

    Giselle --> Storage
    Giselle --> RAG
    Giselle --> LMRegistry
    Giselle --> GHTools

    Storage --> Blob
    RAG --> pgvector
    LMRegistry --> LLM
    GHTools --> GitHub
    AuthMW --> Supabase
    Giselle --> Postgres
    Apps --> Stripe
```

## パッケージ依存関係図

```mermaid
graph TD
    subgraph Applications["アプリケーション"]
        StudioApp["studio.giselles.ai"]
        UIApp["ui.giselles.ai"]
    end

    subgraph InternalPackages["内部パッケージ"]
        WFUI["@giselle-internal/<br/>workflow-designer-ui"]
        UI["@giselle-internal/ui"]
    end

    subgraph SDKPackages["SDKパッケージ"]
        Giselle["@giselles-ai/giselle"]
        React["@giselles-ai/react"]
        NextJS["@giselles-ai/nextjs"]
        HTTP["@giselles-ai/http"]
        Protocol["@giselles-ai/protocol"]
        LM["@giselles-ai/language-model"]
        LMReg["@giselles-ai/language-model-registry"]
        RAG["@giselles-ai/rag"]
        Storage["@giselles-ai/storage"]
        NodeReg["@giselles-ai/node-registry"]
        ActionReg["@giselles-ai/action-registry"]
        TriggerReg["@giselles-ai/trigger-registry"]
        GHTools["@giselles-ai/github-tool"]
        Logger["@giselles-ai/logger"]
        Vault["@giselles-ai/vault"]
        Stream["@giselles-ai/stream"]
    end

    StudioApp --> WFUI
    StudioApp --> Giselle
    StudioApp --> React
    StudioApp --> NextJS
    StudioApp --> Protocol

    WFUI --> UI
    WFUI --> React
    WFUI --> Protocol
    WFUI --> NodeReg

    React --> Giselle
    React --> Stream
    React --> LM

    NextJS --> Giselle
    NextJS --> HTTP
    NextJS --> Storage
    NextJS --> GHTools

    HTTP --> Giselle

    Giselle --> Protocol
    Giselle --> LMReg
    Giselle --> NodeReg
    Giselle --> ActionReg
    Giselle --> TriggerReg
    Giselle --> Storage
    Giselle --> Logger
    Giselle --> Vault
    Giselle --> Stream
    Giselle --> GHTools

    Protocol --> LM
    Protocol --> LMReg
    Protocol --> ActionReg
    Protocol --> TriggerReg

    LMReg --> LM
    RAG --> Protocol
```

## データフロー図

```mermaid
sequenceDiagram
    participant Client as クライアント
    participant NextJS as Next.js
    participant HTTP as HTTP Router
    participant Engine as Giselle Engine
    participant DB as PostgreSQL
    participant LLM as LLM Provider

    Client->>NextJS: POST /api/giselle/createTask
    NextJS->>HTTP: Route dispatch
    HTTP->>Engine: createTask()
    Engine->>DB: INSERT task
    DB-->>Engine: Task created
    Engine-->>HTTP: Task
    HTTP-->>NextJS: JSON Response
    NextJS-->>Client: Task data

    Client->>NextJS: POST /api/giselle/startTask
    NextJS->>HTTP: Route dispatch
    HTTP->>Engine: startTask()

    loop For each sequence
        Engine->>Engine: executeStep()
        alt textGeneration
            Engine->>LLM: generateText()
            LLM-->>Engine: Generated text
        else action
            Engine->>Engine: executeAction()
        else query
            Engine->>DB: executeQuery()
            DB-->>Engine: Query results
        end
        Engine->>DB: UPDATE generation status
    end

    Engine-->>HTTP: Task completed
    HTTP-->>NextJS: JSON Response
    NextJS-->>Client: Completion status
```

## レイヤー構成図

```mermaid
graph TB
    subgraph Presentation["Presentation Layer"]
        WFDesigner["workflow-designer-ui<br/>(Visual Editor)"]
        ReactComponents["React Components"]
    end

    subgraph Application["Application Layer"]
        NextJS["Next.js App Router"]
        Middleware["Auth Middleware"]
        APIRoutes["API Routes"]
        ServerActions["Server Actions"]
    end

    subgraph SDKEngine["SDK/Engine Layer"]
        Giselle["Giselle Engine"]
        Tasks["Task Management"]
        Generations["Generation Processing"]
        Triggers["Trigger Resolution"]
    end

    subgraph ProtocolLayer["Protocol Layer"]
        Schemas["Zod Schemas"]
        Types["TypeScript Types"]
        Validators["Validators"]
    end

    subgraph InfraLayer["Infrastructure Layer"]
        DrizzleORM["Drizzle ORM"]
        StorageAdapter["Storage Adapter"]
        LLMProviders["LLM Providers"]
        ExternalAPIs["External APIs"]
    end

    Presentation --> Application
    Application --> SDKEngine
    SDKEngine --> ProtocolLayer
    ProtocolLayer --> InfraLayer
```

## ドメインモデル図

```mermaid
erDiagram
    Workspace ||--o{ Node : contains
    Workspace ||--o{ Connection : contains
    Node ||--|| OperationNode : "is a"
    Node ||--|| VariableNode : "is a"

    Task ||--o{ Sequence : has
    Task }|--|| Workspace : "based on"
    Sequence ||--o{ Generation : contains

    Generation }|--|| Node : "targets"
    Generation ||--|| GenerationStatus : has

    Trigger ||--|| Node : "attached to"
    App ||--|| Workspace : "published from"
    App ||--|| Node : "entry point"

    Team ||--o{ Workspace : owns
    Team ||--o{ User : "has members"
    Team ||--o{ DataStore : owns

    DataStore ||--o{ Embedding : stores
```

## Generation状態遷移図

```mermaid
stateDiagram-v2
    [*] --> created : Task作成時
    created --> queued : startTask()
    queued --> running : executeStep()
    running --> completed : 成功
    running --> failed : エラー
    running --> cancelled : キャンセル
    completed --> [*]
    failed --> [*]
    cancelled --> [*]
```

## 認証・認可フロー図

```mermaid
sequenceDiagram
    participant Browser as ブラウザ
    participant Middleware as Supabase Middleware
    participant Supabase as Supabase Auth
    participant App as Next.js App
    participant DB as PostgreSQL

    Browser->>Middleware: Request
    Middleware->>Supabase: getUser()

    alt 認証済み
        Supabase-->>Middleware: User data
        Middleware->>App: Request with user
        App->>DB: Check team membership

        alt アクセス許可
            DB-->>App: Membership found
            App-->>Browser: Response (200)
        else アクセス拒否
            DB-->>App: No membership
            App-->>Browser: Forbidden (403)
        end
    else 未認証
        Supabase-->>Middleware: null
        Middleware-->>Browser: Redirect to login
    end
```
