@genui/a3-create 0.1.36

package/template/app/components/atoms/AgentNode.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import { memo } from 'react'
+import { Handle, Position, type NodeProps } from '@xyflow/react'
+import { Box, Typography } from '@mui/material'
+import { GRAPH_ACTIVE_BADGE } from '@constants/ui'
+
+function AgentNodeComponent({ data }: NodeProps) {
+  const { label, isActive } = data as { label: string; isActive: boolean; description: string }
+
+  return (
+    <>
+      <Handle type="target" id="target-top" position={Position.Top} style={{ opacity: 0 }} />
+      <Handle type="target" id="target-right" position={Position.Right} style={{ opacity: 0 }} />
+      <Box
+        sx={{
+          px: 2,
+          py: 1,
+          borderRadius: '10px',
+          bgcolor: isActive ? '#2563eb' : '#e2e8f0',
+          border: '1.5px solid',
+          borderColor: isActive ? '#1d4ed8' : '#cbd5e1',
+          boxShadow: isActive ? '0 0 8px rgba(37, 99, 235, 0.5)' : 'none',
+          animation: isActive ? 'agentPulse 2s ease-in-out infinite' : 'none',
+          '@keyframes agentPulse': {
+            '0%, 100%': { boxShadow: '0 0 4px rgba(37, 99, 235, 0.3)' },
+            '50%': { boxShadow: '0 0 12px rgba(37, 99, 235, 0.6)' },
+          },
+          minWidth: 100,
+          textAlign: 'center',
+        }}
+      >
+        <Typography
+          sx={{
+            fontSize: 12,
+            fontWeight: isActive ? 700 : 500,
+            color: isActive ? '#ffffff' : '#1e293b',
+            lineHeight: 1.2,
+          }}
+        >
+          {label}
+        </Typography>
+      </Box>
+      {isActive && (
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 0.5, mt: 0.5 }}>
+          <Box sx={{ width: 6, height: 6, borderRadius: '50%', bgcolor: '#22c55e' }} />
+          <Typography sx={{ fontSize: 9, fontWeight: 600, color: '#2563eb' }}>{GRAPH_ACTIVE_BADGE}</Typography>
+        </Box>
+      )}
+      <Handle type="source" id="source-bottom" position={Position.Bottom} style={{ opacity: 0 }} />
+      <Handle type="source" id="source-right" position={Position.Right} style={{ opacity: 0 }} />
+    </>
+  )
+}
+
+export const AgentNode = memo(AgentNodeComponent)

package/template/app/components/atoms/AppLogo.tsx

