@things-factory/board-ai 10.0.0-beta.108

package/client/components/chat-echo-dedup.test.ts

@@ -0,0 +1,116 @@
+import { receiveRemoteMessage, reconcileSentLine, remoteMessageToLine, type DedupLine } from './chat-echo-dedup'
+
+const msg = (id: string, role = 'user', content = 'hi') => ({ id, role, content })
+
+describe('remoteMessageToLine', () => {
+  it('필드 매핑 + relatedPatchId/toolUsagesJson 변환', () => {
+    const line = remoteMessageToLine({
+      id: 'm1',
+      role: 'assistant',
+      content: 'done',
+      relatedPatchId: 'p1',
+      toolUsagesJson: [{ name: 'x' }]
+    })
+    expect(line).toMatchObject({ id: 'm1', role: 'assistant', content: 'done', patchId: 'p1' })
+    expect(line.toolUsages).toEqual([{ name: 'x' }])
+  })
+
+  it('toolUsagesJson 이 배열 아니면 undefined', () => {
+    expect(remoteMessageToLine({ id: 'm', role: 'user', content: 'x', toolUsagesJson: null }).toolUsages).toBeUndefined()
+  })
+
+  it('creator → senderId/senderName (그룹챗 발신자 표시)', () => {
+    const line = remoteMessageToLine({ id: 'm', role: 'user', content: 'x', creator: { id: 'u9', name: 'Kim' } })
+    expect(line.senderId).toBe('u9')
+    expect(line.senderName).toBe('Kim')
+  })
+
+  it('creator 없으면 sender 필드 undefined', () => {
+    const line = remoteMessageToLine({ id: 'm', role: 'user', content: 'x', creator: null })
+    expect(line.senderId).toBeUndefined()
+    expect(line.senderName).toBeUndefined()
+  })
+})
+
+describe('receiveRemoteMessage — 방송 수신/에코 차단', () => {
+  it('신규 id → append + seen 등록', () => {
+    const res = receiveRemoteMessage([], new Set(), msg('m1'))!
+    expect(res).not.toBeNull()
+    expect(res.lines).toHaveLength(1)
+    expect(res.lines[0].id).toBe('m1')
+    expect(res.seen.has('m1')).toBe(true)
+  })
+
+  it('이미 seen 인 id → null (에코·중복 차단)', () => {
+    expect(receiveRemoteMessage([], new Set(['m1']), msg('m1'))).toBeNull()
+  })
+
+  it('id 없는 메시지 → null', () => {
+    expect(receiveRemoteMessage([], new Set(), { role: 'user', content: 'x' } as any)).toBeNull()
+    expect(receiveRemoteMessage([], new Set(), null)).toBeNull()
+  })
+
+  it('불변 — 원본 배열/셋 미변경', () => {
+    const lines: DedupLine[] = []
+    const seen = new Set<string>()
+    receiveRemoteMessage(lines, seen, msg('m1'))
+    expect(lines).toHaveLength(0)
+    expect(seen.size).toBe(0)
+  })
+
+  it('다른 참여자 메시지 두 개 순차 append', () => {
+    let lines: DedupLine[] = []
+    let seen = new Set<string>()
+    ;({ lines, seen } = receiveRemoteMessage(lines, seen, msg('a'))!)
+    ;({ lines, seen } = receiveRemoteMessage(lines, seen, msg('b'))!)
+    expect(lines.map(l => l.id)).toEqual(['a', 'b'])
+  })
+})
+
+describe('reconcileSentLine — optimistic 라인 조정', () => {
+  const optimistic = (): DedupLine[] => [{ _localId: 'L1', role: 'user', content: 'typed' }]
+
+  it('정상(에코 전): serverId 부여 + seen 등록 + _localId 해제', () => {
+    const res = reconcileSentLine(optimistic(), new Set(), 'L1', 'srv1', {})
+    expect(res.lines).toHaveLength(1)
+    expect(res.lines[0].id).toBe('srv1')
+    expect(res.lines[0]._localId).toBeUndefined()
+    expect(res.seen.has('srv1')).toBe(true)
+  })
+
+  it('레이스(에코 먼저): serverId 가 이미 seen → optimistic 중복 제거', () => {
+    // 에코가 먼저 도착해 같은 메시지가 이미 append + seen 됨
+    const lines: DedupLine[] = [
+      { id: 'srv1', role: 'user', content: 'typed#enriched' }, // 방송 에코로 들어온 것
+      { _localId: 'L1', role: 'user', content: 'typed' } // optimistic 중복
+    ]
+    const res = reconcileSentLine(lines, new Set(['srv1']), 'L1', 'srv1', {})
+    expect(res.lines).toHaveLength(1)
+    expect(res.lines[0].id).toBe('srv1')
+    expect(res.lines.some(l => l._localId === 'L1')).toBe(false)
+  })
+
+  it('patch 병합 (AI 라인: pending → 실제 응답)', () => {
+    const lines: DedupLine[] = [{ _localId: 'A1', role: 'assistant', content: '', pending: true }]
+    const res = reconcileSentLine(lines, new Set(), 'A1', 'srv2', {
+      content: 'reply',
+      pending: false,
+      patchId: 'p9'
+    })
+    expect(res.lines[0]).toMatchObject({ id: 'srv2', content: 'reply', pending: false, patchId: 'p9' })
+  })
+
+  it('serverId 없음(ad-hoc 세션): 라인 유지 + _localId 만 해제, seen 불변', () => {
+    const seen = new Set<string>()
+    const res = reconcileSentLine(optimistic(), seen, 'L1', undefined, {})
+    expect(res.lines[0]._localId).toBeUndefined()
+    expect(res.lines[0].id).toBeUndefined()
+    expect(res.seen.size).toBe(0)
+  })
+
+  it('해당 _localId 없으면 변화 없음', () => {
+    const lines = optimistic()
+    const res = reconcileSentLine(lines, new Set(), 'NOPE', 'srv1', {})
+    expect(res.lines).toBe(lines)
+  })
+})

