/
Claude finished the response

I'm Jamie Viramontes, CEO of Konnect (HR Konnect LLC). This project is for building the Phase 2 remediation workspace for a CHLA (Children's Hospital Los Angeles) engagement. Context follows. ## Konnect background Konnect is an HR advisory and technology firm based in Irvine, CA. Products: Konnect

pasted

sorry i stopped you because that comment was meant for another. i want you to see how the assessment tool was built to i am going to share the prompt from the other chat. please review and ask me clarifying quesitons if any before executing.


Reconciled project scope conflicts and identified clarifying questions needed
Reconciled project scope conflicts and identified clarifying questions needed
Got it, that reframes this chat completely: this is the Phase 2 remediation workspace build, not the team build. I've read the brief against the Diagnostic Report, the SOW draft, and the pricing model, and I have answers to some of your six design questions already, plus a handful of clarifications I need before we scope the build. No code yet.

What I can already resolve from the project knowledge

Findings-to-workstream mapping (your question 1). You don't need to invent this mapping; it already exists. The pricing model's Sizing sheet is a canonical 45-item workstream table (41 remediation items keyed to report subsections, plus IPM-01 through IPM-04), each with Item ID, subsection, topic, phase/horizon, complexity, Konnect role, and sized days. The SOW's Schedule 1 references exactly this table. That should be the seed data model. On top of it, the report gives a natural three-tier grouping: Stream A (CHLA's 12 pending backlog items, CHLA executes and Konnect verifies), Stream B (the 41 engagement findings items), Stream C (forward posture components). Findings Register entries from Phase 1 link to items via subsection ID.

Reporting cadence (question 5). Also already contracted, so the tool should generate these four artifacts rather than let us choose a cadence: weekly operational coordination notes, monthly written GC report, monthly Chair briefing (with GC concurrence flag), quarterly standing AC report, plus ad hoc escalation reports on defined thresholds. The Day 1 readiness doc even fixes first occurrences (Day 30, Day 45, end of Q1), which the tool could track as its own milestones.

Countdown (question 4). Both. November 30, 2026 as a global fixed close, plus per-item slack computed from target date and dependencies, since Stream A targets cluster June to October 2026 with almost no buffer. Risk-of-slip is where the AI leverage lives.

Clarifying questions before I propose the structure

Terminology collision. The brief calls the whole IPM engagement "Phase 2," but the signed SOW defines Phases 1 through 4 inside the engagement (Stabilize, Build, Modernize, Sustain). If the tool ever renders anything Board-facing, "Phase 2" meaning two different things will bite us. I'd propose the tool use the SOW phase names plus Streams A/B/C, and drop "Phase 2" as a label entirely. OK?
Transactional audit date. The brief says "preparation for the January 2027 transactional audit," but the report's adopted Pillar 3 recommendation accelerates it to October or November 2026, with rescheduling direction and outside counsel scope confirmation due within 45 days of mandate. Which date does the tool build against? This changes the timeline UI materially.
Scope of tracked items. Confirm the tool tracks all three: the 12 pending Stream A items (with closure verification evidence, since "audit-defensible standard" verification is Konnect's core deliverable), the 41 Stream B items, and Stream C components. Or do you want Stream A only referenced, not managed?
Repository: SharePoint vs ShareFile. Phase 1 integrated SharePoint via Graph API. The SOW says engagement records of record live in the CHLA-designated ShareFile folder controlled by the GC. Does the tool need a ShareFile integration, keep SharePoint (Konnect side), or just store links to the repository without pulling documents? This also matters for privilege: keeping documents in the GC-designated repository and storing only references in KV is the cleanest posture.
Users and access. Allowlist scope: Konnect delivery team only, or also CHLA-side users (Grace Oh's office)? If CHLA users get access, the workspace itself arguably becomes a deliverable communication under the privileged marking protocol, and PSA Exhibit B/C requirements apply to the Cloudflare stack as a system processing CHLA data. Also, the SOW requires MFA for remote access; Cloudflare Access email OTP may or may not satisfy that, worth a deliberate call.
Phase 1 codebase. Your rules say surgical edits, never rebuild. Best path is forking the Phase 1 index.html and Worker as the starting point. Can you paste or upload both files (and the KV schema if documented)? If not, I'll build fresh on the same architecture, but the fork preserves everything that already worked.
Who updates status. Is this Konnect-internal (Delivery Lead and coordinator maintain it, reports flow out) or do CHLA operational leads update their own items? Changes the RACI fields and the auth model.
Answer these and I'll come back with the workstream schema, the primary views (my instinct: executive dashboard, stream/workstream detail, escalation log, and a report generator with the four contracted formats), and a phased build plan.

you have access to the final report, etc; the other chat didn't. what you see in the final report should supersed.
your knowledge from the diagnostic report overrules the brief i pasted
deliverables should be aligned with what i laid out
CHLA shared documents with Konnect via ShareFile. we then pulled them and placed on a secured Konnect SharePoint location. The tool then read the sharepoint files for the synthesis work.
hm - i think Konnect side for now with export (report) capability. i don't know though - i may need your recommendation on how to best manage this project at the Accenture level.
please clarify. i'm not following
how would Accenture level and best practice handle?
Show more

Synthesized clarifications into comprehensive remediation workspace design
Synthesized clarifications into comprehensive remediation workspace design
Understood on all seven. The team-build brief is useful context here too: it tells me the tool's daily users from roughly October onward are the Delivery Lead and Program Coordinator, not you, and that the reporting outputs have contractual first-occurrence deadlines (Day 10 interim governance protocol, Day 30 first GC report and Chair briefing, Day 45 first Stream A progress report, end of Q1 first quarterly AC report). I'll design for that. Before the schema, three things: my clarification on question 6, my recommendation on 5 and 7, and then the proposed structure.

Question 6 clarified: what I meant by "fork the Phase 1 codebase"

The assessment tool is essentially two files: the index.html in the GitHub repo behind assessment.hrkonnect.com, and the Worker script running at konnect-assessment-api. Rather than writing the remediation tool from scratch, the right move under your "surgical edits, never rebuild" rule is to start from copies of those two files and modify them: the auth, the SharePoint Graph integration, the Claude proxy, the KV patterns, the backup endpoint, and the styling all carry over unchanged, and we swap the assessment data model for the remediation one. To do that I need the actual files. Two ways to get them to me: in the GitHub web UI, open the repo, click index.html, hit the Raw button, save and upload it here; for the Worker, Cloudflare dashboard, Workers and Pages, konnect-assessment-api, Edit code, copy the script into a text file and upload. Deployment will be a new repo plus new Pages project (remediation.hrkonnect.com), a new Worker, and a new KV namespace, so Phase 1 stays frozen and untouched. If you'd rather not pull the files, I can build fresh on the same architecture, but the fork is faster and lower risk.

Questions 5 and 7: how a top-tier PMO would run access and status, and my recommendation

Large-firm program management offices almost never give the client write access to the delivery tool. The standard model is single source of truth, single scribe: the Program Coordinator owns all data entry, the Delivery Lead validates weekly, and client-side status is collected through the weekly coordination meetings with HR, Finance, and Legal leads using a standard intake format, then entered and validated internally. The client experiences the PMO through controlled outputs on a fixed cadence, not through a portal. Self-reported client status is treated as a claim, not a fact, until evidence is attached; that distinction is literally the thesis of your Diagnostic Report (project-plan closure versus audit-defensible closure), so the tool should enforce it.

Here that model isn't just best practice, it's close to mandatory. Giving CHLA users access would make the tool a system storing and processing CHLA data under the PSA's Exhibit B and C, triggering security requirements against your Cloudflare stack, and it widens the privilege surface beyond the GC-controlled distribution. So: Konnect-internal tool, allowlist limited to screened personnel (exclusion screening and background check complete before anyone touches the SharePoint-connected workspace, per the SOW), and everything client-facing is a generated export marked PRIVILEGED AND CONFIDENTIAL COMMUNICATION, addressed to Grace Oh's attention, filed to the GC-designated ShareFile folder as the record of record. The tool itself stays Konnect Vendor Background IP. One upgrade I'd recommend: since your documents already live in Microsoft 365, put Cloudflare Access in front of the new tool using your Entra ID (Azure AD) login instead of email OTP. That gives you true MFA (satisfying the SOW's remote-access requirement), one identity plane for tool and SharePoint, and instant deprovisioning when a contractor rolls off.

Proposed structure

Data model. The findings-to-workstream mapping already exists and shouldn't be reinvented: the Sizing sheet's 45-item table (41 remediation items keyed to report subsections plus IPM-01 through IPM-04) is Schedule 1 to the SOW and becomes the seed data. I'll generate the seed JSON from it directly. Around it, three tiers:

Stream B: the 45 items, each carrying item ID, subsection linkage back to the Phase 1 finding, topic, SOW phase, Konnect role (Lead, Partner, Advise), sized days, Konnect owner, CHLA point of contact, RACI, target and actual dates, milestones, blockers, dependencies, evidence references, and status.
Stream A: the 12 pending CHLA backlog items from Section 9, same schema but with Konnect role fixed to Verify, since CHLA executes and Konnect verifies closure.
Stream C: the six forward-posture components from Section 11, tracked as build items with the November 2026 operational deadline for components 1 through 3.
The status workflow is the differentiator: Not started, In progress, Delivered (project-plan complete), Verified (audit-defensible, evidence attached and reviewed), with At Risk and Blocked as overlay flags. Nothing reaches Verified without evidence documents linked from SharePoint. The transactional audit acceleration is its own small cluster (reschedule direction and outside counsel scope confirmation, both 45-day items, then findings integration), reflecting the report's adopted October or November 2026 target rather than the January 2027 date.

Primary views, in priority order. One, executive dashboard: countdown to November 30, 2026, RAG rollup by stream and phase, Delivered-versus-Verified counts (that gap is your headline metric for the Committee), escalation queue, and the contractual reporting deadlines as tracked milestones. Two, workstream detail. Three, a timeline view showing target-date clustering and per-item slack, since Stream A targets bunch in June through October 2026 with almost no buffer. Four, escalation and risk register with the defined thresholds from the SOW. Five, the report generator: weekly coordination notes, monthly GC report, monthly Chair briefing with a GC-concurrence checkbox, quarterly AC report, and ad hoc escalation memos, each with Phase 1's per-section AI generation and lock-to-preserve editing, exporting with the privileged marking baked into the template.

AI features with the most remediation leverage. Ranked: (1) evidence sufficiency review, where Claude reads the attached evidence against the original finding and the closure standard and returns a gap list and a verify-or-reject recommendation, which operationalizes the audit-defensible standard and is the feature no off-the-shelf PM tool has; (2) risk-of-slip synthesis across statuses, dependencies, and dates, producing a weekly slip forecast against the close; (3) report drafting from live workstream data; (4) escalation memo drafting when a threshold trips; (5) dependency reasoning that flags where Stream B preconditions are blocking Stream A closure, which is the interdependency the report says killed the prior five attempts.

Build plan. Phase A: seed data and schema (I generate the JSON from the Sizing sheet and report sections 9 and 11). Phase B: core UI on the forked frontend, dashboard, detail, status workflow, countdown. Phase C: report generator with exports. Phase D: AI layer. Phase E: hardening, Entra ID access, SharePoint filename-routing conventions keyed to item IDs, backup endpoint.

If this structure works, upload the two Phase 1 files and I'll start with Phase A and B. If you can't pull the files easily, say so and I'll build fresh on the same architecture.

which two phase files are you referring to?


Disambiguated two specific files for clarification
Disambiguated two specific files for clarification
The two source files of the Phase 1 assessment tool (the one at assessment.hrkonnect.com), not documents:

index.html: the entire frontend of the assessment tool. It lives in the GitHub repo that Cloudflare Pages deploys from. To get it: GitHub web UI, open the repo, click index.html, click the Raw button, then save that page (or copy all the text into a .txt file) and upload it here.
The Worker script: the backend running at konnect-assessment-api.hrkonnect.com that proxies the Anthropic API, talks to SharePoint via Graph, and reads/writes KV. To get it: Cloudflare dashboard, Workers & Pages, select konnect-assessment-api, Edit code, select all, copy into a .txt file, upload here.
Those two files are the whole Phase 1 codebase. With them I fork the working auth, SharePoint integration, Claude proxy, KV patterns, and styling, and swap in the remediation data model, which is much faster and safer than rebuilding. Without them I can still build fresh on the same architecture; you'd just lose the guarantee that everything behaves exactly like the tool you already know works.


index-4.html
html


var __defProp = Object.defineProperty; var __name = (target, value) => __defProp(target, "name", { value, configurable: true }); // ../../.npm/_npx/32026684e21afda6/node_modules/unenv/dist/runtime/_internal/utils.mjs // @__NO_SIDE_EFFECTS__ function createNotImplementedError(name) { return new Er

pasted


Assessed file dimensions to optimize reading strategy
Assessed file dimensions to optimize reading strategy
Both files received. The Worker script is fully in view: I can see the auth pattern (Cloudflare Access header check against an allowlist), the audit-log KV, the Graph token and site/drive resolution, the filename-to-subsection routing, the extraction pipeline (PDF/docx/xlsx/pptx), the Claude proxy with the review and synthesize endpoints, search, and the backup endpoint. That's everything I need on the backend. Now let me read the frontend to map its structure before proposing the surgical fork.


Validated frontend build and script parsing before proceeding
Validated frontend build and script parsing before proceeding
Frontend compiles clean. Checking the plain script blocks, then writing the Worker.


Ran 4 commands, created 2 files, edited a file
Ran 4 commands, created 2 files, edited a file
Build complete. Three files above: the frontend, the Worker, and the deployment guide.

What got forked and what got kept. The head, config, storage adapter, icon factory, idle timeout, and confidentiality modal are your Phase 1 code verbatim, with only the title, API base, and session key changed. The data model and app body are new. JSX compiles clean under Babel, both plain script blocks pass syntax check, the Worker passes syntax check, and the item-ID routing parser passes 18 filename test cases plus folder routing.

Seed data reconciles to contract. All 45 Stream B items verified against the Sizing sheet: 135 + 570 + 138 + 96 = 939 days. Stream A carries the 12 Section 9 items with CHLA's own targets; Stream C carries the 6 Section 11 components with SC-1 through SC-3 flagged as must-be-operational at close.

The workflow enforces your closure standard. Verified is gated: no evidence attached means the button refuses and says so. Evidence attached but unreviewed produces a warning that the Delivery Lead must have manually validated. The dashboard's second stat is the Delivered-not-Verified gap, labeled as the gap that failed five prior attempts.

Three things to flag:

Tanisha is off the allowlist. Phase 1's Worker included her; the new one is jamie@ and jessica@ only, with commented stubs for the Delivery Lead and Coordinator. New users must be added in two places: the Worker's ALLOWED_USERS and the Cloudflare Access policy.
SA-05 and SA-06 will show overdue on first load. Their CHLA targets (July 1 and June 1) are already past. That's the tool working, not broken.
The execution date setting matters. All contracted deadlines (Day 10 protocol, Day 30 GC report, Day 45 Stream A report and audit reschedule direction, Q1 AC report) compute from it. Default is 2026-09-01; set the real date in Settings the day the SOW signs.
DEPLOY.md walks the whole thing through GitHub web UI and the Cloudflare dashboard: repo, Pages project on remediation.hrkonnect.com, Worker with the two new KV namespaces, secrets (recommend a fresh Anthropic key so Phase 1 and Phase 2 spend separate), the new SharePoint evidence folder, and the Access app with the Entra ID path for the SOW MFA requirement.


Index
Code · HTML 

Konnect remediation api
JS 

Deploy
Document · MD 






Claude is AI and can make mistakes. Please double-check responses.


Index · HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Konnect Remediation Workspace</title>
  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><polygon points=%2250,8 88,30 88,70 50,92 12,70 12,30%22 fill=%22%231872B4%22/><polygon points=%2250,22 76,68 24,68%22 fill=%22%23010506%22/></svg>" />
 
  <!-- React + ReactDOM -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
 
  <!-- Babel for in-browser JSX compilation -->
<script src="https://unpkg.com/@babel/standalone@7.23.0/babel.min.js"></script>
 
  <!-- Lucide icons via CDN -->
  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
 
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Newsreader:ital,wght@0,500;0,600;1,500&display=swap');
    html, body, #root {
      margin: 0;
      padding: 0;
      min-height: 100vh;
    }
    body {
      font-family: 'Inter', -apple-system, system-ui, sans-serif;
      color: #010506;
      background: #FAFBFC;
    }
    .boot-loader {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 16px;
    }
    .boot-spinner {
      width: 32px;
      height: 32px;
      border: 3px solid #E5E7EB;
      border-top-color: #1872B4;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    .boot-text {
      font-size: 13px;
      color: #6B7280;
      letter-spacing: 0.04em;
    }
 
    /* ---------- Confidentiality Footer ---------- */
    .konnect-confidentiality-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #010506;
      color: #9CA3AF;
      padding: 6px 16px;
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-align: center;
      z-index: 900;
      border-top: 1px solid #1872B4;
      font-family: 'Inter', -apple-system, system-ui, sans-serif;
    }
    .konnect-confidentiality-footer strong {
      color: #FFFFFF;
      font-weight: 700;
    }
    .konnect-confidentiality-footer .footer-dot {
      color: #1872B4;
      margin: 0 8px;
    }
    body {
      padding-bottom: 32px; /* room for fixed footer */
    }
 
    /* ---------- Idle Warning Banner ---------- */
    #idle-warning {
      position: fixed;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2000;
      animation: fadeIn 0.3s ease;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translate(-50%, -8px); }
      to { opacity: 1; transform: translate(-50%, 0); }
    }
    .idle-warning-inner {
      display: flex;
      align-items: center;
      gap: 16px;
      background: #B91C1C;
      color: #FFFFFF;
      padding: 10px 16px;
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(185, 28, 28, 0.4);
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      font-weight: 500;
    }
    .idle-warning-text { white-space: nowrap; }
    .idle-countdown { font-weight: 700; font-variant-numeric: tabular-nums; }
    .idle-warning-btn {
      background: #FFFFFF;
      color: #B91C1C;
      border: none;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
    }
 
    /* ---------- Boot Acknowledgment Modal ---------- */
    #phi-ack-overlay {
      position: fixed;
      inset: 0;
      background: rgba(1, 5, 6, 0.85);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      backdrop-filter: blur(4px);
    }
    .phi-ack-modal {
      background: #FFFFFF;
      max-width: 560px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      border-radius: 10px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
      font-family: 'Inter', -apple-system, system-ui, sans-serif;
    }
    .phi-ack-header {
      padding: 28px 32px 20px;
      border-bottom: 3px solid #1872B4;
    }
    .phi-ack-eyebrow {
      font-size: 10px;
      font-weight: 700;
      color: #1872B4;
      letter-spacing: 0.18em;
      margin-bottom: 8px;
    }
    .phi-ack-title {
      font-family: 'Newsreader', serif;
      font-size: 26px;
      font-weight: 600;
      color: #010506;
      margin: 0;
      line-height: 1.2;
    }
    .phi-ack-body {
      padding: 24px 32px;
      font-size: 14px;
      color: #374151;
      line-height: 1.6;
    }
    .phi-ack-body p {
      margin: 0 0 16px 0;
    }
    .phi-ack-rules {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 8px;
    }
    .phi-ack-rule {
      padding: 12px 14px;
      background: #F4F8FB;
      border-left: 3px solid #1872B4;
      border-radius: 0 6px 6px 0;
      font-size: 13px;
      line-height: 1.5;
    }
    .phi-ack-footer {
      padding: 20px 32px 28px;
      border-top: 1px solid #E5E7EB;
      display: flex;
      justify-content: flex-end;
    }
    .phi-ack-btn {
      padding: 12px 24px;
      background: #1872B4;
      color: #FFFFFF;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: background 0.15s ease;
    }
    .phi-ack-btn:hover {
      background: #0E5688;
    }
  </style>
