feat: ship v0.9.0 with pomodoro, achievements, and injection history

Add pomodoro timer with goal notifications, writing streak milestones, and knowledge injection logging with UI previews across AI writing flows. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-07 19:15:52 +08:00
parent 255f1a99a0
commit d4122c8f95
53 changed files with 1679 additions and 80 deletions
@@ -47,6 +47,12 @@ function AppInner(): React.JSX.Element {
    if (loaded && !onboardingCompleted) setShowOnboarding(true)
  }, [loaded, onboardingCompleted])

+  useEffect(() => {
+    return window.electronAPI.onGoalNotification((payload) => {
+      showToast(t(payload.messageKey, payload.messageParams))
+    })
+  }, [showToast, t])
+
  useEffect(() => {
    const openSearch = (): void => useSearchStore.getState().setOpen(true)
    const openLandmarks = (): void => useAppStore.getState().setLandmarksModalOpen(true)
@@ -1,4 +1,5 @@
 import { useEffect } from 'react'
+import type { WritingMilestone } from '@shared/types'
 import { useTranslation } from 'react-i18next'
 import { useBookStore } from '@renderer/stores/useBookStore'
 import { useEditStore } from '@renderer/stores/useEditStore'
@@ -10,6 +11,14 @@ interface CockpitModalProps {
  onOpenBridge: (chapterId: string) => void
 }

+const ALL_MILESTONES: WritingMilestone[] = ['streak_7', 'streak_30', 'streak_100']
+
+const MILESTONE_I18N: Record<WritingMilestone, string> = {
+  streak_7: 'achievement.streak7',
+  streak_30: 'achievement.streak30',
+  streak_100: 'achievement.streak100'
+}
+
 export function CockpitModal({ onOpenBridge }: CockpitModalProps): React.JSX.Element | null {
  const { t } = useTranslation()
  const bookId = useBookStore((s) => s.currentBookId)
@@ -105,6 +114,26 @@ export function CockpitModal({ onOpenBridge }: CockpitModalProps): React.JSX.Ele
                <WritingHeatmap heatmap={summary.writingStats.heatmap} />
              </div>
            )}
+            <div className="cockpit-pomodoro-today" data-testid="cockpit-pomodoro-today">
+              {t('cockpit.pomodoroToday', { count: summary.pomodoroTodayCount ?? 0 })}
+            </div>
+            <div className="cockpit-achievements-section">
+              <div className="cockpit-heatmap-label">{t('cockpit.achievements')}</div>
+              <div className="cockpit-achievements" data-testid="cockpit-achievements">
+                {ALL_MILESTONES.map((milestone) => {
+                  const unlocked = summary.achievements?.some((a) => a.milestone === milestone)
+                  return (
+                    <span
+                      key={milestone}
+                      className={`cockpit-achievement-badge ${unlocked ? 'unlocked' : 'locked'}`}
+                      title={t(MILESTONE_I18N[milestone])}
+                    >
+                      {milestone === 'streak_7' ? '7🔥' : milestone === 'streak_30' ? '30🔥' : '100🔥'}
+                    </span>
+                  )
+                })}
+              </div>
+            </div>
            </>
          )}
        </div>
@@ -4,9 +4,11 @@ import type {
  CreateKnowledgeInput,
  ForeshadowStatus,
  KnowledgeEntry,
+  KnowledgeInjectionLog,
  KnowledgeType
 } from '@shared/types'
 import { useBookStore } from '@renderer/stores/useBookStore'
+import { useEditStore } from '@renderer/stores/useEditStore'
 import { useKnowledgeStore } from '@renderer/stores/useKnowledgeStore'
 import { ipcCall } from '@renderer/lib/ipc-client'