@@ -0,0 +1,44 @@
+const MARK_PATH =
+  'M 560.50 870.11 C544.60,872.39 493.52,873.54 477.50,871.98 C429.64,867.32 381.89,853.57 340.50,832.53 C316.53,820.34 296.91,807.54 274.00,789.15 C261.51,779.12 236.58,754.18 225.88,741.00 C180.72,685.39 153.06,618.33 146.08,547.58 C144.70,533.59 144.69,497.56 146.06,483.42 C151.82,424.12 172.58,365.85 205.33,317.00 C257.37,239.38 349.03,180.93 442.00,166.07 C464.04,162.55 478.67,161.69 505.88,162.29 C555.48,163.38 594.16,171.21 639.00,189.25 C659.38,197.45 694.34,215.75 702.79,222.64 L 705.07 224.50 L 699.18 234.00 C695.94,239.23 690.48,248.11 687.05,253.75 C683.61,259.39 680.44,264.00 679.99,264.00 C679.54,264.00 674.52,261.04 668.84,257.42 C655.11,248.69 625.53,234.22 610.00,228.66 C583.75,219.25 553.35,212.43 527.00,210.05 C512.11,208.70 478.67,208.71 464.00,210.07 C448.87,211.47 421.38,216.98 407.00,221.49 C359.48,236.39 317.14,262.02 281.44,297.50 C258.31,320.48 241.26,343.77 226.14,373.00 C202.42,418.87 191.69,463.62 191.74,516.50 C191.78,555.23 197.10,585.98 210.10,622.48 C215.21,636.83 229.38,665.53 238.40,679.79 C258.58,711.72 284.51,739.87 314.60,762.50 C358.47,795.49 416.85,818.66 475.00,826.15 C490.90,828.19 536.15,827.93 552.00,825.69 C589.08,820.47 619.66,811.35 651.80,795.94 C758.47,744.79 825.34,642.74 828.69,526.00 C830.16,474.91 818.90,425.90 794.39,376.67 C790.88,369.61 788.00,363.68 788.00,363.49 C788.00,362.88 830.91,349.00 832.81,349.00 C834.20,349.00 836.30,352.42 841.26,362.75 C849.43,379.78 850.04,381.23 856.16,398.49 C887.34,486.35 882.15,583.99 841.89,667.00 C819.83,712.49 793.79,746.96 757.00,779.42 C700.79,829.00 634.78,859.47 560.50,870.11 ZM 335.80 648.00 L 331.50 660.50 L 297.25 660.76 C278.41,660.91 263.00,660.77 263.00,660.45 C263.00,659.86 278.07,617.38 291.17,581.00 C295.04,570.28 308.24,533.38 320.52,499.00 C332.80,464.62 347.87,422.55 354.01,405.50 C360.15,388.45 366.62,370.45 368.39,365.50 L 371.61 356.50 L 409.10 356.24 L 446.59 355.98 L 457.22 385.74 C463.07,402.11 475.32,436.42 484.45,462.00 C493.58,487.58 502.36,512.10 503.97,516.50 C505.58,520.90 515.27,547.90 525.51,576.50 C535.75,605.10 546.52,635.12 549.43,643.22 C552.35,651.31 554.49,658.17 554.20,658.47 C553.91,658.76 537.97,659.00 518.78,659.00 L 483.90 659.00 L 482.58 655.75 C481.85,653.96 477.26,640.69 472.38,626.26 L 463.50 600.02 L 352.45 600.00 L 346.28 617.75 C342.88,627.51 338.17,641.12 335.80,648.00 ZM 687.50 661.35 C660.93,665.46 637.94,663.57 615.06,655.41 C601.27,650.49 591.03,644.01 580.37,633.46 C572.36,625.53 570.61,623.14 566.13,613.96 C560.20,601.81 557.14,589.54 556.76,576.32 L 556.50 567.50 L 616.57 566.97 L 617.62 574.74 C620.91,598.97 640.94,614.52 666.50,612.68 C689.18,611.04 704.64,597.72 707.93,576.97 C709.92,564.44 706.02,552.13 697.07,542.67 C687.39,532.43 676.26,529.04 652.23,529.02 L 636.96 529.00 L 637.23 504.75 L 637.50 480.50 L 654.00 479.93 C674.62,479.21 680.48,477.31 690.26,468.16 C697.55,461.34 700.26,455.37 700.77,445.00 C701.35,433.25 698.88,426.59 691.06,418.89 C682.94,410.89 676.70,408.61 663.00,408.61 C649.61,408.61 643.48,410.81 635.00,418.66 C628.14,425.01 625.48,428.98 622.42,437.42 L 620.22 443.50 L 591.93 443.77 C576.36,443.91 563.30,443.69 562.90,443.27 C561.92,442.23 564.65,426.97 567.16,419.51 C578.07,387.00 606.35,365.08 645.92,358.47 C659.23,356.24 682.31,356.90 695.19,359.88 C714.30,364.30 729.13,372.16 741.60,384.49 C755.80,398.54 761.90,412.81 762.75,434.04 C763.17,444.62 762.92,447.89 761.13,455.04 C756.76,472.50 747.16,486.30 733.31,495.04 C729.72,497.32 727.16,499.52 727.64,499.94 C728.11,500.37 731.08,501.76 734.24,503.03 C747.92,508.57 761.40,522.70 767.11,537.47 C771.91,549.87 773.33,559.36 772.69,574.50 C772.04,589.80 770.30,597.27 764.55,609.50 C751.70,636.85 723.57,655.78 687.50,661.35 ZM 370.99 545.75 C371.00,546.73 379.19,547.00 408.61,547.00 C438.28,547.00 446.12,546.74 445.75,545.75 C445.49,545.06 437.02,519.64 426.93,489.25 C416.83,458.86 408.31,434.00 407.99,434.00 C407.33,434.00 370.98,543.79 370.99,545.75 Z'
+const DOT_PATH =
+  'M 806.90 322.97 C785.45,328.12 765.24,322.48 749.97,307.09 C737.88,294.91 733.00,282.92 733.00,265.40 C733.00,254.57 734.84,247.01 739.72,237.71 C746.39,225.02 759.41,213.62 772.68,208.85 C780.93,205.88 799.11,205.17 807.92,207.47 C830.44,213.34 847.16,231.12 851.67,253.99 C855.45,273.14 849.31,292.70 835.02,307.04 C826.17,315.92 818.73,320.14 806.90,322.97 Z'
+
+export type AppLogoProps = {
+  /** Fill color for the A3 + ring (default: dark gray) */
+  markColor?: string
+  /** Fill color for the accent dot (default: orange) */
+  dotColor?: string
+  width?: number | string
+  height?: number | string
+  className?: string
+  'aria-label'?: string
+}
+
+const DEFAULT_MARK = 'rgb(4,4,4)'
+const DEFAULT_DOT = 'rgb(248,175,81)'
+
+export function AppLogo({
+  markColor = DEFAULT_MARK,
+  dotColor = DEFAULT_DOT,
+  width = 32,
+  height = 32,
+  className,
+  'aria-label': ariaLabel = 'A3',
+}: AppLogoProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 1024 1024"
+      width={width}
+      height={height}
+      className={className}
+      aria-label={ariaLabel}
+      role="img"
+    >
+      <g>
+        <path d={MARK_PATH} fill={markColor} />
+        <path d={DOT_PATH} fill={dotColor} />
+      </g>
+    </svg>
+  )
+}

