Merge pull request #512 from miyaoka/fix/sidebar-task-relative-time

fix(sidebar): task の相対時刻を lastActivityAt 基準の adaptive setTimeout に置き換え

Author: miyaoka

apps/renderer/eslint.config.ts

@@ -39,7 +39,9 @@ export default defineConfigWithVueTs(
         },
       ],
 
-      // vue: reactive() を禁止。ref() のみ使用する（issue #501）
+      // vue: reactive() / watchEffect() を禁止
+      // - reactive: ref() のみ使用する（issue #501）
+      // - watchEffect: 依存が暗黙的で誤発火 / 漏れの原因になるため watch() を使う
       "no-restricted-imports": [
         "error",
         {
@@ -49,6 +51,11 @@ export default defineConfigWithVueTs(
               importNames: ["reactive"],
               message: "Use ref() instead. See issue #501.",
             },
+            {
+              name: "vue",
+              importNames: ["watchEffect"],
+              message: "Use watch() with explicit sources instead.",
+            },
           ],
         },
       ],

apps/renderer/src/features/changes/ChangesPane.vue

@@ -36,7 +36,7 @@ Changed files tree. Shows HEAD vs working directory by default, or a selected co
 <script setup lang="ts">
 import type { GitCommit, GitFileChange } from "@gozd/proto";
 import { tryCatch } from "@gozd/shared";
-import { computed, ref, watch, watchEffect } from "vue";
+import { computed, ref, watch } from "vue";
 import { useNotificationStore } from "../../shared/notification";
 import { rpcGitCommitFiles, useGitGraphStore } from "../git-graph";
 import {
@@ -152,15 +152,19 @@ const fileCount = computed(() => fileChanges.value.length);
  */
 const tree = ref<ChangesTreeNode[]>([]);
 
-watchEffect(() => {
-  const result = tryCatch(() => buildChangesTree(fileChanges.value));
-  if (result.ok) {
-    tree.value = result.value;
-    return;
-  }
-  tree.value = [];
-  notify.error("Failed to build changes tree", result.error);
-});
+watch(
+  fileChanges,
+  (changes) => {
+    const result = tryCatch(() => buildChangesTree(changes));
+    if (result.ok) {
+      tree.value = result.value;
+      return;
+    }
+    tree.value = [];
+    notify.error("Failed to build changes tree", result.error);
+  },
+  { immediate: true },
+);
 
 /** 折りたたみ中フォルダの fullPath 集合（デフォルトは全展開） */
 const collapsedFolders = ref<Set<string>>(new Set());

apps/renderer/src/features/git-graph/GitGraphPane.vue

@@ -16,16 +16,7 @@ import type { GitCommit, GitPullRequest } from "@gozd/proto";
 import { tryCatch } from "@gozd/shared";
 import { useElementSize, useIntervalFn } from "@vueuse/core";
 import { storeToRefs } from "pinia";
-import {
-  computed,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  ref,
-  useTemplateRef,
-  watch,
-  watchEffect,
-} from "vue";
+import { computed, nextTick, onMounted, onUnmounted, ref, useTemplateRef, watch } from "vue";
 import { useNotificationStore } from "../../shared/notification";
 import { useRepoStore } from "../../shared/repo";
 import { onMessage } from "../../shared/rpc";
@@ -538,18 +529,23 @@ const detailWidth = ref(320);
 const detailOpen = ref(true);
 
 // コンテナ幅縮小時に detailWidth をクランプし、収まらなければ自動で閉じる
-// rootWidth が 0（マウント前）のときはスキップ
-watchEffect(() => {
-  if (!detailOpen.value || rootWidth.value === 0) return;
-  const available = rootWidth.value - GRAPH_LIST_MIN_WIDTH - DETAIL_HANDLE_WIDTH;
-  if (available < DETAIL_MIN_WIDTH) {
-    detailOpen.value = false;
-    return;
-  }
-  if (detailWidth.value > available) {
-    detailWidth.value = Math.max(DETAIL_MIN_WIDTH, available);
-  }
-});
+// rootWidth が 0（マウント前）のときはスキップ。
+// 書き換え対象の detailOpen / detailWidth は source に含めない
+watch(
+  rootWidth,
+  (width) => {
+    if (!detailOpen.value || width === 0) return;
+    const available = width - GRAPH_LIST_MIN_WIDTH - DETAIL_HANDLE_WIDTH;
+    if (available < DETAIL_MIN_WIDTH) {
+      detailOpen.value = false;
+      return;
+    }
+    if (detailWidth.value > available) {
+      detailWidth.value = Math.max(DETAIL_MIN_WIDTH, available);
+    }
+  },
+  { immediate: true },
+);
 
 const graphListRef = ref<HTMLElement | null>(null);
 const scrollContainer = ref<HTMLElement | null>(null);

apps/renderer/src/features/layout/MainLayout.vue

@@ -16,7 +16,7 @@
 
 <script setup lang="ts">
 import { useWindowSize } from "@vueuse/core";
-import { computed, onUnmounted, ref, useTemplateRef, watch, watchEffect } from "vue";
+import { computed, onUnmounted, ref, useTemplateRef, watch } from "vue";
 import { useCommandRegistry, useContextKeys } from "../../shared/command";
 import { useRepoStore } from "../../shared/repo";
 import { GitGraphPane } from "../git-graph";
@@ -124,12 +124,16 @@ const maxPreviewWidth = computed(() => {
   );
 });
 
