4 files changed, 290 insertions, 0 deletions
diff --git a/web/templates/agent-context.html b/web/templates/agent-context.html
new file mode 100644
index 0000000..3a4778a
--- /dev/null
+++ b/web/templates/agent-context.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Agent Context - {{.AgentName}}</title>
+    <style>
+        body { font-family: system-ui, sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; background: #1a1a2e; color: #eee; }
+        .card { background: #16213e; border-radius: 8px; padding: 24px; margin-bottom: 20px; }
+        h1 { color: #e94560; margin-top: 0; }
+        h2 { color: #0f3460; font-size: 1.2em; margin-top: 24px; }
+        .label { color: #888; font-size: 0.9em; margin-bottom: 4px; }
+        .value { font-family: monospace; background: #0f0f23; padding: 8px 12px; border-radius: 4px; word-break: break-all; margin-bottom: 16px; }
+        .summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 20px; }
+        .summary-item { background: #0f3460; padding: 12px; border-radius: 6px; text-align: center; }
+        .summary-value { font-size: 1.5em; font-weight: bold; color: #e94560; }
+        .summary-label { font-size: 0.8em; color: #888; }
+        table { width: 100%; border-collapse: collapse; margin-top: 16px; }
+        th, td { padding: 10px; text-align: left; border-bottom: 1px solid #333; }
+        th { background: #0f3460; color: #fff; }
+        tr:hover { background: #1a1a2e; }
+        .source { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.8em; }
+        .source-todoist { background: #e44332; color: #fff; }
+        .source-trello { background: #0079bf; color: #fff; }
+        .source-plantoeat { background: #5cb85c; color: #fff; }
+        .due-overdue { color: #dc3545; }
+        .due-today { color: #ffc107; }
+        .due-future { color: #28a745; }
+        a { color: #4da6ff; }
+    </style>
+</head>
+<body>
+    <script type="application/json" id="agent-data">
+{
+    "generated_at": "{{.GeneratedAt}}",
+    "range": {
+        "start": "{{.RangeStart}}",
+        "end": "{{.RangeEnd}}"
+    },
+    "summary": {
+        "total_items": {{with .Summary}}{{.total_items}}{{else}}0{{end}},
+        "overdue": {{with .Summary}}{{.overdue}}{{else}}0{{end}},
+        "today": {{with .Summary}}{{.today}}{{else}}0{{end}}
+    },
+    "timeline": [{{range $i, $item := .Timeline}}{{if $i}},{{end}}
+        {
+            "id": "{{$item.ID}}",
+            "source": "{{$item.Source}}",
+            "type": "{{$item.Type}}",
+            "title": "{{$item.Title}}",
+            "description": "{{$item.Description}}",
+            "due": {{if $item.Due}}"{{$item.Due.Format "2006-01-02T15:04:05Z07:00"}}"{{else}}null{{end}},
+            "priority": {{$item.Priority}},
+            "completable": {{$item.Completable}},
+            "url": "{{$item.URL}}"
+        }{{end}}
+    ]
+}
+    </script>
+
+    <div class="card">
+        <h1>Agent Context</h1>
+        <p>Timeline data for <strong>{{.AgentName}}</strong></p>
+
+        <div class="label">Generated At</div>
+        <div class="value">{{.GeneratedAt}}</div>
+
+        <div class="label">Date Range</div>
+        <div class="value">{{.RangeStart}} to {{.RangeEnd}}</div>
+    </div>
+
+    <div class="card">
+        <h2>Summary</h2>
+        <div class="summary">
+            <div class="summary-item">
+                <div class="summary-value">{{with .Summary}}{{.total_items}}{{else}}0{{end}}</div>
+                <div class="summary-label">Total Items</div>
+            </div>
+            <div class="summary-item">
+                <div class="summary-value">{{with .Summary}}{{.overdue}}{{else}}0{{end}}</div>
+                <div class="summary-label">Overdue</div>
+            </div>
+            <div class="summary-item">
+                <div class="summary-value">{{with .Summary}}{{.today}}{{else}}0{{end}}</div>
+                <div class="summary-label">Due Today</div>
+            </div>
+        </div>
+    </div>
+
+    <div class="card">
+        <h2>Timeline</h2>
+        {{if .Timeline}}
+        <table>
+            <thead>
+                <tr>
+                    <th>Source</th>
+                    <th>Title</th>
+                    <th>Due</th>
+                    <th>Type</th>
+                </tr>
+            </thead>
+            <tbody>
+                {{range .Timeline}}
+                <tr>
+                    <td><span class="source source-{{.Source}}">{{.Source}}</span></td>
+                    <td>
+                        {{if .URL}}<a href="{{.URL}}" target="_blank">{{.Title}}</a>{{else}}{{.Title}}{{end}}
+                        {{if .Description}}<br><small style="color: #888;">{{.Description}}</small>{{end}}
+                    </td>
+                    <td>{{if .Due}}{{.Due.Format "Jan 2, 3:04 PM"}}{{else}}-{{end}}</td>
+                    <td>{{.Type}}</td>
+                </tr>
+                {{end}}
+            </tbody>
+        </table>
+        {{else}}
+        <p>No items in the timeline for this date range.</p>
+        {{end}}
+    </div>
+</body>
+</html>
diff --git a/web/templates/agent-error.html b/web/templates/agent-error.html
new file mode 100644
index 0000000..afb3603
--- /dev/null
+++ b/web/templates/agent-error.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Error - Agent API</title>
+    <style>
+        body { font-family: system-ui, sans-serif; max-width: 600px; margin: 40px auto; padding: 20px; background: #1a1a2e; color: #eee; }
+        .card { background: #16213e; border-radius: 8px; padding: 24px; margin-bottom: 20px; border-left: 4px solid #dc3545; }
+        h1 { color: #dc3545; margin-top: 0; }
+        .status-code { font-size: 3em; color: #dc3545; font-weight: bold; }
+    </style>
+</head>
+<body>
+    <script type="application/json" id="agent-data">
+{
+    "error": "{{.Error}}",
+    "status": {{.Status}}
+}
+    </script>
+
+    <div class="card">
+        <div class="status-code">{{.Status}}</div>
+        <h1>Error</h1>
+        <p>{{.Error}}</p>
+    </div>
+</body>
+</html>
diff --git a/web/templates/agent-request.html b/web/templates/agent-request.html
new file mode 100644
index 0000000..fee5ca4
--- /dev/null
+++ b/web/templates/agent-request.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Agent Auth Request - {{.AgentName}}</title>
+    <style>
+        body { font-family: system-ui, sans-serif; max-width: 600px; margin: 40px auto; padding: 20px; background: #1a1a2e; color: #eee; }
+        .card { background: #16213e; border-radius: 8px; padding: 24px; margin-bottom: 20px; }
+        h1 { color: #e94560; margin-top: 0; }
+        .label { color: #888; font-size: 0.9em; margin-bottom: 4px; }
+        .value { font-family: monospace; background: #0f0f23; padding: 8px 12px; border-radius: 4px; word-break: break-all; margin-bottom: 16px; }
+        .status { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 0.9em; }
+        .status-pending { background: #ffc107; color: #000; }
+        .instructions { background: #1a1a2e; border: 1px solid #333; border-radius: 4px; padding: 16px; font-size: 0.9em; }
+        .instructions ol { margin: 0; padding-left: 20px; }
+        .instructions li { margin-bottom: 8px; }
+        code { background: #0f0f23; padding: 2px 6px; border-radius: 3px; }
+    </style>
+</head>
+<body>
+    <script type="application/json" id="agent-data">
+{
+    "request_token": "{{.RequestToken}}",
+    "status": "{{.Status}}",
+    "poll_url": "{{.PollURL}}",
+    "expires_at": "{{.ExpiresAt}}",
+    "agent_name": "{{.AgentName}}",
+    "agent_id": "{{.AgentID}}"
+}
+    </script>
+
+    <div class="card">
+        <h1>Agent Authentication Request</h1>
+        <p>Agent <strong>{{.AgentName}}</strong> is requesting access to your dashboard.</p>
+
+        <div class="label">Status</div>
+        <div><span class="status status-pending">{{.Status}}</span></div>
+        <br>
+
+        <div class="label">Request Token</div>
+        <div class="value">{{.RequestToken}}</div>
+
+        <div class="label">Poll URL</div>
+        <div class="value">{{.PollURL}}</div>
+
+        <div class="label">Expires At</div>
+        <div class="value">{{.ExpiresAt}}</div>
+    </div>
+
+    <div class="instructions">
+        <strong>Next Steps:</strong>
+        <ol>
+            <li>Wait for human approval on the dashboard</li>
+            <li>Poll the status URL: <code>GET {{.PollURL}}</code></li>
+            <li>When status is "approved", extract the session token from the response</li>
+            <li>Use the context URL to fetch your timeline data</li>
+        </ol>
+    </div>
+</body>
+</html>
diff --git a/web/templates/agent-status.html b/web/templates/agent-status.html
new file mode 100644
index 0000000..a77bb97
--- /dev/null
+++ b/web/templates/agent-status.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Agent Status - {{.AgentName}}</title>
+    <style>
+        body { font-family: system-ui, sans-serif; max-width: 600px; margin: 40px auto; padding: 20px; background: #1a1a2e; color: #eee; }
+        .card { background: #16213e; border-radius: 8px; padding: 24px; margin-bottom: 20px; }
+        h1 { color: #e94560; margin-top: 0; }
+        .label { color: #888; font-size: 0.9em; margin-bottom: 4px; }
+        .value { font-family: monospace; background: #0f0f23; padding: 8px 12px; border-radius: 4px; word-break: break-all; margin-bottom: 16px; }
+        .status { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 0.9em; }
+        .status-pending { background: #ffc107; color: #000; }
+        .status-approved { background: #28a745; color: #fff; }
+        .status-denied { background: #dc3545; color: #fff; }
+        .status-expired { background: #6c757d; color: #fff; }
+        .success-box { background: #155724; border: 1px solid #28a745; border-radius: 4px; padding: 16px; margin-top: 20px; }
+        .instructions { background: #1a1a2e; border: 1px solid #333; border-radius: 4px; padding: 16px; font-size: 0.9em; }
+        code { background: #0f0f23; padding: 2px 6px; border-radius: 3px; }
+    </style>
+</head>
+<body>
+    <script type="application/json" id="agent-data">
+{
+    "status": "{{.Status}}"{{if .SessionToken}},
+    "session_token": "{{.SessionToken}}",
+    "context_url": "{{.ContextURL}}",
+    "expires_at": "{{.SessionExpiresAt}}"{{end}}
+}
+    </script>
+
+    <div class="card">
+        <h1>Agent Status</h1>
+        <p>Status for agent <strong>{{.AgentName}}</strong></p>
+
+        <div class="label">Status</div>
+        <div><span class="status status-{{.Status}}">{{.Status}}</span></div>
+
+        {{if eq .Status "approved"}}
+        <div class="success-box">
+            <strong>Access Granted!</strong>
+            <p>Your session has been approved. Use the credentials below to access the context.</p>
+        </div>
+
+        <br>
+        <div class="label">Session Token</div>
+        <div class="value">{{.SessionToken}}</div>
+
+        <div class="label">Context URL</div>
+        <div class="value">{{.ContextURL}}</div>
+
+        {{if .SessionExpiresAt}}
+        <div class="label">Session Expires At</div>
+        <div class="value">{{.SessionExpiresAt}}</div>
+        {{end}}
+
+        <div class="instructions">
+            <strong>Next Step:</strong>
+            <p>Fetch your timeline data by navigating to: <code>GET {{.ContextURL}}</code></p>
+        </div>
+        {{else if eq .Status "pending"}}
+        <div class="instructions">
+            <strong>Waiting for approval...</strong>
+            <p>Refresh this page to check the current status.</p>
+        </div>
+        {{else if eq .Status "denied"}}
+        <div class="instructions">
+            <strong>Access Denied</strong>
+            <p>Your request was denied by the dashboard owner.</p>
+        </div>
+        {{else if eq .Status "expired"}}
+        <div class="instructions">
+            <strong>Request Expired</strong>
+            <p>Your authentication request has expired. Please initiate a new request.</p>
+        </div>
+        {{end}}
+    </div>
+</body>
+</html>