package/template/app/components/atoms/ChatContainer.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import styled from 'styled-components'
+import { Paper } from '@mui/material'
+
+export const ChatContainer = styled(Paper)`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+`

package/template/app/components/atoms/ChatHeader.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import styled from 'styled-components'
+import { IconButton, Tooltip, CircularProgress } from '@mui/material'
+import RestartAltIcon from '@mui/icons-material/RestartAlt'
+import type { Theme } from '@mui/material/styles'
+import { CHAT_RESTART } from '@constants/ui'
+
+const HeaderContainer = styled.div`
+  border-bottom: 1px solid ${({ theme }) => (theme as Theme).palette.divider};
+  background-color: ${({ theme }) => (theme as Theme).palette.background.paper};
+  padding: ${({ theme }) => (theme as Theme).spacing(2, 3)};
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: ${({ theme }) => (theme as Theme).spacing(1)};
+  min-height: 40px;
+  height: 40px;
+`
+
+interface ChatHeaderProps {
+  children?: ReactNode
+  onRestart?: () => void
+  isRestarting?: boolean
+}
+
+export function ChatHeader({ children, onRestart, isRestarting }: ChatHeaderProps) {
+  return (
+    <HeaderContainer>
+      {children}
+      {onRestart && (
+        <Tooltip title={CHAT_RESTART}>
+          <span>
+            <IconButton
+              aria-label={CHAT_RESTART}
+              onClick={onRestart}
+              disabled={isRestarting}
+              size="small"
+            >
+              {isRestarting ? <CircularProgress size={16} /> : <RestartAltIcon fontSize="small" />}
+            </IconButton>
+          </span>
+        </Tooltip>
+      )}
+    </HeaderContainer>
+  )
+}

package/template/app/components/atoms/MarkdownRenderer.tsx