</head>
<body>
  <div id="root">
    <div class="boot-loader">
      <div class="boot-spinner"></div>
      <div class="boot-text">Loading workspace…</div>
    </div>
  </div>
 
  <script>
    // ===================================================================
    // KONNECT ASSESSMENT — Runtime Configuration
    // ===================================================================
 
    // API base URL — Cloudflare Worker proxying Anthropic API + KV storage.
    // For local testing you can change this to http://localhost:8787
    window.KONNECT_API_BASE = 'https://konnect-remediation-api.hrkonnect.com';
 
    // ===================================================================
    // Storage Adapter — talks to Cloudflare KV via the Worker
    // ===================================================================
    // Matches the API expected by the workspace code:
    //   window.storage.get(key)       → { key, value } | null
    //   window.storage.set(key, val)  → { key, value }
    //   window.storage.delete(key)    → { key, deleted: true }
    //   window.storage.list(prefix)   → { keys: [...] }
    //
    // Notes:
    //   - Values are JSON-stringified before transmission; the Worker stores
    //     them as raw strings in KV.
    //   - get() returns null if key doesn't exist (matches storage API contract).
    //   - All operations are silently retried once on network error.
    //
    window.storage = (function() {
      const base = window.KONNECT_API_BASE;
 
      async function jfetch(url, options) {
        const opts = {
          ...options,
          credentials: 'include',  // CRITICAL: send Cloudflare Access auth cookie
        };
        let lastErr;
        for (let attempt = 0; attempt < 2; attempt++) {
          try {
            const res = await fetch(url, opts);
            if (!res.ok) {
              const text = await res.text();
              throw new Error('HTTP ' + res.status + ': ' + text.slice(0, 200));
            }
            return await res.json();
          } catch (e) {
            lastErr = e;
            if (attempt === 0) await new Promise(r => setTimeout(r, 250));
          }
        }
        throw lastErr;
      }
 
      return {
        async get(key) {
          const url = base + '/api/storage?key=' + encodeURIComponent(key);
          const data = await jfetch(url);
          if (!data.found) return null;
          return { key: data.key, value: data.value };
        },
        async set(key, value) {
          const url = base + '/api/storage';
          // The workspace passes value already JSON.stringify'd; the worker
          // will store it as a raw string. We just pass it through.
          await jfetch(url, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ key, value }),
          });
          return { key, value };
        },
        async delete(key) {
          const url = base + '/api/storage?key=' + encodeURIComponent(key);
          await jfetch(url, { method: 'DELETE' });
          return { key, deleted: true };
        },
        async list(prefix) {
          const url = base + '/api/storage/list?prefix=' + encodeURIComponent(prefix || '');
          const data = await jfetch(url);
          return { keys: data.keys || [] };
        },
      };
    })();
 
    // ===================================================================
    // Lucide Icons — register as globals matching the lucide-react API
    // ===================================================================
    // The workspace code uses lucide-react components like <FileText size={15} />.
    // The lucide UMD bundle exposes raw SVG strings; we wrap each into a
    // React component so the rest of the code works unchanged.
 
    function makeLucideIcon(name) {
      return function LucideIcon(props) {
        const { size = 24, color = 'currentColor', strokeWidth = 2, style, ...rest } = props || {};
        const svgRef = React.useRef(null);
        React.useEffect(() => {
          if (svgRef.current && window.lucide) {
            window.lucide.createIcons({
              icons: { [name]: window.lucide.icons[name] },
              nameAttr: 'data-lucide',
              attrs: { width: size, height: size, stroke: color, 'stroke-width': strokeWidth },
            });
          }
        }, [size, color, strokeWidth]);
 
        // Render an inline SVG directly using lucide's icon data
        const iconData = window.lucide && window.lucide.icons && window.lucide.icons[name];
        if (!iconData) {
          return React.createElement('span', { style: { display: 'inline-block', width: size, height: size, ...style } });
        }
        // iconData is an array of [tagName, attrs, ...children] tuples
        const children = iconData.map(function(node, i) {
          if (!Array.isArray(node)) return null;
          var tag = node[0];
          var attrs = node[1] || {};
          // Convert dashed attrs to React-friendly form
          var reactAttrs = { key: i };
          Object.keys(attrs).forEach(function(k) {
            reactAttrs[k] = attrs[k];
          });
          return React.createElement(tag, reactAttrs);
        });
        return React.createElement('svg', {
          xmlns: 'http://www.w3.org/2000/svg',
          width: size,
          height: size,
          viewBox: '0 0 24 24',
          fill: 'none',
          stroke: color,
          strokeWidth: strokeWidth,
          strokeLinecap: 'round',
          strokeLinejoin: 'round',
          style: style,
          ...rest,
        }, children);
      };
    }
 
    // Pre-register every lucide icon used in the workspace
    [
      'Plus','Search','Filter','FileText','Users','Tag','AlertCircle','CheckCircle2',
      'Clock','Trash2','X','Sparkles','ChevronRight','ChevronDown','Download','Upload',
      'Edit3','Save','Building2','DollarSign','BarChart3','Lightbulb','MessageSquare',
      'FileSearch','Loader2','GitBranch','TrendingUp','TrendingDown','ArrowRight',
      'Layers','RefreshCw','Settings','Eye','EyeOff','Lock','Unlock','RotateCw',
     'FileCheck','Presentation','FileType','ClipboardEdit','Copy','ChevronLeft',
      'Calendar','Flag','AlertTriangle','ShieldCheck','Target','Link2','ListChecks','Timer','Send','CalendarClock'
    ].forEach(function(name) {
      // lucide UMD uses kebab-case in its dictionary
      var kebab = name.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase();
      window[name] = makeLucideIcon(kebab);
    });
  </script>
 
  <!-- ===================================================================
       Security: Idle Timeout & Boot Acknowledgment
       =================================================================== -->
  <script>
    // ----------------------------------------------------------------
    // Idle timeout — auto-reload after 15 min of no activity
    // ----------------------------------------------------------------
    // After 15 minutes idle, the page reloads. Because the reload hits
    // Cloudflare Access, the user's session is re-validated. If their
    // 4-hour Access session has expired, they're prompted to re-auth.
    //
    // A warning banner appears at 14 minutes giving 60 seconds to dismiss.
    // ----------------------------------------------------------------
 
    (function() {
      var IDLE_LIMIT_MS = 15 * 60 * 1000;          // 15 min
      var WARNING_MS = IDLE_LIMIT_MS - 60 * 1000;  // 14 min — show warning
      var lastActivity = Date.now();
      var warningEl = null;
 
      function resetIdleTimer() {
        lastActivity = Date.now();
        hideWarning();
      }
 
      function showWarning(secondsRemaining) {
        if (warningEl) {
          warningEl.querySelector('.idle-countdown').textContent = secondsRemaining;
          return;
        }
        warningEl = document.createElement('div');
        warningEl.id = 'idle-warning';
        warningEl.innerHTML =
          '<div class="idle-warning-inner">' +
            '<div class="idle-warning-text">' +
              'Session will time out in <span class="idle-countdown">' + secondsRemaining + '</span> seconds.' +
            '</div>' +
            '<button class="idle-warning-btn" onclick="window.__resetIdleTimer && window.__resetIdleTimer()">' +
              'Stay signed in' +
            '</button>' +
          '</div>';
        document.body.appendChild(warningEl);
      }
 
      function hideWarning() {
        if (warningEl) {
          warningEl.remove();
          warningEl = null;
        }
      }
 
      window.__resetIdleTimer = resetIdleTimer;
 
      // Reset timer on user activity
      ['mousedown', 'mousemove', 'keydown', 'scroll', 'touchstart', 'click'].forEach(function(evt) {
        document.addEventListener(evt, resetIdleTimer, { passive: true });
      });
 
      // Check every 10 seconds
      setInterval(function() {
        var idle = Date.now() - lastActivity;
        if (idle >= IDLE_LIMIT_MS) {
          // Force a hard reload — Cloudflare Access re-validates session
          window.location.reload();
        } else if (idle >= WARNING_MS) {
          var seconds = Math.ceil((IDLE_LIMIT_MS - idle) / 1000);
          showWarning(seconds);
        }
      }, 10000);
    })();
 
    // ----------------------------------------------------------------
    // Boot Acknowledgment Modal
    // ----------------------------------------------------------------
    // First time a user loads the page in a given browser session, show
    // a one-time-per-session PHI / confidentiality acknowledgment.
    // Acknowledgment is in-memory only (sessionStorage); cleared on tab close.
    // ----------------------------------------------------------------
 
    (function() {
      try {
        if (window.sessionStorage && sessionStorage.getItem('konnect_rem_phi_ack')) {
          return;
        }
      } catch (_) {} // sessionStorage unavailable — show modal anyway
 
      function buildModal() {
        var overlay = document.createElement('div');
        overlay.id = 'phi-ack-overlay';
        overlay.innerHTML =
          '<div class="phi-ack-modal">' +
            '<div class="phi-ack-header">' +
              '<div class="phi-ack-eyebrow">PRIVILEGED & CONFIDENTIAL</div>' +
              '<h2 class="phi-ack-title">Konnect Remediation Workspace</h2>' +
            '</div>' +
            '<div class="phi-ack-body">' +
              '<p><strong>This workspace is for Konnect internal use only.</strong> Data entered is treated as attorney work product, prepared at the direction of counsel, and protected under attorney-client privilege and the attorney work product doctrine to the fullest extent permitted by applicable law.</p>' +
              '<div class="phi-ack-rules">' +
                '<div class="phi-ack-rule"><strong>Do not enter Protected Health Information (PHI).</strong> This workspace is not HIPAA-compliant infrastructure. Use de-identified, aggregated, or non-individually-identifiable employee data only. Patient information is strictly prohibited.</div>' +
                '<div class="phi-ack-rule"><strong>All work product is presumed privileged.</strong> Documents created here are marked "Privileged & Confidential — Prepared at the Direction of Counsel" and flow to the client\'s General Counsel before any internal distribution.</div>' +
                '<div class="phi-ack-rule"><strong>All activity is logged.</strong> Reads, writes, and AI synthesis requests are recorded with timestamp, user, and operation for audit purposes.</div>' +
              '</div>' +
            '</div>' +
            '<div class="phi-ack-footer">' +
              '<button class="phi-ack-btn" id="phi-ack-confirm">I acknowledge and agree</button>' +
            '</div>' +
          '</div>';
        document.body.appendChild(overlay);
        document.getElementById('phi-ack-confirm').addEventListener('click', function() {
          try { sessionStorage.setItem('konnect_rem_phi_ack', '1'); } catch (_) {}
          overlay.remove();
        });
      }
 
      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', buildModal);
      } else {
        buildModal();
      }
    })();
  </script>
 
  <!-- ===================================================================
       Workspace Application
       =================================================================== -->
<script type="text/babel" data-type="module" data-presets="react">
    // React hooks — pulled from the global React object
    const { useState, useEffect, useMemo, useRef } = React;
 
// ============================================================
// DATA SCHEMA
// ============================================================
// Storage keys (Cloudflare KV via Worker):
//   remediation:meta      -> { client, engagementId, consultant, executionDate }
//   item:{id}             -> runtime state for a catalog item (status, owner, dates, milestones, blockers, dependencies, evidence, updates)
//   escalation:{id}       -> escalation record
//   escalations:list      -> array of escalation IDs
//   report:{type}:{id}    -> generated report record
//   reports:list          -> array of report IDs
//   milestone:{id}        -> reporting milestone completion state
//
// The item CATALOG below is the contractual source of truth. It mirrors
// Schedule 1 to the SOW (the Sizing sheet 45-item table), the 12 pending
// Stream A backlog items from Diagnostic Report Section 9, and the 6
// Stream C forward posture components from Section 11. Catalog entries
// are immutable definitions; all mutable state lives in KV item records.
 
const CLOSE_DATE = '2026-11-30';            // Board-directed audit close
const AUDIT_WINDOW = { start: '2026-10-01', end: '2026-11-30' }; // accelerated transactional audit (adopted Pillar 3 path)
 
const PHASES = [
  { id: 'P1', name: 'Phase 1: Stabilize', horizon: 'H1', window: 'Effective date through Nov 30, 2026', days: 135 },
  { id: 'P2', name: 'Phase 2: Build', horizon: 'H2', window: 'Months 3 to 9', days: 570 },
  { id: 'P3', name: 'Phase 3: Modernize', horizon: 'H3', window: 'Months 9 to 24 (extension)', days: 138 },
  { id: 'P4', name: 'Phase 4: Sustain', horizon: 'H4', window: 'Months 18 to 36 (extension)', days: 96 },
];
 
const STREAMS = [
  { id: 'A', name: 'Stream A: CHLA Audit Backlog', short: 'Stream A', color: '#0A4569',
    description: 'CHLA-owned remediation backlog from the January 2021 audit. CHLA executes; Konnect verifies closure at the audit-defensible standard, not the project-plan standard.' },
  { id: 'B', name: 'Stream B: Engagement Findings', short: 'Stream B', color: '#1872B4',
    description: 'The 45 workstream items from Schedule 1 to the SOW (41 remediation items from the Diagnostic Report findings plus IPM program management workstreams IPM-01 through IPM-04). Konnect leads or partners per item.' },
  { id: 'C', name: 'Stream C: Forward Posture', short: 'Stream C', color: '#2A8FD4',
    description: 'The six forward governance posture components from Diagnostic Report Section 11. Components 1 through 3 must be operational at the November 2026 transition.' },
];
 
const ITEM_STATUS = [
  { id: 'not_started', label: 'Not Started', color: '#9CA3AF' },
  { id: 'in_progress', label: 'In Progress', color: '#1872B4' },
  { id: 'delivered',   label: 'Delivered',   color: '#D97706' },  // project-plan complete, evidence not yet verified
  { id: 'verified',    label: 'Verified',    color: '#15803D' },  // audit-defensible: evidence attached and reviewed
];
 
const KONNECT_ROLES = ['Lead', 'Partner', 'Advise', 'Verify'];
const COMPLEXITY = { S: 'Small', M: 'Medium', L: 'Large', XL: 'Extra Large' };
 