package/client/components/chat-echo-dedup.ts

@@ -0,0 +1,89 @@
+/*
+ * 그룹챗 메시지 에코 dedup — 순수 로직.
+ *
+ * 실시간 방송은 자기 발신 메시지도 되돌려준다(에코). 또 pubsub publish 가 mutation 응답보다
+ * 먼저 도착할 수 있어(레이스) optimistic 라인과 방송 라인이 겹칠 수 있다. 이 모듈은 그 조정을
+ * **id 기반**으로 결정한다 (서버가 멘션 마커로 content 를 enrich 하므로 content 매칭은 불가).
+ *
+ * 컴포넌트 상태(this.lines / this._seenMessageIds)에서 분리 → 단위테스트 가능.
+ * (C2 의 patch-apply-gate.ts 와 동일한 "순수 게이트" 컨벤션.)
+ */
+
+/** dedup 에 필요한 최소 라인 형태 (board-ai-chat 의 ChatLine 부분집합). */
+export interface DedupLine {
+  id?: string
+  _localId?: string
+  role: string
+  content: string
+  senderId?: string
+  senderName?: string
+  [k: string]: any
+}
+
+/** 서버 방송 메시지(필요 필드만). */
+export interface RemoteMessage {
+  id?: string
+  role: string
+  content: string
+  relatedPatchId?: string
+  toolUsagesJson?: any
+  creator?: { id?: string; name?: string } | null
+}
+
+/** 방송 메시지 → 라인. */
+export function remoteMessageToLine(m: RemoteMessage): DedupLine {
+  return {
+    id: m.id,
+    role: m.role,
+    content: m.content,
+    patchId: m.relatedPatchId ?? undefined,
+    toolUsages: Array.isArray(m.toolUsagesJson) ? m.toolUsagesJson : undefined,
+    senderId: m.creator?.id ?? undefined,
+    senderName: m.creator?.name ?? undefined
+  }
+}
+
+/**
+ * 원격(방송) 메시지 수신 결과를 계산.
+ * - id 없음 / 이미 seen → 변화 없음(null).
+ * - 신규 → seen 에 추가 + 라인 append.
+ * 반환: 변경된 { lines, seen } (불변 — 새 배열/셋) 또는 null(무시).
+ */
+export function receiveRemoteMessage(
+  lines: DedupLine[],
+  seen: Set<string>,
+  m: RemoteMessage | undefined | null
+): { lines: DedupLine[]; seen: Set<string> } | null {
+  if (!m || !m.id) return null
+  if (seen.has(m.id)) return null
+  const nextSeen = new Set(seen)
+  nextSeen.add(m.id)
+  return { lines: [...lines, remoteMessageToLine(m)], seen: nextSeen }
+}
+
+/**
+ * 전송한 optimistic 라인(_localId)을 서버 id 로 reconcile.
+ * - 에코가 먼저 도착해 serverId 가 이미 seen → optimistic 중복 라인 제거.
+ * - 아니면 serverId 부여(+ seen 등록) + patch 병합 + _localId 해제.
+ * - 해당 _localId 라인이 없으면 변화 없음.
+ * 반환: 새 { lines, seen } (불변).
+ */
+export function reconcileSentLine(
+  lines: DedupLine[],
+  seen: Set<string>,
+  localId: string,
+  serverId: string | undefined,
+  patch: Partial<DedupLine>
+): { lines: DedupLine[]; seen: Set<string> } {
+  const idx = lines.findIndex(l => l._localId === localId)
+  if (idx < 0) return { lines, seen }
+
+  const nextLines = [...lines]
+  if (serverId && seen.has(serverId)) {
+    nextLines.splice(idx, 1)
+    return { lines: nextLines, seen }
+  }
+  const nextSeen = serverId ? new Set(seen).add(serverId) : seen
+  nextLines[idx] = { ...nextLines[idx], ...patch, id: serverId ?? nextLines[idx].id, _localId: undefined }
+  return { lines: nextLines, seen: nextSeen }
+}

