diff --git a/backend/.env.development.example b/backend/.env.development.example
index e86ebbc..afd13b4 100644
--- a/backend/.env.development.example
+++ b/backend/.env.development.example
@@ -49,5 +49,7 @@ GITEA_TEMPLATE_REPO=project-base
 REPO_IMPORT_ADMIN_EMAIL=admin@example.com
 
 # --- AI 에이전트 (Claude) ---
-# Claude(Anthropic) API 키 — AI 에이전트 패널 연동용(추후). 미설정 시 AI 기능 비활성.
+# Claude(Anthropic) API 키 — AI 채팅 패널용. 미설정 시 AI 기능 비활성.
 CLAUDE_API_KEY=change-me-claude-api-key
+# 사용할 모델 ID — 미설정 시 claude-sonnet-4-6. 콘솔에서 사용 가능한 모델로 교체 가능.
+CLAUDE_MODEL=claude-sonnet-4-6
diff --git a/backend/.env.production.example b/backend/.env.production.example
index d0a3bba..bdce873 100644
--- a/backend/.env.production.example
+++ b/backend/.env.production.example
@@ -49,5 +49,7 @@ GITEA_TEMPLATE_REPO=project-base
 REPO_IMPORT_ADMIN_EMAIL=admin@example.com
 
 # --- AI 에이전트 (Claude) ---
-# Claude(Anthropic) API 키 — AI 에이전트 패널 연동용(추후). 미설정 시 AI 기능 비활성.
+# Claude(Anthropic) API 키 — AI 채팅 패널용. 미설정 시 AI 기능 비활성.
 CLAUDE_API_KEY=change-me-claude-api-key
+# 사용할 모델 ID — 미설정 시 claude-sonnet-4-6. 콘솔에서 사용 가능한 모델로 교체 가능.
+CLAUDE_MODEL=claude-sonnet-4-6
diff --git a/backend/src/app.module.ts b/backend/src/app.module.ts
index 2b0099f..8a6590c 100644
--- a/backend/src/app.module.ts
+++ b/backend/src/app.module.ts
@@ -17,6 +17,7 @@ import { RepoModule } from './modules/repo/repo.module';
 import { TaskModule } from './modules/task/task.module';
 import { ActivityModule } from './modules/activity/activity.module';
 import { NotificationModule } from './modules/notification/notification.module';