// ------------------------------------------------------------
// STREAM B CATALOG: Schedule 1 / Sizing sheet, 45 items, 939 days
// ------------------------------------------------------------
const STREAM_B_CATALOG = [
  // Phase 1 (H1): 10 items, 135 days
  { id: 'I.C.2-05', stream: 'B', phase: 'P1', subsection: 'I.C.2', subsectionName: 'Meal & Rest Period Governance', topic: 'Meal and rest audit cadence formalization', complexity: 'M', role: 'Lead', days: 18, enterpriseAdj: 'Enterprise scope' },
  { id: 'I.C.6-01', stream: 'B', phase: 'P1', subsection: 'I.C.6', subsectionName: 'Final Pay Governance', topic: 'Final pay processing SOP', complexity: 'M', role: 'Lead', days: 14 },
  { id: 'I.C.6-05', stream: 'B', phase: 'P1', subsection: 'I.C.6', subsectionName: 'Final Pay Governance', topic: 'Waiting time penalty tracking log', complexity: 'S', role: 'Lead', days: 8 },
  { id: 'I.D-02', stream: 'B', phase: 'P1', subsection: 'I.D', subsectionName: 'Forward Governance Posture', topic: 'Internal wage and hour audit calendar', complexity: 'S', role: 'Lead', days: 10 },
  { id: 'I.D-05', stream: 'B', phase: 'P1', subsection: 'I.D', subsectionName: 'Forward Governance Posture', topic: 'Corrective action policy enforcement framework', complexity: 'M', role: 'Lead', days: 20, enterpriseAdj: 'Enterprise rollout' },
  { id: 'I.D-08', stream: 'B', phase: 'P1', subsection: 'I.D', subsectionName: 'Forward Governance Posture', topic: 'Consolidated W&H complaint log', complexity: 'M', role: 'Lead', days: 14 },
  { id: 'II.6-01', stream: 'B', phase: 'P1', subsection: 'II.6', subsectionName: 'Quality Assurance', topic: 'HR Quality Assurance audit calendar', complexity: 'S', role: 'Lead', days: 6 },
  { id: 'II.9-10', stream: 'B', phase: 'P1', subsection: 'II.9', subsectionName: 'Investigations', topic: 'Singular W&H complaint log', complexity: 'S', role: 'Lead', days: 5 },
  { id: 'I.A-09', stream: 'B', phase: 'P1', subsection: 'I.A', subsectionName: 'PPSG Governance', topic: 'PPSG centralized risk register (IPM transition)', complexity: 'M', role: 'Lead', days: 15, enterpriseAdj: 'IPM transition scope' },
  { id: 'IPM-01', stream: 'B', phase: 'P1', subsection: 'IPM', subsectionName: 'IPM Program Management', topic: 'Enterprise-scale coordination launch across high-concentration areas', complexity: 'L', role: 'Lead', days: 25, enterpriseAdj: 'IPM parallel workstream' },
  // Phase 2 (H2): 23 items, 570 days
  { id: 'I.B-01', stream: 'B', phase: 'P2', subsection: 'I.B', subsectionName: 'HR Ownership of W&H Governance', topic: 'Joint HR-Legal-Compliance operating model document', complexity: 'L', role: 'Lead', days: 35, enterpriseAdj: 'Cross-functional depth' },
  { id: 'I.B-05', stream: 'B', phase: 'P2', subsection: 'I.B', subsectionName: 'HR Ownership of W&H Governance', topic: 'Audit remediation accountability history documentation', complexity: 'M', role: 'Lead', days: 15 },
  { id: 'I.C.1-04', stream: 'B', phase: 'P2', subsection: 'I.C.1', subsectionName: 'Classification Governance', topic: 'Ongoing classification review cadence', complexity: 'M', role: 'Partner', days: 12 },
  { id: 'I.C.1-05', stream: 'B', phase: 'P2', subsection: 'I.C.1', subsectionName: 'Classification Governance', topic: 'Formal systematic classification review project', complexity: 'XL', role: 'Lead', days: 65, enterpriseAdj: 'Enterprise audit scope' },
  { id: 'I.C.1-07', stream: 'B', phase: 'P2', subsection: 'I.C.1', subsectionName: 'Classification Governance', topic: 'Independent Contractor audit', complexity: 'L', role: 'Lead', days: 30 },
  { id: 'I.C.2-06', stream: 'B', phase: 'P2', subsection: 'I.C.2', subsectionName: 'Meal & Rest Period Governance', topic: 'Meal and rest remediation tracking integration', complexity: 'M', role: 'Lead', days: 12 },
  { id: 'I.C.3-05', stream: 'B', phase: 'P2', subsection: 'I.C.3', subsectionName: 'Regular Rate & Pay Code Governance', topic: 'Regular rate methodology audit (300+ pay codes)', complexity: 'XL', role: 'Lead', days: 70, enterpriseAdj: 'Highest exposure category' },
  { id: 'I.C.3-06', stream: 'B', phase: 'P2', subsection: 'I.C.3', subsectionName: 'Regular Rate & Pay Code Governance', topic: 'Regular rate methodology documentation', complexity: 'L', role: 'Lead', days: 30 },
  { id: 'I.C.4-05', stream: 'B', phase: 'P2', subsection: 'I.C.4', subsectionName: 'Off-the-Clock Work Governance', topic: 'Off-the-clock standalone audit', complexity: 'L', role: 'Lead', days: 30 },
  { id: 'I.C.5-04', stream: 'B', phase: 'P2', subsection: 'I.C.5', subsectionName: 'Overtime & AWS Governance', topic: 'AWS governance framework', complexity: 'M', role: 'Lead', days: 18 },
  { id: 'I.C.5-06', stream: 'B', phase: 'P2', subsection: 'I.C.5', subsectionName: 'Overtime & AWS Governance', topic: 'Overtime as tracked HR business metric', complexity: 'S', role: 'Lead', days: 8 },
  { id: 'II.1-08', stream: 'B', phase: 'P2', subsection: 'II.1', subsectionName: 'People: Workforce Structure', topic: 'Formal HR succession plans (compliance-adjacent roles)', complexity: 'M', role: 'Partner', days: 15 },
  { id: 'II.2-04', stream: 'B', phase: 'P2', subsection: 'II.2', subsectionName: 'Processes', topic: 'Policy library framework documentation', complexity: 'M', role: 'Lead', days: 18 },
  { id: 'II.2-05', stream: 'B', phase: 'P2', subsection: 'II.2', subsectionName: 'Processes', topic: 'Code of Conduct operational deployment', complexity: 'M', role: 'Lead', days: 18, enterpriseAdj: 'Reflects finding II.2' },
  { id: 'II.2-07', stream: 'B', phase: 'P2', subsection: 'II.2', subsectionName: 'Processes', topic: 'HR Dashboard completion support', complexity: 'S', role: 'Advise', days: 5 },
  { id: 'II.6-02', stream: 'B', phase: 'P2', subsection: 'II.6', subsectionName: 'Quality Assurance', topic: 'Self-assessment framework plus initial results', complexity: 'M', role: 'Lead', days: 18 },
  { id: 'II.6-04', stream: 'B', phase: 'P2', subsection: 'II.6', subsectionName: 'Quality Assurance', topic: 'Formal QA findings log', complexity: 'S', role: 'Lead', days: 8 },
  { id: 'II.7-03', stream: 'B', phase: 'P2', subsection: 'II.7', subsectionName: 'Control Measures', topic: 'Control matrix', complexity: 'L', role: 'Lead', days: 30, enterpriseAdj: 'Enterprise system scope' },
  { id: 'II.7-08', stream: 'B', phase: 'P2', subsection: 'II.7', subsectionName: 'Control Measures', topic: 'Exception reporting framework', complexity: 'M', role: 'Lead', days: 15 },
  { id: 'II.8-04', stream: 'B', phase: 'P2', subsection: 'II.8', subsectionName: 'Change Management', topic: 'System and policy change governance documentation', complexity: 'M', role: 'Lead', days: 15 },
  { id: 'II.9-11', stream: 'B', phase: 'P2', subsection: 'II.9', subsectionName: 'Investigations', topic: 'Formal investigation SOP', complexity: 'L', role: 'Lead', days: 28 },
  { id: 'II.10-05', stream: 'B', phase: 'P2', subsection: 'II.10', subsectionName: 'Reports', topic: 'Formalize material event reporting practice', complexity: 'M', role: 'Lead', days: 15 },
  { id: 'IPM-02', stream: 'B', phase: 'P2', subsection: 'IPM', subsectionName: 'IPM Program Management', topic: 'Enterprise-scale program management (weekly, monthly, quarterly cadence)', complexity: 'XL', role: 'Lead', days: 60, enterpriseAdj: 'IPM parallel workstream' },
  // Phase 3 (H3): 8 items, 138 days
  { id: 'II.2-01', stream: 'B', phase: 'P3', subsection: 'II.2', subsectionName: 'Processes', topic: 'HR process inventory deepening (Oracle Fusion integration)', complexity: 'L', role: 'Advise', days: 22 },
  { id: 'II.8-06', stream: 'B', phase: 'P3', subsection: 'II.8', subsectionName: 'Change Management', topic: 'Post-implementation review framework', complexity: 'M', role: 'Lead', days: 18 },
  { id: 'II.10-04', stream: 'B', phase: 'P3', subsection: 'II.10', subsectionName: 'Reports', topic: 'Board-level HR reporting formalization', complexity: 'M', role: 'Lead', days: 18 },
  { id: 'II.11-03', stream: 'B', phase: 'P3', subsection: 'II.11', subsectionName: 'Documentation & Records', topic: 'Personnel file ADA/FEHA validation plus remediation', complexity: 'L', role: 'Partner', days: 28 },
  { id: 'II.3-04', stream: 'B', phase: 'P3', subsection: 'II.3', subsectionName: 'Accountability Mechanisms', topic: 'Standing Board-level reporting cadence', complexity: 'M', role: 'Lead', days: 18 },
  { id: 'II.3-06', stream: 'B', phase: 'P3', subsection: 'II.3', subsectionName: 'Accountability Mechanisms', topic: 'Compensation Committee coordination', complexity: 'S', role: 'Lead', days: 8 },
  { id: 'II.3-08', stream: 'B', phase: 'P3', subsection: 'II.3', subsectionName: 'Accountability Mechanisms', topic: 'Standalone steering committee minutes process', complexity: 'S', role: 'Lead', days: 6 },
  { id: 'IPM-03', stream: 'B', phase: 'P3', subsection: 'IPM', subsectionName: 'IPM Program Management', topic: 'IPM continuation: reduced coordination cadence', complexity: 'M', role: 'Lead', days: 20, enterpriseAdj: 'IPM parallel workstream' },
  // Phase 4 (H4): 4 items, 96 days
  { id: 'II.12-01', stream: 'B', phase: 'P4', subsection: 'II.12', subsectionName: 'Compliance Sustainability', topic: 'Post-PPS compliance sustainability program', complexity: 'L', role: 'Lead', days: 35, enterpriseAdj: 'Post-close transition' },
  { id: 'II.12-03', stream: 'B', phase: 'P4', subsection: 'II.12', subsectionName: 'Compliance Sustainability', topic: 'OCP integration on compliance committee structure', complexity: 'M', role: 'Partner', days: 18 },
  { id: 'II.12-10', stream: 'B', phase: 'P4', subsection: 'II.12', subsectionName: 'Compliance Sustainability', topic: 'Forward sustainability roadmap (parallel development)', complexity: 'L', role: 'Lead', days: 28 },
  { id: 'IPM-04', stream: 'B', phase: 'P4', subsection: 'IPM', subsectionName: 'IPM Program Management', topic: 'IPM sustainability handoff and forward retainer', complexity: 'M', role: 'Lead', days: 15, enterpriseAdj: 'IPM parallel workstream' },
];
 
// ------------------------------------------------------------
// STREAM A CATALOG: CHLA pending backlog, Diagnostic Report Section 9
// Konnect role is Verify on every item. Target dates are CHLA's own
// tracker targets; several precede or crowd the mandate execution date,
// which is itself a slip signal the dashboard surfaces.
// ------------------------------------------------------------
const STREAM_A_CATALOG = [
  { id: 'SA-01', stream: 'A', phase: 'P1', subsection: 'I.C.2', subsectionName: 'Meal & Rest Period Governance', topic: 'Provide+ meal and rest approach', complexity: 'M', role: 'Verify', days: 0, chlaTarget: '2026-10-01' },
  { id: 'SA-02', stream: 'A', phase: 'P1', subsection: 'II.3', subsectionName: 'Accountability Mechanisms', topic: 'Timekeeping accountability standards', complexity: 'M', role: 'Verify', days: 0, chlaTarget: '2026-09-26' },
  { id: 'SA-03', stream: 'A', phase: 'P1', subsection: 'II.4', subsectionName: 'Enterprise Compliance Training', topic: 'Annual cycle of pay practice training', complexity: 'M', role: 'Verify', days: 0, chlaTarget: '2026-09-01' },
  { id: 'SA-04', stream: 'A', phase: 'P1', subsection: 'I.C.2', subsectionName: 'Meal & Rest Period Governance', topic: 'Meal waiver compliance', complexity: 'M', role: 'Verify', days: 0, chlaTarget: '2026-07-26' },
  { id: 'SA-05', stream: 'A', phase: 'P1', subsection: 'II.7', subsectionName: 'Control Measures', topic: 'Kaba timeclock replacement with TCP+', complexity: 'L', role: 'Verify', days: 0, chlaTarget: '2026-07-01' },
  { id: 'SA-06', stream: 'A', phase: 'P1', subsection: 'I.C.1', subsectionName: 'Classification Governance', topic: 'Independent Contractor audit completion', complexity: 'M', role: 'Verify', days: 0, chlaTarget: '2026-06-01' },
  { id: 'SA-07', stream: 'A', phase: 'P1', subsection: 'II.2', subsectionName: 'Processes', topic: 'Pre-employment forms and wage theft notice compliance', complexity: 'M', role: 'Verify', days: 0, chlaTarget: '2026-08-01' },
  { id: 'SA-08', stream: 'A', phase: 'P1', subsection: 'I.C.4', subsectionName: 'Off-the-Clock Work Governance', topic: 'Commute and travel time governance for satellite locations', complexity: 'M', role: 'Verify', days: 0, chlaTarget: '2026-10-01' },
  { id: 'SA-09', stream: 'A', phase: 'P1', subsection: 'II.2', subsectionName: 'Processes', topic: 'Off-site education policy implementation', complexity: 'M', role: 'Verify', days: 0, chlaTarget: '2026-10-01' },
  { id: 'SA-10', stream: 'A', phase: 'P1', subsection: 'I.C.4', subsectionName: 'Off-the-Clock Work Governance', topic: 'Cell phone reimbursement and remote work stipend changes', complexity: 'M', role: 'Verify', days: 0, chlaTarget: '2026-09-01' },
  { id: 'SA-11', stream: 'A', phase: 'P1', subsection: 'II.12', subsectionName: 'Compliance Sustainability', topic: 'On hold / in review item (per tracker; scope to confirm at intake re-baseline)', complexity: 'S', role: 'Verify', days: 0, chlaTarget: null },
  { id: 'SA-12', stream: 'A', phase: 'P1', subsection: 'II.12', subsectionName: 'Compliance Sustainability', topic: "Tilly's flex workstream (active work; tracker snapshot may not reflect current status)", complexity: 'M', role: 'Verify', days: 0, chlaTarget: null },
];
 
// ------------------------------------------------------------
// STREAM C CATALOG: forward posture components, Diagnostic Report Section 11
// Components 1 to 3 must be operational at the November 2026 transition.
// ------------------------------------------------------------
const STREAM_C_CATALOG = [
  { id: 'SC-1', stream: 'C', phase: 'P2', subsection: 'II.6', subsectionName: 'Quality Assurance', topic: 'Audit calendar and QA framework (standing calendar, findings log, escalation protocols)', complexity: 'L', role: 'Lead', days: 0, chlaTarget: '2026-11-30', mustBeOperationalAtClose: true },
  { id: 'SC-2', stream: 'C', phase: 'P2', subsection: 'II.10', subsectionName: 'Reports', topic: 'Board reporting cadence (quarterly interim, annual comprehensive, escalation reporting)', complexity: 'M', role: 'Lead', days: 0, chlaTarget: '2026-11-30', mustBeOperationalAtClose: true },
  { id: 'SC-3', stream: 'C', phase: 'P2', subsection: 'II.3', subsectionName: 'Accountability Mechanisms', topic: 'Accountability infrastructure (evaluation-embedded objectives, escalation authority, penalty and complaint logs, litigation hold)', complexity: 'L', role: 'Lead', days: 0, chlaTarget: '2026-11-30', mustBeOperationalAtClose: true },
  { id: 'SC-4', stream: 'C', phase: 'P3', subsection: 'II.4', subsectionName: 'Enterprise Compliance Training', topic: 'Training architecture (framework documentation, role-specific design, effectiveness assessment)', complexity: 'L', role: 'Lead', days: 0, chlaTarget: null },
  { id: 'SC-5', stream: 'C', phase: 'P3', subsection: 'II.12', subsectionName: 'Compliance Sustainability', topic: 'Compliance sustainability program (charter, post-PPS transition, forward calibration)', complexity: 'L', role: 'Lead', days: 0, chlaTarget: null },
  { id: 'SC-6', stream: 'C', phase: 'P3', subsection: 'II.12', subsectionName: 'Compliance Sustainability', topic: 'Integration with Office of Compliance and Privacy (cross-functional committee, shared audit infrastructure, Legal coordination)', complexity: 'M', role: 'Partner', days: 0, chlaTarget: null },
];
 
const FULL_CATALOG = [...STREAM_A_CATALOG, ...STREAM_B_CATALOG, ...STREAM_C_CATALOG];
const CATALOG_BY_ID = Object.fromEntries(FULL_CATALOG.map(i => [i.id, i]));
 
// ------------------------------------------------------------
// CONTRACTED REPORTING CADENCE (SOW + Day 1 readiness commitments)
// Relative deadlines computed from the mandate execution date, which is
// a setting in remediation:meta (default 2026-09-01, editable).
// ------------------------------------------------------------
const REPORTING_MILESTONES = [
  { id: 'rm-week1',  label: 'Weekly coordination cadence begins (HR, Finance, Legal operational leads)', offsetDays: 7 },
  { id: 'rm-day10',  label: 'Interim governance protocol operational', offsetDays: 10 },
  { id: 'rm-day30a', label: 'First monthly written report to the General Counsel', offsetDays: 30 },
  { id: 'rm-day30b', label: 'First interim briefing to the Audit Committee Chair (GC concurrence)', offsetDays: 30 },
  { id: 'rm-day45a', label: 'First interim Stream A progress report to the Committee', offsetDays: 45 },
  { id: 'rm-day45b', label: 'Transactional audit rescheduling direction and outside counsel scope confirmation', offsetDays: 45 },
  { id: 'rm-q1',     label: 'First quarterly standing report to the Audit Committee', offsetDays: 90 },
];
 