package/client/components/chat-input-builder.ts

@@ -0,0 +1,47 @@
+/**
+ * boardAIChat GraphQL mutation 의 input 객체 빌더.
+ *
+ * board-ai-chat.ts (Lit / Material Web 의존) 와 분리 — pure 함수만 두면 jest 의 node
+ * 환경에서도 import 가능. 회귀 테스트 (selectedRefids 누락 등) 가 단위 테스트로 잠긴다.
+ */
+
+export interface ChatMutationInputArgs {
+  sessionId?: string
+  history: Array<{ role: string; content: string }>
+  liveBoard: any
+  scopes?: string[]
+  knownTypes?: string[]
+  categories?: string[]
+  componentSchemas?: any
+  /**
+   * 선택된 컴포넌트의 `refid` 배열 — things-scene universal numeric handle.
+   * id (데이터 바인딩 이름) 와는 다른 개념.
+   */
+  selectedRefids: number[]
+  /**
+   * popup 에서 명시 선택한 #mention 매핑 — {token, refid}.
+   * 사용자 textarea 에는 #token 만 보이고, 정확한 refid 는 이 별도 채널로 server 에 전달.
+   * server 가 mention map 으로 LLM 에 정확한 refid 정보 첨부 (사용자 노출 0).
+   */
+  mentions?: Array<{ token: string; refid: number }>
+}
+
+/**
+ * GraphQL mutation 의 input 객체를 빌드.
+ *
+ * 핵심 보호 — `selectedRefids` 가 항상 포함되어야 한다. 누락이 사용자에게 보고된
+ * "AI 가 선택된 컴포넌트를 모른다" 의 root cause 였다.
+ */
+export function buildChatMutationInput(args: ChatMutationInputArgs): Record<string, any> {
+  return {
+    sessionId: args.sessionId ?? null,
+    messages: args.history,
+    currentBoard: args.liveBoard ?? null,
+    scopes: args.scopes,
+    knownTypes: args.knownTypes,
+    categories: args.categories,
+    componentSchemas: args.componentSchemas,
+    selectedRefids: args.selectedRefids,
+    ...(args.mentions && args.mentions.length > 0 && { mentions: args.mentions })
+  }
+}