@@ -26,6 +28,7 @@ export function KnowledgeEditorDialog({
  const { t } = useTranslation()
  const bookId = useBookStore((s) => s.currentBookId)
  const chapters = useBookStore((s) => s.chapters)
+  const switchTarget = useEditStore((s) => s.switchTarget)
  const entries = useKnowledgeStore((s) => s.entries)
  const create = useKnowledgeStore((s) => s.create)
  const update = useKnowledgeStore((s) => s.update)
@@ -45,6 +48,17 @@ export function KnowledgeEditorDialog({
  const [foreshadowStatus, setForeshadowStatus] = useState<ForeshadowStatus>('buried')
  const [sourceChapterId, setSourceChapterId] = useState('')
  const [approveNow, setApproveNow] = useState(false)
+  const [injections, setInjections] = useState<KnowledgeInjectionLog[]>([])
+
+  useEffect(() => {
+    if (!open || !bookId || !entryId) {
+      setInjections([])
+      return
+    }
+    void ipcCall(() => window.electronAPI.knowledge.listInjections(bookId, entryId)).then(
+      setInjections
+    )
+  }, [open, bookId, entryId])

  useEffect(() => {
    if (!open) return
@@ -183,6 +197,39 @@ export function KnowledgeEditorDialog({
              {t('knowledge.approveNow')}
            </label>
          )}
+          {existing && injections.length > 0 && (
+            <div className="knowledge-injection-history" data-testid="knowledge-injection-history">
+              <div className="kb-injection-label">{t('knowledge.injectionHistory')}</div>
+              {injections.map((log) => {
+                const chapterTitle =
+                  chapters.find((c) => c.id === log.chapterId)?.title ?? t('knowledge.noChapter')
+                return (
+                  <div key={log.id} className="kb-injection-row">
+                    <span className="kb-injection-date">
+                      {new Date(log.injectedAt).toLocaleString()}
+                    </span>
+                    <span className="kb-injection-mode">
+                      {t(`knowledge.injectionMode.${log.flowMode}`)}
+                    </span>
+                    {log.chapterId ? (
+                      <button
+                        type="button"
+                        className="kb-injection-chapter-link"
+                        onClick={() => {
+                          void switchTarget({ kind: 'chapter', id: log.chapterId! })
+                          onClose()
+                        }}
+                      >
+                        {chapterTitle}
+                      </button>
+                    ) : (
+                      <span>{chapterTitle}</span>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          )}
        </div>
        <div className="modal-footer">
          {isMergeMode && bookId && existing && (
@@ -13,6 +13,7 @@ import {
 export function KnowledgePanel(): React.JSX.Element {
  const { t } = useTranslation()
  const bookId = useBookStore((s) => s.currentBookId)
+  const chapters = useBookStore((s) => s.chapters)
  const selectedChapterId = useBookStore((s) => s.selectedChapterId)
  const extractThreshold = useSettingsStore((s) => s.knowledgeExtractConfidenceThreshold)
  const {
@@ -32,6 +33,8 @@ export function KnowledgePanel(): React.JSX.Element {
    extractChapter,
    batchApproveHighConfidence
  } = useKnowledgeStore()
+  const injectionPreviews = useKnowledgeStore((s) => s.injectionPreviews)
+  const loadInjectionPreviews = useKnowledgeStore((s) => s.loadInjectionPreviews)
  const [extracting, setExtracting] = useState(false)
  const [namingOpen, setNamingOpen] = useState(false)
  const [selected, setSelected] = useState<Set<string>>(new Set())
@@ -51,6 +54,14 @@ export function KnowledgePanel(): React.JSX.Element {
    )
  }, [bookId, entries])

+  useEffect(() => {
+    if (!bookId || entries.length === 0) return
+    void loadInjectionPreviews(
+      bookId,
+      entries.map((e) => e.id)
+    )
+  }, [bookId, entries, loadInjectionPreviews])
+
  const handleBatchApprove = async (): Promise<void> => {
    if (!bookId || selected.size === 0) return
    await batchApprove(bookId, [...selected])
@@ -188,6 +199,25 @@ export function KnowledgePanel(): React.JSX.Element {
                  </div>
                )}
                {entry.content && <div className="kb-item-content">{entry.content}</div>}
+                {(injectionPreviews[entry.id]?.length ?? 0) > 0 && (
+                  <div
+                    className="kb-injection-preview"
+                    data-testid={`knowledge-injection-preview-${entry.id}`}
+                  >
+                    <div className="kb-injection-label">{t('knowledge.injectionPreview')}</div>
+                    {injectionPreviews[entry.id]!.map((log) => (
+                      <div key={log.id} className="kb-injection-preview-row">
+                        {t('knowledge.injectionEntry', {
+                          date: new Date(log.injectedAt).toLocaleDateString(),
+                          mode: t(`knowledge.injectionMode.${log.flowMode}`),
+                          chapter:
+                            chapters.find((c) => c.id === log.chapterId)?.title ??
+                            t('knowledge.noChapter')
+                        })}
+                      </div>
+                    ))}
+                  </div>
+                )}
              </div>
              <div className="kb-item-actions">
                {entry.status === 'pending' && bookId && (
@@ -10,6 +10,7 @@ import { useReferenceStore } from '@renderer/stores/useReferenceStore'
 import { useSettingsStore } from '@renderer/stores/useSettingsStore'
 import { useCockpitStore } from '@renderer/stores/useCockpitStore'
 import { useWritingStatsStore } from '@renderer/stores/useWritingStatsStore'
+import { usePomodoroStore, formatPomodoroTime } from '@renderer/stores/usePomodoroStore'
 import { ipcCall } from '@renderer/lib/ipc-client'
 import { TipTapEditor, flushEditorSave } from '@renderer/components/editor/TipTapEditor'
 import { insertLandmarkInEditor } from '@renderer/lib/editor-commands'
@@ -94,6 +95,15 @@ export function EditorLayout(): React.JSX.Element {
  const dailyWordGoal = useSettingsStore((s) => s.dailyWordGoal)
  const writingStats = useWritingStatsStore((s) => s.stats)
  const refreshWritingStats = useWritingStatsStore((s) => s.refresh)
+  const pomodoroRunning = usePomodoroStore((s) => s.running)
+  const pomodoroPaused = usePomodoroStore((s) => s.paused)
+  const pomodoroRemaining = usePomodoroStore((s) => s.remainingSec)
+  const pomodoroBookId = usePomodoroStore((s) => s.bookId)
+  const pomodoroInit = usePomodoroStore((s) => s.init)
+  const pomodoroStart = usePomodoroStore((s) => s.start)
+  const pomodoroPause = usePomodoroStore((s) => s.pause)
+  const pomodoroResume = usePomodoroStore((s) => s.resume)
+  const pomodoroCancel = usePomodoroStore((s) => s.cancel)
  const bridgeChapterId = useCockpitStore((s) => s.bridgeChapterId)
  const clearBridgeChapter = useCockpitStore((s) => s.clearBridgeChapter)
  const updateChapterLocal = useBookStore((s) => s.updateChapterLocal)
@@ -111,11 +121,21 @@ export function EditorLayout(): React.JSX.Element {
  const isChapterTarget = target?.kind === 'chapter'
  const chapterId = target?.kind === 'chapter' ? target.id : selectedChapterId

+  useEffect(() => {
+    void pomodoroInit()
+  }, [pomodoroInit])
+
+  useEffect(() => {
+    if (!pomodoroRunning || !pomodoroBookId || !currentBookId) return
+    if (pomodoroBookId === currentBookId) return
+    void pomodoroCancel()
+  }, [currentBookId, pomodoroRunning, pomodoroBookId, pomodoroCancel])
+
  useEffect(() => {
    if (selectedChapterId && (!target || target.kind === 'chapter')) {
      setTarget({ kind: 'chapter', id: selectedChapterId })
    }
-  }, [selectedChapterId, setTarget])
+  }, [selectedChapterId, setTarget, target])

  useEffect(() => {
    if (!currentBookId || target?.kind !== 'chapter') return
@@ -426,6 +446,39 @@ export function EditorLayout(): React.JSX.Element {
              bookId={currentBookId}
            />
            <div id="editor-statusbar">
+              <div className="pomodoro-control" data-testid="pomodoro-control">
+                {!pomodoroRunning ? (
+                  <button
+                    type="button"
+                    className="pomodoro-btn"
+                    title={t('pomodoro.start')}
+                    disabled={!currentBookId}
+                    onClick={() => currentBookId && void pomodoroStart(currentBookId)}
+                  >
+                    ▶
+                  </button>
+                ) : (
+                  <>
+                    <button
+                      type="button"
+                      className="pomodoro-btn"
+                      title={pomodoroPaused ? t('pomodoro.resume') : t('pomodoro.pause')}
+                      onClick={() => void (pomodoroPaused ? pomodoroResume() : pomodoroPause())}
+                    >
+                      {pomodoroPaused ? '▶' : '⏸'}
+                    </button>
+                    <span className="pomodoro-time">{formatPomodoroTime(pomodoroRemaining)}</span>
+                    <button
+                      type="button"
+                      className="pomodoro-btn"
+                      title={t('pomodoro.cancel')}
+                      onClick={() => void pomodoroCancel()}
+                    >
+                      ✕
+                    </button>
+                  </>
+                )}
+              </div>
              <span>{saveStatus}{lastSaved ? ` · ${lastSaved.toLocaleTimeString()}` : ''}</span>
              {dailyWordGoal > 0 && writingStats && (
                <span
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import type { ThemeId, Language } from '@shared/types'
+import type { ThemeId, Language, PomodoroDuration } from '@shared/types'
 import { useSettingsStore } from '@renderer/stores/useSettingsStore'
 import { ShortcutEditor } from '@renderer/components/settings/ShortcutEditor'
 import { AiSettingsPage } from '@renderer/components/settings/AiSettingsPage'
@@ -159,6 +159,49 @@ export function SettingsPage(): React.JSX.Element {
                {t('settings.knowledgeAutoExtract')}
              </label>
            </div>
+            <div className="setting-item">
+              <span>{t('settings.pomodoroDuration')}</span>
+              <select
+                data-testid="settings-pomodoro-duration"
+                className="form-control form-control--narrow"
+                value={settings.pomodoroDurationMinutes ?? 25}
+                onChange={(e) =>
+                  void settings.update({
+                    pomodoroDurationMinutes: Number(e.target.value) as PomodoroDuration
+                  })
+                }
+              >
+                <option value={15}>15</option>
+                <option value={25}>25</option>
+                <option value={45}>45</option>
+              </select>
+            </div>
+            <div className="setting-item">
+              <label style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <input
+                  type="checkbox"
+                  data-testid="settings-system-notifications"
+                  checked={settings.enableSystemNotifications === true}
+                  onChange={(e) =>
+                    void settings.update({ enableSystemNotifications: e.target.checked })
+                  }
+                />
+                {t('settings.systemNotifications')}
+              </label>
+            </div>
+            <div className="setting-item">
+              <label style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <input
+                  type="checkbox"
+                  data-testid="settings-goal-notifications"
+                  checked={settings.enableGoalNotifications !== false}
+                  onChange={(e) =>
+                    void settings.update({ enableGoalNotifications: e.target.checked })
+                  }
+                />
+                {t('settings.goalNotifications')}
+              </label>
+            </div>
            <div className="setting-item">
              <span>{t('settings.extractThreshold')}</span>
              <input
@@ -185,7 +228,7 @@ export function SettingsPage(): React.JSX.Element {
        {section === 'shortcuts' && <ShortcutEditor />}
        {section === 'about' && (
          <p style={{ color: 'var(--text-secondary)', lineHeight: 1.8 }}>
-            {t('app.name')} v0.8.0
+            {t('app.name')} v0.9.0
            <br />
            {t('app.tagline')}
          </p>
@@ -2,6 +2,7 @@ import { create } from 'zustand'
 import type {
  CreateKnowledgeInput,
  KnowledgeEntry,
+  KnowledgeInjectionLog,
  KnowledgeStatus,
  KnowledgeType
 } from '@shared/types'
@@ -17,7 +18,9 @@ interface KnowledgeState {
  forgottenOnly: boolean
  editorOpen: boolean
  editingId: string | null
+  injectionPreviews: Record<string, KnowledgeInjectionLog[]>
  load: (bookId: string) => Promise<void>
+  loadInjectionPreviews: (bookId: string, entryIds: string[]) => Promise<void>
  setTab: (tab: KnowledgeTab) => void
  openForgottenFilter: () => void
  openEditor: (id?: string | null) => void
@@ -46,6 +49,7 @@ export const useKnowledgeStore = create<KnowledgeState>((set, get) => ({
  forgottenOnly: false,
  editorOpen: false,
  editingId: null,
+  injectionPreviews: {},
  load: async (bookId) => {
    const [entries, stats] = await Promise.all([
      ipcCall(() => window.electronAPI.knowledge.list(bookId)),
@@ -53,6 +57,21 @@ export const useKnowledgeStore = create<KnowledgeState>((set, get) => ({
    ])
    set({ entries, stats })
  },
+  loadInjectionPreviews: async (bookId, entryIds) => {
+    if (entryIds.length === 0) {
+      set({ injectionPreviews: {} })
+      return
+    }
+    const pairs = await Promise.all(
+      entryIds.map(async (id) => {
+        const logs = await ipcCall(() =>
+          window.electronAPI.knowledge.listInjections(bookId, id, 3)
+        )
+        return [id, logs] as const
+      })
+    )
+    set({ injectionPreviews: Object.fromEntries(pairs) })
+  },
  setTab: (tab) => set({ tab, forgottenOnly: tab === 'foreshadow' ? get().forgottenOnly : false }),
  openForgottenFilter: () => {
    useAppStore.getState().setRightPanel('knowledge')
@@ -0,0 +1,53 @@
+import { create } from 'zustand'
+import type { PomodoroState } from '@shared/types'
+import { ipcCall } from '@renderer/lib/ipc-client'
+
+interface PomodoroStore extends PomodoroState {
+  tickUnsub: (() => void) | null
+  init: () => Promise<void>
+  start: (bookId: string) => Promise<void>
+  pause: () => Promise<void>
+  resume: () => Promise<void>
+  cancel: () => Promise<void>
+  applyState: (state: PomodoroState) => void
+}
+
+const idle: PomodoroState = { running: false, paused: false, remainingSec: 0, bookId: null }
+
+export const usePomodoroStore = create<PomodoroStore>((set, get) => ({
+  ...idle,
+  tickUnsub: null,
+  init: async () => {
+    const state = await ipcCall(() => window.electronAPI.pomodoro.getState())
+    set(state)
+    if (!get().tickUnsub) {
+      const unsub = window.electronAPI.onPomodoroTick((next) => {
+        set(next)
+      })
+      set({ tickUnsub: unsub })
+    }
+  },
+  applyState: (state) => set(state),
+  start: async (bookId) => {
+    const state = await ipcCall(() => window.electronAPI.pomodoro.start(bookId))
+    set(state)
+  },
+  pause: async () => {
+    const state = await ipcCall(() => window.electronAPI.pomodoro.pause())
+    set(state)
+  },
+  resume: async () => {
+    const state = await ipcCall(() => window.electronAPI.pomodoro.resume())
+    set(state)
+  },
+  cancel: async () => {
+    const state = await ipcCall(() => window.electronAPI.pomodoro.cancel())
+    set(state)
+  }
+}))
+
+export function formatPomodoroTime(sec: number): string {
+  const m = Math.floor(sec / 60)
+  const s = sec % 60
+  return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
+}
@@ -26,6 +26,9 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
  knowledgeSuggestTopN: 8,
  knowledgeAutoExtract: true,
  knowledgeExtractConfidenceThreshold: 0.8,
+  pomodoroDurationMinutes: 25,
+  enableSystemNotifications: false,
+  enableGoalNotifications: true,
  loaded: false,
  load: async () => {
    const data = await ipcCall(() => window.electronAPI.settings.get())
@@ -909,6 +909,108 @@
  font-weight: 600;
 }

+.pomodoro-control {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-right: 4px;
+}
+
+.pomodoro-btn {
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 11px;
+  line-height: 1;
+  padding: 2px 6px;
+}
+
+.pomodoro-btn:hover:not(:disabled) {
+  border-color: var(--accent);
+  color: var(--accent-light);
+}
+
+.pomodoro-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.pomodoro-time {
+  font-variant-numeric: tabular-nums;
+  min-width: 42px;
+  text-align: center;
+}
+
+.cockpit-achievements-section {
+  margin-top: 12px;
+}
+
+.cockpit-achievements {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.cockpit-achievement-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 10px;
+  border-radius: 8px;
+  font-size: 13px;
+  border: 1px solid var(--border);
+}
+
+.cockpit-achievement-badge.unlocked {
+  background: var(--bg-tertiary);
+  opacity: 1;
+}
+
+.cockpit-achievement-badge.locked {
+  opacity: 0.35;
+  filter: grayscale(1);
+}
+
+.cockpit-pomodoro-today {
+  margin-top: 12px;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.kb-injection-preview,
+.knowledge-injection-history {
+  margin-top: 8px;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.kb-injection-label {
+  font-weight: 600;
+  margin-bottom: 4px;
+  color: var(--text-secondary);
+}
+
+.kb-injection-preview-row,
+.kb-injection-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+  margin-top: 2px;
+}
+
+.kb-injection-chapter-link {
+  background: none;
+  border: none;
+  color: var(--accent-light);
+  cursor: pointer;
+  font-size: inherit;
+  padding: 0;
+  text-decoration: underline;
+}
+
 .kb-confidence-badge {
  margin-left: 8px;
  font-size: 11px;