@yancyyu/openhermit 1.5.8

package/src/renderer/components/team/members/MemberDetailDialog.tsx

@@ -0,0 +1,309 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { Button } from '@renderer/components/ui/button';
+import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@renderer/components/ui/dialog';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@renderer/components/ui/tabs';
+import { useMemberStats } from '@renderer/hooks/useMemberStats';
+import { useStore } from '@renderer/store';
+import { selectMemberMessagesForTeamMember } from '@renderer/store/slices/teamSlice';
+import {
+  buildMemberLaunchDiagnosticsPayload,
+  getMemberLaunchDiagnosticsErrorMessage,
+  hasMemberLaunchDiagnosticsDetails,
+  hasMemberLaunchDiagnosticsError,
+} from '@renderer/utils/memberLaunchDiagnostics';
+import {
+  getRuntimeMemorySourceLabel,
+  resolveMemberRuntimeSummary,
+} from '@renderer/utils/memberRuntimeSummary';
+import { isLeadMember } from '@shared/utils/leadDetection';
+import {
+  BarChart3,
+  FolderOpen,
+  Loader2,
+} from 'lucide-react';
+
+import { buildMemberActivityEntries } from './memberActivityEntries';
+import { MemberDetailHeader } from './MemberDetailHeader';
+import { MemberDetailStats } from './MemberDetailStats';
+import { type MemberActivityFilter, type MemberDetailTab } from './memberDetailTypes';
+import { MemberLaunchDiagnosticsButton } from './MemberLaunchDiagnosticsButton';
+import { MemberMessagesTab } from './MemberMessagesTab';
+import { MemberStatsTab } from './MemberStatsTab';
+import { MemberTasksTab } from './MemberTasksTab';
+import { MemberWorkspaceTab } from './MemberWorkspaceTab';
+
+import type { TeamLaunchParams } from '@renderer/store/slices/teamSlice';
+import type {
+  LeadActivityState,
+  MemberSpawnStatusEntry,
+  ResolvedTeamMember,
+  TeamAgentRuntimeEntry,
+  TeamTaskWithKanban,
+} from '@shared/types';
+
+interface MemberDetailDialogProps {
+  open: boolean;
+  member: ResolvedTeamMember | null;
+  teamName: string;
+  members: ResolvedTeamMember[];
+  tasks: TeamTaskWithKanban[];
+  initialTab?: MemberDetailTab;
+  initialActivityFilter?: MemberActivityFilter;
+  isTeamAlive?: boolean;
+  isTeamProvisioning?: boolean;
+  isLaunchSettling?: boolean;
+  leadActivity?: LeadActivityState;
+  spawnEntry?: MemberSpawnStatusEntry;
+  runtimeEntry?: TeamAgentRuntimeEntry;
+  runtimeRunId?: string | null;
+  launchParams?: TeamLaunchParams;
+  onClose: () => void;
+  onSendMessage: () => void;
+  onAssignTask: () => void;
+  onTaskClick: (task: TeamTaskWithKanban) => void;
+  onRemoveMember?: () => void;
+  onRestartMember?: (memberName: string) => Promise<void> | void;
+  onUpdateRole?: (memberName: string, role: string | undefined) => Promise<void> | void;
+  updatingRole?: boolean;
+  onViewMemberChanges?: (memberName: string, filePath?: string) => void;
+}
+
+export const MemberDetailDialog = ({
+  open,
+  member,
+  teamName,
+  members,
+  tasks,
+  initialTab = 'tasks',
+  initialActivityFilter = 'all',
+  isTeamAlive,
+  isTeamProvisioning,
+  isLaunchSettling,
+  leadActivity,
+  spawnEntry,
+  runtimeEntry,
+  runtimeRunId,
+  launchParams,
+  onClose,
+  onSendMessage,
+  onAssignTask,
+  onTaskClick,
+  onRemoveMember,
+  onRestartMember,
+  onUpdateRole,
+  updatingRole,
+  onViewMemberChanges,
+}: MemberDetailDialogProps): React.JSX.Element | null => {
+  const memberTasks = useMemo(
+    () => (member ? tasks.filter((t) => t.owner === member.name) : []),
+    [tasks, member]
+  );
+  const memberMessages = useStore((state) =>
+    selectMemberMessagesForTeamMember(state, teamName, member?.name ?? null)
+  );
+  const memberActivityCount = useMemo(() => {
+    if (!member) {
+      return 0;
+    }
+    return buildMemberActivityEntries({
+      teamName,
+      memberName: member.name,
+      members,
+      tasks,
+      messages: memberMessages,
+    }).length;
+  }, [member, memberMessages, members, tasks, teamName]);
+
+  const inProgressTasks = useMemo(
+    () => memberTasks.filter((t) => t.status === 'in_progress').length,
+    [memberTasks]
+  );
+
+  const completedTasks = useMemo(
+    () => memberTasks.filter((t) => t.status === 'completed').length,
+    [memberTasks]
+  );
+
+  const [activeTab, setActiveTab] = useState<MemberDetailTab>(initialTab);
+  const [restarting, setRestarting] = useState(false);
+  const [restartError, setRestartError] = useState<string | null>(null);
+
+  const runtimeSummary = useMemo(
+    () =>
+      member
+        ? resolveMemberRuntimeSummary(member, launchParams, spawnEntry, runtimeEntry)
+        : undefined,
+    [launchParams, member, runtimeEntry, spawnEntry]
+  );
+  const memorySourceLabel = getRuntimeMemorySourceLabel(runtimeEntry);
+  const restartInFlight =
+    spawnEntry?.launchState === 'starting' ||
+    spawnEntry?.launchState === 'runtime_pending_bootstrap' ||
+    spawnEntry?.launchState === 'runtime_pending_permission';
+  const launchDiagnosticsPayload = useMemo(
+    () =>
+      member
+        ? buildMemberLaunchDiagnosticsPayload({
+            teamName,
+            runId: runtimeRunId,
+            memberName: member.name,
+            spawnEntry,
+            runtimeEntry,
+          })
+        : null,
+    [member, runtimeEntry, runtimeRunId, spawnEntry, teamName]
+  );
+  const showCopyDiagnostics =
+    launchDiagnosticsPayload != null &&
+    hasMemberLaunchDiagnosticsError(launchDiagnosticsPayload) &&
+    hasMemberLaunchDiagnosticsDetails(launchDiagnosticsPayload);
+  const launchErrorMessage = launchDiagnosticsPayload
+    ? getMemberLaunchDiagnosticsErrorMessage(launchDiagnosticsPayload)
+    : undefined;
+
+  useEffect(() => {
+    if (!open || !member) {
+      return;
+    }
+    setActiveTab(initialTab);
+    setRestartError(null);
+    setRestarting(false);
+  }, [initialTab, member, open]);
+
+  const {
+    stats: memberStats,
+    loading: statsLoading,
+    error: statsError,
+  } = useMemberStats(teamName, member?.name ?? null);
+
+  const totalTokens = memberStats ? memberStats.inputTokens + memberStats.outputTokens : null;
+
+  if (!member) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={(nextOpen) => !nextOpen && onClose()}>
+      <DialogContent className="min-w-0 sm:max-w-4xl">
+        <div className="flex items-start gap-4">
+          <DialogHeader className="shrink-0">
+            <MemberDetailHeader
+              member={member}
+              runtimeSummary={runtimeSummary}
+              isTeamAlive={isTeamAlive}
+              isTeamProvisioning={isTeamProvisioning}
+              leadActivity={isLeadMember(member) ? leadActivity : undefined}
+              spawnStatus={spawnEntry?.status}
+              spawnLaunchState={spawnEntry?.launchState}
+              spawnLivenessSource={spawnEntry?.livenessSource}
+              spawnRuntimeAlive={spawnEntry?.runtimeAlive}
+              runtimeEntry={runtimeEntry}
+              isLaunchSettling={isLaunchSettling}
+              onUpdateRole={
+                onUpdateRole ? (newRole) => onUpdateRole(member.name, newRole) : undefined
+              }
+              updatingRole={updatingRole}
+            />
+          </DialogHeader>
+
+          <MemberDetailStats
+            totalTasks={memberTasks.length}
+            inProgressTasks={inProgressTasks}
+            totalTokens={totalTokens}
+            statsLoading={statsLoading}
+            statsComputedAt={memberStats?.computedAt}
+            onTabChange={setActiveTab}
+          />
+        </div>
+
+        <Tabs
+          value={activeTab}
+          onValueChange={(v) => setActiveTab(v as MemberDetailTab)}
+          className="min-w-0 overflow-hidden"
+        >
+          <TabsList className="w-full">
+            <TabsTrigger value="tasks" className="flex-1 gap-1.5">
+              Tasks
+              {memberTasks.length > 0 && (
+                <span className="rounded-full bg-[var(--color-surface)] px-1.5 text-[10px]">
+                  {memberTasks.length}
+                </span>
+              )}
+            </TabsTrigger>
+            <TabsTrigger value="workspace" className="flex-1 gap-1.5">
+              <FolderOpen size={12} />
+              Workspace
+            </TabsTrigger>
+            <TabsTrigger value="activity" className="flex-1 gap-1.5">
+              Activity
+              {memberActivityCount > 0 && (
+                <span className="rounded-full bg-[var(--color-surface)] px-1.5 text-[10px]">
+                  {memberActivityCount}
+                </span>
+              )}
+            </TabsTrigger>
+            <TabsTrigger value="stats" className="flex-1 gap-1.5">
+              <BarChart3 size={12} />
+              Stats
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="tasks">
+            <MemberTasksTab tasks={memberTasks} onTaskClick={onTaskClick} />
+          </TabsContent>
+          <TabsContent value="workspace">
+            <MemberWorkspaceTab
+              teamName={teamName}
+              memberName={member.name}
+              onFileClick={(filePath) => onViewMemberChanges?.(member.name, filePath)}
+              onViewAllChanges={() => onViewMemberChanges?.(member.name)}
+            />
+          </TabsContent>
+          <TabsContent value="activity">
+            <MemberMessagesTab
+              teamName={teamName}
+              memberName={member.name}
+              members={members}
+              tasks={tasks}
+              initialFilter={initialActivityFilter}
+              onTaskClick={onTaskClick}
+            />
+          </TabsContent>
+          <TabsContent value="stats">
+            <MemberStatsTab
+              teamName={teamName}
+              memberName={member.name}
+              prefetchedStats={memberStats}
+              prefetchedLoading={statsLoading}
+              prefetchedError={statsError}
+              onFileClick={(filePath) => onViewMemberChanges?.(member.name, filePath)}
+              onShowAllFiles={() => onViewMemberChanges?.(member.name)}
+            />
+          </TabsContent>
+        </Tabs>
+
+        <DialogFooter>
+          {restartError ? (
+            <div className="text-xs text-red-400">{restartError}</div>
+          ) : launchErrorMessage ? (
+            <div className="flex min-w-0 items-center gap-2 text-xs text-red-400">
+              <span className="min-w-0 truncate" title={launchErrorMessage}>
+                {launchErrorMessage}
+              </span>
+              {launchDiagnosticsPayload && showCopyDiagnostics ? (
+                <MemberLaunchDiagnosticsButton
+                  payload={launchDiagnosticsPayload}
+                  label="复制诊断信息"
+                  className="h-auto shrink-0 gap-1.5 px-2 py-1 text-red-300 hover:bg-red-500/10 hover:text-red-200"
+                />
+              ) : null}
+            </div>
+          ) : runtimeEntry?.pid ? (
+            <div className="text-xs text-[var(--color-text-muted)]">
+              PID {runtimeEntry.pid}
+              {memorySourceLabel ? ` · ${memorySourceLabel}` : ''}
+            </div>
+          ) : null}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/renderer/components/team/members/MemberDetailHeader.tsx

@@ -0,0 +1,183 @@
+import { useMemo, useState } from 'react';
+
+import { Badge } from '@renderer/components/ui/badge';
+import { DialogDescription, DialogTitle } from '@renderer/components/ui/dialog';
+import { getTeamColorSet } from '@renderer/constants/teamColors';
+import { useStore } from '@renderer/store';
+import { selectResolvedMembersForTeamName } from '@renderer/store/slices/teamSlice';
+import { formatAgentRole } from '@renderer/utils/formatAgentRole';
+import {
+  agentAvatarUrl,
+  buildMemberAvatarMap,
+  buildMemberLaunchPresentation,
+  displayMemberName,
+} from '@renderer/utils/memberHelpers';
+import { isLeadMember } from '@shared/utils/leadDetection';
+import { Pencil } from 'lucide-react';
+
+import { MemberRoleEditor } from './MemberRoleEditor';
+
+import type {
+  LeadActivityState,
+  MemberLaunchState,
+  MemberSpawnLivenessSource,
+  MemberSpawnStatus,
+  ResolvedTeamMember,
+  TeamAgentRuntimeEntry,
+} from '@shared/types';
+
+interface MemberDetailHeaderProps {
+  member: ResolvedTeamMember;
+  runtimeSummary?: string;
+  runtimeEntry?: TeamAgentRuntimeEntry;
+  isTeamAlive?: boolean;
+  isTeamProvisioning?: boolean;
+  leadActivity?: LeadActivityState;
+  spawnStatus?: MemberSpawnStatus;
+  spawnLaunchState?: MemberLaunchState;
+  spawnLivenessSource?: MemberSpawnLivenessSource;
+  spawnRuntimeAlive?: boolean;
+  isLaunchSettling?: boolean;
+  onUpdateRole?: (newRole: string | undefined) => Promise<void> | void;
+  updatingRole?: boolean;
+}
+
+export const MemberDetailHeader = ({
+  member,
+  runtimeSummary,
+  runtimeEntry,
+  isTeamAlive,
+  isTeamProvisioning,
+  leadActivity,
+  spawnStatus,
+  spawnLaunchState,
+  spawnLivenessSource,
+  spawnRuntimeAlive,
+  isLaunchSettling,
+  onUpdateRole,
+  updatingRole,
+}: MemberDetailHeaderProps): React.JSX.Element => {
+  const [editing, setEditing] = useState(false);
+  const selectedTeamName = useStore((s) => s.selectedTeamName);
+  const teamMembers = useStore((s) =>
+    selectedTeamName ? selectResolvedMembersForTeamName(s, selectedTeamName) : []
+  );
+  const avatarMap = useMemo(() => buildMemberAvatarMap(teamMembers), [teamMembers]);
+
+  // NOTE: lead context display disabled — usage formula is inaccurate
+  // const teamName = useStore((s) => s.selectedTeamName);
+  // const leadContext = useStore((s) =>
+  //   member.agentType === 'lead' && teamName ? s.leadContextByTeam[teamName] : undefined
+  // );
+
+  const colors = getTeamColorSet(member.color ?? '');
+  const role = member.role || formatAgentRole(member.agentType);
+  const launchPresentation = buildMemberLaunchPresentation({
+    member,
+    spawnStatus,
+    spawnLaunchState,
+    spawnLivenessSource,
+    spawnRuntimeAlive,
+    runtimeEntry,
+    runtimeAdvisory: member.runtimeAdvisory,
+    isLaunchSettling,
+    isTeamAlive,
+    isTeamProvisioning,
+    leadActivity,
+  });
+  const presenceLabel = launchPresentation.presenceLabel;
+  const launchVisualState = launchPresentation.launchVisualState;
+  const launchStatusLabel = launchPresentation.launchStatusLabel;
+  const dotClass = launchPresentation.dotClass;
+  const runtimeAdvisoryLabel = launchPresentation.runtimeAdvisoryLabel;
+  const runtimeAdvisoryTitle = launchPresentation.runtimeAdvisoryTitle;
+  const runtimeAdvisoryTone = launchPresentation.runtimeAdvisoryTone;
+  const badgeLabel =
+    runtimeAdvisoryTone === 'error' && runtimeAdvisoryLabel
+      ? runtimeAdvisoryLabel
+      : launchVisualState === 'runtime_pending' ||
+          launchVisualState === 'permission_pending' ||
+          launchVisualState === 'shell_only' ||
+          launchVisualState === 'runtime_candidate' ||
+          launchVisualState === 'registered_only' ||
+          launchVisualState === 'stale_runtime'
+        ? (launchStatusLabel ?? presenceLabel)
+        : presenceLabel;
+
+  const canEditRole =
+    !isLeadMember(member) && !member.removedAt && !isTeamProvisioning && !!onUpdateRole;
+
+  return (
+    <div className="flex items-center gap-3">
+      <div className="relative shrink-0">
+        <img
+          src={avatarMap.get(member.name) ?? agentAvatarUrl(member.name, 96)}
+          alt={member.name}
+          className="size-12 rounded-full bg-[var(--color-surface-raised)]"
+          loading="lazy"
+        />
+        <span
+          className={`absolute -bottom-0.5 -right-0.5 size-3 rounded-full border-2 border-[var(--color-surface)] ${dotClass}`}
+          aria-label={badgeLabel}
+        />
+      </div>
+      <div className="min-w-0 flex-1">
+        <DialogTitle className="truncate" style={{ color: colors.text }}>
+          {displayMemberName(member.name)}
+        </DialogTitle>
+        <DialogDescription asChild className="mt-1 flex items-center gap-2">
+          <div>
+            {editing ? (
+              <MemberRoleEditor
+                currentRole={member.role}
+                saving={updatingRole}
+                onSave={async (newRole) => {
+                  try {
+                    await onUpdateRole?.(newRole);
+                    setEditing(false);
+                  } catch {
+                    // stay in editing mode so user can retry
+                  }
+                }}
+                onCancel={() => setEditing(false)}
+              />
+            ) : (
+              <>
+                <span>{role || '无角色'}</span>
+                {canEditRole && (
+                  <button
+                    type="button"
+                    className="inline-flex items-center text-[var(--color-text-muted)] transition-colors hover:text-[var(--color-text-secondary)]"
+                    onClick={() => setEditing(true)}
+                    aria-label="编辑角色"
+                  >
+                    <Pencil size={12} />
+                  </button>
+                )}
+              </>
+            )}
+            {!editing && (
+              <>
+                <Badge
+                  variant="secondary"
+                  className={`px-1.5 py-0.5 text-[10px] font-normal leading-none ${
+                    runtimeAdvisoryTone === 'error'
+                      ? 'bg-red-500/15 text-red-300'
+                      : 'text-[var(--color-text-muted)]'
+                  }`}
+                  title={runtimeAdvisoryTitle}
+                >
+                  {badgeLabel}
+                </Badge>
+                {/* NOTE: lead context token display disabled — usage formula is inaccurate */}
+              </>
+            )}
+            {!editing && runtimeSummary ? (
+              <div className="mt-1 text-xs text-[var(--color-text-muted)]">{runtimeSummary}</div>
+            ) : null}
+          </div>
+        </DialogDescription>
+      </div>
+    </div>
+  );
+};

package/src/renderer/components/team/members/MemberDetailStats.tsx

@@ -0,0 +1,80 @@
+import { formatRelativeTime, formatTokensCompact } from '@renderer/utils/formatters';
+
+import type { MemberDetailTab } from './memberDetailTypes';
+
+interface MemberDetailStatsProps {
+  totalTasks: number;
+  inProgressTasks: number;
+  totalTokens: number | null;
+  statsLoading?: boolean;
+  statsComputedAt?: string;
+  onTabChange?: (tab: MemberDetailTab) => void;
+}
+
+const baseClasses =
+  'rounded-md border border-[var(--color-border)] bg-[var(--color-surface-raised)] px-2.5 py-1.5';
+const clickableClasses =
+  'cursor-pointer transition-colors hover:border-[var(--color-border-emphasis)] hover:bg-[var(--color-surface-overlay)]';
+
+const StatBlock = ({
+  label,
+  value,
+  sub,
+  onClick,
+}: {
+  label: string;
+  value: string | number;
+  sub?: string;
+  onClick?: () => void;
+}): React.JSX.Element => {
+  const classes = onClick ? `${baseClasses} ${clickableClasses}` : baseClasses;
+  const content = (
+    <>
+      <p className="text-base font-semibold leading-tight text-[var(--color-text)]">{value}</p>
+      <p className="text-[10px] text-[var(--color-text-muted)]">{label}</p>
+      {sub && <p className="mt-0.5 text-[9px] text-[var(--color-text-muted)]">{sub}</p>}
+    </>
+  );
+  if (onClick) {
+    return (
+      <button type="button" className={classes} onClick={onClick}>
+        {content}
+      </button>
+    );
+  }
+  return <div className={classes}>{content}</div>;
+};
+
+export const MemberDetailStats = ({
+  totalTasks,
+  inProgressTasks,
+  totalTokens,
+  statsLoading,
+  statsComputedAt,
+  onTabChange,
+}: MemberDetailStatsProps): React.JSX.Element => {
+  const tokensValue = statsLoading
+    ? '...'
+    : totalTokens != null
+      ? formatTokensCompact(totalTokens)
+      : '—';
+  const tokensSub =
+    !statsLoading && statsComputedAt ? `updated ${formatRelativeTime(statsComputedAt)}` : undefined;
+
+  return (
+    <div className="grid min-w-0 flex-1 grid-cols-2 gap-1.5">
+      <StatBlock
+        label="Tasks"
+        value={totalTasks}
+        sub={inProgressTasks > 0 ? `进行中: ${inProgressTasks}` : undefined}
+        onClick={onTabChange ? () => onTabChange('tasks') : undefined}
+      />
+      <StatBlock
+        label="Tokens"
+        value={tokensValue}
+        sub={tokensSub}
+        onClick={onTabChange ? () => onTabChange('stats') : undefined}
+      />
+    </div>
+  );
+};