Update CHANGELOG for v2.1.0 release

Add Archer Template Library to the feature list.

CHANGELOG.md

@@ -6,6 +6,30 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and this
 
 ---
 
+## [2.1.0] — 2026-06-06
+
+### Features
+
+- **Archer Template Library** — new template management system for Archer Risk Acceptance forms. Store static content (Environment Overview, Segmentation, Mitigating Controls) organized by Vendor > Platform > Model. Full CRUD with clone, search/filter, and per-section copy-to-clipboard. Accessible from the nav drawer (Template Mgr) and integrated into the Ivanti Queue for Archer workflow items.
+- **Estimated resolution date per metric** — the compliance asset sidebar now shows each noncompliant metric's estimated resolution date at the top of its section, in `YYYY-MM-DD` format, with placeholders for metrics that have no date set or an invalid date (closes #20)
+- **CARD Action Modal** with full owner context
+- **Granite Loader Sheet generator** with CARD enrichment, plus a Loader Sheet button on the Reporting page queue panel
+- **Vendor-specific issue type dropdown** for Jira ticket creation, with all vendor project keys
+- **LIVE and LAST REPORT badges** on the VCL compliance page
+- **Collapsible sections** on the Ivanti Queue page and side panel
+
+### Bug Fixes
+
+- Fix remediation plan and resolution date missing from the compliance table; format `resolution_date` as `YYYY-MM-DD`
+- Improve CARD action error messages and default loader columns
+- Fix CARD production timeout by forcing IPv4 (`dns.setDefaultResultOrder('ipv4first')`)
+- Add IP address validation to CARD confirm/decline/redirect actions
+- Auto-resolve bare IP to CARD asset ID with suffix lookup
+- Increase CARD API timeout from 15s to 30s
+- Rewrite CARD enrich-batch to use the team assets endpoint for full data
+
+---
+
 ## [2.0.0] — 2026-05-26
 
 ### Breaking Changes

backend/migrations/add_archer_templates_table.js

@@ -0,0 +1,60 @@
+// Migration: Add archer_templates table for the Archer Template Library feature
+const pool = require('../db');
+
+async function run() {
+    console.log('Starting archer_templates table migration...');
+    try {
+        await pool.query(`
+            CREATE TABLE IF NOT EXISTS archer_templates (
+                id SERIAL PRIMARY KEY,
+                vendor VARCHAR(100) NOT NULL,
+                platform VARCHAR(100) NOT NULL,
+                model VARCHAR(100) NOT NULL,
+                environment_overview TEXT NOT NULL DEFAULT '',
+                segmentation TEXT NOT NULL DEFAULT '',
+                mitigating_controls TEXT NOT NULL DEFAULT '',
+                additional_info TEXT NOT NULL DEFAULT '',
+                charter_network_banner TEXT NOT NULL DEFAULT '',
+                data_classification TEXT NOT NULL DEFAULT '',
+                charter_network TEXT NOT NULL DEFAULT '',
+                additional_access_list TEXT NOT NULL DEFAULT '',
+                created_by INTEGER REFERENCES users(id) ON DELETE SET NULL,
+                created_at TIMESTAMPTZ DEFAULT NOW(),
+                updated_at TIMESTAMPTZ DEFAULT NOW()
+            )
+        `);
+        console.log('✓ archer_templates table created (or already exists)');
+
+        // Case-insensitive uniqueness on trimmed vendor/platform/model
+        await pool.query(`
+            CREATE UNIQUE INDEX IF NOT EXISTS idx_archer_templates_unique_combo
+            ON archer_templates (LOWER(TRIM(vendor)), LOWER(TRIM(platform)), LOWER(TRIM(model)))
+        `);
+        console.log('✓ idx_archer_templates_unique_combo index created (or already exists)');
+
+        // Indexes for list query performance
+        await pool.query(`
+            CREATE INDEX IF NOT EXISTS idx_archer_templates_vendor
+            ON archer_templates(vendor)
+        `);
+        console.log('✓ idx_archer_templates_vendor index created (or already exists)');
+
+        await pool.query(`
+            CREATE INDEX IF NOT EXISTS idx_archer_templates_platform
+            ON archer_templates(platform)
+        `);
+        console.log('✓ idx_archer_templates_platform index created (or already exists)');
+
+        console.log('Migration complete.');
+    } catch (err) {
+        console.error('Migration failed:', err.message);
+        throw err;
+    }
+}
+
+module.exports = { run };
+
+// Self-execute when run directly
+if (require.main === module) {
+    run().then(() => process.exit(0)).catch(() => process.exit(1));
+}

backend/migrations/run-all.js

