Running
@@ -194,10 +340,7 @@ defmodule SymphonyElixirWeb.DashboardLive do
- Total: <%= format_int(entry.tokens.total_tokens) %>
- In <%= format_int(entry.tokens.input_tokens) %> / Out <%= format_int(entry.tokens.output_tokens) %>
-
+ <%= render_token_visualization(%{entry: entry}) %>
+
+
+
+
+ + Symphony Observability v2 +
++ Operations Dashboard +
++ Enhanced view with token/runtime visualizations and anomaly detection. +
+
+
+
+ Live
+
+ Switch to v1
+
+ Snapshot unavailable
++ <%= @payload.error.code %>: <%= @payload.error.message %> +
+Running
+<%= @payload.counts.running %>
+Active issue sessions in the current runtime.
+Retrying
+<%= @payload.counts.retrying %>
+Issues waiting for the next retry window.
+Total tokens
+<%= format_int(@payload.codex_totals.total_tokens) %>
++ In <%= format_int(@payload.codex_totals.input_tokens) %> / Out <%= format_int(@payload.codex_totals.output_tokens) %> +
+Runtime
+<%= format_runtime_seconds(total_runtime_seconds(@payload, @now)) %>
+Total Codex runtime across completed and active sessions.
+
+
+
+ <%= if @payload.running == [] and @payload.retrying == [] do %>
+
+
+ Recent Activity
+Latest agent activity and session updates.
+No active sessions or retries.
+ <% else %> +
+ <%= for entry <- Enum.take(@payload.running, 5) do %>
+
+ <% end %>
+
+
+ <% end %>
+
+ <%= entry.issue_identifier %>
+ <%= entry.state %>
+
+ <%= entry.last_message || "Agent working..." %>
+ +Snapshot unavailable
++ <%= @payload.error.code %>: <%= @payload.error.message %> +
+
+
+
+ <%= if @payload.running == [] do %>
+
+
+ Running Issues
++ Click any issue to view detailed information. + + <%= if @effective_view_mode == "card", do: "(Card View)", else: "(Table View)" %> + +
+No active sessions.
+ <% else %> + <%= if @effective_view_mode == "card" do %> + <%= render_running_issues_cards(assigns) %> + <% else %> + <%= render_running_issues_table(assigns) %> + <% end %> + <% end %> +
+
+
+ <%= if @payload.retrying == [] do %>
+
+
+ Retry Queue
+Issues waiting for the next retry window.
+No issues are currently backing off.
+ <% else %> + <%= if @effective_view_mode == "card" do %> + <%= render_retrying_issues_cards(assigns) %> + <% else %> + <%= render_retrying_issues_table(assigns) %> + <% end %> + <% end %> +
+
+ """
+ end
+
+ defp render_retrying_issues_cards(assigns) do
+ ~H"""
+
+
+
+ <%= entry.issue_identifier %>
+ <%= entry.state %>
+
+
+
+
+
+
+
+
+ + <%= String.slice(entry.last_message || "n/a", 0, 80) %><%= if String.length(entry.last_message || "") > 80, do: "..." %> +
+ +
+
+ """
+ end
+
+ # Table View Components (existing functionality)
+ defp render_running_issues_table(assigns) do
+ ~H"""
+
+
+
+ <%= entry.issue_identifier %>
+ Retry #<%= entry.attempt %>
+
+
+
+
+
+
+
+
+ + <%= entry.error || "n/a" %> +
+
+
+
+
+
+ """
+ end
+
+ defp render_retrying_issues_table(assigns) do
+ ~H"""
+ | Issue | +State | +Runtime / turns | +Last Activity | +Tokens | +
|---|---|---|---|---|
| + <%= entry.issue_identifier %> + | ++ + <%= entry.state %> + + | +<%= format_runtime_and_turns(entry.started_at, entry.turn_count, @now) %> | +
+
+
+ <%= String.slice(entry.last_message || "n/a", 0, 60) %><%= if String.length(entry.last_message || "") > 60, do: "..." %>
+
+
+
+ |
+ + <%= render_token_visualization(%{entry: entry}) %> + | +
+
+
+
+
+ """
+ end
+
+ defp render_metrics_tab(assigns) do
+ ~H"""
+ <%= if @payload[:error] do %>
+ | Issue | +Attempt | +Due at | +Error | +
|---|---|---|---|
| <%= entry.issue_identifier %> | +<%= entry.attempt %> | +<%= entry.due_at || "n/a" %> | +<%= entry.error || "n/a" %> | +
Snapshot unavailable
++ <%= @payload.error.code %>: <%= @payload.error.message %> +
+Running
+<%= @payload.counts.running %>
+Active issue sessions
+Retrying
+<%= @payload.counts.retrying %>
+Backed-off issues
+Input tokens
+<%= format_int(@payload.codex_totals.input_tokens) %>
+Prompts and context
+Output tokens
+<%= format_int(@payload.codex_totals.output_tokens) %>
+Agent responses
+
+
+
+
+
+ Rate Limits
+Latest upstream rate-limit snapshot, when available.
+<%= pretty_value(@payload.rate_limits) %>+
+
+
+ <%= if @issue do %>
+
+
+
+ + Issue Details: <%= @selected_issue_id %> +
+Detailed view for the selected issue.
+
+
+ <% else %>
+
+
+
+ Status
+ <%= @issue.state %> +
+
+
+ Runtime
+<%= format_runtime_and_turns(@issue.started_at, @issue.turn_count, @now) %>
+
+
+
+ <%= if @issue.session_id do %>
+ Token Usage
+
+ Total: <%= format_int(@issue.tokens.total_tokens) %>
+ In <%= format_int(@issue.tokens.input_tokens) %> / Out <%= format_int(@issue.tokens.output_tokens) %>
+
+
+
+ <% end %>
+
+ Session
+ +
+
+
+ Last Activity
+
+
+ <%= @issue.last_message || "No recent activity" %>
+ +
+
+ API Data
+ View JSON details β +Issue not found in current session data.
+ <% end %> +
+
+
+
+
+ System Alerts
+Current capacity, rate limit, and orchestrator health warnings.
+
+ <%= for alert <- @payload.alerts do %>
+
+
+ <% end %>
+
+
+
+ <%= alert.title %>
+ <%= alert.severity %> +<%= alert.message %>
+<%= alert.remediation %>
+
+
+ """
+ end
+
+ defp view_toggle_class(mode, current_mode) when mode == current_mode, do: "view-toggle-btn view-toggle-btn-active"
+ defp view_toggle_class(_mode, _current_mode), do: "view-toggle-btn"
+
+ # Determine effective view mode based on view_mode setting and screen size
+ defp effective_view_mode(view_mode) do
+ case view_mode do
+ "card" -> "card"
+ "table" -> "table"
+ _ -> "auto" # Default to auto mode
+ end
+ end
+
+ # Token Visualization Helper Functions
+
+ # Generate mock token history for sparklines (in real implementation, this would come from database)
+ defp generate_token_history(entry) do
+ base_tokens = entry.tokens.total_tokens || 1000
+
+ # Generate last 24 data points with some realistic variance
+ history = Enum.map(0..23, fn i ->
+ variance = :rand.uniform() * 0.3 - 0.15 # Β±15% variance
+ point_tokens = max(0, trunc(base_tokens * (0.4 + (i / 30.0)) * (1 + variance)))
+ point_tokens
+ end)
+
+ Jason.encode!(history)
+ end
+
+ # Generate global token history across all issues
+ defp generate_global_token_history(payload) do
+ total_tokens = payload.codex_totals.total_tokens || 10000
+
+ # Generate trend data showing growth over time
+ history = Enum.map(0..23, fn i ->
+ variance = :rand.uniform() * 0.2 - 0.1 # Β±10% variance
+ point_tokens = max(0, trunc(total_tokens * (0.3 + (i / 30.0)) * (1 + variance)))
+ point_tokens
+ end)
+
+ Jason.encode!(history)
+ end
+
+ # Generate runtime trend data
+ defp generate_runtime_trend(payload, now) do
+ current_runtime = total_runtime_seconds(payload, now)
+
+ # Generate trend showing runtime accumulation over time
+ history = Enum.map(0..23, fn i ->
+ variance = :rand.uniform() * 0.15 - 0.075 # Β±7.5% variance
+ point_runtime = max(0, trunc(current_runtime * (i / 24.0) * (1 + variance)))
+ point_runtime
+ end)
+
+ Jason.encode!(history)
+ end
+
+ # Generate mock runtime history
+ defp generate_runtime_history(entry) do
+ case entry.started_at do
+ nil -> Jason.encode!([])
+ started_at ->
+ # Generate runtime progression over time
+ runtime_seconds = runtime_seconds_from_started_at(started_at, DateTime.utc_now())
+ runtime_minutes = runtime_seconds / 60.0
+
+ history = Enum.map(0..23, fn i ->
+ trunc(runtime_minutes * (i / 24.0))
+ end)
+
+ Jason.encode!(history)
+ end
+ end
+
+ # Calculate budget information for an issue
+ defp calculate_budget_info(entry) do
+ total_tokens = entry.tokens.total_tokens || 0
+
+ # Default budget - in real implementation this would be configurable per issue/project
+ default_budget = case entry.issue_identifier do
+ id when is_binary(id) ->
+ # Larger budgets for complex issues
+ if String.contains?(id, ["feature", "enhancement", "epic"]), do: 50_000, else: 20_000
+ _ -> 20_000
+ end
+
+ %{
+ used: total_tokens,
+ budget: default_budget,
+ percentage: min(total_tokens / default_budget * 100, 100),
+ status: budget_status(total_tokens, default_budget)
+ }
+ end
+
+ # Determine budget status
+ defp budget_status(used, budget) do
+ percentage = used / budget * 100
+
+ cond do
+ percentage >= 90 -> :danger
+ percentage >= 75 -> :warning
+ true -> :healthy
+ end
+ end
+
+ # Check if an issue has anomalous token usage
+ defp has_anomaly?(entry) do
+ total_tokens = entry.tokens.total_tokens || 0
+
+ # Simple anomaly detection - in real implementation this would use historical data
+ cond do
+ # Very high token usage
+ total_tokens > 30_000 -> true
+ # Rapid token growth (mocked for demonstration)
+ :rand.uniform() < 0.15 -> true # 15% chance for demo purposes
+ true -> false
+ end
+ end
+
+ # Format token trend direction
+ defp format_token_trend(entry) do
+ # Mock trend calculation - in real implementation this would compare recent vs previous periods
+ change = :rand.uniform() * 40 - 20 # Random -20% to +20% for demo
+
+ cond do
+ change > 10 -> {"+#{trunc(change)}%", "positive"}
+ change < -10 -> {"#{trunc(change)}%", "negative"}
+ true -> {"~#{trunc(abs(change))}%", "neutral"}
+ end
+ end
+
+ # Enhanced token display component
+ defp render_token_visualization(assigns) do
+ ~H"""
+ View:
+
+
+
+
+
+
+
+ """
+ end
+
+ # Budget gauge component
+ defp render_budget_gauge(assigns) do
+ budget_info = calculate_budget_info(assigns.entry)
+ assigns = assign(assigns, :budget_info, budget_info)
+
+ ~H"""
+
+
+ Tokens
+
+
+
+
+
+ <%= format_int(@entry.tokens.total_tokens) %>
+ <%= if has_anomaly?(@entry) do %>
+ β οΈ
+ <% end %>
+
+
+ In: <%= format_int(@entry.tokens.input_tokens) %>
+ Out: <%= format_int(@entry.tokens.output_tokens) %>
+ <% {trend_text, trend_class} = format_token_trend(@entry) %>
+ <%= trend_text %>
+
+
+
+ """
+ end
+
+ # Enhanced metric card with visualizations
+ defp render_enhanced_metric_card(assigns) do
+ ~H"""
+ Budget
+
+
+
+ <%= format_int(@budget_info.used) %>
+ of <%= format_int(@budget_info.budget) %>
+
+ <%= case @budget_info.status do %>
+ <% :healthy -> %>Healthy
+ <% :warning -> %>β οΈ High Usage
+ <% :danger -> %>π¨ Over Budget
+ <% end %>
+
+
+
+
+ <%= @label %>
+ <%= if assigns[:trend] do %>
+
+ <%= @trend.direction %> <%= @trend.value %>
+
+ <% end %>
+ <%= @value %>
+
+ <%= if assigns[:visualization] do %>
+
+
+
+ <% end %>
+
+
+ <%= @detail %>
+ <%= if assigns[:secondary_value] do %>
+ <%= @secondary_value %>
+ <% end %>
+
+
+
+
+
+
+ Budget Overview
+Token budget allocation and utilization across active issues.
+
+ <%= render_enhanced_metric_card(%{
+ label: "Total Allocated",
+ value: format_int(@budget_summary.total_budget),
+ detail: "Combined budget across all issues",
+ trend: %{direction: "β", value: "stable", class: "neutral"}
+ }) %>
+
+ <%= render_enhanced_metric_card(%{
+ label: "Budget Used",
+ value: format_int(@budget_summary.total_used),
+ detail: "#{trunc(@budget_summary.utilization_percentage)}% utilized",
+ trend: %{direction: "β", value: "+#{trunc(@budget_summary.burn_rate)}/hr", class: if(@budget_summary.utilization_percentage > 75, do: "positive", else: "neutral")},
+ secondary_value: "#{@budget_summary.remaining_hours}h remaining"
+ }) %>
+
+ <%= render_enhanced_metric_card(%{
+ label: "At Risk",
+ value: to_string(@budget_summary.at_risk_count),
+ detail: "Issues exceeding 75% budget",
+ trend: %{direction: if(@budget_summary.at_risk_count > 0, do: "β οΈ", else: "β"), value: "#{@budget_summary.over_budget_count} over budget", class: if(@budget_summary.at_risk_count > 0, do: "positive", else: "neutral")}
+ }) %>
+
+
+ <%= if @budget_summary.at_risk_count > 0 do %>
+
+
+ <% end %>
+ Budget Alerts
+
+ <%= for issue <- @budget_summary.at_risk_issues do %>
+
+
+ <%= issue.id %>
+ <%= issue.percentage %>% used
+ <%= format_int(issue.remaining) %> tokens left
+
+ <% end %>
+
+
+ );
+
+ return (
+ -
+ {Row}
+
+
+);
+
+All caught up!
+No new activities right now.
+
+
+ );
+ }
+
+ // Handle error state
+ if (error && activities.length === 0) {
+ if (ErrorState) {
+ return Loading activities...
+
+
+ );
+ }
+
+ // Handle empty state
+ if (filteredActivities.length === 0) {
+ if (EmptyState) {
+ return
+
+ Failed to load activities
+{error.message}
+ +
+
+ );
+ }
+
+ return (
+
+
+ π
+ No activities yet
+Activities will appear here as they happen
+ {filter && ( ++ Try adjusting your filters to see more activities +
+ )} +
+ {/* Connection status indicator */}
+ {realTimeUpdates && !isConnected && (
+
+ );
+}
+
+export default ActivityFeed;
\ No newline at end of file
diff --git a/mobile-ux/components/ActivityHeader.tsx b/mobile-ux/components/ActivityHeader.tsx
new file mode 100644
index 00000000..5e225ecc
--- /dev/null
+++ b/mobile-ux/components/ActivityHeader.tsx
@@ -0,0 +1,101 @@
+/**
+ * Activity Header Component
+ * Time-based grouping header with collapse/expand
+ */
+
+import React from 'react';
+import type { TimeGroup } from '../types/activity';
+
+export interface ActivityHeaderProps {
+ timeGroup: TimeGroup;
+ count: number;
+ collapsible?: boolean;
+ collapsed?: boolean;
+ onToggle?: () => void;
+ className?: string;
+}
+
+const TIME_GROUP_LABELS: Record
+
+ Reconnecting...
+
+ )}
+
+ {/* Activity groups */}
+ {Object.entries(groupedActivities).map(([timeGroup, groupActivities]) => {
+ if (groupActivities.length === 0) return null;
+
+ const isCollapsed = collapsedGroups.has(timeGroup as TimeGroup);
+
+ return (
+
+ {groupByTime && (
+ handleGroupToggle(timeGroup as TimeGroup)}
+ />
+ )}
+
+ {!isCollapsed && (
+
+ );
+ })}
+
+ {/* Infinite scroll sentinel */}
+ {hasMore && (
+
+ {groupActivities.map(activity => (
+ handleActivityClick(activity)}
+ onAction={(actionId) => handleActivityAction(activity.id, actionId)}
+ showTimestamp={!groupByTime}
+ />
+ ))}
+
+ )}
+
+ {loading &&
+ )}
+
+ {/* End of feed indicator */}
+ {!hasMore && filteredActivities.length > 0 && (
+
+
+ )}
+ You've reached the beginning
+ {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ handleClick();
+ }
+ } : undefined}
+ >
+
+ );
+}
+
+export default ActivityHeader;
\ No newline at end of file
diff --git a/mobile-ux/components/ActivityItem.tsx b/mobile-ux/components/ActivityItem.tsx
new file mode 100644
index 00000000..9c9dbe6f
--- /dev/null
+++ b/mobile-ux/components/ActivityItem.tsx
@@ -0,0 +1,163 @@
+/**
+ * Activity Item Component
+ * Individual activity card with expand/collapse and quick actions
+ */
+
+import React, { useState } from 'react';
+import { formatTimeAgo } from '../utils/timeUtils';
+import { getActivityIcon, getActivityActions } from '../utils/activityUtils';
+import type { Activity, QuickAction } from '../types/activity';
+
+export interface ActivityItemProps {
+ activity: Activity;
+ expanded?: boolean;
+ onClick?: () => void;
+ onAction?: (actionId: string) => void;
+ showTimestamp?: boolean;
+ className?: string;
+}
+
+export function ActivityItem({
+ activity,
+ expanded: controlledExpanded,
+ onClick,
+ onAction,
+ showTimestamp = true,
+ className = ''
+}: ActivityItemProps) {
+ const [internalExpanded, setInternalExpanded] = useState(false);
+
+ // Use controlled expanded state if provided, otherwise use internal state
+ const expanded = controlledExpanded !== undefined ? controlledExpanded : internalExpanded;
+
+ const handleClick = () => {
+ if (controlledExpanded === undefined) {
+ setInternalExpanded(!expanded);
+ }
+ onClick?.();
+ };
+
+ const handleActionClick = (actionId: string, event: React.MouseEvent) => {
+ event.stopPropagation(); // Prevent item click
+ onAction?.(actionId);
+ };
+
+ const icon = getActivityIcon(activity);
+ const actions = getActivityActions(activity);
+ const levelClass = `activity-item--${activity.level || 'info'}`;
+ const expandedClass = expanded ? 'activity-item--expanded' : '';
+
+ return (
+
+
+
+ {/* Visual separator */}
+
+
+
+
+ {label}
+ {description && ( + {description} + )} +
+ {count}
+
+ {collapsible && (
+
+ )}
+
+ {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ handleClick();
+ }
+ }}
+ >
+ {/* Main content row */}
+
+ );
+}
+
+export default ActivityItem;
\ No newline at end of file
diff --git a/mobile-ux/components/LoadingSpinner.tsx b/mobile-ux/components/LoadingSpinner.tsx
new file mode 100644
index 00000000..0e49722a
--- /dev/null
+++ b/mobile-ux/components/LoadingSpinner.tsx
@@ -0,0 +1,55 @@
+/**
+ * Loading Spinner Component
+ * Simple, mobile-optimized loading indicator
+ */
+
+import React from 'react';
+
+export interface LoadingSpinnerProps {
+ size?: 'small' | 'medium' | 'large';
+ color?: string;
+ className?: string;
+}
+
+export function LoadingSpinner({
+ size = 'medium',
+ color = 'currentColor',
+ className = ''
+}: LoadingSpinnerProps) {
+ const sizeClass = `spinner--${size}`;
+
+ return (
+
+
+
+ {/* Expanded content */}
+ {expanded && (
+
+ {icon}
+ {activity.level === 'critical' && (
+
+ )}
+
+
+
+
+
+
+
+
+ {/* Show preview in collapsed state */}
+ {!expanded && activity.description && (
+ {activity.title}
+ {showTimestamp && ( + + {formatTimeAgo(activity.timestamp)} + + )} ++ {activity.description.length > 80 + ? `${activity.description.substring(0, 80)}...` + : activity.description + } +
+ )} +
+
+
+
+ {activity.description && (
+
+ )}
+
+
+ )}
+
+ {activity.metadata && Object.keys(activity.metadata).length > 0 && (
+ {activity.description}
+
+ {Object.entries(activity.metadata).map(([key, value]) => (
+
+ )}
+
+ {actions.length > 0 && (
+
+ {key}:
+ {String(value)}
+
+ ))}
+
+ {actions.slice(0, 3).map(action => (
+
+ ))}
+
+ {actions.length > 3 && (
+
+ )}
+
+ )}
+
+
+ Loading...
+
+ );
+}
+
+export default LoadingSpinner;
\ No newline at end of file
diff --git a/mobile-ux/hooks/useActivityStream.ts b/mobile-ux/hooks/useActivityStream.ts
new file mode 100644
index 00000000..3c7e6e90
--- /dev/null
+++ b/mobile-ux/hooks/useActivityStream.ts
@@ -0,0 +1,238 @@
+/**
+ * Activity Stream Hook
+ * Real-time WebSocket connection for activity updates
+ */
+
+import { useEffect, useRef, useCallback, useState } from 'react';
+import type { Activity } from '../types/activity';
+
+export interface ActivityStreamOptions {
+ enabled?: boolean;
+ reconnectInterval?: number;
+ maxReconnectAttempts?: number;
+ onConnect?: () => void;
+ onDisconnect?: () => void;
+ onError?: (error: Event) => void;
+}
+
+export interface ActivityStreamHook {
+ subscribe: (listener: ActivityListener) => () => void;
+ unsubscribe: (listener: ActivityListener) => void;
+ isConnected: boolean;
+ connectionState: 'connecting' | 'connected' | 'disconnected' | 'error';
+ reconnectAttempts: number;
+}
+
+export type ActivityListener = (activity: Activity) => void;
+
+export function useActivityStream(options: ActivityStreamOptions = {}): ActivityStreamHook {
+ const {
+ enabled = true,
+ reconnectInterval = 3000,
+ maxReconnectAttempts = 5,
+ onConnect,
+ onDisconnect,
+ onError
+ } = options;
+
+ const [isConnected, setIsConnected] = useState(false);
+ const [connectionState, setConnectionState] = useState<'connecting' | 'connected' | 'disconnected' | 'error'>('disconnected');
+ const [reconnectAttempts, setReconnectAttempts] = useState(0);
+
+ const wsRef = useRef