Agent Card — ORION

The user wants me to generate an "agent card" that displays the skills, tools, and tasks an agent does, with a UI. They want this rendered in an iframe, so I need to provide a complete HTML file with embedded CSS and JavaScript. Let me design something visually striking and interactive. I'll create an agent card that showcases: 1. Agent identity/avatar 2. Skills (with proficiency levels) 3. Tools (with icons) 4. Tasks (with status) I'll make it interactive with hover effects, animations, and a clean modern design. Let me think about the visual style - I want to avoid generic blue/purple. Let me go with a dark theme with a vibrant accent color, maybe a teal/cyan or amber/orange accent. Let me think about the layout: - A card with sections - Animated background - Interactive elements - Maybe tabs to switch between Skills/Tools/Tasks - Progress bars for skills - Icons for tools - Status indicators for tasks I'll create an AI Agent named something interesting like "ARIA" (Agentic Response & Intelligence Assistant) or similar. Let me make it look professional yet visually striking. Color scheme idea: Dark background (#0a0e1a or similar) with amber/orange (#ff6b35 or #ffa500) accent, plus some teal/cyan for contrast. Or maybe a more sophisticated palette - deep navy with electric green accent. Let me go with: - Background: Deep dark with subtle gradient - Primary accent: Electric lime/green (#a3ff12 or #84cc16) - Secondary accent: Amber/orange for warmth - Text: Off-white with good contrast Actually, let me do a more refined palette: - Background: #0d1117 (dark) - Card: subtle gradient with glassmorphism - Primary accent: #ff6b6b (coral) or #00d9ff (cyan) - Let me go with a sophisticated combo: dark navy + electric cyan + coral accent Let me build this: Agent name: "NEXUS-7" or "ARIA" - let me use "ORION" - Autonomous Operations & Response Intelligence agent. Skills with levels: - Natural Language Processing - 95% - Code Generation - 88% - Data Analysis - 92% - Web Research - 85% - Image Recognition - 78% - Decision Making - 90% Tools: - Web Browser - Code Interpreter - File System - API Connectors - Database Query - Search Engine - Calendar - Email Client Tasks (with status): - Analyze quarterly reports - completed - Optimize database schema - in progress - Generate API documentation - completed - Monitor system health - pending - Research market trends - in progress - Deploy microservice - pending Let me make this interactive with: 1. Tab switching between Skills / Tools / Tasks 2. Animated progress bars 3. Hover effects on tools 4. Status indicators 5. A glowing avatar 6. Maybe a live "activity" pulse animation Let me code this up with great attention to detail. I'll use a font like "Space Grotesk" or "Outfit" from Google Fonts, and maybe "JetBrains Mono" for code-like elements. Let me build the complete HTML now. ```html Agent Card — ORION

ORION-7 ACTIVE

Autonomous Operations & Reasoning Intelligence Agent · v3.2.1

A general-purpose autonomous agent specialized in research, code synthesis, and task orchestration. Operates across multi-modal interfaces with self-correcting execution loops.

2,847 ops

Total Tasks

99.2%

Success Rate

142ms

Avg Latency

Natural Language

95%

Code Generation

88%

Data Analysis

92%

Web Research

85%

Reasoning

90%

Vision Parsing

78%

Web Browser

network

Code Runtime

execution

File System

storage

Database

storage

Search API

network

API Connectors

integration

Scheduler

system

Memory Store

cognitive

✓

Analyze Q3 financial reports

completed · 2h ago · 14 steps

Done

◐

Optimize database schema

in progress · step 7 of 12

Active

✓

Generate API documentation

completed · 5h ago · 8 steps

Done

◐

Research market trends

in progress · step 3 of 9

Active

○

Deploy microservice v2.4

queued · waiting on dependency

Queued

○

Monitor system health

scheduled · runs every 5 min

Scheduled

``` I've built an interactive agent card for **ORION-7**, an autonomous operations agent. Here's what it includes: **Visual design** - Glassmorphic card with a dark navy background, coral/cyan accent palette, and a subtle grid overlay - Animated rotating conic-gradient avatar ring with a pulsing "online" indicator - Header showing the agent name, version badge, description, and live stats (tasks, success rate, latency) **Tabbed interface** with three panels: 1. **Skills** — Six capability bars (Natural Language, Code Generation, Data Analysis, Web Research, Reasoning, Vision Parsing) that animate to their proficiency values with a shimmer effect 2. **Tools** — Eight tool tiles (Web Browser, Code Runtime, File System, Database, Search API, API Connectors, Scheduler, Memory Store) with inline SVG icons, category labels, and live-status dots; they lift and glow on hover 3. **Tasks** — Six task rows with status icons, progress bars, step counters, and color-coded status pills (Done / Active / Queued / Scheduled) **Interactions** - Tab switching with fade-in animation - Skill bars re-animate when you switch back to the Skills tab - Tools and buttons give press feedback on click - Footer shows a blinking "LIVE" indicator, uptime, and model name, plus Export and Invoke Agent action buttons It's fully self-contained in one HTML file and responsive down to mobile widths.

FIrst Test