package/client/components/default-catalog-entries.test.ts

@@ -0,0 +1,59 @@
+/**
+ * default-catalog-entries.ts 의 client-side hardcoded 카탈로그가 server-side 의
+ * prefab-registry / COLOR_PALETTES / LAYOUT_TEMPLATES 와 동기화되어 있는지 검증.
+ *
+ * 새 default 추가 / 이름 변경 시 server-side 만 바꾸고 client 누락하면 popup 에서
+ * 사용자 보지 못해 discoverability 무너짐 — 이 drift 테스트가 즉시 잡음.
+ *
+ * 향후 GraphQL 'boardAICatalog' query 도입으로 client 가 server 에서 동적 로드하면
+ * 이 파일과 default-catalog-entries.ts 모두 제거 가능.
+ */
+import { DEFAULT_CATALOG_ENTRIES } from './default-catalog-entries'
+import { listBoardPrefabs } from '../../server/service/prefab-registry'
+import {
+  listColorPaletteNames,
+  listLayoutTemplateNames
+} from '../../server/service/assistant'
+
+describe('Default catalog entries — server/client drift 검증', () => {
+  test('client prefab 이름이 server prefab-registry 와 일치', () => {
+    const clientPrefabs = DEFAULT_CATALOG_ENTRIES.filter(e => e.kind === 'prefab')
+      .map(e => e.name)
+      .sort()
+    const serverPrefabs = listBoardPrefabs()
+      .map(p => p.name)
+      .sort()
+    expect(clientPrefabs).toEqual(serverPrefabs)
+  })
+
+  test('client palette 이름이 server COLOR_PALETTES 와 일치', () => {
+    const clientPalettes = DEFAULT_CATALOG_ENTRIES.filter(e => e.kind === 'palette')
+      .map(e => e.name)
+      .sort()
+    const serverPalettes = listColorPaletteNames().sort()
+    expect(clientPalettes).toEqual(serverPalettes)
+  })
+
+  test('client layout 이름이 server LAYOUT_TEMPLATES 와 일치', () => {
+    const clientLayouts = DEFAULT_CATALOG_ENTRIES.filter(e => e.kind === 'layout')
+      .map(e => e.name)
+      .sort()
+    const serverLayouts = listLayoutTemplateNames().sort()
+    expect(clientLayouts).toEqual(serverLayouts)
+  })
+
+  test('각 항목이 description 보유 (popup UX)', () => {
+    for (const e of DEFAULT_CATALOG_ENTRIES) {
+      expect(e.description).toBeTruthy()
+    }
+  })
+
+  test('항목 이름 unique (kind 안에서)', () => {
+    const seen = new Set<string>()
+    for (const e of DEFAULT_CATALOG_ENTRIES) {
+      const key = `${e.kind}:${e.name}`
+      expect(seen.has(key)).toBe(false)
+      seen.add(key)
+    }
+  })
+})

package/client/components/default-catalog-entries.ts