-// ウィンドウ縮小時に Preview 幅をクランプ
-watchEffect(() => {
-  if (previewWidth.value > maxPreviewWidth.value) {
-    previewWidth.value = Math.max(PREVIEW_MIN_WIDTH, maxPreviewWidth.value);
-  }
-});
+// ウィンドウ縮小時に Preview 幅をクランプ。書き換え対象 previewWidth は source に含めない
+watch(
+  maxPreviewWidth,
+  (maxW) => {
+    if (previewWidth.value > maxW) {
+      previewWidth.value = Math.max(PREVIEW_MIN_WIDTH, maxW);
+    }
+  },
+  { immediate: true },
+);
 
 /** ドラッグ開始時に popover 左側の空きスペースを返す（Navigator + 開閉ボタン分を除く） */
 const getPreviewBeforeSize = () =>
@@ -140,9 +144,13 @@ const getPreviewAfterSize = () =>
   previewPopoverRef.value?.getBoundingClientRect().width ?? previewWidth.value;
 
 // previewVisible context key を実際の表示状態と同期
-watchEffect(() => {
-  contextKeys.set("previewVisible", previewOpen.value);
-});
+watch(
+  previewOpen,
+  (open) => {
+    contextKeys.set("previewVisible", open);
+  },
+  { immediate: true },
+);
 
 /** :popover-open でガードして二重呼び出し例外を防止 */
 function openPreview() {
@@ -185,13 +193,18 @@ function getCenterTerminalHeight(): number {
   return centerTerminalRef.value?.offsetHeight ?? TERMINAL_MIN_HEIGHT;
 }
 
-// ウィンドウ縦縮小時に gitGraphHeight をクランプ（Terminal が潰れるのを防ぐ）
-watchEffect(() => {
-  const maxGitGraph = windowHeight.value - TERMINAL_MIN_HEIGHT - HANDLE_WIDTH;
-  if (gitGraphHeight.value > maxGitGraph) {
-    gitGraphHeight.value = Math.max(GIT_GRAPH_MIN_HEIGHT, maxGitGraph);
-  }
-});
+// ウィンドウ縦縮小時に gitGraphHeight をクランプ（Terminal が潰れるのを防ぐ）。
+// 書き換え対象 gitGraphHeight は source に含めない
+watch(
+  windowHeight,
+  (h) => {
+    const maxGitGraph = h - TERMINAL_MIN_HEIGHT - HANDLE_WIDTH;
+    if (gitGraphHeight.value > maxGitGraph) {
+      gitGraphHeight.value = Math.max(GIT_GRAPH_MIN_HEIGHT, maxGitGraph);
+    }
+  },
+  { immediate: true },
+);
 </script>
 
 <template>

apps/renderer/src/features/navigator/NavigatorPane.vue

@@ -12,7 +12,7 @@ Filer（上）と Changes（下）を垂直分割で表示するコンテナ。
 
 <script setup lang="ts">
 import { useElementSize } from "@vueuse/core";
-import { ref, useTemplateRef, watchEffect } from "vue";
+import { ref, useTemplateRef, watch } from "vue";
 import { useRepoStore } from "../../shared/repo";
 import { ChangesPane } from "../changes";
 import { FilerPane } from "../filer";
@@ -32,14 +32,20 @@ const { height: containerHeight } = useElementSize(containerRef);
 const changesHeight = ref(360);
 
 // コンテナ縮小時に changesHeight をクランプ（Filer が潰れるのを防ぐ）
-// useElementSize は mount 直後 0 を返すため、計測前は clamp をスキップする
-watchEffect(() => {
-  if (containerHeight.value <= 0) return;
-  const maxChanges = containerHeight.value - FILER_MIN_HEIGHT - HANDLE_HEIGHT;
-  if (changesHeight.value > maxChanges) {
-    changesHeight.value = Math.max(CHANGES_MIN_HEIGHT, maxChanges);
-  }
-});
+// useElementSize は mount 直後 0 を返すため、計測前は clamp をスキップする。
+// watch source は外因（containerHeight）だけにする。changesHeight は書き換え対象なので
+// source に含めると再帰発火経路が混入する（user resize は別ロジックでクランプ済み）。
+watch(
+  containerHeight,
+  (h) => {
+    if (h <= 0) return;
+    const maxChanges = h - FILER_MIN_HEIGHT - HANDLE_HEIGHT;
+    if (changesHeight.value > maxChanges) {
+      changesHeight.value = Math.max(CHANGES_MIN_HEIGHT, maxChanges);
+    }
+  },
+  { immediate: true },
+);
 
 /** Filer ペインの DOM 実測高さ（flex-1 のため v-model 不可） */
 function getFilerHeight(): number {

apps/renderer/src/features/sidebar/SidebarPane.vue

@@ -30,7 +30,6 @@ import { move } from "@dnd-kit/helpers";
 import { DragDropProvider } from "@dnd-kit/vue";
 import type { Task, WorktreeEntry } from "@gozd/proto";
 import { tryCatch } from "@gozd/shared";
-import { useIntervalFn } from "@vueuse/core";
 import { computed, ref } from "vue";
 import { useNotificationStore } from "../../shared/notification";
 import { useRepoStore } from "../../shared/repo";
@@ -61,13 +60,6 @@ const { isCreatingFor, handleWorktreeSelect, addWorktree, handleWorktreeRemove }
     showConfirm,
   });
 