+import { AiModule } from './modules/ai/ai.module';
 
 @Module({
   imports: [
@@ -95,6 +96,7 @@ import { NotificationModule } from './modules/notification/notification.module';
     TaskModule,
     ActivityModule,
     NotificationModule,
+    AiModule,
   ],
   controllers: [AppController],
   providers: [
diff --git a/backend/src/modules/ai/ai.controller.ts b/backend/src/modules/ai/ai.controller.ts
new file mode 100644
index 0000000..ca48010
--- /dev/null
+++ b/backend/src/modules/ai/ai.controller.ts
@@ -0,0 +1,32 @@
+import {
+  Body,
+  Controller,
+  HttpCode,
+  HttpStatus,
+  Post,
+  UseGuards,
+} from '@nestjs/common';
+import { ApiOperation, ApiResponse, ApiTags } from '@nestjs/swagger';
+import { Throttle } from '@nestjs/throttler';
+import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
+import { AiService } from './ai.service';
+import { ChatDto } from './dto/chat.dto';
+
+// AI 채팅 컨트롤러 — 인증 필요. 외부 API 호출 비용이 있어 라우트 단위 throttle 적용.
+@ApiTags('AI')
+@Controller('ai')
+@UseGuards(JwtAuthGuard)
+export class AiController {
+  constructor(private readonly aiService: AiService) {}
+
+  @Post('chat')
+  @HttpCode(HttpStatus.OK)
+  @Throttle({ default: { limit: 20, ttl: 60_000 } })
+  @ApiOperation({ summary: 'AI 채팅 (Claude)' })
+  @ApiResponse({ status: 200, description: 'AI 응답' })
+  @ApiResponse({ status: 502, description: 'AI 응답 실패 (BIZ_001)' })
+  async chat(@Body() dto: ChatDto): Promise<{ reply: string }> {
+    const reply = await this.aiService.chat(dto.messages);
+    return { reply };
+  }
+}
diff --git a/backend/src/modules/ai/ai.module.ts b/backend/src/modules/ai/ai.module.ts
new file mode 100644
index 0000000..7992a57
--- /dev/null
+++ b/backend/src/modules/ai/ai.module.ts
@@ -0,0 +1,10 @@
+import { Module } from '@nestjs/common';
+import { AiController } from './ai.controller';
+import { AiService } from './ai.service';
+
+// AI 모듈 — Claude(Anthropic) 채팅 프록시
+@Module({
+  controllers: [AiController],
+  providers: [AiService],
+})
+export class AiModule {}
diff --git a/backend/src/modules/ai/ai.service.ts b/backend/src/modules/ai/ai.service.ts
new file mode 100644
index 0000000..9cdd0f5
--- /dev/null
+++ b/backend/src/modules/ai/ai.service.ts
@@ -0,0 +1,100 @@
+import { HttpStatus, Injectable, Logger } from '@nestjs/common';
+import { ConfigService } from '@nestjs/config';
+import { BusinessException } from '../../common/exceptions/business.exception';
+import type { ChatMessageDto } from './dto/chat.dto';
+
+// Anthropic Messages API 응답(필요 필드만)
+interface AnthropicResponse {
+  content?: { type: string; text?: string }[];
+}
+
+const ANTHROPIC_URL = 'https://api.anthropic.com/v1/messages';
+const REQUEST_TIMEOUT_MS = 30_000;
+const MAX_TOKENS = 1024;
+const SYSTEM_PROMPT =
+  '당신은 업무 협업 도구 "Relay" 의 AI 어시스턴트입니다. ' +
+  '사용자의 질문에 한국어로 간결하고 정확하게 답하세요. ' +
+  '모르는 내용은 추측하지 말고 모른다고 답하세요.';
+
+// AI(Claude) 채팅 서비스 — Anthropic Messages API 프록시.
+// 키(CLAUDE_API_KEY)는 서버 env 에만 두고 클라이언트에 노출하지 않는다.
+@Injectable()
+export class AiService {
+  private readonly logger = new Logger(AiService.name);
+  private readonly apiKey: string;
+  private readonly model: string;
+
+  constructor(config: ConfigService) {
+    this.apiKey = (config.get<string>('CLAUDE_API_KEY') ?? '').trim();
+    this.model = (
+      config.get<string>('CLAUDE_MODEL') ?? 'claude-sonnet-4-6'
+    ).trim();
+    if (!this.apiKey) {
+      this.logger.warn('CLAUDE_API_KEY 미설정 — AI 채팅 비활성화');
+    }
+  }
+
+  get enabled(): boolean {
+    return this.apiKey.length > 0;
+  }
+
+  // 대화 이력을 받아 Claude 응답 텍스트를 반환
+  async chat(messages: ChatMessageDto[]): Promise<string> {
+    if (!this.enabled) {
+      throw new BusinessException(
+        'BIZ_001',
+        'AI 기능이 설정되지 않았습니다. 관리자에게 문의해 주세요.',
+        HttpStatus.SERVICE_UNAVAILABLE,
+      );
+    }
+
+    let response: Response;
+    try {
+      response = await fetch(ANTHROPIC_URL, {
+        method: 'POST',
+        headers: {
+          'content-type': 'application/json',
+          'x-api-key': this.apiKey,
+          'anthropic-version': '2023-06-01',
+        },
+        body: JSON.stringify({
+          model: this.model,
+          max_tokens: MAX_TOKENS,
+          system: SYSTEM_PROMPT,
+          messages: messages.map((m) => ({ role: m.role, content: m.content })),
+        }),
+        signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS),
+      });
+    } catch (e) {
+      // 네트워크 오류/타임아웃 — 키나 내부 정보는 노출하지 않는다
+      this.logger.error(
+        `Anthropic 요청 실패: ${e instanceof Error ? e.message : String(e)}`,
+      );
+      throw new BusinessException(
+        'BIZ_001',
+        'AI 응답을 가져오지 못했습니다. 잠시 후 다시 시도해 주세요.',
+        HttpStatus.BAD_GATEWAY,
+      );
+    }
+
+    if (!response.ok) {
+      const detail = await response.text().catch(() => '');
+      this.logger.error(
+        `Anthropic API 오류 ${response.status}: ${detail.slice(0, 500)}`,
+      );
+      throw new BusinessException(
+        'BIZ_001',
+        'AI 응답을 가져오지 못했습니다. 잠시 후 다시 시도해 주세요.',
+        HttpStatus.BAD_GATEWAY,
+      );
+    }
+
+    const data = (await response.json()) as AnthropicResponse;
+    const text = (data.content ?? [])
+      .filter((b) => b.type === 'text' && typeof b.text === 'string')
+      .map((b) => b.text)
+      .join('')
+      .trim();
+    return text || '(빈 응답을 받았습니다.)';
+  }
+}
diff --git a/backend/src/modules/ai/dto/chat.dto.ts b/backend/src/modules/ai/dto/chat.dto.ts
new file mode 100644
index 0000000..c5c7210
--- /dev/null
+++ b/backend/src/modules/ai/dto/chat.dto.ts
@@ -0,0 +1,36 @@
+import {
+  ArrayMaxSize,
+  ArrayNotEmpty,
+  IsArray,
+  IsIn,
+  IsNotEmpty,
+  IsString,
+  MaxLength,
+  ValidateNested,
+} from 'class-validator';
+import { Type } from 'class-transformer';
+import { ApiProperty } from '@nestjs/swagger';
+
+// 대화 메시지 1건 — 역할(user/assistant)과 내용
+export class ChatMessageDto {
+  @ApiProperty({ description: '역할', enum: ['user', 'assistant'] })
+  @IsIn(['user', 'assistant'], { message: '잘못된 메시지 역할입니다.' })
+  role!: 'user' | 'assistant';
+
+  @ApiProperty({ description: '메시지 내용' })
+  @IsString()
+  @IsNotEmpty({ message: '메시지 내용을 입력해 주세요.' })
+  @MaxLength(8000, { message: '메시지가 너무 깁니다.' })
+  content!: string;
+}
+
+// AI 채팅 요청 — 대화 이력 전체를 전달(서버는 무상태)
+export class ChatDto {
+  @ApiProperty({ description: '대화 이력', type: [ChatMessageDto] })
+  @IsArray()
+  @ArrayNotEmpty({ message: '메시지를 입력해 주세요.' })
+  @ArrayMaxSize(50, { message: '대화가 너무 깁니다. 새 대화를 시작해 주세요.' })
+  @ValidateNested({ each: true })
+  @Type(() => ChatMessageDto)
+  messages!: ChatMessageDto[];
+}
diff --git a/docs/api-contract.md b/docs/api-contract.md
index 6e0b85b..73b7b63 100644
--- a/docs/api-contract.md
+++ b/docs/api-contract.md
@@ -336,9 +336,18 @@ todo ─시작→ prog ─승인요청→ review ─승인→ done
 
 Google/Kakao OAuth(passport, 키 미설정 시 자동 비활성) + 이메일 가입 인증(미인증 로그인 차단, 그랜드페더링). 메일 발송은 `MailService` 플레이스홀더(백엔드 로그). 상세는 §1 참조.
 
+### AI 채팅 (`/api/ai`) — **✅ 완료**
+
+| 메서드 | 경로 | 요청 | 응답 | 비고 |
+|---|---|---|---|---|
+| POST | `/ai/chat` | `{ messages: {role:'user'\|'assistant', content}[] }` | `{ reply }` | Claude(Anthropic) 프록시. 인증 필요, IP당 20회/분 throttle |
+
+- `AiService` 가 Anthropic Messages API(`x-api-key`) 호출 — **키(`CLAUDE_API_KEY`)는 서버 env 에만**, 클라이언트 비노출. 모델 `CLAUDE_MODEL`(기본 `claude-sonnet-4-6`). 미설정 시 503. 외부 오류는 502 + 일반 문구(내부/키 비노출).
+- 프론트: `components/AgentChatPanel.vue`(우측 슬라이드 패널). 버튼은 **AppShell 헤더에 상시 노출(모든 화면에서 열림)**. 대화 이력 전체를 매 요청 전송(서버 무상태). 기존 목업 터미널 패널은 제거.
+
 ### 그 외(미착수)
 
-AI 에이전트 패널. 메일 실제 발송(SMTP) — 현재 로그 대체. (전체 페이지네이션 통일·실시간 알림·Redis 캐싱은 완료.)
+메일 실제 발송(SMTP) — 현재 로그 대체. 보안 후속(계정잠금/CAPTCHA 등). (페이지네이션·실시간 알림·Redis 캐싱·소셜로그인·이메일인증·refresh 회전·AI 채팅은 완료.)
 
 ---
 
diff --git a/docs/integration-progress.md b/docs/integration-progress.md
index cdb77c7..deebf16 100644
--- a/docs/integration-progress.md
+++ b/docs/integration-progress.md
@@ -309,8 +309,17 @@
 - **L6** CORS `localhost:3000`·Swagger `/api-docs` 비운영 한정.
 검증: 백엔드 build/lint 0·20 tests, 프론트 변경 없음.
 
-#### 8-6. 그 외(미착수)
-- AI 에이전트 패널 실연동(+ L1 v-html escape), 메일 실발송(SMTP), 보안 후속(토큰 완전회전·계정잠금·비번 재설정 플로우).
+#### 8-6. AI 채팅 패널 ✅ (2026-06-19)
+
+**지시**: 기존 목업 UI(가짜 "relay order draft" 터미널)는 버리고, **Claude API로 채팅만** 되도록. 키는 백엔드 env(`CLAUDE_API_KEY`)에 등록됨.
+
+- **백엔드** 신규 `modules/ai/`: `AiService`(Anthropic Messages API 프록시 — 글로벌 `fetch` + `AbortSignal.timeout(30s)`, 키는 서버 env 만, 미설정 503·외부오류 502·내부정보 비노출), `AiController` `POST /ai/chat`(JwtAuthGuard + `@Throttle` 20/분), `ChatDto`(role enum + content MaxLength 8000 + 메시지 ArrayMaxSize 50). 모델 `CLAUDE_MODEL`(기본 `claude-sonnet-4-6`). `AiModule` → app.module.
+- **프론트** 신규 `components/AgentChatPanel.vue`(우측 슬라이드 채팅 패널, 환영문구·말풍선·타이핑 인디케이터·에러·새대화, plain text + `white-space:pre-wrap`로 XSS 안전), `types/ai.ts`·`composables/useAi.ts`(대화 이력 전체 전송, 서버 무상태). **TaskDetailPage 의 기존 목업 에이전트 패널(스크립트·템플릿·전역 스타일 전부) 제거**. 이로써 보안 L1(에이전트 v-html)도 해소.
+- **버튼은 AppShell 헤더로 이동 — 모든 화면에서 상시 노출/열림**(`agentOpen` 은 AppShell 가 보유, `<AgentChatPanel>` 도 AppShell 에서 렌더). **대화 이력은 `stores/ai.store.ts`(싱글톤)에 보관 → 화면 이동에도 유지, '새 대화' 버튼으로만 초기화**(입력 텍스트만 컴포넌트 로컬). 하드 리프레시는 초기화(인메모리).
+- 검증: 백엔드 build/lint 0·20 tests, 프론트 type-check/lint/build 0. **런타임 미검증**(실제 API 키 호출 필요). 모델 ID는 콘솔 가용 모델로 `CLAUDE_MODEL` 교체 가능.
+
+#### 8-7. 그 외(미착수)
+- 메일 실발송(SMTP), 비번 재설정 플로우, 보안 후속(계정잠금/CAPTCHA).
 
 ---
 
diff --git a/frontend/src/components/AgentChatPanel.vue b/frontend/src/components/AgentChatPanel.vue
new file mode 100644
index 0000000..0822e22
--- /dev/null
+++ b/frontend/src/components/AgentChatPanel.vue
@@ -0,0 +1,500 @@
+<script setup lang="ts">
+// AI 채팅 패널 — Claude API 와 대화. body 로 Teleport 되는 우측 슬라이드 패널.
+// 대화 이력은 ai.store(싱글톤)에 보관해 화면 이동에도 유지되고, '새 대화' 로만 초기화된다.
+import { nextTick, ref, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useAiStore } from '@/stores/ai.store'
+
+interface Props {
+  open: boolean
+  taskTitle?: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  taskTitle: '',
+})
+
+interface Emits {
+  (e: 'close'): void
+}
+const emit = defineEmits<Emits>()
+
+const aiStore = useAiStore()
+const { messages, loading, error } = storeToRefs(aiStore)
+
+// 입력값만 컴포넌트 로컬(전송 전 임시 텍스트)
+const input = ref('')
+const bodyEl = ref<HTMLElement | null>(null)
+
+// 새 메시지/로딩 시 하단으로 스크롤
+function scrollToBottom() {
+  void nextTick(() => {
+    if (bodyEl.value) bodyEl.value.scrollTop = bodyEl.value.scrollHeight
+  })
+}
+watch(() => [messages.value.length, loading.value], scrollToBottom)
+// 패널을 열 때 하단으로 스크롤
+watch(
+  () => props.open,
+  (open) => {
+    if (open) scrollToBottom()
+  },
+)
+
+async function send() {
+  const text = input.value
+  if (!text.trim() || loading.value) return
+  input.value = ''
+  await aiStore.send(text)
+}
+
+function resetChat() {
+  aiStore.reset()
+  input.value = ''
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="ac-backdrop"
+      @click="emit('close')"
+    />
+    <aside
+      class="ac-panel"
+      :class="{ open }"
+      aria-label="AI 채팅"
+    >
+      <!-- 헤더 -->
+      <header class="ac-head">
+        <div class="ac-title">
+          <span class="ac-logo">AI</span>
+          <div class="ac-titletext">
+            <div class="ac-name">
+              Relay 어시스턴트
+            </div>
+            <div
+              v-if="taskTitle"
+              class="ac-ctx"
+            >
+              {{ taskTitle }}
+            </div>
+          </div>
+        </div>
+        <div class="ac-headbtns">
+          <button
+            class="ac-iconbtn"
+            type="button"
+            title="새 대화"
+            aria-label="새 대화"
+            :disabled="loading"
+            @click="resetChat"
+          >
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" /><path d="M21 3v5h-5" />
+            </svg>
+          </button>
+          <button
+            class="ac-iconbtn"
+            type="button"
+            title="닫기"
+            aria-label="닫기"
+            @click="emit('close')"
+          >
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M18 6 6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      </header>
+
+      <!-- 대화 영역 -->
+      <div
+        ref="bodyEl"
+        class="ac-body"
+      >
+        <!-- 환영 문구 -->
+        <div
+          v-if="messages.length === 0"
+          class="ac-welcome"
+        >
+          <div class="ac-welcome-logo">
+            AI
+          </div>
+          <div class="ac-welcome-title">
+            무엇을 도와드릴까요?
+          </div>
+          <div class="ac-welcome-sub">
+            업무나 일정에 대해 자유롭게 질문해 보세요.
+          </div>
+        </div>
+
+        <div
+          v-for="(m, i) in messages"
+          :key="i"
+          class="ac-msg"
+          :class="m.role"
+        >
+          <span
+            v-if="m.role === 'assistant'"
+            class="ac-ava"
+          >AI</span>
+          <div class="ac-bubble">
+            {{ m.content }}
+          </div>
+        </div>
+
+        <!-- 로딩(응답 대기) -->
+        <div
+          v-if="loading"
+          class="ac-msg assistant"
+        >
+          <span class="ac-ava">AI</span>
+          <div class="ac-bubble ac-typing">
+            <span /><span /><span />
+          </div>
+        </div>
+
+        <div
+          v-if="error"
+          class="ac-error"
+        >
+          {{ error }}
+        </div>
+      </div>
+
+      <!-- 입력 -->
+      <footer class="ac-foot">
+        <div class="ac-inputrow">
+          <textarea
+            v-model="input"
+            class="ac-input"
+            rows="1"
+            placeholder="메시지를 입력하세요…"
+            :disabled="loading"
+            @keydown.enter.exact.prevent="send"
+          />
+          <button
+            class="ac-send"
+            type="button"
+            title="전송"
+            aria-label="전송"
+            :disabled="loading || !input.trim()"
+            @click="send"
+          >
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="m22 2-7 20-4-9-9-4Z" /><path d="M22 2 11 13" />
+            </svg>
+          </button>
+        </div>
+        <div class="ac-hint">
+          Enter 전송 · Shift+Enter 줄바꿈
+        </div>
+      </footer>
+    </aside>
+  </Teleport>
+</template>
+
+<style scoped>
+.ac-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(17, 18, 22, 0.32);
+  z-index: 60;
+}
+.ac-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 26rem;
+  max-width: 96vw;
+  background: #fff;
+  border-left: 1px solid var(--border);
+  box-shadow: -0.5rem 0 1.5rem rgba(17, 18, 22, 0.12);
+  display: flex;
+  flex-direction: column;
+  transform: translateX(100%);
+  transition: transform 0.22s ease;
+  z-index: 61;
+}
+.ac-panel.open {
+  transform: translateX(0);
+}
+
+/* 헤더 */
+.ac-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.875rem 1rem;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.ac-title {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  min-width: 0;
+}
+.ac-logo {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.5rem;
+  background: var(--accent);
+  color: #fff;
+  display: grid;
+  place-items: center;
+  font-size: 0.75rem;
+  font-weight: 800;
+  flex-shrink: 0;
+}
+.ac-titletext {
+  min-width: 0;
+}
+.ac-name {
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: var(--text);
+}
+.ac-ctx {
+  font-size: 0.75rem;
+  color: var(--text-3);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 16rem;
+}
+.ac-headbtns {
+  display: flex;
+  gap: 0.25rem;
+  flex-shrink: 0;
+}
+.ac-iconbtn {
+  width: 2rem;
+  height: 2rem;
+  border: none;
+  background: transparent;
+  border-radius: 0.5rem;
+  color: var(--text-3);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+.ac-iconbtn:hover {
+  background: #f1f2f4;
+  color: var(--text);
+}
+.ac-iconbtn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.ac-iconbtn svg {
+  width: 1.0625rem;
+  height: 1.0625rem;
+}
+
+/* 대화 영역 */
+.ac-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.125rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+}
+.ac-welcome {
+  margin: auto;
+  text-align: center;
+  padding: 1.5rem 0;
+}
+.ac-welcome-logo {
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 0.75rem;
+  background: var(--accent-weak);
+  color: var(--accent);
+  display: grid;
+  place-items: center;
+  font-weight: 800;
+  margin: 0 auto 0.875rem;
+}
+.ac-welcome-title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--text);
+}
+.ac-welcome-sub {
+  font-size: 0.8125rem;
+  color: var(--text-3);
+  margin-top: 0.375rem;
+  line-height: 1.5;
+}
+
+.ac-msg {
+  display: flex;
+  gap: 0.5rem;
+  max-width: 100%;
+}
+.ac-msg.user {
+  justify-content: flex-end;
+}
+.ac-ava {
+  width: 1.625rem;
+  height: 1.625rem;
+  border-radius: 0.5rem;
+  background: var(--accent-weak);
+  color: var(--accent);
+  display: grid;
+  place-items: center;
+  font-size: 0.625rem;
+  font-weight: 800;
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+}
+.ac-bubble {
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: var(--text);
+  white-space: pre-wrap;
+  word-break: break-word;
+  padding: 0.5625rem 0.75rem;
+  border-radius: 0.75rem;
+  max-width: 19rem;
+}
+.ac-msg.assistant .ac-bubble {
+  background: #f4f5f7;
+  border-top-left-radius: 0.25rem;
+}
+.ac-msg.user .ac-bubble {
+  background: var(--accent);
+  color: #fff;
+  border-top-right-radius: 0.25rem;
+}
+
+/* 타이핑 인디케이터 */
+.ac-typing {
+  display: inline-flex;
+  gap: 0.25rem;
+  align-items: center;
+}
+.ac-typing span {
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 50%;
+  background: var(--text-3);
+  animation: ac-blink 1.2s infinite ease-in-out both;
+}
+.ac-typing span:nth-child(2) {
+  animation-delay: 0.18s;
+}
+.ac-typing span:nth-child(3) {
+  animation-delay: 0.36s;
+}
+@keyframes ac-blink {
+  0%,
+  80%,
+  100% {
+    opacity: 0.25;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+.ac-error {
+  font-size: 0.8125rem;
+  color: var(--red);
+  background: var(--red-weak);
+  border: 1px solid var(--red-border);
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.75rem;
+}
+
+/* 입력 */
+.ac-foot {
+  border-top: 1px solid var(--border);
+  padding: 0.75rem 1rem 0.875rem;
+  flex-shrink: 0;
+}
+.ac-inputrow {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+  border: 1px solid var(--border-strong);
+  border-radius: 0.625rem;
+  padding: 0.375rem 0.375rem 0.375rem 0.75rem;
+  background: #fff;
+}
+.ac-inputrow:focus-within {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-weak);
+}
+.ac-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  resize: none;
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--text);
+  background: transparent;
+  max-height: 7rem;
+  padding: 0.25rem 0;
+}
+.ac-input::placeholder {
+  color: var(--text-3);
+}
+.ac-send {
+  width: 2rem;
+  height: 2rem;
+  border: none;
+  border-radius: 0.5rem;
+  background: var(--accent);
+  color: #fff;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.ac-send:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+.ac-send:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+.ac-send svg {
+  width: 1rem;
+  height: 1rem;
+}
+.ac-hint {
+  font-size: 0.6875rem;
+  color: var(--text-3);
+  margin-top: 0.4375rem;
+  text-align: center;
+}
+</style>
diff --git a/frontend/src/composables/useAi.ts b/frontend/src/composables/useAi.ts
new file mode 100644
index 0000000..30ac393
--- /dev/null
+++ b/frontend/src/composables/useAi.ts
@@ -0,0 +1,13 @@
+import { useApi } from './useApi'
+import type { ChatMessage, ChatResult } from '@/types/ai'
+
+// AI 도메인 API Composable — 대화 이력 전체를 전달(서버 무상태)
+export function useAi() {
+  const api = useApi()
+
+  async function chat(messages: ChatMessage[]): Promise<ChatResult> {
+    return (await api.post('/ai/chat', { messages })) as unknown as ChatResult
+  }
+
+  return { chat }
+}
diff --git a/frontend/src/layouts/AppShell.vue b/frontend/src/layouts/AppShell.vue
index 4f24d26..0805518 100644
--- a/frontend/src/layouts/AppShell.vue
+++ b/frontend/src/layouts/AppShell.vue
@@ -7,12 +7,16 @@ import { useRoute, useRouter, RouterLink } from 'vue-router'
 import { useAuthStore } from '@/stores/auth.store'
 import { useNotificationStore } from '@/stores/notification.store'
 import UserAvatar from '@/components/UserAvatar.vue'