@@ -0,0 +1,100 @@
+/**
+ * Default 카탈로그 항목 (client-side hardcoded).
+ *
+ * 사용자 popup discoverability 용. server-side 카탈로그가 권위 source 이지만, 매번
+ * GraphQL 호출해 동적으로 가져오는 대신 default 항목을 client 에 캐시. 호스트 패키지
+ * (operato 등) 가 추가 prefab 등록 시 popup 에는 안 나타나지만, 사용자가 직접 이름을
+ * 타이핑하면 server-side resolver 가 정상 처리 (catalog-resolver.ts).
+ *
+ * Drift 경고 — 이 파일과 server-side 의 prefab-registry.ts / COLOR_PALETTES /
+ * LAYOUT_TEMPLATES 가 일치해야 한다. 새 default 추가 시 양쪽 동기 (assistant.test.ts
+ * 의 tool 카탈로그 회귀 테스트가 server-side drift 는 잡음, client 는 별도 검증
+ * 필요). 향후 GraphQL 'boardAICatalog' query 도입 시 이 파일 제거 가능.
+ */
+import type { CatalogEntry } from './mention-popup-helpers.js'
+
+export const DEFAULT_CATALOG_ENTRIES: CatalogEntry[] = [
+  // ── Prefabs (3) ─────────────────────────────────────────
+  {
+    name: 'monitor-card',
+    kind: 'prefab',
+    description: 'KPI 모니터링 카드 — 라벨 + 큰 값 + 부제'
+  },
+  {
+    name: 'gauge-panel',
+    kind: 'prefab',
+    description: '원형 게이지 + 라벨 패널'
+  },
+  {
+    name: 'stat-tile',
+    kind: 'prefab',
+    description: '강조 컬러 KPI 타일 (큰 숫자)'
+  },
+  // ── Palettes (7) ────────────────────────────────────────
+  {
+    name: 'industrial-steel',
+    kind: 'palette',
+    description: '제조 / 공장 — 강철 + cyan 강조'
+  },
+  {
+    name: 'financial-trader',
+    kind: 'palette',
+    description: '금융 / 트레이딩 — navy + gold'
+  },
+  {
+    name: 'control-room-dark',
+    kind: 'palette',
+    description: 'NOC / 관제실 — pure black + 네온'
+  },
+  {
+    name: 'medical-clean',
+    kind: 'palette',
+    description: '의료 / 헬스케어 — soft white + blue'
+  },
+  {
+    name: 'logistics-warm',
+    kind: 'palette',
+    description: '물류 / 운송 — warm earth + amber'
+  },
+  {
+    name: 'neon-cyberpunk',
+    kind: 'palette',
+    description: 'SF / 사이버펑크 — black + magenta/cyan'
+  },
+  {
+    name: 'paper-light',
+    kind: 'palette',
+    description: '보고서 / 프레젠테이션 — 종이 light'
+  },
+  // ── Layouts (6) ─────────────────────────────────────────
+  {
+    name: 'kpi-row',
+    kind: 'layout',
+    description: '상단 KPI 4-tile + 메인 영역'
+  },
+  {
+    name: '3x3-grid',
+    kind: 'layout',
+    description: '균등 3×3 그리드 — 9개 동등 단위'
+  },
+  {
+    name: 't-shape-command',
+    kind: 'layout',
+    description: '관제실 — alarm bar + main + side'
+  },
+  {
+    name: 'side-rail',
+    kind: 'layout',
+    description: '좌측 narrow + 메인 wide'
+  },
+  {
+    name: 'split-half',
+    kind: 'layout',
+    description: '50/50 가로 분할 — 비교'
+  },
+  {
+    name: 'header-content-footer',
+    kind: 'layout',
+    description: '보고서 형식 — 3단'
+  }
+]

package/client/components/default-slash-templates.test.ts

