echoctl 0.1.0 → 0.1.2

package/docs/.vitepress/theme/components/EchoClaudeImportBanner.vue

@@ -0,0 +1,335 @@
+<template>
+  <div v-if="visible" class="echo-import-banner">
+    <div class="echo-import-banner-inner">
+      <div class="echo-import-banner-header" @click="expanded = !expanded">
+        <span class="echo-import-banner-icon">📥</span>
+        <span class="echo-import-banner-title">
+          发现 <strong>{{ candidates.length }}</strong> 个未导入的 Claude 历史会话
+        </span>
+        <span class="echo-import-banner-chevron">{{ expanded ? '▾' : '▸' }}</span>
+        <button class="echo-import-banner-close" @click.stop="dismiss" title="关闭">✕</button>
+      </div>
+
+      <div v-if="expanded" class="echo-import-banner-body">
+        <p class="echo-import-banner-desc">
+          这些会话来自 Claude Code 的 JSONL 转录文件，尚未导入 Echo。
+          导入后它们会作为不可变文章出现在当前项目的文章列表中。
+        </p>
+
+        <div class="echo-import-banner-candidates" v-if="candidates.length > 0">
+          <div v-for="c in candidates" :key="c.sessionId" class="echo-import-candidate-item">
+            <span class="echo-import-candidate-id">{{ c.articleId }}</span>
+            <span class="echo-import-candidate-meta">{{ c.turnCount }} turns · {{ formatDate(c.mtime) }}</span>
+            <span class="echo-import-candidate-status" :class="'echo-status-' + c.status">{{ statusLabel(c.status) }}</span>
+          </div>
+        </div>
+
+        <div class="echo-import-banner-cli">
+          <p class="echo-import-banner-cli-title">💡 命令行导入</p>
+          <pre class="echo-import-banner-cli-code"><code>echoctl import claude --project {{ projectRoot || '&lt;项目路径&gt;' }} --all --apply</code></pre>
+          <p class="echo-import-banner-cli-note">
+            更多选项：<code>echoctl import claude --help</code>
+          </p>
+        </div>
+
+        <div v-if="error" class="echo-import-banner-error">{{ error }}</div>
+        <div v-if="success" class="echo-import-banner-success">{{ success }}</div>
+
+        <div class="echo-import-banner-actions">
+          <button
+            class="echo-import-btn echo-import-btn-primary"
+            :disabled="importing"
+            @click="importAll"
+          >
+            {{ importing ? '导入中…' : `导入全部（${candidates.length} 个）` }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { getClaudeImportCandidates, importClaudeSessions, getStatus } from '../lib/echo-api'
+
+const STORAGE_KEY = 'echo-claude-import-dismissed'
+
+const visible = ref(false)
+const expanded = ref(false)
+const candidates = ref<any[]>([])
+const projectRoot = ref('')
+const projectId = ref<string | null>(null)
+const importing = ref(false)
+const error = ref('')
+const success = ref('')
+
+onMounted(async () => {
+  // 检查是否已被关闭（跨会话保留）
+  try {
+    if (localStorage.getItem(STORAGE_KEY) === '1') return
+  } catch (_) {}
+
+  // 获取当前项目 ID
+  let pid: string | null = null
+  try {
+    const s = await getStatus()
+    pid = s.projectId
+  } catch (_) {}
+
+  if (!pid) return
+  projectId.value = pid
+
+  try {
+    const result = await getClaudeImportCandidates(pid)
+    const newCandidates = result.candidates.filter(
+      (c) => c.status === 'new' || c.status === 'updated'
+    )
+    if (newCandidates.length === 0) return
+    candidates.value = newCandidates
+    projectRoot.value = result.projectDir || ''
+    visible.value = true
+  } catch (_) {}
+})
+
+function dismiss() {
+  visible.value = false
+  try { localStorage.setItem(STORAGE_KEY, '1') } catch (_) {}
+}
+
+function statusLabel(status: string): string {
+  switch (status) {
+    case 'new': return '新'
+    case 'updated': return '已更新'
+    case 'skipped': return '已跳过'
+    default: return status
+  }
+}
+
+function formatDate(mtime: string): string {
+  try {
+    const d = new Date(mtime)
+    return d.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })
+  } catch {
+    return mtime
+  }
+}
+
+async function importAll() {
+  if (!projectId.value) return
+  importing.value = true
+  error.value = ''
+  success.value = ''
+  try {
+    const ids = candidates.value.map((c) => c.sessionId)
+    const result = await importClaudeSessions(projectId.value, ids)
+    if (result.ok) {
+      success.value = `已导入 ${result.imported} 个会话，跳过 ${result.skipped} 个。页面即将刷新…`
+      try { localStorage.removeItem(STORAGE_KEY) } catch (_) {}
+      setTimeout(() => location.reload(), 2000)
+    }
+  } catch (err: any) {
+    error.value = err.message || '导入失败'
+  } finally {
+    importing.value = false
+  }
+}
+</script>
+
+<style scoped>
+.echo-import-banner {
+  margin: 16px 0 24px;
+  border: 1px solid var(--vp-c-brand-soft);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  overflow: hidden;
+}
+
+.echo-import-banner-inner {
+  padding: 0;
+}
+
+.echo-import-banner-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.15s;
+}
+.echo-import-banner-header:hover {
+  background: var(--vp-c-bg-mute);
+}
+
+.echo-import-banner-icon {
+  font-size: 16px;
+}
+
+.echo-import-banner-title {
+  flex: 1;
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+}
+
+.echo-import-banner-chevron {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+  transition: transform 0.15s;
+}
+
+.echo-import-banner-close {
+  background: none;
+  border: none;
+  color: var(--vp-c-text-3);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+.echo-import-banner-close:hover {
+  background: var(--vp-c-bg-mute);
+  color: var(--vp-c-text-1);
+}
+
+.echo-import-banner-body {
+  padding: 0 16px 16px;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.echo-import-banner-desc {
+  margin: 12px 0;
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+}
+
+.echo-import-banner-candidates {
+  max-height: 200px;
+  overflow-y: auto;
+  margin-bottom: 12px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+}
+
+.echo-import-candidate-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--vp-c-divider-light);
+  font-size: 13px;
+}
+.echo-import-candidate-item:last-child {
+  border-bottom: none;
+}
+
+.echo-import-candidate-id {
+  font-family: monospace;
+  font-weight: 600;
+  color: var(--vp-c-brand);
+  min-width: 140px;
+}
+
+.echo-import-candidate-meta {
+  color: var(--vp-c-text-3);
+  flex: 1;
+}
+
+.echo-import-candidate-status {
+  font-size: 12px;
+  padding: 1px 8px;
+  border-radius: 10px;
+  font-weight: 500;
+}
+.echo-status-new {
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand);
+}
+.echo-status-updated {
+  background: var(--vp-c-warning-soft);
+  color: var(--vp-c-warning);
+}
+
+.echo-import-banner-cli {
+  margin-bottom: 16px;
+  padding: 12px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+}
+
+.echo-import-banner-cli-title {
+  margin: 0 0 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.echo-import-banner-cli-code {
+  margin: 0 0 4px;
+  padding: 8px 12px;
+  background: var(--vp-code-block-bg);
+  border-radius: 4px;
+  font-size: 12px;
+  overflow-x: auto;
+}
+.echo-import-banner-cli-code code {
+  color: var(--vp-c-text-1);
+}
+
+.echo-import-banner-cli-note {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+}
+.echo-import-banner-cli-note code {
+  font-size: 12px;
+}
+
+.echo-import-banner-error {
+  margin-bottom: 12px;
+  padding: 8px 12px;
+  background: var(--vp-c-danger-soft);
+  color: var(--vp-c-danger);
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.echo-import-banner-success {
+  margin-bottom: 12px;
+  padding: 8px 12px;
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand);
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.echo-import-banner-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.echo-import-btn {
+  padding: 8px 16px;
+  border-radius: 6px;
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.echo-import-btn-primary {
+  background: var(--vp-c-brand);
+  color: #fff;
+  border-color: var(--vp-c-brand);
+}
+.echo-import-btn-primary:hover {
+  background: var(--vp-c-brand-dark);
+}
+.echo-import-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>

package/docs/.vitepress/theme/components/EchoCommentChain.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="echo-comment-chain" v-if="roots.length > 0">
+    <h3>评论回复链</h3>
+    <EchoCommentNode
+      v-for="root in roots"
+      :key="root.id"
+      :comment="root"
+      :children-map="childrenMap"
+      :depth="0"
+      :article-id="articleId"
+      :project-id="projectId"
+      :author="author"
+      @reply-submitted="handleReplySubmitted"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useData } from 'vitepress'
+import { useEchoStatus } from '../lib/useEchoStatus'
+import EchoCommentNode from './EchoCommentNode.vue'
+
+interface CommentData {
+  id: string
+  author: string
+  date: string
+  content: string
+  quote: string | null
+  evolutionOf: string[]
+  evolutionKind: string
+}
+
+const { frontmatter } = useData()
+const articleId = computed(() => (frontmatter.value as any)?.echo?.articleId as string | undefined)
+const projectId = computed(() => (frontmatter.value as any)?.echo?.projectId as string | null | undefined)
+const { status } = useEchoStatus(articleId)
+const author = computed(() => status.value?.author || 'vincent')
+
+const comments = ref<CommentData[]>([])
+const roots = ref<CommentData[]>([])
+const childrenMap = ref<Map<string, CommentData[]>>(new Map())
+
+function buildTree(items: CommentData[]) {
+  const byId = new Map<string, CommentData>()
+  for (const c of items) byId.set(c.id, c)
+
+  const children = new Map<string, CommentData[]>()
+  const rootIds = new Set(byId.keys())
+
+  for (const c of items) {
+    const parents = c.evolutionOf.filter((pid) => byId.has(pid))
+    if (parents.length > 0) {
+      rootIds.delete(c.id)
+      for (const pid of parents) {
+        if (!children.has(pid)) children.set(pid, [])
+        children.get(pid)!.push(c)
+      }
+    }
+  }
+
+  childrenMap.value = children
+  roots.value = [...rootIds].map((id) => byId.get(id)!).sort((a, b) => a.id.localeCompare(b.id))
+}
+
+function handleReplySubmitted() {
+  setTimeout(() => location.reload(), 1200)
+}
+
+onMounted(() => {
+  try {
+    const el = document.getElementById('echo-comments-data')
+    if (!el) return
+    const items = JSON.parse(el.textContent || '[]') as CommentData[]
+    comments.value = items
+    buildTree(items)
+  } catch (_) {}
+})
+</script>

package/docs/.vitepress/theme/components/EchoCommentNode.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="echo-thread" :class="{ 'echo-thread-root': depth === 0 }">
+    <div class="echo-thread-item">
+      <div class="echo-thread-connector" v-if="depth > 0">
+        <span class="echo-evo-kind" v-if="comment.evolutionKind && comment.evolutionKind !== 'null'">
+          {{ kindLabel(comment.evolutionKind) }}
+        </span>
+      </div>
+      <div class="echo-thread-card">
+        <div class="echo-thread-head">
+          <strong>{{ comment.author }}</strong>
+          <span>{{ comment.date }}</span>
+        </div>
+        <div class="echo-thread-body" v-html="comment.content"></div>
+        <button class="echo-btn echo-reply-btn" @click="toggleReply">
+          {{ replying ? '取消回复' : '回复' }}
+        </button>
+        <div class="echo-reply-form" v-if="replying">
+          <textarea
+            v-model="replyText"
+            :placeholder="`回复 ${comment.id}...`"
+            rows="2"
+          ></textarea>
+          <div class="echo-reply-btns">
+            <button
+              class="echo-btn"
+              :disabled="!replyText.trim() || submitting"
+              @click="submitReply"
+            >
+              {{ submitting ? '提交中...' : '提交回复' }}
+            </button>
+            <button class="echo-btn" @click="replying = false">取消</button>
+          </div>
+          <span v-if="replyError" class="echo-inline-error">{{ replyError }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="echo-thread-children">
+      <EchoCommentNode
+        v-for="child in children"
+        :key="child.id"
+        :comment="child"
+        :children-map="childrenMap"
+        :depth="depth + 1"
+        :article-id="articleId"
+        :project-id="projectId"
+        :author="author"
+        @reply-submitted="$emit('replySubmitted')"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { postComment } from '../lib/echo-api'
+
+interface CommentData {
+  id: string
+  author: string
+  date: string
+  content: string
+  quote: string | null
+  evolutionOf: string[]
+  evolutionKind: string
+}
+
+const props = defineProps<{
+  comment: CommentData
+  childrenMap: Map<string, CommentData[]>
+  depth: number
+  articleId: string | undefined
+  projectId: string | null | undefined
+  author: string
+}>()
+
+const emit = defineEmits<{
+  replySubmitted: []
+}>()
+
+const children = computed(() => props.childrenMap.get(props.comment.id) || [])
+
+const replying = ref(false)
+const replyText = ref('')
+const submitting = ref(false)
+const replyError = ref('')
+
+const kindLabels: Record<string, string> = {
+  expands: '扩展',
+  contradicts: '反驳',
+  refines: '深化',
+  supersedes: '替代',
+}
+
+function kindLabel(kind: string): string {
+  return kindLabels[kind] || kind
+}
+
+function toggleReply() {
+  replying.value = !replying.value
+  replyText.value = ''
+  replyError.value = ''
+}
+
+async function submitReply() {
+  if (!props.articleId || !replyText.value.trim()) return
+  submitting.value = true
+  replyError.value = ''
+  try {
+    await postComment({
+      articleId: props.articleId,
+      comment: replyText.value.trim(),
+      scope: 'article',
+      author: props.author,
+      evolutionOf: [props.comment.id],
+      evolutionKind: 'expands',
+      projectId: props.projectId ?? null,
+    })
+    emit('replySubmitted')
+  } catch (err: any) {
+    replyError.value = err.message || '提交失败'
+  } finally {
+    submitting.value = false
+  }
+}
+</script>

package/docs/.vitepress/theme/components/EchoCommentReplies.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="echo-reply-form" v-if="activeReplyId">
+    <textarea
+      v-model="replyText"
+      :placeholder="`回复 ${activeReplyId}...`"
+      rows="2"
+    ></textarea>
+    <div class="echo-reply-btns">
+      <button class="echo-btn" :disabled="!replyText.trim() || submitting" @click="submitReply">
+        {{ submitting ? '提交中...' : '提交回复' }}
+      </button>
+      <button class="echo-btn" @click="cancelReply">取消</button>
+    </div>
+    <span v-if="replyError" class="echo-inline-error">{{ replyError }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useData } from 'vitepress'
+import { useEchoStatus } from '../lib/useEchoStatus'
+import { postComment } from '../lib/echo-api'
+
+const { frontmatter } = useData()
+const articleId = computed(() => (frontmatter.value as any)?.echo?.articleId as string | undefined)
+const projectId = computed(() => (frontmatter.value as any)?.echo?.projectId as string | null | undefined)
+const { status } = useEchoStatus(articleId)
+
+const activeReplyId = ref('')
+const replyText = ref('')
+const submitting = ref(false)
+const replyError = ref('')
+
+function attachReplyButtons() {
+  const comments = document.querySelectorAll<HTMLElement>('.echo-comment[data-comment-id]')
+  for (const el of comments) {
+    if (el.querySelector('.echo-reply-btn')) continue
+    const btn = document.createElement('button')
+    btn.className = 'echo-btn echo-reply-btn'
+    btn.textContent = '回复'
+    btn.addEventListener('click', () => {
+      const id = el.dataset.commentId
+      if (!id) return
+      activeReplyId.value = id
+      replyText.value = ''
+      replyError.value = ''
+    })
+    el.appendChild(btn)
+  }
+}
+
+async function submitReply() {
+  if (!activeReplyId.value || !replyText.value.trim() || !articleId.value) return
+  submitting.value = true
+  replyError.value = ''
+  try {
+    await postComment({
+      articleId: articleId.value,
+      comment: replyText.value.trim(),
+      scope: 'article',
+      author: status.value?.author,
+      evolutionOf: [activeReplyId.value],
+      evolutionKind: 'expands',
+      projectId: projectId.value ?? null,
+    })
+    replyText.value = ''
+    activeReplyId.value = ''
+    replyError.value = '回复已提交，即将刷新...'
+    setTimeout(() => location.reload(), 1200)
+  } catch (err: any) {
+    replyError.value = err.message || '提交失败'
+  } finally {
+    submitting.value = false
+  }
+}
+
+function cancelReply() {
+  activeReplyId.value = ''
+  replyText.value = ''
+}
+
+let observer: MutationObserver | null = null
+onMounted(() => {
+  attachReplyButtons()
+
+  observer = new MutationObserver(() => {
+    attachReplyButtons()
+  })
+  observer.observe(document.body, { childList: true, subtree: true })
+})
+
+onUnmounted(() => {
+  observer?.disconnect()
+})
+</script>