+import AgentChatPanel from '@/components/AgentChatPanel.vue'
 import type { NotificationView } from '@/types/notification'
 
 const route = useRoute()
 const router = useRouter()
 const authStore = useAuthStore()
 
+// AI 채팅 패널 — 모든 화면 헤더에서 열 수 있다
+const agentOpen = ref(false)
+
 // 현재 경로 기준으로 상단 네비 활성 항목을 판별
 const activeNav = computed<'tasks' | 'repos'>(() =>
   route.path.startsWith('/repos') ? 'repos' : 'tasks',
@@ -86,9 +90,32 @@ async function onLogout() {
     </nav>
 
     <div class="topbar-right">
-      <!-- 화면별 추가 액션(예: AI 에이전트 버튼)을 끼워 넣는 슬롯 -->
+      <!-- 화면별 추가 액션을 끼워 넣는 슬롯 -->
       <slot name="actions" />
 
+      <!-- AI 어시스턴트 — 모든 화면에서 상시 노출 -->
+      <button
+        class="icon-btn agent"
+        type="button"
+        title="AI 어시스턴트"
+        aria-label="AI 어시스턴트"
+        @click="agentOpen = true"
+      >
+        <svg
+          width="17"
+          height="17"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M12 3 13.4 8.6 19 10l-5.6 1.4L12 17l-1.4-5.6L5 10l5.6-1.4Z" />
+          <path d="M18 16l.7 2.3L21 19l-2.3.7L18 22l-.7-2.3L15 19l2.3-.7Z" />
+        </svg>
+      </button>
+
       <button
         class="icon-btn"
         type="button"
@@ -263,6 +290,12 @@ async function onLogout() {
   </header>
 
   <slot />
+
+  <!-- AI 채팅 패널 — 헤더 어디서든 열림 -->
+  <AgentChatPanel
+    :open="agentOpen"
+    @close="agentOpen = false"
+  />
 </template>
 
 <style scoped>
@@ -348,6 +381,14 @@ async function onLogout() {
   background: #f1f2f4;
   color: var(--text);
 }
+/* AI 어시스턴트 버튼 강조 */
+.icon-btn.agent {
+  color: var(--accent);
+}
+.icon-btn.agent:hover {
+  background: var(--accent-weak);
+  color: var(--accent-hover);
+}
 /* 알림 종 + 드롭다운 */
 .noti-wrap {
   position: relative;
diff --git a/frontend/src/pages/relay/TaskDetailPage.vue b/frontend/src/pages/relay/TaskDetailPage.vue
index 620c167..f5f8d92 100644
--- a/frontend/src/pages/relay/TaskDetailPage.vue
+++ b/frontend/src/pages/relay/TaskDetailPage.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
 // 업무 상세 — 내용/체크리스트/댓글·활동 + 사이드(승인/상태/담당/마감/첨부/지시자)
-// + 삭제·승인·수정요청 모달 + AI 터미널 에이전트 패널
+// + 삭제·승인·수정요청 모달 + AI 채팅 패널
 import {
   computed,
   defineComponent,
   h,
-  nextTick,
   onMounted,
   onUnmounted,
-  reactive,
   ref,
   watch,
 } from 'vue'
@@ -286,7 +284,6 @@ async function removeFile(att: Attachment) {
 function onKeydown(e: KeyboardEvent) {
   if (e.key === 'Escape') {
     closeAllOverlays()
-    agentOpen.value = false
   }
 }
 function onDocClick() {
@@ -301,199 +298,6 @@ onUnmounted(() => {
   document.removeEventListener('click', onDocClick)
 })
 
-/* ============================================================
- * AI 터미널 에이전트 패널
- * ============================================================ */
-type AgentItem =
-  | { type: 'sys'; html: string }
-  | { type: 'bot'; html: string }
-  | { type: 'user'; text: string }
-  | { type: 'tool'; cmd: string; body: string }
-  | {
-      type: 'draft'
-      title: string
-      desc: string
-      todos: { text: string; sel: boolean }[]
-      meta?: string
-      created: boolean
-    }
-  | { type: 'review'; rows: { st: 'ok' | 'warn' | 'miss'; text: string; note: string; tag: string }[]; requested: boolean }
-
-const agentOpen = ref(false)
-const agentInput = ref('')
-const agBody = ref<HTMLElement | null>(null)
-let orderSeq = 17
-
-// 초기 데모 대화(시안 기준)
-function seedItems(): AgentItem[] {
-  return [
-    { type: 'sys', html: '— <b>업무 지시서 작성 모드</b> —' },
-    {
-      type: 'bot',
-      html: '지시할 업무를 자연어로 설명하거나 <b>/새지시</b> 명령으로 시작하세요. 제가 <b>업무 내용</b>과 <b>해야 할 일</b>을 자동으로 구성해 드립니다.',
-    },
-    { type: 'user', text: '/새지시 9월 신제품 출시용 인스타그램 릴스 3편 제작' },
-    {
-      type: 'tool',
-      cmd: '$ relay order draft --analyze',
-      body:
-        '분석 완료 <span class="ok">✓</span>\n' +
-        '<span class="key">유형</span>     콘텐츠 제작 · 영상\n' +
-        '<span class="key">플랫폼</span>   Instagram Reels\n' +
-        '<span class="key">수량</span>     3편\n' +
-        '<span class="key">저장소</span>   q3-launch-campaign',
-    },
-    { type: 'bot', html: '이렇게 이해했어요. 이 방향이 맞나요? 맞으면 <b>진행</b>이라고 알려주시고, 담당자나 마감을 함께 지정해 주셔도 좋아요.' },
-    { type: 'user', text: '맞아. 담당자는 정민호, 마감은 6월 30일로 진행해줘' },
-    { type: 'bot', html: '업무 내용과 해야 할 일을 자동으로 구성했어요. 포함할 항목을 선택한 뒤 지시서를 만드세요.' },
-    {
-      type: 'draft',
-      title: '9월 신제품 출시 인스타그램 릴스 3편 제작',
-      desc: '9월 신제품 출시를 알리기 위한 인스타그램 릴스 3편을 제작합니다. 숏폼 포맷으로 핵심 메시지를 빠르게 전달하고, 브랜드 가이드라인의 톤앤매너를 유지합니다. 1차 기획안 확정 후 촬영·편집을 진행합니다.',
-      todos: [
-        { text: '릴스 3편 기획안 및 스토리보드 작성', sel: true },
-        { text: '촬영 콘티 확정 및 촬영 소스 준비', sel: true },
-        { text: '영상 편집 및 자막 작업 (3편)', sel: true },
-        { text: '브랜드 가이드라인 톤앤매너 검수', sel: true },
-        { text: '업로드 일정 확정 및 예약 발행', sel: true },
-      ],
-      meta: '담당 정민호 · 마감 6월 30일',
-      created: false,
-    },
-  ]
-}
-const agentItems = reactive<AgentItem[]>(seedItems())
-
-// 새 항목 추가 시 하단으로 스크롤
-watch(
-  () => agentItems.length,
-  () => {
-    nextTick(() => {
-      if (agBody.value) agBody.value.scrollTop = agBody.value.scrollHeight
-    })
-  },
-)
-
-function openAgent() {
-  agentOpen.value = true
-}
-function resetAgent() {
-  agentItems.splice(0, agentItems.length, ...seedItems().slice(0, 2))
-  agentItems.push({ type: 'bot', html: '새 세션을 시작했어요. 지시할 업무를 설명하거나 <b>/새지시</b> 명령으로 시작하세요.' })
-}
-
-function buildDraft(title: string) {
-  const list = [
-    title + ' 기획안 및 범위 정리',
-    '초안 제작 및 1차 작업',
-    '중간 점검 및 피드백 반영',
-    '브랜드 가이드라인 검수',
-    '최종 산출물 공유 및 일정 확정',
-  ]
-  agentItems.push({
-    type: 'draft',
-    title,
-    desc: `“${title}” 업무를 진행합니다. 핵심 목표를 정의하고 단계별로 산출물을 완성하며, 브랜드 가이드라인과 일정에 맞춰 마무리합니다.`,
-    todos: list.map((t) => ({ text: t, sel: true })),
-    created: false,
-  })
-}
-
-function selectedCount(item: Extract<AgentItem, { type: 'draft' }>) {
-  return item.todos.filter((t) => t.sel).length
-}
-function toggleTodo(item: Extract<AgentItem, { type: 'draft' }>, idx: number) {
-  if (item.created) return
-  const todo = item.todos[idx]
-  if (todo) todo.sel = !todo.sel
-}
-function createOrder(item: Extract<AgentItem, { type: 'draft' }>) {
-  if (item.created) return
-  const n = selectedCount(item)
-  if (n === 0) return
-  item.created = true
-  const id = orderSeq++
-  agentItems.push({
-    type: 'tool',
-    cmd: '$ relay order create',
-    body:
-      `<span class="ok">✓ 지시서 생성됨</span>  #${id}\n` +
-      '<span class="key">저장소</span>   q3-launch-campaign\n' +
-      '<span class="key">담당</span>     정민호\n' +
-      `<span class="key">항목</span>     ${n}개\n` +
-      '<span class="key">알림</span>     전송 ✓',
-  })
-  agentItems.push({ type: 'bot', html: `지시서 <b>#${id}</b>이(가) 생성되어 담당자에게 전달됐어요. 업무 화면에서 확인할 수 있어요.` })
-}
-
-function runReview() {
-  agentItems.push({
-    type: 'tool',
-    cmd: '$ relay review --task #9 --scan',
-    body:
-      'checklist 항목 3개 로드 ✓\n' +
-      'repo 스캔 중… q3-launch-campaign@main\n' +
-      'matched  <span class="ok">banners/main_h_1920x1080.png</span>\n' +
-      'matched  <span class="warn">banners/main_v_1080x1920.png</span>\n' +
-      'missing  <span class="key">mobile/adaptive_600.*</span>',
-  })
-  agentItems.push({ type: 'bot', html: '해야 할 일 3개를 실제 산출물과 대조해 검토했어요. 결과는 아래와 같아요.' })
-  agentItems.push({
-    type: 'review',
-    requested: false,
-    rows: [
-      { st: 'ok', text: '가로형 메인 배너 1920×1080 디자인', note: 'banners/main_h_1920x1080.png · 규격·세이프영역 확인', tag: '구현 확인' },
-      { st: 'warn', text: '세로형 메인 배너 1080×1920 디자인', note: '파일은 있으나 카피 세이프영역 미반영 · 보완 권장', tag: '부분 구현' },
-      { st: 'miss', text: '모바일 적응형 600×600 제작', note: 'mobile/adaptive_600 산출물을 찾지 못했어요', tag: '누락' },
-    ],
-  })
-}
-function reviewComment() {
-  agentItems.push({ type: 'bot', html: '보완이 필요한 <b>2개 항목</b>(세로형 세이프영역, 모바일 적응형)을 업무 댓글로 정리해 남겼어요.' })
-}
-function reviewRequest(item: Extract<AgentItem, { type: 'review' }>) {
-  if (item.requested) return
-  item.requested = true
-  agentItems.push({
-    type: 'tool',
-    cmd: '$ relay review --submit #9',
-    body: '<span class="warn">⚠ 누락 1 · 보완 1</span> 포함하여 요청\n<span class="ok">✓ 승인 요청 전송됨</span>  → 정태경(지시자)',
-  })
-  agentItems.push({ type: 'bot', html: '검토 결과를 포함해 승인을 요청했어요. 지시자가 리포트를 함께 확인합니다.' })
-}
-
-function sendAgent() {
-  const text = agentInput.value.trim()
-  if (!text) return
-  agentItems.push({ type: 'user', text })
-  agentInput.value = ''
-  const m = text.match(/^\/(새지시|지시)\s+(.+)/)
-  if (/^\/(검토요청|검토|review)/.test(text)) {
-    runReview()
-  } else if (m && m[2]) {
-    const req = m[2].trim()
-    agentItems.push({
-      type: 'tool',
-      cmd: '$ relay order draft --analyze',
-      body: `분석 완료 <span class="ok">✓</span>\n<span class="key">요청</span>   ${req}\n<span class="key">저장소</span> q3-launch-campaign`,
-    })
-    agentItems.push({ type: 'bot', html: '요청을 바탕으로 지시서 초안을 구성했어요. 포함할 항목을 선택한 뒤 지시서를 만드세요.' })
-    buildDraft(req)
-  } else {
-    agentItems.push({
-      type: 'bot',
-      html: '<b>/새지시 [업무 설명]</b> 형식으로 입력하시면 업무 내용과 해야 할 일을 자동으로 구성해 드려요. 예: <span style="color:#7aa2f7">/새지시 랜딩페이지 리뉴얼</span>',
-    })
-  }
-}
-function quickChip(cmd: string) {
-  if (cmd === '/새지시') {
-    agentInput.value = '/새지시 '
-  } else if (cmd === '/검토요청') {
-    runReview()
-  }
-}
-
 // 파일명(확장자) → 종류 배지(라벨/색상). 활동·댓글은 파일명만 있으므로 종류를 파생
 function badgeFor(name: string | undefined): { label: string; cls: string } {
   return fileBadge(attachmentKindOf(name ?? ''))
@@ -502,40 +306,11 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
 
 <template>
   <!--
-    이 화면의 v-html 은 모두 내부에서 생성한 신뢰 가능한 마크업(목업 데이터·에이전트 봇/도구 출력)만 렌더한다.
+    이 화면의 v-html 은 모두 내부에서 생성한 신뢰 가능한 마크업(활동/댓글 조립 마크업)만 렌더한다.
     사용자 입력은 {{ }} 로 이스케이프하거나 renderMention() 에서 이스케이프 후 처리하므로 XSS 위험이 없다.
   -->
   <!-- eslint-disable vue/no-v-html -->
   <AppShell>
-    <!-- 탑바에 에이전트 버튼 추가 -->
-    <template #actions>
-      <button
-        class="icon-btn agent"
-        type="button"
-        title="Relay 에이전트"
-        @click="openAgent"
-      >
-        <svg
-          width="17"
-          height="17"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <polyline points="4 17 10 11 4 5" />
-          <line
-            x1="12"
-            y1="19"
-            x2="20"
-            y2="19"
-          />
-        </svg>
-      </button>
-    </template>
-
     <div
       v-if="task"
       class="page"
@@ -1502,336 +1277,6 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
         </div>
       </div>
     </Teleport>
-
-    <!-- ===== AI 에이전트 패널 ===== -->
-    <Teleport to="body">
-      <aside
-        class="agent-panel"
-        :class="{ open: agentOpen }"
-      >
-        <div class="ag-head">
-          <div class="ag-logo">
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            ><polyline points="4 17 10 11 4 5" /><line
-              x1="12"
-              y1="19"
-              x2="20"
-              y2="19"
-            /></svg>
-          </div>
-          <div class="ag-h-main">
-            <div class="ag-name">
-              Relay 에이전트 <span class="ag-status"><span class="dot" />온라인</span>
-            </div>
-            <div class="ag-ctx">
-              repo: q3-launch-campaign · 지시서 작성
-            </div>
-          </div>
-          <button
-            class="ag-hbtn"
-            type="button"
-            title="새 세션"
-            @click="resetAgent"
-          >
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            ><path d="M21 12a9 9 0 1 1-3-6.7" /><path d="M21 4v5h-5" /></svg>
-          </button>
-          <button
-            class="ag-hbtn"
-            type="button"
-            title="닫기"
-            @click="agentOpen = false"
-          >
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            ><path d="M18 6 6 18M6 6l12 12" /></svg>
-          </button>
-        </div>
-
-        <div
-          ref="agBody"
-          class="ag-body"
-        >
-          <template
-            v-for="(item, i) in agentItems"
-            :key="i"
-          >
-            <div
-              v-if="item.type === 'sys'"
-              class="ag-sys"
-              v-html="item.html"
-            />
-
-            <div
-              v-else-if="item.type === 'bot'"
-              class="ag-msg bot"
-            >
-              <span class="ava"><svg
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              ><polyline points="4 17 10 11 4 5" /><line
-                x1="12"
-                y1="19"
-                x2="20"
-                y2="19"
-              /></svg></span>
-              <span
-                class="bubble"
-                v-html="item.html"
-              />
-            </div>
-
-            <div
-              v-else-if="item.type === 'user'"
-              class="ag-msg user"
-            >
-              <span class="ava"><UserAvatar
-                :url="me.avatarUrl"
-                :name="me.name"
-              /></span>
-              <span class="bubble">{{ item.text }}</span>
-            </div>
-
-            <div
-              v-else-if="item.type === 'tool'"
-              class="ag-tool"
-            >
-              <div class="ag-tool-head">
-                <span class="tdot" /><span class="cmd">{{ item.cmd }}</span>
-              </div>
-              <div
-                class="ag-tool-body"
-                v-html="item.body"
-              />
-            </div>
-
-            <div
-              v-else-if="item.type === 'draft'"
-              class="ag-draft"
-              :class="{ created: item.created }"
-            >
-              <div class="ag-draft-top">
-                <div class="ag-draft-badge">
-                  ⌁ 자동 생성된 지시서 초안
-                </div>
-                <div class="ag-draft-title">
-                  {{ item.title }}
-                </div>
-              </div>
-              <div class="ag-draft-sec">
-                <div class="ag-draft-label">
-                  업무 내용
-                </div>
-                <div class="ag-draft-desc">
-                  {{ item.desc }}
-                </div>
-              </div>
-              <div class="ag-draft-sec">
-                <div class="ag-draft-label">
-                  해야 할 일 · 선택
-                </div>
-                <div class="ag-todos">
-                  <div
-                    v-for="(todo, ti) in item.todos"
-                    :key="ti"
-                    class="ag-todo"
-                    :class="{ sel: todo.sel }"
-                    @click="toggleTodo(item, ti)"
-                  >
-                    <span class="box"><svg
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="3.5"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    ><path d="M20 6 9 17l-5-5" /></svg></span>
-                    <span class="tt">{{ todo.text }}</span>
-                  </div>
-                </div>
-              </div>
-              <div class="ag-draft-count">
-                선택 <b>{{ selectedCount(item) }}</b> / {{ item.todos.length }}<template v-if="item.meta">
-                  · {{ item.meta }}
-                </template>
-              </div>
-              <div
-                v-if="!item.created"
-                class="ag-draft-foot"
-              >
-                <button
-                  class="ag-draft-btn"
-                  type="button"
-                >
-                  다시 생성
-                </button>
-                <button
-                  class="ag-draft-btn primary"
-                  type="button"
-                  :disabled="selectedCount(item) === 0"
-                  @click="createOrder(item)"
-                >
-                  지시서 만들기
-                </button>
-              </div>
-              <div
-                v-else
-                class="ag-draft-done"
-              >
-                <svg
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="3.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                ><path d="M20 6 9 17l-5-5" /></svg>
-                지시서로 생성됨
-              </div>
-            </div>
-
-            <div
-              v-else-if="item.type === 'review'"
-              class="ag-review"
-            >
-              <div class="ag-review-top">
-                <div class="ag-review-badge">
-                  ⌁ 구현 검토 리포트
-                </div>
-                <div class="ag-review-title">
-                  메인 배너 이미지 2종 디자인 · #9
-                </div>
-              </div>
-              <div
-                v-for="(r, ri) in item.rows"
-                :key="ri"
-                class="ag-rv"
-                :class="r.st"
-              >
-                <span class="rv-ico">
-                  <svg
-                    v-if="r.st === 'ok'"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="3"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  ><path d="M20 6 9 17l-5-5" /></svg>
-                  <svg
-                    v-else-if="r.st === 'warn'"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2.6"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  ><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" /></svg>
-                  <svg
-                    v-else
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="3"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  ><path d="M18 6 6 18M6 6l12 12" /></svg>
-                </span>
-                <span class="rv-main"><span class="rv-text">{{ r.text }}</span><span class="rv-note">{{ r.note }}</span></span>
-                <span class="rv-tag">{{ r.tag }}</span>
-              </div>
-              <div class="ag-review-sum">
-                항목 {{ item.rows.length }}개 · <b class="g">확인 1</b> · <b class="a">보완 1</b> · <b class="r">누락 1</b>
-              </div>
-              <div class="ag-review-foot">
-                <button
-                  class="ag-draft-btn"
-                  type="button"
-                  @click="reviewComment"
-                >
-                  보완 항목 댓글로 추가
-                </button>
-                <button
-                  class="ag-draft-btn primary"
-                  type="button"
-                  :disabled="item.requested"
-                  @click="reviewRequest(item)"
-                >
-                  {{ item.requested ? '요청 전송됨' : '승인 요청 보내기' }}
-                </button>
-              </div>
-            </div>
-          </template>
-        </div>
-
-        <div class="ag-foot">
-          <div class="ag-quick">
-            <button
-              class="ag-chip"
-              type="button"
-              @click="quickChip('/새지시')"
-            >
-              /새지시
-            </button>
-            <button
-              class="ag-chip"
-              type="button"
-              @click="quickChip('/검토요청')"
-            >
-              /검토요청
-            </button>
-          </div>
-          <div class="ag-inputrow">
-            <textarea
-              v-model="agentInput"
-              class="ag-input"
-              rows="1"
-              placeholder="지시할 업무를 설명하거나 /새지시 …"
-              @keydown.enter.exact.prevent="sendAgent"
-            />
-            <button
-              class="ag-send"
-              type="button"
-              title="전송"
-              @click="sendAgent"
-            >
-              <svg
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2.2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              ><path d="m22 2-7 20-4-9-9-4Z" /><path d="M22 2 11 13" /></svg>
-            </button>
-          </div>
-          <div class="ag-hint">
-            /새지시 [업무 설명] 입력 · Enter 전송
-          </div>
-        </div>
-      </aside>
-    </Teleport>
   </AppShell>
 </template>
 
@@ -2914,639 +2359,3 @@ a.file-info {
 }
 </style>
 
-<!-- 모달/에이전트 패널은 Teleport 로 body 에 렌더되므로 전역(scoped 미적용) 스타일 사용 -->
-<style>
-
-/* 탑바 에이전트 버튼 강조 색상 */
-.icon-btn.agent {
-  color: var(--accent);
-}
-.icon-btn.agent:hover {
-  background: var(--accent-weak);
-  color: var(--accent-hover);
-}
-
-/* ===== AI 터미널 에이전트 패널 ===== */
-.agent-panel {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 34rem;
-  max-width: 96vw;
-  z-index: 120;
-  background: #0f1117;
-  color: #e6e8ec;
-  display: flex;
-  flex-direction: column;
-  border-left: 1px solid #262a33;
-  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.3);
-  transform: translateX(100%);
-  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
-  font-family: 'Pretendard', system-ui, sans-serif;
-}
-.agent-panel.open {
-  transform: none;
-}
-.ag-head {
-  display: flex;
-  align-items: center;
-  gap: 0.6875rem;
-  padding: 0.8125rem 0.875rem;
-  border-bottom: 1px solid #262a33;
-  flex-shrink: 0;
-}
-.ag-logo {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 0.5rem;
-  background: linear-gradient(135deg, #5b54f0, #4338ca);
-  display: grid;
-  place-items: center;
-  color: #fff;
-  flex-shrink: 0;
-}
-.ag-logo svg {
-  width: 1.0625rem;
-  height: 1.0625rem;
-}
-.ag-h-main {
-  flex: 1;
-  min-width: 0;
-}
-.ag-name {
-  font-size: 0.844rem;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  white-space: nowrap;
-}
-.ag-status {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.3125rem;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  color: #3ecf8e;
-}
-.ag-status .dot {
-  width: 0.375rem;
-  height: 0.375rem;
-  border-radius: 50%;
-  background: #3ecf8e;
-  box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.18);
-}
-.ag-ctx {
-  font-size: 0.6875rem;
-  color: #7b8190;
-  margin-top: 0.1875rem;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.ag-hbtn {
-  width: 1.875rem;
-  height: 1.875rem;
-  border: none;
-  background: transparent;
-  color: #9298a3;
-  border-radius: 0.375rem;
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-  flex-shrink: 0;
-}
-.ag-hbtn:hover {
-  background: #1b1e26;
-  color: #e6e8ec;
-}
-.ag-hbtn svg {
-  width: 1rem;
-  height: 1rem;
-}
-.ag-body {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 1rem 1.125rem 1.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.875rem;
-  /* 커스텀 슬림 스크롤바 (Firefox) */
-  scrollbar-width: thin;
-  scrollbar-color: #2b2f3a transparent;
-  scrollbar-gutter: stable;
-}
-/* 커스텀 슬림 스크롤바 (WebKit/Chromium) — 기본 스크롤바 숨기고 얇게 */
-.ag-body::-webkit-scrollbar {
-  width: 0.375rem;
-}
-.ag-body::-webkit-scrollbar-track {
-  background: transparent;
-}
-.ag-body::-webkit-scrollbar-thumb {
-  background: #2b2f3a;
-  border-radius: 0.25rem;
-}
-.ag-body::-webkit-scrollbar-thumb:hover {
-  background: #3a3f4b;
-}
-/* 평소엔 숨기고 패널에 마우스를 올리면 thumb 노출 */
-.ag-body::-webkit-scrollbar-thumb {
-  background: transparent;
-  transition: background 0.2s;
-}
-.agent-panel:hover .ag-body::-webkit-scrollbar-thumb {
-  background: #2b2f3a;
-}
-.agent-panel:hover .ag-body::-webkit-scrollbar-thumb:hover {
-  background: #3a3f4b;
-}
-.ag-body > * {
-  flex-shrink: 0;
-}
-.ag-sys {
-  font-size: 0.6875rem;
-  color: #6b7280;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  text-align: center;
-  padding: 0.125rem 0;
-}
-.ag-sys b {
-  color: #9298a3;
-  font-weight: 600;
-}
-.ag-msg {
-  display: flex;
-  gap: 0.625rem;
-  width: 100%;
-  align-items: flex-start;
-}
-.ag-msg .ava {
-  width: 1.625rem;
-  height: 1.625rem;
-  flex: 0 0 1.625rem;
-  border-radius: 0.4375rem;
-  display: grid;
-  place-items: center;
-  font-size: 0.6875rem;
-  font-weight: 700;
-  line-height: 1;
-  overflow: hidden;
-}
-.ag-msg.bot .ava {
-  background: linear-gradient(135deg, #5b54f0, #4338ca);
-  color: #fff;
-}
-.ag-msg.bot .ava svg {
-  width: 0.9375rem;
-  height: 0.9375rem;
-}
-.ag-msg .bubble {
-  font-size: 0.8125rem;
-  line-height: 1.62;
-  max-width: 24rem;
-  min-width: 0;
-  word-break: break-word;
-  overflow-wrap: anywhere;
-}
-.ag-msg.bot .bubble {
-  background: #171a21;
-  border: 1px solid #23262f;
-  border-radius: 0.625rem;
-  padding: 0.5625rem 0.75rem;
-  color: #d4d8e0;
-}
-.ag-msg.user {
-  justify-content: flex-end;
-}
-.ag-msg.user .ava {
-  order: 2;
-  /* 내부 UserAvatar 가 이미지/placeholder 로 배경을 채운다 */
-  color: #fff;
-  border-radius: 50%;
-}
-.ag-msg.user .bubble {
-  order: 1;
-  background: #4f46e5;
-  color: #fff;
-  border-radius: 0.625rem;
-  padding: 0.5625rem 0.75rem;
-}
-.ag-tool {
-  border: 1px solid #23262f;
-  border-radius: 0.5625rem;
-  overflow: hidden;
-  background: #0a0c11;
-  margin-left: 2.25rem;
-}
-.ag-tool-head {
-  display: flex;
-  align-items: center;
-  gap: 0.4375rem;
-  padding: 0.375rem 0.625rem;
-  background: #13161d;
-  border-bottom: 1px solid #23262f;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.6875rem;
-  color: #7b8190;
-}
-.ag-tool-head .tdot {
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 50%;
-  background: #3ecf8e;
-  flex-shrink: 0;
-}
-.ag-tool-head .cmd {
-  color: #c7ccd6;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.ag-tool-body {
-  padding: 0.5625rem 0.6875rem;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.719rem;
-  line-height: 1.75;
-  color: #aab0bd;
-  white-space: pre-wrap;
-}
-.ag-tool-body .ok {
-  color: #3ecf8e;
-}
-.ag-tool-body .key {
-  color: #7aa2f7;
-}
-.ag-tool-body .warn {
-  color: #e0af68;
-}
-/* 자동 생성 지시서 카드 */
-.ag-draft {
-  margin-left: 2.25rem;
-  border: 1px solid #2b2f3a;
-  border-radius: 0.6875rem;
-  overflow: hidden;
-  background: #12151c;
-}
-.ag-draft.created {
-  opacity: 0.7;
-}
-.ag-draft-top {
-  padding: 0.6875rem 0.8125rem 0.75rem;
-  border-bottom: 1px solid #23262f;
-}
-.ag-draft-badge {
-  font-size: 0.656rem;
-  font-weight: 700;
-  color: #7aa2f7;
-  font-family: ui-monospace, monospace;
-  letter-spacing: 0.01875rem;
-}
-.ag-draft-title {
-  font-size: 0.875rem;
-  font-weight: 700;
-  color: #f0f1f4;
-  margin-top: 0.4375rem;
-  line-height: 1.4;
-}
-.ag-draft-sec {
-  padding: 0.6875rem 0.8125rem;
-  border-bottom: 1px solid #23262f;
-}
-.ag-draft-label {
-  font-size: 0.625rem;
-  font-weight: 700;
-  color: #6b7280;
-  font-family: ui-monospace, monospace;
-  letter-spacing: 0.03125rem;
-  text-transform: uppercase;
-  margin-bottom: 0.5rem;
-}
-.ag-draft-desc {
-  font-size: 0.781rem;
-  line-height: 1.62;
-  color: #c3c8d2;
-}
-.ag-todos {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-}
-.ag-todo {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.5625rem;
-  padding: 0.4375rem 0.375rem;
-  border-radius: 0.4375rem;
-  cursor: pointer;
-}
-.ag-todo:hover {
-  background: #171a21;
-}
-.ag-todo .box {
-  width: 1.0625rem;
-  height: 1.0625rem;
-  border-radius: 0.3125rem;
-  border: 1.5px solid #3a3f4b;
-  flex-shrink: 0;
-  display: grid;
-  place-items: center;
-  margin-top: 1px;
-  background: #0f1117;
-}
-.ag-todo.sel .box {
-  background: #4f46e5;
-  border-color: #4f46e5;
-}
-.ag-todo .box svg {
-  width: 0.6875rem;
-  height: 0.6875rem;
-  color: #fff;
-  opacity: 0;
-}
-.ag-todo.sel .box svg {
-  opacity: 1;
-}
-.ag-todo .tt {
-  font-size: 0.781rem;
-  line-height: 1.5;
-  color: #969cab;
-}
-.ag-todo.sel .tt {
-  color: #e6e8ec;
-}
-.ag-draft-count {
-  font-size: 0.6875rem;
-  color: #7b8190;
-  padding: 0.625rem 0.8125rem 0;
-  font-family: ui-monospace, monospace;
-}
-.ag-draft-count b {
-  color: #c7ccd6;
-}
-.ag-draft-foot,
-.ag-review-foot {
-  display: flex;
-  gap: 0.5rem;
-  padding: 0.6875rem 0.8125rem 0.75rem;
-}
-.ag-draft-btn {
-  height: 2.125rem;
-  border-radius: 0.5rem;
-  font-size: 0.781rem;
-  font-weight: 700;
-  cursor: pointer;
-  border: 1px solid #2b2f3a;
-  background: #1b1e26;
-  color: #aab0bd;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.375rem;
-  padding: 0 0.75rem;
-  white-space: nowrap;
-  font-family: inherit;
-}
-.ag-draft-btn:hover {
-  color: #fff;
-  border-color: #3a3f4b;
-}
-.ag-draft-btn.primary {
-  flex: 1;
-  background: #4f46e5;
-  border-color: #4f46e5;
-  color: #fff;
-}
-.ag-draft-btn.primary:hover {
-  background: #4338ca;
-}
-.ag-draft-btn.primary:disabled {
-  background: #2b2f3a;
-  border-color: #2b2f3a;
-  color: #6b7280;
-  cursor: not-allowed;
-}
-.ag-draft-btn svg {
-  width: 0.875rem;
-  height: 0.875rem;
-}
-.ag-draft-done {
-  display: flex;
-  align-items: center;
-  gap: 0.4375rem;
-  padding: 0.6875rem 0.8125rem 0.75rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: #3ecf8e;
-  font-family: ui-monospace, monospace;
-}
-.ag-draft-done svg {
-  width: 0.875rem;
-  height: 0.875rem;
-}
-/* 구현 검토 리포트 카드 */
-.ag-review {
-  margin-left: 2.25rem;
-  border: 1px solid #2b2f3a;
-  border-radius: 0.6875rem;
-  overflow: hidden;
-  background: #12151c;
-}
-.ag-review-top {
-  padding: 0.6875rem 0.8125rem 0.75rem;
-  border-bottom: 1px solid #23262f;
-}
-.ag-review-badge {
-  font-size: 0.656rem;
-  font-weight: 700;
-  color: #7aa2f7;
-  font-family: ui-monospace, monospace;
-  letter-spacing: 0.01875rem;
-}
-.ag-review-title {
-  font-size: 0.844rem;
-  font-weight: 700;
-  color: #f0f1f4;
-  margin-top: 0.4375rem;
-  line-height: 1.4;
-}
-.ag-rv {
-  display: flex;
-  gap: 0.625rem;
-  padding: 0.625rem 0.8125rem;
-  border-bottom: 1px solid #1c1f27;
-  align-items: flex-start;
-}
-.ag-rv:last-of-type {
-  border-bottom: none;
-}
-.rv-ico {
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: 50%;
-  flex-shrink: 0;
-  display: grid;
-  place-items: center;
-  margin-top: 1px;
-}
-.rv-ico svg {
-  width: 0.75rem;
-  height: 0.75rem;
-}
-.ag-rv.ok .rv-ico {
-  background: rgba(62, 207, 142, 0.15);
-  color: #3ecf8e;
-}
-.ag-rv.warn .rv-ico {
-  background: rgba(224, 175, 104, 0.15);
-  color: #e0af68;
-}
-.ag-rv.miss .rv-ico {
-  background: rgba(247, 118, 142, 0.15);
-  color: #f7768e;
-}
-.rv-main {
-  flex: 1;
-  min-width: 0;
-}
-.rv-text {
-  font-size: 0.781rem;
-  font-weight: 600;
-  color: #d4d8e0;
-  line-height: 1.4;
-  display: block;
-}
-.rv-note {
-  font-size: 0.6875rem;
-  color: #7b8190;
-  margin-top: 0.1875rem;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  line-height: 1.5;
-  display: block;
-}
-.rv-tag {
-  font-size: 0.625rem;
-  font-weight: 700;
-  padding: 0.125rem 0.4375rem;
-  border-radius: 20px;
-  flex-shrink: 0;
-  white-space: nowrap;
-  font-family: ui-monospace, monospace;
-  margin-top: 1px;
-}
-.ag-rv.ok .rv-tag {
-  color: #3ecf8e;
-  background: rgba(62, 207, 142, 0.12);
-}
-.ag-rv.warn .rv-tag {
-  color: #e0af68;
-  background: rgba(224, 175, 104, 0.12);
-}
-.ag-rv.miss .rv-tag {
-  color: #f7768e;
-  background: rgba(247, 118, 142, 0.12);
-}
-.ag-review-sum {
-  display: flex;
-  align-items: center;
-  gap: 0.4375rem;
-  padding: 0.625rem 0.8125rem;
-  background: #14171f;
-  border-top: 1px solid #23262f;
-  font-size: 0.719rem;
-  color: #aab0bd;
-  font-family: ui-monospace, monospace;
-}
-.ag-review-sum b.g {
-  color: #3ecf8e;
-}
-.ag-review-sum b.a {
-  color: #e0af68;
-}
-.ag-review-sum b.r {
-  color: #f7768e;
-}
-.ag-foot {
-  border-top: 1px solid #262a33;
-  padding: 0.6875rem 0.875rem 0.75rem;
-  flex-shrink: 0;
-}
-.ag-quick {
-  display: flex;
-  gap: 0.375rem;
-  margin-bottom: 0.5625rem;
-  flex-wrap: wrap;
-}
-.ag-chip {
-  font-size: 0.719rem;
-  font-weight: 600;
-  color: #aab0bd;
-  background: #171a21;
-  border: 1px solid #262a33;
-  border-radius: 20px;
-  padding: 0.25rem 0.625rem;
-  cursor: pointer;
-  font-family: ui-monospace, monospace;
-}
-.ag-chip:hover {
-  border-color: #4f46e5;
-  color: #fff;
-}
-.ag-inputrow {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  background: #171a21;
-  border: 1px solid #2b2f3a;
-  border-radius: 0.625rem;
-  padding: 0.4375rem 0.4375rem 0.4375rem 0.75rem;
-}
-.ag-inputrow:focus-within {
-  border-color: #4f46e5;
-}
-.ag-input {
-  flex: 1;
-  background: transparent;
-  border: none;
-  outline: none;
-  resize: none;
-  color: #e6e8ec;
-  font-family: inherit;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  max-height: 6.25rem;
-  padding: 0.25rem 0;
-}
-.ag-input::placeholder {
-  color: #5b626e;
-}
-.ag-send {
-  width: 2rem;
-  height: 2rem;
-  border: none;
-  border-radius: 0.5rem;
-  background: #4f46e5;
-  color: #fff;
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-  flex-shrink: 0;
-}
-.ag-send:hover {
-  background: #4338ca;
-}
-.ag-send svg {
-  width: 1rem;
-  height: 1rem;
-}
-.ag-hint {
-  font-size: 0.656rem;
-  color: #5b626e;
-  margin-top: 0.5rem;
-  text-align: center;
-  font-family: ui-monospace, monospace;
-}
-</style>
diff --git a/frontend/src/stores/ai.store.ts b/frontend/src/stores/ai.store.ts
new file mode 100644
index 0000000..9bb62de
--- /dev/null
+++ b/frontend/src/stores/ai.store.ts
@@ -0,0 +1,40 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import { useAi } from '@/composables/useAi'
+import type { ChatMessage } from '@/types/ai'
+
+// AI 채팅 상태 — 싱글톤 스토어라 화면(AppShell) 재마운트에도 대화가 유지된다.
+// 초기화는 사용자가 '새 대화' 를 누를 때만 수행한다.
+export const useAiStore = defineStore('ai', () => {
+  const { chat } = useAi()
+
+  const messages = ref<ChatMessage[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  // 메시지 전송 — 사용자 발화 추가 후 대화 이력 전체로 응답 요청
+  async function send(text: string): Promise<void> {
+    const content = text.trim()
+    if (!content || loading.value) return
+    error.value = null
+    messages.value.push({ role: 'user', content })
+    loading.value = true
+    try {
+      const { reply } = await chat(messages.value)
+      messages.value.push({ role: 'assistant', content: reply })
+    } catch {
+      error.value = '응답을 가져오지 못했습니다. 잠시 후 다시 시도해 주세요.'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 새 대화 — 사용자가 명시적으로 누를 때만 초기화
+  function reset(): void {
+    messages.value = []
+    error.value = null
+    loading.value = false
+  }
+
+  return { messages, loading, error, send, reset }
+})
diff --git a/frontend/src/types/ai.ts b/frontend/src/types/ai.ts
new file mode 100644
index 0000000..8cc1614
--- /dev/null
+++ b/frontend/src/types/ai.ts
@@ -0,0 +1,10 @@
+// AI 채팅 메시지 — 백엔드 ChatMessageDto 와 1:1
+export interface ChatMessage {
+  role: 'user' | 'assistant'
+  content: string
+}
+
+// AI 채팅 응답
+export interface ChatResult {
+  reply: string
+}