-// --- 経過時間表示用の現在時刻 ---
-
-const now = ref(Date.now());
-useIntervalFn(() => {
-  now.value = Date.now();
-}, 1000);
-
 // --- メニュー ---
 
 const sidebarMenuRef = ref<InstanceType<typeof SidebarMenu>>();
@@ -234,7 +226,6 @@ const activeRootWorktree = computed(() => {
           :edit-mode="editMode"
           :active-dir="worktreeStore.dir"
           :is-creating="isCreatingFor(rootDir)"
-          :now="now"
           :get-resumeable-session-count="terminalStore.getResumeableSessionCount"
           :get-terminal-count="getTerminalCount"
           :get-focused-pty-id="getFocusedPtyId"

apps/renderer/src/features/sidebar/features/repo/RepoSection.vue

@@ -33,7 +33,6 @@ const props = defineProps<{
   editMode: boolean;
   activeDir: string | undefined;
   isCreating: boolean;
-  now: number;
   getResumeableSessionCount: (dir: string) => number;
   getTerminalCount: (dir: string) => number;
   getFocusedPtyId: (dir: string) => number | undefined;
@@ -145,7 +144,6 @@ function onHeaderClick() {
         :focused-pty-id="getFocusedPtyId(wt.path)"
         :terminal-count="getTerminalCount(wt.path)"
         :resumeable-session-count="getResumeableSessionCount(wt.path)"
-        :now="now"
         @select-wt="emit('selectWt', $event)"
         @select-task="(w, t) => emit('selectTask', w, t)"
         @open-menu="(anchorEl, wt2) => emit('openWorktreeMenu', anchorEl, wt2, rootDir)"

apps/renderer/src/features/sidebar/features/worktree/TaskRow.vue

@@ -8,17 +8,20 @@ WCAG 1.4.1 準拠で色 + 形 + aria-label の 3 軸で状態を表現する。
 
 ## 相対時刻の起点
 
-- working → lastActivityAt
-- それ以外 → enteredAt
-- live PTY 無し（resumable） → undefined（時刻表示なし）
+`status.lastActivityAt`（Claude が最後に動いた時刻）を全 state で使う。state 遷移時刻ではなく
+活動時刻を基準にすることで、working → idle / asking などで "now" にリセットされない。
+status 不在（resumable）時は `task.createdAt` にフォールバックする。算出ロジックは
+`taskBaseTime.resolveTaskBaseTime` を SSOT として使う。
 </doc>
 
 <script setup lang="ts">
 import type { Task } from "@gozd/proto";
 import { computed } from "vue";
 import type { ClaudeStatus } from "../../../terminal";
 import { extractAskingText, extractFirstSentence } from "../../../voicevox";
-import { formatRelativeTime, taskDisplayTitle } from "../../utils";
+import { resolveTaskBaseTime } from "../../taskBaseTime";
+import { useRelativeTime } from "../../useRelativeTime";
+import { taskDisplayTitle } from "../../utils";
 
 type StateKind = "asking" | "working" | "done" | "idle" | "resumable";
 
@@ -59,7 +62,6 @@ const props = defineProps<{
   task: Task;
   status: ClaudeStatus | undefined;
   active: boolean;
-  now: number;
 }>();
 
 const emit = defineEmits<{
@@ -70,17 +72,9 @@ const stateKind = computed<StateKind>(() => props.status?.state ?? "resumable");
 const visual = computed(() => STATE_VISUAL[stateKind.value]);
 const title = computed(() => taskDisplayTitle(props.task.body));
 
-/** 相対時刻の基準時刻。resumable / status 不在のときは時刻表示なし */
-const baseTime = computed<number | undefined>(() => {
-  const status = props.status;
-  if (status === undefined) return undefined;
-  if (status.state === "working") return status.lastActivityAt;
-  return status.enteredAt;
-});
+const baseTime = computed<number | undefined>(() => resolveTaskBaseTime(props.status, props.task));
 
-const relativeTime = computed(() =>
-  baseTime.value === undefined ? "" : formatRelativeTime(baseTime.value, props.now),
-);
+const relativeTime = useRelativeTime(baseTime);
 
 const bubbleText = computed<string | undefined>(() => {
   const status = props.status;

apps/renderer/src/features/sidebar/features/worktree/WtCard.vue

@@ -22,6 +22,7 @@ import { computed } from "vue";
 import type { ClaudeStatus } from "../../../terminal";
 import { useTerminalStore } from "../../../terminal";
 import { computeStatusIcons, StatusIcons } from "../../../worktree";
+import { resolveTaskBaseTime } from "../../taskBaseTime";
 import { branchLabel as resolveBranchLabel, hasChanges } from "../../utils";
 import TaskRow from "./TaskRow.vue";
 
@@ -41,7 +42,6 @@ const props = defineProps<{
   focusedPtyId: number | undefined;
   terminalCount: number;
   resumeableSessionCount: number;
-  now: number;
 }>();
 
 const emit = defineEmits<{
@@ -83,23 +83,17 @@ function resolveStateKey(status: ClaudeStatus | undefined, ptyId: number | undef
   return "idle";
 }
 
-function resolveBaseTime(status: ClaudeStatus | undefined, fallback: number): number {
-  if (status === undefined) return fallback;
-  if (status.state === "working") return status.lastActivityAt;
-  return status.enteredAt;
-}
-
 const tasksWithStatus = computed<TaskWithStatus[]>(() => {
   const list = props.wt.tasks.map<TaskWithStatus>((task) => {
     const status = terminalStore.getClaudeStatusBySessionId(task.id);
     const ptyId = terminalStore.getPtyIdBySessionId(task.id);
-    const fallback = Date.parse(task.createdAt);
     return {
       task,
       status,
       ptyId,
       stateKey: resolveStateKey(status, ptyId),
-      baseTime: resolveBaseTime(status, Number.isNaN(fallback) ? 0 : fallback),
+      // sort 用なので createdAt パース失敗時 (proto 契約違反) は 0 に倒す
+      baseTime: resolveTaskBaseTime(status, task) ?? 0,
     };
   });
   return list.sort((a, b) => {
@@ -188,7 +182,6 @@ function onHeaderClick() {
         :task="entry.task"
         :status="entry.status"
         :active="focusedTaskId === entry.task.id"
-        :now="now"
         @select="(t) => emit('selectTask', wt, t)"
       />
     </div>