Skip to content

Add deep research example with planning and research routers #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
santoshkumarradha merged 11 commits into from
Nov 20, 2025
Merged

Add deep research example with planning and research routers #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a4a2c0b
Refines dashboard UI for clarity and modern polish
santoshkumarradha Nov 19, 2025
5feb529
updated readme
santoshkumarradha Nov 19, 2025
5906f9b
Revamps README for clarity and production focus
santoshkumarradha Nov 19, 2025
7cd458c
Adds UI screenshot to showcase dashboard features
santoshkumarradha Nov 19, 2025
24a44ba
Clarifies beta status and feedback channels in docs
santoshkumarradha Nov 19, 2025
c39a630
Add deep research example with planning and research routers
santoshkumarradha Nov 20, 2025
207eb9f
Update research router in deep research example
santoshkumarradha Nov 20, 2025
294f257
Add synthesize_from_dependencies function to research router
santoshkumarradha Nov 20, 2025
1bb2633
Add task deduplication and search strategy features to planning and r…
santoshkumarradha Nov 20, 2025
695ba6c
Update README for deep research example
santoshkumarradha Nov 20, 2025
e36a723
Format code with ruff
santoshkumarradha Nov 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
341 changes: 124 additions & 217 deletions README.md
View file
Open in desktop

Large diffs are not rendered by default.