const REPORT_TYPES = [
  { id: 'weekly',     label: 'Weekly Coordination Notes', audience: 'HR, Finance, Legal operational leads', cadence: 'Weekly' },
  { id: 'gc_monthly', label: 'Monthly GC Report', audience: 'General Counsel', cadence: 'Monthly' },
  { id: 'chair',      label: 'Chair Interim Briefing', audience: 'Audit Committee Chair (with GC concurrence)', cadence: 'Monthly' },
  { id: 'quarterly',  label: 'Quarterly AC Report', audience: 'Board Audit Committee', cadence: 'Quarterly' },
  { id: 'escalation', label: 'Escalation Memo', audience: 'AC Chair and GC (threshold-triggered)', cadence: 'Ad hoc' },
];
 
const DEFAULT_META = {
  client: "Children's Hospital Los Angeles",
  engagementId: 'CHLA-IPM-2026',
  consultant: 'Jamie Viramontes',
  executionDate: '2026-09-01',
};
 
// Default runtime state for an item not yet touched
function defaultItemState(catalogItem) {
  return {
    id: catalogItem.id,
    status: 'not_started',
    atRisk: false,
    blocked: false,
    owner: '',
    chlaContact: '',
    raci: '',
    targetDate: catalogItem.chlaTarget || '',
    actualDate: '',
    milestones: [],      // { id, label, target, actual }
    blockers: [],        // { id, text, raisedAt, resolvedAt }
    dependencies: [],    // array of item IDs this item depends on
    evidence: [],        // { id, fileName, fileId, note, addedAt, review }
    notes: '',
    updates: [],         // { id, text, at, by }
    lastUpdated: null,
  };
}
// ============================================================
// STORAGE HELPERS
// ============================================================
 
const storage = {
  async get(key) {
    try {
      const r = await window.storage.get(key);
      return r ? JSON.parse(r.value) : null;
    } catch { return null; }
  },
  async set(key, value) {
    try {
      await window.storage.set(key, JSON.stringify(value));
      return true;
    } catch { return false; }
  },
  async delete(key) {
    try { await window.storage.delete(key); return true; }
    catch { return false; }
  },
  async list(prefix) {
    try {
      const r = await window.storage.list(prefix);
      return r?.keys || [];
    } catch { return []; }
  }
};
 
// ============================================================
// CLAUDE API HELPERS
// ============================================================
 
async function callClaude(systemPrompt, userPrompt, expectJson = false) {
  const response = await fetch(window.KONNECT_API_BASE + "/api/anthropic", {
    method: "POST",
    credentials: 'include',
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      model: "claude-sonnet-4-6",
      max_tokens: 4000,
      system: systemPrompt,
      messages: [{ role: "user", content: userPrompt }],
    })
  });
const data = await response.json();
  if (!response.ok || !data || !Array.isArray(data.content)) {
    const detail = data?.error?.message || data?.error || data?.message || JSON.stringify(data).slice(0, 300);
    throw new Error(`API error (${response.status}): ${detail}`);
  }
  const text = data.content
    .filter(c => c.type === "text")
    .map(c => c.text)
    .join("\n");
  if (expectJson) {
    const cleaned = text.replace(/```json|```/g, "").trim();
    return JSON.parse(cleaned);
  }
  return text;
}
 
// ============================================================
// UTILITIES
// ============================================================
 
const newId = (prefix) => `${prefix}_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`;
const fmtDate = (iso) => iso ? new Date(iso).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : '';
const fmtDateTime = (iso) => iso ? new Date(iso).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' }) : '';
const fmtUSD = (n) => {
  if (!n || n === 0) return '$0';
  if (Math.abs(n) >= 1000000) return `$${(n / 1000000).toFixed(2)}M`;
  if (Math.abs(n) >= 1000) return `$${(n / 1000).toFixed(0)}K`;
  return `$${n.toLocaleString()}`;
};
const fmtRatio = (n) => n ? `1:${n.toFixed(0)}` : '—';
 
// CSV parsing — forgiving, handles quoted fields with commas
function parseCSV(text) {
  const lines = text.split(/\r?\n/).filter(l => l.trim());
  if (lines.length === 0) return { headers: [], rows: [] };
  const parseLine = (line) => {
    const result = [];
    let cur = '';
    let inQ = false;
    for (let i = 0; i < line.length; i++) {
      const c = line[i];
      if (c === '"' && !inQ) { inQ = true; continue; }
      if (c === '"' && inQ) {
        if (line[i + 1] === '"') { cur += '"'; i++; continue; }
        inQ = false; continue;
      }
      if (c === ',' && !inQ) { result.push(cur); cur = ''; continue; }
      cur += c;
    }
    result.push(cur);
    return result.map(s => s.trim());
  };
  const headers = parseLine(lines[0]);
  const rows = lines.slice(1).map(parseLine).filter(r => r.some(c => c));
  return { headers, rows };
}
 
 
// ============================================================
// DATE HELPERS
// ============================================================
 
const MS_DAY = 24 * 60 * 60 * 1000;
const todayISO = () => new Date().toISOString().slice(0, 10);
const daysBetween = (fromISO, toISO) => Math.round((new Date(toISO + 'T00:00:00') - new Date(fromISO + 'T00:00:00')) / MS_DAY);
const daysUntil = (iso) => iso ? daysBetween(todayISO(), iso) : null;
const addDays = (iso, n) => {
  const d = new Date(iso + 'T00:00:00');
  d.setDate(d.getDate() + n);
  return d.toISOString().slice(0, 10);
};
const fmtLongDate = (iso) => iso ? new Date(iso + 'T00:00:00').toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '';
 
// ============================================================
// MAIN APP
// ============================================================
 
function KonnectRemediationApp() {
  const [view, setView] = useState('dashboard');
  const [meta, setMeta] = useState(DEFAULT_META);
  const [itemsState, setItemsState] = useState({});
  const [milestonesState, setMilestonesState] = useState({});
  const [escalations, setEscalations] = useState([]);
  const [reports, setReports] = useState([]);
  const [selectedItemId, setSelectedItemId] = useState(null);
  const [showSettings, setShowSettings] = useState(false);
  const [loaded, setLoaded] = useState(false);
 
  useEffect(() => {
    (async () => {
      const m = await storage.get('remediation:meta');
      if (m) setMeta({ ...DEFAULT_META, ...m });
      else await storage.set('remediation:meta', DEFAULT_META);
 
      const is = await storage.get('items:state') || {};
      setItemsState(is);
 
      const ms = await storage.get('milestones:state') || {};
      setMilestonesState(ms);
 
      const eList = await storage.get('escalations:list') || [];
      const eRecords = await Promise.all(eList.map(id => storage.get(`escalation:${id}`)));
      setEscalations(eRecords.filter(Boolean));
 
      const rList = await storage.get('reports:list') || [];
      const rRecords = await Promise.all(rList.map(id => storage.get(`report:${id}`)));
      setReports(rRecords.filter(Boolean).sort((a, b) => (b.createdAt || '').localeCompare(a.createdAt || '')));
 
      setLoaded(true);
    })();
  }, []);
 
  const getItem = (id) => {
    const cat = CATALOG_BY_ID[id];
    if (!cat) return null;
    return { ...defaultItemState(cat), ...(itemsState[id] || {}), catalog: cat };
  };
 
  const allItems = useMemo(
    () => FULL_CATALOG.map(c => ({ ...defaultItemState(c), ...(itemsState[c.id] || {}), catalog: c })),
    [itemsState]
  );
 
  const saveItem = async (id, updates) => {
    const next = {
      ...itemsState,
      [id]: { ...(itemsState[id] || defaultItemState(CATALOG_BY_ID[id])), ...updates, id, lastUpdated: new Date().toISOString() },
    };
    delete next[id].catalog;
    setItemsState(next);
    await storage.set('items:state', next);
  };
 
  const saveMeta = async (updates) => {
    const next = { ...meta, ...updates };
    setMeta(next);
    await storage.set('remediation:meta', next);
  };
 
  const saveMilestone = async (id, done) => {
    const next = { ...milestonesState, [id]: { done, doneAt: done ? new Date().toISOString() : null } };
    setMilestonesState(next);
    await storage.set('milestones:state', next);
  };
 
  const saveEscalation = async (record) => {
    const isNew = !escalations.find(e => e.id === record.id);
    await storage.set(`escalation:${record.id}`, record);
    if (isNew) {
      const list = await storage.get('escalations:list') || [];
      await storage.set('escalations:list', [...list, record.id]);
      setEscalations(prev => [...prev, record]);
    } else {
      setEscalations(prev => prev.map(e => e.id === record.id ? record : e));
    }
  };
 
  const deleteEscalation = async (id) => {
    await storage.delete(`escalation:${id}`);
    const list = await storage.get('escalations:list') || [];
    await storage.set('escalations:list', list.filter(x => x !== id));
    setEscalations(prev => prev.filter(e => e.id !== id));
  };
 
  const saveReport = async (record) => {
    const isNew = !reports.find(r => r.id === record.id);
    await storage.set(`report:${record.id}`, record);
    if (isNew) {
      const list = await storage.get('reports:list') || [];
      await storage.set('reports:list', [...list, record.id]);
      setReports(prev => [record, ...prev]);
    } else {
      setReports(prev => prev.map(r => r.id === record.id ? record : r));
    }
  };
 
  const deleteReport = async (id) => {
    await storage.delete(`report:${id}`);
    const list = await storage.get('reports:list') || [];
    await storage.set('reports:list', list.filter(x => x !== id));
    setReports(prev => prev.filter(r => r.id !== id));
  };
 
  if (!loaded) {
    return (
      <div className="boot-loader">
        <div className="boot-spinner" />
        <div className="boot-text">LOADING REMEDIATION WORKSPACE</div>
      </div>
    );
  }
 
  const selectedItem = selectedItemId ? getItem(selectedItemId) : null;
 
  return (
    <div style={{ minHeight: '100vh' }}>
      <Header meta={meta} view={view} setView={setView} allItems={allItems} escalations={escalations} onSettings={() => setShowSettings(true)} />
      <main style={{ maxWidth: '1400px', margin: '0 auto', padding: '28px 32px 60px' }}>
        {view === 'dashboard' && (
          <DashboardView meta={meta} allItems={allItems} milestonesState={milestonesState} saveMilestone={saveMilestone}
            escalations={escalations} setView={setView} setSelectedItemId={setSelectedItemId} />
        )}
        {(view === 'streamA' || view === 'streamB' || view === 'streamC') && (
          <StreamView streamId={view.slice(-1)} allItems={allItems} setSelectedItemId={setSelectedItemId} />
        )}
        {view === 'timeline' && (
          <TimelineView allItems={allItems} meta={meta} setSelectedItemId={setSelectedItemId} setView={setView} />
        )}
        {view === 'escalations' && (
          <EscalationsView escalations={escalations} allItems={allItems} saveEscalation={saveEscalation} deleteEscalation={deleteEscalation} meta={meta} />
        )}
        {view === 'reports' && (
          <ReportsView reports={reports} saveReport={saveReport} deleteReport={deleteReport} meta={meta}
            allItems={allItems} escalations={escalations} milestonesState={milestonesState} />
        )}
      </main>
      {selectedItem && (
        <ItemDetail item={selectedItem} allItems={allItems} saveItem={saveItem} onClose={() => setSelectedItemId(null)}
          setSelectedItemId={setSelectedItemId} />
      )}
      {showSettings && (
        <SettingsModal meta={meta} onClose={() => setShowSettings(false)} onSave={saveMeta} />
      )}
    </div>
  );
}
 
// ============================================================
// HEADER
// ============================================================
 
function Header({ meta, view, setView, allItems, escalations, onSettings }) {
  const openEsc = escalations.filter(e => e.status !== 'closed').length;
  const flagged = allItems.filter(i => i.atRisk || i.blocked).length;
  const countFor = (s) => allItems.filter(i => i.catalog.stream === s).length;
 
  const tabs = [
    { id: 'dashboard', label: 'Overview', icon: BarChart3 },
    { id: 'streamA', label: 'Stream A: Backlog', icon: ListChecks, count: countFor('A') },
    { id: 'streamB', label: 'Stream B: Findings', icon: Layers, count: countFor('B') },
    { id: 'streamC', label: 'Stream C: Forward', icon: Target, count: countFor('C') },
    { id: 'timeline', label: 'Timeline', icon: CalendarClock },
    { id: 'escalations', label: 'Escalations', icon: AlertTriangle, count: openEsc || undefined },
    { id: 'reports', label: 'Reports', icon: FileSearch },
  ];
 
  const daysToClose = daysUntil(CLOSE_DATE);
 
  return (
    <header style={{ background: '#010506', borderBottom: `3px solid #1872B4` }}>
      <div style={{ maxWidth: '1400px', margin: '0 auto', padding: '20px 32px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingBottom: '16px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '14px' }}>
              <img src="/konnect-logo-white.png" alt="Konnect" style={{ height: '32px', width: 'auto', display: 'block' }} />
              <div style={{ fontSize: '10px', color: '#9CA3AF', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
                Remediation Workspace
              </div>
            </div>
            <div style={{ height: '32px', width: '1px', background: '#374151' }} />
            <div>
              <div style={{ fontFamily: '"Newsreader", serif', fontStyle: 'italic', fontSize: '15px', color: '#FFFFFF', fontWeight: 500 }}>
                {meta?.client}
              </div>
              <div style={{ fontSize: '11px', color: '#9CA3AF', marginTop: '2px', letterSpacing: '0.04em' }}>
                {meta?.engagementId} · Independent Program Management · Privileged
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '18px' }}>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: '11px', color: '#9CA3AF', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
                {daysToClose >= 0 ? `${daysToClose} days to close` : 'Close date passed'}
              </div>
              <div style={{ fontSize: '12px', color: '#FFFFFF', marginTop: '2px' }}>
                Nov 30, 2026 {flagged > 0 && <span style={{ color: '#F87171' }}>· {flagged} flagged</span>}
              </div>
            </div>
            <a href={window.KONNECT_API_BASE + '/api/backup/full'} title="Download full KV backup (JSON)"
              style={{ color: '#9CA3AF', display: 'flex' }}
              onMouseEnter={e => e.currentTarget.style.color = '#FFFFFF'}
              onMouseLeave={e => e.currentTarget.style.color = '#9CA3AF'}>
              <Download size={16} />
            </a>
            <button onClick={onSettings} title="Workspace settings"
              style={{ background: 'none', border: 'none', color: '#9CA3AF', cursor: 'pointer', display: 'flex', padding: 0 }}
              onMouseEnter={e => e.currentTarget.style.color = '#FFFFFF'}
              onMouseLeave={e => e.currentTarget.style.color = '#9CA3AF'}>
              <Settings size={16} />
            </button>
          </div>
        </div>
 
        <div style={{ display: 'flex', gap: '4px', overflowX: 'auto' }}>
          {tabs.map(tab => {
            const Icon = tab.icon;
            const active = view === tab.id;
            return (
              <button key={tab.id} onClick={() => setView(tab.id)}
                style={{
                  display: 'flex', alignItems: 'center', gap: '8px', padding: '12px 18px',
                  background: active ? '#FAFBFC' : 'transparent',
                  color: active ? '#010506' : '#9CA3AF',
                  border: 'none', borderRadius: '6px 6px 0 0',
                  fontSize: '13px', fontWeight: 600, cursor: 'pointer',
                  transition: 'all 0.15s ease', whiteSpace: 'nowrap',
                }}
                onMouseEnter={e => { if (!active) e.currentTarget.style.color = '#FFFFFF'; }}
                onMouseLeave={e => { if (!active) e.currentTarget.style.color = '#9CA3AF'; }}>
                <Icon size={15} />
                <span>{tab.label}</span>
                {tab.count !== undefined && tab.count > 0 && (
                  <span style={{
                    background: active ? '#1872B4' : '#374151', color: '#FFFFFF',
                    fontSize: '10px', fontWeight: 700, padding: '2px 7px', borderRadius: '10px',
                  }}>{tab.count}</span>
                )}
              </button>
            );
          })}
        </div>
      </div>
    </header>
  );
}
 
// ============================================================
// SHARED COMPONENTS
// ============================================================
 
function Card({ children, style }) {
  return (
    <div style={{ background: '#FFFFFF', border: '1px solid #E5E7EB', borderRadius: '10px', padding: '20px', ...style }}>
      {children}
    </div>
  );
}
 
function CardHeader({ title, subtitle, action }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: '14px' }}>
      <div>
        <div style={{ fontSize: '14px', fontWeight: 700, color: '#010506' }}>{title}</div>
        {subtitle && <div style={{ fontSize: '12px', color: '#6B7280', marginTop: '2px' }}>{subtitle}</div>}
      </div>
      {action}
    </div>
  );
}
 
function StatCard({ label, value, subtext, icon: Icon, accent = '#1872B4', onClick }) {
  return (
    <div onClick={onClick} style={{
      background: '#FFFFFF', border: '1px solid #E5E7EB', borderRadius: '10px', padding: '18px',
      cursor: onClick ? 'pointer' : 'default', flex: 1, minWidth: '170px',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ fontSize: '11px', fontWeight: 700, color: '#6B7280', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{label}</div>
        {Icon && <Icon size={16} color={accent} />}
      </div>
      <div style={{ fontSize: '28px', fontWeight: 700, color: '#010506', marginTop: '8px', fontVariantNumeric: 'tabular-nums' }}>{value}</div>
      {subtext && <div style={{ fontSize: '12px', color: '#6B7280', marginTop: '4px' }}>{subtext}</div>}
    </div>
  );
}
 
function StatusPill({ status }) {
  const s = ITEM_STATUS.find(x => x.id === status) || ITEM_STATUS[0];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: '6px', padding: '3px 10px',
      background: s.color + '18', color: s.color, borderRadius: '12px',
      fontSize: '11px', fontWeight: 700, whiteSpace: 'nowrap',
    }}>
      <span style={{ width: '6px', height: '6px', borderRadius: '50%', background: s.color }} />
      {s.label}
    </span>
  );
}
 
