Skip to content

Commit e14ffa0

Browse files
santoshkumarradhasantoshkumarradha
authored
Merge pull request #13 from Agent-Field/santosh/ui-update
Add deep research example with planning and research routers
2 parents 5579f63 + e36a723 commit e14ffa0

18 files changed

Lines changed: 1845 additions & 575 deletions

File tree

‎README.md‎

Lines changed: 124 additions & 217 deletions
Large diffs are not rendered by default.

‎control-plane/web/client/src/components/EnhancedExecutionsTable.tsx‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -226,11 +226,11 @@ export function EnhancedExecutionsTable({
226226

227227
return (
228228
<div className="space-y-4">
229-
<Card>
229+
<Card className="overflow-hidden border-border/60 shadow-sm">
230230
<CardContent className="p-0">
231-
<div className="border-b border-border px-3 py-2 bg-muted/40">
231+
<div className="sticky top-0 z-10 border-b border-border/60 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-3 py-2.5">
232232
<div
233-
className="grid items-center text-xs font-semibold uppercase tracking-wide text-muted-foreground"
233+
className="grid items-center text-[10px] font-semibold uppercase tracking-wider text-muted-foreground"
234234
style={{ gridTemplateColumns: COLUMN_TEMPLATE }}
235235
>
236236
<SortableHeaderCell
@@ -262,7 +262,7 @@ export function EnhancedExecutionsTable({
262262
onSortChange={onSortChange}
263263
align="right"
264264
/>
265-
<div className="flex items-center justify-center gap-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
265+
<div className="flex items-center justify-center gap-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
266266
<ShieldCheck className="h-3 w-3" /> VC
267267
</div>
268268
<SortableHeaderCell
@@ -272,11 +272,11 @@ export function EnhancedExecutionsTable({
272272
sortOrder={sortOrder}
273273
onSortChange={onSortChange}
274274
/>
275-
<div className="text-right text-xs font-semibold uppercase tracking-wide text-muted-foreground"></div>
275+
<div className="text-right text-[10px] font-semibold uppercase tracking-wider text-muted-foreground"></div>
276276
</div>
277277
</div>
278278

279-
<div ref={parentRef} className="relative h-[60vh] overflow-y-auto">
279+
<div ref={parentRef} className="relative h-[60vh] overflow-y-auto bg-muted/5">
280280
<div
281281
style={{
282282
height: `${virtualizer.getTotalSize()}px`,
@@ -293,23 +293,26 @@ export function EnhancedExecutionsTable({
293293
return (
294294
<div
295295
key={virtualRow.key}
296-
className="absolute left-0 right-0 px-3"
296+
className="absolute left-0 right-0 px-2"
297297
style={{
298298
transform: `translateY(${virtualRow.start}px)`,
299299
height: `${virtualRow.size}px`,
300300
}}
301301
>
302302
<div
303303
className={cn(
304-
"grid h-full cursor-pointer items-center rounded-lg px-3 transition-colors",
305-
"bg-card hover:bg-[var(--row-hover-bg)] dark:hover:bg-[var(--dark-row-hover-bg)]"
304+
"grid h-full cursor-pointer items-center rounded-md px-3 transition-all duration-200 relative overflow-hidden group",
305+
"bg-card border border-transparent hover:border-border/60 hover:shadow-sm hover:bg-card"
306306
)}
307307
style={{ gridTemplateColumns: COLUMN_TEMPLATE }}
308308
onMouseEnter={() => setHoveredRow(execution.execution_id)}
309309
onMouseLeave={() => setHoveredRow(null)}
310310
onClick={() => onExecutionClick?.(execution)}
311311
>
312-
<div className="flex items-center">
312+
{/* Hover Accent Bar */}
313+
<div className="absolute left-0 top-0 bottom-0 w-0.5 bg-primary opacity-0 group-hover:opacity-100 transition-opacity" />
314+
315+
<div className="flex items-center pl-2">
313316
<StatusPill status={execution.status} />
314317
</div>
315318

@@ -332,13 +335,13 @@ export function EnhancedExecutionsTable({
332335
</div>
333336

334337
<div className="flex items-center">
335-
<span className="text-body-small">
338+
<span className="text-xs text-muted-foreground font-mono">
336339
{execution.relative_time}
337340
</span>
338341
</div>
339342

340343
<div className="flex items-center justify-end">
341-
<span className="font-mono text-body-small">
344+
<span className="font-mono text-xs text-foreground">
342345
{execution.duration_display}
343346
</span>
344347
</div>
@@ -350,7 +353,7 @@ export function EnhancedExecutionsTable({
350353
</div>
351354

352355
<div className="flex items-center">
353-
<span className="font-mono text-body-small">
356+
<span className="font-mono text-xs text-muted-foreground group-hover:text-foreground transition-colors">
354357
…{execution.execution_id.slice(-8)}
355358
</span>
356359
</div>

‎control-plane/web/client/src/components/Navigation/SidebarNew.tsx‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
useSidebar,
1515
} from "@/components/ui/sidebar";
1616
import { Icon } from "@/components/ui/icon";
17+
import { cn } from "@/lib/utils";
1718

1819
interface SidebarNewProps {
1920
sections: NavigationSection[];
@@ -24,19 +25,19 @@ export function SidebarNew({ sections }: SidebarNewProps) {
2425
const isCollapsed = state === "collapsed";
2526

2627
return (
27-
<Sidebar collapsible="icon">
28+
<Sidebar collapsible="icon" className="border-r border-border/40 bg-sidebar/95 backdrop-blur supports-[backdrop-filter]:bg-sidebar/60">
2829
{/* Header - Add bottom spacing and subtle border separator for visual hierarchy */}
29-
<SidebarHeader className="pb-4 border-b border-border-secondary">
30+
<SidebarHeader className="pb-3 border-b border-border/40">
3031
<SidebarMenu>
3132
<SidebarMenuItem>
32-
<SidebarMenuButton size="lg" asChild>
33+
<SidebarMenuButton size="lg" asChild className="active:scale-[0.98] transition-transform">
3334
<NavLink to="/dashboard">
34-
<div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
35+
<div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground shadow-sm">
3536
<Icon name="dashboard" size={16} />
3637
</div>
3738
<div className="grid flex-1 text-left text-sm leading-tight">
38-
<span className="truncate font-semibold">AgentField</span>
39-
<span className="truncate text-xs">Open Control Plane</span>
39+
<span className="truncate font-semibold tracking-tight">AgentField</span>
40+
<span className="truncate text-[10px] text-muted-foreground font-mono">v1.0.0</span>
4041
</div>
4142
</NavLink>
4243
</SidebarMenuButton>
@@ -45,15 +46,15 @@ export function SidebarNew({ sections }: SidebarNewProps) {
4546
</SidebarHeader>
4647

4748
{/* Content - Add spacing between groups */}
48-
<SidebarContent className="space-y-6">
49+
<SidebarContent className="space-y-4 px-2">
4950
{sections.map((section) => (
50-
<SidebarGroup key={section.id} className="space-y-1">
51+
<SidebarGroup key={section.id} className="space-y-0.5">
5152
{/* Apply caption styling for clear header differentiation */}
52-
<SidebarGroupLabel className="text-caption text-nav-text-tertiary">
53+
<SidebarGroupLabel className="text-[10px] uppercase tracking-wider font-semibold text-muted-foreground/70 px-2 mb-1">
5354
{section.title}
5455
</SidebarGroupLabel>
5556
{/* Add gap after header */}
56-
<SidebarGroupContent className="mt-4">
57+
<SidebarGroupContent>
5758
<SidebarMenu>
5859
{section.items.map((item) => (
5960
<SidebarMenuItem key={item.id}>
@@ -62,8 +63,9 @@ export function SidebarNew({ sections }: SidebarNewProps) {
6263
isActive={false}
6364
tooltip={isCollapsed ? item.label : undefined}
6465
disabled
66+
className="h-8 text-[13px]"
6567
>
66-
{item.icon && <Icon name={item.icon} size={16} />}
68+
{item.icon && <Icon name={item.icon} size={15} />}
6769
<span>{item.label}</span>
6870
</SidebarMenuButton>
6971
) : (
@@ -73,9 +75,18 @@ export function SidebarNew({ sections }: SidebarNewProps) {
7375
asChild
7476
isActive={isActive}
7577
tooltip={isCollapsed ? item.label : undefined}
78+
className={cn(
79+
"h-8 text-[13px] transition-all duration-200 relative",
80+
isActive
81+
? "bg-sidebar-accent text-sidebar-accent-foreground font-medium shadow-sm"
82+
: "text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50"
83+
)}
7684
>
77-
<span className="flex items-center gap-2">
78-
{item.icon && <Icon name={item.icon} size={16} />}
85+
<span className="flex items-center gap-2.5">
86+
{isActive && (
87+
<div className="absolute left-0 top-1/2 -translate-y-1/2 h-4 w-0.5 bg-primary rounded-r-full" />
88+
)}
89+
{item.icon && <Icon name={item.icon} size={15} className={cn(isActive ? "text-primary" : "text-muted-foreground")} />}
7990
<span>{item.label}</span>
8091
</span>
8192
</SidebarMenuButton>

‎control-plane/web/client/src/components/SearchWithFilters.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -144,8 +144,13 @@ export function SearchWithFilters({
144144
/>
145145
</div>
146146

147-
{/* Dropdown indicator */}
148-
<div className="flex items-center pr-3">
147+
{/* Command Hint & Dropdown indicator */}
148+
<div className="flex items-center pr-3 gap-2">
149+
{!inputValue && tags.length === 0 && (
150+
<kbd className="pointer-events-none hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100 sm:flex">
151+
<span className="text-xs">⌘</span>K
152+
</kbd>
153+
)}
149154
<ChevronDown
150155
size={16}
151156
className={cn(

‎control-plane/web/client/src/components/WorkflowDAG/WorkflowNode.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -307,12 +307,12 @@ export const WorkflowNode = memo(({ data, selected }: WorkflowNodeProps) => {
307307
}
308308

309309
const baseShadow =
310-
"0 12px 24px -14px color-mix(in srgb, var(--foreground) 22%, transparent)";
310+
"0 4px 12px -2px color-mix(in srgb, var(--foreground) 10%, transparent), 0 2px 6px -1px color-mix(in srgb, var(--foreground) 6%, transparent)";
311311
const accentShadow = `0 0 0 1px ${borderColor}`;
312-
const glowShadow = isDimmed ? "" : `0 0 18px ${glowColor}`;
312+
const glowShadow = isDimmed ? "" : `0 0 12px -2px ${glowColor}`;
313313
const compositeShadow = [accentShadow, baseShadow, glowShadow].filter(Boolean).join(", ");
314314

315-
const baseBackground = `linear-gradient(135deg, color-mix(in srgb, ${statusColorVar} 12%, transparent), var(--card))`;
315+
const baseBackground = `linear-gradient(145deg, color-mix(in srgb, ${statusColorVar} 8%, transparent), var(--card))`;
316316
let background = baseBackground;
317317

318318
if (!hasHighlight) {
@@ -357,22 +357,22 @@ export const WorkflowNode = memo(({ data, selected }: WorkflowNodeProps) => {
357357
return (
358358
<div
359359
className={cn(
360-
"relative h-[100px] rounded-xl border-2 bg-card/95 backdrop-blur-sm transition-transform duration-200",
361-
"cursor-pointer group overflow-hidden shadow-lg",
362-
!isDimmed && "hover:scale-[1.02]"
360+
"relative h-[100px] rounded-xl border bg-card/90 backdrop-blur-md transition-all duration-300 animate-fade-in",
361+
"cursor-pointer group overflow-hidden",
362+
!isDimmed && "hover:scale-[1.01] hover:shadow-xl"
363363
)}
364364
style={{
365365
width: `${nodeWidth}px`,
366366
borderColor,
367367
boxShadow: compositeShadow,
368-
opacity: isDimmed ? 0.35 : 1,
368+
opacity: isDimmed ? 0.4 : 1,
369369
filter: isDimmed ? "grayscale(65%) saturate(70%)" : undefined,
370370
background,
371371
}}
372372
>
373373
{/* Agent color left border accent */}
374374
<div
375-
className="absolute left-0 top-0 bottom-0 w-1 rounded-l-xl"
375+
className="absolute left-0 top-0 bottom-0 w-[3px] rounded-l-xl opacity-80"
376376
style={{
377377
background: `linear-gradient(to bottom, ${agentColor.primary}, ${agentColor.border})`,
378378
}}

0 commit comments

Comments
 (0)