29 changes: 16 additions & 13 deletions control-plane/web/client/src/components/EnhancedExecutionsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,11 +226,11 @@ export function EnhancedExecutionsTable({

return (
<div className="space-y-4">
<Card>
<Card className="overflow-hidden border-border/60 shadow-sm">
<CardContent className="p-0">
<div className="border-b border-border px-3 py-2 bg-muted/40">
<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">
<div
className="grid items-center text-xs font-semibold uppercase tracking-wide text-muted-foreground"
className="grid items-center text-[10px] font-semibold uppercase tracking-wider text-muted-foreground"
style={{ gridTemplateColumns: COLUMN_TEMPLATE }}
>
<SortableHeaderCell
Expand Down Expand Up @@ -262,7 +262,7 @@ export function EnhancedExecutionsTable({
onSortChange={onSortChange}
align="right"
/>
<div className="flex items-center justify-center gap-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
<div className="flex items-center justify-center gap-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
<ShieldCheck className="h-3 w-3" /> VC
</div>
<SortableHeaderCell
Expand All @@ -272,11 +272,11 @@ export function EnhancedExecutionsTable({
sortOrder={sortOrder}
onSortChange={onSortChange}
/>
<div className="text-right text-xs font-semibold uppercase tracking-wide text-muted-foreground"></div>
<div className="text-right text-[10px] font-semibold uppercase tracking-wider text-muted-foreground"></div>
</div>
</div>

<div ref={parentRef} className="relative h-[60vh] overflow-y-auto">
<div ref={parentRef} className="relative h-[60vh] overflow-y-auto bg-muted/5">
<div
style={{
height: `${virtualizer.getTotalSize()}px`,
Expand All @@ -293,23 +293,26 @@ export function EnhancedExecutionsTable({
return (
<div
key={virtualRow.key}
className="absolute left-0 right-0 px-3"
className="absolute left-0 right-0 px-2"
style={{
transform: `translateY(${virtualRow.start}px)`,
height: `${virtualRow.size}px`,
}}
>
<div
className={cn(
"grid h-full cursor-pointer items-center rounded-lg px-3 transition-colors",
"bg-card hover:bg-[var(--row-hover-bg)] dark:hover:bg-[var(--dark-row-hover-bg)]"
"grid h-full cursor-pointer items-center rounded-md px-3 transition-all duration-200 relative overflow-hidden group",
"bg-card border border-transparent hover:border-border/60 hover:shadow-sm hover:bg-card"
)}
style={{ gridTemplateColumns: COLUMN_TEMPLATE }}
onMouseEnter={() => setHoveredRow(execution.execution_id)}
onMouseLeave={() => setHoveredRow(null)}
onClick={() => onExecutionClick?.(execution)}
>
<div className="flex items-center">
{/* Hover Accent Bar */}
<div className="absolute left-0 top-0 bottom-0 w-0.5 bg-primary opacity-0 group-hover:opacity-100 transition-opacity" />

<div className="flex items-center pl-2">
<StatusPill status={execution.status} />
</div>

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

<div className="flex items-center">
<span className="text-body-small">
<span className="text-xs text-muted-foreground font-mono">
{execution.relative_time}
</span>
</div>

<div className="flex items-center justify-end">
<span className="font-mono text-body-small">
<span className="font-mono text-xs text-foreground">
{execution.duration_display}
</span>
</div>
Expand All @@ -350,7 +353,7 @@ export function EnhancedExecutionsTable({
</div>

<div className="flex items-center">
<span className="font-mono text-body-small">
<span className="font-mono text-xs text-muted-foreground group-hover:text-foreground transition-colors">
…{execution.execution_id.slice(-8)}
</span>
</div>
Expand Down
37 changes: 24 additions & 13 deletions control-plane/web/client/src/components/Navigation/SidebarNew.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
useSidebar,
} from "@/components/ui/sidebar";
import { Icon } from "@/components/ui/icon";
import { cn } from "@/lib/utils";

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

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

{/* Content - Add spacing between groups */}
<SidebarContent className="space-y-6">
<SidebarContent className="space-y-4 px-2">
{sections.map((section) => (
<SidebarGroup key={section.id} className="space-y-1">
<SidebarGroup key={section.id} className="space-y-0.5">
{/* Apply caption styling for clear header differentiation */}
<SidebarGroupLabel className="text-caption text-nav-text-tertiary">
<SidebarGroupLabel className="text-[10px] uppercase tracking-wider font-semibold text-muted-foreground/70 px-2 mb-1">
{section.title}
</SidebarGroupLabel>
{/* Add gap after header */}
<SidebarGroupContent className="mt-4">
<SidebarGroupContent>
<SidebarMenu>
{section.items.map((item) => (
<SidebarMenuItem key={item.id}>
Expand All @@ -62,8 +63,9 @@ export function SidebarNew({ sections }: SidebarNewProps) {
isActive={false}
tooltip={isCollapsed ? item.label : undefined}
disabled
className="h-8 text-[13px]"
>
{item.icon && <Icon name={item.icon} size={16} />}
{item.icon && <Icon name={item.icon} size={15} />}
<span>{item.label}</span>
</SidebarMenuButton>
) : (
Expand All @@ -73,9 +75,18 @@ export function SidebarNew({ sections }: SidebarNewProps) {
asChild
isActive={isActive}
tooltip={isCollapsed ? item.label : undefined}
className={cn(
"h-8 text-[13px] transition-all duration-200 relative",
isActive
? "bg-sidebar-accent text-sidebar-accent-foreground font-medium shadow-sm"
: "text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50"
)}
>
<span className="flex items-center gap-2">
{item.icon && <Icon name={item.icon} size={16} />}
<span className="flex items-center gap-2.5">
{isActive && (
<div className="absolute left-0 top-1/2 -translate-y-1/2 h-4 w-0.5 bg-primary rounded-r-full" />
)}
{item.icon && <Icon name={item.icon} size={15} className={cn(isActive ? "text-primary" : "text-muted-foreground")} />}
<span>{item.label}</span>
</span>
</SidebarMenuButton>
Expand Down
9 changes: 7 additions & 2 deletions control-plane/web/client/src/components/SearchWithFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,8 +144,13 @@ export function SearchWithFilters({
/>
</div>

{/* Dropdown indicator */}
<div className="flex items-center pr-3">
{/* Command Hint & Dropdown indicator */}
<div className="flex items-center pr-3 gap-2">
{!inputValue && tags.length === 0 && (
<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">
<span className="text-xs">⌘</span>K
</kbd>
)}
<ChevronDown
size={16}
className={cn(
Expand Down
16 changes: 8 additions & 8 deletions control-plane/web/client/src/components/WorkflowDAG/WorkflowNode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -307,12 +307,12 @@ export const WorkflowNode = memo(({ data, selected }: WorkflowNodeProps) => {
}

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

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

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