bingocode 1.0.1 → 1.0.3

package/desktop/src/pages/ActiveSession.test.tsx

@@ -0,0 +1,181 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { act } from 'react'
+
+vi.mock('../components/chat/MessageList', () => ({
+  MessageList: () => <div data-testid="message-list" />,
+}))
+
+vi.mock('../components/chat/ChatInput', () => ({
+  ChatInput: () => <div data-testid="chat-input" />,
+}))
+
+vi.mock('../components/teams/TeamStatusBar', () => ({
+  TeamStatusBar: () => <div data-testid="team-status-bar" />,
+}))
+
+vi.mock('../components/chat/SessionTaskBar', () => ({
+  SessionTaskBar: () => <div data-testid="session-task-bar" />,
+}))
+
+import { ActiveSession } from './ActiveSession'
+import { useChatStore } from '../stores/chatStore'
+import { useCLITaskStore } from '../stores/cliTaskStore'
+import { useSessionStore } from '../stores/sessionStore'
+import { useTabStore } from '../stores/tabStore'
+import { useTeamStore } from '../stores/teamStore'
+
+afterEach(() => {
+  vi.useRealTimers()
+  useTabStore.setState({ tabs: [], activeTabId: null })
+  useSessionStore.setState({ sessions: [], activeSessionId: null, isLoading: false, error: null })
+  useChatStore.setState({ sessions: {} })
+  useTeamStore.setState({ teams: [], activeTeam: null, memberColors: new Map(), error: null })
+})
+
+describe('ActiveSession task polling', () => {
+  it('refreshes CLI tasks repeatedly while a turn is active', async () => {
+    vi.useFakeTimers()
+
+    const sessionId = 'polling-session'
+    const originalCliTaskState = useCLITaskStore.getState()
+    const fetchSessionTasks = vi.fn().mockResolvedValue(undefined)
+
+    useCLITaskStore.setState({
+      sessionId,
+      tasks: [],
+      fetchSessionTasks,
+    })
+
+    useSessionStore.setState({
+      sessions: [{
+        id: sessionId,
+        title: 'Polling Session',
+        createdAt: '2026-04-10T00:00:00.000Z',
+        modifiedAt: '2026-04-10T00:00:00.000Z',
+        messageCount: 1,
+        projectPath: '',
+        workDir: null,
+        workDirExists: true,
+      }],
+      activeSessionId: sessionId,
+      isLoading: false,
+      error: null,
+    })
+    useTabStore.setState({
+      tabs: [{ sessionId, title: 'Polling Session', type: 'session', status: 'idle' }],
+      activeTabId: sessionId,
+    })
+    useChatStore.setState({
+      sessions: {
+        [sessionId]: {
+          messages: [],
+          chatState: 'thinking',
+          connectionState: 'connected',
+          streamingText: '',
+          streamingToolInput: '',
+          activeToolUseId: null,
+          activeToolName: null,
+          activeThinkingId: null,
+          pendingPermission: null,
+          pendingComputerUsePermission: null,
+          tokenUsage: { input_tokens: 0, output_tokens: 0 },
+          elapsedSeconds: 0,
+          statusVerb: '',
+          slashCommands: [],
+          agentTaskNotifications: {},
+          elapsedTimer: null,
+        },
+      },
+    })
+
+    const { unmount } = render(<ActiveSession />)
+
+    expect(fetchSessionTasks).toHaveBeenCalledWith(sessionId)
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(2200)
+    })
+
+    expect(
+      fetchSessionTasks.mock.calls.filter(([currentSessionId]) => currentSessionId === sessionId),
+    ).toHaveLength(3)
+
+    unmount()
+    useCLITaskStore.setState(originalCliTaskState)
+  })
+
+  it('keeps member sessions interactive and skips leader task polling', () => {
+    const memberSessionId = 'team-member:security-reviewer@test-team'
+    const originalCliTaskState = useCLITaskStore.getState()
+    const fetchSessionTasks = vi.fn().mockResolvedValue(undefined)
+
+    useCLITaskStore.setState({
+      sessionId: null,
+      tasks: [],
+      fetchSessionTasks,
+    })
+
+    useTeamStore.setState({
+      teams: [],
+      activeTeam: {
+        name: 'test-team',
+        leadAgentId: 'team-lead@test-team',
+        leadSessionId: 'leader-session',
+        members: [
+          {
+            agentId: 'team-lead@test-team',
+            role: 'team-lead',
+            status: 'running',
+            sessionId: 'leader-session',
+          },
+          {
+            agentId: 'security-reviewer@test-team',
+            role: 'security-reviewer',
+            status: 'running',
+          },
+        ],
+      },
+      memberColors: new Map(),
+      error: null,
+    })
+
+    useTabStore.setState({
+      tabs: [{ sessionId: memberSessionId, title: 'security-reviewer', type: 'session', status: 'idle' }],
+      activeTabId: memberSessionId,
+    })
+
+    useChatStore.setState({
+      sessions: {
+        [memberSessionId]: {
+          messages: [],
+          chatState: 'thinking',
+          connectionState: 'connected',
+          streamingText: '',
+          streamingToolInput: '',
+          activeToolUseId: null,
+          activeToolName: null,
+          activeThinkingId: null,
+          pendingPermission: null,
+          pendingComputerUsePermission: null,
+          tokenUsage: { input_tokens: 0, output_tokens: 0 },
+          elapsedSeconds: 0,
+          statusVerb: '',
+          slashCommands: [],
+          agentTaskNotifications: {},
+          elapsedTimer: null,
+        },
+      },
+    })
+
+    const { queryByTestId, unmount } = render(<ActiveSession />)
+
+    expect(queryByTestId('chat-input')).toBeInTheDocument()
+    expect(queryByTestId('session-task-bar')).not.toBeInTheDocument()
+    expect(fetchSessionTasks).not.toHaveBeenCalled()
+
+    unmount()
+    useCLITaskStore.setState(originalCliTaskState)
+  })
+})