@@ -0,0 +1,55 @@
+/**
+ * default-slash-templates.ts 정합성 검증.
+ *
+ * Slash template 은 server-side counterpart 없이 client-only — drift 검증 대상이
+ * 아니지만 자체 정합성 (unique name / 비어있지 않은 template / @ 멘션이 카탈로그
+ * 항목과 호환) 을 검증.
+ */
+import { DEFAULT_SLASH_TEMPLATES } from './default-slash-templates'
+import { DEFAULT_CATALOG_ENTRIES } from './default-catalog-entries'
+
+describe('Default slash templates — 정합성', () => {
+  test('각 템플릿이 name + template 보유', () => {
+    for (const t of DEFAULT_SLASH_TEMPLATES) {
+      expect(typeof t.name).toBe('string')
+      expect(t.name.length).toBeGreaterThan(0)
+      expect(typeof t.template).toBe('string')
+      expect(t.template.length).toBeGreaterThan(0)
+    }
+  })
+
+  test('이름 unique', () => {
+    const seen = new Set<string>()
+    for (const t of DEFAULT_SLASH_TEMPLATES) {
+      expect(seen.has(t.name)).toBe(false)
+      seen.add(t.name)
+    }
+  })
+
+  test('description 권장 (popup UX)', () => {
+    for (const t of DEFAULT_SLASH_TEMPLATES) {
+      expect(t.description).toBeTruthy()
+    }
+  })
+
+  test('template 안의 @멘션은 카탈로그에 등록된 이름만 사용', () => {
+    const catalogNames = new Set(DEFAULT_CATALOG_ENTRIES.map(e => e.name))
+    const pattern = /@([^\s@]+)/g
+    for (const t of DEFAULT_SLASH_TEMPLATES) {
+      let m: RegExpExecArray | null
+      while ((m = pattern.exec(t.template)) !== null) {
+        const token = m[1]
+        // 알 수 없는 카탈로그 멘션이 들어가면 사용자가 선택해도 의도와 다른 결과
+        expect(catalogNames.has(token)).toBe(true)
+      }
+    }
+  })
+
+  test('name 에는 # / @ / / 같은 trigger char 들어가면 안 됨', () => {
+    for (const t of DEFAULT_SLASH_TEMPLATES) {
+      expect(t.name).not.toContain('#')
+      expect(t.name).not.toContain('@')
+      expect(t.name).not.toContain('/')
+    }
+  })
+})

package/client/components/default-slash-templates.ts