function FlagPills({ item }) {
  return (
    <span style={{ display: 'inline-flex', gap: '6px' }}>
      {item.blocked && (
        <span style={{ padding: '3px 8px', background: '#B91C1C18', color: '#B91C1C', borderRadius: '12px', fontSize: '10px', fontWeight: 700 }}>BLOCKED</span>
      )}
      {item.atRisk && !item.blocked && (
        <span style={{ padding: '3px 8px', background: '#D9770618', color: '#D97706', borderRadius: '12px', fontSize: '10px', fontWeight: 700 }}>AT RISK</span>
      )}
    </span>
  );
}
 
function RolePill({ role }) {
  const colors = { Lead: '#1872B4', Partner: '#0A4569', Advise: '#6B7280', Verify: '#7C3AED' };
  return (
    <span style={{ padding: '2px 8px', background: (colors[role] || '#6B7280') + '15', color: colors[role] || '#6B7280', borderRadius: '4px', fontSize: '10px', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase' }}>
      {role}
    </span>
  );
}
 
function EmptyState({ icon: Icon, message }) {
  return (
    <div style={{ padding: '40px 20px', textAlign: 'center', color: '#9CA3AF' }}>
      {Icon && <Icon size={28} color="#D1D5DB" />}
      <div style={{ fontSize: '13px', marginTop: '10px' }}>{message}</div>
    </div>
  );
}
 
function slackInfo(item) {
  // Slack against the item target and against the program close
  const target = item.targetDate || item.catalog.chlaTarget;
  const toTarget = target ? daysUntil(target) : null;
  const done = item.status === 'verified' || item.status === 'delivered';
  return { target, toTarget, overdue: target && toTarget < 0 && !done };
}
 
// ============================================================
// DASHBOARD
// ============================================================
 
function DashboardView({ meta, allItems, milestonesState, saveMilestone, escalations, setView, setSelectedItemId }) {
  const [synthesis, setSynthesis] = useState(null);
  const [synthLoading, setSynthLoading] = useState(false);
  const [synthError, setSynthError] = useState(null);
 
  useEffect(() => {
    (async () => {
      const s = await storage.get('synthesis:latest');
      if (s) setSynthesis(s);
    })();
  }, []);
 
  const daysToClose = daysUntil(CLOSE_DATE);
  const execDate = meta.executionDate || DEFAULT_META.executionDate;
 
  const byStream = (s) => allItems.filter(i => i.catalog.stream === s);
  const statusCount = (items, status) => items.filter(i => i.status === status).length;
  const verified = allItems.filter(i => i.status === 'verified').length;
  const delivered = allItems.filter(i => i.status === 'delivered').length;
  const flagged = allItems.filter(i => i.atRisk || i.blocked);
  const openEsc = escalations.filter(e => e.status !== 'closed');
 
  // Phase progress weighted by sized days (Stream B carries the day model)
  const phaseProgress = PHASES.map(p => {
    const items = allItems.filter(i => i.catalog.phase === p.id && i.catalog.stream === 'B');
    const total = items.reduce((s, i) => s + (i.catalog.days || 0), 0);
    const done = items.filter(i => i.status === 'verified').reduce((s, i) => s + (i.catalog.days || 0), 0);
    return { ...p, total, done, pct: total ? Math.round(100 * done / total) : 0 };
  });
 
  const milestoneRows = REPORTING_MILESTONES.map(m => ({
    ...m,
    due: addDays(execDate, m.offsetDays),
    done: !!(milestonesState[m.id] && milestonesState[m.id].done),
  })).sort((a, b) => a.due.localeCompare(b.due));
 
  const overdueItems = allItems.filter(i => slackInfo(i).overdue);
 
  const runSynthesis = async () => {
    setSynthLoading(true);
    setSynthError(null);
    try {
      const snapshot = buildProgramSnapshot(allItems, escalations, milestoneRows, meta);
      const res = await fetch(window.KONNECT_API_BASE + '/api/program/synthesize', {
        method: 'POST', credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ snapshot }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data?.error || ('HTTP ' + res.status));
      const text = (data.content || []).filter(c => c.type === 'text').map(c => c.text).join('\n');
      const parsed = JSON.parse(text.replace(/```json|```/g, '').trim());
      const record = { ...parsed, ranAt: new Date().toISOString() };
      setSynthesis(record);
      await storage.set('synthesis:latest', record);
    } catch (e) {
      setSynthError(e.message);
    } finally {
      setSynthLoading(false);
    }
  };
 
  return (
    <div>
      <div style={{ display: 'flex', gap: '14px', flexWrap: 'wrap', marginBottom: '20px' }}>
        <StatCard label="Days to Close" value={daysToClose >= 0 ? daysToClose : 'PAST'} subtext={`Board-directed close: ${fmtLongDate(CLOSE_DATE)}`} icon={Timer} accent={daysToClose < 60 ? '#B91C1C' : '#1872B4'} />
        <StatCard label="Verified" value={`${verified} / ${allItems.length}`} subtext="Audit-defensible standard" icon={ShieldCheck} accent="#15803D" />
        <StatCard label="Delivered, Not Verified" value={delivered} subtext="The gap that failed five prior attempts" icon={AlertCircle} accent="#D97706" />
        <StatCard label="Flagged" value={flagged.length} subtext="At risk or blocked" icon={AlertTriangle} accent={flagged.length ? '#B91C1C' : '#9CA3AF'} onClick={() => setView('escalations')} />
        <StatCard label="Open Escalations" value={openEsc.length} subtext="Threshold-triggered" icon={Flag} accent={openEsc.length ? '#B91C1C' : '#9CA3AF'} onClick={() => setView('escalations')} />
      </div>
 
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '20px', alignItems: 'start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
          <Card>
            <CardHeader title="Streams at a Glance" subtitle="Status distribution across the three remediation streams" />
            {STREAMS.map(s => {
              const items = byStream(s.id);
              return (
                <div key={s.id} onClick={() => setView('stream' + s.id)}
                  style={{ padding: '12px 0', borderBottom: '1px solid #F3F4F6', cursor: 'pointer' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
                    <div style={{ fontSize: '13px', fontWeight: 700, color: s.color }}>{s.name}</div>
                    <div style={{ fontSize: '11px', color: '#6B7280' }}>{items.length} items</div>
                  </div>
                  <div style={{ display: 'flex', height: '8px', borderRadius: '4px', overflow: 'hidden', background: '#F3F4F6' }}>
                    {ITEM_STATUS.map(st => {
                      const n = statusCount(items, st.id);
                      if (!n) return null;
                      return <div key={st.id} style={{ width: `${100 * n / items.length}%`, background: st.color }} title={`${st.label}: ${n}`} />;
                    })}
                  </div>
                  <div style={{ display: 'flex', gap: '14px', marginTop: '6px', flexWrap: 'wrap' }}>
                    {ITEM_STATUS.map(st => (
                      <span key={st.id} style={{ fontSize: '11px', color: '#6B7280' }}>
                        <span style={{ display: 'inline-block', width: '7px', height: '7px', borderRadius: '50%', background: st.color, marginRight: '4px' }} />
                        {st.label}: <strong>{statusCount(items, st.id)}</strong>
                      </span>
                    ))}
                  </div>
                </div>
              );
            })}
          </Card>
 
          <Card>
            <CardHeader title="Phase Progress (Days-Weighted)" subtitle="Stream B verified days against the 939-day Schedule 1 model" />
            {phaseProgress.map(p => (
              <div key={p.id} style={{ marginBottom: '12px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '12px', marginBottom: '4px' }}>
                  <span style={{ fontWeight: 600, color: '#010506' }}>{p.name}</span>
                  <span style={{ color: '#6B7280' }}>{p.done} / {p.total} days ({p.pct}%)</span>
                </div>
                <div style={{ height: '8px', background: '#F3F4F6', borderRadius: '4px', overflow: 'hidden' }}>
                  <div style={{ width: `${p.pct}%`, height: '100%', background: '#1872B4' }} />
                </div>
              </div>
            ))}
          </Card>
 
          <Card>
            <CardHeader title="Program Risk Synthesis" subtitle="AI synthesis across status, dependencies, dates, and escalations"
              action={
                <button onClick={runSynthesis} disabled={synthLoading} style={{ ...btnPrimary, opacity: synthLoading ? 0.6 : 1 }}>
                  <Sparkles size={14} /> {synthLoading ? 'Synthesizing...' : synthesis ? 'Re-run Synthesis' : 'Run Synthesis'}
                </button>
              } />
            {synthError && <div style={{ fontSize: '12px', color: '#B91C1C', marginBottom: '10px' }}>Error: {synthError}</div>}
            {!synthesis && !synthLoading && (
              <EmptyState icon={Sparkles} message="Run the synthesis to produce the slip forecast, dependency alerts, and escalation candidates from live workstream data." />
            )}
            {synthesis && (
              <div>
                <div style={{ fontSize: '11px', color: '#9CA3AF', marginBottom: '10px' }}>Last run {fmtDateTime(synthesis.ranAt)}</div>
                <div style={{ fontSize: '13px', lineHeight: 1.65, color: '#111827', whiteSpace: 'pre-wrap', marginBottom: '14px' }}>{synthesis.executiveNarrative}</div>
                {(synthesis.slipRisks || []).length > 0 && (
                  <SynthList title="Risk of Slip" color="#B91C1C" items={synthesis.slipRisks} />
                )}
                {(synthesis.dependencyAlerts || []).length > 0 && (
                  <SynthList title="Dependency Alerts" color="#D97706" items={synthesis.dependencyAlerts} />
                )}
                {(synthesis.escalationCandidates || []).length > 0 && (
                  <SynthList title="Escalation Candidates" color="#7C3AED" items={synthesis.escalationCandidates} />
                )}
                {(synthesis.recommendedActions || []).length > 0 && (
                  <SynthList title="Recommended Actions (Next 14 Days)" color="#1872B4" items={synthesis.recommendedActions} />
                )}
              </div>
            )}
          </Card>
        </div>
 
        <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
          <Card>
            <CardHeader title="Contracted Reporting Deadlines" subtitle={`Relative to mandate execution: ${fmtLongDate(execDate)}`} />
            {milestoneRows.map(m => {
              const overdue = !m.done && daysUntil(m.due) < 0;
              return (
                <div key={m.id} style={{ display: 'flex', alignItems: 'flex-start', gap: '10px', padding: '8px 0', borderBottom: '1px solid #F3F4F6' }}>
                  <input type="checkbox" checked={m.done} onChange={e => saveMilestone(m.id, e.target.checked)} style={{ marginTop: '2px', accentColor: '#1872B4' }} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: '12px', color: m.done ? '#9CA3AF' : '#111827', textDecoration: m.done ? 'line-through' : 'none' }}>{m.label}</div>
                    <div style={{ fontSize: '11px', color: overdue ? '#B91C1C' : '#6B7280', fontWeight: overdue ? 700 : 400, marginTop: '2px' }}>
                      Due {fmtLongDate(m.due)} (Day {m.offsetDays}){overdue ? ' · OVERDUE' : ''}
                    </div>
                  </div>
                </div>
              );
            })}
            <div style={{ fontSize: '11px', color: '#6B7280', marginTop: '10px' }}>
              Accelerated transactional audit window: {fmtLongDate(AUDIT_WINDOW.start)} to {fmtLongDate(AUDIT_WINDOW.end)}
            </div>
          </Card>
 
          <Card>
            <CardHeader title="Overdue Against Target" subtitle="Items past their target date and not yet delivered or verified" />
            {overdueItems.length === 0 && <EmptyState icon={CheckCircle2} message="Nothing overdue." />}
            {overdueItems.slice(0, 10).map(i => (
              <div key={i.id} onClick={() => setSelectedItemId(i.id)}
                style={{ padding: '8px 0', borderBottom: '1px solid #F3F4F6', cursor: 'pointer' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', gap: '8px' }}>
                  <span style={{ fontSize: '12px', fontWeight: 600, color: '#010506' }}>{i.id} · {i.catalog.topic}</span>
                </div>
                <div style={{ fontSize: '11px', color: '#B91C1C', marginTop: '2px' }}>
                  Target {fmtLongDate(slackInfo(i).target)} · {Math.abs(slackInfo(i).toTarget)} days past
                </div>
              </div>
            ))}
            {overdueItems.length > 10 && (
              <div style={{ fontSize: '11px', color: '#6B7280', marginTop: '8px' }}>+ {overdueItems.length - 10} more on the Timeline tab</div>
            )}
          </Card>
 
          <Card>
            <CardHeader title="Flagged Items" />
            {flagged.length === 0 && <EmptyState icon={ShieldCheck} message="No items flagged at risk or blocked." />}
            {flagged.map(i => (
              <div key={i.id} onClick={() => setSelectedItemId(i.id)}
                style={{ padding: '8px 0', borderBottom: '1px solid #F3F4F6', cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '8px' }}>
                <span style={{ fontSize: '12px', fontWeight: 600, color: '#010506' }}>{i.id} · {i.catalog.topic.slice(0, 60)}</span>
                <FlagPills item={i} />
              </div>
            ))}
          </Card>
        </div>
      </div>
    </div>
  );
}
 
function SynthList({ title, color, items }) {
  return (
    <div style={{ marginBottom: '12px' }}>
      <div style={{ fontSize: '11px', fontWeight: 700, color, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: '6px' }}>{title}</div>
      {items.map((t, i) => (
        <div key={i} style={{ fontSize: '12px', color: '#374151', lineHeight: 1.55, padding: '3px 0 3px 12px', borderLeft: `2px solid ${color}30` }}>{t}</div>
      ))}
    </div>
  );
}
 
function buildProgramSnapshot(allItems, escalations, milestoneRows, meta) {
  return {
    asOf: new Date().toISOString(),
    closeDate: CLOSE_DATE,
    daysToClose: daysUntil(CLOSE_DATE),
    executionDate: meta.executionDate,
    auditWindow: AUDIT_WINDOW,
    items: allItems.map(i => ({
      id: i.id, stream: i.catalog.stream, phase: i.catalog.phase, subsection: i.catalog.subsection,
      topic: i.catalog.topic, role: i.catalog.role, days: i.catalog.days,
      status: i.status, atRisk: i.atRisk, blocked: i.blocked,
      targetDate: i.targetDate || i.catalog.chlaTarget || null,
      dependencies: i.dependencies, openBlockers: (i.blockers || []).filter(b => !b.resolvedAt).map(b => b.text),
      evidenceCount: (i.evidence || []).length,
      owner: i.owner || null, notes: (i.notes || '').slice(0, 400),
    })),
    openEscalations: escalations.filter(e => e.status !== 'closed').map(e => ({
      id: e.id, severity: e.severity, itemIds: e.itemIds, summary: e.summary,
    })),
    reportingMilestones: milestoneRows.map(m => ({ label: m.label, due: m.due, done: m.done })),
  };
}
 
// ============================================================
// STREAM VIEW
// ============================================================
 
function StreamView({ streamId, allItems, setSelectedItemId }) {
  const stream = STREAMS.find(s => s.id === streamId);
  const [phaseFilter, setPhaseFilter] = useState('all');
  const [statusFilter, setStatusFilter] = useState('all');
  const [q, setQ] = useState('');
 
  const items = allItems
    .filter(i => i.catalog.stream === streamId)
    .filter(i => phaseFilter === 'all' || i.catalog.phase === phaseFilter)
    .filter(i => statusFilter === 'all' || (statusFilter === 'flagged' ? (i.atRisk || i.blocked) : i.status === statusFilter))
    .filter(i => !q || (i.id + ' ' + i.catalog.topic + ' ' + i.catalog.subsection + ' ' + (i.owner || '')).toLowerCase().includes(q.toLowerCase()));
 
  const totalDays = items.reduce((s, i) => s + (i.catalog.days || 0), 0);
 
  return (
    <div>
      <div style={{ marginBottom: '18px' }}>
        <div style={{ fontSize: '20px', fontWeight: 700, color: '#010506' }}>{stream.name}</div>
        <div style={{ fontSize: '13px', color: '#6B7280', marginTop: '4px', maxWidth: '820px', lineHeight: 1.55 }}>{stream.description}</div>
      </div>
 
      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap', marginBottom: '16px', alignItems: 'center' }}>
        <div style={{ position: 'relative' }}>
          <Search size={14} color="#9CA3AF" style={{ position: 'absolute', left: '10px', top: '10px' }} />
          <input value={q} onChange={e => setQ(e.target.value)} placeholder="Search items"
            style={{ ...inputStyle, width: '240px', paddingLeft: '32px' }} />
        </div>
        <select value={phaseFilter} onChange={e => setPhaseFilter(e.target.value)} style={{ ...inputStyle, width: 'auto' }}>
          <option value="all">All phases</option>
          {PHASES.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
        </select>
        <select value={statusFilter} onChange={e => setStatusFilter(e.target.value)} style={{ ...inputStyle, width: 'auto' }}>
          <option value="all">All statuses</option>
          {ITEM_STATUS.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}
          <option value="flagged">Flagged only</option>
        </select>
        <div style={{ fontSize: '12px', color: '#6B7280', marginLeft: 'auto' }}>
          {items.length} items{streamId === 'B' ? ` · ${totalDays} sized days` : ''}
        </div>
      </div>
 
      <Card style={{ padding: 0, overflow: 'hidden' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '110px 1fr 90px 90px 120px 130px 110px', gap: '0', padding: '10px 16px', background: '#F9FAFB', borderBottom: '1px solid #E5E7EB', fontSize: '10px', fontWeight: 700, color: '#6B7280', letterSpacing: '0.06em', textTransform: 'uppercase' }}>
          <div>Item</div><div>Topic</div><div>Phase</div><div>Role</div><div>Target</div><div>Status</div><div>Flags</div>
        </div>
        {items.length === 0 && <EmptyState icon={Search} message="No items match the current filters." />}
        {items.map(i => {
          const sl = slackInfo(i);
          return (
            <div key={i.id} onClick={() => setSelectedItemId(i.id)}
              style={{ display: 'grid', gridTemplateColumns: '110px 1fr 90px 90px 120px 130px 110px', gap: '0', padding: '12px 16px', borderBottom: '1px solid #F3F4F6', cursor: 'pointer', alignItems: 'center' }}
              onMouseEnter={e => e.currentTarget.style.background = '#F9FAFB'}
              onMouseLeave={e => e.currentTarget.style.background = '#FFFFFF'}>
              <div style={{ fontSize: '12px', fontWeight: 700, color: stream.color }}>{i.id}</div>
              <div style={{ fontSize: '13px', color: '#010506', paddingRight: '12px' }}>
                {i.catalog.topic}
                <div style={{ fontSize: '11px', color: '#9CA3AF', marginTop: '2px' }}>{i.catalog.subsection} · {i.catalog.subsectionName}{i.catalog.days ? ` · ${i.catalog.days}d` : ''}{i.owner ? ` · ${i.owner}` : ''}</div>
              </div>
              <div style={{ fontSize: '12px', color: '#6B7280' }}>{i.catalog.phase}</div>
              <div><RolePill role={i.catalog.role} /></div>
              <div style={{ fontSize: '12px', color: sl.overdue ? '#B91C1C' : '#6B7280', fontWeight: sl.overdue ? 700 : 400 }}>
                {sl.target ? fmtLongDate(sl.target) : '(none)'}
              </div>
              <div><StatusPill status={i.status} /></div>
              <div><FlagPills item={i} /></div>
            </div>
          );
        })}
      </Card>
    </div>
  );
}
 
// ============================================================
// ITEM DETAIL
// ============================================================
 
function ItemDetail({ item, allItems, saveItem, onClose, setSelectedItemId }) {
  const cat = item.catalog;
  const stream = STREAMS.find(s => s.id === cat.stream);
  const [tab, setTab] = useState('overview');
  const [draft, setDraft] = useState({
    owner: item.owner, chlaContact: item.chlaContact, raci: item.raci,
    targetDate: item.targetDate, actualDate: item.actualDate, notes: item.notes,
  });
  const [newUpdate, setNewUpdate] = useState('');
  const [newBlocker, setNewBlocker] = useState('');
  const [newMilestone, setNewMilestone] = useState({ label: '', target: '' });
  const [verifyWarning, setVerifyWarning] = useState(null);
 
  const persist = (updates) => saveItem(item.id, updates);
  const saveFields = () => persist(draft);
 
  const setStatus = (status) => {
    setVerifyWarning(null);
    if (status === 'verified') {
      const reviewed = (item.evidence || []).some(e => e.review);
      if ((item.evidence || []).length === 0) {
        setVerifyWarning('Verified requires at least one evidence document attached. Attach evidence in the Evidence tab first. Delivered is the ceiling without evidence.');
        return;
      }
      if (!reviewed) {
        setVerifyWarning('No attached evidence has an AI sufficiency review yet. Run the review in the Evidence tab, or proceed only if the Delivery Lead has manually validated the evidence and noted it in Updates.');
      }
      persist({ status, actualDate: draft.actualDate || todayISO(), atRisk: false, blocked: false });
      return;
    }
    persist({ status });
  };
 
  const addUpdate = () => {
    if (!newUpdate.trim()) return;
    persist({ updates: [{ id: newId('u'), text: newUpdate.trim(), at: new Date().toISOString() }, ...(item.updates || [])] });
    setNewUpdate('');
  };
 
  const addBlocker = () => {
    if (!newBlocker.trim()) return;
    persist({ blockers: [...(item.blockers || []), { id: newId('b'), text: newBlocker.trim(), raisedAt: new Date().toISOString(), resolvedAt: null }], blocked: true });
    setNewBlocker('');
  };
 
  const resolveBlocker = (bid) => {
    const blockers = (item.blockers || []).map(b => b.id === bid ? { ...b, resolvedAt: new Date().toISOString() } : b);
    persist({ blockers, blocked: blockers.some(b => !b.resolvedAt) });
  };
 
  const addMilestone = () => {
    if (!newMilestone.label.trim()) return;
    persist({ milestones: [...(item.milestones || []), { id: newId('m'), label: newMilestone.label.trim(), target: newMilestone.target || '', actual: '' }] });
    setNewMilestone({ label: '', target: '' });
  };
 
  const setMilestoneActual = (mid, actual) => {
    persist({ milestones: (item.milestones || []).map(m => m.id === mid ? { ...m, actual } : m) });
  };
 
  const removeMilestone = (mid) => {
    persist({ milestones: (item.milestones || []).filter(m => m.id !== mid) });
  };
 
  const toggleDependency = (depId) => {
    const deps = item.dependencies || [];
    persist({ dependencies: deps.includes(depId) ? deps.filter(d => d !== depId) : [...deps, depId] });
  };
 
  const dependents = allItems.filter(i => (i.dependencies || []).includes(item.id));
  const tabs = [
    { id: 'overview', label: 'Overview' },
    { id: 'milestones', label: `Milestones (${(item.milestones || []).length})` },
    { id: 'evidence', label: `Evidence (${(item.evidence || []).length})` },
    { id: 'dependencies', label: `Dependencies (${(item.dependencies || []).length})` },
    { id: 'updates', label: `Updates (${(item.updates || []).length})` },
  ];
 
  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(1,5,6,0.5)', zIndex: 1000, display: 'flex', justifyContent: 'flex-end' }} onClick={onClose}>
      <div onClick={e => e.stopPropagation()} style={{ width: 'min(760px, 100%)', height: '100%', background: '#FAFBFC', overflowY: 'auto', boxShadow: '-8px 0 30px rgba(0,0,0,0.25)' }}>
        <div style={{ background: '#010506', padding: '20px 24px', position: 'sticky', top: 0, zIndex: 5 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '12px' }}>
            <div>
              <div style={{ fontSize: '11px', color: stream.color === '#0A4569' ? '#7FB3D8' : stream.color, fontWeight: 700, letterSpacing: '0.08em' }}>{stream.name.toUpperCase()}</div>
              <div style={{ fontSize: '17px', fontWeight: 700, color: '#FFFFFF', marginTop: '4px' }}>{item.id} · {cat.topic}</div>
              <div style={{ fontSize: '12px', color: '#9CA3AF', marginTop: '4px' }}>
                {cat.subsection} {cat.subsectionName} · {PHASES.find(p => p.id === cat.phase)?.name} · <RolePill role={cat.role} />{cat.days ? ` · ${cat.days} sized days` : ''}{cat.enterpriseAdj ? ` · ${cat.enterpriseAdj}` : ''}
              </div>
            </div>
            <button onClick={onClose} style={{ background: 'none', border: 'none', color: '#9CA3AF', cursor: 'pointer' }}><X size={20} /></button>
          </div>
          <div style={{ display: 'flex', gap: '4px', marginTop: '16px', overflowX: 'auto' }}>
            {tabs.map(t => (
              <button key={t.id} onClick={() => setTab(t.id)} style={{
                padding: '8px 14px', background: tab === t.id ? '#FAFBFC' : 'transparent',
                color: tab === t.id ? '#010506' : '#9CA3AF', border: 'none',
                borderRadius: '6px 6px 0 0', fontSize: '12px', fontWeight: 600, cursor: 'pointer', whiteSpace: 'nowrap',
              }}>{t.label}</button>
            ))}
          </div>
        </div>
 
        <div style={{ padding: '24px' }}>
          {tab === 'overview' && (
            <div>
              <FieldSection label="Status Workflow">
                <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
                  {ITEM_STATUS.map(s => (
                    <button key={s.id} onClick={() => setStatus(s.id)} style={{
                      padding: '8px 14px', borderRadius: '6px', fontSize: '12px', fontWeight: 700, cursor: 'pointer',
                      border: `1.5px solid ${item.status === s.id ? s.color : '#E5E7EB'}`,
                      background: item.status === s.id ? s.color : '#FFFFFF',
                      color: item.status === s.id ? '#FFFFFF' : '#374151',
                    }}>{s.label}</button>
                  ))}
                </div>
                {verifyWarning && (
                  <div style={{ marginTop: '10px', padding: '10px 12px', background: '#FEF3C7', border: '1px solid #F59E0B', borderRadius: '6px', fontSize: '12px', color: '#92400E' }}>{verifyWarning}</div>
                )}
                <div style={{ fontSize: '11px', color: '#6B7280', marginTop: '8px', lineHeight: 1.5 }}>
                  Delivered means project-plan complete. Verified means closed at the audit-defensible standard: evidence attached and reviewed. The Diagnostic Report documents that the gap between these two definitions is where five prior remediation attempts failed.
                </div>
                <div style={{ display: 'flex', gap: '16px', marginTop: '12px' }}>
                  <label style={{ fontSize: '12px', color: '#374151', display: 'flex', alignItems: 'center', gap: '6px' }}>
                    <input type="checkbox" checked={item.atRisk} onChange={e => persist({ atRisk: e.target.checked })} style={{ accentColor: '#D97706' }} /> At Risk
                  </label>
                  <label style={{ fontSize: '12px', color: '#374151', display: 'flex', alignItems: 'center', gap: '6px' }}>
                    <input type="checkbox" checked={item.blocked} onChange={e => persist({ blocked: e.target.checked })} style={{ accentColor: '#B91C1C' }} /> Blocked
                  </label>
                </div>
              </FieldSection>
 
              <FieldSection label="Ownership & Dates">
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
                  <FormField label="Konnect Owner"><input style={inputStyle} value={draft.owner} onChange={e => setDraft({ ...draft, owner: e.target.value })} placeholder="e.g., Delivery Lead" /></FormField>
                  <FormField label="CHLA Point of Contact"><input style={inputStyle} value={draft.chlaContact} onChange={e => setDraft({ ...draft, chlaContact: e.target.value })} placeholder="Functional lead" /></FormField>
                  <FormField label="Target Date"><input type="date" style={inputStyle} value={draft.targetDate} onChange={e => setDraft({ ...draft, targetDate: e.target.value })} /></FormField>
                  <FormField label="Actual Completion Date"><input type="date" style={inputStyle} value={draft.actualDate} onChange={e => setDraft({ ...draft, actualDate: e.target.value })} /></FormField>
                </div>
                <FormField label="RACI Notes">
                  <textarea style={textareaStyle} value={draft.raci} onChange={e => setDraft({ ...draft, raci: e.target.value })} placeholder="Responsible, Accountable, Consulted, Informed across HR, Finance, Legal, Operations" />
                </FormField>
                <FormField label="Working Notes">
                  <textarea style={{ ...textareaStyle, minHeight: '110px' }} value={draft.notes} onChange={e => setDraft({ ...draft, notes: e.target.value })} placeholder="Konnect-internal working notes for this item" />
                </FormField>
                <button onClick={saveFields} style={btnPrimary}><Save size={14} /> Save Fields</button>
              </FieldSection>
 
              <FieldSection label={`Blockers (${(item.blockers || []).filter(b => !b.resolvedAt).length} open)`}>
                {(item.blockers || []).map(b => (
                  <div key={b.id} style={{ display: 'flex', alignItems: 'flex-start', gap: '10px', padding: '8px 0', borderBottom: '1px solid #F3F4F6' }}>
                    <AlertTriangle size={14} color={b.resolvedAt ? '#9CA3AF' : '#B91C1C'} style={{ marginTop: '2px', flexShrink: 0 }} />
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: '12px', color: b.resolvedAt ? '#9CA3AF' : '#111827', textDecoration: b.resolvedAt ? 'line-through' : 'none' }}>{b.text}</div>
                      <div style={{ fontSize: '11px', color: '#9CA3AF', marginTop: '2px' }}>Raised {fmtDateTime(b.raisedAt)}{b.resolvedAt ? ` · resolved ${fmtDateTime(b.resolvedAt)}` : ''}</div>
                    </div>
                    {!b.resolvedAt && <button onClick={() => resolveBlocker(b.id)} style={{ ...btnSecondary, padding: '4px 10px', fontSize: '11px' }}>Resolve</button>}
                  </div>
                ))}
                <div style={{ display: 'flex', gap: '8px', marginTop: '10px' }}>
                  <input style={{ ...inputStyle, flex: 1 }} value={newBlocker} onChange={e => setNewBlocker(e.target.value)} placeholder="Describe the blocker" onKeyDown={e => e.key === 'Enter' && addBlocker()} />
                  <button onClick={addBlocker} style={btnSecondary}><Plus size={14} /> Add</button>
                </div>
              </FieldSection>
            </div>
          )}
 
          {tab === 'milestones' && (
            <div>
              {(item.milestones || []).length === 0 && <EmptyState icon={Flag} message="No milestones yet. Add the intermediate checkpoints between start and closure." />}
              {(item.milestones || []).map(m => {
                const overdue = m.target && !m.actual && daysUntil(m.target) < 0;
                return (
                  <div key={m.id} style={{ display: 'flex', alignItems: 'center', gap: '10px', padding: '10px 0', borderBottom: '1px solid #F3F4F6' }}>
                    <Flag size={14} color={m.actual ? '#15803D' : overdue ? '#B91C1C' : '#1872B4'} style={{ flexShrink: 0 }} />
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: '13px', color: '#111827' }}>{m.label}</div>
                      <div style={{ fontSize: '11px', color: overdue ? '#B91C1C' : '#6B7280', marginTop: '2px' }}>
                        Target {m.target ? fmtLongDate(m.target) : '(none)'}{m.actual ? ` · Actual ${fmtLongDate(m.actual)}` : overdue ? ' · OVERDUE' : ''}
                      </div>
                    </div>
                    {!m.actual && <button onClick={() => setMilestoneActual(m.id, todayISO())} style={{ ...btnSecondary, padding: '4px 10px', fontSize: '11px' }}>Mark Done</button>}
                    <button onClick={() => removeMilestone(m.id)} style={{ background: 'none', border: 'none', color: '#9CA3AF', cursor: 'pointer' }}><Trash2 size={14} /></button>
                  </div>
                );
              })}
              <div style={{ display: 'flex', gap: '8px', marginTop: '14px' }}>
                <input style={{ ...inputStyle, flex: 2 }} value={newMilestone.label} onChange={e => setNewMilestone({ ...newMilestone, label: e.target.value })} placeholder="Milestone description" />
                <input type="date" style={{ ...inputStyle, flex: 1 }} value={newMilestone.target} onChange={e => setNewMilestone({ ...newMilestone, target: e.target.value })} />
                <button onClick={addMilestone} style={btnPrimary}><Plus size={14} /> Add</button>
              </div>
            </div>
          )}
 
          {tab === 'evidence' && (
            <EvidencePanel item={item} persist={persist} />
          )}
 
          {tab === 'dependencies' && (
            <div>
              <FieldSection label="This Item Depends On">
                <div style={{ fontSize: '12px', color: '#6B7280', marginBottom: '10px' }}>
                  Select the items that must close before this one can close. The program synthesis reasons over these links, in particular Stream B governance preconditions blocking Stream A closure.
                </div>
                <DependencyPicker allItems={allItems} item={item} toggleDependency={toggleDependency} setSelectedItemId={setSelectedItemId} />
              </FieldSection>
              <FieldSection label={`Items Depending On This One (${dependents.length})`}>
                {dependents.length === 0 && <div style={{ fontSize: '12px', color: '#9CA3AF' }}>None recorded.</div>}
                {dependents.map(d => (
                  <div key={d.id} onClick={() => setSelectedItemId(d.id)} style={{ padding: '8px 0', borderBottom: '1px solid #F3F4F6', cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <span style={{ fontSize: '12px', color: '#111827' }}>{d.id} · {d.catalog.topic.slice(0, 70)}</span>
                    <StatusPill status={d.status} />
                  </div>
                ))}
              </FieldSection>
            </div>
          )}
 
          {tab === 'updates' && (
            <div>
              <div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
                <textarea style={{ ...textareaStyle, flex: 1, minHeight: '60px' }} value={newUpdate} onChange={e => setNewUpdate(e.target.value)} placeholder="Log a status update. The Program Coordinator is the single scribe; entries feed the weekly coordination notes and monthly reports." />
                <button onClick={addUpdate} style={{ ...btnPrimary, alignSelf: 'flex-start' }}><Plus size={14} /> Log</button>
              </div>
              {(item.updates || []).length === 0 && <EmptyState icon={MessageSquare} message="No updates logged." />}
              {(item.updates || []).map(u => (
                <div key={u.id} style={{ padding: '10px 0', borderBottom: '1px solid #F3F4F6' }}>
                  <div style={{ fontSize: '13px', color: '#111827', lineHeight: 1.55, whiteSpace: 'pre-wrap' }}>{u.text}</div>
                  <div style={{ fontSize: '11px', color: '#9CA3AF', marginTop: '4px' }}>{fmtDateTime(u.at)}</div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
 
function DependencyPicker({ allItems, item, toggleDependency, setSelectedItemId }) {
  const [q, setQ] = useState('');
  const deps = item.dependencies || [];
  const candidates = allItems.filter(i => i.id !== item.id)
    .filter(i => !q || (i.id + ' ' + i.catalog.topic).toLowerCase().includes(q.toLowerCase()));
  const selected = candidates.filter(i => deps.includes(i.id));
  const unselected = candidates.filter(i => !deps.includes(i.id)).slice(0, q ? 25 : 8);
 
  return (
    <div>
      {selected.map(d => (
        <div key={d.id} style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 0', borderBottom: '1px solid #F3F4F6' }}>
          <input type="checkbox" checked onChange={() => toggleDependency(d.id)} style={{ accentColor: '#1872B4' }} />
          <span onClick={() => setSelectedItemId(d.id)} style={{ fontSize: '12px', color: '#111827', cursor: 'pointer', flex: 1 }}>{d.id} · {d.catalog.topic.slice(0, 70)}</span>
          <StatusPill status={d.status} />
        </div>
      ))}
      <input style={{ ...inputStyle, margin: '10px 0' }} value={q} onChange={e => setQ(e.target.value)} placeholder="Search all 63 items to add a dependency" />
      {unselected.map(d => (
        <div key={d.id} style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 0', borderBottom: '1px solid #F3F4F6' }}>
          <input type="checkbox" checked={false} onChange={() => toggleDependency(d.id)} style={{ accentColor: '#1872B4' }} />
          <span style={{ fontSize: '12px', color: '#6B7280', flex: 1 }}>{d.id} · {d.catalog.topic.slice(0, 70)}</span>
        </div>
      ))}
    </div>
  );
}
 
// ============================================================
// EVIDENCE PANEL (SharePoint routing + AI sufficiency review)
// ============================================================
 
function EvidencePanel({ item, persist }) {
  const [spFiles, setSpFiles] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [reviewing, setReviewing] = useState(null);
 
  const loadFiles = async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await fetch(window.KONNECT_API_BASE + '/api/docs/list', {
        method: 'POST', credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ recursive: true }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data?.error || ('HTTP ' + res.status));
      setSpFiles(data.files || []);
    } catch (e) {
      setError(e.message);
    } finally {
      setLoading(false);
    }
  };
 
  const routedHere = (spFiles || []).filter(f => f.itemId === item.id);
  const attachedIds = new Set((item.evidence || []).map(e => e.fileId));
 
  const attach = (f) => {
    persist({ evidence: [...(item.evidence || []), { id: newId('e'), fileName: f.name, fileId: f.id, webUrl: f.webUrl, note: '', addedAt: new Date().toISOString(), review: null }] });
  };
 
  const detach = (eid) => {
    persist({ evidence: (item.evidence || []).filter(e => e.id !== eid) });
  };
 
  const runReview = async (ev) => {
    setReviewing(ev.id);
    setError(null);
    try {
      let extractedText = null;
      const isPdf = ev.fileName.toLowerCase().endsWith('.pdf');
      if (!isPdf) {
        const exRes = await fetch(window.KONNECT_API_BASE + '/api/docs/extract', {
          method: 'POST', credentials: 'include',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ fileId: ev.fileId }),
        });
        const exData = await exRes.json();
        if (!exRes.ok) throw new Error(exData?.error || ('Extract failed: HTTP ' + exRes.status));
        extractedText = exData.text;
      }
      const res = await fetch(window.KONNECT_API_BASE + '/api/docs/review', {
        method: 'POST', credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          fileId: ev.fileId,
          filename: ev.fileName,
          extractedText,
          itemContext: {
            id: item.id, topic: item.catalog.topic,
            stream: item.catalog.stream, role: item.catalog.role,
            subsection: item.catalog.subsection, subsectionName: item.catalog.subsectionName,
            notes: item.notes || '',
            milestones: (item.milestones || []).map(m => m.label),
          },
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data?.error?.message || data?.error || ('HTTP ' + res.status));
      const text = (data.content || []).filter(c => c.type === 'text').map(c => c.text).join('\n');
      const review = JSON.parse(text.replace(/```json|```/g, '').trim());
      persist({ evidence: (item.evidence || []).map(e => e.id === ev.id ? { ...e, review, reviewedAt: new Date().toISOString() } : e) });
    } catch (e) {
      setError(e.message);
    } finally {
      setReviewing(null);
    }
  };
 
  return (
    <div>
      <FieldSection label={`Attached Evidence (${(item.evidence || []).length})`}>
        <div style={{ fontSize: '12px', color: '#6B7280', marginBottom: '12px', lineHeight: 1.55 }}>
          Verification at the audit-defensible standard requires evidence. Attach the closure documents from the Konnect SharePoint below, then run the AI sufficiency review, which reads the evidence against this item's closure requirements and returns a verify-or-reject recommendation with gaps.
        </div>
        {(item.evidence || []).length === 0 && <EmptyState icon={FileCheck} message="No evidence attached." />}
        {(item.evidence || []).map(ev => (
          <div key={ev.id} style={{ border: '1px solid #E5E7EB', borderRadius: '8px', padding: '12px', marginBottom: '10px', background: '#FFFFFF' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <FileText size={14} color="#1872B4" style={{ flexShrink: 0 }} />
              <a href={ev.webUrl} target="_blank" rel="noreferrer" style={{ fontSize: '13px', fontWeight: 600, color: '#1872B4', textDecoration: 'none', flex: 1 }}>{ev.fileName}</a>
              <button onClick={() => runReview(ev)} disabled={reviewing === ev.id} style={{ ...btnSecondary, padding: '5px 10px', fontSize: '11px' }}>
                <Sparkles size={12} /> {reviewing === ev.id ? 'Reviewing...' : ev.review ? 'Re-run Review' : 'Sufficiency Review'}
              </button>
              <button onClick={() => detach(ev.id)} style={{ background: 'none', border: 'none', color: '#9CA3AF', cursor: 'pointer' }}><Trash2 size={13} /></button>
            </div>
            {ev.review && (
              <div style={{ marginTop: '10px', padding: '12px', background: '#F9FAFB', borderRadius: '6px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
                  <span style={{
                    padding: '3px 10px', borderRadius: '12px', fontSize: '11px', fontWeight: 700,
                    background: ev.review.recommendation === 'verify' ? '#15803D18' : ev.review.recommendation === 'reject' ? '#B91C1C18' : '#D9770618',
                    color: ev.review.recommendation === 'verify' ? '#15803D' : ev.review.recommendation === 'reject' ? '#B91C1C' : '#D97706',
                  }}>{(ev.review.recommendation || 'inconclusive').toUpperCase()}</span>
                  <span style={{ fontSize: '11px', color: '#9CA3AF' }}>Reviewed {fmtDateTime(ev.reviewedAt)}</span>
                </div>
                <div style={{ fontSize: '12px', color: '#374151', lineHeight: 1.55, marginBottom: '8px' }}>{ev.review.summary}</div>
                {(ev.review.gaps || []).length > 0 && (
                  <div>
                    <div style={{ fontSize: '10px', fontWeight: 700, color: '#B91C1C', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: '4px' }}>Gaps to Close Before Verification</div>
                    {(ev.review.gaps || []).map((g, i) => (
                      <div key={i} style={{ fontSize: '12px', color: '#374151', padding: '2px 0 2px 10px', borderLeft: '2px solid #B91C1C30' }}>{g}</div>
                    ))}
                  </div>
                )}
              </div>
            )}
          </div>
        ))}
      </FieldSection>
 
      <FieldSection label="SharePoint Documents Routed to This Item">
        <div style={{ fontSize: '12px', color: '#6B7280', marginBottom: '10px' }}>
          Files route by naming convention: start the filename with the item ID, for example {item.id}_ClosurePackage.pdf. Folder names also route.
        </div>
        <button onClick={loadFiles} disabled={loading} style={btnSecondary}>
          <RefreshCw size={13} /> {loading ? 'Loading SharePoint...' : spFiles ? 'Refresh File List' : 'Load SharePoint Files'}
        </button>
        {error && <div style={{ fontSize: '12px', color: '#B91C1C', marginTop: '8px' }}>Error: {error}</div>}
        {spFiles && routedHere.length === 0 && (
          <div style={{ fontSize: '12px', color: '#9CA3AF', marginTop: '10px' }}>No files routed to {item.id}. {spFiles.length} files visible in the repository overall.</div>
        )}
        {routedHere.map(f => (
          <div key={f.id} style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '8px 0', borderBottom: '1px solid #F3F4F6' }}>
            <FileText size={13} color="#6B7280" />
            <span style={{ fontSize: '12px', color: '#111827', flex: 1 }}>{f.name}</span>
            <span style={{ fontSize: '11px', color: '#9CA3AF' }}>{fmtDate(f.modified)}</span>
            {attachedIds.has(f.id)
              ? <span style={{ fontSize: '11px', color: '#15803D', fontWeight: 700 }}>Attached</span>
              : <button onClick={() => attach(f)} style={{ ...btnSecondary, padding: '4px 10px', fontSize: '11px' }}><Plus size={12} /> Attach</button>}
          </div>
        ))}
      </FieldSection>
    </div>
  );
}
 
// ============================================================
// TIMELINE
// ============================================================
 
function TimelineView({ allItems, meta, setSelectedItemId }) {
  const dated = allItems
    .map(i => ({ ...i, _target: i.targetDate || i.catalog.chlaTarget || null }))
    .filter(i => i._target)
    .sort((a, b) => a._target.localeCompare(b._target));
  const undated = allItems.filter(i => !(i.targetDate || i.catalog.chlaTarget));
 
  const byMonth = {};
  dated.forEach(i => {
    const key = i._target.slice(0, 7);
    (byMonth[key] = byMonth[key] || []).push(i);
  });
  const months = Object.keys(byMonth).sort();
  const fmtMonth = (ym) => new Date(ym + '-01T00:00:00').toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
 
  return (
    <div>
      <div style={{ marginBottom: '18px' }}>
        <div style={{ fontSize: '20px', fontWeight: 700, color: '#010506' }}>Timeline & Slack</div>
        <div style={{ fontSize: '13px', color: '#6B7280', marginTop: '4px' }}>
          Every dated item against the {fmtLongDate(CLOSE_DATE)} close. Slack is the buffer between an item's target and the close date; the Diagnostic Report flags that Stream A targets cluster with almost no buffer.
        </div>
      </div>
      {months.map(m => {
        const isCloseMonth = m === CLOSE_DATE.slice(0, 7);
        return (
          <div key={m} style={{ marginBottom: '22px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '10px' }}>
              <div style={{ fontSize: '14px', fontWeight: 700, color: isCloseMonth ? '#B91C1C' : '#010506' }}>{fmtMonth(m)}</div>
              {isCloseMonth && <span style={{ fontSize: '10px', fontWeight: 700, color: '#B91C1C', letterSpacing: '0.06em' }}>AUDIT CLOSE + TRANSACTIONAL AUDIT WINDOW</span>}
              <div style={{ flex: 1, height: '1px', background: '#E5E7EB' }} />
            </div>
            {byMonth[m].map(i => {
              const sl = slackInfo(i);
              const slackToClose = daysBetween(i._target, CLOSE_DATE);
              const done = i.status === 'verified';
              return (
                <div key={i.id} onClick={() => setSelectedItemId(i.id)}
                  style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '10px 14px', background: '#FFFFFF', border: '1px solid #E5E7EB', borderLeft: `3px solid ${STREAMS.find(s => s.id === i.catalog.stream).color}`, borderRadius: '8px', marginBottom: '8px', cursor: 'pointer' }}>
                  <div style={{ width: '92px', fontSize: '12px', fontWeight: 700, color: sl.overdue ? '#B91C1C' : '#6B7280', flexShrink: 0 }}>{fmtLongDate(i._target).replace(', 2026', '')}</div>
                  <div style={{ flex: 1 }}>
                    <span style={{ fontSize: '13px', fontWeight: 600, color: '#010506' }}>{i.id} · {i.catalog.topic}</span>
                    <div style={{ fontSize: '11px', color: '#9CA3AF', marginTop: '2px' }}>
                      {STREAMS.find(s => s.id === i.catalog.stream).short} · {i.catalog.phase} · <RolePill role={i.catalog.role} />
                    </div>
                  </div>
                  <div style={{ fontSize: '11px', color: done ? '#15803D' : sl.overdue ? '#B91C1C' : slackToClose < 30 ? '#D97706' : '#6B7280', fontWeight: 600, width: '130px', textAlign: 'right', flexShrink: 0 }}>
                    {done ? 'Verified' : sl.overdue ? `${Math.abs(sl.toTarget)}d overdue` : `${slackToClose}d slack to close`}
                  </div>
                  <StatusPill status={i.status} />
                  <FlagPills item={i} />
                </div>
              );
            })}
          </div>
        );
      })}
      {undated.length > 0 && (
        <Card>
          <CardHeader title={`Undated Items (${undated.length})`} subtitle="No target set. Everything on the program should carry a date; set targets at intake re-baseline." />
          {undated.map(i => (
            <div key={i.id} onClick={() => setSelectedItemId(i.id)} style={{ padding: '8px 0', borderBottom: '1px solid #F3F4F6', cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span style={{ fontSize: '12px', color: '#111827' }}>{i.id} · {i.catalog.topic.slice(0, 80)}</span>
              <StatusPill status={i.status} />
            </div>
          ))}
        </Card>
      )}
    </div>
  );
}
 
// ============================================================
// ESCALATIONS
// ============================================================
 
const ESC_SEVERITY = [
  { id: 'critical', label: 'Critical', color: '#B91C1C' },
  { id: 'high', label: 'High', color: '#D97706' },
  { id: 'moderate', label: 'Moderate', color: '#1872B4' },
];
const ESC_STATUS = [
  { id: 'open', label: 'Open' },
  { id: 'reported', label: 'Reported to GC/Chair' },
  { id: 'closed', label: 'Closed' },
];
 
function EscalationsView({ escalations, allItems, saveEscalation, deleteEscalation, meta }) {
  const [editing, setEditing] = useState(null);
  const sorted = [...escalations].sort((a, b) => (b.raisedAt || '').localeCompare(a.raisedAt || ''));
 
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '18px' }}>
        <div>
          <div style={{ fontSize: '20px', fontWeight: 700, color: '#010506' }}>Escalation & Risk Register</div>
          <div style={{ fontSize: '13px', color: '#6B7280', marginTop: '4px', maxWidth: '760px', lineHeight: 1.55 }}>
            Threshold-triggered escalations to the AC Chair and GC per the SOW cadence. Raise an escalation when defined risk thresholds are crossed: slip risk against the close, a Stream B precondition blocking Stream A, or a repeat finding across cycles.
          </div>
        </div>
        <button onClick={() => setEditing({ id: newId('esc'), severity: 'high', status: 'open', itemIds: [], summary: '', threshold: '', narrative: '', raisedAt: new Date().toISOString() })} style={btnPrimary}>
          <Plus size={14} /> New Escalation
        </button>
      </div>
 
      {sorted.length === 0 && <Card><EmptyState icon={AlertTriangle} message="No escalations raised." /></Card>}
      {sorted.map(e => {
        const sev = ESC_SEVERITY.find(s => s.id === e.severity) || ESC_SEVERITY[1];
        return (
          <Card key={e.id} style={{ marginBottom: '12px', borderLeft: `3px solid ${sev.color}` }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '12px' }}>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '10px', flexWrap: 'wrap' }}>
                  <span style={{ padding: '3px 10px', background: sev.color + '18', color: sev.color, borderRadius: '12px', fontSize: '11px', fontWeight: 700 }}>{sev.label.toUpperCase()}</span>
                  <span style={{ fontSize: '11px', color: '#6B7280', fontWeight: 600 }}>{(ESC_STATUS.find(s => s.id === e.status) || {}).label}</span>
                  <span style={{ fontSize: '11px', color: '#9CA3AF' }}>Raised {fmtDateTime(e.raisedAt)}</span>
                </div>
                <div style={{ fontSize: '14px', fontWeight: 700, color: '#010506', marginTop: '8px' }}>{e.summary || '(no summary)'}</div>
                {e.threshold && <div style={{ fontSize: '12px', color: '#6B7280', marginTop: '4px' }}>Threshold: {e.threshold}</div>}
                {(e.itemIds || []).length > 0 && (
                  <div style={{ fontSize: '12px', color: '#1872B4', marginTop: '4px' }}>Linked items: {(e.itemIds || []).join(', ')}</div>
                )}
                {e.narrative && <div style={{ fontSize: '12px', color: '#374151', marginTop: '8px', lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>{e.narrative}</div>}
              </div>
              <button onClick={() => setEditing(e)} style={btnSecondary}><Edit3 size={13} /> Edit</button>
            </div>
          </Card>
        );
      })}
 
      {editing && (
        <EscalationModal record={editing} allItems={allItems} meta={meta}
          onClose={() => setEditing(null)}
          onSave={async (r) => { await saveEscalation(r); setEditing(null); }}
          onDelete={async (id) => { await deleteEscalation(id); setEditing(null); }} />
      )}
    </div>
  );
}
 
function EscalationModal({ record, allItems, meta, onClose, onSave, onDelete }) {
  const [draft, setDraft] = useState({ ...record });
  const [drafting, setDrafting] = useState(false);
  const [error, setError] = useState(null);
 
  const toggleItem = (id) => {
    const ids = draft.itemIds || [];
    setDraft({ ...draft, itemIds: ids.includes(id) ? ids.filter(x => x !== id) : [...ids, id] });
  };
 
  const draftMemo = async () => {
    setDrafting(true);
    setError(null);
    try {
      const linked = (draft.itemIds || []).map(id => allItems.find(i => i.id === id)).filter(Boolean);
      const sys = `You are the Konnect Independent Program Management function for the CHLA wage and hour remediation engagement, drafting an ad hoc escalation memo to the Audit Committee Chair through the General Counsel. Attorney work product, privileged, prepared at the direction of counsel. Plain professional voice. No emdashes anywhere: use commas, colons, or periods. No bullets; short paragraphs. 250 to 400 words. Structure: what threshold was crossed, the factual basis from workstream data, the impact on the November 30, 2026 close, the action requested or underway, and the date by which the next update will follow.`;
      const usr = `Escalation summary: ${draft.summary}\nSeverity: ${draft.severity}\nThreshold crossed: ${draft.threshold || '(state the applicable threshold)'}\nDays to close: ${daysUntil(CLOSE_DATE)}\n\nLinked workstream items:\n${linked.map(i => `- ${i.id} (${i.catalog.stream}/${i.catalog.phase}) ${i.catalog.topic}: status ${i.status}${i.blocked ? ', BLOCKED' : ''}${i.atRisk ? ', AT RISK' : ''}; target ${i.targetDate || i.catalog.chlaTarget || 'none'}; open blockers: ${(i.blockers || []).filter(b => !b.resolvedAt).map(b => b.text).join('; ') || 'none'}`).join('\n') || '(none linked)'}\n\nExisting narrative notes from the register:\n${draft.narrative || '(none)'}\n\nDraft the escalation memo body.`;
      const text = await callClaude(sys, usr, false);
      setDraft({ ...draft, narrative: text });
    } catch (e) {
      setError(e.message);
    } finally {
      setDrafting(false);
    }
  };
 
  return (
    <Modal title={record.summary ? 'Edit Escalation' : 'New Escalation'} onClose={onClose}>
      <FormField label="Summary">
        <input style={inputStyle} value={draft.summary} onChange={e => setDraft({ ...draft, summary: e.target.value })} placeholder="One-line escalation summary" />
      </FormField>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
        <FormField label="Severity">
          <select style={inputStyle} value={draft.severity} onChange={e => setDraft({ ...draft, severity: e.target.value })}>
            {ESC_SEVERITY.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}
          </select>
        </FormField>
        <FormField label="Status">
          <select style={inputStyle} value={draft.status} onChange={e => setDraft({ ...draft, status: e.target.value })}>
            {ESC_STATUS.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}
          </select>
        </FormField>
      </div>
      <FormField label="Threshold Crossed">
        <input style={inputStyle} value={draft.threshold} onChange={e => setDraft({ ...draft, threshold: e.target.value })} placeholder="Which defined risk threshold triggered this escalation" />
      </FormField>
      <FormField label="Linked Items">
        <EscItemPicker allItems={allItems} selected={draft.itemIds || []} toggle={toggleItem} />
      </FormField>
      <FormField label="Narrative / Memo Body">
        <textarea style={{ ...textareaStyle, minHeight: '160px' }} value={draft.narrative} onChange={e => setDraft({ ...draft, narrative: e.target.value })} />
      </FormField>
      {error && <div style={{ fontSize: '12px', color: '#B91C1C', marginBottom: '10px' }}>Error: {error}</div>}
      <div style={{ display: 'flex', gap: '8px', justifyContent: 'space-between' }}>
        <button onClick={() => onDelete(draft.id)} style={{ ...btnSecondary, color: '#B91C1C' }}><Trash2 size={13} /> Delete</button>
        <div style={{ display: 'flex', gap: '8px' }}>
          <button onClick={draftMemo} disabled={drafting} style={btnSecondary}><Sparkles size={13} /> {drafting ? 'Drafting...' : 'AI Draft Memo'}</button>
          <button onClick={() => onSave(draft)} style={btnPrimary}><Save size={13} /> Save</button>
        </div>
      </div>
    </Modal>
  );
}
 
function EscItemPicker({ allItems, selected, toggle }) {
  const [q, setQ] = useState('');
  const flaggedFirst = [...allItems].sort((a, b) => ((b.atRisk || b.blocked) ? 1 : 0) - ((a.atRisk || a.blocked) ? 1 : 0));
  const shown = flaggedFirst.filter(i => !q || (i.id + ' ' + i.catalog.topic).toLowerCase().includes(q.toLowerCase())).slice(0, q ? 20 : 8);
  return (
    <div>
      <input style={{ ...inputStyle, marginBottom: '8px' }} value={q} onChange={e => setQ(e.target.value)} placeholder="Search items (flagged items listed first)" />
      <div style={{ maxHeight: '160px', overflowY: 'auto', border: '1px solid #E5E7EB', borderRadius: '6px', padding: '6px 10px' }}>
        {shown.map(i => (
          <label key={i.id} style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '4px 0', fontSize: '12px', color: '#111827', cursor: 'pointer' }}>
            <input type="checkbox" checked={selected.includes(i.id)} onChange={() => toggle(i.id)} style={{ accentColor: '#1872B4' }} />
            <span style={{ flex: 1 }}>{i.id} · {i.catalog.topic.slice(0, 60)}</span>
            <FlagPills item={i} />
          </label>
        ))}
      </div>
    </div>
  );
}
 
// ============================================================
// REPORTS
// ============================================================
 
function ReportsView({ reports, saveReport, deleteReport, meta, allItems, escalations, milestonesState }) {
  const [active, setActive] = useState(null);
  const [generating, setGenerating] = useState(false);
  const [error, setError] = useState(null);
  const [copied, setCopied] = useState(false);
 
  const newReport = (typeId) => {
    const t = REPORT_TYPES.find(x => x.id === typeId);
    setActive({ id: newId('rpt'), type: typeId, typeLabel: t.label, audience: t.audience, title: `${t.label} · ${fmtLongDate(todayISO())}`, body: '', locked: false, createdAt: new Date().toISOString(), periodNote: '' });
  };
 
  const generate = async () => {
    if (!active) return;
    setGenerating(true);
    setError(null);
    try {
      const t = REPORT_TYPES.find(x => x.id === active.type);
      const execDate = meta.executionDate || DEFAULT_META.executionDate;
      const milestoneRows = REPORTING_MILESTONES.map(m => ({ label: m.label, due: addDays(execDate, m.offsetDays), done: !!(milestonesState[m.id] && milestonesState[m.id].done) }));
      const snapshot = buildProgramSnapshot(allItems, escalations, milestoneRows, meta);
      const styleRules = 'Plain professional prose. No emdashes anywhere: use commas, colons, semicolons, or periods. No markdown headers or bullets; use short titled paragraphs with the title on its own line in plain text. Konnect voice: calm, evidence-based, direct.';
      const prompts = {
        weekly: `Draft the weekly coordination notes for the HR, Finance, and Legal operational leads. 300 to 500 words. Cover: items that moved this period, items at risk or blocked with the ask of each functional lead, upcoming targets in the next 14 days, and decisions needed. ${styleRules}`,
        gc_monthly: `Draft the monthly written report to the General Counsel. 500 to 800 words. Cover: program status against the November 30, 2026 close; Stream A verification progress (Delivered versus Verified counts and what remains); Stream B progress on governance preconditions; Stream C build status; escalations raised or resolved; risks and the mitigation underway; and the forward look to the next reporting period. Mark clearly as privileged. ${styleRules}`,
        chair: `Draft the interim briefing to the Audit Committee Chair, to be released with General Counsel concurrence. 300 to 450 words, executive altitude. Lead with the single most important thing the Chair needs to know this month, then status against the close, then exceptions only. ${styleRules}`,
        quarterly: `Draft the quarterly standing report to the Board Audit Committee. 700 to 1000 words. Structure per the contracted content: findings and items closed this period at the audit-defensible standard; items opened or re-opened; trend indicators against risk thresholds; infrastructure status including the reporting milestone deadlines; and forward risk assessment for the next quarter against the November 30, 2026 close and the October to November 2026 transactional audit window. ${styleRules}`,
        escalation: `Draft an ad hoc escalation memo to the Audit Committee Chair through the General Counsel covering the open escalations in the data. 250 to 400 words. State the thresholds crossed, the factual basis, the impact on the close, and the action requested. ${styleRules}`,
      };
      const sys = `You are the Konnect Independent Program Management function for the Children's Hospital Los Angeles wage and hour remediation engagement, producing a contracted ${t.label} for ${t.audience}. This document is attorney work product, privileged and confidential, prepared at the direction of counsel, and will be transmitted to the attention of the General Counsel. Ground every statement in the program snapshot provided; do not invent status, dates, or numbers. Where the snapshot lacks data for a required section, state that plainly rather than fabricating.`;
      const usr = `${prompts[active.type]}\n\nPeriod note from the Delivery Lead (optional context): ${active.periodNote || '(none)'}\n\nProgram snapshot (JSON):\n${JSON.stringify(snapshot, null, 1)}\n\nProduce the report body as plain text.`;
      const text = await callClaude(sys, usr, false);
      setActive({ ...active, body: text, generatedAt: new Date().toISOString() });
    } catch (e) {
      setError(e.message);
    } finally {
      setGenerating(false);
    }
  };
 
  const save = async () => {
    if (!active) return;
    await saveReport(active);
  };
 
  const copyExport = async () => {
    if (!active) return;
    const header = `PRIVILEGED AND CONFIDENTIAL COMMUNICATION\nAttorney Work Product · Prepared at the Direction of Counsel\nAttention: Grace Oh, Senior Vice President and General Counsel, Children's Hospital Los Angeles\n\n${active.typeLabel}\nKonnect · Independent Program Management · ${meta.engagementId}\nDate: ${fmtLongDate(todayISO())}\n\n`;
    const footer = `\n\nPRIVILEGED AND CONFIDENTIAL · File to the GC-designated ShareFile folder as the record of record.`;
    try {
      await navigator.clipboard.writeText(header + active.body + footer);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (e) {
      setError('Clipboard unavailable: ' + e.message);
    }
  };
 
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: '20px', alignItems: 'start' }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
        <Card>
          <CardHeader title="New Report" subtitle="The four contracted formats plus escalation memos" />
          {REPORT_TYPES.map(t => (
            <button key={t.id} onClick={() => newReport(t.id)} style={{ ...btnSecondary, width: '100%', justifyContent: 'flex-start', marginBottom: '6px' }}>
              <FileText size={13} />
              <span style={{ textAlign: 'left' }}>
                {t.label}
                <span style={{ display: 'block', fontSize: '10px', color: '#9CA3AF', fontWeight: 400 }}>{t.cadence} · {t.audience}</span>
              </span>
            </button>
          ))}
        </Card>
        <Card>
          <CardHeader title={`Saved Reports (${reports.length})`} />
          {reports.length === 0 && <div style={{ fontSize: '12px', color: '#9CA3AF' }}>Nothing saved yet.</div>}
          {reports.map(r => (
            <div key={r.id} onClick={() => setActive(r)} style={{ padding: '8px 0', borderBottom: '1px solid #F3F4F6', cursor: 'pointer' }}>
              <div style={{ fontSize: '12px', fontWeight: 600, color: active && active.id === r.id ? '#1872B4' : '#111827' }}>{r.title}</div>
              <div style={{ fontSize: '11px', color: '#9CA3AF', marginTop: '2px' }}>{fmtDateTime(r.createdAt)}{r.locked ? ' · Locked' : ''}</div>
            </div>
          ))}
        </Card>
      </div>
 
      <Card>
        {!active && <EmptyState icon={FileSearch} message="Select a report type to generate, or open a saved report. Generated documents are drafts for Delivery Lead review; exports carry the privileged marking and are filed to the GC-designated ShareFile folder." />}
        {active && (
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '12px', marginBottom: '14px' }}>
              <div style={{ flex: 1 }}>
                <input style={{ ...inputStyle, fontWeight: 700, fontSize: '15px' }} value={active.title} onChange={e => setActive({ ...active, title: e.target.value })} disabled={active.locked} />
                <div style={{ fontSize: '11px', color: '#6B7280', marginTop: '6px' }}>{active.typeLabel} · {active.audience}</div>
              </div>
              <div style={{ display: 'flex', gap: '8px', flexShrink: 0 }}>
                <button onClick={() => setActive({ ...active, locked: !active.locked })} style={btnSecondary} title={active.locked ? 'Unlock for editing' : 'Lock to preserve'}>
                  {active.locked ? <Lock size={13} /> : <Unlock size={13} />}
                </button>
                <button onClick={copyExport} style={btnSecondary}><Copy size={13} /> {copied ? 'Copied' : 'Copy w/ Marking'}</button>
                <button onClick={save} style={btnPrimary}><Save size={13} /> Save</button>
              </div>
            </div>
 
            <div style={{ padding: '10px 14px', background: '#010506', borderRadius: '6px', marginBottom: '14px' }}>
              <div style={{ fontSize: '10px', color: '#F87171', fontWeight: 700, letterSpacing: '0.08em' }}>PRIVILEGED AND CONFIDENTIAL COMMUNICATION</div>
              <div style={{ fontSize: '10px', color: '#9CA3AF', marginTop: '2px' }}>Attorney Work Product · Attention: General Counsel · Record of record files to the GC-designated ShareFile folder</div>
            </div>
 
            {!active.locked && (
              <div style={{ display: 'flex', gap: '8px', marginBottom: '12px' }}>
                <input style={{ ...inputStyle, flex: 1 }} value={active.periodNote} onChange={e => setActive({ ...active, periodNote: e.target.value })} placeholder="Optional period context for the AI draft (what happened this period that the data may not show)" />
                <button onClick={generate} disabled={generating} style={btnPrimary}>
                  <Sparkles size={14} /> {generating ? 'Generating...' : active.body ? 'Regenerate' : 'Generate from Live Data'}
                </button>
              </div>
            )}
            {error && <div style={{ fontSize: '12px', color: '#B91C1C', marginBottom: '10px' }}>Error: {error}</div>}
 
            <textarea style={{ ...textareaStyle, minHeight: '420px', fontSize: '13px', lineHeight: 1.7, background: active.locked ? '#F9FAFB' : '#FFFFFF' }}
              value={active.body} disabled={active.locked}
              onChange={e => setActive({ ...active, body: e.target.value })}
              placeholder="Generate from live data or write directly. The Delivery Lead validates before export; the export path is copy with privileged marking, paste to the deliverable template, file to ShareFile." />
            {active.generatedAt && <div style={{ fontSize: '11px', color: '#9CA3AF', marginTop: '6px' }}>AI draft generated {fmtDateTime(active.generatedAt)} · Konnect retains editorial authority</div>}
            <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'flex-end' }}>
              <button onClick={async () => { await deleteReport(active.id); setActive(null); }} style={{ ...btnSecondary, color: '#B91C1C' }}><Trash2 size={13} /> Delete Report</button>
            </div>
          </div>
        )}
      </Card>
    </div>
  );
}
 
// ============================================================
// SETTINGS
// ============================================================
 
function SettingsModal({ meta, onClose, onSave }) {
  const [draft, setDraft] = useState({ ...meta });
  return (
    <Modal title="Workspace Settings" onClose={onClose}>
      <FormField label="Mandate Execution Date">
        <input type="date" style={inputStyle} value={draft.executionDate} onChange={e => setDraft({ ...draft, executionDate: e.target.value })} />
        <div style={{ fontSize: '11px', color: '#6B7280', marginTop: '4px' }}>Drives the contracted reporting deadlines (Day 10, Day 30, Day 45, end of Q1). Set to the actual SOW execution date at signing.</div>
      </FormField>
      <FormField label="Engagement ID">
        <input style={inputStyle} value={draft.engagementId} onChange={e => setDraft({ ...draft, engagementId: e.target.value })} />
      </FormField>
      <FormField label="Engagement Partner">
        <input style={inputStyle} value={draft.consultant} onChange={e => setDraft({ ...draft, consultant: e.target.value })} />
      </FormField>
      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
        <button onClick={onClose} style={btnSecondary}>Cancel</button>
        <button onClick={() => { onSave(draft); onClose(); }} style={btnPrimary}><Save size={13} /> Save</button>
      </div>
    </Modal>
  );
}
 
// ============================================================
// MODAL + FORM PRIMITIVES
// ============================================================
 
function Modal({ children, onClose, title }) {
  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(1,5,6,0.5)', zIndex: 1100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px' }} onClick={onClose}>
      <div onClick={e => e.stopPropagation()} style={{ background: '#FFFFFF', borderRadius: '12px', width: 'min(640px, 100%)', maxHeight: '88vh', overflowY: 'auto', padding: '24px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '18px' }}>
          <div style={{ fontSize: '16px', fontWeight: 700, color: '#010506' }}>{title}</div>
          <button onClick={onClose} style={{ background: 'none', border: 'none', color: '#9CA3AF', cursor: 'pointer' }}><X size={18} /></button>
        </div>
        {children}
      </div>
    </div>
  );
}
 