package/desktop/src/pages/ActiveSession.tsx

@@ -0,0 +1,219 @@
+import { useEffect, useMemo } from 'react'
+import { useTabStore } from '../stores/tabStore'
+import { useSessionStore } from '../stores/sessionStore'
+import { useChatStore } from '../stores/chatStore'
+import { useCLITaskStore } from '../stores/cliTaskStore'
+import { useTeamStore } from '../stores/teamStore'
+import { useTranslation } from '../i18n'
+import { MessageList } from '../components/chat/MessageList'
+import { ChatInput } from '../components/chat/ChatInput'
+import { ComputerUsePermissionModal } from '../components/chat/ComputerUsePermissionModal'
+import { TeamStatusBar } from '../components/teams/TeamStatusBar'
+import { SessionTaskBar } from '../components/chat/SessionTaskBar'
+
+const TASK_POLL_INTERVAL_MS = 1000
+
+export function ActiveSession() {
+  const activeTabId = useTabStore((s) => s.activeTabId)
+  const sessions = useSessionStore((s) => s.sessions)
+  const connectToSession = useChatStore((s) => s.connectToSession)
+  const sessionState = useChatStore((s) => activeTabId ? s.sessions[activeTabId] : undefined)
+  const pendingComputerUsePermission = sessionState?.pendingComputerUsePermission ?? null
+  const fetchSessionTasks = useCLITaskStore((s) => s.fetchSessionTasks)
+  const trackedTaskSessionId = useCLITaskStore((s) => s.sessionId)
+  const hasIncompleteTasks = useCLITaskStore((s) => s.tasks.some((task) => task.status !== 'completed'))
+  const chatState = sessionState?.chatState ?? 'idle'
+  const tokenUsage = sessionState?.tokenUsage ?? { input_tokens: 0, output_tokens: 0 }
+
+  const session = sessions.find((s) => s.id === activeTabId)
+  const memberInfo = useTeamStore((s) => activeTabId ? s.getMemberBySessionId(activeTabId) : null)
+  const activeTeam = useTeamStore((s) => s.activeTeam)
+  const isMemberSession = !!memberInfo
+
+  useEffect(() => {
+    if (activeTabId && !isMemberSession) {
+      connectToSession(activeTabId)
+    }
+  }, [activeTabId, isMemberSession, connectToSession])
+
+  useEffect(() => {
+    if (!activeTabId || isMemberSession) return
+
+    const shouldPollTasks =
+      chatState !== 'idle' ||
+      (trackedTaskSessionId === activeTabId && hasIncompleteTasks)
+
+    if (!shouldPollTasks) return
+
+    void fetchSessionTasks(activeTabId)
+
+    const timer = setInterval(() => {
+      void fetchSessionTasks(activeTabId)
+    }, TASK_POLL_INTERVAL_MS)
+
+    return () => clearInterval(timer)
+  }, [
+    activeTabId,
+    isMemberSession,
+    chatState,
+    trackedTaskSessionId,
+    hasIncompleteTasks,
+    fetchSessionTasks,
+  ])
+
+  const t = useTranslation()
+  const messages = sessionState?.messages ?? []
+  const streamingText = sessionState?.streamingText ?? ''
+  const isEmpty = messages.length === 0 && !streamingText
+
+  const isActive = chatState !== 'idle'
+  const totalTokens = tokenUsage.input_tokens + tokenUsage.output_tokens
+
+  const lastUpdated = useMemo(() => {
+    if (!session?.modifiedAt) return ''
+    const diff = Date.now() - new Date(session.modifiedAt).getTime()
+    if (diff < 60000) return t('session.timeJustNow')
+    if (diff < 3600000) return t('session.timeMinutes', { n: Math.floor(diff / 60000) })
+    if (diff < 86400000) return t('session.timeHours', { n: Math.floor(diff / 3600000) })
+    return t('session.timeDays', { n: Math.floor(diff / 86400000) })
+  }, [session?.modifiedAt, t])
+
+  if (!activeTabId) return null
+
+  return (
+    <div className="flex-1 flex flex-col relative overflow-hidden bg-background text-on-surface">
+      {isMemberSession && (
+        <div className="shrink-0 border-b border-[var(--color-border)] bg-[var(--color-surface-container)]">
+          <div className="mx-auto max-w-[860px] flex items-center justify-between gap-4 px-8 py-2">
+            <div className="min-w-0">
+              <div className="flex items-center gap-3">
+                {memberInfo?.status === 'running' && (
+                  <span className="flex h-2 w-2 rounded-full bg-[var(--color-warning)] animate-pulse-dot" />
+                )}
+                {memberInfo?.status === 'completed' && (
+                  <span className="material-symbols-outlined text-[14px] text-[var(--color-success)]" style={{ fontVariationSettings: "'FILL' 1" }}>check_circle</span>
+                )}
+                <span className="material-symbols-outlined text-[14px] text-[var(--color-text-tertiary)]">smart_toy</span>
+                <span className="text-sm font-semibold text-[var(--color-text-primary)]">
+                  {memberInfo?.role}
+                </span>
+                {activeTeam && (
+                  <span className="text-[10px] text-[var(--color-text-tertiary)]">
+                    @ {activeTeam.name}
+                  </span>
+                )}
+              </div>
+              <p className="mt-1 text-[11px] text-[var(--color-text-tertiary)]">
+                {t('teams.memberSessionHint')}
+              </p>
+            </div>
+            <button
+              onClick={() => {
+                if (activeTeam?.leadSessionId) {
+                  useTabStore.getState().openTab(
+                    activeTeam.leadSessionId,
+                    t('teams.leader'),
+                    'session',
+                  )
+                }
+              }}
+              disabled={!activeTeam?.leadSessionId}
+              className="flex shrink-0 items-center gap-1 text-xs font-medium text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors disabled:opacity-50 disabled:hover:text-[var(--color-text-secondary)]"
+            >
+              <span className="material-symbols-outlined text-[14px]">arrow_back</span>
+              {t('teams.backToLeader')}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {isEmpty ? (
+        <div className="flex flex-1 flex-col items-center justify-center p-8 pb-32">
+          <div className="flex max-w-md flex-col items-center text-center">
+            {isMemberSession ? (
+              <>
+                <span className="material-symbols-outlined text-[48px] mb-4 text-[var(--color-text-tertiary)]">smart_toy</span>
+                <p className="text-[var(--color-text-secondary)]">
+                  {memberInfo?.status === 'running'
+                    ? `${memberInfo.role} ${t('teams.working')}`
+                    : t('teams.noMessages')}
+                </p>
+              </>
+            ) : (
+              <>
+                <img src="/app-icon.jpg" alt="Claude Code Haha" className="mb-6 h-24 w-24 rounded-[22px]" style={{ boxShadow: 'var(--shadow-dropdown)' }} />
+                <h1 className="mb-2 text-3xl font-extrabold tracking-tight text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>
+                  {t('empty.title')}
+                </h1>
+                <p className="mx-auto max-w-xs text-[var(--color-text-secondary)]" style={{ fontFamily: 'var(--font-body)' }}>
+                  {t('empty.subtitle')}
+                </p>
+              </>
+            )}
+          </div>
+        </div>
+      ) : (
+        <>
+          {!isMemberSession && (
+            <div className="mx-auto flex w-full max-w-[860px] items-center border-b border-outline-variant/10 px-8 py-3">
+              <div className="flex-1">
+                <h1 className="text-lg font-bold font-headline text-on-surface leading-tight">
+                  {session?.title || t('session.untitled')}
+                </h1>
+                <div className="flex items-center gap-2 text-[10px] text-outline font-medium mt-1">
+                  {isActive && (
+                    <span className="flex items-center gap-1">
+                      <span className="w-1.5 h-1.5 rounded-full bg-[var(--color-success)] animate-pulse-dot" />
+                      {t('session.active')}
+                    </span>
+                  )}
+                  {totalTokens > 0 && (
+                    <>
+                      <span className="text-[var(--color-outline)]">·</span>
+                      <span>{totalTokens.toLocaleString()} t</span>
+                    </>
+                  )}
+                  {lastUpdated && (
+                    <>
+                      <span className="text-[var(--color-outline)]">·</span>
+                      <span>{t('session.lastUpdated', { time: lastUpdated })}</span>
+                    </>
+                  )}
+                  {session?.messageCount !== undefined && session.messageCount > 0 && (
+                    <>
+                      <span className="text-[var(--color-outline)]">·</span>
+                      <span>{t('session.messages', { count: session.messageCount })}</span>
+                    </>
+                  )}
+                </div>
+                {session?.workDirExists === false && (
+                  <div className="mt-2 inline-flex max-w-full items-center gap-2 rounded-lg border border-[var(--color-error)]/20 bg-[var(--color-error)]/8 px-3 py-1.5 text-[11px] text-[var(--color-error)]">
+                    <span className="material-symbols-outlined text-[14px]">warning</span>
+                    <span className="truncate">
+                      {t('session.workspaceUnavailable', { dir: session.workDir || 'directory no longer exists' })}
+                    </span>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          <MessageList />
+        </>
+      )}
+
+      {!isMemberSession && <SessionTaskBar />}
+
+      <TeamStatusBar />
+
+      <ChatInput variant={isEmpty && !isMemberSession ? 'hero' : 'default'} />
+
+      {!isMemberSession && activeTabId ? (
+        <ComputerUsePermissionModal
+          sessionId={activeTabId}
+          request={pendingComputerUsePermission?.request ?? null}
+        />
+      ) : null}
+    </div>
+  )
+}