{% extends "base.html" %}
{% from "_macros.html" import no_data with context %}
{% block title %}Visual{% endblock %}
{% block content %}
<h1>Visual</h1>
{% set extended = view_mode == 'extended' %}
<nav class="view-tabs" aria-label="Diagram view">
  {% for mode, label in view_modes.items() %}
    <a href="{{ url_for('visual', vpc=vpc or None, view=None if mode == 'ip' else mode) }}"
       class="view-tab {{ 'active' if mode == view_mode }}" {% if mode == view_mode %}aria-current="page"{% endif %}>{{ label }}</a>
  {% endfor %}
</nav>
{% if not snap %}
  {{ no_data() }}
{% elif not tree %}
  <div class="card muted">No VPCs {{ 'in the active scope' if scope_count else 'found in this snapshot' }}.</div>
{% else %}
{% if extended %}
<section class="card extended-panel" aria-labelledby="ext-title">
  <h2 id="ext-title">Extended view</h2>
  <p class="muted">
    Regional services (SNS, SQS, DynamoDB, EventBridge, S3, API Gateway, Step Functions, Lambda,
    ECS, Secrets Manager names, Kafka: MSK clusters and self-managed brokers feeding Lambda event
    source mappings) are drawn outside the VPC; Transit Gateway, peering and internet
    via NAT as external nodes. Every connection carries evidence:
    {% for level in evidence_levels %}<b>{{ evidence_labels[level] }}</b> ({{ evidence_help[level] }}){{ ' > ' if not loop.last }}{% endfor %}.
    Environment variables and IAM policies are only matched against known resource names and
    ARNs: their values are never stored or shown. IAM <code>Resource: "*"</code> appears as a
    <span class="badge err">broad access</span> badge and is never expanded.
  </p>
  <div class="row">
    <form method="post" action="{{ url_for('visual_extended_crawl') }}" data-job="crawl">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <input type="hidden" name="vpc" value="{{ vpc }}">
      <button type="submit">{{ 'Re-crawl services' if crawl else 'Crawl services' }}</button>
    </form>
    <span class="muted">
      {% if crawl %}Services crawled {{ crawl.crawled_at | localtime }} for snapshot #{{ snap.id }}
        · {{ crawl.sources | length }} source(s) read · {{ crawl.warnings | length }} warning(s).
        {% if crawl.capped %}<span class="badge warn" id="crawl-capped"
          title="{{ crawl.capped | length }} source(s) hit their per-source limit: only the first items were read (see the crawl warnings)">⚠ {{ crawl.capped | length }} capped</span>{% endif %}
      {% else %}Not crawled for snapshot #{{ snap.id }} yet: read-only, each source is optional
        (a missing permission or disabled feature is a warning).{% endif %}
    </span>
  </div>
  {% if crawl and crawl.warnings %}
  <details class="crawl-warnings"{{ ' open' if crawl.capped }}>
    <summary>{{ crawl.warnings | length }} crawl warning(s){% if crawl.capped %} · {{ crawl.capped | length }} source(s) capped{% endif %}</summary>
    <ul>{% for w in crawl.warnings %}<li>{{ w }}</li>{% endfor %}</ul>
  </details>
  {% endif %}
  <fieldset class="edge-filters flow-logs" id="flow-logs"
            data-estimate-url="{{ url_for('visual_flowlogs_estimate') }}"
            data-run-url="{{ url_for('visual_flowlogs_run') }}">
    <legend>Flow logs (opt-in, observed evidence)</legend>
    <label for="flow-window">Window</label>
    <select id="flow-window">
      {% for value, label in flow_windows.items() %}<option value="{{ value }}" {{ 'selected' if value == flow_default }}>{{ label }}</option>{% endfor %}
    </select>
    <button type="button" class="secondary" id="flow-estimate">Estimate scan size</button>
    <span id="flow-estimate-result" aria-live="polite"></span>
    <button type="button" id="flow-run" hidden>Run query</button>
    <span class="muted small" style="flex: 1 1 100%">Queries this VPC's flow logs in CloudWatch Logs
      Insights (billed per GB scanned). Only ENI↔ENI/port aggregates are stored, never raw records.</span>
  </fieldset>
