SvelteKitで社内AIツールをフルスタック構築した所感 — SSE・Playwright・暗号化を1フレームワークに収める

src/
├── routes/
│   ├── +page.svelte          ← メインUI
│   ├── +layout.svelte         ← アプリシェル
│   └── api/
│       ├── auth/              ← 認証API
│       │   ├── login/
│       │   ├── logout/
│       │   └── status/
│       └── gpt/               ← AI API
│           ├── generate/      ← SSEストリーミング
│           ├── thread/
│           ├── chat/
│           └── assistant/
├── lib/
│   ├── client/                ← ブラウザ側コード
│   │   ├── gptService.ts
│   │   ├── authService.ts
│   │   └── credentialStorage.ts
│   ├── server/                ← サーバー側コード
│   │   ├── auth/              ← Playwright認証
│   │   ├── services/          ← AI APIラッパー
│   │   └── db/                ← Drizzle ORM
│   ├── components/            ← UIコンポーネント
│   ├── templates/             ← テンプレートJSON
│   └── paraglide/             ← i18nランタイム（自動生成）
└── hooks.server.ts            ← Paraglideミドルウェア

import aiService from "$lib/server/services/aiService";

export const POST: RequestHandler = async ({ request }) => {
  const { prompt, name, instruction, webSearch } = await request.json();
  const response = await aiService.chat(name, instruction, prompt, !!webSearch);

  return new Response(response.data, {
    headers: {
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache",
      "Connection": "keep-alive"
    }
  });
};

let output = $state('');
let isLoading = $state(false);
let isStreaming = $state(false);
let selectedTemplate = $state<Template | null>(null);
let isParameterInputCollapsed = $state(false);

import { paraglideMiddleware } from '$lib/paraglide/server';

const handleParaglide: Handle = ({ event, resolve }) =>
  paraglideMiddleware(event.request, ({ request, locale }) => {
    event.request = request;
    return resolve(event, {
      transformPageChunk: ({ html }) => html.replace('%paraglide.lang%', locale)
    });
  });

export const handle: Handle = handleParaglide;

<!-- ライブラリのButtonコンポーネントに独自クラスを適用 -->
<Button class="locale-switcher-btn">...</Button>

<style>
  /* NG: スコープされてライブラリのDOMに届かない */
  .locale-switcher-btn { background: rgba(255, 255, 255, 0.05); }

  /* OK: :global()でスコープを外す */
  :global(.locale-switcher-btn) { background: rgba(255, 255, 255, 0.05); }
</style>

import * as m from '$lib/paraglide/messages/_index.js';

// 型安全、自動補完が効く
error = m.please_fill_required({ fields: missingRequired.join(', ') });