@@ -0,0 +1,134 @@
+'use client'
+
+import { styled, useTheme } from '@mui/material/styles'
+import Typography from '@mui/material/Typography'
+import Link from '@mui/material/Link'
+import ReactMarkdown, { type Components } from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
+import { REPO_URL } from '@constants/paths'
+
+const MarkdownRoot = styled('div')(({ theme }) => ({
+  '& > *:first-of-type': { marginTop: 0 },
+  '& > *:last-child': { marginBottom: 0 },
+  '& ul, & ol': {
+    paddingLeft: theme.spacing(3),
+    marginTop: theme.spacing(0.5),
+    marginBottom: theme.spacing(0.5),
+  },
+  '& li': {
+    marginBottom: theme.spacing(0.25),
+  },
+  '& blockquote': {
+    margin: theme.spacing(1, 0),
+    padding: theme.spacing(0.5, 2),
+    borderLeft: `4px solid ${theme.palette.primary.main}`,
+    backgroundColor: theme.palette.action.hover,
+  },
+}))
+
+function useMarkdownComponents(): Components {
+  const theme = useTheme()
+
+  return {
+    p: ({ children }) => (
+      <Typography variant="body2" sx={{ my: 0.5 }}>
+        {children}
+      </Typography>
+    ),
+    h1: ({ children }) => (
+      <Typography variant="h5" sx={{ mt: 2, mb: 1, fontWeight: 600 }}>
+        {children}
+      </Typography>
+    ),
+    h2: ({ children }) => (
+      <Typography variant="h6" sx={{ mt: 1.5, mb: 0.75, fontWeight: 600 }}>
+        {children}
+      </Typography>
+    ),
+    h3: ({ children }) => (
+      <Typography variant="subtitle1" sx={{ mt: 1.5, mb: 0.5, fontWeight: 600 }}>
+        {children}
+      </Typography>
+    ),
+    h4: ({ children }) => (
+      <Typography variant="subtitle2" sx={{ mt: 1, mb: 0.5, fontWeight: 600 }}>
+        {children}
+      </Typography>
+    ),
+    h5: ({ children }) => (
+      <Typography variant="body1" sx={{ mt: 1, mb: 0.5, fontWeight: 600 }}>
+        {children}
+      </Typography>
+    ),
+    h6: ({ children }) => (
+      <Typography variant="body2" sx={{ mt: 1, mb: 0.5, fontWeight: 600 }}>
+        {children}
+      </Typography>
+    ),
+    a: ({ href, children }) => {
+      const resolvedHref = href?.match(/^\.?\/?docs\/.*\.md$/) ? `${REPO_URL}/${href.replace(/^\.\//, '')}` : href
+
+      return (
+        <Link href={resolvedHref} target="_blank" rel="noopener noreferrer">
+          {children}
+        </Link>
+      )
+    },
+    li: ({ children }) => (
+      <Typography variant="body2" component="li" sx={{ my: 0.25 }}>
+        {children}
+      </Typography>
+    ),
+    code: ({ className, children, ...props }) => {
+      const match = /language-(\w+)/.exec(className || '')
+      const codeString = String(children as string).replace(/\n$/, '')
+      const isBlock = !!match || codeString.includes('\n')
+
+      if (isBlock) {
+        return (
+          <SyntaxHighlighter
+            style={oneLight}
+            language={match?.[1] || 'text'}
+            PreTag="div"
+            customStyle={{
+              margin: theme.spacing(1, 0),
+              borderRadius: theme.shape.borderRadius,
+              fontSize: '0.8125rem',
+            }}
+          >
+            {codeString}
+          </SyntaxHighlighter>
+        )
+      }
+
+      return (
+        <code
+          style={{
+            backgroundColor: theme.palette.action.hover,
+            padding: '2px 6px',
+            borderRadius: theme.shape.borderRadius,
+            fontSize: '0.8125rem',
+            fontFamily: 'monospace',
+          }}
+          {...props}
+        >
+          {children}
+        </code>
+      )
+    },
+  }
+}
+
+export function MarkdownRenderer({ content }: { content: string }) {
+  const components = useMarkdownComponents()
+
+  return (
+    <MarkdownRoot>
+      <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
+        {content}
+      </ReactMarkdown>
+    </MarkdownRoot>
+  )
+}

package/template/app/components/atoms/MessageBubble.tsx

@@ -0,0 +1,21 @@
+import styled from 'styled-components'
+import { Paper } from '@mui/material'
+import type { Theme } from '@mui/material/styles'
+
+export const MessageBubble = styled(Paper)<{ $isUser: boolean }>`
+  max-width: 80%;
+  padding: ${({ theme }) => (theme as Theme).spacing(1.5, 2)};
+  border-radius: ${({ theme }) => (theme as Theme).spacing(2.5)};
+  ${({ $isUser, theme }) =>
+    $isUser
+      ? `
+    background-color: ${(theme as Theme).palette.primary.main};
+    color: ${(theme as Theme).palette.primary.contrastText};
+    border-bottom-right-radius: ${(theme as Theme).spacing(0.5)};
+  `
+      : `
+    background-color: ${(theme as Theme).palette.grey[200]};
+    color: ${(theme as Theme).palette.text.primary};
+    border-bottom-left-radius: ${(theme as Theme).spacing(0.5)};
+  `}
+`

