Skip to main content
The Sentinel AI dashboard is a Next.js-based web interface that provides real-time monitoring and control of your autonomous DevOps agent. Built with modern web technologies, it offers a responsive and intuitive experience for managing infrastructure health.

​
Architecture

The dashboard is built using the following technologies:
  • Framework: Next.js 14+ with App Router
  • UI Components: React with shadcn/ui component library
  • Styling: Tailwind CSS with custom design tokens
  • Real-time Communication: WebSocket for live log streaming
  • API Client: Axios and Fetch API for REST and SSE endpoints

Frontend Stack

Next.js App Router with TypeScript and React 18+

Backend API

FastAPI (Python) with CORS and WebSocket support

Real-time Updates

WebSocket connections for live log streaming

Responsive Design

Mobile-first design with Tailwind CSS

​
Main Layout

The dashboard follows a three-column responsive layout: 
// app/page.tsx
export default function Home() {
  const { logs, isConnected } = useLogs();
  const [services, setServices] = useState<StatusResponse | null>(null);

  return (
    <main className="min-h-screen bg-background text-foreground p-4 md:p-6 lg:p-8">
      <Header />
      
      <section className="space-y-4">
        <StatusGrid services={services} />
      </section>

      <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
        {/* Terminal & History Tabs */}
        <div className="xl:col-span-2">
          <Tabs defaultValue="terminal">
            <TabsContent value="terminal">
              <Terminal logs={logs} />
            </TabsContent>
            <TabsContent value="history">
              <ActionHistory logs={logs} />
            </TabsContent>
          </Tabs>
        </div>

        {/* Chat Panel */}
        <div className="space-y-6">
          <ChatPanel />
        </div>
      </div>
    </main>
  );
}

​
Key Components

​
Header Component

The header displays the agent’s current status and provides control buttons: 
// components/dashboard/Header.tsx
export function Header() {
  const [agentState, setAgentState] = useState<AgentState>({
    status: 'idle',
    last_run: null,
    current_step: null
  });

  // Poll agent state every 2 seconds
  useEffect(() => {
    const poll = async () => {
      const state = await api.getAgentState();
      setAgentState(state);
    };
    poll();
    const interval = setInterval(poll, 2000);
    return () => clearInterval(interval);
  }, []);

  // Render control buttons based on status
  const renderActions = () => {
    if (agentState.status === 'waiting') {
      return <Button>Review Actions</Button>;
    }
    if (agentState.status === 'running') {
      return <Button onClick={handleStop}>Stop Agent</Button>;
    }
    return <Button onClick={handleRunScan}>Run Agent Scan</Button>;
  };
}
The header polls the /agent/state endpoint every 2 seconds to keep the UI synchronized with the backend state.

​
Agent States

The dashboard supports the following agent states:

Idle

Agent is not running. Ready to start a new scan.

Running

Agent is actively monitoring and executing remediation tasks.

Waiting

Agent requires user approval before executing critical commands.

Error

Agent encountered an error during execution.

​
Responsive Breakpoints

The dashboard uses Tailwind CSS breakpoints:
BreakpointWidthLayout
sm640pxSingle column
md768pxTwo-column status grid
lg1024pxFour-column status grid
xl1280pxThree-column main layout

​
Environment Variables

Configure the dashboard using the following environment variables: 
# .env.local
NEXT_PUBLIC_API_URL=http://localhost:8000
The NEXT_PUBLIC_ prefix is required for environment variables that need to be accessible in the browser.

​
Starting the Dashboard

To run the development server: 
cd frontend
npm install
npm run dev
The dashboard will be available at http://localhost:3000.
For production deployments, use npm run build followed by npm start to serve the optimized build.

​
API Integration

The dashboard communicates with the FastAPI backend through:
  1. REST endpoints - For status queries and control actions
  2. WebSocket - For real-time log streaming
  3. Server-Sent Events (SSE) - For streaming chat responses
All API calls are abstracted in /lib/api.ts for maintainability.

​
Next Steps

Terminal

Learn about the live terminal component

Chat Interface

Explore the RAG-powered chat panel

Service Status

Understand service status monitoring

Configuration

Configure dashboard settings

Build docs developers (and LLMs) love

Get started for freeTalk to us