{% extends "web/base.html" %}

{% block title %}tcx Dashboard{% endblock %}
{% block page_label %}Dashboard{% endblock %}

{% block content %}
<section class="tc-hero-band">
  <div>
    <span class="tc-eyebrow">Workspace dashboard</span>
    <h1>TradingCodex workspace</h1>
    <p>Plan investment work, review role handoffs, and keep risky actions gated.</p>
  </div>
  <div class="tc-hero-actions">
    <a class="tc-button tc-button-primary" href="/workflow/starter-prompt/">Plan workflow</a>
    <a class="tc-button" href="/admin/">Open Admin</a>
  </div>
</section>

<section class="tc-section-grid tc-section-grid--three">
  <article class="tc-panel">
    <div class="tc-panel-head">
      <span class="tc-eyebrow">Health</span>
      <h2>Service status</h2>
    </div>
    <div class="tc-metric-grid">
      <div><strong>{{ health.counts.roster }}</strong><span>roles</span></div>
      <div><strong>{{ health.counts.skills }}</strong><span>skills</span></div>
      <div><strong>{{ health.counts.mcp_tools }}</strong><span>agent actions</span></div>
      <div><strong>{{ health.counts.workspace_contexts }}</strong><span>workspaces</span></div>
    </div>
  </article>

  <article class="tc-panel">
    <div class="tc-panel-head">
      <span class="tc-eyebrow">Next action</span>
      <h2>Start in Codex</h2>
    </div>
    <ol class="tc-flow-list">
      <li>Prompt</li>
      <li>Dispatch</li>
      <li>Review</li>
      <li>Policy gate</li>
      <li>Approved action path</li>
    </ol>
  </article>

  <article class="tc-panel">
    <div class="tc-panel-head">
      <span class="tc-eyebrow">Runtime</span>
      <h2>Activity record</h2>
    </div>
    <div class="tc-metric-grid">
      <div><strong>{{ health.counts.research_artifacts }}</strong><span>research notes</span></div>
      <div><strong>{{ health.counts.policy_blocks }}</strong><span>policy blocks</span></div>
      <div><strong>{{ portfolio.positions_count }}</strong><span>positions</span></div>
      <div><strong>{{ health.counts.mcp_calls }}</strong><span>action checks</span></div>
    </div>
  </article>
</section>

<section class="tc-section-grid">
  <article class="tc-panel">
    <div class="tc-panel-head">
      <span class="tc-eyebrow">Workflow map</span>
      <h2>Roles and gates</h2>
    </div>
    {% include "web/fragments/topology_canvas.html" %}
  </article>

  <aside class="tc-panel">
    <div class="tc-panel-head">
      <span class="tc-eyebrow">Recent activity</span>
      <h2>Latest checks</h2>
    </div>
    <div class="tc-activity-list">
      {% for item in activity %}
      <div class="tc-activity-row">
        <span class="tc-pill tc-pill--{{ item.status_class }}">{{ item.kind }}</span>
        <strong>{{ item.title }}</strong>
        <small>{{ item.subtitle }} · {{ item.created_at|date:"Y-m-d H:i" }}</small>
      </div>
      {% empty %}
      <p class="tc-empty">No activity has been recorded yet.</p>
      {% endfor %}
    </div>
  </aside>
</section>

<details class="tc-details tc-diagnostics">
  <summary>System internals</summary>
  <div class="tc-details-body">
    <div class="tc-harness-system-grid">
      {% for system in topology.systems %}
      <section class="tc-harness-system tc-harness-system--{{ system.key }}">
        <div>
          <strong>{{ system.label }}</strong>
          <span>{{ system.summary }}</span>
        </div>
        <div class="tc-harness-list">
          {% for item in system.items %}
          <div><strong>{{ item.label }}</strong><span>{{ item.summary }}</span></div>
          {% endfor %}
        </div>
      </section>
      {% endfor %}
    </div>
  </div>
</details>
{% endblock %}