@@ -0,0 +1,129 @@
+/**
+ * Default slash templates — 사용자에게 빠르게 작성된 자연어 prompt 를 끼워주는 단축키.
+ *
+ * `/grid` → "선택한 컴포넌트들을 3x2 그리드로 정렬해줘" 같이 텍스트가 textarea 에
+ * 삽입됨. 사용자는 그대로 보내거나 숫자/카탈로그 이름을 수정해 보낼 수 있다.
+ *
+ * Slash 는 LLM 우회 명령이 아니다 — AI 가 받는 입력은 일반 자연어 prompt 와 동일.
+ * 단지 "이런 명령이 가능하구나" 의 discoverability 를 popup 으로 보여주는 역할.
+ *
+ * 수정 / 추가 정책:
+ *   - 한국어 우선 (자연어가 한국어라야 한국 사용자에게 즉시 작동)
+ *   - 카탈로그 이름 (@monitor-card 등) 가 들어간 템플릿은 server-side resolver 와
+ *     자동 호환 — drift 검증은 default-catalog-entries.test.ts 가 잡음
+ *   - 너무 많이 만들지 말 것 (popup 이 과해짐). 가장 흔한 의도만.
+ */
+import type { SlashTemplate } from './mention-popup-helpers.js'
+
+export const DEFAULT_SLASH_TEMPLATES: SlashTemplate[] = [
+  {
+    name: 'grid',
+    description: '선택한 컴포넌트들을 그리드로 정렬',
+    template: '선택한 컴포넌트들을 3x2 그리드로 정렬해줘'
+  },
+  {
+    name: 'row',
+    description: '선택한 컴포넌트들을 한 줄로',
+    template: '선택한 컴포넌트들을 한 줄로 배치해줘'
+  },
+  {
+    name: 'column',
+    description: '선택한 컴포넌트들을 세로로 일렬',
+    template: '선택한 컴포넌트들을 세로로 일렬 배치해줘'
+  },
+  {
+    name: 'palette',
+    description: '검증된 색 팔레트로 통일',
+    template: '@industrial-steel 팔레트로 보드 전체 통일해줘'
+  },
+  {
+    name: 'atmosphere',
+    description: '보드 분위기 변경 (자연어 자유 작성)',
+    template: '보드 분위기를 어둡고 차분하게 바꿔줘 (atmosphere primer 활용)'
+  },
+  {
+    name: 'dashboard',
+    description: 'KPI 대시보드 기본 구성',
+    template: '@kpi-row 레이아웃으로 @stat-tile 4개를 상단에 + 아래 메인 영역 구성해줘'
+  },
+  {
+    name: 'add-monitor',
+    description: '모니터링 카드 추가',
+    template: '@monitor-card 추가 (제목과 값은 적절히)'
+  },
+  {
+    name: 'fit',
+    description: '보드 전체 보이게',
+    template: '보드 전체가 보이게 화면 맞춰줘'
+  },
+  {
+    name: 'center',
+    description: '선택 컴포넌트 화면 가운데로',
+    template: '선택한 컴포넌트를 화면 가운데로 이동해줘'
+  },
+  {
+    name: 'inspect',
+    description: '선택 컴포넌트 정보 보기',
+    template: '현재 선택된 컴포넌트의 모든 속성을 보여줘'
+  },
+  {
+    name: 'align',
+    description: '선택 컴포넌트 정렬 (좌/우/위/아래/가운데)',
+    template: '선택한 컴포넌트들을 왼쪽 기준으로 정렬해줘'
+  },
+  {
+    name: 'distribute',
+    description: '선택 컴포넌트 간격 균등 분배',
+    template: '선택한 컴포넌트들을 가로로 간격 균등하게 분배해줘'
+  },
+  {
+    name: 'duplicate',
+    description: '선택 컴포넌트 복제',
+    template: '선택한 컴포넌트를 오른쪽에 같은 크기로 하나 더 복제해줘'
+  },
+  {
+    name: 'match-size',
+    description: '선택 컴포넌트 크기 통일',
+    template: '선택한 컴포넌트들을 첫 번째와 같은 크기로 맞춰줘'
+  },
+  {
+    name: 'z-front',
+    description: '선택 컴포넌트 맨 앞으로',
+    template: '선택한 컴포넌트를 z-order 맨 앞으로 가져와줘'
+  },
+  {
+    name: 'rotate',
+    description: '선택 컴포넌트 회전',
+    template: '선택한 컴포넌트를 시계방향으로 90도 회전해줘'
+  },
+  {
+    name: 'z-back',
+    description: '선택 컴포넌트 맨 뒤로',
+    template: '선택한 컴포넌트를 z-order 맨 뒤로 보내줘'
+  },
+  {
+    name: 'mirror',
+    description: '선택 컴포넌트 좌우 반전',
+    template: '선택한 컴포넌트를 좌우 대칭으로 반전해줘'
+  },
+  {
+    name: 'group',
+    description: '선택 컴포넌트 그룹화',
+    template: '선택한 컴포넌트들을 하나의 그룹으로 묶어줘'
+  },
+  {
+    name: 'rename-sequential',
+    description: '선택 컴포넌트들에 순번 라벨',
+    template: '선택한 컴포넌트들에 1, 2, 3 순번 라벨을 붙여줘'
+  },
+  {
+    name: 'bulk-set',
+    description: '선택 컴포넌트 속성 일괄 변경',
+    template: '선택한 컴포넌트들의 [속성]을 [값]으로 일괄 설정해줘'
+  },
+  {
+    name: 'cleanup',
+    description: '겹침/어색한 위치 자동 정리',
+    template: '겹쳐있거나 어색한 위치의 컴포넌트들을 자연스럽게 정리해줘'
+  }
+]