@yolk_vat-y/dsh-project-memory 0.4.4 → 0.5.1

package/src/client/TaskComponents.tsx

@@ -2,7 +2,7 @@
  * Task Panel Presentational 组件 — MiniBar（折叠迷你条）与 TaskCard（任务卡）。
  * 纯渲染 + 卡片局部行内编辑/拖拽状态，动作经 props 回调交给容器（TaskPanel.tsx）。
  */
-import { useRef, useState } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import {
   Button,
   IconChevronDownOutline14,
@@ -13,9 +13,21 @@ import {
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import { createTranslate } from './locales.ts'
 import { useTaskDrag } from './task-hooks.ts'
-import { type Task, type TaskStep } from './task-data-store.ts'
+import { type Task, type TaskInsight, type TaskStep } from './task-data-store.ts'
 import css from './TaskPanel.module.css'
 
+function insightKindLabel(kind: string, t: ReturnType<typeof createTranslate>): string {
+  const map: Record<string, string> = {
+    lesson: t('mem.kind.lesson'),
+    decision: t('mem.kind.decision'),
+    procedure: t('mem.kind.procedure'),
+    experience: t('mem.kind.experience'),
+  }
+  return map[kind] ?? kind
+}
+
+type InsightAction = 'confirm' | 'promote' | 'delete'
+
 function timeAgo(iso?: string) {
   if (!iso) return ''
   const diff = Date.now() - new Date(iso).getTime()
@@ -33,6 +45,75 @@ function StepIcon({ status }: { status: TaskStep['status'] }) {
   return <span className={css.stepPending} />
 }
 
+/**
+ * 双击判定窗口（ms）。
+ * 单击（如卡片展开/收起）会延迟该时长执行：若期间收到第二次点击则按“双击”处理并取消单击，
+ * 从而避免“第一下先展开/收起、布局位移后第二下点不到目标”的问题。
+ * 数值是可感知与可靠性的折中：太小慢速双击会失效，太大单击会显“肉”。
+ */
+const CLICK_SINGLE_DELAY_MS = 250
+
+/**
+ * 行内自适应高度文本编辑器（textarea）。
+ * 编辑体验与单行输入一致（Enter 提交 / Shift+Enter 换行 / Esc 取消 / 失焦提交），
+ * 但高度随内容自动增长（按实际渲染行高测量），最多 maxRows 行后内部滚动，
+ * 解决长步骤/长任务名只能挤在一行里横向滚动编辑的问题。
+ */
+interface InlineEditorProps {
+  value: string
+  className?: string
+  maxRows?: number
+  onValueChange: (value: string) => void
+  onCommit: () => void
+  onCancel: () => void
+}
+
+function InlineEditor({ value, className, maxRows = 8, onValueChange, onCommit, onCancel }: InlineEditorProps) {
+  const ref = useRef<HTMLTextAreaElement>(null)
+
+  // 在绘制前按真实内容测量并写死高度：内容 <= maxRows 行时刚好包住，超出后内部滚动。
+  useLayoutEffect(() => {
+    const el = ref.current
+    if (!el) return
+    el.style.height = 'auto'
+    const cs = getComputedStyle(el)
+    const lineHeight = parseFloat(cs.lineHeight) || 20
+    const padV = (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0)
+    const borderV = (parseFloat(cs.borderTopWidth) || 0) + (parseFloat(cs.borderBottomWidth) || 0)
+    const cap = maxRows * lineHeight + padV + borderV
+    const height = Math.min(el.scrollHeight, cap)
+    el.style.height = `${height}px`
+    el.style.overflowY = el.scrollHeight > cap ? 'auto' : 'hidden'
+  }, [value, maxRows])
+
+  return (
+    <textarea
+      ref={ref}
+      className={className}
+      rows={1}
+      value={value}
+      autoFocus
+      spellCheck={false}
+      onChange={(e) => onValueChange(e.target.value)}
+      onFocus={(e) => {
+        // 光标放到末尾，便于直接在原文后继续输入
+        const len = e.target.value.length
+        e.target.setSelectionRange(len, len)
+      }}
+      onBlur={onCommit}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault()
+          onCommit()
+        } else if (e.key === 'Escape') {
+          e.preventDefault()
+          onCancel()
+        }
+      }}
+    />
+  )
+}
+
 interface MiniBarProps {
   label: string
   hint: string
@@ -104,6 +185,7 @@ interface TaskCardProps {
   onEditStep: (index: number, value: string) => void
   onCycleStatus: (index: number) => void
   onReorderSteps: (fromIndex: number, toIndex: number) => void
+  onInsightAction?: (action: InsightAction, id: string) => void
   showHints: boolean
   syncing: boolean
   t: ReturnType<typeof createTranslate>
@@ -121,6 +203,7 @@ export function TaskCard({
   onEditStep,
   onCycleStatus,
   onReorderSteps,
+  onInsightAction,
   showHints,
   syncing,
   t,
@@ -149,29 +232,66 @@ export function TaskCard({
     onRename(value)
   }
 
+  // —— 卡片头单击(展开/收起)与双击(编辑任务名)的时序判定 ——
+  // 单击动作延迟 CLICK_SINGLE_DELAY_MS 执行；若在窗口内收到第二次点击，取消单击、
+  // 命中任务名则直接进入编辑，避免“第一下已展开/收起、布局位移、第二下点不到任务名”。
+  const headClickTimer = useRef<number | null>(null)
+  // 编辑状态下，点卡片头任意处会先触发失焦提交；该次点击不应再当作“切换展开”的单击。
+  const suppressHeadClick = useRef(false)
+  useEffect(() => () => {
+    if (headClickTimer.current !== null) window.clearTimeout(headClickTimer.current)
+  }, [])
+
+  const handleHeadClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (suppressHeadClick.current) {
+      // 上一次 mousedown 落在标题编辑框内（失焦提交产生），吞掉这次点击，不切换展开
+      suppressHeadClick.current = false
+      return
+    }
+    if (titleEdit !== null) return
+    const target = e.target as HTMLElement
+    const onTitle = isBound && target.closest('[data-card-title]') !== null
+    if (headClickTimer.current !== null) {
+      // 第二次点击 → 双击：取消待执行的单击动作
+      window.clearTimeout(headClickTimer.current)
+      headClickTimer.current = null
+      if (onTitle) setTitleEdit({ value: String(task.title ?? '') })
+      else onToggleExpand()
+      return
+    }
+    headClickTimer.current = window.setTimeout(() => {
+      headClickTimer.current = null
+      onToggleExpand()
+    }, CLICK_SINGLE_DELAY_MS)
+  }
+
   return (
     <article data-task-id={task.id} className={`${css.card}${isBound ? ` ${css.cardBound}` : ''}`}>
       <button
         className={css.cardHead}
-        onClick={() => { if (titleEdit !== null) return; onToggleExpand() }}
+        onClick={handleHeadClick}
+        onMouseDownCapture={() => {
+          // 标题编辑中，点击卡片头任意处都会先失焦提交；标记该次点击以在 onClick 中吞掉，
+          // 避免“改名提交一下、卡片又收起/展开一下”的误切换。
+          if (titleEdit !== null) suppressHeadClick.current = true
+        }}
+        onDoubleClick={(e) => e.preventDefault()}
         aria-expanded={expanded}
       >
         <div className={css.cardTitleRow}>
           {isBound && <span className={css.boundBadge}>{t('task.current')}</span>}
           {isBound && titleEdit !== null ? (
-            <input
-              className={css.stepInput}
+            <InlineEditor
+              className={css.editorArea}
               value={titleEdit.value}
-              autoFocus
-              onChange={(e) => setTitleEdit({ value: e.target.value })}
-              onBlur={commitTitleEdit}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') commitTitleEdit()
-                else if (e.key === 'Escape') setTitleEdit(null)
-              }}
+              maxRows={4}
+              onValueChange={(value) => setTitleEdit({ value })}
+              onCommit={commitTitleEdit}
+              onCancel={() => setTitleEdit(null)}
             />
           ) : (
             <span
+              data-card-title
               className={`${css.cardTitle}${isBound ? ` ${css.cardTitleEditable}` : ''}`}
               title={isBound ? t('task.title-edit') : undefined}
               onDoubleClick={(e) => {
@@ -238,16 +358,13 @@ export function TaskCard({
                           <StepIcon status={step.status} />
                         )}
                         {stepIsEditing ? (
-                          <input
-                            className={css.stepInput}
+                          <InlineEditor
+                            className={css.editorArea}
                             value={stepEdit!.value}
-                            autoFocus
-                            onChange={(e) => setStepEdit({ index: i, value: e.target.value })}
-                            onBlur={() => commitStepEdit(i)}
-                            onKeyDown={(e) => {
-                              if (e.key === 'Enter') commitStepEdit(i)
-                              else if (e.key === 'Escape') setStepEdit(null)
-                            }}
+                            maxRows={10}
+                            onValueChange={(value) => setStepEdit({ index: i, value })}
+                            onCommit={() => commitStepEdit(i)}
+                            onCancel={() => setStepEdit(null)}
                           />
                         ) : (
                           <span
@@ -321,6 +438,39 @@ export function TaskCard({
             </div>
           )}
 
+          {onInsightAction && Array.isArray(task.insights) && task.insights.length > 0 && (
+            <div className={css.section}>
+              <div className={css.sectionLabel}>
+                {t('mem.section-label')}
+                <span className={css.sectionCount}>{task.insights.length}</span>
+              </div>
+              <ul className={css.memList}>
+                {(task.insights as TaskInsight[]).map((ins) => (
+                  <li key={ins.id} className={css.memRow}>
+                    <div className={css.memTitle}>
+                      <span className={css.kindBadge}>{insightKindLabel(ins.kind, t)}</span>
+                      <span>{ins.title || ins.id}</span>
+                      {ins.draft && <span className={`${css.badge} ${css.badgeDraft}`}>{t('mem.draft')}</span>}
+                    </div>
+                    <div className={css.memActs}>
+                      {ins.draft && (
+                        <Button variant="outline" size="sm" disabled={syncing} onClick={() => onInsightAction('confirm', ins.id)}>
+                          {t('mem.confirm')}
+                        </Button>
+                      )}
+                      <Button variant="outline" size="sm" disabled={syncing} onClick={() => onInsightAction('promote', ins.id)}>
+                        {t('mem.promote')}
+                      </Button>
+                      <Button variant="outline" size="sm" disabled={syncing} onClick={() => onInsightAction('delete', ins.id)}>
+                        {t('mem.delete')}
+                      </Button>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
           <div className={css.cardFooter}>
             <Button variant="outline" size="sm" disabled={isBound || syncing} onClick={onSwitch}>
               {t('task.switch')}

package/src/client/TaskPanel.module.css

@@ -280,6 +280,7 @@
   line-height: 20px;
   color: var(--dsw-alias-label-secondary);
   word-break: break-word;
+  white-space: pre-wrap;
 }
 .stepContentDone {
   color: var(--dsw-alias-label-dimmed);
@@ -430,7 +431,7 @@
   outline: 1px dashed var(--dsw-alias-border-l3, rgba(127,127,127,.4));
   outline-offset: 1px;
 }
-/* 行内编辑框（步骤/标题共用，单行 input） */
+/* 行内编辑框（步骤/标题共用，单行 input，仍被 MemoryView 表单复用） */
 .stepInput {
   flex: 1 1 auto;
   min-width: 0;
@@ -446,6 +447,33 @@
   padding: 0 5px;
 }
 
+/* 任务卡行内编辑器（textarea，按内容自适应增高；高度由 JS 测量写死，
+   内容超过 maxRows 行后内部滚动，避免长步骤/长任务名单行横向拖拽编辑） */
+.editorArea {
+  flex: 1 1 0%;
+  min-width: 0;
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-base, transparent);
+  border: 1px solid var(--dsw-alias-border-l3, rgba(127,127,127,.45));
+  border-radius: 5px;
+  padding: 2px 5px;
+  margin: 0;
+  resize: none;
+  overflow: hidden;
+  vertical-align: middle;
+  cursor: text;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.editorArea:focus {
+  outline: none;
+  border-color: var(--dsw-alias-border-l3, rgba(127,127,127,.6));
+}
+
 /* —— 步骤拖拽重排：源行半透明 —— */
 .stepDragging {
   opacity: 0.3;
@@ -625,3 +653,125 @@
 }
 
 /* —— header 防重叠 —— */
+
+/* ---- v0.5 Memory View（Task 草稿 / Project / Global 三作用域列表） ---- */
+.memoryPane {
+  padding: 8px 10px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  overflow: auto;
+  max-height: 480px;
+}
+.memToolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.memCount {
+  font-size: 12px;
+  opacity: 0.75;
+  font-weight: 600;
+}
+.memList {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.memRow {
+  border: 1px solid var(--dsw-border-weak, rgba(128, 128, 128, 0.25));
+  border-radius: 6px;
+  padding: 6px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  background: color-mix(in srgb, var(--dsw-bg-secondary, #f5f5f5) 45%, transparent);
+}
+.memRowArchived {
+  opacity: 0.55;
+}
+.memRowMain {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.memTitle {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  font-size: 13px;
+  line-height: 1.35;
+  word-break: break-word;
+}
+.kindBadge {
+  flex: none;
+  font-size: 11px;
+  border-radius: 4px;
+  padding: 0 5px;
+  line-height: 1.5;
+  background: var(--dsw-accent-soft, rgba(80, 120, 255, 0.15));
+  color: var(--dsw-accent, #4d6bfe);
+}
+.memMeta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+}
+.badge {
+  font-size: 11px;
+  border-radius: 4px;
+  padding: 0 5px;
+  line-height: 1.5;
+  background: color-mix(in srgb, var(--dsw-fg, #222) 8%, transparent);
+}
+.badgeDraft {
+  color: #b26a00;
+  background: rgba(255, 180, 0, 0.16);
+}
+.badgeArchived {
+  opacity: 0.8;
+}
+.memBody {
+  font-size: 12px;
+  opacity: 0.8;
+  word-break: break-word;
+}
+.memActs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+/* ---- v0.5 Memory View 新建表单 ---- */
+.memToolbarActs {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.memNew {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  border: 1px solid var(--dsw-border-weak, rgba(128, 128, 128, 0.25));
+  border-radius: 6px;
+  padding: 8px;
+}
+.memNewRow {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.memLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  opacity: 0.8;
+}
+.memNew select,
+.memNew textarea {
+  width: 100%;
+  box-sizing: border-box;
+}

package/src/client/TaskPanel.tsx

@@ -12,17 +12,20 @@ import {
   IconQuestionOutline14,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import { createTranslate, zh, en } from './locales.ts'
-import { useTaskData, useTaskDataActions, parseTaskPayloadText, type TaskStep } from './task-data-store.ts'
+import { useTaskData, useTaskDataActions, taskDataStore, parseTaskPayloadText, type TaskStep } from './task-data-store.ts'
 import { useTaskUI, useTaskUIActions } from './task-ui-store.ts'
 import { MiniBar, TaskCard } from './TaskComponents.tsx'
+import { MemoryView, type InsightScope } from './MemoryView.tsx'
 import css from './TaskPanel.module.css'
 
 const NS = 'dsh-project-memory'
 
 const STATUS_CYCLE = ['pending', 'in_progress', 'completed'] as const
+const VIEW_CYCLE = ['task', 'project', 'global'] as const
+type PanelView = (typeof VIEW_CYCLE)[number]
 
-function getT() {
-  const locale = (typeof navigator !== 'undefined' && navigator.language.startsWith('zh')) ? zh : en
+function getT(ctx: any) {
+  const locale = ctx?.locale?.getSnapshot?.()?.active === 'zh' ? zh : en
   return createTranslate(locale)
 }
 
@@ -65,7 +68,7 @@ export function TaskPanelEntry({ ctx }: { ctx: any }) {
 }
 
 function TaskPanelView({ ctx }: { ctx: any }) {
-  const t = getT()
+  const t = getT(ctx)
   const data = useTaskData()
   const ui = useTaskUI()
   const sessionId = useSessionId(ctx)
@@ -73,12 +76,22 @@ function TaskPanelView({ ctx }: { ctx: any }) {
   const [syncedAt, setSyncedAt] = useState(0)
   const [syncError, setSyncError] = useState<string | null>(null)
   const [showHints, setShowHints] = useState(true)
+  const [view, setView] = useState<PanelView>('task')
+  const cycleView = () => {
+    const i = VIEW_CYCLE.indexOf(view)
+    setView(VIEW_CYCLE[(i + 1) % VIEW_CYCLE.length])
+  }
+  const viewTitle =
+    view === 'task' ? t('panel.title')
+      : view === 'global' ? t('view.global')
+        : t('view.project')
 
   const dataActions = useTaskDataActions()
   const uiActions = useTaskUIActions()
 
-  const activeTasks = data.tasks.filter((task) => !task.archived)
-  const boundTask = data.boundTaskId ? data.tasks.find((task) => task.id === data.boundTaskId) ?? null : null
+  const tasks = Array.isArray(data.tasks) ? data.tasks : []
+  const activeTasks = tasks.filter((task) => !task.archived)
+  const boundTask = data.boundTaskId ? tasks.find((task) => task.id === data.boundTaskId) ?? null : null
 
   const applyPayload = (text?: string): boolean => {
     const parsed = parseTaskPayloadText(text)
@@ -118,7 +131,7 @@ function TaskPanelView({ ctx }: { ctx: any }) {
     try {
       const prevBoundId = data.boundTaskId
       await runLine('/tasks')
-      const newBoundId = useTaskData.getSnapshot().boundTaskId
+      const newBoundId = taskDataStore.getSnapshot().boundTaskId
       if (newBoundId && newBoundId !== prevBoundId) {
         await runLine(`/task switch ${newBoundId}`)
       }
@@ -137,6 +150,18 @@ function TaskPanelView({ ctx }: { ctx: any }) {
     }
   }
 
+  // v0.5：任务卡内联记忆动作（confirm/promote/delete 于 /insight task 层），随后刷新任务数据
+  const handleInsightTask = async (action: 'confirm' | 'promote' | 'delete', id: string): Promise<void> => {
+    if (syncing) return
+    setSyncing(true)
+    try {
+      await runLine(`/insight ${action} task ${id}`)
+      await refresh()
+    } finally {
+      setSyncing(false)
+    }
+  }
+
   const pushSteps = (taskId: string, steps: TaskStep[]): void => {
     void runLine(`/task todos ${JSON.stringify(steps.map((s) => ({ content: s.content, status: s.status })))}`)
   }
@@ -297,14 +322,46 @@ function TaskPanelView({ ctx }: { ctx: any }) {
           >
             <IconFolderOpenOutline16 className={css.headerIcon} />
           </Button>
-          <h2 className={css.headerTitle}>{t('panel.title')}</h2>
+          <h2 className={css.headerTitle}>{viewTitle}</h2>
         </div>
         <div className={css.headerRight}>
-          <span className={css.counts}>
-            {activeTasks.length > 0
-              ? `${t('panel.active')} ${activeTasks.length} · ${doneCount}/${activeTasks.length}`
-              : ''}
-          </span>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={cycleView}
+            aria-label={t('view.cycle')}
+            title={`${t('view.cycle')}（${view} → ${VIEW_CYCLE[(VIEW_CYCLE.indexOf(view) + 1) % VIEW_CYCLE.length]}）`}
+          >
+            {/* lucide notebook-tabs（视图循环图标） */}
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M2 6h4" />
+              <path d="M2 10h4" />
+              <path d="M2 14h4" />
+              <path d="M2 18h4" />
+              <rect width="16" height="20" x="4" y="2" rx="2" />
+              <path d="M15 2v20" />
+              <path d="M15 7h5" />
+              <path d="M15 12h5" />
+              <path d="M15 17h5" />
+            </svg>
+          </Button>
+          {view === 'task' && (
+            <span className={css.counts}>
+              {activeTasks.length > 0
+                ? `${t('panel.active')} ${activeTasks.length} · ${doneCount}/${activeTasks.length}`
+                : ''}
+            </span>
+          )}
           <Button
             variant="ghost"
             size="sm"
@@ -338,7 +395,9 @@ function TaskPanelView({ ctx }: { ctx: any }) {
       {!sessionId && <div className={css.notice}>{t('panel.no-session')}</div>}
       {syncError && <div className={css.notice}>{t('panel.sync-failed')}: {syncError}</div>}
 
-      {activeTasks.length === 0 ? (
+      {view !== 'task' ? (
+        <MemoryView ctx={ctx} sessionId={sessionId} scope={view as InsightScope} boundTaskId={data.boundTaskId} t={t} />
+      ) : activeTasks.length === 0 ? (
         <div className={css.emptyState}>
           <p className={css.emptyTitle}>{t('panel.empty')}</p>
           <p className={css.emptyDesc}>{t('panel.empty-desc')}</p>
@@ -364,6 +423,7 @@ function TaskPanelView({ ctx }: { ctx: any }) {
                 onEditStep={(index, value) => commitStepText(task.id, index, value)}
                 onCycleStatus={(index) => cycleStatus(task.id, index)}
                 onReorderSteps={(from, to) => reorderSteps(task.id, from, to)}
+                onInsightAction={(action, id) => void handleInsightTask(action, id)}
                 showHints={showHints}
                 syncing={syncing}
                 t={t}

package/src/client/client.ts

@@ -20,7 +20,7 @@ const NS = 'dsh-project-memory'
 export const name = NS
 
 /** Required client services: slots registry, session scopes, commands remote (data 通道). */
-export const inject = ['slots', 'sessions', 'remote', 'remote.commands']
+export const inject = ['slots', 'sessions', 'remote', 'remote.commands', 'locale']
 
 export function apply(ctx: any): void {
   const slots = ctx?.slots
@@ -38,9 +38,9 @@ export function apply(ctx: any): void {
       () => createElement(TaskPanelEntry, { ctx })
     ))
 
-    // 会话内 /tasks、/task 命令节点：按命令名 key 接管渲染，
-    // 替换内置大段文本卡片（文本含 JSON 载荷，只有面板需要它）。
-    const nodeKeys = ['tasks', 'task']
+    // 会话内 /tasks、/task、/insight 命令节点：按命令名 key 接管渲染，
+    // 替换内置大段文本卡片（文本含 JSON 载荷，只有面板需要它），避免载荷刷屏对话。
+    const nodeKeys = ['tasks', 'task', 'insight']
     for (const key of nodeKeys) {
       slots.inject('conversation.chat.commandview', () => slots.register(
         { name: 'conversation.chat.commandview', key },