Skip to content

Commit 3ff988d

Browse files
FulAppiOSFulAppiOS
committed
feat(client): DetailPanel rewrite + drop viewMode toggle in feed header
- DetailPanel: HeroAvatar preview, PathValue link helper (vscode:// links via resolvePath), richer header with status overlay, expanded sections and styling (+201 CSS lines). - ActivityFeedHeader: remove the All/By Agent viewMode toggle (the byAgent view is no longer used downstream — ActivityFeed renders a flat list only).
1 parent e7a9703 commit 3ff988d

3 files changed

Lines changed: 275 additions & 116 deletions

File tree

‎client/src/components/ActivityFeedHeader.tsx‎

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
1-
import type { FoldState, ViewMode } from '../hooks/useFeedPrefs';
1+
import type { FoldState } from '../hooks/useFeedPrefs';
22
import type { ActionFilter } from './activityFeedUtils';
33
import type { AgentState } from '../types/agent';
44
import { HeroAvatar } from './HeroAvatar';
55

66
interface ActivityFeedHeaderProps {
77
foldState: FoldState;
8-
viewMode: ViewMode;
98
activeHighlights: ActionFilter[];
109
availableCategories: Set<ActionFilter>;
1110
categoryCounts: Record<ActionFilter, number>;
1211
agentFilter: string | null;
1312
agents: AgentState[];
1413
newCount: number;
1514
onFoldChange: (state: FoldState) => void;
16-
onViewModeChange: (mode: ViewMode) => void;
1715
onHighlightsChange: (highlights: ActionFilter[]) => void;
1816
onClearAgentFilter: () => void;
1917
}
@@ -29,9 +27,9 @@ const PILL_ORDER: { id: ActionFilter; label: string }[] = [
2927
];
3028

3129
export function ActivityFeedHeader({
32-
foldState, viewMode, activeHighlights, availableCategories, categoryCounts,
30+
foldState, activeHighlights, availableCategories, categoryCounts,
3331
agentFilter, agents, newCount,
34-
onFoldChange, onViewModeChange, onHighlightsChange, onClearAgentFilter,
32+
onFoldChange, onHighlightsChange, onClearAgentFilter,
3533
}: ActivityFeedHeaderProps) {
3634
const filteredAgent = agentFilter !== null ? agents.find((a) => a.id === agentFilter) ?? null : null;
3735

@@ -58,23 +56,6 @@ export function ActivityFeedHeader({
5856
)}
5957
</span>
6058

61-
{foldState !== 'closed' && (
62-
<div className="feed-tabs" role="group" aria-label="Feed view mode">
63-
<button
64-
type="button"
65-
aria-pressed={viewMode === 'all'}
66-
className={`feed-tab ${viewMode === 'all' ? 'active' : ''}`}
67-
onClick={() => onViewModeChange('all')}
68-
>All</button>
69-
<button
70-
type="button"
71-
aria-pressed={viewMode === 'byAgent'}
72-
className={`feed-tab ${viewMode === 'byAgent' ? 'active' : ''}`}
73-
onClick={() => onViewModeChange('byAgent')}
74-
>By Agent</button>
75-
</div>
76-
)}
77-
7859
<span className="feed-spacer" />
7960

8061
<div className="feed-fold-buttons">

‎client/src/components/DetailPanel.css‎

Lines changed: 165 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2,97 +2,226 @@
22
position: absolute;
33
top: 48px;
44
right: 8px;
5-
width: 320px;
5+
width: 360px;
66
max-height: calc(100% - 180px);
7-
background: rgba(26, 26, 46, 0.9);
7+
background: rgba(26, 26, 46, 0.92);
88
border: 1px solid rgba(196, 163, 90, 0.4);
99
border-radius: 4px;
10-
overflow-y: auto;
10+
overflow: hidden;
11+
display: flex;
12+
flex-direction: column;
1113
z-index: 25;
1214
font-family: 'Fira Code', monospace;
1315
}
1416

15-
.detail-panel::-webkit-scrollbar { width: 6px; }
16-
.detail-panel::-webkit-scrollbar-track { background: rgba(26, 26, 46, 0.5); }
17-
.detail-panel::-webkit-scrollbar-thumb { background: rgba(196, 163, 90, 0.4); border-radius: 3px; }
17+
.detail-body {
18+
overflow-y: auto;
19+
min-height: 0;
20+
padding: 4px 0;
21+
}
1822

19-
.detail-header { padding: 10px 12px; border-bottom: 1px solid rgba(196, 163, 90, 0.3); }
20-
.detail-name { font-family: 'Cinzel', serif; color: #C4A35A; font-size: 16px; font-weight: 700; }
21-
.detail-class { font-size: 11px; color: #888; text-transform: capitalize; margin-top: 2px; }
23+
.detail-body::-webkit-scrollbar { width: 6px; }
24+
.detail-body::-webkit-scrollbar-track { background: rgba(26, 26, 46, 0.5); }
25+
.detail-body::-webkit-scrollbar-thumb { background: rgba(196, 163, 90, 0.4); border-radius: 3px; }
26+
27+
/* --- Topbar (header) --- */
28+
.detail-topbar {
29+
display: flex;
30+
align-items: center;
31+
gap: 12px;
32+
padding: 12px 14px;
33+
border-bottom: 1px solid rgba(196, 163, 90, 0.3);
34+
flex-shrink: 0;
35+
}
2236

23-
.detail-section { padding: 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
24-
.detail-section-title { font-size: 10px; color: #C4A35A; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
37+
.detail-avatar-wrap {
38+
position: relative;
39+
flex-shrink: 0;
40+
width: 44px;
41+
height: 44px;
42+
}
2543

26-
.detail-row { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 3px; }
27-
.detail-label { color: #888; }
28-
.detail-value { color: #F5E6C8; }
44+
.detail-status-overlay {
45+
position: absolute;
46+
bottom: -2px;
47+
right: -2px;
48+
width: 14px;
49+
height: 14px;
50+
border-radius: 50%;
51+
border: 2px solid #1a1a2e;
52+
box-sizing: content-box;
53+
}
54+
.detail-status-overlay.active { background: #2E8B57; }
55+
.detail-status-overlay.idle { background: #C4A35A; }
56+
.detail-status-overlay.completed { background: #555; }
57+
.detail-status-overlay.error { background: #8B2500; }
58+
.detail-status-overlay.waiting { background: #FFD700; }
2959

30-
.detail-file-list { list-style: none; padding: 0; margin: 0; }
31-
.detail-file-list li { font-size: 10px; color: #7B9EC4; padding: 1px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
60+
.detail-topbar-body {
61+
flex: 1;
62+
min-width: 0;
63+
display: flex;
64+
flex-direction: column;
65+
gap: 4px;
66+
}
67+
68+
.detail-name {
69+
font-family: 'Cinzel', serif;
70+
color: #C4A35A;
71+
font-size: 19px;
72+
font-weight: 700;
73+
line-height: 1.15;
74+
overflow: hidden;
75+
text-overflow: ellipsis;
76+
white-space: nowrap;
77+
}
78+
79+
.detail-class {
80+
color: #aaa;
81+
text-transform: capitalize;
82+
font-size: 13px;
83+
}
3284

3385
.detail-close {
34-
position: absolute;
35-
top: 8px;
36-
right: 8px;
3786
background: none;
3887
border: 1px solid rgba(196, 163, 90, 0.3);
3988
color: #C4A35A;
4089
cursor: pointer;
4190
font-size: 14px;
42-
width: 24px;
43-
height: 24px;
91+
width: 26px;
92+
height: 26px;
4493
display: flex;
4594
align-items: center;
4695
justify-content: center;
4796
border-radius: 3px;
97+
flex-shrink: 0;
98+
padding: 0;
4899
}
49-
50100
.detail-close:hover { background: rgba(196, 163, 90, 0.2); }
51101

102+
/* --- Sections --- */
103+
.detail-section {
104+
padding: 12px 16px;
105+
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
106+
}
107+
.detail-section:last-child { border-bottom: none; }
108+
109+
.detail-section-title {
110+
font-family: 'Cinzel', serif;
111+
font-size: 12px;
112+
color: #C4A35A;
113+
text-transform: uppercase;
114+
letter-spacing: 1.2px;
115+
margin-bottom: 8px;
116+
font-weight: 700;
117+
}
118+
119+
.detail-row {
120+
display: flex;
121+
justify-content: space-between;
122+
align-items: baseline;
123+
gap: 10px;
124+
font-size: 14px;
125+
line-height: 1.5;
126+
margin-bottom: 4px;
127+
}
128+
.detail-row:last-child { margin-bottom: 0; }
129+
130+
.detail-label { color: #9a9a9a; }
131+
.detail-value { color: #F5E6C8; }
132+
.detail-value--num { font-variant-numeric: tabular-nums; }
133+
.detail-value-suffix {
134+
color: #9a9a9a;
135+
font-size: 12px;
136+
margin-left: 8px;
137+
}
138+
139+
.detail-value--path {
140+
display: block;
141+
font-size: 13px;
142+
line-height: 1.55;
143+
color: #F5E6C8;
144+
word-break: break-all;
145+
}
146+
147+
.detail-path-link {
148+
color: #9ec4f5;
149+
text-decoration: none;
150+
}
151+
.detail-path-link:hover { text-decoration: underline; }
152+
153+
/* --- File list --- */
154+
.detail-file-list { list-style: none; padding: 0; margin: 0; }
155+
.detail-file-list li {
156+
font-size: 13px;
157+
line-height: 1.55;
158+
padding: 2px 0;
159+
overflow: hidden;
160+
text-overflow: ellipsis;
161+
white-space: nowrap;
162+
}
163+
.detail-file-list li .detail-path-link { display: inline; }
164+
.detail-file-list li > span { color: #7B9EC4; }
165+
166+
/* --- Errors --- */
167+
.detail-section--errors {
168+
background: rgba(139, 37, 0, 0.12);
169+
border-left: 3px solid #8B2500;
170+
}
171+
.detail-value--error {
172+
font-size: 13px;
173+
line-height: 1.55;
174+
color: #ffaaaa;
175+
word-break: break-word;
176+
margin-bottom: 6px;
177+
}
178+
.detail-value--error:last-child { margin-bottom: 0; }
179+
180+
/* --- Last message markdown --- */
52181
.detail-last-message {
53-
font-size: 11px;
54-
line-height: 1.6;
182+
font-size: 13px;
183+
line-height: 1.65;
55184
color: #F5E6C8;
56185
word-break: break-word;
57186
}
58-
.detail-last-message p { margin: 0 0 6px; }
187+
.detail-last-message p { margin: 0 0 8px; }
59188
.detail-last-message p:last-child { margin-bottom: 0; }
60189
.detail-last-message h1, .detail-last-message h2, .detail-last-message h3 {
61190
font-family: 'Cinzel', serif;
62191
color: #C4A35A;
63-
font-size: 12px;
64-
margin: 6px 0 3px;
192+
font-size: 13px;
193+
margin: 8px 0 4px;
65194
}
66195
.detail-last-message code {
67196
background: rgba(196, 163, 90, 0.15);
68197
border: 1px solid rgba(196, 163, 90, 0.25);
69198
border-radius: 3px;
70-
padding: 1px 4px;
199+
padding: 1px 5px;
71200
font-family: 'Fira Code', monospace;
72-
font-size: 10px;
201+
font-size: 12px;
73202
color: #7BD4C5;
74203
}
75204
.detail-last-message pre {
76205
background: rgba(0, 0, 0, 0.4);
77206
border: 1px solid rgba(196, 163, 90, 0.2);
78207
border-radius: 3px;
79-
padding: 6px 8px;
208+
padding: 8px 10px;
80209
overflow-x: auto;
81-
margin: 4px 0;
210+
margin: 6px 0;
82211
}
83212
.detail-last-message pre code {
84213
background: none;
85214
border: none;
86215
padding: 0;
87-
font-size: 10px;
216+
font-size: 12px;
88217
color: #7BD4C5;
89218
}
90219
.detail-last-message strong { color: #F5E6C8; font-weight: 700; }
91220
.detail-last-message em { color: #C4A35A; font-style: italic; }
92221
.detail-last-message ul, .detail-last-message ol {
93-
padding-left: 16px;
94-
margin: 4px 0;
222+
padding-left: 18px;
223+
margin: 6px 0;
95224
}
96-
.detail-last-message li { margin-bottom: 2px; }
97-
.detail-last-message a { color: #7B9EC4; text-decoration: none; }
225+
.detail-last-message li { margin-bottom: 3px; }
226+
.detail-last-message a { color: #9ec4f5; text-decoration: none; }
98227
.detail-last-message a:hover { text-decoration: underline; }

0 commit comments

Comments
 (0)