package/template/app/components/atoms/TransitionEdge.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import { memo } from 'react'
+import { BaseEdge, getBezierPath, type EdgeProps } from '@xyflow/react'
+
+function DeterministicEdgeComponent(props: EdgeProps) {
+  const [edgePath] = getBezierPath(props)
+  return (
+    <BaseEdge
+      path={edgePath}
+      markerEnd={props.markerEnd}
+      style={{ stroke: '#64748b', strokeWidth: 1.5 }}
+    />
+  )
+}
+
+function DynamicEdgeComponent(props: EdgeProps) {
+  const [edgePath] = getBezierPath(props)
+  return (
+    <BaseEdge
+      path={edgePath}
+      markerEnd={props.markerEnd}
+      style={{ stroke: '#94a3b8', strokeWidth: 1.5, strokeDasharray: '5,3' }}
+    />
+  )
+}
+
+function SelfLoopEdgeComponent({ targetX, targetY, markerEnd, data }: EdgeProps) {
+  const isDynamic = (data as Record<string, unknown>)?.isDynamic
+  const stroke = isDynamic ? '#94a3b8' : '#64748b'
+
+  // Small arc above the node's target handle (top center)
+  const d = `M ${targetX - 12} ${targetY} C ${targetX - 12} ${targetY - 25}, ${targetX + 12} ${targetY - 25}, ${targetX + 12} ${targetY}`
+
+  return (
+    <path
+      d={d}
+      fill="none"
+      stroke={stroke}
+      strokeWidth={1.5}
+      strokeDasharray={isDynamic ? '5,3' : undefined}
+      markerEnd={markerEnd}
+    />
+  )
+}
+
+export const DeterministicEdge = memo(DeterministicEdgeComponent)
+export const DynamicEdge = memo(DynamicEdgeComponent)
+export const SelfLoopEdge = memo(SelfLoopEdgeComponent)

package/template/app/components/atoms/index.ts

@@ -0,0 +1,7 @@
+export { AgentNode } from './AgentNode'
+export { AppLogo } from './AppLogo'
+export { MarkdownRenderer } from './MarkdownRenderer'
+export { MessageBubble } from './MessageBubble'
+export { ChatContainer } from './ChatContainer'
+export { ChatHeader } from './ChatHeader'
+export { DeterministicEdge, DynamicEdge, SelfLoopEdge } from './TransitionEdge'

package/template/app/components/molecules/ChatInput.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import { useState, useCallback, useEffect, useRef } from 'react'
+import styled from 'styled-components'
+import { TextField, Button, Box } from '@mui/material'
+import type { Theme } from '@mui/material/styles'
+import SendIcon from '@mui/icons-material/Send'
+import { CHAT_PLACEHOLDER, CHAT_SEND } from '@constants/ui'
+
+type Props = {
+  onSubmit: (text: string) => void | Promise<void>
+  disabled?: boolean
+  placeholder?: string
+}
+
+const InputContainer = styled(Box)`
+  border-top: 1px solid ${({ theme }) => (theme as Theme).palette.divider};
+  background-color: ${({ theme }) => (theme as Theme).palette.background.paper};
+  padding: ${({ theme }) => (theme as Theme).spacing(2)};
+  flex-shrink: 0;
+`
+
+const InputForm = styled.form`
+  display: flex;
+  gap: ${({ theme }) => (theme as Theme).spacing(1.5)};
+`
+
+export function ChatInput({ onSubmit, disabled, placeholder = CHAT_PLACEHOLDER }: Props) {
+  const [value, setValue] = useState('')
+  const inputRef = useRef<HTMLTextAreaElement>(null)
+  const prevDisabled = useRef(disabled)
+
+  useEffect(() => {
+    // When transitioning from disabled (true) back to enabled (false), restore focus
+    if (prevDisabled.current && !disabled) {
+      // Small timeout to ensure the clear-disabled DOM update finishes
+      const timer = setTimeout(() => inputRef.current?.focus(), 10)
+      return () => clearTimeout(timer)
+    }
+    prevDisabled.current = disabled
+  }, [disabled])
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault()
+      const trimmed = value.trim()
+      if (!trimmed || disabled) return
+      void onSubmit(trimmed)
+      setValue('')
+    },
+    [value, disabled, onSubmit],
+  )
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault()
+        handleSubmit(e)
+      }
+    },
+    [handleSubmit],
+  )
+
+  return (
+    <InputContainer>
+      <InputForm onSubmit={handleSubmit}>
+        <TextField
+          inputRef={inputRef}
+          fullWidth
+          multiline
+          maxRows={6}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          disabled={disabled}
+          variant="outlined"
+          size="small"
+          autoComplete="off"
+          data-testid="chat-input"
+        />
+        <Button
+          type="submit"
+          variant="contained"
+          disabled={disabled || !value.trim()}
+          startIcon={<SendIcon />}
+          data-testid="chat-send"
+        >
+          {CHAT_SEND}
+        </Button>
+      </InputForm>
+    </InputContainer>
+  )
+}

package/template/app/components/molecules/ChatMessage.tsx

