Skip to content

Commit 82f0c3e

Browse files
author
ZENTAXA Team
committed
Update landing page: add documentation page, redesign styling, and update index.html
1 parent eebeb39 commit 82f0c3e

File tree

4 files changed

+1476
-1433
lines changed

4 files changed

+1476
-1433
lines changed

‎documentation.html‎

Lines changed: 389 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,389 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Zentaxa - User Documentation</title>
7+
<link rel="stylesheet" href="main.css">
8+
<style>
9+
/* Documentation specific styles */
10+
.doc-header {
11+
position: relative;
12+
background: linear-gradient(to bottom, #0f172a, #050505);
13+
padding: 2rem 0;
14+
border-bottom: 1px solid var(--border);
15+
}
16+
17+
.doc-title {
18+
font-size: 2.5rem;
19+
font-weight: 700;
20+
margin-bottom: 1rem;
21+
background: linear-gradient(to right, #fff, #94a3b8);
22+
-webkit-background-clip: text;
23+
-webkit-text-fill-color: transparent;
24+
}
25+
26+
.doc-nav {
27+
position: sticky;
28+
top: 2rem;
29+
background: var(--surface);
30+
border: 1px solid var(--border);
31+
border-radius: var(--radius);
32+
padding: 1.5rem;
33+
}
34+
35+
.doc-nav ul {
36+
list-style: none;
37+
}
38+
39+
.doc-nav li {
40+
margin-bottom: 0.75rem;
41+
}
42+
43+
.doc-nav a {
44+
color: var(--text-muted);
45+
font-size: 0.95rem;
46+
}
47+
48+
.doc-nav a:hover, .doc-nav a.active {
49+
color: var(--primary);
50+
}
51+
52+
.doc-content h2 {
53+
font-size: 1.8rem;
54+
margin-top: 3rem;
55+
margin-bottom: 2rem;
56+
color: var(--text);
57+
border-bottom: 1px solid var(--border);
58+
padding-bottom: 0.5rem;
59+
}
60+
61+
.doc-content h3 {
62+
font-size: 1.4rem;
63+
margin-top: 4rem;
64+
margin-bottom: 1.5rem;
65+
color: var(--text);
66+
}
67+
68+
.doc-content p {
69+
margin-bottom: 1.2rem;
70+
color: var(--text-muted);
71+
line-height: 1.7;
72+
}
73+
74+
.doc-content ul {
75+
margin-bottom: 1.5rem;
76+
padding-left: 1.5rem;
77+
color: var(--text-muted);
78+
}
79+
80+
.doc-content li {
81+
margin-bottom: 0.5rem;
82+
}
83+
84+
.feature-grid {
85+
display: grid;
86+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
87+
gap: 1.5rem;
88+
margin-top: 1.5rem;
89+
}
90+
91+
.feature-card {
92+
background: var(--surface);
93+
border: 1px solid var(--border);
94+
padding: 1.5rem;
95+
border-radius: var(--radius);
96+
}
97+
98+
.feature-card h4 {
99+
color: var(--primary);
100+
margin-bottom: 0.5rem;
101+
font-size: 1.1rem;
102+
}
103+
104+
.step-list {
105+
counter-reset: step;
106+
list-style: none;
107+
padding: 0;
108+
}
109+
110+
.step-list li {
111+
position: relative;
112+
padding-left: 3rem;
113+
margin-bottom: 1.5rem;
114+
}
115+
116+
.step-list li::before {
117+
counter-increment: step;
118+
content: counter(step);
119+
position: absolute;
120+
left: 0;
121+
top: 0;
122+
width: 2rem;
123+
height: 2rem;
124+
background: var(--surface-hover);
125+
border: 1px solid var(--border);
126+
border-radius: 50%;
127+
display: flex;
128+
align-items: center;
129+
justify-content: center;
130+
font-weight: bold;
131+
color: var(--primary);
132+
}
133+
134+
.glossary-term {
135+
font-weight: bold;
136+
color: var(--text);
137+
}
138+
139+
.back-link {
140+
display: inline-flex;
141+
align-items: center;
142+
gap: 0.5rem;
143+
color: var(--text-muted);
144+
margin-bottom: 1rem;
145+
}
146+
147+
.back-link:hover {
148+
color: var(--primary);
149+
}
150+
151+
.doc-layout {
152+
display: grid;
153+
grid-template-columns: 250px minmax(0, 1fr);
154+
gap: 4rem;
155+
align-items: start;
156+
}
157+
158+
.doc-nav {
159+
position: sticky;
160+
top: 2rem;
161+
background: var(--surface);
162+
border: 1px solid var(--border);
163+
border-radius: var(--radius);
164+
padding: 1.5rem;
165+
max-height: calc(100vh - 4rem);
166+
overflow-y: auto;
167+
/* Reset generic nav styles from main.css */
168+
height: auto;
169+
display: block;
170+
}
171+
172+
@media (max-width: 768px) {
173+
.doc-layout {
174+
grid-template-columns: 1fr;
175+
gap: 2rem;
176+
}
177+
.doc-nav {
178+
position: relative;
179+
top: 0;
180+
margin-bottom: 2rem;
181+
}
182+
}
183+
</style>
184+
</head>
185+
<body>
186+
187+
<header class="doc-header">
188+
<div class="container">
189+
<a href="index.html" class="back-link">← Back to Home</a>
190+
<h1 class="doc-title">User Documentation</h1>
191+
<p style="color: var(--text-muted); max-width: 600px;">
192+
A comprehensive guide to monitoring, tracking, and optimizing your AI agents with Zentaxa.
193+
</p>
194+
</div>
195+
</header>
196+
197+
<div class="container" style="padding-top: 3rem; padding-bottom: 5rem;">
198+
<div class="doc-layout">
199+
200+
<!-- Sidebar Navigation -->
201+
<aside>
202+
<nav class="doc-nav">
203+
<ul>
204+
<li><a href="#introduction">1. Introduction</a></li>
205+
<li><a href="#features">2. Key Features</a></li>
206+
<li><a href="#getting-started">3. Getting Started</a></li>
207+
<li><a href="#modules">4. Using Modules</a></li>
208+
<li><a href="#troubleshooting">5. Troubleshooting</a></li>
209+
<li><a href="#best-practices">6. Best Practices</a></li>
210+
<li><a href="#glossary">7. Glossary</a></li>
211+
</ul>
212+
</nav>
213+
</aside>
214+
215+
<!-- Main Content -->
216+
<main class="doc-content">
217+
218+
<!-- 1. Introduction -->
219+
<section id="introduction">
220+
<h2>1. Introduction</h2>
221+
<h3>What is Zentaxa?</h3>
222+
<p>Zentaxa is a complete observability platform designed specifically for AI applications. Think of it as a "flight recorder" for your AI agents. It tracks every action, decision, conversation, and error in real-time, giving you full visibility into how your AI systems are performing.</p>
223+
224+
<h3>Who is it for?</h3>
225+
<p>Zentaxa is built for:</p>
226+
<ul>
227+
<li><strong>Startups</strong> building AI-native products who need to move fast without breaking things.</li>
228+
<li><strong>Enterprises</strong> deploying AI agents who need compliance, cost control, and reliability.</li>
229+
<li><strong>AI Engineering Teams</strong> who need to debug complex interactions between multiple AI agents.</li>
230+
</ul>
231+
232+
<h3>The Problem It Solves</h3>
233+
<p>AI agents can often be "black boxes"—it is difficult to know why they failed, why they gave a specific answer, or why they are costing so much money. Zentaxa solves this by providing transparency. It answers questions like:</p>
234+
<ul>
235+
<li>"Why did the agent fail to complete the task?"</li>
236+
<li>"How much did this specific conversation cost?"</li>
237+
<li>"Is the new model faster or slower than the old one?"</li>
238+
</ul>
239+
</section>
240+
241+
<!-- 2. Key Features -->
242+
<section id="features">
243+
<h2>2. Key Features</h2>
244+
<div class="feature-grid">
245+
<div class="feature-card">
246+
<h4>Run History</h4>
247+
<p>A complete log of every session your agents have run. View past conversations and tasks to understand historical performance.</p>
248+
</div>
249+
<div class="feature-card">
250+
<h4>Event Timeline</h4>
251+
<p>A visual step-by-step timeline showing exactly what happened during an agent's execution, including tool use and reasoning.</p>
252+
</div>
253+
<div class="feature-card">
254+
<h4>Token & Cost Tracking</h4>
255+
<p>Monitors usage in real-time. See exactly how much you are spending on OpenAI, Anthropic, or other providers per request.</p>
256+
</div>
257+
<div class="feature-card">
258+
<h4>Error Detection</h4>
259+
<p>Automatically highlights failed requests, crashed agents, or API timeouts so you can fix them immediately.</p>
260+
</div>
261+
<div class="feature-card">
262+
<h4>Latency Insights</h4>
263+
<p>Shows how long each step takes. Identify which part of your AI workflow is slowing down the user experience.</p>
264+
</div>
265+
<div class="feature-card">
266+
<h4>Multi-agent Observability</h4>
267+
<p>Designed for complex systems where multiple agents talk to each other. Track the flow of information between them.</p>
268+
</div>
269+
</div>
270+
</section>
271+
272+
<!-- 3. Getting Started -->
273+
<section id="getting-started">
274+
<h2>3. Getting Started</h2>
275+
<p>Follow these simple steps to start using the Zentaxa dashboard.</p>
276+
277+
<ul class="step-list">
278+
<li>
279+
<strong>Sign In / Open Dashboard</strong>
280+
<p>Open your web browser and navigate to your Zentaxa instance URL (e.g., <code>http://localhost:5173</code>). No complex setup is required for the viewer.</p>
281+
</li>
282+
<li>
283+
<strong>Connect Agents</strong>
284+
<p>Your engineering team will integrate the Zentaxa SDK into your AI agents. Once connected, data will start appearing in the dashboard automatically.</p>
285+
</li>
286+
<li>
287+
<strong>View Incoming Logs</strong>
288+
<p>Click on the <strong>"Pipeline Explorer"</strong> tab in the sidebar. You should see a list of recent activities populating in real-time.</p>
289+
</li>
290+
<li>
291+
<strong>Read Basic Metrics</strong>
292+
<p>On the main <strong>Dashboard</strong> page, look at the top cards. <strong>Success Rate</strong> should ideally be high (green). <strong>Total Cost</strong> shows your daily spend.</p>
293+
</li>
294+
</ul>
295+
</section>
296+
297+
<!-- 4. How to Use Each Module -->
298+
<section id="modules">
299+
<h2>4. How to Use Each Module</h2>
300+
301+
<h3>Dashboard (The Command Center)</h3>
302+
<p><strong>Purpose:</strong> High-level health check of your entire AI system.</p>
303+
<p><strong>What you see:</strong> Graphs showing cost trends, success vs. failure rates, and a list of currently active agents.</p>
304+
<p><strong>Typical Use Case:</strong> Check this page first thing in the morning to ensure no critical failures occurred overnight and that costs are within budget.</p>
305+
306+
<h3>Pipeline Explorer (The Detective Tool)</h3>
307+
<p><strong>Purpose:</strong> Deep dive into specific actions and requests.</p>
308+
<p><strong>What you see:</strong> A detailed table of every single interaction with an AI model. You can filter by date, agent name, or status (Success/Error).</p>
309+
<p><strong>Typical Use Case:</strong> A user reports a "weird answer" from the chatbot. You search here for the specific conversation to see exactly what the AI was asked and how it responded.</p>
310+
311+
<h3>Agent Runs (The Storyteller)</h3>
312+
<p><strong>Purpose:</strong> Understand full workflows and multi-step tasks.</p>
313+
<p><strong>What you see:</strong> Grouped actions that belong to a single task. For example, a "Research Task" might involve 5 separate AI calls. This view groups them together.</p>
314+
<p><strong>Typical Use Case:</strong> Debugging a complex agent that got stuck in a loop while trying to search the web.</p>
315+
</section>
316+
317+
<!-- 5. Troubleshooting Guide -->
318+
<section id="troubleshooting">
319+
<h2>5. Troubleshooting Guide</h2>
320+
321+
<div class="feature-card" style="margin-bottom: 1rem;">
322+
<h4>No data appearing</h4>
323+
<p>Check the time filter in the top right corner. It might be set to a time range with no activity. Try selecting "Last 24 Hours". Also, confirm with your IT team that the backend server is running.</p>
324+
</div>
325+
326+
<div class="feature-card" style="margin-bottom: 1rem;">
327+
<h4>Cost tracking not updating</h4>
328+
<p>Ensure the specific model pricing is configured in the settings. If you are using a brand new model, the system might need a manual price entry update.</p>
329+
</div>
330+
331+
<div class="feature-card" style="margin-bottom: 1rem;">
332+
<h4>Timeline empty</h4>
333+
<p>This usually happens if a run started but didn't complete properly or send intermediate steps due to a network error. Check the "Errors" tab for connection issues.</p>
334+
</div>
335+
</section>
336+
337+
<!-- 6. Best Practices -->
338+
<section id="best-practices">
339+
<h2>6. Best Practices</h2>
340+
<ul>
341+
<li><strong>Analyze Behavior:</strong> Regularly review "long-running" agents. If an agent takes 5 minutes for a simple task, it might be getting stuck or looping inefficiently.</li>
342+
<li><strong>Manage Cost:</strong> Check the "Cost" widget daily. If you see a sudden spike, investigate the "Pipeline Explorer" to see which agent is consuming the most tokens.</li>
343+
<li><strong>Compare Prompts:</strong> When your team changes an agent's instructions (prompts), note the time. Compare the "Success Rate" before and after the change to see if it improved performance.</li>
344+
<li><strong>Monitor Reliability:</strong> Aim for a success rate above 95%. If it drops, use the "Error Detection" features to identify the root cause (e.g., API timeouts or bad inputs).</li>
345+
</ul>
346+
</section>
347+
348+
<!-- 7. Glossary -->
349+
<section id="glossary">
350+
<h2>7. Glossary</h2>
351+
<dl style="display: grid; grid-template-columns: 150px 1fr; gap: 1rem; row-gap: 1.5rem;">
352+
<dt class="glossary-term">Trace</dt>
353+
<dd>A complete record of a single operation or request from start to finish.</dd>
354+
355+
<dt class="glossary-term">Node</dt>
356+
<dd>A single step or component in an AI workflow (e.g., "Search Tool" or "Summarizer").</dd>
357+
358+
<dt class="glossary-term">Event</dt>
359+
<dd>Something noteworthy that happened, like "Tool Started" or "Error Occurred".</dd>
360+
361+
<dt class="glossary-term">Agent</dt>
362+
<dd>An autonomous AI program that performs tasks and makes decisions.</dd>
363+
364+
<dt class="glossary-term">Latency</dt>
365+
<dd>The time delay between a request and a response (speed). Lower is better.</dd>
366+
367+
<dt class="glossary-term">Token Cost</dt>
368+
<dd>The price paid to AI providers (like OpenAI) based on the amount of text processed.</dd>
369+
370+
<dt class="glossary-term">Run</dt>
371+
<dd>A single execution session of an agent performing a specific task.</dd>
372+
373+
<dt class="glossary-term">API Call</dt>
374+
<dd>A message sent to an external service to get a response or data.</dd>
375+
</dl>
376+
</section>
377+
378+
</main>
379+
</div>
380+
</div>
381+
382+
<footer style="border-top: 1px solid var(--border); padding: 3rem 0; margin-top: 4rem; text-align: center; color: var(--text-muted);">
383+
<div class="container">
384+
<p>&copy; 2025 Zentaxa. All rights reserved.</p>
385+
</div>
386+
</footer>
387+
388+
</body>
389+
</html>

0 commit comments

Comments
 (0)