</section>
{% endif %}
<form method="get" action="{{ url_for('visual') }}" class="card row visual-controls" id="visual-form">
  {% if extended %}<input type="hidden" name="view" value="extended">{% endif %}
  <div><label for="vpc">VPC</label>
    <select id="vpc" name="vpc" onchange="this.form.submit()">
      {% for v in tree %}<option value="{{ v.vpc_id }}" {{ 'selected' if v.vpc_id == vpc }}>{{ v.vpc_id }}{% if v.name %} · {{ v.name }}{% endif %} ({{ v.cidrs | join(', ') }})</option>{% endfor %}
    </select></div>
  <div><label for="layout">Layout</label>
    <select id="layout" title="Remembered per account for the {{ view_modes[view_mode] }}">
      {% for value, label in layouts.items() %}<option value="{{ value }}" {{ 'selected' if value == layout }}>{{ label }}</option>{% endfor %}
    </select></div>
  {% if extended %}
  <fieldset class="edge-filters focus-controls">
    <legend>Focus</legend>
    <input type="search" id="focus-search" placeholder="name, ARN or IP" aria-label="Find a node by name, ARN or IP" autocomplete="off">
    <button type="button" class="secondary" id="focus-find">Find</button>
    <label for="focus-hops">Neighbourhood</label>
    <select id="focus-hops">
      {% for n in focus_hops %}<option value="{{ n }}">{{ n }} hop{{ 's' if n > 1 }}</option>{% endfor %}
    </select>
    <button type="button" class="secondary" id="focus-reset" title="Show every node again (Esc)" disabled>Show all</button>
  </fieldset>
  {% endif %}
  <div class="row" style="gap: .4rem">
    <button type="button" class="secondary" id="zoom-in" title="Zoom in">+</button>
    <button type="button" class="secondary" id="zoom-out" title="Zoom out">−</button>
    <button type="button" class="secondary" id="zoom-fit" title="Fit to screen">Fit</button>
    <button type="button" class="secondary" id="expand-all">Expand groups</button>
    <button type="button" class="secondary" id="collapse-all">Collapse groups</button>
    <button type="button" class="secondary" id="reset-layout" title="Forget dragged positions for this VPC{{ ' and show every node again' if extended }}">Reset layout</button>
  </div>
  <fieldset class="edge-filters">
    <legend>Borders</legend>
    <label class="edge-filter"><input type="checkbox" id="show-vpc" {{ 'checked' if prefs.show_vpc }}> VPC</label>
    <label class="edge-filter"><input type="checkbox" id="show-subnets" {{ 'checked' if prefs.show_subnets }}> Subnets</label>
    <label class="edge-filter"><input type="checkbox" id="show-legend" {{ 'checked' if prefs.show_legend }}> Legend</label>
  </fieldset>
  <fieldset class="edge-filters">
    <legend>Labels</legend>
    <label class="edge-filter" title="Cut names longer than {{ short_name_max }} characters in the middle, keeping their start and end"><input type="checkbox" id="shorten-names" {{ 'checked' if prefs.shorten_names }}> Shorten long names</label>
  </fieldset>
  <fieldset class="edge-filters env-filters" id="env-filters">
    <legend>Environment</legend>
    <span class="muted small" id="env-filters-empty">Loading…</span>
  </fieldset>
  <fieldset class="edge-filters">
    <legend>Group by</legend>
    <select id="group-by" name="group" aria-label="Group by">
      {% for value, label in group_by_choices.items() %}<option value="{{ value }}" {{ 'selected' if value == group_by }}>{{ label }}</option>{% endfor %}
    </select>
    <select id="group-tag" name="tag" aria-label="Tag key" data-selected="{{ group_tag }}" {{ 'hidden' if group_by != 'tag' }}>
      <option value="">(tag key)</option>
    </select>
  </fieldset>
  <div class="row export-buttons" style="gap: .4rem">
    <button type="button" class="secondary" id="export-svg">Export SVG</button>
    <button type="button" class="secondary" id="export-drawio">Export draw.io</button>
    <label class="edge-filter" title="Exports show every member of a collapsed group instead of one group box" {{ 'hidden' if extended }}><input type="checkbox" id="export-expand" checked> Expand all groups</label>
  </div>
  <fieldset class="edge-filters">
    <legend>Connections</legend>
    {# Always sent, so "no box ticked" survives a VPC change instead of meaning "all". #}
    <input type="hidden" name="edges" value="">
    {% for t in edge_types %}
    <label class="edge-filter"><input type="checkbox" name="edges" value="{{ t }}" {{ 'checked' if t in edges_on }}>
      <i class="edge-swatch edge-{{ t }}"></i> {{ edge_labels[t] }} <span class="muted" data-edge-count="{{ t }}"></span></label>
    {% endfor %}
  </fieldset>
  {% if extended %}
  <fieldset class="edge-filters">
    <legend>Evidence</legend>
    {% for level in evidence_levels %}
    <label class="edge-filter" title="{{ evidence_help[level] }}"><input type="checkbox" name="evidence" value="{{ level }}" {{ 'checked' if level in evidence_on }}>
      <i class="edge-swatch ev-{{ level }}"></i> {{ evidence_labels[level] }} <span class="muted" data-evidence-count="{{ level }}"></span></label>
    {% endfor %}
  </fieldset>
  <fieldset class="edge-filters" id="service-filters">
    <legend>Services</legend>
    <span class="muted small" id="service-filters-empty">Crawl services to list them.</span>
  </fieldset>
  {% endif %}
  <div class="muted" style="flex: 1 1 100%">
    Scroll to zoom, drag to pan, hover for full names. Click a resource to highlight its
    connections (click the background to clear); double-click it to open its ENI. Click a group
    (more than 10 resources of one type in a subnet) to expand or collapse it. Solid lines are
    load balancer targets and ECS services; dashed lines are security group based: endpoint reach
    (the endpoint's security group allows tcp/443 from the resource) and SG references.
    Drag resources to rearrange them: positions are saved for this account, VPC, view and layout,
    and restored when the page is opened with that layout until you press <b>Reset layout</b>;
    choosing another layout always lays the diagram out afresh. <b>Fit</b> shows every visible
    node. <b>Layout</b> (Grid by
    default) and the expanded groups are remembered per account and view. Full names are shown,
    wrapped at <code>- _ . /</code>; <b>Shorten long names</b> cuts them in the middle instead.
    Border, legend and label toggles are remembered per account. Endpoint reach lines are labelled with the endpoint's
    security group name. <b>Group by</b> draws a dashed box (and a coloured outline) around the
    resources sharing a security group, a tag value, a Terraform root (loaded under Settings), an
    environment (colour per environment), an owner (ownership source and value: CloudFormation stack,
    IaC tag, Terraform, CloudTrail creator or unmanaged — see the Ownership page) or a team (the team
    tag key of Settings → Ownership). <b>Environment</b> shows only the ticked environments
    (from the Terraform root × environment mapping, else the environment tag set in Settings).
    Exports contain the diagram as currently shown; with <b>Expand all groups</b> (default) every
    collapsed group is exported as its member resources.
    {% if extended %}<br><b>Extended view:</b> one line per pair of nodes, styled by its strongest
    ticked evidence; <b>+N</b> counts further evidence lines. Only <b>Observed</b> and
    <b>Configured</b> are shown by default; the Evidence filter is remembered per account. Click a
    connection (or a service node) to list all of its evidence below the diagram. Regional
    services of one type and Lambda / ECS ENIs of a subnet are groups: click to expand or collapse;
    lines between collapsed groups merge into one, labelled <b>×count</b> and drawn wider. Click a
    node (double-click a group), or search by name, ARN or IP, to show only it and its 1- or 2-hop
    neighbourhood; <b>Show all</b>, Esc or <b>Reset layout</b> returns to the full diagram. The
    Hierarchy layout runs left to right: sources (EventBridge, SNS, API Gateway, S3) → compute
    (Lambda, ECS) → targets; the other layouts keep every box (VPC, subnet, expanded service
    group, swimlane) together as one block. Group by
    tag or Terraform root draws one swimlane per app. Exports contain exactly what is shown
    (focus, groups and filters). Crawled regional nodes linked to nothing in this VPC are listed
    under <b>Not linked</b> beside the diagram: click one to draw it, or tick <b>Show all crawled
    nodes</b>.{% endif %}
  </div>
</form>
<div class="visual-main">
<div class="cy-wrap">
  <div id="cy" class="card"
       data-src="{{ url_for('visual_data', vpc=vpc, view='extended' if extended else None) }}"
       data-vpc="{{ vpc }}"
       data-layout-key="{{ layout_key }}"
       data-positions-layout="{{ layout }}"
       data-mode="{{ view_mode }}"
       data-icon-root="{{ url_for('static', filename='icons/') }}"
       data-icons="{{ url_for('static', filename='icons/aws/') }}"
       data-eni-url="{{ url_for('eni', eni_id='__ENI__') }}"
       data-csrf="{{ csrf_token }}"
       data-short-max="{{ short_name_max }}"
       data-prefs-url="{{ url_for('visual_prefs') }}"
       data-layout-url="{{ url_for('visual_layout_save') }}"
       data-reset-url="{{ url_for('visual_layout_reset') }}"
       data-export-svg="{{ url_for('visual_export_svg') }}"
       data-export-drawio="{{ url_for('visual_export_drawio') }}"></div>
  <div id="cy-tip" class="cy-tip" role="tooltip" hidden></div>
</div>
{% if extended %}
<aside class="card unlinked-panel" id="unlinked-panel" aria-labelledby="unlinked-title" hidden>
  <h2 id="unlinked-title">Not linked: <span id="unlinked-count">0</span></h2>
  <p class="muted small">Crawled in this region, but linked to nothing drawn for this VPC.</p>
  <label class="edge-filter"><input type="checkbox" id="show-all-crawled"> Show all crawled nodes</label>
  <input type="search" id="unlinked-search" placeholder="filter" aria-label="Filter the nodes not linked" autocomplete="off">
  <ul id="unlinked-list"></ul>
  <p class="muted small" id="unlinked-more" hidden></p>
</aside>
{% endif %}
</div>
{% if extended %}
<aside class="card edge-detail" id="edge-detail" aria-live="polite" hidden>
  <h2 id="edge-detail-title">Evidence</h2>
  <ul id="edge-detail-lines"></ul>
</aside>
{% endif %}
<script type="application/json" id="visual-positions">{{ positions | tojson }}</script>
<script type="application/json" id="visual-expanded">{{ expanded | tojson }}</script>
<p class="flash error" id="cy-layout-error" role="alert" hidden></p>
<p class="muted" id="cy-status"></p>
<p class="muted small" id="cy-note" aria-live="polite"></p>
<section class="card visual-legend" id="visual-legend" aria-labelledby="legend-title" {{ 'hidden' if not prefs.show_legend }}>
  <h2 id="legend-title">Legend</h2>
  <div class="legend-grid">
    {% for label, icon in legend_icons %}
      <span class="legend-item"><img src="{{ url_for('static', filename='icons/aws/' ~ icon) }}" alt="" width="22" height="22"> {{ label }}</span>
    {% endfor %}
  </div>
  <div class="legend-grid">
    <span class="legend-item"><i class="box-swatch box-vpc"></i> VPC</span>
    <span class="legend-item"><i class="box-swatch box-subnet"></i> Subnet</span>
    <span class="legend-item"><i class="node-swatch node-idle"></i> Idle ENI (available)</span>
    <span class="legend-item"><i class="node-swatch node-group"></i> Group (click to expand)</span>
    <span class="legend-item"><i class="box-swatch box-ctx"></i> Group by: security group / tag / Terraform root / owner / team</span>
    {% if not extended %}
    {% for t in edge_types %}
      <span class="legend-item"><i class="edge-swatch edge-{{ t }}"></i> {{ edge_labels[t] }}</span>
    {% endfor %}
    {% endif %}
  </div>
  {% if extended %}
  <div class="legend-grid" aria-label="Evidence levels">
    {% for level in evidence_levels %}
      <span class="legend-item"><i class="edge-swatch ev-{{ level }}"></i> <b>{{ evidence_labels[level] }}</b>: {{ evidence_help[level] }}</span>
    {% endfor %}
  </div>
  <div class="legend-grid">
    <span class="legend-item"><i class="box-swatch box-area"></i> Expanded service group (click its title to collapse)</span>
    <span class="legend-item"><i class="box-swatch box-lane"></i> Swimlane: one app (group by tag / Terraform root)</span>
    <span class="legend-item"><i class="edge-swatch edge-agg"></i> ×N: N merged connections (wider = more)</span>
    <span class="legend-item"><span class="badge err">broad access</span> an IAM statement allows Resource "*" (not expanded)</span>
  </div>
  {% endif %}
</section>
<p class="muted small">Icons: AWS Architecture Icons, © Amazon Web Services, Inc. or its affiliates.
  Layout: dagre (MIT).</p>
<script src="{{ url_for('static', filename='vendor/cytoscape.min.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/dagre.min.js') }}"></script>
<script src="{{ url_for('static', filename='declutter.js') }}"></script>
<script src="{{ url_for('static', filename='visual.js') }}"></script>
{% endif %}
{% endblock %}