@@ -0,0 +1,45 @@
+import styled, { keyframes } from 'styled-components'
+import { Typography } from '@mui/material'
+import { MarkdownRenderer, MessageBubble } from '@atoms'
+import { MessageSender } from '@genui/a3'
+import type { Message } from '@genui/a3'
+
+const MessageRow = styled.div<{ $isUser: boolean }>`
+  display: flex;
+  justify-content: ${({ $isUser }) => ($isUser ? 'flex-end' : 'flex-start')};
+`
+
+const blink = keyframes`
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+`
+
+const StreamingCursor = styled.span`
+  display: inline-block;
+  width: 6px;
+  height: 14px;
+  margin-left: 2px;
+  background-color: currentColor;
+  vertical-align: text-bottom;
+  animation: ${blink} 0.8s step-end infinite;
+`
+
+export function ChatMessage({ message }: { message: Message }) {
+  const isUser = message?.metadata?.source === MessageSender.USER
+  return (
+    <MessageRow $isUser={isUser} data-testid="chat-message">
+      <MessageBubble $isUser={isUser} elevation={0}>
+        {isUser ? (
+          <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
+            {message.text.trim()}
+          </Typography>
+        ) : (
+          <>
+            <MarkdownRenderer content={message.text.trim()} />
+            {message.isStreaming && <StreamingCursor />}
+          </>
+        )}
+      </MessageBubble>
+    </MessageRow>
+  )
+}

package/template/app/components/molecules/index.ts

@@ -0,0 +1,2 @@
+export { ChatMessage } from './ChatMessage'
+export { ChatInput } from './ChatInput'

package/template/app/components/organisms/AgentGraph.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import { useMemo } from 'react'
+import { ReactFlow, ReactFlowProvider } from '@xyflow/react'
+import { Paper, Typography, Box, Stack } from '@mui/material'
+import { AgentNode } from '@atoms/AgentNode'
+import { DeterministicEdge, DynamicEdge, SelfLoopEdge } from '@atoms/TransitionEdge'
+import { getGraphLayout } from '@lib/getGraphLayout'
+import type { AgentInfo } from '@lib/getAgentGraphData'
+import { GRAPH_HEADING, GRAPH_LEGEND_DETERMINISTIC, GRAPH_LEGEND_LLM } from '@constants/ui'
+import '@xyflow/react/dist/style.css'
+
+interface AgentGraphProps {
+  agents: AgentInfo[]
+  activeAgentId: string | null
+}
+
+const nodeTypes = { agent: AgentNode }
+const edgeTypes = {
+  deterministic: DeterministicEdge,
+  dynamic: DynamicEdge,
+  selfLoop: SelfLoopEdge,
+}
+
+export function AgentGraph({ agents, activeAgentId }: AgentGraphProps) {
+  const { nodes, edges } = useMemo(() => getGraphLayout(agents, activeAgentId), [agents, activeAgentId])
+
+  if (agents.length === 0) return null
+
+  return (
+    <Paper elevation={0} sx={{ p: 2, border: 1, borderColor: 'divider', borderRadius: 3 }}>
+      <Stack direction="row" justifyContent="space-between" alignItems="center" mb={1}>
+        <Typography variant="subtitle2" fontWeight="bold">
+          {GRAPH_HEADING}
+        </Typography>
+        <Stack direction="row" gap={2} alignItems="center">
+          <Stack direction="row" gap={0.5} alignItems="center">
+            <Box sx={{ width: 20, height: 0, borderTop: '2px solid #64748b' }} />
+            <Typography variant="caption" color="text.secondary">
+              {GRAPH_LEGEND_DETERMINISTIC}
+            </Typography>
+          </Stack>
+          <Stack direction="row" gap={0.5} alignItems="center">
+            <Box sx={{ width: 20, height: 0, borderTop: '2px dashed #94a3b8' }} />
+            <Typography variant="caption" color="text.secondary">
+              {GRAPH_LEGEND_LLM}
+            </Typography>
+          </Stack>
+        </Stack>
+      </Stack>
+      <Box sx={{ height: 350 }}>
+        <ReactFlowProvider>
+          <ReactFlow
+            nodes={nodes}
+            edges={edges}
+            nodeTypes={nodeTypes}
+            edgeTypes={edgeTypes}
+            fitView
+            fitViewOptions={{ padding: 0.4 }}
+            nodesDraggable={false}
+            nodesConnectable={false}
+            elementsSelectable={false}
+            zoomOnScroll={false}
+            zoomOnPinch={false}
+            zoomOnDoubleClick={false}
+            panOnDrag={false}
+            panOnScroll={false}
+            preventScrolling={false}
+            proOptions={{ hideAttribution: true }}
+          />
+        </ReactFlowProvider>
+      </Box>
+    </Paper>
+  )
+}