@oro.ad/nuxt-claude-devtools 1.3.0 → 1.5.1

package/dist/runtime/overlay/components/chat/ChatMessages.vue

@@ -0,0 +1,160 @@
+<script setup>
+import { nextTick, ref, watch } from "vue";
+import MarkdownContent from "../MarkdownContent.vue";
+import ToolCallBlock from "../ToolCallBlock.vue";
+const props = defineProps({
+  messages: { type: Array, required: true },
+  isShareMode: { type: Boolean, required: true },
+  findToolResult: { type: Function, required: true },
+  isOwnMessage: { type: Function, required: true }
+});
+const messagesContainer = ref(null);
+function stripContextBlock(content) {
+  return content.replace(/^\[context\]\n[\s\S]*?\n\[\/context\]\n?/, "").trim();
+}
+function getDisplayContent(message) {
+  return stripContextBlock(message.content);
+}
+function getMessageClass(role) {
+  if (role === "user") return "claude-message-user";
+  if (role === "assistant") return "claude-message-assistant";
+  return "claude-message-system";
+}
+function scrollToBottom() {
+  if (messagesContainer.value) {
+    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
+  }
+}
+watch(
+  () => props.messages.length,
+  () => nextTick(scrollToBottom)
+);
+watch(
+  () => props.messages[props.messages.length - 1]?.content,
+  () => nextTick(scrollToBottom)
+);
+defineExpose({ scrollToBottom });
+</script>
+
+<template>
+  <div
+    ref="messagesContainer"
+    class="claude-messages"
+  >
+    <div
+      v-if="messages.length === 0"
+      class="claude-empty"
+    >
+      <p>
+        Start a conversation with Claude
+      </p>
+      <p class="claude-empty-hint">
+        Type a message or use /commands
+      </p>
+    </div>
+
+    <div
+      v-for="message in messages"
+      :key="message.id"
+      :class="[
+  'claude-message',
+  getMessageClass(message.role),
+  {
+    'claude-message-own': message.role === 'user' && isOwnMessage(message.senderId),
+    'claude-message-other': message.role === 'user' && !isOwnMessage(message.senderId)
+  }
+]"
+    >
+      <!-- User message -->
+      <template v-if="message.role === 'user'">
+        <div
+          v-if="isShareMode && message.senderNickname"
+          class="claude-message-sender"
+        >
+          {{ message.senderNickname }}
+          <span
+            v-if="isOwnMessage(message.senderId)"
+            class="claude-message-you"
+          >(you)</span>
+        </div>
+        <!-- File attachments -->
+        <div
+          v-if="message.attachments?.length"
+          class="claude-message-attachments"
+        >
+          <div
+            v-for="attachment in message.attachments"
+            :key="attachment.path"
+            class="claude-attachment-badge"
+            :title="attachment.filename"
+          >
+            <!-- Image icon -->
+            <svg
+              v-if="attachment.mimeType?.startsWith('image/')"
+              fill="currentColor"
+              height="14"
+              viewBox="0 0 24 24"
+              width="14"
+            >
+              <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" />
+            </svg>
+            <!-- File icon -->
+            <svg
+              v-else
+              fill="currentColor"
+              height="14"
+              viewBox="0 0 24 24"
+              width="14"
+            >
+              <path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z" />
+            </svg>
+            <span>{{ attachment.filename }}</span>
+          </div>
+        </div>
+        <div class="claude-message-content">
+          {{ getDisplayContent(message) }}
+        </div>
+      </template>
+
+      <!-- Assistant message -->
+      <template v-else-if="message.role === 'assistant'">
+        <div class="claude-message-content">
+          <template v-if="message.contentBlocks?.length">
+            <template
+              v-for="(block, idx) in message.contentBlocks"
+              :key="idx"
+            >
+              <MarkdownContent
+                v-if="block.type === 'text' && block.text"
+                :content="stripContextBlock(block.text)"
+              />
+              <ToolCallBlock
+                v-else-if="block.type === 'tool_use'"
+                :block="block"
+                :result="findToolResult(message.contentBlocks, block.id)"
+              />
+            </template>
+          </template>
+          <template v-else-if="message.content">
+            <MarkdownContent :content="getDisplayContent(message)" />
+          </template>
+          <span
+            v-if="message.streaming"
+            class="claude-cursor"
+          />
+        </div>
+      </template>
+
+      <!-- System message -->
+      <template v-else>
+        <div class="claude-message-content claude-message-system-content">
+          {{ getDisplayContent(message) }}
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style>
+.claude-messages{gap:16px;overflow-y:auto;padding:80px 20px 140px;position:relative;z-index:1}.claude-empty,.claude-messages{display:flex;flex:1;flex-direction:column}.claude-empty{align-items:center;color:var(--claude-text-muted);justify-content:center;margin-top:-60px;padding:0 20px;text-align:center}.claude-empty p:first-child{background:linear-gradient(135deg,var(--claude-text) 0,var(--claude-text-muted) 100%);-webkit-background-clip:text;font-size:16px;font-weight:500;margin-bottom:8px;-webkit-text-fill-color:transparent;background-clip:text}.claude-empty-hint{font-size:13px;margin-top:4px;opacity:.6}.claude-message{animation:claude-message-in .3s ease-out;max-width:88%}@keyframes claude-message-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.claude-message-user{align-self:flex-end}.claude-message-sender{color:var(--claude-primary);font-size:11px;font-weight:600;margin-bottom:6px;padding-left:4px;text-shadow:0 0 20px var(--claude-primary-glow)}.claude-message-you{font-weight:400;opacity:.5}.claude-message-own{align-self:flex-end}.claude-message-own .claude-message-content{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:var(--claude-user-bg);border:1px solid rgba(254,154,0,.2);border-radius:var(--claude-radius-sm) var(--claude-radius-sm) 4px var(--claude-radius-sm);box-shadow:0 4px 15px rgba(254,154,0,.15);padding:12px 16px;white-space:pre-wrap;word-break:break-word}.claude-message-other{align-self:flex-start}.claude-message-other .claude-message-content{background:var(--claude-other-user-bg);border:1px solid rgba(236,72,153,.2);border-radius:var(--claude-radius-sm) var(--claude-radius-sm) var(--claude-radius-sm) 4px;box-shadow:0 4px 15px rgba(236,72,153,.1)}.claude-message-other .claude-message-content,.claude-message-user .claude-message-content{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:12px 16px;white-space:pre-wrap;word-break:break-word}.claude-message-user .claude-message-content{background:var(--claude-user-bg);border:1px solid rgba(254,154,0,.2);border-radius:var(--claude-radius-sm) var(--claude-radius-sm) 4px var(--claude-radius-sm)}.claude-message-attachments{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.claude-attachment-badge{align-items:center;background:rgba(254,154,0,.15);border:1px solid rgba(254,154,0,.3);border-radius:8px;color:var(--claude-primary);display:flex;font-size:12px;gap:6px;max-width:180px;padding:6px 10px}.claude-attachment-badge svg{flex-shrink:0;opacity:.8}.claude-attachment-badge span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.claude-message-assistant{align-self:flex-start}.claude-message-assistant .claude-message-content{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:var(--claude-assistant-bg);border:1px solid var(--claude-border);border-radius:4px var(--claude-radius-sm) var(--claude-radius-sm) var(--claude-radius-sm);padding:12px 16px}.claude-message-system{align-self:center}.claude-message-system-content{background:var(--claude-system-bg);border:1px solid var(--claude-border);border-radius:20px;color:var(--claude-text-muted);font-size:12px;padding:8px 16px}.claude-cursor{animation:claude-cursor-blink 1s ease-in-out infinite;background:linear-gradient(180deg,var(--claude-primary) 0,#fbbf24 100%);border-radius:2px;box-shadow:0 0 10px var(--claude-primary-glow);display:inline-block;height:18px;margin-left:4px;width:3px}@keyframes claude-cursor-blink{0%,to{opacity:1}50%{opacity:.3}}.claude-messages::-webkit-scrollbar{width:6px}.claude-messages::-webkit-scrollbar-track{background:transparent}.claude-messages::-webkit-scrollbar-thumb{background:var(--claude-border);border-radius:3px}.claude-messages::-webkit-scrollbar-thumb:hover{background:var(--claude-text-dim)}@media (max-width:640px){.claude-messages{padding:90px 16px 160px}}
+</style>

package/dist/runtime/overlay/components/chat/ChatMessages.vue.d.ts

@@ -0,0 +1,13 @@
+import type { ContentBlock, Message } from '../../../shared/types.js';
+type __VLS_Props = {
+    messages: Message[];
+    isShareMode: boolean;
+    findToolResult: (blocks: ContentBlock[] | undefined, toolUseId: string) => ContentBlock | undefined;
+    isOwnMessage: (senderId?: string) => boolean;
+};
+declare function scrollToBottom(): void;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    scrollToBottom: typeof scrollToBottom;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/overlay/components/chat/ClaudeBadge.d.vue.ts

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    statusColor: 'green' | 'blue' | 'red';
+    position: {
+        x: number;
+        y: number;
+    };
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => any;
+    dragEnd: (position: {
+        x: number;
+        y: number;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+    onDragEnd?: ((position: {
+        x: number;
+        y: number;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/overlay/components/chat/ClaudeBadge.vue

@@ -0,0 +1,85 @@
+<script setup>
+import { ref, watch } from "vue";
+const props = defineProps({
+  statusColor: { type: String, required: true },
+  position: { type: Object, required: true }
+});
+const emit = defineEmits(["click", "dragEnd"]);
+const badgeRef = ref(null);
+const isDragging = ref(false);
+const dragStart = ref({ x: 0, y: 0, posX: 0, posY: 0 });
+const dragMoved = ref(false);
+const currentPos = ref({ x: props.position.x, y: props.position.y });
+function handleDragStart(e) {
+  const clientX = "touches" in e ? e.touches[0]?.clientX ?? 0 : e.clientX;
+  const clientY = "touches" in e ? e.touches[0]?.clientY ?? 0 : e.clientY;
+  dragStart.value = {
+    x: clientX,
+    y: clientY,
+    posX: currentPos.value.x,
+    posY: currentPos.value.y
+  };
+  isDragging.value = true;
+  dragMoved.value = false;
+  window.addEventListener("mousemove", handleDragMove);
+  window.addEventListener("mouseup", handleDragEnd);
+  window.addEventListener("touchmove", handleDragMove, { passive: false });
+  window.addEventListener("touchend", handleDragEnd);
+}
+function handleDragMove(e) {
+  if (!isDragging.value) return;
+  e.preventDefault();
+  const clientX = "touches" in e ? e.touches[0]?.clientX ?? 0 : e.clientX;
+  const clientY = "touches" in e ? e.touches[0]?.clientY ?? 0 : e.clientY;
+  const deltaX = dragStart.value.x - clientX;
+  const deltaY = dragStart.value.y - clientY;
+  if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
+    dragMoved.value = true;
+  }
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const padding = 16;
+  let newX = dragStart.value.posX + deltaX;
+  let newY = dragStart.value.posY + deltaY;
+  newX = Math.max(padding, Math.min(vw - 120, newX));
+  newY = Math.max(padding, Math.min(vh - 60, newY));
+  currentPos.value = { x: newX, y: newY };
+}
+function handleDragEnd() {
+  isDragging.value = false;
+  window.removeEventListener("mousemove", handleDragMove);
+  window.removeEventListener("mouseup", handleDragEnd);
+  window.removeEventListener("touchmove", handleDragMove);
+  window.removeEventListener("touchend", handleDragEnd);
+  if (dragMoved.value) {
+    emit("dragEnd", currentPos.value);
+  }
+}
+function handleClick() {
+  if (!dragMoved.value) {
+    emit("click");
+  }
+}
+watch(() => props.position, (newPos) => {
+  currentPos.value = { x: newPos.x, y: newPos.y };
+}, { immediate: true, deep: true });
+</script>
+
+<template>
+  <button
+    ref="badgeRef"
+    :class="['claude-badge', { 'claude-badge-dragging': isDragging }]"
+    :style="{ right: `${currentPos.x}px`, bottom: `${currentPos.y}px` }"
+    title="Chat with Claude (Ctrl+Shift+K) — drag to move"
+    @click="handleClick"
+    @mousedown="handleDragStart"
+    @touchstart="handleDragStart"
+  >
+    <span class="claude-badge-title">Claude</span>
+    <span :class="['claude-badge-status', `claude-badge-status-${statusColor}`]" />
+  </button>
+</template>
+
+<style>
+.claude-badge{align-items:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:rgba(0,0,0,.6);border:1px solid hsla(0,0%,100%,.15);border-radius:var(--claude-radius-sm);box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 0 1px rgba(254,154,0,.1);color:hsla(0,0%,100%,.95);cursor:pointer;display:flex;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;gap:10px;padding:10px 16px;position:fixed;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:99998}.claude-badge:hover{background:rgba(0,0,0,.7);border-color:rgba(254,154,0,.3);box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 30px rgba(254,154,0,.15);transform:translateY(-2px)}.claude-badge-dragging{box-shadow:0 16px 50px rgba(0,0,0,.6),0 0 40px rgba(254,154,0,.2);cursor:grabbing;transform:scale(1.05);transition:none}.claude-badge-title{font-size:14px;font-weight:600;letter-spacing:.01em}.claude-badge-status{border-radius:50%;flex-shrink:0;height:8px;width:8px}.claude-badge-status-green{background:#4ade80;box-shadow:0 0 8px rgba(74,222,128,.6)}.claude-badge-status-blue{animation:claude-badge-pulse 1.5s ease-in-out infinite;background:#fbbf24;box-shadow:0 0 8px rgba(251,191,36,.6)}.claude-badge-status-red{background:#f87171;box-shadow:0 0 8px hsla(0,91%,71%,.6)}@keyframes claude-badge-pulse{0%,to{opacity:1}50%{opacity:.5}}@media (max-width:640px){.claude-badge{padding:8px 14px}.claude-badge-title{font-size:13px}}
+</style>

package/dist/runtime/overlay/components/chat/ClaudeBadge.vue.d.ts

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    statusColor: 'green' | 'blue' | 'red';
+    position: {
+        x: number;
+        y: number;
+    };
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => any;
+    dragEnd: (position: {
+        x: number;
+        y: number;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+    onDragEnd?: ((position: {
+        x: number;
+        y: number;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/overlay/components/chat/HistoryPanel.d.vue.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    show: boolean;
+    conversations: Array<{
+        id: string;
+        title?: string;
+        updatedAt: string;
+    }>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    select: (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onSelect?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/overlay/components/chat/HistoryPanel.vue

@@ -0,0 +1,65 @@
+<script setup>
+defineProps({
+  show: { type: Boolean, required: true },
+  conversations: { type: Array, required: true }
+});
+const emit = defineEmits(["close", "select"]);
+function stripContextBlock(content) {
+  return content.replace(/^\[context\]\n[\s\S]*?\n\[\/context\]\n?/, "").trim();
+}
+function formatDate(dateStr) {
+  const date = new Date(dateStr);
+  return date.toLocaleDateString() + " " + date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+</script>
+
+<template>
+  <Transition name="claude-slide-right">
+    <div
+      v-if="show"
+      class="claude-history"
+    >
+      <div class="claude-history-header">
+        <span>History</span>
+        <button
+          class="claude-btn-icon"
+          @click="emit('close')"
+        >
+          <svg
+            fill="currentColor"
+            height="16"
+            viewBox="0 0 24 24"
+            width="16"
+          >
+            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+          </svg>
+        </button>
+      </div>
+      <div class="claude-history-list">
+        <div
+          v-for="conv in conversations"
+          :key="conv.id"
+          class="claude-history-item"
+          @click="emit('select', conv.id)"
+        >
+          <div class="claude-history-title">
+            {{ stripContextBlock(conv.title || "") || "Untitled" }}
+          </div>
+          <div class="claude-history-date">
+            {{ formatDate(conv.updatedAt) }}
+          </div>
+        </div>
+        <div
+          v-if="conversations.length === 0"
+          class="claude-history-empty"
+        >
+          No conversations yet
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style>
+.claude-history{backdrop-filter:blur(var(--claude-blur-heavy));-webkit-backdrop-filter:blur(var(--claude-blur-heavy));background:rgba(0,0,0,.6);bottom:0;display:flex;flex-direction:column;left:0;position:absolute;right:0;top:0;z-index:10}.claude-history-header{align-items:center;background:transparent;display:flex;justify-content:space-between;padding:16px 20px;position:relative;z-index:1}.claude-history-header>span{align-items:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(0,0,0,.4);border:1px solid hsla(0,0%,100%,.1);border-radius:var(--claude-radius-sm);box-shadow:0 4px 12px rgba(0,0,0,.3);display:flex;font-size:15px;font-weight:600;gap:10px;padding:8px 14px}.claude-history-list{flex:1;margin-top:-60px;overflow-y:auto;padding:70px 12px 12px}.claude-history-item{background:hsla(0,0%,100%,.03);border:1px solid hsla(0,0%,100%,.05);border-radius:var(--claude-radius-sm);cursor:pointer;margin-bottom:8px;padding:14px 16px;transition:all .2s ease}.claude-history-item:hover{background:rgba(254,154,0,.1);border-color:rgba(254,154,0,.2);transform:translateX(4px)}.claude-history-title{color:var(--claude-text);font-weight:500;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.claude-history-date{color:var(--claude-text-dim);font-size:12px}.claude-history-empty{color:var(--claude-text-muted);font-size:14px;padding:48px 24px;text-align:center}.claude-slide-right-enter-active,.claude-slide-right-leave-active{transition:transform .3s cubic-bezier(.4,0,.2,1)}.claude-slide-right-enter-from,.claude-slide-right-leave-to{transform:translateX(100%)}
+</style>

package/dist/runtime/overlay/components/chat/HistoryPanel.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    show: boolean;
+    conversations: Array<{
+        id: string;
+        title?: string;
+        updatedAt: string;
+    }>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    select: (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onSelect?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/overlay/components/chat/NicknameModal.d.vue.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    show: boolean;
+    error?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    submit: (nickname: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onSubmit?: ((nickname: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/overlay/components/chat/NicknameModal.vue

@@ -0,0 +1,89 @@
+<script setup>
+import { ref } from "vue";
+defineProps({
+  show: { type: Boolean, required: true },
+  error: { type: String, required: false }
+});
+const emit = defineEmits(["submit", "cancel"]);
+const nicknameInput = ref("");
+function handleSubmit() {
+  const name = nicknameInput.value.trim();
+  if (name.length >= 2 && name.length <= 20) {
+    emit("submit", name);
+    nicknameInput.value = "";
+  }
+}
+function handleCancel() {
+  emit("cancel");
+  nicknameInput.value = "";
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="claude-modal-fade">
+      <div
+        v-if="show"
+        class="claude-modal-backdrop"
+        @click.self="handleCancel"
+      >
+        <div class="claude-modal">
+          <div class="claude-modal-header">
+            <h3>Enter your nickname</h3>
+            <button
+              class="claude-btn-icon"
+              @click="handleCancel"
+            >
+              <svg
+                fill="currentColor"
+                height="16"
+                viewBox="0 0 24 24"
+                width="16"
+              >
+                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+              </svg>
+            </button>
+          </div>
+          <div class="claude-modal-body">
+            <p class="claude-modal-hint">
+              Choose a nickname for collaborative chat sessions
+            </p>
+            <input
+              v-model="nicknameInput"
+              class="claude-modal-input"
+              maxlength="20"
+              placeholder="Your nickname (2-20 characters)"
+              type="text"
+              @keydown.enter="handleSubmit"
+            >
+            <p
+              v-if="error"
+              class="claude-modal-error"
+            >
+              {{ error }}
+            </p>
+          </div>
+          <div class="claude-modal-actions">
+            <button
+              class="claude-modal-btn-secondary"
+              @click="handleCancel"
+            >
+              Cancel
+            </button>
+            <button
+              :disabled="nicknameInput.trim().length < 2"
+              class="claude-modal-btn-primary"
+              @click="handleSubmit"
+            >
+              Save
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style>
+.claude-modal-backdrop{align-items:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(0,0,0,.5);display:flex;inset:0;justify-content:center;padding:24px;position:fixed;z-index:100000}.claude-modal{backdrop-filter:blur(var(--claude-blur-heavy));-webkit-backdrop-filter:blur(var(--claude-blur-heavy));background:var(--claude-glass-solid);border:1px solid var(--claude-border-light);border-radius:var(--claude-radius);box-shadow:var(--claude-shadow-lg),var(--claude-glow);max-width:380px;overflow:hidden;width:100%}.claude-modal-header{align-items:center;display:flex;justify-content:space-between;padding:20px 20px 16px}.claude-modal-header h3{background:linear-gradient(135deg,#fff,hsla(0,0%,100%,.8));-webkit-background-clip:text;font-size:17px;font-weight:600;margin:0;-webkit-text-fill-color:transparent;background-clip:text}.claude-modal-body{padding:20px}.claude-modal-hint{color:var(--claude-text-muted);font-size:14px;line-height:1.5;margin:0 0 16px}.claude-modal-input{background:var(--claude-glass);border:1px solid var(--claude-border);border-radius:var(--claude-radius-sm);color:var(--claude-text);font-family:inherit;font-size:14px;padding:12px 16px;transition:all .2s ease;width:100%}.claude-modal-input:focus{background:var(--claude-glass-elevated);border-color:var(--claude-primary);box-shadow:0 0 0 3px rgba(254,154,0,.15);outline:none}.claude-modal-input::-moz-placeholder{color:var(--claude-text-dim)}.claude-modal-input::placeholder{color:var(--claude-text-dim)}.claude-modal-error{color:#f87171;font-size:13px;margin:10px 0 0}.claude-modal-actions{display:flex;gap:10px;justify-content:flex-end;padding:16px 20px 20px}.claude-modal-btn-primary,.claude-modal-btn-secondary{border:none;border-radius:var(--claude-radius-sm);cursor:pointer;font-size:14px;font-weight:500;padding:10px 20px;transition:all .2s ease}.claude-modal-btn-secondary{background:var(--claude-glass);border:1px solid var(--claude-border);color:var(--claude-text)}.claude-modal-btn-secondary:hover{background:var(--claude-glass-hover);border-color:var(--claude-border-light)}.claude-modal-btn-primary{background:linear-gradient(135deg,#fe9a00,#f59e0b);box-shadow:0 4px 15px rgba(254,154,0,.3);color:#fff}.claude-modal-btn-primary:hover:not(:disabled){box-shadow:0 6px 20px rgba(254,154,0,.4);transform:translateY(-1px)}.claude-modal-btn-primary:disabled{box-shadow:none;cursor:not-allowed;opacity:.4;transform:none}.claude-modal-fade-enter-active,.claude-modal-fade-leave-active{transition:opacity .3s ease}.claude-modal-fade-enter-from,.claude-modal-fade-leave-to{opacity:0}
+</style>

package/dist/runtime/overlay/components/chat/NicknameModal.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    show: boolean;
+    error?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    submit: (nickname: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onSubmit?: ((nickname: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/overlay/components/chat/index.d.ts

@@ -0,0 +1,6 @@
+export { default as ChatHeader } from './ChatHeader.vue.js';
+export { default as ChatInput } from './ChatInput.vue.js';
+export { default as ChatMessages } from './ChatMessages.vue.js';
+export { default as ClaudeBadge } from './ClaudeBadge.vue.js';
+export { default as HistoryPanel } from './HistoryPanel.vue.js';
+export { default as NicknameModal } from './NicknameModal.vue.js';

package/dist/runtime/overlay/components/chat/index.js

@@ -0,0 +1,6 @@
+export { default as ChatHeader } from "./ChatHeader.vue";
+export { default as ChatInput } from "./ChatInput.vue";
+export { default as ChatMessages } from "./ChatMessages.vue";
+export { default as ClaudeBadge } from "./ClaudeBadge.vue";
+export { default as HistoryPanel } from "./HistoryPanel.vue";
+export { default as NicknameModal } from "./NicknameModal.vue";

package/dist/runtime/overlay/composables/index.d.ts

@@ -0,0 +1,3 @@
+export { usePanelPosition, type PanelAnchor, type PanelPositionOptions } from './usePanelPosition.js';
+export { usePanelInteraction, type PanelInteractionOptions } from './usePanelInteraction.js';
+export { useMobileSwipe, type MobileSwipeOptions } from './useMobileSwipe.js';

package/dist/runtime/overlay/composables/index.js

@@ -0,0 +1,3 @@
+export { usePanelPosition } from "./usePanelPosition.js";
+export { usePanelInteraction } from "./usePanelInteraction.js";
+export { useMobileSwipe } from "./useMobileSwipe.js";

package/dist/runtime/overlay/composables/useMessageContext.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Simple overlay version - uses window directly
+ */
+export declare function useMessageContext(): {
+    contextChips: import("@vue/reactivity").Ref<{
+        id: "viewport" | "user-agent" | "routing";
+        label: string;
+        icon: string;
+        active: boolean;
+    }[], import("./useMessageContext.js").ContextChip[] | {
+        id: "viewport" | "user-agent" | "routing";
+        label: string;
+        icon: string;
+        active: boolean;
+    }[]>;
+    toggleContextChip: (id: import("./useMessageContext.js").ContextChip["id"]) => void;
+    collectContext: () => import("./useMessageContext.js").MessageContextData | null;
+    generateContextBlock: (context: import("./useMessageContext.js").MessageContextData) => string;
+    parseMessageContext: (content: string) => {
+        context: import("./useMessageContext.js").MessageContextData | null;
+        body: string;
+    };
+    collectContextBlock: () => string | null;
+};
+export type { ContextChip, MessageContextData, RouteInfo } from '../../shared/composables/useMessageContext.js';

package/dist/runtime/overlay/composables/useMessageContext.js

@@ -0,0 +1,29 @@
+import { useMessageContext as useMessageContextCore } from "../../shared/composables/useMessageContext.js";
+export function useMessageContext() {
+  function getViewport() {
+    if (typeof window === "undefined") return null;
+    return {
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+  }
+  function getRoute() {
+    if (typeof window === "undefined") return null;
+    const searchParams = new URLSearchParams(window.location.search);
+    const query = {};
+    searchParams.forEach((value, key) => {
+      query[key] = value;
+    });
+    return {
+      path: window.location.pathname,
+      fullPath: window.location.pathname + window.location.search,
+      query: Object.keys(query).length > 0 ? query : void 0
+    };
+  }
+  return useMessageContextCore({
+    getViewport,
+    getRoute,
+    // Overlay doesn't have component selection
+    getComponents: () => []
+  });
+}

package/dist/runtime/overlay/composables/useMobileSwipe.d.ts

@@ -0,0 +1,15 @@
+import { type Ref } from 'vue';
+export interface MobileSwipeOptions {
+    panelRef: Ref<HTMLElement | null>;
+    headerRef: Ref<HTMLElement | null>;
+    onSwipeClose: () => void;
+    threshold?: number;
+    mobileBreakpoint?: number;
+}
+export declare function useMobileSwipe(options: MobileSwipeOptions): {
+    isSwipeClosing: Ref<boolean, boolean>;
+    handleTouchStart: (e: TouchEvent) => void;
+    handleTouchEnd: () => void;
+    setupTouchMoveListener: () => void;
+    cleanupTouchMoveListener: () => void;
+};