@@ -26,6 +26,7 @@ const POSTGRES_MIGRATIONS = [
     'add_multi_item_jira_ticket.js',
     'drop_jira_status_check_constraint.js',
     'add_compliance_history_metric_id.js',
+    'add_archer_templates_table.js',
 ];
 
 async function runAll() {

backend/routes/archerTemplates.js

@@ -0,0 +1,543 @@
+// routes/archerTemplates.js
+const express = require('express');
+const pool = require('../db');
+const { requireAuth, requireGroup } = require('../middleware/auth');
+const logAudit = require('../helpers/auditLog');
+
+// Section fields and their max length
+const SECTION_FIELDS = [
+  'environment_overview',
+  'segmentation',
+  'mitigating_controls',
+  'additional_info',
+  'charter_network_banner',
+  'data_classification',
+  'charter_network',
+  'additional_access_list'
+];
+const SECTION_MAX_LENGTH = 10000;
+
+function createArcherTemplatesRouter() {
+  const router = express.Router();
+
+  // --- Hierarchy endpoints (MUST be defined before /:id to avoid route conflicts) ---
+
+  /**
+   * GET /api/archer-templates/hierarchy/vendors
+   *
+   * Returns a sorted array of distinct vendor names across all templates.
+   *
+   * @returns {string[]} 200 - Array of vendor names sorted alphabetically
+   * @returns {object} 500 - { error: 'Internal server error' }
+   */
+  router.get('/hierarchy/vendors', requireAuth(), async (req, res) => {
+    try {
+      const { rows } = await pool.query(
+        'SELECT DISTINCT vendor FROM archer_templates ORDER BY vendor ASC'
+      );
+      res.json(rows.map(r => r.vendor));
+    } catch (err) {
+      console.error('Error fetching template vendors:', err);
+      res.status(500).json({ error: 'Internal server error' });
+    }
+  });
+
+  /**
+   * GET /api/archer-templates/hierarchy/platforms
+   *
+   * Returns a sorted array of distinct platform names for a given vendor.
+   *
+   * @query {string} vendor - (required) The vendor to filter platforms by
+   * @returns {string[]} 200 - Array of platform names sorted alphabetically
+   * @returns {object} 400 - { error: 'vendor query parameter is required' }
+   * @returns {object} 500 - { error: 'Internal server error' }
+   */
+  router.get('/hierarchy/platforms', requireAuth(), async (req, res) => {
+    const { vendor } = req.query;
+    if (!vendor) {
+      return res.status(400).json({ error: 'vendor query parameter is required' });
+    }
+    try {
+      const { rows } = await pool.query(
+        'SELECT DISTINCT platform FROM archer_templates WHERE LOWER(TRIM(vendor)) = LOWER(TRIM($1)) ORDER BY platform ASC',
+        [vendor]
+      );
+      res.json(rows.map(r => r.platform));
+    } catch (err) {
+      console.error('Error fetching template platforms:', err);
+      res.status(500).json({ error: 'Internal server error' });
+    }
+  });
+
+  /**
+   * GET /api/archer-templates/hierarchy/models
+   *
+   * Returns a sorted array of distinct model names for a given vendor and platform.
+   *
+   * @query {string} vendor - (required) The vendor to filter by
+   * @query {string} platform - (required) The platform to filter by
+   * @returns {string[]} 200 - Array of model names sorted alphabetically
+   * @returns {object} 400 - { error: 'Missing required query parameters: ...' }
+   * @returns {object} 500 - { error: 'Internal server error' }
+   */
+  router.get('/hierarchy/models', requireAuth(), async (req, res) => {
+    const { vendor, platform } = req.query;
+    const missing = [];
+    if (!vendor) missing.push('vendor');
+    if (!platform) missing.push('platform');
+    if (missing.length > 0) {
+      return res.status(400).json({ error: `Missing required query parameters: ${missing.join(', ')}` });
+    }
+    try {
+      const { rows } = await pool.query(
+        'SELECT DISTINCT model FROM archer_templates WHERE LOWER(TRIM(vendor)) = LOWER(TRIM($1)) AND LOWER(TRIM(platform)) = LOWER(TRIM($2)) ORDER BY model ASC',
+        [vendor, platform]
+      );
+      res.json(rows.map(r => r.model));
+    } catch (err) {
+      console.error('Error fetching template models:', err);
+      res.status(500).json({ error: 'Internal server error' });
+    }
+  });
+
+  // --- Core CRUD endpoints ---
+
+  /**
+   * POST /api/archer-templates
+   *
+   * Creates a new Archer template with vendor/platform/model hierarchy and section content.
+   * Requires Admin or Standard_User group.
+   *
+   * @body {string} vendor - (required) Vendor name, 1-100 chars after trim
+   * @body {string} platform - (required) Platform name, 1-100 chars after trim
+   * @body {string} model - (required) Model name, 1-100 chars after trim
+   * @body {string} [environment_overview] - Section content, max 10,000 chars
+   * @body {string} [segmentation] - Section content, max 10,000 chars
+   * @body {string} [mitigating_controls] - Section content, max 10,000 chars
+   * @body {string} [additional_info] - Section content, max 10,000 chars
+   * @body {string} [charter_network_banner] - Section content, max 10,000 chars
+   * @body {string} [data_classification] - Section content, max 10,000 chars
+   * @body {string} [charter_network] - Section content, max 10,000 chars
+   * @body {string} [additional_access_list] - Section content, max 10,000 chars
+   * @returns {object} 201 - The created template record (all columns)
+   * @returns {object} 400 - { error: 'validation message' }
+   * @returns {object} 409 - { error: 'A template with this vendor/platform/model combination already exists' }
+   * @returns {object} 500 - { error: 'Internal server error' }
+   */
+  router.post('/', requireAuth(), requireGroup('Admin', 'Standard_User'), async (req, res) => {
+    const { vendor, platform, model } = req.body;
+
+    // Validate vendor, platform, model — required, 1-100 chars after trim, non-empty after trim
+    const errors = [];
+    for (const [field, value] of [['vendor', vendor], ['platform', platform], ['model', model]]) {
+      if (value === undefined || value === null || typeof value !== 'string' || value.trim().length === 0) {
+        errors.push(`${field} is required`);
+      } else if (value.trim().length > 100) {
+        errors.push(`${field} must be 100 characters or fewer`);
+      }
+    }
+    if (errors.length > 0) {
+      return res.status(400).json({ error: errors.join('; ') });
+    }
+
+    // Validate section fields — max 10,000 chars each, default to empty string
+    const sectionValues = {};
+    for (const field of SECTION_FIELDS) {
+      const val = req.body[field];
+      if (val !== undefined && val !== null && typeof val === 'string') {
+        if (val.length > SECTION_MAX_LENGTH) {
+          return res.status(400).json({ error: `${field} must be 10,000 characters or fewer` });
+        }
+        sectionValues[field] = val;
+      } else {
+        sectionValues[field] = '';
+      }
+    }
+
+    try {
+      const { rows } = await pool.query(
+        `INSERT INTO archer_templates (vendor, platform, model, environment_overview, segmentation, mitigating_controls, additional_info, charter_network_banner, data_classification, charter_network, additional_access_list, created_by)
+         VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12)
+         RETURNING *`,
+        [
+          vendor.trim(),
+          platform.trim(),
+          model.trim(),
+          sectionValues.environment_overview,
+          sectionValues.segmentation,
+          sectionValues.mitigating_controls,
+          sectionValues.additional_info,
+          sectionValues.charter_network_banner,
+          sectionValues.data_classification,
+          sectionValues.charter_network,
+          sectionValues.additional_access_list,
+          req.user.id
+        ]
+      );
+
+      // Fire-and-forget audit log
+      logAudit({
+        userId: req.user.id,
+        username: req.user.username,
+        action: 'template_created',
+        entityType: 'archer_template',
+        entityId: String(rows[0].id),
+        details: { vendor: vendor.trim(), platform: platform.trim(), model: model.trim() },
+        ipAddress: req.ip
+      });
+
+      res.status(201).json(rows[0]);
+    } catch (err) {
+      if (err.code === '23505') {
+        return res.status(409).json({ error: 'A template with this vendor/platform/model combination already exists' });
+      }
+      console.error('Error creating template:', err);
+      res.status(500).json({ error: 'Internal server error' });
+    }
+  });
+
+  /**
+   * GET /api/archer-templates
+   *
+   * Lists all templates with optional search and exact-match filters.
+   * Results are sorted by vendor, platform, model (ascending).
+   *
+   * @query {string} [search] - Substring search across vendor, platform, and model (ILIKE)
+   * @query {string} [vendor] - Exact-match filter on vendor (case-insensitive)
+   * @query {string} [platform] - Exact-match filter on platform (case-insensitive)
+   * @query {string} [model] - Exact-match filter on model (case-insensitive)
+   * @returns {object[]} 200 - Array of template records sorted by vendor/platform/model
+   * @returns {object} 500 - { error: 'Internal server error' }
+   */
+  router.get('/', requireAuth(), async (req, res) => {
+    const { search, vendor, platform, model } = req.query;
+
+    let query = 'SELECT * FROM archer_templates WHERE 1=1';
+    const params = [];
+    let paramIndex = 1;
+
+    // Search — ILIKE substring match across vendor, platform, model
+    const trimmedSearch = search ? search.trim() : '';
+    if (trimmedSearch.length > 0) {
+      query += ` AND (vendor ILIKE $${paramIndex} OR platform ILIKE $${paramIndex} OR model ILIKE $${paramIndex})`;
+      params.push(`%${trimmedSearch}%`);
+      paramIndex++;
+    }
+
+    // Exact-match filters (case-insensitive via LOWER/TRIM)
+    if (vendor) {
+      query += ` AND LOWER(TRIM(vendor)) = LOWER(TRIM($${paramIndex}))`;
+      params.push(vendor);
+      paramIndex++;
+    }
+    if (platform) {
+      query += ` AND LOWER(TRIM(platform)) = LOWER(TRIM($${paramIndex}))`;
+      params.push(platform);
+      paramIndex++;
+    }
+    if (model) {
+      query += ` AND LOWER(TRIM(model)) = LOWER(TRIM($${paramIndex}))`;
+      params.push(model);
+      paramIndex++;
+    }
+
+    query += ' ORDER BY vendor ASC, platform ASC, model ASC';
+
+    try {
+      const { rows } = await pool.query(query, params);
+      res.json(rows);
+    } catch (err) {
+      console.error('Error fetching templates:', err);
+      res.status(500).json({ error: 'Internal server error' });
+    }
+  });
+
+  /**
+   * POST /api/archer-templates/:id/clone
+   *
+   * Clones an existing template's section content into a new template with different
+   * vendor/platform/model hierarchy values. Requires Admin or Standard_User group.
+   *
+   * @param {number} id - The ID of the source template to clone from
+   * @body {string} vendor - (required) New vendor name, 1-100 chars after trim
+   * @body {string} platform - (required) New platform name, 1-100 chars after trim
+   * @body {string} model - (required) New model name, 1-100 chars after trim
+   * @returns {object} 201 - The newly created cloned template record
+   * @returns {object} 400 - { error: 'validation message' }
+   * @returns {object} 404 - { error: 'Template not found' }
+   * @returns {object} 409 - { error: 'A template with this vendor/platform/model combination already exists' }
+   * @returns {object} 500 - { error: 'Internal server error' }
+   */
+  router.post('/:id/clone', requireAuth(), requireGroup('Admin', 'Standard_User'), async (req, res) => {
+    const { id } = req.params;
+    const { vendor, platform, model } = req.body;
+
+    // Validate vendor, platform, model — required, 1-100 chars after trim, non-empty after trim
+    const errors = [];
+    for (const [field, value] of [['vendor', vendor], ['platform', platform], ['model', model]]) {
+      if (value === undefined || value === null || typeof value !== 'string' || value.trim().length === 0) {
+        errors.push(`${field} is required`);
+      } else if (value.trim().length > 100) {
+        errors.push(`${field} must be 100 characters or fewer`);
+      }
+    }
+    if (errors.length > 0) {
+      return res.status(400).json({ error: errors.join('; ') });
+    }
+
+    try {
+      // Verify source template exists
+      const { rows: sourceRows } = await pool.query('SELECT * FROM archer_templates WHERE id = $1', [id]);
+      if (sourceRows.length === 0) {
+        return res.status(404).json({ error: 'Template not found' });
+      }
+      const source = sourceRows[0];
+
+      // INSERT copying all 8 section fields from source with new hierarchy values
+      const { rows } = await pool.query(
+        `INSERT INTO archer_templates (vendor, platform, model, environment_overview, segmentation, mitigating_controls, additional_info, charter_network_banner, data_classification, charter_network, additional_access_list, created_by)
+         VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12)
+         RETURNING *`,
+        [
+          vendor.trim(),
+          platform.trim(),
+          model.trim(),
+          source.environment_overview,
+          source.segmentation,
+          source.mitigating_controls,
+          source.additional_info,
+          source.charter_network_banner,
+          source.data_classification,
+          source.charter_network,
+          source.additional_access_list,
+          req.user.id
+        ]
+      );
+
+      // Fire-and-forget audit log
+      logAudit({
+        userId: req.user.id,
+        username: req.user.username,
+        action: 'template_cloned',
+        entityType: 'archer_template',
+        entityId: String(rows[0].id),
+        details: { sourceId: Number(id), newId: rows[0].id, vendor: vendor.trim(), platform: platform.trim(), model: model.trim() },
+        ipAddress: req.ip
+      });
+
+      res.status(201).json(rows[0]);
+    } catch (err) {
+      if (err.code === '23505') {
+        return res.status(409).json({ error: 'A template with this vendor/platform/model combination already exists' });
+      }
+      console.error('Error cloning template:', err);
+      res.status(500).json({ error: 'Internal server error' });
+    }
+  });
+
+  /**
+   * GET /api/archer-templates/:id
+   *
+   * Fetches a single template by its ID.
+   *
+   * @param {number} id - The template ID
+   * @returns {object} 200 - The template record
+   * @returns {object} 404 - { error: 'Template not found' }
+   * @returns {object} 500 - { error: 'Internal server error' }
+   */
+  router.get('/:id', requireAuth(), async (req, res) => {
+    const { id } = req.params;
+    try {
+      const { rows } = await pool.query('SELECT * FROM archer_templates WHERE id = $1', [id]);
+      if (rows.length === 0) {
+        return res.status(404).json({ error: 'Template not found' });
+      }
+      res.json(rows[0]);
+    } catch (err) {
+      console.error('Error fetching template:', err);
+      res.status(500).json({ error: 'Internal server error' });
+    }
+  });
+
+  /**
+   * PUT /api/archer-templates/:id
+   *
+   * Updates an existing template. Supports partial updates — only provided fields are changed.
+   * Always updates `updated_at` to NOW(). Requires Admin or Standard_User group.
+   *
+   * @param {number} id - The template ID to update
+   * @body {string} [vendor] - New vendor name, 1-100 chars after trim
+   * @body {string} [platform] - New platform name, 1-100 chars after trim
+   * @body {string} [model] - New model name, 1-100 chars after trim
+   * @body {string} [environment_overview] - Section content, max 10,000 chars
+   * @body {string} [segmentation] - Section content, max 10,000 chars
+   * @body {string} [mitigating_controls] - Section content, max 10,000 chars
+   * @body {string} [additional_info] - Section content, max 10,000 chars
+   * @body {string} [charter_network_banner] - Section content, max 10,000 chars
+   * @body {string} [data_classification] - Section content, max 10,000 chars
+   * @body {string} [charter_network] - Section content, max 10,000 chars
+   * @body {string} [additional_access_list] - Section content, max 10,000 chars
+   * @returns {object} 200 - The updated template record
+   * @returns {object} 400 - { error: 'validation message' }
+   * @returns {object} 404 - { error: 'Template not found' }
+   * @returns {object} 409 - { error: 'A template with this vendor/platform/model combination already exists' }
+   * @returns {object} 500 - { error: 'Internal server error' }
+   */
+  router.put('/:id', requireAuth(), requireGroup('Admin', 'Standard_User'), async (req, res) => {
+    const { id } = req.params;
+
+    try {
+      // Verify template exists
+      const { rows: existingRows } = await pool.query('SELECT * FROM archer_templates WHERE id = $1', [id]);
+      if (existingRows.length === 0) {
+        return res.status(404).json({ error: 'Template not found' });
+      }
+      const existing = existingRows[0];
+
+      // Validate provided hierarchy fields
+      const errors = [];
+      const updatedFields = {};
+      const changedFieldNames = [];
+
+      for (const field of ['vendor', 'platform', 'model']) {
+        const value = req.body[field];
+        if (value !== undefined) {
+          if (value === null || typeof value !== 'string' || value.trim().length === 0) {
+            errors.push(`${field} is required`);
+          } else if (value.trim().length > 100) {
+            errors.push(`${field} must be 100 characters or fewer`);
+          } else {
+            updatedFields[field] = value.trim();
+            if (value.trim() !== existing[field]) {
+              changedFieldNames.push(field);
+            }
+          }
+        }
+      }
+
+      // Validate provided section fields
+      for (const field of SECTION_FIELDS) {
+        const val = req.body[field];
+        if (val !== undefined) {
+          if (val !== null && typeof val === 'string') {
+            if (val.length > SECTION_MAX_LENGTH) {
+              errors.push(`${field} must be 10,000 characters or fewer`);
+            } else {
+              updatedFields[field] = val;
+              if (val !== existing[field]) {
+                changedFieldNames.push(field);
+              }
+            }
+          } else {
+            updatedFields[field] = '';
+            if ('' !== existing[field]) {
+              changedFieldNames.push(field);
+            }
+          }
+        }
+      }
+
+      if (errors.length > 0) {
+        return res.status(400).json({ error: errors.join('; ') });
+      }
+
+      // Check uniqueness if vendor/platform/model changed (excluding self)
+      const newVendor = updatedFields.vendor || existing.vendor;
+      const newPlatform = updatedFields.platform || existing.platform;
+      const newModel = updatedFields.model || existing.model;
+
+      if (updatedFields.vendor !== undefined || updatedFields.platform !== undefined || updatedFields.model !== undefined) {
+        const { rows: conflictRows } = await pool.query(
+          `SELECT id FROM archer_templates WHERE LOWER(TRIM(vendor)) = LOWER(TRIM($1)) AND LOWER(TRIM(platform)) = LOWER(TRIM($2)) AND LOWER(TRIM(model)) = LOWER(TRIM($3)) AND id != $4`,
+          [newVendor, newPlatform, newModel, id]
+        );
+        if (conflictRows.length > 0) {
+          return res.status(409).json({ error: 'A template with this vendor/platform/model combination already exists' });
+        }
+      }
+
+      // Build dynamic UPDATE SET clause for only provided fields
+      const setClauses = [];
+      const params = [];
+      let paramIndex = 1;
+
+      for (const [field, value] of Object.entries(updatedFields)) {
+        setClauses.push(`${field} = $${paramIndex}`);
+        params.push(value);
+        paramIndex++;
+      }
+
+      // Always set updated_at = NOW()
+      setClauses.push(`updated_at = NOW()`);
+
+      // Execute update
+      params.push(id);
+      const { rows } = await pool.query(
+        `UPDATE archer_templates SET ${setClauses.join(', ')} WHERE id = $${paramIndex} RETURNING *`,
+        params
+      );
+
+      // Fire-and-forget audit log
+      logAudit({
+        userId: req.user.id,
+        username: req.user.username,
+        action: 'template_updated',
+        entityType: 'archer_template',
+        entityId: String(id),
+        details: { changedFields: changedFieldNames },
+        ipAddress: req.ip
+      });
+
+      res.json(rows[0]);
+    } catch (err) {
+      console.error('Error updating template:', err);
+      res.status(500).json({ error: 'Internal server error' });
+    }
+  });
+
+  /**
+   * DELETE /api/archer-templates/:id
+   *
+   * Permanently deletes a template. Requires Admin or Standard_User group.
+   *
+   * @param {number} id - The template ID to delete
+   * @returns {object} 200 - { message: 'Template deleted successfully' }
+   * @returns {object} 404 - { error: 'Template not found' }
+   * @returns {object} 500 - { error: 'Internal server error' }
+   */
+  router.delete('/:id', requireAuth(), requireGroup('Admin', 'Standard_User'), async (req, res) => {
+    const { id } = req.params;
+
+    try {
+      // Verify template exists
+      const { rows: existingRows } = await pool.query('SELECT * FROM archer_templates WHERE id = $1', [id]);
+      if (existingRows.length === 0) {
+        return res.status(404).json({ error: 'Template not found' });
+      }
+      const existing = existingRows[0];
+
+      // Delete the template
+      await pool.query('DELETE FROM archer_templates WHERE id = $1', [id]);
+
+      // Fire-and-forget audit log
+      logAudit({
+        userId: req.user.id,
+        username: req.user.username,
+        action: 'template_deleted',
+        entityType: 'archer_template',
+        entityId: String(id),
+        details: { vendor: existing.vendor, platform: existing.platform, model: existing.model },
+        ipAddress: req.ip
+      });
+
+      res.json({ message: 'Template deleted successfully' });
+    } catch (err) {
+      console.error('Error deleting template:', err);
+      res.status(500).json({ error: 'Internal server error' });
+    }
+  });
+
+  return router;
+}
+
+module.exports = createArcherTemplatesRouter;

backend/server.js

@@ -26,6 +26,7 @@ const logAudit = require('./helpers/auditLog');
 const createNvdLookupRouter = require('./routes/nvdLookup');
 const createKnowledgeBaseRouter = require('./routes/knowledgeBase');
 const createArcherTicketsRouter = require('./routes/archerTickets');
+const createArcherTemplatesRouter = require('./routes/archerTemplates');
 const createIvantiWorkflowsRouter = require('./routes/ivantiWorkflows');
 const createIvantiFindingsRouter = require('./routes/ivantiFindings');
 const createIvantiTodoQueueRouter = require('./routes/ivantiTodoQueue');
@@ -201,6 +202,9 @@ app.use('/api/knowledge-base', createKnowledgeBaseRouter(upload));
 // Archer tickets routes (editor/admin for create/update/delete, all authenticated for view)
 app.use('/api/archer-tickets', createArcherTicketsRouter());
 
+// Archer template library routes (editor/admin for create/update/delete/clone, all authenticated for view)
+app.use('/api/archer-templates', createArcherTemplatesRouter());
+
 // Ivanti / RiskSense workflow routes (all authenticated users)
 app.use('/api/ivanti/workflows', createIvantiWorkflowsRouter());
 

frontend/src/App.js

@@ -19,6 +19,7 @@ import JiraPage from './components/pages/JiraPage';
 import AdminPage from './components/pages/AdminPage';
 import ArchiveSummaryBar from './components/pages/ArchiveSummaryBar';
 import ArcherPage from './components/pages/ArcherPage';
+import ArcherTemplatePage from './components/pages/ArcherTemplatePage';
 import FeedbackModal from './components/FeedbackModal';
 import NotificationBell from './components/NotificationBell';
 import './App.css';
@@ -199,7 +200,7 @@ export default function App() {
   const [cveDocuments, setCveDocuments] = useState({});
   const [quickCheckCVE, setQuickCheckCVE] = useState('');
   const [quickCheckResult, setQuickCheckResult] = useState(null);
-  const VALID_PAGES = new Set(['home', 'triage', 'compliance', 'knowledge-base', 'exports', 'jira', 'admin']);
+  const VALID_PAGES = new Set(['home', 'triage', 'compliance', 'knowledge-base', 'exports', 'jira', 'admin', 'archer-templates']);
   const [currentPage, setCurrentPageRaw] = useState(() => {
     try {
       const saved = localStorage.getItem('cve-dashboard-page');
@@ -1105,6 +1106,7 @@ export default function App() {
         {currentPage === 'knowledge-base' && <KnowledgeBasePage />}
         {currentPage === 'exports'        && <ExportsPage />}
         {currentPage === 'jira'           && <JiraPage />}
+        {currentPage === 'archer-templates' && <ArcherTemplatePage />}
         {currentPage === 'admin' && isAdmin() && <AdminPage />}
         {currentPage === 'admin' && !isAdmin() && (() => { setCurrentPage('home'); return null; })()}
 

frontend/src/components/DeleteConfirmModal.js

@@ -0,0 +1,271 @@
+// DeleteConfirmModal.js
+// Confirmation dialog for deleting Archer templates.
+// Identifies the template by vendor/platform/model before deletion.
+// On confirm: calls DELETE API, invokes onConfirm callback, closes.
+// On cancel: dismisses dialog, leaves template unchanged.
+
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { AlertTriangle, Trash2 } from 'lucide-react';
+
+const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
+
+/**
+ * DeleteConfirmModal — confirmation dialog for deleting an Archer template.
+ *
+ * Props:
+ *   template   {object|null}  The template to delete (contains id, vendor, platform, model).
+ *                              When null/undefined, modal is hidden.
+ *   onConfirm  {function}     Callback after successful delete (refresh list).
+ *   onCancel   {function}     Callback to close without deleting.
+ */
+export default function DeleteConfirmModal({ template, onConfirm, onCancel }) {
+  const [deleting, setDeleting] = useState(false);
+  const [error, setError] = useState(null);
+  const cancelRef = useRef(null);
+
+  // Focus cancel button on open and handle Escape key
+  useEffect(() => {
+    if (!template) return;
+
+    const timer = setTimeout(() => cancelRef.current?.focus(), 50);
+
+    const handleKey = (e) => {
+      if (e.key === 'Escape' && !deleting) onCancel?.();
+    };
+    document.addEventListener('keydown', handleKey);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener('keydown', handleKey);
+    };
+  }, [template, deleting, onCancel]);
+
+  // Reset state when template changes (new modal open)
+  useEffect(() => {
+    if (template) {
+      setDeleting(false);
+      setError(null);
+    }
+  }, [template]);
+
+  const handleConfirm = useCallback(async () => {
+    if (!template) return;
+    setDeleting(true);
+    setError(null);
+
+    try {
+      const res = await fetch(`${API_BASE}/archer-templates/${template.id}`, {
+        method: 'DELETE',
+        credentials: 'include',
+      });
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || `Delete failed (${res.status})`);
+      }
+
+      onConfirm?.();
+    } catch (err) {
+      setError(err.message);
+      setDeleting(false);
+    }
+  }, [template, onConfirm]);
+
+  if (!template) return null;
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="delete-confirm-title"
+      style={{
+        position: 'fixed',
+        inset: 0,
+        zIndex: 70,
+        background: 'rgba(10, 14, 39, 0.95)',
+        backdropFilter: 'blur(8px)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '1rem',
+      }}
+      onClick={(e) => {
+        if (e.target === e.currentTarget && !deleting) onCancel?.();
+      }}
+    >
+      <div style={{
+        background: 'linear-gradient(135deg, rgba(30,41,59,0.98) 0%, rgba(15,23,42,0.99) 100%)',
+        border: '1px solid rgba(239, 68, 68, 0.3)',
+        borderRadius: '0.75rem',
+        boxShadow: '0 20px 60px rgba(0,0,0,0.7), 0 0 30px rgba(239,68,68,0.06)',
+        width: '100%',
+        maxWidth: '440px',
+        padding: '1.75rem 2rem',
+      }}>
+        {/* Header */}
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.625rem',
+          marginBottom: '1rem',
+        }}>
+          <div style={{
+            width: '32px',
+            height: '32px',
+            borderRadius: '0.5rem',
+            background: 'rgba(239, 68, 68, 0.10)',
+            border: '1px solid rgba(239, 68, 68, 0.3)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+          }}>
+            <AlertTriangle style={{ width: '16px', height: '16px', color: '#EF4444' }} />
+          </div>
+          <div
+            id="delete-confirm-title"
+            style={{
+              fontFamily: "'JetBrains Mono', monospace",
+              fontSize: '0.95rem',
+              fontWeight: '700',
+              color: '#EF4444',
+              textTransform: 'uppercase',
+              letterSpacing: '0.08em',
+            }}
+          >
+            Delete Template
+          </div>
+        </div>
+
+        {/* Body */}
+        <div style={{
+          fontSize: '0.82rem',
+          color: '#CBD5E1',
+          lineHeight: '1.6',
+          marginBottom: '1.25rem',
+          fontFamily: "'Outfit', system-ui, sans-serif",
+        }}>
+          <p style={{ margin: '0 0 0.75rem 0' }}>
+            Are you sure you want to delete this template? This action cannot be undone.
+          </p>
+          <div style={{
+            background: 'rgba(239, 68, 68, 0.06)',
+            border: '1px solid rgba(239, 68, 68, 0.15)',
+            borderRadius: '0.5rem',
+            padding: '0.75rem 1rem',
+          }}>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.3rem' }}>
+              <span style={{ color: '#94A3B8', fontSize: '0.72rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                Vendor
+              </span>
+              <span style={{ color: '#e0e0e0', fontSize: '0.82rem', fontWeight: 600 }}>
+                {template.vendor}
+              </span>
+              <span style={{ color: '#94A3B8', fontSize: '0.72rem', textTransform: 'uppercase', letterSpacing: '0.05em', marginTop: '0.3rem' }}>
+                Platform
+              </span>
+              <span style={{ color: '#e0e0e0', fontSize: '0.82rem', fontWeight: 600 }}>
+                {template.platform}
+              </span>
+              <span style={{ color: '#94A3B8', fontSize: '0.72rem', textTransform: 'uppercase', letterSpacing: '0.05em', marginTop: '0.3rem' }}>
+                Model
+              </span>
+              <span style={{ color: '#e0e0e0', fontSize: '0.82rem', fontWeight: 600 }}>
+                {template.model}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Error banner */}
+        {error && (
+          <div style={{
+            padding: '0.6rem 0.75rem',
+            borderRadius: '0.375rem',
+            background: 'rgba(239, 68, 68, 0.1)',
+            border: '1px solid rgba(239, 68, 68, 0.25)',
+            color: '#FCA5A5',
+            fontSize: '0.78rem',
+            marginBottom: '1rem',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.4rem',
+          }}>
+            <AlertTriangle style={{ width: '12px', height: '12px', flexShrink: 0 }} />
+            {error}
+          </div>
+        )}
+
+        {/* Actions */}
+        <div style={{ display: 'flex', gap: '0.75rem' }}>
+          <button
+            ref={cancelRef}
+            onClick={onCancel}
+            disabled={deleting}
+            style={{
+              flex: 1,
+              padding: '0.625rem',
+              background: 'transparent',
+              border: '1px solid rgba(100,116,139,0.4)',
+              borderRadius: '0.375rem',
+              color: '#94A3B8',
+              cursor: deleting ? 'not-allowed' : 'pointer',
+              fontFamily: "'JetBrains Mono', monospace",
+              fontSize: '0.78rem',
+              opacity: deleting ? 0.5 : 1,
+              transition: 'all 0.2s ease',
+            }}
+            onMouseEnter={e => {
+              if (!deleting) {
+                e.currentTarget.style.borderColor = 'rgba(100,116,139,0.8)';
+                e.currentTarget.style.color = '#CBD5E1';
+              }
+            }}
+            onMouseLeave={e => {
+              e.currentTarget.style.borderColor = 'rgba(100,116,139,0.4)';
+              e.currentTarget.style.color = '#94A3B8';
+            }}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleConfirm}
+            disabled={deleting}
+            style={{
+              flex: 1.5,
+              padding: '0.625rem',
+              background: 'rgba(239, 68, 68, 0.10)',
+              border: '1px solid #EF4444',
+              borderRadius: '0.375rem',
+              color: '#EF4444',
+              cursor: deleting ? 'not-allowed' : 'pointer',
+              fontFamily: "'JetBrains Mono', monospace",
+              fontSize: '0.78rem',
+              fontWeight: '600',
+              textTransform: 'uppercase',
+              letterSpacing: '0.05em',
+              transition: 'all 0.2s ease',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: '0.4rem',
+              opacity: deleting ? 0.7 : 1,
+            }}
+            onMouseEnter={e => {
+              if (!deleting) {
+                e.currentTarget.style.background = 'rgba(239, 68, 68, 0.18)';
+                e.currentTarget.style.boxShadow = '0 0 20px rgba(239,68,68,0.15)';
+              }
+            }}
+            onMouseLeave={e => {
+              e.currentTarget.style.background = 'rgba(239, 68, 68, 0.10)';
+              e.currentTarget.style.boxShadow = 'none';
+            }}
+          >
+            <Trash2 style={{ width: '13px', height: '13px' }} />
+            {deleting ? 'Deleting...' : 'Delete Template'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/NavDrawer.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { X, Home, BarChart2, BookOpen, Download, ShieldCheck, Settings, Ticket, Building2 } from 'lucide-react';
+import { X, Home, BarChart2, BookOpen, Download, ShieldCheck, Settings, Ticket, Building2, Layers } from 'lucide-react';
 import { useAuth } from '../contexts/AuthContext';
 
 const NAV_ITEMS = [
@@ -10,6 +10,7 @@ const NAV_ITEMS = [
   { id: 'knowledge-base', label: 'Knowledge Base', icon: BookOpen,    color: '#10B981', description: 'Articles & documentation'   },
   { id: 'exports',        label: 'Exports',        icon: Download,    color: '#8B5CF6', description: 'Export data & reports'      },
   { id: 'jira',           label: 'Jira Tickets',   icon: Ticket,      color: '#6366F1', description: 'Jira issue tracking & sync' },
+  { id: 'archer-templates', label: 'Template Mgr', icon: Layers,    color: '#F472B6', description: 'Archer template library'   },
 ];
 
 const ADMIN_ITEM = { id: 'admin', label: 'Admin Panel', icon: Settings, color: '#EF4444', description: 'User management & audit' };

frontend/src/components/TemplateFormModal.js

@@ -0,0 +1,523 @@
+// TemplateFormModal.js
+// Modal for creating, editing, and cloning Archer Risk Acceptance templates.
+// Supports three modes:
+//   - create: all fields empty
+//   - edit: pre-populated from existing template
+//   - clone: sections pre-populated from source, hierarchy fields empty
+
+import React, { useState, useEffect, useRef } from 'react';
+import { X, Save, AlertCircle, Loader } from 'lucide-react';
+
+const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
+
+// ---------------------------------------------------------------------------
+// Section definitions — ordered as static first, then semi-static
+// ---------------------------------------------------------------------------
+const SECTIONS = [
+  { key: 'environment_overview', label: 'Environment Overview' },
+  { key: 'segmentation', label: 'Segmentation' },
+  { key: 'mitigating_controls', label: 'Mitigating Controls' },
+  { key: 'additional_info', label: 'Additional Info/Background' },
+  { key: 'charter_network_banner', label: 'Charter Network Banner' },
+  { key: 'data_classification', label: 'Data Classification' },
+  { key: 'charter_network', label: 'Charter Network' },
+  { key: 'additional_access_list', label: 'Additional Access List' },
+];
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+const STYLES = {
+  backdrop: {
+    position: 'fixed',
+    inset: 0,
+    zIndex: 70,
+    background: 'rgba(10, 14, 39, 0.95)',
+    backdropFilter: 'blur(8px)',
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    padding: '2rem 1rem',
+    overflowY: 'auto',
+  },
+  modal: {
+    background: 'linear-gradient(135deg, rgba(30,41,59,0.98) 0%, rgba(15,23,42,0.99) 100%)',
+    border: '1px solid rgba(0, 212, 255, 0.2)',
+    borderRadius: '12px',
+    boxShadow: '0 20px 60px rgba(0,0,0,0.7), 0 0 30px rgba(0,212,255,0.08)',
+    width: '100%',
+    maxWidth: '700px',
+    padding: '1.75rem 2rem',
+    marginTop: '1rem',
+    marginBottom: '2rem',
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: '1.25rem',
+  },
+  title: {
+    fontFamily: 'monospace',
+    fontSize: '0.8rem',
+    fontWeight: 700,
+    color: '#00d4ff',
+    textTransform: 'uppercase',
+    letterSpacing: '0.12em',
+  },
+  closeBtn: {
+    background: 'transparent',
+    border: 'none',
+    color: '#64748B',
+    cursor: 'pointer',
+    padding: '0.25rem',
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  fieldGroup: {
+    marginBottom: '1rem',
+  },
+  label: {
+    display: 'block',
+    fontSize: '0.75rem',
+    fontWeight: 600,
+    color: '#94A3B8',
+    marginBottom: '0.3rem',
+    textTransform: 'uppercase',
+    letterSpacing: '0.05em',
+  },
+  input: {
+    width: '100%',
+    padding: '0.55rem 0.75rem',
+    borderRadius: '6px',
+    border: '1px solid rgba(0, 212, 255, 0.2)',
+    background: 'rgba(15, 23, 42, 0.8)',
+    color: '#e0e0e0',
+    fontSize: '0.85rem',
+    fontFamily: 'inherit',
+    outline: 'none',
+    transition: 'border-color 0.2s',
+    boxSizing: 'border-box',
+  },
+  inputError: {
+    borderColor: '#ef4444',
+  },
+  textarea: {
+    width: '100%',
+    padding: '0.55rem 0.75rem',
+    borderRadius: '6px',
+    border: '1px solid rgba(0, 212, 255, 0.15)',
+    background: 'rgba(15, 23, 42, 0.8)',
+    color: '#e0e0e0',
+    fontSize: '0.82rem',
+    fontFamily: 'inherit',
+    outline: 'none',
+    resize: 'vertical',
+    minHeight: '80px',
+    transition: 'border-color 0.2s',
+    boxSizing: 'border-box',
+  },
+  errorText: {
+    fontSize: '0.72rem',
+    color: '#ef4444',
+    marginTop: '0.2rem',
+  },
+  errorBanner: {
+    padding: '0.65rem 0.85rem',
+    borderRadius: '8px',
+    background: 'rgba(239, 68, 68, 0.1)',
+    border: '1px solid rgba(239, 68, 68, 0.25)',
+    color: '#FCA5A5',
+    fontSize: '0.8rem',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.5rem',
+    marginBottom: '1rem',
+  },
+  sectionDivider: {
+    margin: '1.25rem 0 0.75rem',
+    padding: '0.4rem 0',
+    borderTop: '1px solid rgba(0, 212, 255, 0.08)',
+    fontSize: '0.7rem',
+    fontWeight: 700,
+    color: '#00d4ff',
+    textTransform: 'uppercase',
+    letterSpacing: '0.12em',
+  },
+  footer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: '0.75rem',
+    marginTop: '1.5rem',
+    paddingTop: '1rem',
+    borderTop: '1px solid rgba(0, 212, 255, 0.08)',
+  },
+  cancelBtn: {
+    padding: '0.55rem 1.1rem',
+    borderRadius: '6px',
+    border: '1px solid rgba(100,116,139,0.4)',
+    background: 'transparent',
+    color: '#94A3B8',
+    cursor: 'pointer',
+    fontSize: '0.8rem',
+    fontWeight: 600,
+    transition: 'all 0.2s',
+  },
+  submitBtn: {
+    padding: '0.55rem 1.25rem',
+    borderRadius: '6px',
+    border: '1px solid rgba(0, 212, 255, 0.4)',
+    background: 'rgba(0, 212, 255, 0.12)',
+    color: '#7DD3FC',
+    cursor: 'pointer',
+    fontSize: '0.8rem',
+    fontWeight: 600,
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '0.4rem',
+    transition: 'all 0.2s',
+  },
+  submitBtnDisabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+  charCount: {
+    fontSize: '0.65rem',
+    color: '#475569',
+    textAlign: 'right',
+    marginTop: '0.15rem',
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+/**
+ * TemplateFormModal
+ *
+ * Props:
+ *   mode       {'create'|'edit'|'clone'}  Determines form behavior
+ *   template   {object|null}              Source template (for edit/clone)
+ *   onClose    {function}                 Callback to close the modal
+ *   onSuccess  {function}                 Callback after successful save (refreshes list)
+ */
+export default function TemplateFormModal({ mode = 'create', template = null, onClose, onSuccess }) {
+  // Form state
+  const [vendor, setVendor] = useState('');
+  const [platform, setPlatform] = useState('');
+  const [model, setModel] = useState('');
+  const [sections, setSections] = useState(() => {
+    const initial = {};
+    for (const s of SECTIONS) {
+      initial[s.key] = '';
+    }
+    return initial;
+  });
+
+  // Validation and submission state
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [apiError, setApiError] = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  const vendorRef = useRef(null);
+
+  // -------------------------------------------------------------------------
+  // Initialize form based on mode
+  // -------------------------------------------------------------------------
+  useEffect(() => {
+    if (mode === 'edit' && template) {
+      setVendor(template.vendor || '');
+      setPlatform(template.platform || '');
+      setModel(template.model || '');
+      const sectionValues = {};
+      for (const s of SECTIONS) {
+        sectionValues[s.key] = template[s.key] || '';
+      }
+      setSections(sectionValues);
+    } else if (mode === 'clone' && template) {
+      // Clone: copy sections, leave hierarchy empty
+      setVendor('');
+      setPlatform('');
+      setModel('');
+      const sectionValues = {};
+      for (const s of SECTIONS) {
+        sectionValues[s.key] = template[s.key] || '';
+      }
+      setSections(sectionValues);
+    }
+    // create mode: all fields already empty (initial state)
+  }, [mode, template]);
+
+  // Focus the vendor input on mount
+  useEffect(() => {
+    const timer = setTimeout(() => vendorRef.current?.focus(), 80);
+    return () => clearTimeout(timer);
+  }, []);
+
+  // Handle Escape key
+  useEffect(() => {
+    const handleKey = (e) => {
+      if (e.key === 'Escape') onClose?.();
+    };
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [onClose]);
+
+  // -------------------------------------------------------------------------
+  // Validation
+  // -------------------------------------------------------------------------
+  function validate() {
+    const errors = {};
+    if (!vendor.trim()) errors.vendor = 'Vendor is required';
+    else if (vendor.trim().length > 100) errors.vendor = 'Vendor must be 100 characters or fewer';
+
+    if (!platform.trim()) errors.platform = 'Platform is required';
+    else if (platform.trim().length > 100) errors.platform = 'Platform must be 100 characters or fewer';
+
+    if (!model.trim()) errors.model = 'Model is required';
+    else if (model.trim().length > 100) errors.model = 'Model must be 100 characters or fewer';
+
+    setFieldErrors(errors);
+    return Object.keys(errors).length === 0;
+  }
+
+  // -------------------------------------------------------------------------
+  // Submit
+  // -------------------------------------------------------------------------
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setApiError(null);
+
+    if (!validate()) return;
+
+    setSubmitting(true);
+
+    try {
+      const body = {
+        vendor: vendor.trim(),
+        platform: platform.trim(),
+        model: model.trim(),
+      };
+
+      // Include section fields
+      for (const s of SECTIONS) {
+        body[s.key] = sections[s.key];
+      }
+
+      let url;
+      let method;
+
+      if (mode === 'edit' && template) {
+        // PUT to update
+        url = `${API_BASE}/archer-templates/${template.id}`;
+        method = 'PUT';
+      } else if (mode === 'clone' && template) {
+        // POST to clone endpoint
+        url = `${API_BASE}/archer-templates/${template.id}/clone`;
+        method = 'POST';
+        // Clone endpoint only needs vendor, platform, model
+        delete body.environment_overview;
+        delete body.segmentation;
+        delete body.mitigating_controls;
+        delete body.additional_info;
+        delete body.charter_network_banner;
+        delete body.data_classification;
+        delete body.charter_network;
+        delete body.additional_access_list;
+      } else {
+        // POST to create
+        url = `${API_BASE}/archer-templates`;
+        method = 'POST';
+      }
+
+      const res = await fetch(url, {
+        method,
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        if (res.status === 409) {
+          setApiError(data.error || 'A template with this vendor/platform/model combination already exists');
+        } else {
+          setApiError(data.error || `Request failed (${res.status})`);
+        }
+        return;
+      }
+
+      // Success — close and refresh
+      onSuccess?.();
+      onClose?.();
+    } catch (err) {
+      setApiError(err.message || 'Network error — please try again');
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Section change handler
+  // -------------------------------------------------------------------------
+  function handleSectionChange(key, value) {
+    setSections(prev => ({ ...prev, [key]: value }));
+  }
+
+  // -------------------------------------------------------------------------
+  // Title based on mode
+  // -------------------------------------------------------------------------
+  const titles = {
+    create: 'Create Template',
+    edit: 'Edit Template',
+    clone: 'Clone Template',
+  };
+
+  // -------------------------------------------------------------------------
+  // Render
+  // -------------------------------------------------------------------------
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="template-form-modal-title"
+      style={STYLES.backdrop}
+      onClick={(e) => { if (e.target === e.currentTarget) onClose?.(); }}
+    >
+      <div style={STYLES.modal}>
+        {/* Header */}
+        <div style={STYLES.header}>
+          <span id="template-form-modal-title" style={STYLES.title}>
+            {titles[mode] || 'Template'}
+          </span>
+          <button
+            style={STYLES.closeBtn}
+            onClick={onClose}
+            title="Close"
+            aria-label="Close modal"
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        {/* API error banner */}
+        {apiError && (
+          <div style={STYLES.errorBanner}>
+            <AlertCircle size={14} />
+            {apiError}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} noValidate>
+          {/* Hierarchy fields */}
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '0.75rem' }}>
+            {/* Vendor */}
+            <div style={STYLES.fieldGroup}>
+              <label style={STYLES.label} htmlFor="tmpl-vendor">Vendor *</label>
+              <input
+                ref={vendorRef}
+                id="tmpl-vendor"
+                type="text"
+                maxLength={100}
+                value={vendor}
+                onChange={(e) => {
+                  setVendor(e.target.value);
+                  if (fieldErrors.vendor) setFieldErrors(prev => ({ ...prev, vendor: undefined }));
+                }}
+                style={{ ...STYLES.input, ...(fieldErrors.vendor ? STYLES.inputError : {}) }}
+                placeholder="e.g. Harmonic"
+              />
+              {fieldErrors.vendor && <div style={STYLES.errorText}>{fieldErrors.vendor}</div>}
+            </div>
+
+            {/* Platform */}
+            <div style={STYLES.fieldGroup}>
+              <label style={STYLES.label} htmlFor="tmpl-platform">Platform *</label>
+              <input
+                id="tmpl-platform"
+                type="text"
+                maxLength={100}
+                value={platform}
+                onChange={(e) => {
+                  setPlatform(e.target.value);
+                  if (fieldErrors.platform) setFieldErrors(prev => ({ ...prev, platform: undefined }));
+                }}
+                style={{ ...STYLES.input, ...(fieldErrors.platform ? STYLES.inputError : {}) }}
+                placeholder="e.g. vCMTS"
+              />
+              {fieldErrors.platform && <div style={STYLES.errorText}>{fieldErrors.platform}</div>}
+            </div>
+
+            {/* Model */}
+            <div style={STYLES.fieldGroup}>
+              <label style={STYLES.label} htmlFor="tmpl-model">Model *</label>
+              <input
+                id="tmpl-model"
+                type="text"
+                maxLength={100}
+                value={model}
+                onChange={(e) => {
+                  setModel(e.target.value);
+                  if (fieldErrors.model) setFieldErrors(prev => ({ ...prev, model: undefined }));
+                }}
+                style={{ ...STYLES.input, ...(fieldErrors.model ? STYLES.inputError : {}) }}
+                placeholder="e.g. 3.29.1"
+              />
+              {fieldErrors.model && <div style={STYLES.errorText}>{fieldErrors.model}</div>}
+            </div>
+          </div>
+
+          {/* Section textareas */}
+          <div style={STYLES.sectionDivider}>Template Sections</div>
+
+          {SECTIONS.map((section) => (
+            <div key={section.key} style={STYLES.fieldGroup}>
+              <label style={STYLES.label} htmlFor={`tmpl-${section.key}`}>
+                {section.label}
+              </label>
+              <textarea
+                id={`tmpl-${section.key}`}
+                value={sections[section.key]}
+                onChange={(e) => handleSectionChange(section.key, e.target.value)}
+                maxLength={10000}
+                style={STYLES.textarea}
+                placeholder={`Enter ${section.label.toLowerCase()} content...`}
+              />
+              {sections[section.key].length > 9500 && (
+                <div style={STYLES.charCount}>
+                  {sections[section.key].length}/10,000
+                </div>
+              )}
+            </div>
+          ))}
+
+          {/* Footer actions */}
+          <div style={STYLES.footer}>
+            <button
+              type="button"
+              style={STYLES.cancelBtn}
+              onClick={onClose}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={submitting}
+              style={{
+                ...STYLES.submitBtn,
+                ...(submitting ? STYLES.submitBtnDisabled : {}),
+              }}
+            >
+              {submitting ? <Loader size={13} /> : <Save size={13} />}
+              {submitting ? 'Saving...' : (mode === 'edit' ? 'Update Template' : 'Save Template')}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

frontend/src/components/TemplateSelector.js

@@ -0,0 +1,621 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Search, ChevronDown, Loader, FileText, Clipboard, Check, Copy } from 'lucide-react';
+
+const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
+
+// ---------------------------------------------------------------------------
+// Section field mapping — ordered: static first, then semi-static
+// ---------------------------------------------------------------------------
+const SECTIONS = [
+  // Static sections
+  { key: 'environment_overview', label: 'Environment Overview' },
+  { key: 'segmentation', label: 'Segmentation' },
+  { key: 'mitigating_controls', label: 'Mitigating Controls' },
+  // Semi-static sections
+  { key: 'additional_info', label: 'Additional Info/Background' },
+  { key: 'charter_network_banner', label: 'Charter Network Banner' },
+  { key: 'data_classification', label: 'Data Classification' },
+  { key: 'charter_network', label: 'Charter Network' },
+  { key: 'additional_access_list', label: 'Additional Access List' },
+];
+
+// ---------------------------------------------------------------------------
+// Styles — dark theme tactical intelligence aesthetic
+// ---------------------------------------------------------------------------
+const STYLES = {
+  container: {
+    position: 'relative',
+    width: '100%',
+  },
+  label: {
+    fontFamily: "'JetBrains Mono', monospace",
+    fontSize: '0.7rem',
+    fontWeight: 700,
+    color: '#00d4ff',
+    textTransform: 'uppercase',
+    letterSpacing: '0.12em',
+    marginBottom: '0.5rem',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.4rem',
+  },
+  searchWrapper: {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+  },
+  searchIcon: {
+    position: 'absolute',
+    left: '0.75rem',
+    color: '#64748b',
+    pointerEvents: 'none',
+  },
+  input: {
+    width: '100%',
+    padding: '0.625rem 2.25rem 0.625rem 2.25rem',
+    background: 'rgba(15, 23, 42, 0.9)',
+    border: '1px solid rgba(0, 212, 255, 0.2)',
+    borderRadius: '8px',
+    color: '#e0e0e0',
+    fontSize: '0.82rem',
+    fontFamily: "'Outfit', system-ui, sans-serif",
+    outline: 'none',
+    transition: 'border-color 0.2s, box-shadow 0.2s',
+  },
+  inputFocused: {
+    borderColor: 'rgba(0, 212, 255, 0.5)',
+    boxShadow: '0 0 12px rgba(0, 212, 255, 0.1)',
+  },
+  chevron: {
+    position: 'absolute',
+    right: '0.75rem',
+    color: '#64748b',
+    cursor: 'pointer',
+    transition: 'transform 0.2s',
+  },
+  chevronOpen: {
+    transform: 'rotate(180deg)',
+  },
+  dropdown: {
+    position: 'absolute',
+    top: '100%',
+    left: 0,
+    right: 0,
+    marginTop: '4px',
+    background: 'linear-gradient(135deg, rgba(22, 33, 62, 0.98), rgba(15, 23, 42, 0.99))',
+    border: '1px solid rgba(0, 212, 255, 0.2)',
+    borderRadius: '8px',
+    maxHeight: '240px',
+    overflowY: 'auto',
+    zIndex: 50,
+    boxShadow: '0 12px 40px rgba(0, 0, 0, 0.6)',
+  },
+  dropdownItem: {
+    padding: '0.6rem 0.875rem',
+    color: '#e0e0e0',
+    fontSize: '0.8rem',
+    fontFamily: "'Outfit', system-ui, sans-serif",
+    cursor: 'pointer',
+    transition: 'background 0.15s',
+    borderBottom: '1px solid rgba(100, 116, 139, 0.1)',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.5rem',
+  },
+  dropdownItemHover: {
+    background: 'rgba(0, 212, 255, 0.08)',
+  },
+  dropdownItemSelected: {
+    background: 'rgba(0, 212, 255, 0.12)',
+    color: '#00d4ff',
+  },
+  loadingState: {
+    padding: '1rem',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '0.5rem',
+    color: '#64748b',
+    fontSize: '0.8rem',
+    fontFamily: "'Outfit', system-ui, sans-serif",
+  },
+  emptyState: {
+    padding: '1rem',
+    textAlign: 'center',
+    color: '#64748b',
+    fontSize: '0.8rem',
+    fontStyle: 'italic',
+    fontFamily: "'Outfit', system-ui, sans-serif",
+  },
+  selectedDisplay: {
+    marginTop: '0.5rem',
+    padding: '0.5rem 0.75rem',
+    background: 'rgba(0, 212, 255, 0.06)',
+    border: '1px solid rgba(0, 212, 255, 0.15)',
+    borderRadius: '6px',
+    color: '#00d4ff',
+    fontSize: '0.78rem',
+    fontFamily: "'JetBrains Mono', monospace",
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.4rem',
+  },
+  // Section panel styles
+  sectionPanel: {
+    marginTop: '1rem',
+    background: 'linear-gradient(135deg, rgba(22, 33, 62, 0.6), rgba(15, 23, 42, 0.8))',
+    border: '1px solid rgba(0, 212, 255, 0.15)',
+    borderRadius: '10px',
+    padding: '1rem',
+  },
+  sectionPanelHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: '0.75rem',
+    paddingBottom: '0.5rem',
+    borderBottom: '1px solid rgba(100, 116, 139, 0.2)',
+  },
+  sectionPanelTitle: {
+    fontFamily: "'JetBrains Mono', monospace",
+    fontSize: '0.7rem',
+    fontWeight: 700,
+    color: '#00d4ff',
+    textTransform: 'uppercase',
+    letterSpacing: '0.1em',
+  },
+  copyAllButton: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.35rem',
+    padding: '0.35rem 0.65rem',
+    background: 'rgba(0, 212, 255, 0.1)',
+    border: '1px solid rgba(0, 212, 255, 0.3)',
+    borderRadius: '6px',
+    color: '#00d4ff',
+    fontSize: '0.72rem',
+    fontFamily: "'JetBrains Mono', monospace",
+    fontWeight: 600,
+    cursor: 'pointer',
+    transition: 'background 0.2s, border-color 0.2s',
+  },
+  copyAllButtonHover: {
+    background: 'rgba(0, 212, 255, 0.18)',
+    borderColor: 'rgba(0, 212, 255, 0.5)',
+  },
+  copyAllButtonCopied: {
+    background: 'rgba(34, 197, 94, 0.15)',
+    borderColor: 'rgba(34, 197, 94, 0.4)',
+    color: '#22c55e',
+  },
+  sectionBlock: {
+    marginBottom: '0.75rem',
+    padding: '0.6rem 0.75rem',
+    background: 'rgba(15, 23, 42, 0.5)',
+    border: '1px solid rgba(100, 116, 139, 0.15)',
+    borderRadius: '6px',
+  },
+  sectionBlockHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: '0.35rem',
+  },
+  sectionLabel: {
+    fontFamily: "'Outfit', system-ui, sans-serif",
+    fontSize: '0.75rem',
+    fontWeight: 600,
+    color: '#94a3b8',
+    letterSpacing: '0.02em',
+  },
+  sectionContent: {
+    fontFamily: "'Outfit', system-ui, sans-serif",
+    fontSize: '0.78rem',
+    color: '#e0e0e0',
+    lineHeight: 1.5,
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+    maxHeight: '120px',
+    overflowY: 'auto',
+  },
+  sectionEmpty: {
+    fontFamily: "'Outfit', system-ui, sans-serif",
+    fontSize: '0.78rem',
+    color: '#64748b',
+    fontStyle: 'italic',
+  },
+  copyButton: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.25rem',
+    padding: '0.25rem 0.5rem',
+    background: 'rgba(100, 116, 139, 0.15)',
+    border: '1px solid rgba(100, 116, 139, 0.25)',
+    borderRadius: '4px',
+    color: '#94a3b8',
+    fontSize: '0.68rem',
+    fontFamily: "'JetBrains Mono', monospace",
+    cursor: 'pointer',
+    transition: 'background 0.2s, color 0.2s, border-color 0.2s',
+  },
+  copyButtonHover: {
+    background: 'rgba(0, 212, 255, 0.1)',
+    borderColor: 'rgba(0, 212, 255, 0.3)',
+    color: '#00d4ff',
+  },
+  copyButtonCopied: {
+    background: 'rgba(34, 197, 94, 0.12)',
+    borderColor: 'rgba(34, 197, 94, 0.3)',
+    color: '#22c55e',
+  },
+  copyButtonDisabled: {
+    opacity: 0.4,
+    cursor: 'not-allowed',
+  },
+};
+
+/**
+ * TemplateSelector — searchable dropdown for selecting Archer templates.
+ *
+ * Props:
+ *   onSelect {function} — optional callback invoked with the full template object when a selection is made
+ */
+export default function TemplateSelector({ onSelect }) {
+  const [templates, setTemplates] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [searchText, setSearchText] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedTemplate, setSelectedTemplate] = useState(null);
+  const [hoveredIndex, setHoveredIndex] = useState(-1);
+  const [inputFocused, setInputFocused] = useState(false);
+
+  // Copy state: per-section copied confirmation + copy all
+  const [copiedSections, setCopiedSections] = useState({});
+  const [copyAllCopied, setCopyAllCopied] = useState(false);
+  const [copyAllHovered, setCopyAllHovered] = useState(false);
+  const [hoveredCopyButton, setHoveredCopyButton] = useState(null);
+
+  const containerRef = useRef(null);
+  const inputRef = useRef(null);
+
+  // Fetch all templates on mount
+  useEffect(() => {
+    let cancelled = false;
+    async function fetchTemplates() {
+      try {
+        setLoading(true);
+        setError(null);
+        const res = await fetch(`${API_BASE}/archer-templates`, {
+          credentials: 'include',
+        });
+        if (!res.ok) {
+          throw new Error(`Failed to fetch templates (${res.status})`);
+        }
+        const data = await res.json();
+        if (!cancelled) {
+          setTemplates(data);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err.message);
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+    fetchTemplates();
+    return () => { cancelled = true; };
+  }, []);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    function handleClickOutside(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // Client-side filter — case-insensitive substring match on vendor, platform, or model
+  const filteredTemplates = useCallback(() => {
+    if (!searchText.trim()) return templates;
+    const query = searchText.toLowerCase().trim();
+    return templates.filter(t =>
+      t.vendor.toLowerCase().includes(query) ||
+      t.platform.toLowerCase().includes(query) ||
+      t.model.toLowerCase().includes(query)
+    );
+  }, [templates, searchText])();
+
+  // Handle template selection
+  const handleSelect = (template) => {
+    setSelectedTemplate(template);
+    setSearchText(`${template.vendor} / ${template.platform} / ${template.model}`);
+    setIsOpen(false);
+    setCopiedSections({});
+    setCopyAllCopied(false);
+    if (onSelect) {
+      onSelect(template);
+    }
+  };
+
+  // Handle input change
+  const handleInputChange = (e) => {
+    setSearchText(e.target.value);
+    setSelectedTemplate(null);
+    setIsOpen(true);
+    setHoveredIndex(-1);
+  };
+
+  // Handle input focus
+  const handleInputFocus = () => {
+    setInputFocused(true);
+    setIsOpen(true);
+  };
+
+  // Handle input blur
+  const handleInputBlur = () => {
+    setInputFocused(false);
+  };
+
+  // Keyboard navigation
+  const handleKeyDown = (e) => {
+    if (!isOpen) {
+      if (e.key === 'ArrowDown' || e.key === 'Enter') {
+        setIsOpen(true);
+        e.preventDefault();
+      }
+      return;
+    }
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setHoveredIndex(prev =>
+          prev < filteredTemplates.length - 1 ? prev + 1 : 0
+        );
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setHoveredIndex(prev =>
+          prev > 0 ? prev - 1 : filteredTemplates.length - 1
+        );
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (hoveredIndex >= 0 && hoveredIndex < filteredTemplates.length) {
+          handleSelect(filteredTemplates[hoveredIndex]);
+        }
+        break;
+      case 'Escape':
+        setIsOpen(false);
+        inputRef.current?.blur();
+        break;
+      default:
+        break;
+    }
+  };
+
+  // Copy a single section to clipboard
+  const handleCopySection = async (sectionKey, content) => {
+    if (!content) return;
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopiedSections(prev => ({ ...prev, [sectionKey]: true }));
+      setTimeout(() => {
+        setCopiedSections(prev => ({ ...prev, [sectionKey]: false }));
+      }, 2000);
+    } catch (_err) {
+      // Clipboard API failed — silently ignore
+    }
+  };
+
+  // Copy All: concatenate non-empty sections with headers
+  const handleCopyAll = async () => {
+    if (!selectedTemplate) return;
+    const parts = [];
+    for (const section of SECTIONS) {
+      const content = selectedTemplate[section.key];
+      if (content && content.trim()) {
+        parts.push(`${section.label}\n${content}`);
+      }
+    }
+    const combined = parts.join('\n\n');
+    try {
+      await navigator.clipboard.writeText(combined);
+      setCopyAllCopied(true);
+      setTimeout(() => {
+        setCopyAllCopied(false);
+      }, 2000);
+    } catch (_err) {
+      // Clipboard API failed — silently ignore
+    }
+  };
+
+  // Check if there are any non-empty sections
+  const hasNonEmptySections = selectedTemplate && SECTIONS.some(s => {
+    const val = selectedTemplate[s.key];
+    return val && val.trim();
+  });
+
+  return (
+    <div style={STYLES.container} ref={containerRef}>
+      {/* Label */}
+      <div style={STYLES.label}>
+        <FileText size={12} />
+        Template Selector
+      </div>
+
+      {/* Search input with dropdown */}
+      <div style={STYLES.searchWrapper}>
+        <Search size={14} style={STYLES.searchIcon} />
+        <input
+          ref={inputRef}
+          type="text"
+          placeholder={loading ? 'Loading templates...' : 'Search by vendor, platform, or model...'}
+          value={searchText}
+          onChange={handleInputChange}
+          onFocus={handleInputFocus}
+          onBlur={handleInputBlur}
+          onKeyDown={handleKeyDown}
+          disabled={loading}
+          style={{
+            ...STYLES.input,
+            ...(inputFocused ? STYLES.inputFocused : {}),
+            opacity: loading ? 0.6 : 1,
+          }}
+          aria-label="Search templates"
+          aria-expanded={isOpen}
+          aria-haspopup="listbox"
+          role="combobox"
+          aria-autocomplete="list"
+        />
+        <ChevronDown
+          size={14}
+          style={{
+            ...STYLES.chevron,
+            ...(isOpen ? STYLES.chevronOpen : {}),
+          }}
+          onClick={() => {
+            setIsOpen(!isOpen);
+            inputRef.current?.focus();
+          }}
+        />
+      </div>
+
+      {/* Dropdown list */}
+      {isOpen && (
+        <div style={STYLES.dropdown} role="listbox" aria-label="Template list">
+          {loading ? (
+            <div style={STYLES.loadingState}>
+              <Loader size={14} style={{ animation: 'spin 1s linear infinite' }} />
+              Loading templates...
+            </div>
+          ) : error ? (
+            <div style={{ ...STYLES.emptyState, color: '#ef4444' }}>
+              {error}
+            </div>
+          ) : filteredTemplates.length === 0 ? (
+            <div style={STYLES.emptyState}>
+              {searchText.trim()
+                ? 'No templates match your search'
+                : 'No templates available'}
+            </div>
+          ) : (
+            filteredTemplates.map((template, index) => {
+              const isSelected = selectedTemplate?.id === template.id;
+              const isHovered = hoveredIndex === index;
+              return (
+                <div
+                  key={template.id}
+                  role="option"
+                  aria-selected={isSelected}
+                  style={{
+                    ...STYLES.dropdownItem,
+                    ...(isHovered ? STYLES.dropdownItemHover : {}),
+                    ...(isSelected ? STYLES.dropdownItemSelected : {}),
+                  }}
+                  onMouseEnter={() => setHoveredIndex(index)}
+                  onMouseLeave={() => setHoveredIndex(-1)}
+                  onMouseDown={(e) => {
+                    e.preventDefault(); // Prevent input blur before click registers
+                    handleSelect(template);
+                  }}
+                >
+                  <FileText size={12} style={{ opacity: 0.5, flexShrink: 0 }} />
+                  {template.vendor} / {template.platform} / {template.model}
+                </div>
+              );
+            })
+          )}
+        </div>
+      )}
+
+      {/* Section display panel — shown when a template is selected */}
+      {selectedTemplate && (
+        <div style={STYLES.sectionPanel}>
+          {/* Panel header with Copy All button */}
+          <div style={STYLES.sectionPanelHeader}>
+            <span style={STYLES.sectionPanelTitle}>Template Sections</span>
+            {hasNonEmptySections && (
+              <button
+                onClick={handleCopyAll}
+                onMouseEnter={() => setCopyAllHovered(true)}
+                onMouseLeave={() => setCopyAllHovered(false)}
+                style={{
+                  ...STYLES.copyAllButton,
+                  ...(copyAllCopied ? STYLES.copyAllButtonCopied : {}),
+                  ...(!copyAllCopied && copyAllHovered ? STYLES.copyAllButtonHover : {}),
+                }}
+                aria-label="Copy all sections"
+              >
+                {copyAllCopied ? (
+                  <>
+                    <Check size={11} />
+                    Copied!
+                  </>
+                ) : (
+                  <>
+                    <Copy size={11} />
+                    Copy All
+                  </>
+                )}
+              </button>
+            )}
+          </div>
+
+          {/* Section blocks */}
+          {SECTIONS.map((section) => {
+            const content = selectedTemplate[section.key];
+            const isEmpty = !content || !content.trim();
+            const isCopied = copiedSections[section.key];
+            const isButtonHovered = hoveredCopyButton === section.key;
+
+            return (
+              <div key={section.key} style={STYLES.sectionBlock}>
+                <div style={STYLES.sectionBlockHeader}>
+                  <span style={STYLES.sectionLabel}>{section.label}</span>
+                  <button
+                    onClick={() => handleCopySection(section.key, content)}
+                    disabled={isEmpty}
+                    onMouseEnter={() => setHoveredCopyButton(section.key)}
+                    onMouseLeave={() => setHoveredCopyButton(null)}
+                    style={{
+                      ...STYLES.copyButton,
+                      ...(isEmpty ? STYLES.copyButtonDisabled : {}),
+                      ...(isCopied ? STYLES.copyButtonCopied : {}),
+                      ...(!isEmpty && !isCopied && isButtonHovered ? STYLES.copyButtonHover : {}),
+                    }}
+                    aria-label={`Copy ${section.label}`}
+                  >
+                    {isCopied ? (
+                      <>
+                        <Check size={10} />
+                        Copied!
+                      </>
+                    ) : (
+                      <>
+                        <Clipboard size={10} />
+                        Copy
+                      </>
+                    )}
+                  </button>
+                </div>
+                {isEmpty ? (
+                  <div style={STYLES.sectionEmpty}>No content stored</div>
+                ) : (
+                  <div style={STYLES.sectionContent}>{content}</div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/pages/ArcherTemplatePage.js

@@ -0,0 +1,427 @@
+// ArcherTemplatePage.js
+// Full-page Template Manager — browse, create, edit, clone, and delete
+// Archer Risk Acceptance templates organized by Vendor > Platform > Model.
+// Write operations require editor/admin role (Standard_User or Admin group).
+
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  FileText, Plus, Edit, Copy, Trash2, ChevronDown, ChevronRight,
+  Loader, AlertCircle, RefreshCw,
+} from 'lucide-react';
+import { useAuth } from '../../contexts/AuthContext';
+import TemplateFormModal from '../TemplateFormModal';
+import DeleteConfirmModal from '../DeleteConfirmModal';
+
+const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
+
+// ---------------------------------------------------------------------------
+// Styles — dark theme tactical intelligence aesthetic
+// ---------------------------------------------------------------------------
+const STYLES = {
+  page: {
+    minHeight: '60vh',
+  },
+  card: {
+    background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98))',
+    border: '1px solid rgba(0, 212, 255, 0.15)',
+    borderRadius: '12px',
+    padding: '1.5rem',
+    marginBottom: '1rem',
+  },
+  header: {
+    fontFamily: 'monospace',
+    fontSize: '0.7rem',
+    fontWeight: 700,
+    color: '#00d4ff',
+    textTransform: 'uppercase',
+    letterSpacing: '0.15em',
+    marginBottom: '1rem',
+  },
+  toolbar: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: '1rem',
+    flexWrap: 'wrap',
+    gap: '0.5rem',
+  },
+  btn: {
+    padding: '0.5rem 1rem',
+    borderRadius: '8px',
+    border: '1px solid rgba(0, 212, 255, 0.3)',
+    background: 'rgba(0, 212, 255, 0.1)',
+    color: '#7DD3FC',
+    cursor: 'pointer',
+    fontSize: '0.8rem',
+    fontWeight: 600,
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '0.4rem',
+    transition: 'all 0.2s',
+  },
+  btnDanger: {
+    padding: '0.4rem 0.75rem',
+    borderRadius: '6px',
+    border: '1px solid rgba(239, 68, 68, 0.3)',
+    background: 'rgba(239, 68, 68, 0.1)',
+    color: '#FCA5A5',
+    cursor: 'pointer',
+    fontSize: '0.75rem',
+    fontWeight: 600,
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '0.3rem',
+    transition: 'all 0.2s',
+  },
+  btnSmall: {
+    padding: '0.35rem 0.65rem',
+    borderRadius: '6px',
+    border: '1px solid rgba(0, 212, 255, 0.25)',
+    background: 'rgba(0, 212, 255, 0.08)',
+    color: '#7DD3FC',
+    cursor: 'pointer',
+    fontSize: '0.75rem',
+    fontWeight: 600,
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '0.3rem',
+    transition: 'all 0.2s',
+  },
+  vendorGroup: {
+    marginBottom: '0.75rem',
+  },
+  vendorHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.5rem',
+    padding: '0.6rem 0.75rem',
+    background: 'rgba(0, 212, 255, 0.05)',
+    border: '1px solid rgba(0, 212, 255, 0.12)',
+    borderRadius: '8px',
+    cursor: 'pointer',
+    transition: 'all 0.15s',
+  },
+  vendorLabel: {
+    fontSize: '0.85rem',
+    fontWeight: 700,
+    color: '#e0e0e0',
+  },
+  vendorCount: {
+    fontSize: '0.7rem',
+    color: '#64748B',
+    marginLeft: 'auto',
+  },
+  platformSubgroup: {
+    marginLeft: '1.25rem',
+    marginTop: '0.5rem',
+    paddingLeft: '0.75rem',
+    borderLeft: '2px solid rgba(0, 212, 255, 0.1)',
+  },
+  platformLabel: {
+    fontSize: '0.78rem',
+    fontWeight: 600,
+    color: '#94A3B8',
+    marginBottom: '0.35rem',
+    textTransform: 'uppercase',
+    letterSpacing: '0.05em',
+  },
+  templateRow: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '0.45rem 0.6rem',
+    borderRadius: '6px',
+    marginBottom: '0.25rem',
+    transition: 'background 0.15s',
+  },
+  templateModel: {
+    fontSize: '0.82rem',
+    color: '#e0e0e0',
+    fontWeight: 500,
+  },
+  templateActions: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.35rem',
+  },
+  emptyState: {
+    textAlign: 'center',
+    padding: '3rem 1rem',
+    color: '#64748B',
+    fontSize: '0.9rem',
+  },
+  errorBanner: {
+    padding: '0.75rem 1rem',
+    borderRadius: '8px',
+    background: 'rgba(239, 68, 68, 0.1)',
+    border: '1px solid rgba(239, 68, 68, 0.25)',
+    color: '#FCA5A5',
+    fontSize: '0.82rem',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.5rem',
+    marginBottom: '1rem',
+  },
+  loadingState: {
+    textAlign: 'center',
+    padding: '3rem 1rem',
+    color: '#64748B',
+    fontSize: '0.85rem',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: '0.75rem',
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Group templates by vendor, then by platform within each vendor.
+ * Returns: [ { vendor, platforms: [ { platform, templates: [...] } ] } ]
+ */
+function groupTemplates(templates) {
+  const vendorMap = {};
+  for (const t of templates) {
+    if (!vendorMap[t.vendor]) vendorMap[t.vendor] = {};
+    if (!vendorMap[t.vendor][t.platform]) vendorMap[t.vendor][t.platform] = [];
+    vendorMap[t.vendor][t.platform].push(t);
+  }
+
+  const vendors = Object.keys(vendorMap).sort((a, b) =>
+    a.localeCompare(b, undefined, { sensitivity: 'base' })
+  );
+
+  return vendors.map(vendor => {
+    const platforms = Object.keys(vendorMap[vendor]).sort((a, b) =>
+      a.localeCompare(b, undefined, { sensitivity: 'base' })
+    );
+    return {
+      vendor,
+      platforms: platforms.map(platform => ({
+        platform,
+        templates: vendorMap[vendor][platform].sort((a, b) =>
+          a.model.localeCompare(b.model, undefined, { sensitivity: 'base' })
+        ),
+      })),
+    };
+  });
+}
+
+// ---------------------------------------------------------------------------
+// ArcherTemplatePage
+// ---------------------------------------------------------------------------
+export default function ArcherTemplatePage() {
+  const { canWrite } = useAuth();
+  const [templates, setTemplates] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [expandedVendors, setExpandedVendors] = useState({});
+
+  // Modal state for create/edit/clone
+  const [modalState, setModalState] = useState({ open: false, mode: 'create', template: null });
+  const [deleteTarget, setDeleteTarget] = useState(null);
+
+  // -------------------------------------------------------------------------
+  // Fetch templates
+  // -------------------------------------------------------------------------
+  const fetchTemplates = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`${API_BASE}/archer-templates`, {
+        credentials: 'include',
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || `Failed to fetch templates (${res.status})`);
+      }
+      const data = await res.json();
+      setTemplates(data);
+      // Expand all vendors by default on initial load
+      const expanded = {};
+      const grouped = groupTemplates(data);
+      for (const g of grouped) {
+        expanded[g.vendor] = true;
+      }
+      setExpandedVendors(expanded);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchTemplates();
+  }, [fetchTemplates]);
+
+  // -------------------------------------------------------------------------
+  // Vendor toggle
+  // -------------------------------------------------------------------------
+  const toggleVendor = (vendor) => {
+    setExpandedVendors(prev => ({ ...prev, [vendor]: !prev[vendor] }));
+  };
+
+  // -------------------------------------------------------------------------
+  // Grouped data
+  // -------------------------------------------------------------------------
+  const grouped = groupTemplates(templates);
+  const totalCount = templates.length;
+
+  // -------------------------------------------------------------------------
+  // Render
+  // -------------------------------------------------------------------------
+  return (
+    <div style={STYLES.page}>
+      <div style={STYLES.card}>
+        {/* Header */}
+        <div style={STYLES.header}>
+          <FileText size={12} style={{ display: 'inline', verticalAlign: 'middle', marginRight: '0.4rem' }} />
+          Archer Template Library
+        </div>
+
+        {/* Toolbar */}
+        <div style={STYLES.toolbar}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            <span style={{ color: '#94A3B8', fontSize: '0.8rem' }}>
+              {totalCount} template{totalCount !== 1 ? 's' : ''}
+            </span>
+            <button
+              style={STYLES.btn}
+              onClick={fetchTemplates}
+              title="Refresh"
+            >
+              <RefreshCw size={13} />
+            </button>
+          </div>
+
+          {canWrite() && (
+            <button
+              style={STYLES.btn}
+              onClick={() => setModalState({ open: true, mode: 'create', template: null })}
+            >
+              <Plus size={14} />
+              Create Template
+            </button>
+          )}
+        </div>
+
+        {/* Error banner */}
+        {error && (
+          <div style={STYLES.errorBanner}>
+            <AlertCircle size={14} />
+            {error}
+          </div>
+        )}
+
+        {/* Loading state */}
+        {loading && (
+          <div style={STYLES.loadingState}>
+            <Loader size={24} style={{ animation: 'spin 1s linear infinite' }} />
+            <span>Loading templates...</span>
+          </div>
+        )}
+
+        {/* Empty state */}
+        {!loading && !error && templates.length === 0 && (
+          <div style={STYLES.emptyState}>
+            <FileText size={32} style={{ marginBottom: '0.75rem', opacity: 0.4 }} />
+            <div>No templates found</div>
+            {canWrite() && (
+              <div style={{ marginTop: '0.5rem', fontSize: '0.8rem', color: '#475569' }}>
+                Click "Create Template" to add your first template.
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Template list grouped by vendor > platform */}
+        {!loading && grouped.map(({ vendor, platforms }) => (
+          <div key={vendor} style={STYLES.vendorGroup}>
+            {/* Vendor header — collapsible */}
+            <div
+              style={STYLES.vendorHeader}
+              onClick={() => toggleVendor(vendor)}
+              onMouseEnter={e => { e.currentTarget.style.background = 'rgba(0, 212, 255, 0.1)'; }}
+              onMouseLeave={e => { e.currentTarget.style.background = 'rgba(0, 212, 255, 0.05)'; }}
+            >
+              {expandedVendors[vendor]
+                ? <ChevronDown size={14} style={{ color: '#00d4ff' }} />
+                : <ChevronRight size={14} style={{ color: '#64748B' }} />
+              }
+              <span style={STYLES.vendorLabel}>{vendor}</span>
+              <span style={STYLES.vendorCount}>
+                {platforms.reduce((sum, p) => sum + p.templates.length, 0)} template{platforms.reduce((sum, p) => sum + p.templates.length, 0) !== 1 ? 's' : ''}
+              </span>
+            </div>
+
+            {/* Platform subgroups */}
+            {expandedVendors[vendor] && platforms.map(({ platform, templates: platTemplates }) => (
+              <div key={platform} style={STYLES.platformSubgroup}>
+                <div style={STYLES.platformLabel}>{platform}</div>
+                {platTemplates.map(template => (
+                  <div
+                    key={template.id}
+                    style={STYLES.templateRow}
+                    onMouseEnter={e => { e.currentTarget.style.background = 'rgba(0, 212, 255, 0.04)'; }}
+                    onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}
+                  >
+                    <span style={STYLES.templateModel}>{template.model}</span>
+                    {canWrite() && (
+                      <div style={STYLES.templateActions}>
+                        <button
+                          style={STYLES.btnSmall}
+                          onClick={() => setModalState({ open: true, mode: 'edit', template })}
+                          title="Edit template"
+                        >
+                          <Edit size={12} />
+                        </button>
+                        <button
+                          style={STYLES.btnSmall}
+                          onClick={() => setModalState({ open: true, mode: 'clone', template })}
+                          title="Clone template"
+                        >
+                          <Copy size={12} />
+                        </button>
+                        <button
+                          style={STYLES.btnDanger}
+                          onClick={() => setDeleteTarget(template)}
+                          title="Delete template"
+                        >
+                          <Trash2 size={12} />
+                        </button>
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+
+      {/* Template form modal (create/edit/clone) */}
+      {modalState.open && (
+        <TemplateFormModal
+          mode={modalState.mode}
+          template={modalState.template}
+          onClose={() => setModalState({ open: false, mode: 'create', template: null })}
+          onSuccess={fetchTemplates}
+        />
+      )}
+
+      {/* Delete confirmation modal */}
+      <DeleteConfirmModal
+        template={deleteTarget}
+        onConfirm={() => {
+          setDeleteTarget(null);
+          fetchTemplates();
+        }}
+        onCancel={() => setDeleteTarget(null)}
+      />
+    </div>
+  );
+}

frontend/src/components/pages/CCPMetricsPage.js

@@ -8,6 +8,26 @@ const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
 const TEAL = '#14B8A6';
 const PURPLE = '#A78BFA';
 
+// Natural sort comparator for metric IDs like "2.3.6i", "5.2.6", "10.1.1".
+// Splits on "." and compares each segment numerically (trailing letters after digits sort after pure numbers).
+function compareMetricIds(a, b) {
+    const partsA = a.split('.');
+    const partsB = b.split('.');
+    const len = Math.max(partsA.length, partsB.length);
+    for (let i = 0; i < len; i++) {
+        const segA = partsA[i] || '';
+        const segB = partsB[i] || '';
+        const numA = parseFloat(segA) || 0;
+        const numB = parseFloat(segB) || 0;
+        if (numA !== numB) return numA - numB;
+        // Same numeric prefix — compare the suffix (e.g. "6i" vs "6")
+        const suffA = segA.replace(/^[\d.]+/, '');
+        const suffB = segB.replace(/^[\d.]+/, '');
+        if (suffA !== suffB) return suffA.localeCompare(suffB);
+    }
+    return 0;
+}
+
 // ---------------------------------------------------------------------------
 // Styles
 // ---------------------------------------------------------------------------
@@ -106,7 +126,8 @@ function MetricBreakdownPanel({ metrics }) {
     if (!metrics || metrics.length === 0) return null;
 
     // Only show metrics with non_compliant > 0
-    const ncMetrics = metrics.filter(m => m.non_compliant > 0);
+    const ncMetrics = metrics.filter(m => m.non_compliant > 0)
+        .sort((a, b) => compareMetricIds(a.metric_id, b.metric_id));
     if (ncMetrics.length === 0) return null;
 
     const TOP_COUNT = 8;
@@ -628,9 +649,10 @@ function VerticalDetailView({ vertical, onBack, onSelectMetric }) {
     if (loading) return <div style={{ padding: '2rem', textAlign: 'center', color: '#64748B' }}><Loader style={{ animation: 'spin 1s linear infinite' }} /> Loading...</div>;
 
     // Filter metrics by team if a team filter is active
-    const displayMetrics = teamFilter
+    const displayMetrics = (teamFilter
         ? metrics.filter(m => m.sub_teams && m.sub_teams.some(st => st.team === teamFilter))
-        : metrics;
+        : metrics
+    ).slice().sort((a, b) => compareMetricIds(a.metric_id, b.metric_id));
 
     return (
         <div>
@@ -1282,7 +1304,7 @@ function MetricSelector({ onMetricSelect, selectedMetric }) {
                     minWidth: '200px',
                 }}
             >
-                {metrics.map(m => (
+                {metrics.slice().sort((a, b) => compareMetricIds(a.metric_id, b.metric_id)).map(m => (
                     <option key={m.metric_id} value={m.metric_id}>
                         {m.metric_id} — {m.device_count} device{m.device_count !== 1 ? 's' : ''}
                     </option>

frontend/src/components/pages/ComplianceDetailPanel.js

@@ -1,6 +1,12 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { X, MessageSquare, Send, Loader, AlertCircle, Clock, Shield, Trash2, Calendar, FileText, Save } from 'lucide-react';
 import ConfirmModal from '../ConfirmModal';
+import {
+    formatResolutionDate,
+    RESOLUTION_DATE_LABEL,
+    NO_DATE_PLACEHOLDER,
+    INVALID_DATE_PLACEHOLDER,
+} from '../../utils/resolutionDate';
 
 const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
 
@@ -38,7 +44,7 @@ function MetricChip({ metricId, category, status }) {
     );
 }
 
-export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded, onNavigate }) {
+export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded, onMetadataSaved, onNavigate }) {
     const [detail, setDetail]       = useState(null);
     const [loading, setLoading]     = useState(true);
     const [error, setError]         = useState(null);
@@ -131,6 +137,7 @@ export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded,
             setRemediationPlanEdited(false);
             // Re-fetch to get updated history
             await fetchDetail();
+            if (onMetadataSaved) onMetadataSaved();
         } catch (err) {
             setMetaError(err.message);
         } finally {
@@ -289,33 +296,7 @@ export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded,
                             </Section>
                         )}
 
-                        {/* Resolved metrics */}
-                        {resolvedMetrics.length > 0 && (
-                            <Section title="Resolved Metrics" muted>
-                                {resolvedMetrics.map(m => (
-                                    <MetricRow key={m.metric_id} metric={m} resolved />
-                                ))}
-                            </Section>
-                        )}
-
-                        {/* Upload history summary */}
-                        {activeMetrics.length > 0 && (
-                            <Section title="History" icon={<Clock style={{ width: '14px', height: '14px' }} />}>
-                                {activeMetrics.map(m => (
-                                    <div key={m.metric_id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.35rem' }}>
-                                        <MetricChip metricId={m.metric_id} category={m.category} />
-                                        <div style={{ fontSize: '0.72rem', color: '#64748B', fontFamily: 'monospace', textAlign: 'right' }}>
-                                            <span style={{ color: m.seen_count > 2 ? '#F59E0B' : '#94A3B8' }}>
-                                                {m.seen_count}× seen
-                                            </span>
-                                            {m.first_seen && <span style={{ marginLeft: '0.5rem' }}>since {m.first_seen}</span>}
-                                        </div>
-                                    </div>
-                                ))}
-                            </Section>
-                        )}
-
-                        {/* Metric Selector for Metadata Editing */}
+                        {/* Metric Selector for Metadata Editing — placed right after Failing Metrics per issue #21 */}
                         {activeMetrics.length > 0 && (
                             <Section title="Apply To Metrics" icon={<Shield style={{ width: '14px', height: '14px' }} />}>
                                 {activeMetrics.length > 1 && (() => {
@@ -427,6 +408,7 @@ export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded,
                                     fontSize: '0.8rem',
                                     fontFamily: 'monospace',
                                     outline: 'none',
+                                    colorScheme: 'dark',
                                 }}
                                 onFocus={e => e.target.style.borderColor = `${TEAL}70`}
                             />
@@ -514,6 +496,32 @@ export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded,
                             />
                         </Section>
 
+                        {/* Resolved metrics */}
+                        {resolvedMetrics.length > 0 && (
+                            <Section title="Resolved Metrics" muted>
+                                {resolvedMetrics.map(m => (
+                                    <MetricRow key={m.metric_id} metric={m} resolved />
+                                ))}
+                            </Section>
+                        )}
+
+                        {/* Upload history summary */}
+                        {activeMetrics.length > 0 && (
+                            <Section title="History" icon={<Clock style={{ width: '14px', height: '14px' }} />}>
+                                {activeMetrics.map(m => (
+                                    <div key={m.metric_id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.35rem' }}>
+                                        <MetricChip metricId={m.metric_id} category={m.category} />
+                                        <div style={{ fontSize: '0.72rem', color: '#64748B', fontFamily: 'monospace', textAlign: 'right' }}>
+                                            <span style={{ color: m.seen_count > 2 ? '#F59E0B' : '#94A3B8' }}>
+                                                {m.seen_count}× seen
+                                            </span>
+                                            {m.first_seen && <span style={{ marginLeft: '0.5rem' }}>since {m.first_seen}</span>}
+                                        </div>
+                                    </div>
+                                ))}
+                            </Section>
+                        )}
+
                         {/* Change History */}
                         {detail.history && detail.history.length > 0 && (
                             <Section title="Change History" icon={<Clock style={{ width: '14px', height: '14px' }} />}>
@@ -796,6 +804,19 @@ function MetricRow({ metric, resolved, onNavigate }) {
     if (extra['Splunk - Last Seen'])  highlights.push({ label: 'Splunk', value: extra['Splunk - Last Seen'] });
     if (extra['MFA - Software'])      highlights.push({ label: 'MFA SW', value: extra['MFA - Software'] });
 
+    // Read-only estimated resolution date, shown only for active (noncompliant)
+    // metrics at the top of the section. Derived solely from this metric's own
+    // resolution_date — no editing, no shared/"Multiple values" collapsing.
+    const resolutionDisplay = resolved ? null : formatResolutionDate(metric.resolution_date);
+    const resolutionValueText = resolutionDisplay
+        ? (resolutionDisplay.state === 'set'
+            ? resolutionDisplay.value
+            : resolutionDisplay.state === 'invalid'
+                ? INVALID_DATE_PLACEHOLDER
+                : NO_DATE_PLACEHOLDER)
+        : null;
+    const resolutionMuted = resolutionDisplay && resolutionDisplay.state !== 'set';
+
     return (
         <div style={{
             marginBottom: '0.625rem', padding: '0.625rem 0.75rem',
@@ -804,6 +825,23 @@ function MetricRow({ metric, resolved, onNavigate }) {
             borderRadius: '0.375rem',
             opacity: resolved ? 0.5 : 1,
         }}>
+            {resolutionDisplay && (
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', marginBottom: '0.4rem' }}>
+                    <Calendar size={12} style={{ color, flexShrink: 0 }} />
+                    <span style={{ fontSize: '0.68rem', color: '#64748B', fontFamily: 'monospace', flexShrink: 0 }}>
+                        {RESOLUTION_DATE_LABEL}
+                    </span>
+                    <span style={{
+                        fontSize: '0.68rem',
+                        color: resolutionMuted ? '#475569' : TEAL,
+                        fontFamily: 'monospace',
+                        fontWeight: resolutionMuted ? '400' : '600',
+                        fontStyle: resolutionMuted ? 'italic' : 'normal',
+                    }}>
+                        {resolutionValueText}
+                    </span>
+                </div>
+            )}
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: highlights.length ? '0.4rem' : 0 }}>
                 <MetricChip metricId={metric.metric_id} category={metric.category} status={metric.status} />
                 {resolved && <span style={{ fontSize: '0.68rem', color: '#334155', fontFamily: 'monospace' }}>resolved {metric.resolved_on || ''}</span>}

frontend/src/components/pages/CompliancePage.js

@@ -697,6 +697,7 @@ export default function CompliancePage({ onNavigate }) {
                     hostname={selectedHost}
                     onClose={() => setSelectedHost(null)}
                     onNoteAdded={refresh}
+                    onMetadataSaved={refresh}
                     onNavigate={onNavigate}
                 />
             )}

frontend/src/components/pages/IvantiTodoQueuePage.js

@@ -1,8 +1,9 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import { ListTodo, RefreshCw, CheckSquare, Square, Loader, AlertCircle, X, Plus, CheckCircle, ChevronDown, ChevronRight, FileSpreadsheet } from 'lucide-react';
+import { ListTodo, RefreshCw, CheckSquare, Square, Loader, AlertCircle, X, Plus, CheckCircle, ChevronDown, ChevronRight, FileSpreadsheet, FileText } from 'lucide-react';
 import { useAuth } from '../../contexts/AuthContext';
 import ConsolidationModal from '../ConsolidationModal';
 import LoaderModal from '../LoaderModal';
+import TemplateSelector from '../TemplateSelector';
 import { generateConsolidatedSummary, generateConsolidatedDescription, extractFirstCve, extractCommonVendor } from '../../utils/jiraConsolidation';
 import { groupQueueItems } from '../../utils/queueGrouping';
 import { VENDOR_PROJECT_KEYS, VENDOR_ISSUE_TYPES, STEAM_ISSUE_TYPES, isVendorProject, getIssueTypesForProject } from './JiraPage';
@@ -311,6 +312,9 @@ export default function IvantiTodoQueuePage() {
   // Collapse state for grouped sections (Requirement 2.2, 2.7)
   const [collapsedSections, setCollapsedSections] = useState({});
 
+  // Archer Template Selector panel — tracks which item ID has the panel expanded (Requirement 5.1)
+  const [templatePanelOpenId, setTemplatePanelOpenId] = useState(null);
+
   // ---------------------------------------------------------------------------
   // Data fetching
   // ---------------------------------------------------------------------------
@@ -384,6 +388,13 @@ export default function IvantiTodoQueuePage() {
     }));
   }, []);
 
+  // ---------------------------------------------------------------------------
+  // Toggle Archer Template Selector panel (Requirement 5.1)
+  // ---------------------------------------------------------------------------
+  const toggleTemplatePanel = useCallback((itemId) => {
+    setTemplatePanelOpenId((prev) => (prev === itemId ? null : itemId));
+  }, []);
+
   // ---------------------------------------------------------------------------
   // Selection mode toggle (Requirement 1.1, 1.5)
   // When deactivated, clear all selections
@@ -727,151 +738,202 @@ export default function IvantiTodoQueuePage() {
                     const cveDisplay = cves.length > 0
                       ? cves.slice(0, 2).join(', ') + (cves.length > 2 ? ` +${cves.length - 2}` : '')
                       : '';
+                    const isArcherItem = item.workflow_type === 'Archer';
+                    const isTemplatePanelOpen = templatePanelOpenId === item.id;
 
                     return (
-                      <div
-                        key={item.id}
-                        style={isSelected ? STYLES.queueItemSelected : STYLES.queueItem}
-                        onClick={selectionMode ? () => toggleItemSelection(item.id) : undefined}
-                        role={selectionMode ? 'button' : undefined}
-                        tabIndex={selectionMode ? 0 : undefined}
-                        onKeyDown={selectionMode ? (e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); toggleItemSelection(item.id); } } : undefined}
-                      >
-                        {/* Selection checkbox (Requirement 1.2) */}
-                        {selectionMode && (
-                          <input
-                            type="checkbox"
-                            checked={isSelected}
-                            onChange={(e) => { e.stopPropagation(); toggleItemSelection(item.id); }}
-                            onClick={(e) => e.stopPropagation()}
-                            style={STYLES.checkbox}
-                            aria-label={`Select ${item.finding_title || item.finding_id}`}
-                          />
-                        )}
+                      <React.Fragment key={item.id}>
+                        <div
+                          style={isSelected ? STYLES.queueItemSelected : STYLES.queueItem}
+                          onClick={selectionMode ? () => toggleItemSelection(item.id) : undefined}
+                          role={selectionMode ? 'button' : undefined}
+                          tabIndex={selectionMode ? 0 : undefined}
+                          onKeyDown={selectionMode ? (e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); toggleItemSelection(item.id); } } : undefined}
+                        >
+                          {/* Selection checkbox (Requirement 1.2) */}
+                          {selectionMode && (
+                            <input
+                              type="checkbox"
+                              checked={isSelected}
+                              onChange={(e) => { e.stopPropagation(); toggleItemSelection(item.id); }}
+                              onClick={(e) => e.stopPropagation()}
+                              style={STYLES.checkbox}
+                              aria-label={`Select ${item.finding_title || item.finding_id}`}
+                            />
+                          )}
 
-                        {/* Finding info */}
-                        <div style={{ flex: 1, minWidth: 0 }}>
-                          <div style={{
-                            fontFamily: 'monospace',
-                            fontSize: '0.75rem',
-                            fontWeight: 600,
-                            color: '#CBD5E1',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                          }} title={item.finding_title || item.finding_id}>
-                            {item.finding_title || item.finding_id}
-                          </div>
-                          {cveDisplay && (
+                          {/* Finding info */}
+                          <div style={{ flex: 1, minWidth: 0 }}>
                             <div style={{
                               fontFamily: 'monospace',
-                              fontSize: '0.65rem',
-                              color: '#64748B',
-                              marginTop: '2px',
+                              fontSize: '0.75rem',
+                              fontWeight: 600,
+                              color: '#CBD5E1',
                               overflow: 'hidden',
                               textOverflow: 'ellipsis',
                               whiteSpace: 'nowrap',
-                            }} title={cves.join(', ')}>
-                              {cveDisplay}
+                            }} title={item.finding_title || item.finding_id}>
+                              {item.finding_title || item.finding_id}
                             </div>
-                          )}
-                        </div>
+                            {cveDisplay && (
+                              <div style={{
+                                fontFamily: 'monospace',
+                                fontSize: '0.65rem',
+                                color: '#64748B',
+                                marginTop: '2px',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                              }} title={cves.join(', ')}>
+                                {cveDisplay}
+                              </div>
+                            )}
+                          </div>
 
-                        {/* Ticket link badge (Requirements 6.3, 6.4) */}
-                        {ticketLinks[item.id] && (
-                          <a
-                            href={ticketLinks[item.id].jira_url}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            onClick={(e) => e.stopPropagation()}
-                            style={{
+                          {/* Archer Template toggle button (Requirement 5.1) */}
+                          {isArcherItem && (
+                            <button
+                              onClick={(e) => { e.stopPropagation(); toggleTemplatePanel(item.id); }}
+                              style={{
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                gap: '0.3rem',
+                                padding: '0.2rem 0.5rem',
+                                borderRadius: '4px',
+                                border: isTemplatePanelOpen
+                                  ? '1px solid rgba(0, 212, 255, 0.5)'
+                                  : '1px solid rgba(0, 212, 255, 0.2)',
+                                background: isTemplatePanelOpen
+                                  ? 'rgba(0, 212, 255, 0.15)'
+                                  : 'rgba(0, 212, 255, 0.05)',
+                                color: isTemplatePanelOpen ? '#00d4ff' : '#7DD3FC',
+                                cursor: 'pointer',
+                                fontSize: '0.62rem',
+                                fontFamily: 'monospace',
+                                fontWeight: 600,
+                                flexShrink: 0,
+                                transition: 'all 0.2s',
+                              }}
+                              title={isTemplatePanelOpen ? 'Hide template selector' : 'Show template selector'}
+                              aria-expanded={isTemplatePanelOpen}
+                              aria-label="Toggle template selector"
+                            >
+                              <FileText style={{ width: '11px', height: '11px' }} />
+                              {isTemplatePanelOpen ? 'Hide' : 'Template'}
+                            </button>
+                          )}
+
+                          {/* Ticket link badge (Requirements 6.3, 6.4) */}
+                          {ticketLinks[item.id] && (
+                            <a
+                              href={ticketLinks[item.id].jira_url}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              onClick={(e) => e.stopPropagation()}
+                              style={{
+                                fontFamily: 'monospace',
+                                fontSize: '0.6rem',
+                                fontWeight: 700,
+                                color: '#6EE7B7',
+                                background: 'rgba(16, 185, 129, 0.1)',
+                                border: '1px solid rgba(16, 185, 129, 0.3)',
+                                borderRadius: '999px',
+                                padding: '0.15rem 0.5rem',
+                                textDecoration: 'none',
+                                whiteSpace: 'nowrap',
+                                flexShrink: 0,
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                gap: '0.25rem',
+                                transition: 'all 0.2s',
+                              }}
+                              title={`Open ${ticketLinks[item.id].ticket_key} in Jira`}
+                            >
+                              {ticketLinks[item.id].ticket_key} ↗
+                            </a>
+                          )}
+
+                          {/* Workflow type badge */}
+                          <div style={{
+                            width: '80px',
+                            textAlign: 'center',
+                            flexShrink: 0,
+                          }}>
+                            <span style={{
                               fontFamily: 'monospace',
                               fontSize: '0.6rem',
                               fontWeight: 700,
-                              color: '#6EE7B7',
-                              background: 'rgba(16, 185, 129, 0.1)',
-                              border: '1px solid rgba(16, 185, 129, 0.3)',
-                              borderRadius: '999px',
-                              padding: '0.15rem 0.5rem',
-                              textDecoration: 'none',
-                              whiteSpace: 'nowrap',
-                              flexShrink: 0,
-                              display: 'inline-flex',
-                              alignItems: 'center',
-                              gap: '0.25rem',
-                              transition: 'all 0.2s',
-                            }}
-                            title={`Open ${ticketLinks[item.id].ticket_key} in Jira`}
-                          >
-                            {ticketLinks[item.id].ticket_key} ↗
-                          </a>
-                        )}
-
-                        {/* Workflow type badge */}
-                        <div style={{
-                          width: '80px',
-                          textAlign: 'center',
-                          flexShrink: 0,
-                        }}>
-                          <span style={{
-                            fontFamily: 'monospace',
-                            fontSize: '0.6rem',
-                            fontWeight: 700,
-                            color: wfColor.col,
-                            background: `rgba(${wfColor.rgb}, 0.1)`,
-                            border: `1px solid rgba(${wfColor.rgb}, 0.3)`,
-                            borderRadius: '4px',
-                            padding: '0.15rem 0.4rem',
-                            textTransform: 'uppercase',
-                          }}>
-                            {item.workflow_type}
-                          </span>
-                        </div>
-
-                        {/* Vendor */}
-                        <div style={{
-                          width: '120px',
-                          flexShrink: 0,
-                          fontFamily: 'monospace',
-                          fontSize: '0.68rem',
-                          color: '#94A3B8',
-                          overflow: 'hidden',
-                          textOverflow: 'ellipsis',
-                          whiteSpace: 'nowrap',
-                        }} title={item.vendor}>
-                          {item.vendor || '—'}
-                        </div>
-
-                        {/* Hostname / IP */}
-                        <div style={{
-                          width: '120px',
-                          flexShrink: 0,
-                          minWidth: 0,
-                        }}>
-                          {item.hostname && (
-                            <div style={{
-                              fontFamily: 'monospace',
-                              fontSize: '0.65rem',
-                              color: '#94A3B8',
-                              overflow: 'hidden',
-                              textOverflow: 'ellipsis',
-                              whiteSpace: 'nowrap',
-                            }} title={item.hostname}>
-                              {item.hostname}
-                            </div>
-                          )}
-                          {item.ip_address && (
-                            <div style={{
-                              fontFamily: 'monospace',
-                              fontSize: '0.62rem',
-                              color: '#10B981',
-                              marginTop: item.hostname ? '1px' : 0,
+                              color: wfColor.col,
+                              background: `rgba(${wfColor.rgb}, 0.1)`,
+                              border: `1px solid rgba(${wfColor.rgb}, 0.3)`,
+                              borderRadius: '4px',
+                              padding: '0.15rem 0.4rem',
+                              textTransform: 'uppercase',
                             }}>
-                              {item.ip_address}
-                            </div>
-                          )}
+                              {item.workflow_type}
+                            </span>
+                          </div>
+
+                          {/* Vendor */}
+                          <div style={{
+                            width: '120px',
+                            flexShrink: 0,
+                            fontFamily: 'monospace',
+                            fontSize: '0.68rem',
+                            color: '#94A3B8',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                          }} title={item.vendor}>
+                            {item.vendor || '—'}
+                          </div>
+
+                          {/* Hostname / IP */}
+                          <div style={{
+                            width: '120px',
+                            flexShrink: 0,
+                            minWidth: 0,
+                          }}>
+                            {item.hostname && (
+                              <div style={{
+                                fontFamily: 'monospace',
+                                fontSize: '0.65rem',
+                                color: '#94A3B8',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                              }} title={item.hostname}>
+                                {item.hostname}
+                              </div>
+                            )}
+                            {item.ip_address && (
+                              <div style={{
+                                fontFamily: 'monospace',
+                                fontSize: '0.62rem',
+                                color: '#10B981',
+                                marginTop: item.hostname ? '1px' : 0,
+                              }}>
+                                {item.ip_address}
+                              </div>
+                            )}
+                          </div>
                         </div>
-                      </div>
+
+                        {/* Archer Template Selector expandable panel (Requirement 5.1) */}
+                        {isArcherItem && isTemplatePanelOpen && (
+                          <div style={{
+                            marginBottom: '0.5rem',
+                            marginLeft: selectionMode ? '1.625rem' : '0',
+                            padding: '0.75rem',
+                            background: 'linear-gradient(135deg, rgba(22, 33, 62, 0.6), rgba(15, 23, 42, 0.8))',
+                            border: '1px solid rgba(0, 212, 255, 0.15)',
+                            borderTop: 'none',
+                            borderRadius: '0 0 8px 8px',
+                          }}>
+                            <TemplateSelector />
+                          </div>
+                        )}
+                      </React.Fragment>
                     );
                   })}
                 </div>

frontend/src/components/pages/__tests__/ComplianceDetailPanel.metricRow.test.js

@@ -0,0 +1,427 @@
+/**
+ * Render and interaction tests for the per-metric estimated-resolution-date
+ * line in the asset sidebar (ComplianceDetailPanel.js / MetricRow).
+ *
+ * Feature: compliance-metric-estimated-resolution-date
+ * Spec: .kiro/specs/compliance-metric-estimated-resolution-date
+ *
+ * Covers tasks 3.2 (placement, labels, placeholders), 3.3 (resolved
+ * suppression, read-only structure, role-independence, existing editor
+ * preserved), and 3.4 (existing save round-trip).
+ *
+ * Requirements covered: 1.1, 1.2, 1.4, 1.5, 1.6, 2.1, 3.1, 3.4, 4.1, 4.2,
+ * 4.3, 4.4, 4.5, 5.1, 5.2, 5.3, 5.4.
+ *
+ * The component fetches the asset detail via GET
+ * `${API_BASE}/compliance/items/:hostname` (credentials included) and saves
+ * metadata via PATCH `${API_BASE}/compliance/items/:hostname/metadata`, so
+ * global.fetch is mocked to serve the asset detail JSON and PATCH responses.
+ */
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import ComplianceDetailPanel from '../ComplianceDetailPanel';
+import {
+  RESOLUTION_DATE_LABEL,
+  NO_DATE_PLACEHOLDER,
+  INVALID_DATE_PLACEHOLDER,
+} from '../../../utils/resolutionDate';
+
+const HOSTNAME = 'host-1.example.com';
+
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+
+function makeMetric(overrides = {}) {
+  return {
+    metric_id: '2.3.6i',
+    category: 'Vulnerability Management',
+    status: 'active',
+    metric_desc: 'Outbound encryption required on all endpoints',
+    resolution_date: null,
+    remediation_plan: null,
+    seen_count: 1,
+    first_seen: '2025-01-01',
+    resolved_on: null,
+    extra: {},
+    ...overrides,
+  };
+}
+
+function makeDetail(metrics, overrides = {}) {
+  return {
+    hostname: HOSTNAME,
+    ip_address: '10.0.0.1',
+    device_type: 'server',
+    team: 'STEAM',
+    metrics,
+    history: [],
+    notes: [],
+    ...overrides,
+  };
+}
+
+const jsonResponse = (body, ok = true) => ({ ok, json: async () => body });
+
+/**
+ * Mock global.fetch. GET requests to the detail endpoint are served from a
+ * queue of detail objects (the last one is reused once the queue drains, so
+ * the initial load and any re-fetch can each return a distinct snapshot).
+ * PATCH requests to the metadata endpoint return the configured response.
+ */
+function mockFetch({ details, patchOk = true, patchBody = {} }) {
+  const queue = [...details];
+  let last = details[details.length - 1];
+  global.fetch = jest.fn((url, options = {}) => {
+    const method = (options.method || 'GET').toUpperCase();
+    if (method === 'PATCH') {
+      return Promise.resolve(jsonResponse(patchBody, patchOk));
+    }
+    // GET detail (fetchDetail)
+    const next = queue.length > 0 ? queue.shift() : last;
+    last = next;
+    return Promise.resolve(jsonResponse(next));
+  });
+}
+
+// ---------------------------------------------------------------------------
+// DOM query helpers
+// ---------------------------------------------------------------------------
+
+// The estimated-resolution date line renders as:
+//   <div>
+//     <svg .../>                      (Calendar icon)
+//     <span>{RESOLUTION_DATE_LABEL}</span>
+//     <span>{value | placeholder}</span>
+//   </div>
+// We locate each line by its label span, which contains exactly the label text.
+
+function getDateLineLabels(container) {
+  return Array.from(container.querySelectorAll('span')).filter(
+    (s) => s.textContent === RESOLUTION_DATE_LABEL
+  );
+}
+
+function getDateLineValueTexts(container) {
+  return getDateLineLabels(container).map((label) =>
+    label.nextElementSibling ? label.nextElementSibling.textContent : null
+  );
+}
+
+async function renderAndLoad(detail, props = {}) {
+  const utils = render(
+    <ComplianceDetailPanel
+      hostname={HOSTNAME}
+      onClose={() => {}}
+      onNoteAdded={() => {}}
+      {...props}
+    />
+  );
+  // Wait for the async detail load to complete (a metric description renders).
+  await screen.findByText(detail.metrics[0].metric_desc);
+  return utils;
+}
+
+beforeEach(() => {
+  process.env.REACT_APP_API_BASE = 'http://localhost:3001/api';
+});
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+// ===========================================================================
+// Task 3.2 — Render tests for placement, labels, and placeholders
+// ===========================================================================
+
+describe('Task 3.2 — placement, labels, and placeholders', () => {
+  test('placement (Req 1.2): estimated-resolution element precedes the metric description', async () => {
+    const detail = makeDetail([
+      makeMetric({ resolution_date: '2026-07-01' }),
+    ]);
+    mockFetch({ details: [detail] });
+
+    const { container } = await renderAndLoad(detail);
+
+    const labelEl = screen.getByText(RESOLUTION_DATE_LABEL);
+    const descEl = screen.getByText(detail.metrics[0].metric_desc);
+
+    // descEl must come AFTER labelEl in document order.
+    expect(
+      labelEl.compareDocumentPosition(descEl) &
+        Node.DOCUMENT_POSITION_FOLLOWING
+    ).toBeTruthy();
+
+    // Sanity: there is exactly one date line for the single active metric.
+    expect(getDateLineLabels(container)).toHaveLength(1);
+  });
+
+  test('label presence (Req 1.5): RESOLUTION_DATE_LABEL appears adjacent to the value', async () => {
+    const detail = makeDetail([
+      makeMetric({ resolution_date: '2026-07-01' }),
+    ]);
+    mockFetch({ details: [detail] });
+
+    const { container } = await renderAndLoad(detail);
+
+    const labels = getDateLineLabels(container);
+    expect(labels).toHaveLength(1);
+    // The value span is the immediate next sibling of the label span.
+    expect(labels[0].nextElementSibling).not.toBeNull();
+    expect(labels[0].nextElementSibling.textContent).toBe('2026-07-01');
+  });
+
+  test('set value (Req 1.1, 1.4): an active row with 2026-07-01 renders 2026-07-01', async () => {
+    const detail = makeDetail([
+      makeMetric({ resolution_date: '2026-07-01' }),
+    ]);
+    mockFetch({ details: [detail] });
+
+    const { container } = await renderAndLoad(detail);
+
+    expect(getDateLineValueTexts(container)).toEqual(['2026-07-01']);
+  });
+
+  test('no-date placeholder (Req 2.1, 4.5): null/empty/whitespace render NO_DATE_PLACEHOLDER and keep the description', async () => {
+    const metrics = [
+      makeMetric({
+        metric_id: '2.3.6i',
+        metric_desc: 'Metric with null resolution date',
+        resolution_date: null,
+      }),
+      makeMetric({
+        metric_id: '2.3.8i',
+        metric_desc: 'Metric with empty resolution date',
+        resolution_date: '',
+      }),
+      makeMetric({
+        metric_id: 'Vulns_Aging',
+        metric_desc: 'Metric with whitespace resolution date',
+        resolution_date: '   ',
+      }),
+    ];
+    const detail = makeDetail(metrics);
+    mockFetch({ details: [detail] });
+
+    const { container } = await renderAndLoad(detail);
+
+    // All three active rows show the no-date placeholder.
+    expect(getDateLineValueTexts(container)).toEqual([
+      NO_DATE_PLACEHOLDER,
+      NO_DATE_PLACEHOLDER,
+      NO_DATE_PLACEHOLDER,
+    ]);
+
+    // Each metric's description still renders.
+    for (const m of metrics) {
+      expect(screen.getByText(m.metric_desc)).toBeInTheDocument();
+    }
+  });
+
+  test('invalid placeholder (Req 1.6): malformed date renders INVALID_DATE_PLACEHOLDER and keeps the description', async () => {
+    const detail = makeDetail([
+      makeMetric({
+        metric_desc: 'Metric with a malformed resolution date',
+        resolution_date: '2026-13-99',
+      }),
+    ]);
+    mockFetch({ details: [detail] });
+
+    const { container } = await renderAndLoad(detail);
+
+    expect(getDateLineValueTexts(container)).toEqual([INVALID_DATE_PLACEHOLDER]);
+    expect(
+      screen.getByText('Metric with a malformed resolution date')
+    ).toBeInTheDocument();
+  });
+});
+
+// ===========================================================================
+// Task 3.3 — resolved suppression, read-only structure, role-independence
+// ===========================================================================
+
+describe('Task 3.3 — suppression, read-only structure, role-independence', () => {
+  test('resolved suppression (Req 3.1, 3.4): a resolved metric with a populated date renders no estimated-resolution line', async () => {
+    const detail = makeDetail([
+      makeMetric({
+        metric_id: '2.3.6i',
+        status: 'resolved',
+        metric_desc: 'Resolved metric with a populated resolution date',
+        resolution_date: '2026-07-01',
+        resolved_on: '2026-06-15',
+      }),
+    ]);
+    mockFetch({ details: [detail] });
+
+    const { container } = await renderAndLoad(detail);
+
+    // No estimated-resolution line anywhere for a resolved-only asset.
+    expect(getDateLineLabels(container)).toHaveLength(0);
+    expect(screen.queryByText(RESOLUTION_DATE_LABEL)).toBeNull();
+  });
+
+  test('mixed list (Req 3.4): the estimated-resolution line appears only within active rows', async () => {
+    const metrics = [
+      makeMetric({
+        metric_id: '2.3.6i',
+        status: 'active',
+        metric_desc: 'Active metric one',
+        resolution_date: '2026-07-01',
+      }),
+      makeMetric({
+        metric_id: '2.3.8i',
+        status: 'active',
+        metric_desc: 'Active metric two',
+        resolution_date: '2026-09-30',
+      }),
+      makeMetric({
+        metric_id: 'Vulns_Aging',
+        status: 'resolved',
+        metric_desc: 'Resolved metric',
+        resolution_date: '2026-01-15',
+        resolved_on: '2026-01-10',
+      }),
+    ];
+    const detail = makeDetail(metrics);
+    mockFetch({ details: [detail] });
+
+    const { container } = await renderAndLoad(detail);
+
+    // Exactly two date lines (one per active metric), each its own value.
+    expect(getDateLineValueTexts(container)).toEqual([
+      '2026-07-01',
+      '2026-09-30',
+    ]);
+  });
+
+  test('read-only structure (Req 5.3): the date-line subtree has no input, button, or anchor', async () => {
+    const detail = makeDetail([
+      makeMetric({ resolution_date: '2026-07-01' }),
+    ]);
+    mockFetch({ details: [detail] });
+
+    const { container } = await renderAndLoad(detail);
+
+    const labels = getDateLineLabels(container);
+    expect(labels).toHaveLength(1);
+    const dateLineSubtree = labels[0].parentElement;
+
+    // Plain text only — no interactive controls capable of modifying the field.
+    expect(
+      dateLineSubtree.querySelectorAll('input, button, a, select, textarea')
+    ).toHaveLength(0);
+  });
+
+  test('role-independence (Req 5.1, 5.2, 5.4): the date line is plain, non-interactive text', async () => {
+    // ComplianceDetailPanel does not consume a role/auth context for the
+    // estimated-resolution subtree: the line is derived purely from
+    // metric.resolution_date and rendered as static spans. The display is
+    // therefore role-independent by construction — a viewer, editor, and
+    // admin all receive byte-for-byte identical output and no editing control
+    // is introduced. We assert the plain-text value and the absence of any
+    // interactive element in the subtree.
+    const detail = makeDetail([
+      makeMetric({ resolution_date: '2026-07-01' }),
+    ]);
+    mockFetch({ details: [detail] });
+
+    const { container } = await renderAndLoad(detail);
+
+    expect(getDateLineValueTexts(container)).toEqual(['2026-07-01']);
+
+    const dateLineSubtree = getDateLineLabels(container)[0].parentElement;
+    expect(
+      dateLineSubtree.querySelectorAll('input, button, a, select, textarea')
+    ).toHaveLength(0);
+  });
+
+  test('existing editor preserved (Req 4.1): the editable Resolution Date input[type=date] still renders', async () => {
+    const detail = makeDetail([
+      makeMetric({ resolution_date: '2026-07-01' }),
+    ]);
+    mockFetch({ details: [detail] });
+
+    const { container } = await renderAndLoad(detail);
+
+    expect(container.querySelector('input[type="date"]')).not.toBeNull();
+  });
+});
+
+// ===========================================================================
+// Task 3.4 — Interaction tests for the existing save round-trip
+// ===========================================================================
+
+describe('Task 3.4 — save round-trip', () => {
+  test('successful save (Req 4.2, 4.3): displayed estimated-resolution updates to the new date after save + re-fetch', async () => {
+    const before = makeDetail([
+      makeMetric({ resolution_date: '2026-07-01' }),
+    ]);
+    const after = makeDetail([
+      makeMetric({ resolution_date: '2026-08-15' }),
+    ]);
+    // GET (initial) -> before, PATCH -> ok, GET (re-fetch) -> after
+    mockFetch({ details: [before, after], patchOk: true });
+
+    const { container } = await renderAndLoad(before);
+
+    // Pre-condition: original date displayed.
+    expect(getDateLineValueTexts(container)).toEqual(['2026-07-01']);
+
+    // Editor updates the editable Resolution Date field and saves.
+    const dateInput = container.querySelector('input[type="date"]');
+    fireEvent.change(dateInput, { target: { value: '2026-08-15' } });
+    fireEvent.click(screen.getByRole('button', { name: /save/i }));
+
+    // The displayed estimated-resolution value updates from the re-fetch.
+    await waitFor(() => {
+      expect(getDateLineValueTexts(container)).toEqual(['2026-08-15']);
+    });
+  });
+
+  test('successful clear (Req 4.5): clearing the field renders NO_DATE_PLACEHOLDER after save + re-fetch', async () => {
+    const before = makeDetail([
+      makeMetric({ resolution_date: '2026-07-01' }),
+    ]);
+    const after = makeDetail([makeMetric({ resolution_date: '' })]);
+    mockFetch({ details: [before, after], patchOk: true });
+
+    const { container } = await renderAndLoad(before);
+
+    expect(getDateLineValueTexts(container)).toEqual(['2026-07-01']);
+
+    const dateInput = container.querySelector('input[type="date"]');
+    fireEvent.change(dateInput, { target: { value: '' } });
+    fireEvent.click(screen.getByRole('button', { name: /save/i }));
+
+    await waitFor(() => {
+      expect(getDateLineValueTexts(container)).toEqual([NO_DATE_PLACEHOLDER]);
+    });
+  });
+
+  test('failed save (Req 4.4): previously displayed date is retained and an error is shown', async () => {
+    const before = makeDetail([
+      makeMetric({ resolution_date: '2026-07-01' }),
+    ]);
+    // PATCH fails; fetchDetail is never re-issued, so the queue only needs the
+    // initial detail.
+    mockFetch({
+      details: [before],
+      patchOk: false,
+      patchBody: { error: 'Save failed' },
+    });
+
+    const { container } = await renderAndLoad(before);
+
+    expect(getDateLineValueTexts(container)).toEqual(['2026-07-01']);
+
+    const dateInput = container.querySelector('input[type="date"]');
+    fireEvent.change(dateInput, { target: { value: '2099-01-01' } });
+    fireEvent.click(screen.getByRole('button', { name: /save/i }));
+
+    // Error indication appears.
+    await screen.findByText('Save failed');
+
+    // The previously displayed estimated-resolution date is retained.
+    expect(getDateLineValueTexts(container)).toEqual(['2026-07-01']);
+  });
+});

frontend/src/components/pages/__tests__/compliance-list-stale-after-sidebar-edit.exploration.property.test.js

@@ -0,0 +1,237 @@
+/**
+ * Bug Condition Exploration Property Test:
+ *   Compliance List Stale After Sidebar Edit
+ *
+ * Spec:  .kiro/specs/compliance-list-stale-after-sidebar-edit/ (bugfix)
+ * Issue: #23 — "[Bug] Update Res Date/Remed Plan in list after updating in sidebar"
+ *        http://steam-gitlab.charterlab.com/steam/cve-dashboard/-/issues/23
+ *
+ * BUG CONDITION (bugfix.md Current Behavior 1.1–1.3):
+ *   isBugCondition(input) = a successful PATCH /api/compliance/items/:hostname/metadata
+ *   occurred from the sidebar (ComplianceDetailPanel). Under this condition the parent
+ *   CompliancePage list is never re-fetched: handleSaveMetadata() does not notify the
+ *   parent (1.1), onClose only clears selectedHost (1.2), and the row keeps the stale
+ *   Resolution Date / Remediation Plan held in the parent `devices` state (1.3).
+ *
+ * THIS TEST IS EXPECTED TO FAIL ON UNFIXED CODE — failure confirms the bug.
+ *   The property encodes the expected behavior (bugfix.md 2.1, 2.2): for any saved
+ *   metadata value, after a successful sidebar save the parent list row for that
+ *   hostname displays the saved value WITHOUT a manual filter/team/tab change or a
+ *   manual refresh click, because a parent refresh callback re-issues fetchDevices.
+ *   On unfixed code no parent callback fires, so the list GET is never re-issued after
+ *   the PATCH and the row keeps showing the stale value ("—").
+ *
+ * Mirrors the tagging convention of
+ *   backend/__tests__/compliance-remediation-display-fix.exploration.property.test.js
+ *
+ * **Validates: Requirements 1.1, 1.2, 1.3, 2.1, 2.2**
+ */
+import React from 'react';
+import { render, screen, fireEvent, waitFor, within, cleanup } from '@testing-library/react';
+import fc from 'fast-check';
+
+// --- Mocks (hoisted by babel-jest above the CompliancePage import) ---
+
+// Stub auth so CompliancePage renders the STEAM team with write access.
+jest.mock('../../../contexts/AuthContext', () => ({
+  useAuth: () => ({
+    canWrite: () => true,
+    isAdmin: () => false,
+    getAvailableTeams: () => ['STEAM'],
+    adminScope: null,
+  }),
+}));
+
+// The historical charts panel is irrelevant to the list-staleness bug and pulls
+// in recharts; stub it so the test stays focused and fast across property runs.
+jest.mock('../ComplianceChartsPanel', () => () => null);
+
+import CompliancePage from '../CompliancePage';
+
+const HOSTNAME = 'HOST-001';
+const METRIC_ID = '2.3.6i';
+
+// --- Fixtures --------------------------------------------------------------
+
+function jsonResponse(body, ok = true) {
+  return Promise.resolve({ ok, json: async () => body });
+}
+
+function makeListDevice({ resolution_date, remediation_plan }) {
+  return {
+    hostname: HOSTNAME,
+    ip_address: '10.0.0.1',
+    device_type: 'Switch',
+    failing_metrics: [{ metric_id: METRIC_ID, category: 'Vulnerability Management' }],
+    resolution_date,
+    remediation_plan,
+    seen_count: 3,
+    has_notes: false,
+  };
+}
+
+function makeDetail() {
+  return {
+    hostname: HOSTNAME,
+    ip_address: '10.0.0.1',
+    device_type: 'Switch',
+    team: 'STEAM',
+    metrics: [
+      {
+        metric_id: METRIC_ID,
+        category: 'Vulnerability Management',
+        status: 'active',
+        metric_desc: 'Outbound encryption required on all endpoints',
+        resolution_date: null,
+        remediation_plan: null,
+        seen_count: 3,
+        first_seen: '2025-01-01',
+        resolved_on: null,
+        extra: {},
+      },
+    ],
+    history: [],
+    notes: [],
+  };
+}
+
+/**
+ * Install a URL-routing global.fetch.
+ *
+ * The list device starts stale (resolution_date / remediation_plan = null). Only
+ * AFTER a successful metadata PATCH does the list endpoint return the saved values —
+ * modelling the backend, which already persists and returns the new metadata. Thus a
+ * post-save re-fetch is observable in the row, while on unfixed code (no re-fetch) the
+ * row keeps showing the stale value.
+ */
+function installFetchMock(savedResolutionDate, savedRemediationPlan) {
+  const state = { patchOccurred: false, patchCalls: 0, listCalls: 0, listCallsAfterPatch: 0 };
+
+  global.fetch = jest.fn((url, options = {}) => {
+    const method = (options.method || 'GET').toUpperCase();
+
+    // PATCH /compliance/items/:hostname/metadata → success
+    if (method === 'PATCH' && url.includes('/compliance/items/') && url.includes('/metadata')) {
+      state.patchCalls++;
+      state.patchOccurred = true;
+      return jsonResponse({ ok: true });
+    }
+
+    // GET /compliance/summary?team=STEAM → minimal valid summary
+    if (url.includes('/compliance/summary')) {
+      return jsonResponse({ entries: [], overall_scores: {}, upload: { report_date: '2025-01-01' } });
+    }
+
+    // GET /compliance/items?team=STEAM&status=active → device list (query string)
+    if (url.includes('/compliance/items?')) {
+      state.listCalls++;
+      if (state.patchOccurred) state.listCallsAfterPatch++;
+      const device = state.patchOccurred
+        ? makeListDevice({ resolution_date: savedResolutionDate, remediation_plan: savedRemediationPlan })
+        : makeListDevice({ resolution_date: null, remediation_plan: null });
+      return jsonResponse({ devices: [device] });
+    }
+
+    // GET /compliance/items/:hostname → detail (one active metric)
+    if (url.includes('/compliance/items/')) {
+      return jsonResponse(makeDetail());
+    }
+
+    // Any other URL (charts panel is mocked out) → safe empty payload
+    return jsonResponse({});
+  });
+
+  return state;
+}
+
+// --- Generators ------------------------------------------------------------
+
+/**
+ * YYYY-MM-DD strings built from integer tuples. Do NOT call toISOString on shrunk
+ * values (mirrors the predecessor exploration test's date-generator pattern).
+ */
+const arbResolutionDate = fc
+  .tuple(
+    fc.integer({ min: 2026, max: 2030 }),
+    fc.integer({ min: 1, max: 12 }),
+    fc.integer({ min: 1, max: 28 })
+  )
+  .map(([y, m, d]) => `${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`);
+
+/** Non-empty, trimmed remediation plan strings, length-bounded 1–200. */
+const arbRemediationPlan = fc
+  .string({ minLength: 1, maxLength: 200 })
+  .filter((s) => s.trim().length > 0);
+
+// --- Setup / teardown ------------------------------------------------------
+
+beforeEach(() => {
+  process.env.REACT_APP_API_BASE = 'http://localhost:3001/api';
+});
+
+afterEach(() => {
+  cleanup();
+  jest.restoreAllMocks();
+});
+
+// --- Property Test ---------------------------------------------------------
+
+describe('Bug Condition Exploration: list row stays stale after sidebar metadata save', () => {
+  it(
+    'Property 1: for any saved metadata, the parent list row reflects the saved Resolution Date after a successful sidebar save (no manual refresh)',
+    async () => {
+      await fc.assert(
+        fc.asyncProperty(arbResolutionDate, arbRemediationPlan, async (savedResolutionDate, savedRemediationPlan) => {
+          const state = installFetchMock(savedResolutionDate, savedRemediationPlan);
+
+          try {
+            const { container } = render(<CompliancePage onNavigate={() => {}} />);
+
+            // Wait for the (stale) device row, then capture the row element.
+            const hostCell = await screen.findByText(HOSTNAME);
+            const row = hostCell.parentElement;
+
+            // Pre-condition: the stale row does not yet show the to-be-saved date.
+            expect(within(row).queryByText(savedResolutionDate)).toBeNull();
+
+            // Open the sidebar detail panel.
+            fireEvent.click(row);
+
+            // Wait for the panel's editable Resolution Date input to render.
+            const dateInput = await waitFor(() => {
+              const el = container.querySelector('input[type="date"]');
+              if (!el) throw new Error('resolution date input not ready');
+              return el;
+            });
+            const planInput = screen.getByPlaceholderText(/Describe the remediation plan/i);
+
+            // Enter the generated metadata values and click Save.
+            fireEvent.change(dateInput, { target: { value: savedResolutionDate } });
+            fireEvent.change(planInput, { target: { value: savedRemediationPlan } });
+            fireEvent.click(screen.getByRole('button', { name: /save/i }));
+
+            // The PATCH is issued on both fixed and unfixed code.
+            await waitFor(() => expect(state.patchCalls).toBeGreaterThan(0));
+
+            // PROPERTY (expected behavior, bugfix.md 2.1/2.2): the parent list row
+            // reflects the saved Resolution Date without a manual refresh. This holds
+            // only if a parent refresh callback re-issued fetchDevices after the save.
+            await waitFor(
+              () => {
+                expect(within(row).getByText(savedResolutionDate)).toBeInTheDocument();
+              },
+              { timeout: 2000 }
+            );
+
+            // Supporting: the list endpoint was re-issued after the save.
+            expect(state.listCallsAfterPatch).toBeGreaterThan(0);
+          } finally {
+            cleanup();
+          }
+        }),
+        { numRuns: 10, endOnFailure: true }
+      );
+    },
+    60000
+  );
+});

frontend/src/components/pages/__tests__/compliance-list-stale-after-sidebar-edit.preservation.property.test.js

@@ -0,0 +1,467 @@
+/**
+ * Preservation / Regression Property Tests:
+ *   Compliance List Stale After Sidebar Edit
+ *
+ * Spec:  .kiro/specs/compliance-list-stale-after-sidebar-edit/ (bugfix)
+ * Issue: #23 — "[Bug] Update Res Date/Remed Plan in list after updating in sidebar"
+ *        http://steam-gitlab.charterlab.com/steam/cve-dashboard/-/issues/23
+ *
+ * Property 2 (Preservation): the behaviors below must hold AFTER the fix. Following
+ * observation-first methodology, the preservation properties (note-add refresh, failed
+ * save surfaces an error without falsely updating the list, close-without-change clears
+ * selection, other row fields render) were observed to hold on UNFIXED code and must
+ * keep holding. The "regression guard" (the list row reflects a saved metadata value)
+ * is the one behavior that flips from failing (pre-fix) to passing (post-fix); it is
+ * kept here as a standing guard against re-introducing the bug.
+ *
+ * Mirrors the tagging convention of
+ *   backend/__tests__/compliance-remediation-display-fix.preservation.property.test.js
+ *
+ * Properties tested:
+ *   P2.1 — Regression guard: after a successful sidebar save the list row shows the
+ *          saved Resolution Date with no manual refresh           (bugfix.md 2.1, 2.2)
+ *   P2.2 — Note-add still triggers a list re-fetch via onNoteAdded (bugfix.md 3.1)
+ *   P2.3 — Failed metadata save surfaces metaError and does NOT
+ *          falsely update the list row                            (bugfix.md 3.3)
+ *   P2.4 — Close-without-change clears the selection, no PATCH     (bugfix.md 3.4)
+ *   P2.5 — Other row fields (hostname, IP, type, failing metrics,
+ *          seen count) render unchanged                           (bugfix.md 3.5)
+ *
+ * **Validates: Requirements 3.1, 3.2, 3.3, 3.4, 3.5, 3.6**
+ */
+import React from 'react';
+import { render, screen, fireEvent, waitFor, within, cleanup } from '@testing-library/react';
+import fc from 'fast-check';
+
+// --- Mocks (hoisted by babel-jest above the CompliancePage import) ---
+
+// Stub auth so CompliancePage renders the STEAM team with write access.
+jest.mock('../../../contexts/AuthContext', () => ({
+  useAuth: () => ({
+    canWrite: () => true,
+    isAdmin: () => false,
+    getAvailableTeams: () => ['STEAM'],
+    adminScope: null,
+  }),
+}));
+
+// The historical charts panel is irrelevant to the list-staleness bug and pulls
+// in recharts; stub it so the tests stay focused and fast across property runs.
+jest.mock('../ComplianceChartsPanel', () => () => null);
+
+import CompliancePage from '../CompliancePage';
+
+const HOSTNAME = 'HOST-001';
+const METRIC_ID = '2.3.6i';
+
+// --- Fixtures --------------------------------------------------------------
+
+function jsonResponse(body, ok = true) {
+  return Promise.resolve({ ok, json: async () => body });
+}
+
+function makeListDevice({ resolution_date, remediation_plan }) {
+  return {
+    hostname: HOSTNAME,
+    ip_address: '10.0.0.1',
+    device_type: 'Switch',
+    failing_metrics: [{ metric_id: METRIC_ID, category: 'Vulnerability Management' }],
+    resolution_date,
+    remediation_plan,
+    seen_count: 3,
+    has_notes: false,
+  };
+}
+
+function makeDetail() {
+  return {
+    hostname: HOSTNAME,
+    ip_address: '10.0.0.1',
+    device_type: 'Switch',
+    team: 'STEAM',
+    metrics: [
+      {
+        metric_id: METRIC_ID,
+        category: 'Vulnerability Management',
+        status: 'active',
+        metric_desc: 'Outbound encryption required on all endpoints',
+        resolution_date: null,
+        remediation_plan: null,
+        seen_count: 3,
+        first_seen: '2025-01-01',
+        resolved_on: null,
+        extra: {},
+      },
+    ],
+    history: [],
+    notes: [],
+  };
+}
+
+/**
+ * Install a URL-routing global.fetch shared by every property.
+ *
+ * Options:
+ *   savedResolutionDate / savedRemediationPlan — values the list endpoint returns
+ *     AFTER a successful metadata PATCH (models the backend persisting the new value).
+ *   patchOk  — whether PATCH /compliance/items/:hostname/metadata succeeds (default true).
+ *   noteOk   — whether POST /compliance/notes succeeds (default true).
+ *   fixedDevice — when provided, the list always returns this device unchanged (used by
+ *     the row-field rendering property which never edits metadata).
+ *
+ * The list device starts stale (resolution_date / remediation_plan = null) and only
+ * returns the saved values once a SUCCESSFUL patch has occurred, so a post-save
+ * re-fetch is observable in the rendered row.
+ */
+function installFetchMock(opts = {}) {
+  const {
+    savedResolutionDate = '2027-06-15',
+    savedRemediationPlan = 'Patch firmware',
+    patchOk = true,
+    noteOk = true,
+    fixedDevice = null,
+  } = opts;
+
+  const state = {
+    patchOccurred: false,
+    patchCalls: 0,
+    noteOccurred: false,
+    noteCalls: 0,
+    listCalls: 0,
+    listCallsAfterPatch: 0,
+    listCallsAfterNote: 0,
+  };
+
+  global.fetch = jest.fn((url, options = {}) => {
+    const method = (options.method || 'GET').toUpperCase();
+
+    // POST /compliance/notes → success / failure
+    if (method === 'POST' && url.includes('/compliance/notes')) {
+      state.noteCalls++;
+      if (noteOk) {
+        state.noteOccurred = true;
+        return jsonResponse({ ok: true, id: 1 });
+      }
+      return jsonResponse({ error: 'Failed to save note' }, false);
+    }
+
+    // PATCH /compliance/items/:hostname/metadata → success / failure
+    if (method === 'PATCH' && url.includes('/compliance/items/') && url.includes('/metadata')) {
+      state.patchCalls++;
+      if (patchOk) {
+        state.patchOccurred = true;
+        return jsonResponse({ ok: true });
+      }
+      return jsonResponse({ error: 'Failed to save metadata' }, false);
+    }
+
+    // GET /compliance/summary?team=STEAM → minimal valid summary
+    if (url.includes('/compliance/summary')) {
+      return jsonResponse({ entries: [], overall_scores: {}, upload: { report_date: '2025-01-01' } });
+    }
+
+    // GET /compliance/items?team=STEAM&status=active → device list (query string)
+    if (url.includes('/compliance/items?')) {
+      state.listCalls++;
+      if (state.patchOccurred) state.listCallsAfterPatch++;
+      if (state.noteOccurred) state.listCallsAfterNote++;
+      let device;
+      if (fixedDevice) {
+        device = fixedDevice;
+      } else if (state.patchOccurred) {
+        device = makeListDevice({ resolution_date: savedResolutionDate, remediation_plan: savedRemediationPlan });
+      } else {
+        device = makeListDevice({ resolution_date: null, remediation_plan: null });
+      }
+      return jsonResponse({ devices: [device] });
+    }
+
+    // GET /compliance/items/:hostname → detail (one active metric)
+    if (url.includes('/compliance/items/')) {
+      return jsonResponse(makeDetail());
+    }
+
+    // Any other URL (charts panel is mocked out) → safe empty payload
+    return jsonResponse({});
+  });
+
+  return state;
+}
+
+// --- Generators ------------------------------------------------------------
+
+/**
+ * YYYY-MM-DD strings built from integer tuples. Do NOT call toISOString on shrunk
+ * values (mirrors the predecessor exploration test's date-generator pattern).
+ */
+const arbResolutionDate = fc
+  .tuple(
+    fc.integer({ min: 2026, max: 2030 }),
+    fc.integer({ min: 1, max: 12 }),
+    fc.integer({ min: 1, max: 28 })
+  )
+  .map(([y, m, d]) => `${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`);
+
+/** Non-empty, trimmed remediation plan strings, length-bounded 1–200. */
+const arbRemediationPlan = fc
+  .string({ minLength: 1, maxLength: 200 })
+  .filter((s) => s.trim().length > 0);
+
+/** Non-empty, trimmed note text, length-bounded 1–200. */
+const arbNoteText = fc
+  .string({ minLength: 1, maxLength: 200 })
+  .filter((s) => s.trim().length > 0);
+
+/** Hostnames like HOST-0001 — unique, regex-safe, distinct from IP/type cells. */
+const arbHostname = fc
+  .integer({ min: 1, max: 9999 })
+  .map((n) => `HOST-${String(n).padStart(4, '0')}`);
+
+/** IPv4 dotted-quad strings built from integer tuples. */
+const arbIp = fc
+  .tuple(
+    fc.integer({ min: 1, max: 254 }),
+    fc.integer({ min: 0, max: 255 }),
+    fc.integer({ min: 0, max: 255 }),
+    fc.integer({ min: 1, max: 254 })
+  )
+  .map(([a, b, c, d]) => `${a}.${b}.${c}.${d}`);
+
+const arbDeviceType = fc.constantFrom('Switch', 'Router', 'Firewall', 'Server', 'Workstation');
+
+/** metric_id like "7.1.3", built from integer tuples. */
+const arbMetricId = fc
+  .tuple(fc.integer({ min: 1, max: 9 }), fc.integer({ min: 1, max: 9 }), fc.integer({ min: 1, max: 9 }))
+  .map(([a, b, c]) => `${a}.${b}.${c}`);
+
+/** 1–3 unique metric ids (unique to avoid duplicate React keys / ambiguous queries). */
+const arbMetricIds = fc.uniqueArray(arbMetricId, { minLength: 1, maxLength: 3 });
+
+const arbSeenCount = fc.integer({ min: 1, max: 20 });
+
+// --- Helpers ---------------------------------------------------------------
+
+/** Render CompliancePage, wait for the device row, return { container, row }. */
+async function renderAndGetRow(hostname = HOSTNAME) {
+  const utils = render(<CompliancePage onNavigate={() => {}} />);
+  const hostCell = await screen.findByText(hostname);
+  return { ...utils, row: hostCell.parentElement };
+}
+
+/** Open the sidebar by clicking the row, wait for the editable date input. */
+async function openPanel(row, container) {
+  fireEvent.click(row);
+  const dateInput = await waitFor(() => {
+    const el = container.querySelector('input[type="date"]');
+    if (!el) throw new Error('resolution date input not ready');
+    return el;
+  });
+  return dateInput;
+}
+
+// --- Setup / teardown ------------------------------------------------------
+
+beforeEach(() => {
+  process.env.REACT_APP_API_BASE = 'http://localhost:3001/api';
+});
+
+afterEach(() => {
+  cleanup();
+  jest.restoreAllMocks();
+});
+
+// ===========================================================================
+// P2.1 — Regression guard: list row reflects a saved Resolution Date
+//        after a successful sidebar save, with no manual refresh.
+//        (bugfix.md 2.1, 2.2 — kept as a standing regression guard)
+// ===========================================================================
+describe('P2.1 — Regression guard: list row reflects saved metadata after a successful save', () => {
+  it('for any saved metadata, the parent row shows the saved Resolution Date without a manual refresh', async () => {
+    await fc.assert(
+      fc.asyncProperty(arbResolutionDate, arbRemediationPlan, async (savedResolutionDate, savedRemediationPlan) => {
+        const state = installFetchMock({ savedResolutionDate, savedRemediationPlan });
+        try {
+          const { container, row } = await renderAndGetRow();
+
+          // Pre-condition: the stale row does not yet show the to-be-saved date.
+          expect(within(row).queryByText(savedResolutionDate)).toBeNull();
+
+          const dateInput = await openPanel(row, container);
+          const planInput = screen.getByPlaceholderText(/Describe the remediation plan/i);
+
+          fireEvent.change(dateInput, { target: { value: savedResolutionDate } });
+          fireEvent.change(planInput, { target: { value: savedRemediationPlan } });
+          fireEvent.click(screen.getByRole('button', { name: /save/i }));
+
+          await waitFor(() => expect(state.patchCalls).toBeGreaterThan(0));
+
+          // Regression guard: the row reflects the saved value (the fix re-fetches).
+          await waitFor(
+            () => {
+              expect(within(row).getByText(savedResolutionDate)).toBeInTheDocument();
+            },
+            { timeout: 2000 }
+          );
+          expect(state.listCallsAfterPatch).toBeGreaterThan(0);
+        } finally {
+          cleanup();
+        }
+      }),
+      { numRuns: 6, endOnFailure: true }
+    );
+  }, 60000);
+});
+
+// ===========================================================================
+// P2.2 — Note-add refresh still works: adding a note re-issues the list GET
+//        via the existing onNoteAdded callback. (bugfix.md 3.1)
+// ===========================================================================
+describe('P2.2 — Note-add still triggers a list re-fetch (onNoteAdded preserved)', () => {
+  it('for any note text, a successful note add re-issues GET /compliance/items', async () => {
+    await fc.assert(
+      fc.asyncProperty(arbNoteText, async (noteText) => {
+        const state = installFetchMock({ noteOk: true });
+        try {
+          const { container, row } = await renderAndGetRow();
+          await openPanel(row, container);
+
+          const noteInput = await screen.findByPlaceholderText(/Add a note/i);
+          fireEvent.change(noteInput, { target: { value: noteText } });
+
+          const addButton = container.querySelector('.lucide-send').closest('button');
+          fireEvent.click(addButton);
+
+          await waitFor(() => expect(state.noteCalls).toBeGreaterThan(0));
+          // Preservation: the list is re-fetched after the note add.
+          await waitFor(() => expect(state.listCallsAfterNote).toBeGreaterThan(0), { timeout: 2000 });
+        } finally {
+          cleanup();
+        }
+      }),
+      { numRuns: 6, endOnFailure: true }
+    );
+  }, 60000);
+});
+
+// ===========================================================================
+// P2.3 — Failed metadata save surfaces metaError and does NOT falsely
+//        update the list row. (bugfix.md 3.3)
+// ===========================================================================
+describe('P2.3 — Failed save shows an error and does not falsely update the list', () => {
+  it('for any attempted value, a non-OK PATCH surfaces metaError and the row stays stale', async () => {
+    await fc.assert(
+      fc.asyncProperty(arbResolutionDate, async (attemptedResolutionDate) => {
+        const state = installFetchMock({ savedResolutionDate: attemptedResolutionDate, patchOk: false });
+        try {
+          const { container, row } = await renderAndGetRow();
+          const dateInput = await openPanel(row, container);
+
+          fireEvent.change(dateInput, { target: { value: attemptedResolutionDate } });
+          fireEvent.click(screen.getByRole('button', { name: /save/i }));
+
+          await waitFor(() => expect(state.patchCalls).toBeGreaterThan(0));
+
+          // The panel surfaces the error from the failed save.
+          await waitFor(() => expect(screen.getByText('Failed to save metadata')).toBeInTheDocument());
+
+          // The list row was NOT updated to a value that never persisted.
+          expect(within(row).queryByText(attemptedResolutionDate)).toBeNull();
+          expect(state.listCallsAfterPatch).toBe(0);
+        } finally {
+          cleanup();
+        }
+      }),
+      { numRuns: 6, endOnFailure: true }
+    );
+  }, 60000);
+});
+
+// ===========================================================================
+// P2.4 — Close-without-change clears the selection and issues no PATCH.
+//        (bugfix.md 3.4) — example-style assertion (no value in varying inputs).
+// ===========================================================================
+describe('P2.4 — Close without change clears selection and saves nothing', () => {
+  it('clicking the close (X) removes the panel and triggers no metadata save', async () => {
+    const state = installFetchMock();
+    const { container, row } = await renderAndGetRow();
+
+    // Open the panel and confirm the editable date input rendered.
+    await openPanel(row, container);
+
+    // Click the close (X) control without saving anything.
+    const closeButton = container.querySelector('.lucide-x').closest('button');
+    fireEvent.click(closeButton);
+
+    // The panel is gone (selection cleared) — its date input no longer exists.
+    await waitFor(() => expect(container.querySelector('input[type="date"]')).toBeNull());
+
+    // The row remains and no metadata save was attempted.
+    expect(screen.getByText(HOSTNAME)).toBeInTheDocument();
+    expect(state.patchCalls).toBe(0);
+  }, 30000);
+
+  it('clicking the backdrop also clears selection and triggers no metadata save', async () => {
+    const state = installFetchMock();
+    const { container, row } = await renderAndGetRow();
+
+    await openPanel(row, container);
+
+    // The first fixed/inset overlay is the backdrop (onClick={onClose}).
+    const backdrop = container.querySelector('div[style*="position: fixed"]');
+    fireEvent.click(backdrop);
+
+    await waitFor(() => expect(container.querySelector('input[type="date"]')).toBeNull());
+    expect(screen.getByText(HOSTNAME)).toBeInTheDocument();
+    expect(state.patchCalls).toBe(0);
+  }, 30000);
+});
+
+// ===========================================================================
+// P2.5 — Other row fields render unchanged: hostname, IP, device type,
+//        failing metrics, seen count. (bugfix.md 3.5)
+// ===========================================================================
+describe('P2.5 — Other row fields render correctly and unchanged', () => {
+  it('for any generated device, the row displays hostname, IP, type, metrics, and seen count', async () => {
+    await fc.assert(
+      fc.asyncProperty(
+        arbHostname,
+        arbIp,
+        arbDeviceType,
+        arbMetricIds,
+        arbSeenCount,
+        async (hostname, ip, deviceType, metricIds, seenCount) => {
+          const device = {
+            hostname,
+            ip_address: ip,
+            device_type: deviceType,
+            failing_metrics: metricIds.map((id) => ({ metric_id: id, category: 'Vulnerability Management' })),
+            resolution_date: null,
+            remediation_plan: null,
+            seen_count: seenCount,
+            has_notes: false,
+          };
+          installFetchMock({ fixedDevice: device });
+          try {
+            const { row } = await renderAndGetRow(hostname);
+
+            // Hostname, IP, and device type render verbatim.
+            expect(within(row).getByText(hostname)).toBeInTheDocument();
+            expect(within(row).getByText(ip)).toBeInTheDocument();
+            expect(within(row).getByText(deviceType)).toBeInTheDocument();
+
+            // Every failing-metric badge renders its metric_id.
+            for (const id of metricIds) {
+              expect(within(row).getByText(id)).toBeInTheDocument();
+            }
+
+            // The seen-count badge renders "<count>×".
+            expect(within(row).getByText(`${seenCount}\u00D7`)).toBeInTheDocument();
+          } finally {
+            cleanup();
+          }
+        }
+      ),
+      { numRuns: 8, endOnFailure: true }
+    );
+  }, 60000);
+});

frontend/src/utils/__tests__/resolutionDate.property.test.js

@@ -0,0 +1,300 @@
+/**
+ * Property-Based Tests: Resolution-date helper
+ *
+ * Feature: compliance-metric-estimated-resolution-date
+ *
+ * Exercises the pure helper `formatResolutionDate(raw)` from
+ * `frontend/src/utils/resolutionDate.js`, which classifies a raw per-metric
+ * `resolution_date` value into a discriminated union:
+ *   { state: 'set', value } | { state: 'none' } | { state: 'invalid' }
+ *
+ * Library: fast-check (v4) with Jest (react-scripts test). Generators are built
+ * from fast-check arbitraries only — none are hand-rolled. Each property runs a
+ * minimum of 100 iterations.
+ *
+ * Validates: Requirements 1.1, 1.3, 1.4, 1.6, 2.1, 2.2, 3.2, 3.3, 4.5
+ */
+
+import * as fc from 'fast-check';
+import { formatResolutionDate } from '../resolutionDate';
+
+const NUM_RUNS = 200;
+const VALID_STATES = ['set', 'none', 'invalid'];
+const SHARED_SENTINEL = 'Multiple values';
+
+// --- Independent oracle (NOT the function under test) ----------------------
+// Used only to filter generated inputs so we never assert the wrong class.
+
+function daysInMonthOracle(year, month) {
+  const isLeap = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+  const lengths = [31, isLeap ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+  return lengths[month - 1];
+}
+
+// True iff `s` is a strict YYYY-MM-DD string that names a real calendar date.
+function isValidCalendarYmd(s) {
+  if (typeof s !== 'string') return false;
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(s)) return false;
+  const year = Number(s.slice(0, 4));
+  const month = Number(s.slice(5, 7));
+  const day = Number(s.slice(8, 10));
+  if (month < 1 || month > 12) return false;
+  if (day < 1 || day > daysInMonthOracle(year, month)) return false;
+  return true;
+}
+
+// True iff `s` is an ISO datetime string whose date prefix is a valid calendar date.
+// e.g. "2026-07-01T00:00:00.000Z" → true (the helper now extracts the date prefix).
+function isIsoDateTimeWithValidDate(s) {
+  if (typeof s !== 'string') return false;
+  if (!/^\d{4}-\d{2}-\d{2}T/.test(s)) return false;
+  return isValidCalendarYmd(s.slice(0, 10));
+}
+
+// --- Shared arbitraries -----------------------------------------------------
+
+// Four-digit zero-padded year string (0000–9999) — always matches \d{4}.
+const year4Arb = fc.integer({ min: 0, max: 9999 }).map(y => String(y).padStart(4, '0'));
+
+// Valid calendar dates spanning years, all months, month-length boundaries
+// (28/29/30/31), and leap days. The `dim` boundary value guarantees the true
+// last day of each month is exercised, including Feb 29 in leap years.
+const validDateStringArb = year4Arb.chain(y =>
+  fc.integer({ min: 1, max: 12 }).chain(m => {
+    const dim = daysInMonthOracle(Number(y), m);
+    const dayArb = fc.oneof(
+      fc.constant(1),
+      fc.constant(dim),
+      fc.integer({ min: 1, max: dim })
+    );
+    return dayArb.map(
+      d => `${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`
+    );
+  })
+);
+
+// null / undefined / empty / whitespace-only (spaces, tabs, newlines).
+const whitespaceChar = fc.constantFrom(' ', '\t', '\n');
+const whitespaceStringArb = fc
+  .array(whitespaceChar, { minLength: 1, maxLength: 20 })
+  .map(chars => chars.join(''));
+const absentArb = fc.oneof(
+  fc.constantFrom(null, undefined, ''),
+  whitespaceStringArb
+);
+
+// Non-empty, non-whitespace-only strings that are NOT valid YYYY-MM-DD dates.
+// Built from several invalid-by-construction families, then defensively
+// filtered against the oracle to drop any accidentally-valid value.
+const twoDigitArb = fc.integer({ min: 0, max: 99 }).map(n => String(n).padStart(2, '0'));
+const nonLeapYear4Arb = fc
+  .integer({ min: 0, max: 9999 })
+  .filter(y => !((y % 4 === 0 && y % 100 !== 0) || y % 400 === 0))
+  .map(y => String(y).padStart(4, '0'));
+
+// Valid shape but month out of range (00 or 13–99).
+const badMonthArb = fc
+  .tuple(
+    year4Arb,
+    fc.oneof(fc.constant('00'), fc.integer({ min: 13, max: 99 }).map(n => String(n).padStart(2, '0'))),
+    fc.integer({ min: 1, max: 28 }).map(n => String(n).padStart(2, '0'))
+  )
+  .map(([y, m, d]) => `${y}-${m}-${d}`);
+
+// Valid shape but day out of range (00 or 32–99).
+const badDayArb = fc
+  .tuple(
+    year4Arb,
+    fc.integer({ min: 1, max: 12 }).map(n => String(n).padStart(2, '0')),
+    fc.oneof(fc.constant('00'), fc.integer({ min: 32, max: 99 }).map(n => String(n).padStart(2, '0')))
+  )
+  .map(([y, m, d]) => `${y}-${m}-${d}`);
+
+// Valid shape but impossible calendar day (Feb 30/31, 31 in 30-day months,
+// Feb 29 in a non-leap year).
+const impossibleDayArb = fc.oneof(
+  fc.tuple(year4Arb, fc.constant('02'), fc.constantFrom('30', '31')).map(([y, m, d]) => `${y}-${m}-${d}`),
+  fc.tuple(year4Arb, fc.constantFrom('04', '06', '09', '11'), fc.constant('31')).map(([y, m, d]) => `${y}-${m}-${d}`),
+  nonLeapYear4Arb.map(y => `${y}-02-29`)
+);
+
+// Wrong shapes (not matching ^\d{4}-\d{2}-\d{2}$).
+const wrongShapeArb = fc.oneof(
+  fc.constantFrom(
+    '2026-7-1',
+    '2026-7-01',
+    '2026-07-1',
+    '07/01/2026',
+    '2026/07/01',
+    '20260701',
+    '2026-07',
+    '2026-07-01T00:00:00',
+    '2026-07-01 ', // trailing handled by trim, still wrong below
+    'not-a-date',
+    'July 1 2026'
+  ),
+  fc.string({ minLength: 1, maxLength: 30 })
+);
+
+const invalidStringArb = fc
+  .oneof(wrongShapeArb, badMonthArb, badDayArb, impossibleDayArb, twoDigitArb)
+  .filter(s => typeof s === 'string' && s.trim() !== '' && !isValidCalendarYmd(s.trim()) && !isIsoDateTimeWithValidDate(s.trim()));
+
+// Any input category (used for totality / independence properties).
+const anyInputArb = fc.oneof(
+  validDateStringArb,
+  absentArb,
+  invalidStringArb
+);
+
+// --- Property 1 -------------------------------------------------------------
+
+// Feature: compliance-metric-estimated-resolution-date, Property 1: Valid calendar dates classify as "set" and format as YYYY-MM-DD
+describe('Property 1: Valid calendar dates classify as "set" and format as YYYY-MM-DD', () => {
+  /**
+   * **Validates: Requirements 1.1, 1.4**
+   *
+   * For any valid calendar date in YYYY-MM-DD form, formatResolutionDate
+   * returns { state: 'set', value } where value matches ^\d{4}-\d{2}-\d{2}$
+   * and equals the canonical normalized form (the input itself).
+   */
+  test('valid calendar dates are classified set and normalized to YYYY-MM-DD', () => {
+    fc.assert(
+      fc.property(validDateStringArb, dateStr => {
+        const result = formatResolutionDate(dateStr);
+        expect(result.state).toBe('set');
+        expect(result.value).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+        expect(result.value).toBe(dateStr);
+      }),
+      { numRuns: NUM_RUNS }
+    );
+  });
+});
+
+// --- Property 2 -------------------------------------------------------------
+
+// Feature: compliance-metric-estimated-resolution-date, Property 2: Absent values classify as "none"
+describe('Property 2: Absent values classify as "none"', () => {
+  /**
+   * **Validates: Requirements 2.1, 4.5**
+   *
+   * For any input that is null, undefined, the empty string, or a string
+   * composed entirely of whitespace, formatResolutionDate returns
+   * { state: 'none' }.
+   */
+  test('null, undefined, empty, and whitespace-only inputs classify as none', () => {
+    fc.assert(
+      fc.property(absentArb, raw => {
+        const result = formatResolutionDate(raw);
+        expect(result.state).toBe('none');
+      }),
+      { numRuns: NUM_RUNS }
+    );
+  });
+});
+
+// --- Property 3 -------------------------------------------------------------
+
+// Feature: compliance-metric-estimated-resolution-date, Property 3: Non-empty non-calendar-date values classify as "invalid"
+describe('Property 3: Non-empty non-calendar-date values classify as "invalid"', () => {
+  /**
+   * **Validates: Requirements 1.6**
+   *
+   * For any non-empty, non-whitespace-only string that is not a valid
+   * YYYY-MM-DD calendar date — wrong shapes, out-of-range months/days,
+   * impossible days such as 2026-02-30, and arbitrary text —
+   * formatResolutionDate returns { state: 'invalid' }.
+   */
+  test('non-empty non-calendar-date strings classify as invalid', () => {
+    fc.assert(
+      fc.property(invalidStringArb, raw => {
+        const result = formatResolutionDate(raw);
+        expect(result.state).toBe('invalid');
+      }),
+      { numRuns: NUM_RUNS }
+    );
+  });
+});
+
+// --- Property 4 -------------------------------------------------------------
+
+// Feature: compliance-metric-estimated-resolution-date, Property 4: Classification is total over any metric list
+describe('Property 4: Classification is total over any metric list', () => {
+  /**
+   * **Validates: Requirements 2.2**
+   *
+   * For any array of resolution_date values drawn from all categories,
+   * formatResolutionDate never throws, every result's state is one of
+   * { 'set', 'none', 'invalid' }, and the number of classified results
+   * equals the number of inputs.
+   */
+  test('classification is total: no throw, valid state, one result per input', () => {
+    fc.assert(
+      fc.property(fc.array(anyInputArb, { maxLength: 30 }), inputs => {
+        const results = inputs.map(raw => formatResolutionDate(raw));
+        expect(results).toHaveLength(inputs.length);
+        results.forEach(result => {
+          expect(VALID_STATES).toContain(result.state);
+        });
+      }),
+      { numRuns: NUM_RUNS }
+    );
+  });
+});
+
+// --- Property 5 -------------------------------------------------------------
+
+// Metric-like object with an independently chosen resolution_date.
+const metricArb = fc.record({
+  metric_id: fc.string({ minLength: 1, maxLength: 8 }),
+  resolution_date: anyInputArb,
+});
+
+// General metric arrays plus arrays forced to contain two differing dates.
+const differingMetricsArb = fc
+  .tuple(validDateStringArb, validDateStringArb)
+  .filter(([a, b]) => a !== b)
+  .chain(([a, b]) =>
+    fc.array(metricArb, { maxLength: 5 }).map(rest => [
+      { metric_id: 'm-a', resolution_date: a },
+      { metric_id: 'm-b', resolution_date: b },
+      ...rest,
+    ])
+  );
+const metricsArrayArb = fc.oneof(
+  fc.array(metricArb, { maxLength: 30 }),
+  differingMetricsArb
+);
+
+// Feature: compliance-metric-estimated-resolution-date, Property 5: Each metric's display derives only from its own field (no collapsing)
+describe('Property 5: Each metric\'s display derives only from its own field (no collapsing)', () => {
+  /**
+   * **Validates: Requirements 1.3, 3.2, 3.3**
+   *
+   * For any array of metrics — including arrays where metrics carry different
+   * resolution_date values — the derived display for each metric equals
+   * formatResolutionDate applied to that same metric's own field in isolation,
+   * independent of every sibling, and no result collapses to a shared
+   * "Multiple values" sentinel.
+   */
+  test('each metric maps to its own field with no shared/collapsed value', () => {
+    fc.assert(
+      fc.property(metricsArrayArb, metrics => {
+        const displayed = metrics.map(m => formatResolutionDate(m.resolution_date));
+        expect(displayed).toHaveLength(metrics.length);
+
+        metrics.forEach((metric, index) => {
+          // Computed in isolation from this metric's own field only.
+          const isolated = formatResolutionDate(metric.resolution_date);
+          expect(displayed[index]).toEqual(isolated);
+
+          // No collapsing to a shared "Multiple values" sentinel.
+          expect(displayed[index].state).not.toBe(SHARED_SENTINEL);
+          expect(displayed[index].value).not.toBe(SHARED_SENTINEL);
+          expect(VALID_STATES).toContain(displayed[index].state);
+        });
+      }),
+      { numRuns: NUM_RUNS }
+    );
+  });
+});

frontend/src/utils/__tests__/resolutionDate.test.js

@@ -0,0 +1,95 @@
+/**
+ * Example and edge-case unit tests for the resolution-date helper.
+ *
+ * Spec: .kiro/specs/compliance-metric-estimated-resolution-date
+ * Task: 1.7 — Example and edge-case unit tests for the helper
+ * Requirements: 1.1, 1.4, 1.6, 2.1
+ *
+ * These concrete fixtures anchor the contract of `formatResolutionDate` and
+ * double as regression cases. The universal behavior is covered separately by
+ * the property-based tests in `resolutionDate.property.test.js`.
+ */
+
+import {
+  formatResolutionDate,
+  RESOLUTION_DATE_LABEL,
+  NO_DATE_PLACEHOLDER,
+  INVALID_DATE_PLACEHOLDER,
+} from '../resolutionDate';
+
+describe('formatResolutionDate', () => {
+  describe('set — valid calendar dates (Requirements 1.1, 1.4)', () => {
+    it("classifies '2026-07-01' as set with the normalized YYYY-MM-DD value", () => {
+      expect(formatResolutionDate('2026-07-01')).toEqual({
+        state: 'set',
+        value: '2026-07-01',
+      });
+    });
+
+    it("classifies the leap day '2024-02-29' as set (2024 is a leap year)", () => {
+      expect(formatResolutionDate('2024-02-29')).toEqual({
+        state: 'set',
+        value: '2024-02-29',
+      });
+    });
+
+    it("classifies an ISO datetime '2026-07-03T00:00:00.000Z' as set with the date prefix", () => {
+      expect(formatResolutionDate('2026-07-03T00:00:00.000Z')).toEqual({
+        state: 'set',
+        value: '2026-07-03',
+      });
+    });
+  });
+
+  describe('invalid — present but not a valid calendar date (Requirement 1.6)', () => {
+    it("classifies '2026-7-1' as invalid (components not zero-padded)", () => {
+      expect(formatResolutionDate('2026-7-1')).toEqual({ state: 'invalid' });
+    });
+
+    it("classifies '07/01/2026' as invalid (wrong shape / separators)", () => {
+      expect(formatResolutionDate('07/01/2026')).toEqual({ state: 'invalid' });
+    });
+
+    it("classifies '2023-02-29' as invalid (2023 is not a leap year)", () => {
+      expect(formatResolutionDate('2023-02-29')).toEqual({ state: 'invalid' });
+    });
+
+    it("classifies '2026-13-01' as invalid (month out of range)", () => {
+      expect(formatResolutionDate('2026-13-01')).toEqual({ state: 'invalid' });
+    });
+
+    it("classifies '2026-00-10' as invalid (month below range)", () => {
+      expect(formatResolutionDate('2026-00-10')).toEqual({ state: 'invalid' });
+    });
+
+    it("classifies '2026-01-32' as invalid (day above month length)", () => {
+      expect(formatResolutionDate('2026-01-32')).toEqual({ state: 'invalid' });
+    });
+  });
+
+  describe('none — absent values (Requirements 2.1)', () => {
+    it('classifies whitespace-only input as none', () => {
+      expect(formatResolutionDate('  ')).toEqual({ state: 'none' });
+    });
+
+    it('classifies null as none', () => {
+      expect(formatResolutionDate(null)).toEqual({ state: 'none' });
+    });
+
+    it('classifies undefined as none', () => {
+      expect(formatResolutionDate(undefined)).toEqual({ state: 'none' });
+    });
+
+    it('classifies the empty string as none', () => {
+      expect(formatResolutionDate('')).toEqual({ state: 'none' });
+    });
+  });
+
+  describe('display constants', () => {
+    it('exposes the expected label and placeholder strings', () => {
+      expect(RESOLUTION_DATE_LABEL).toBe('Est. Resolution');
+      expect(NO_DATE_PLACEHOLDER).toBe('not set');
+      expect(INVALID_DATE_PLACEHOLDER).toBe('invalid date');
+    });
+  });
+});

frontend/src/utils/resolutionDate.js

@@ -0,0 +1,92 @@
+/**
+ * Resolution-date helper — classifies and formats a raw per-metric
+ * `resolution_date` value for read-only display in the asset sidebar.
+ *
+ * Spec: .kiro/specs/compliance-metric-estimated-resolution-date
+ * Requirements: 1.1, 1.4, 1.6, 2.1
+ *
+ * Pure and deterministic: the result depends only on `raw`. It does not read
+ * the system clock, timezone, or locale. Validation is strict YYYY-MM-DD with
+ * a real-calendar-date check (correct month lengths and leap years), which
+ * matches how the value is produced by the <input type="date"> editor.
+ */
+
+// Display constants (single source of truth for component + tests)
+export const RESOLUTION_DATE_LABEL = 'Est. Resolution';
+export const NO_DATE_PLACEHOLDER = 'not set';
+export const INVALID_DATE_PLACEHOLDER = 'invalid date';
+
+// Strict YYYY-MM-DD shape: four-digit year, two-digit month, two-digit day.
+const YMD_SHAPE = /^\d{4}-\d{2}-\d{2}$/;
+
+/**
+ * Returns the number of days in the given month for the given year,
+ * accounting for leap years. `month` is 1-based (1 = January).
+ *
+ * @param {number} year
+ * @param {number} month - 1-based month (1–12)
+ * @returns {number} days in that month
+ */
+function daysInMonth(year, month) {
+  // Leap year: divisible by 4, except centuries not divisible by 400.
+  const isLeap = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+  const lengths = [31, isLeap ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+  return lengths[month - 1];
+}
+
+/**
+ * Classify and format a raw per-metric resolution_date value for display.
+ *
+ * @param {string|null|undefined} raw - the metric's resolution_date field
+ * @returns {{ state: 'set', value: string } | { state: 'none' } | { state: 'invalid' }}
+ *   - { state: 'set', value }  the value is a valid calendar date; `value` is YYYY-MM-DD
+ *   - { state: 'none' }        the value is null, undefined, empty, or whitespace-only
+ *   - { state: 'invalid' }     the value is non-empty but not a valid calendar date
+ */
+export function formatResolutionDate(raw) {
+  // Null/undefined → no date set.
+  if (raw === null || raw === undefined) {
+    return { state: 'none' };
+  }
+
+  // Anything that is not a string is treated as not-a-valid-date once it is
+  // non-empty; coerce defensively so the helper never throws on bad input.
+  if (typeof raw !== 'string') {
+    return { state: 'invalid' };
+  }
+
+  const trimmed = raw.trim();
+
+  // Empty or whitespace-only → no date set.
+  if (trimmed === '') {
+    return { state: 'none' };
+  }
+
+  // Must match the strict YYYY-MM-DD shape.
+  // Also accept ISO datetime strings (e.g. "2026-07-03T00:00:00.000Z") by
+  // extracting the date prefix — the pg driver returns DATE columns this way.
+  let candidate = trimmed;
+  if (!YMD_SHAPE.test(candidate) && /^\d{4}-\d{2}-\d{2}T/.test(candidate)) {
+    candidate = candidate.slice(0, 10);
+  }
+  if (!YMD_SHAPE.test(candidate)) {
+    return { state: 'invalid' };
+  }
+
+  // Shape is correct; verify it is a real calendar date.
+  const year = Number(candidate.slice(0, 4));
+  const month = Number(candidate.slice(5, 7));
+  const day = Number(candidate.slice(8, 10));
+
+  if (month < 1 || month > 12) {
+    return { state: 'invalid' };
+  }
+
+  if (day < 1 || day > daysInMonth(year, month)) {
+    return { state: 'invalid' };
+  }
+
+  // Valid calendar date; the candidate value is the canonical
+  // zero-padded YYYY-MM-DD form.
+  return { state: 'set', value: candidate };
+}