function FormField({ label, children }) {
  return (
    <div style={{ marginBottom: '14px' }}>
      <div style={{ fontSize: '11px', fontWeight: 700, color: '#374151', letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: '6px' }}>{label}</div>
      {children}
    </div>
  );
}
 
function FieldSection({ label, children }) {
  return (
    <div style={{ marginBottom: '22px' }}>
      <div style={{ fontSize: '11px', fontWeight: 700, color: '#1872B4', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: '10px' }}>
        {label}
      </div>
      {children}
    </div>
  );
}
const inputStyle = {
  width: '100%', padding: '10px 12px', fontSize: '13px',
  border: '1px solid #E5E7EB', borderRadius: '6px',
  background: '#FFFFFF', outline: 'none',
  fontFamily: 'inherit', color: '#010506',
};
 
const textareaStyle = {
  ...inputStyle,
  minHeight: '80px',
  resize: 'vertical',
  lineHeight: 1.5,
};
 
const btnPrimary = {
  display: 'flex', alignItems: 'center', gap: '6px',
  padding: '10px 16px',
  background: '#1872B4', color: '#FFFFFF',
  border: 'none', borderRadius: '6px',
  fontSize: '13px', fontWeight: 600, cursor: 'pointer',
};
 
const btnSecondary = {
  display: 'flex', alignItems: 'center', gap: '6px',
  padding: '10px 16px',
  background: '#FFFFFF', color: '#374151',
  border: '1px solid #E5E7EB', borderRadius: '6px',
  fontSize: '13px', fontWeight: 600, cursor: 'pointer',
};
 
 
    // ===================================================================
    // Mount
    // ===================================================================
    const rootEl = document.getElementById('root');
    const root = ReactDOM.createRoot(rootEl);
    root.render(React.createElement(KonnectRemediationApp));
  </script>
 
  <div class="konnect-confidentiality-footer">
    <strong>Privileged & Confidential</strong>
    <span class="footer-dot">·</span>
    Prepared at the Direction of Counsel
    <span class="footer-dot">·</span>
    No PHI
    <span class="footer-dot">·</span>
    Konnect Internal Use Only
    <span class="footer-dot">·</span>
    All activity logged
  </div>
</body>
</html>