@yancyyu/openhermit 1.5.8

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

@@ -0,0 +1,251 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { ActivityItem } from '@renderer/components/team/activity/ActivityItem';
+import {
+  buildMessageContext,
+  resolveMessageRenderProps,
+} from '@renderer/components/team/activity/activityMessageContext';
+import { MessageExpandDialog } from '@renderer/components/team/activity/MessageExpandDialog';
+import { Button } from '@renderer/components/ui/button';
+import { useTeamMessagesRead } from '@renderer/hooks/useTeamMessagesRead';
+import { useStore } from '@renderer/store';
+import { selectMemberMessagesForTeamMember } from '@renderer/store/slices/teamSlice';
+import { toMessageKey } from '@renderer/utils/teamMessageKey';
+import { useShallow } from 'zustand/react/shallow';
+
+import { buildMemberActivityEntries } from './memberActivityEntries';
+
+import type { MemberActivityFilter } from './memberDetailTypes';
+import type { TimelineItem } from '@renderer/components/team/activity/LeadThoughtsGroup';
+import type { ResolvedTeamMember, TeamTaskWithKanban } from '@shared/types';
+
+interface MemberMessagesTabProps {
+  teamName: string;
+  memberName: string;
+  members: ResolvedTeamMember[];
+  tasks: TeamTaskWithKanban[];
+  initialFilter?: MemberActivityFilter;
+  onCreateTask?: (subject: string, description: string) => void;
+  onTaskClick?: (task: TeamTaskWithKanban) => void;
+}
+
+const MAX_MESSAGES = 100;
+const FILTER_OPTIONS: readonly { value: MemberActivityFilter; label: string }[] = [
+  { value: 'all', label: 'All' },
+  { value: 'messages', label: 'Messages' },
+  { value: 'comments', label: 'Comments' },
+];
+
+export const MemberMessagesTab = ({
+  teamName,
+  memberName,
+  members,
+  tasks,
+  initialFilter = 'all',
+  onCreateTask,
+  onTaskClick,
+}: MemberMessagesTabProps): React.JSX.Element => {
+  const [activityFilter, setActivityFilter] = useState<MemberActivityFilter>(initialFilter);
+  const [expandedItem, setExpandedItem] = useState<TimelineItem | null>(null);
+  const { messages, messagesState, loadOlderTeamMessages } = useStore(
+    useShallow((s) => ({
+      messages: selectMemberMessagesForTeamMember(s, teamName, memberName),
+      messagesState: teamName ? s.teamMessagesByName[teamName] : undefined,
+      loadOlderTeamMessages: s.loadOlderTeamMessages,
+    }))
+  );
+  const { readSet } = useTeamMessagesRead(teamName);
+  const taskMap = useMemo(() => new Map(tasks.map((task) => [task.id, task])), [tasks]);
+  const messageContext = useMemo(() => buildMessageContext(members), [members]);
+
+  useEffect(() => {
+    setActivityFilter(initialFilter);
+  }, [initialFilter, memberName, teamName]);
+
+  const loadOlderMessages = useCallback(async () => {
+    if (!messagesState?.hasMore || messagesState.loadingHead || messagesState.loadingOlder) {
+      return;
+    }
+    await loadOlderTeamMessages(teamName);
+  }, [loadOlderTeamMessages, messagesState, teamName]);
+
+  const loading = (messagesState?.loadingHead ?? false) || (messagesState?.loadingOlder ?? false);
+  const loadingOlderMessages = messagesState?.loadingOlder ?? false;
+  const hasMore = messagesState?.hasMore ?? false;
+
+  const activityEntries = useMemo(() => {
+    return buildMemberActivityEntries({
+      teamName,
+      memberName,
+      members,
+      tasks,
+      messages,
+    });
+  }, [memberName, members, messages, tasks, teamName]);
+  const visibleActivityEntries = useMemo(
+    () => activityEntries.slice(0, MAX_MESSAGES),
+    [activityEntries]
+  );
+
+  const displayEntries = useMemo(() => {
+    switch (activityFilter) {
+      case 'messages':
+        return visibleActivityEntries.filter(
+          (entry) => entry.message.messageKind !== 'task_comment_notification'
+        );
+      case 'comments':
+        return visibleActivityEntries.filter(
+          (entry) => entry.message.messageKind === 'task_comment_notification'
+        );
+      default:
+        return visibleActivityEntries;
+    }
+  }, [activityFilter, visibleActivityEntries]);
+
+  const expandedItemsByKey = useMemo(() => {
+    const items = new Map<string, TimelineItem>();
+    for (const entry of displayEntries) {
+      items.set(toMessageKey(entry.message), { type: 'message', message: entry.message });
+    }
+    return items;
+  }, [displayEntries]);
+
+  const handleExpandItem = useCallback(
+    (key: string) => {
+      const next = expandedItemsByKey.get(key);
+      if (next) {
+        setExpandedItem(next);
+      }
+    },
+    [expandedItemsByKey]
+  );
+
+  const handleTaskIdClick = useCallback(
+    (taskId: string) => {
+      const task = taskMap.get(taskId) ?? tasks.find((candidate) => candidate.displayId === taskId);
+      if (task) {
+        onTaskClick?.(task);
+      }
+    },
+    [onTaskClick, taskMap, tasks]
+  );
+
+  const initialPageLoading = loading && activityEntries.length === 0;
+  const emptyStateText = initialPageLoading
+    ? 'Loading activity...'
+    : activityFilter === 'comments'
+      ? 'No comments for this member'
+      : activityFilter === 'messages'
+        ? hasMore
+          ? 'No loaded messages for this member yet'
+          : 'No messages with this member'
+        : hasMore
+          ? 'No loaded activity for this member yet'
+          : 'No activity with this member';
+  const canLoadOlderMessages = hasMore && activityFilter !== 'comments';
+
+  return (
+    <div className="space-y-3">
+      <div className="flex flex-wrap items-center gap-2">
+        {FILTER_OPTIONS.map((option) => {
+          const isActive = activityFilter === option.value;
+          return (
+            <button
+              key={option.value}
+              type="button"
+              className={[
+                'rounded-full border px-3 py-1 text-xs font-medium transition-colors',
+                isActive
+                  ? 'border-[var(--color-border-emphasis)] bg-[var(--color-surface-overlay)] text-[var(--color-text)]'
+                  : 'border-[var(--color-border)] bg-[var(--color-surface-raised)] text-[var(--color-text-muted)] hover:text-[var(--color-text)]',
+              ].join(' ')}
+              onClick={() => setActivityFilter(option.value)}
+            >
+              {option.label}
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="max-h-[320px] space-y-2 overflow-y-auto">
+        {displayEntries.length > 0 ? (
+          displayEntries.map((entry, index) => {
+            const messageKey = toMessageKey(entry.message);
+            const renderProps = resolveMessageRenderProps(entry.message, messageContext);
+            const timelineItem: TimelineItem = { type: 'message', message: entry.message };
+            const isUnread = !entry.message.read && !readSet.has(messageKey);
+
+            return (
+              <div
+                key={entry.graphItem.id}
+                className="cursor-pointer"
+                role="button"
+                tabIndex={0}
+                onClick={() => setExpandedItem(timelineItem)}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    setExpandedItem(timelineItem);
+                  }
+                }}
+              >
+                <ActivityItem
+                  message={entry.message}
+                  teamName={teamName}
+                  compactHeader
+                  collapseMode="managed"
+                  isCollapsed
+                  canToggleCollapse={false}
+                  isUnread={isUnread}
+                  expandItemKey={messageKey}
+                  onExpand={handleExpandItem}
+                  onCreateTask={onCreateTask}
+                  onTaskIdClick={handleTaskIdClick}
+                  memberRole={renderProps.memberRole}
+                  memberColor={renderProps.memberColor}
+                  recipientColor={renderProps.recipientColor}
+                  memberColorMap={messageContext.colorMap}
+                  localMemberNames={messageContext.localMemberNames}
+                  zebraShade={index % 2 === 1}
+                />
+              </div>
+            );
+          })
+        ) : (
+          <div className="rounded-md border border-[var(--color-border)] px-4 py-6 text-center text-sm text-[var(--color-text-muted)]">
+            {emptyStateText}
+          </div>
+        )}
+
+        {canLoadOlderMessages && (
+          <div className="flex justify-center pt-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-xs"
+              aria-busy={loadingOlderMessages}
+              disabled={loadingOlderMessages}
+              onClick={() => void loadOlderMessages()}
+            >
+              Load older messages
+            </Button>
+          </div>
+        )}
+      </div>
+
+      <MessageExpandDialog
+        expandedItem={expandedItem}
+        open={expandedItem !== null}
+        onOpenChange={(open) => {
+          if (!open) {
+            setExpandedItem(null);
+          }
+        }}
+        teamName={teamName}
+        members={members}
+        onTaskIdClick={handleTaskIdClick}
+        onCreateTaskFromMessage={onCreateTask}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,28 @@
+import { useSyncedAnimationStyle } from '@renderer/hooks/useSyncedAnimationStyle';
+import { cn } from '@renderer/lib/utils';
+
+const PULSE_DURATION_MS = 2000;
+
+interface MemberPresenceDotProps {
+  className?: string;
+  label: string;
+}
+
+export const MemberPresenceDot = ({
+  className,
+  label,
+}: MemberPresenceDotProps): React.JSX.Element => {
+  const shouldSyncPulse = className?.includes('animate-pulse') === true;
+  const syncedPulseStyle = useSyncedAnimationStyle(shouldSyncPulse, PULSE_DURATION_MS);
+
+  return (
+    <span
+      className={cn(
+        'absolute -bottom-0.5 -right-0.5 rounded-full border-2 border-[var(--color-surface)]',
+        className
+      )}
+      style={syncedPulseStyle}
+      aria-label={label}
+    />
+  );
+};

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

@@ -0,0 +1,84 @@
+import { useState } from 'react';
+
+import { RoleSelect } from '@renderer/components/team/RoleSelect';
+import { Button } from '@renderer/components/ui/button';
+import { CUSTOM_ROLE, FORBIDDEN_ROLES, NO_ROLE, PRESET_ROLES } from '@renderer/constants/teamRoles';
+import { Check, Loader2, X } from 'lucide-react';
+
+interface MemberRoleEditorProps {
+  currentRole: string | undefined;
+  onSave: (role: string | undefined) => Promise<void> | void;
+  onCancel: () => void;
+  saving?: boolean;
+}
+
+export const MemberRoleEditor = ({
+  currentRole,
+  onSave,
+  onCancel,
+  saving,
+}: MemberRoleEditorProps): React.JSX.Element => {
+  const isPreset = currentRole && (PRESET_ROLES as readonly string[]).includes(currentRole);
+  const [selectValue, setSelectValue] = useState<string>(
+    !currentRole ? NO_ROLE : isPreset ? currentRole : CUSTOM_ROLE
+  );
+  const [customInput, setCustomInput] = useState(isPreset ? '' : (currentRole ?? ''));
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSelectChange = (value: string): void => {
+    setSelectValue(value);
+    setError(null);
+    if (value !== CUSTOM_ROLE) {
+      setCustomInput('');
+    }
+  };
+
+  const handleSave = (): void => {
+    if (selectValue === NO_ROLE) {
+      void onSave(undefined);
+      return;
+    }
+    if (selectValue !== CUSTOM_ROLE) {
+      void onSave(selectValue);
+      return;
+    }
+    const trimmed = customInput.trim();
+    if (!trimmed) {
+      setError('Role cannot be empty');
+      return;
+    }
+    if (FORBIDDEN_ROLES.has(trimmed.toLowerCase())) {
+      setError('This role is reserved');
+      return;
+    }
+    void onSave(trimmed);
+  };
+
+  return (
+    <div className="flex items-center gap-1.5">
+      <RoleSelect
+        value={selectValue}
+        onValueChange={handleSelectChange}
+        customRole={customInput}
+        onCustomRoleChange={(val) => {
+          setCustomInput(val);
+          setError(null);
+        }}
+        triggerClassName="h-7 w-32 text-xs"
+        inputClassName="h-7 w-28 text-xs"
+        customRoleError={error}
+        onCustomRoleValidate={(val) => {
+          if (FORBIDDEN_ROLES.has(val.trim().toLowerCase())) return 'This role is reserved';
+          return null;
+        }}
+      />
+
+      <Button variant="ghost" size="icon" className="size-6" onClick={handleSave} disabled={saving}>
+        {saving ? <Loader2 size={12} className="animate-spin" /> : <Check size={12} />}
+      </Button>
+      <Button variant="ghost" size="icon" className="size-6" onClick={onCancel} disabled={saving}>
+        <X size={12} />
+      </Button>
+    </div>
+  );
+};

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

@@ -0,0 +1,299 @@
+import { useEffect, useState } from 'react';
+
+import { api } from '@renderer/api';
+import { cn } from '@renderer/lib/utils';
+import { formatRelativeTime } from '@renderer/utils/formatters';
+import { getBasename } from '@shared/utils/platformPath';
+import { formatTokensCompact } from '@shared/utils/tokenFormatting';
+import {
+  AlertCircle,
+  BarChart3,
+  ChevronDown,
+  ChevronRight,
+  FileCode,
+  Info,
+  Loader2,
+} from 'lucide-react';
+
+import type { FileLineStats, MemberFullStats } from '@shared/types';
+
+interface MemberStatsTabProps {
+  teamName: string;
+  memberName: string;
+  prefetchedStats?: MemberFullStats | null;
+  prefetchedLoading?: boolean;
+  prefetchedError?: string | null;
+  onFileClick?: (filePath: string) => void;
+  onShowAllFiles?: () => void;
+}
+
+export const MemberStatsTab = ({
+  teamName,
+  memberName,
+  prefetchedStats,
+  prefetchedLoading,
+  prefetchedError,
+  onFileClick,
+  onShowAllFiles,
+}: MemberStatsTabProps): React.JSX.Element => {
+  const usePrefetched = prefetchedStats !== undefined;
+
+  const [localStats, setLocalStats] = useState<MemberFullStats | null>(null);
+  const [localLoading, setLocalLoading] = useState(!usePrefetched);
+  const [localError, setLocalError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (usePrefetched) return;
+
+    let cancelled = false;
+    setLocalLoading(true);
+    setLocalError(null);
+
+    void (async () => {
+      try {
+        const result = await api.teams.getMemberStats(teamName, memberName);
+        if (!cancelled) setLocalStats(result);
+      } catch (e) {
+        if (!cancelled) setLocalError(e instanceof Error ? e.message : 'Unknown error');
+      } finally {
+        if (!cancelled) setLocalLoading(false);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [teamName, memberName, usePrefetched]);
+
+  const stats = usePrefetched ? (prefetchedStats ?? null) : localStats;
+  const loading = usePrefetched ? (prefetchedLoading ?? false) : localLoading;
+  const error = usePrefetched ? (prefetchedError ?? null) : localError;
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center gap-2 py-8 text-xs text-[var(--color-text-muted)]">
+        <Loader2 size={14} className="animate-spin" />
+        Computing stats...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center gap-2 py-8 text-xs text-red-400">
+        <AlertCircle size={14} />
+        {error}
+      </div>
+    );
+  }
+
+  if (!stats) {
+    return (
+      <div className="py-8 text-center text-xs text-[var(--color-text-muted)]">
+        <BarChart3 size={20} className="mx-auto mb-2 opacity-40" />
+        No stats available
+      </div>
+    );
+  }
+
+  const totalTokens = stats.inputTokens + stats.outputTokens;
+  const totalToolCalls = Object.values(stats.toolUsage).reduce((sum, c) => sum + c, 0);
+
+  return (
+    <div className="max-h-[400px] space-y-3 overflow-y-auto pr-1">
+      <SummaryCards stats={stats} totalTokens={totalTokens} totalToolCalls={totalToolCalls} />
+      <ToolUsageBars toolUsage={stats.toolUsage} />
+      <FilesTouchedSection
+        files={stats.filesTouched}
+        fileStats={stats.fileStats}
+        onFileClick={onFileClick}
+        onShowAll={onShowAllFiles}
+      />
+      <StatsFooter stats={stats} />
+    </div>
+  );
+};
+
+const StatCard = ({
+  label,
+  value,
+  sub,
+  info,
+}: {
+  label: string;
+  value: string | number;
+  sub?: string;
+  info?: string;
+}): React.JSX.Element => (
+  <div className="rounded-md border border-[var(--color-border)] bg-[var(--color-surface-raised)] px-3 py-2">
+    <p className="text-lg font-semibold text-[var(--color-text)]">{value}</p>
+    <div className="flex items-center gap-1">
+      <p className="text-[11px] text-[var(--color-text-muted)]">{label}</p>
+      {info && (
+        <span className="group relative">
+          <Info
+            size={10}
+            className="cursor-help text-[var(--color-text-muted)] opacity-50 hover:opacity-80"
+          />
+          <span className="pointer-events-none absolute bottom-full left-1/2 z-50 mb-1.5 w-52 -translate-x-1/2 rounded-md border border-[var(--color-border)] bg-[var(--color-surface-overlay)] px-2.5 py-2 text-[10px] leading-relaxed text-[var(--color-text-secondary)] opacity-0 shadow-lg transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
+            {info}
+          </span>
+        </span>
+      )}
+    </div>
+    {sub && <p className="mt-0.5 text-[10px] text-[var(--color-text-muted)]">{sub}</p>}
+  </div>
+);
+
+const SummaryCards = ({
+  stats,
+  totalTokens,
+  totalToolCalls,
+}: {
+  stats: MemberFullStats;
+  totalTokens: number;
+  totalToolCalls: number;
+}): React.JSX.Element => (
+  <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+    <StatCard
+      label="Lines"
+      value={`+${stats.linesAdded}`}
+      sub={stats.linesRemoved > 0 ? `-${stats.linesRemoved}` : undefined}
+      info="Approximate. Accurate for Edit and Write tools. Bash file writes are estimated from command patterns (heredoc, echo, sed) and may be underreported."
+    />
+    <StatCard label="Files" value={stats.filesTouched.length} />
+    <StatCard label="Tool Calls" value={totalToolCalls} />
+    <StatCard label="Tokens" value={formatTokensCompact(totalTokens)} />
+  </div>
+);
+
+const ToolUsageBars = ({
+  toolUsage,
+}: {
+  toolUsage: Record<string, number>;
+}): React.JSX.Element | null => {
+  const entries = Object.entries(toolUsage).sort(([, a], [, b]) => b - a);
+  if (entries.length === 0) return null;
+
+  const maxCount = entries[0][1];
+
+  return (
+    <div className="rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] p-3">
+      <p className="mb-2 text-[11px] font-medium text-[var(--color-text-secondary)]">Tool Usage</p>
+      <div className="space-y-1.5">
+        {entries.map(([name, count]) => (
+          <div key={name} className="flex items-center gap-2 text-[11px]">
+            <span className="w-16 shrink-0 truncate text-right text-[var(--color-text-muted)]">
+              {name}
+            </span>
+            <div className="h-3.5 flex-1 overflow-hidden rounded-sm bg-[var(--color-surface-raised)]">
+              <div
+                className="h-full rounded-sm bg-blue-500/40"
+                style={{ width: `${(count / maxCount) * 100}%` }}
+              />
+            </div>
+            <span className="w-8 shrink-0 text-right tabular-nums text-[var(--color-text-muted)]">
+              {count}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const TRAILING_PUNCT = ';.,';
+
+function isInvalidPath(path: string): boolean {
+  let trimmed = path.trim();
+  let end = trimmed.length;
+  while (end > 0 && TRAILING_PUNCT.includes(trimmed[end - 1])) {
+    end--;
+  }
+  trimmed = trimmed.slice(0, end);
+  return !trimmed || trimmed === 'null' || trimmed === 'undefined' || trimmed === 'None';
+}
+
+const FilesTouchedSection = ({
+  files,
+  fileStats,
+  onFileClick,
+  onShowAll,
+}: {
+  files: string[];
+  fileStats?: Record<string, FileLineStats>;
+  onFileClick?: (filePath: string) => void;
+  onShowAll?: () => void;
+}): React.JSX.Element | null => {
+  const [expanded, setExpanded] = useState(false);
+
+  const validFiles = files.filter((f) => !isInvalidPath(f));
+  if (validFiles.length === 0) return null;
+
+  const visibleFiles = expanded ? validFiles : validFiles.slice(0, 5);
+  const hiddenCount = validFiles.length - 5;
+  const isClickable = !!onFileClick;
+
+  return (
+    <div className="rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] p-3">
+      <div className="mb-2 flex items-center justify-between">
+        <p className="text-[11px] font-medium text-[var(--color-text-secondary)]">
+          Files Touched ({validFiles.length})
+        </p>
+        {onShowAll && (
+          <button className="text-[10px] text-blue-400 hover:text-blue-300" onClick={onShowAll}>
+            View All Changes
+          </button>
+        )}
+      </div>
+      <div className="space-y-0.5">
+        {visibleFiles.map((filePath) => {
+          const basename = getBasename(filePath) || filePath;
+          const fStats = fileStats?.[filePath];
+          return (
+            <button
+              key={filePath}
+              type="button"
+              className={cn(
+                'flex w-full items-center gap-1.5 rounded px-1 py-0.5 text-left text-[11px] text-[var(--color-text-muted)]',
+                isClickable &&
+                  'cursor-pointer hover:bg-[var(--color-surface-raised)] hover:text-[var(--color-text-secondary)]'
+              )}
+              title={filePath}
+              onClick={() => onFileClick?.(filePath)}
+              disabled={!isClickable}
+            >
+              <FileCode size={10} className="shrink-0 opacity-50" />
+              <span className="min-w-0 truncate">{basename}</span>
+              {fStats && (fStats.added > 0 || fStats.removed > 0) && (
+                <span className="flex shrink-0 items-center gap-1 font-mono text-[10px]">
+                  {fStats.added > 0 && <span className="text-emerald-400">+{fStats.added}</span>}
+                  {fStats.removed > 0 && <span className="text-red-400">-{fStats.removed}</span>}
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+      {hiddenCount > 0 && (
+        <button
+          className="mt-1.5 flex items-center gap-1 text-[10px] text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"
+          onClick={() => setExpanded(!expanded)}
+        >
+          {expanded ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
+          {expanded ? 'Show less' : `+${hiddenCount} more`}
+        </button>
+      )}
+    </div>
+  );
+};
+
+const StatsFooter = ({ stats }: { stats: MemberFullStats }): React.JSX.Element => {
+  const computedAgo = formatRelativeTime(stats.computedAt);
+
+  return (
+    <div className="text-center text-[10px] text-[var(--color-text-muted)]">
+      {stats.sessionCount} session{stats.sessionCount !== 1 ? 's' : ''} · computed {computedAgo}
+    </div>
+  );
+};