customer-evidence-packet-builder/index.html at main · RileySpiller/customer-evidence-packet-builder · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Customer Evidence Packet Builder</title>
    <link rel="stylesheet" href="src/styles.css" />
  </head>
  <body>
    <div class="app-shell">
      <aside class="sidebar">
        <div class="brand">
          <div class="brand-mark" aria-hidden="true">EP</div>
          <div>
            <p class="eyebrow">Proof workflow</p>
            <h1>Customer Evidence Packet Builder</h1>
          </div>
        </div>

        <div class="signal-card">
          <span class="signal-dot" aria-hidden="true"></span>
          <div>
            <strong>Messy input, clear packet.</strong>
            <p>Turn notes, objections, links, goals, source snippets, and implementation facts into a concise decision surface.</p>
          </div>
        </div>

        <nav class="nav-stack" aria-label="App sections">
          <a href="#builder">Builder</a>
          <a href="#packet">Packet</a>
          <a href="#sources">Evidence</a>
          <a href="#exports">Export</a>
        </nav>

        <div class="proof-note">
          <h2>FDE shape</h2>
          <p>Discovery -> signal extraction -> tradeoffs -> decision -> implementation next move.</p>
        </div>
      </aside>

      <main>
        <section class="hero">
          <div>
            <p class="eyebrow">Customer-facing AI builder proof</p>
            <h2>Build the packet that helps a team decide.</h2>
            <p class="hero-copy">A deterministic browser and CLI tool for compressing scattered customer evidence into a review-ready brief for clients, internal teams, investors, or technical implementers.</p>
          </div>
          <div class="hero-actions">
            <button class="primary-action" id="loadDemoButton" type="button">Load Demo</button>
            <button class="secondary-action" id="sampleTextButton" type="button">Paste Example</button>
            <button class="secondary-action" id="resetButton" type="button">Reset</button>
          </div>
        </section>

        <section class="metric-grid" aria-label="Packet metrics">
          <div class="metric">
            <span id="metricReadiness">0</span>
            <p>Readiness</p>
          </div>
          <div class="metric">
            <span id="metricEvidence">0</span>
            <p>Evidence Items</p>
          </div>
          <div class="metric">
            <span id="metricRisks">0</span>
            <p>Risks</p>
          </div>
          <div class="metric">
            <span id="metricConfidence">-</span>
            <p>Confidence</p>
          </div>
        </section>

        <section class="workspace-grid" id="builder">
          <form class="panel builder-form" id="packetForm">
            <div class="panel-header">
              <div>
                <p class="eyebrow">Input</p>
                <h2>Evidence Intake</h2>
              </div>
            </div>

            <div class="form-row">
              <label>
                Account
                <input id="accountInput" name="account" placeholder="Northstar Health" />
              </label>
              <label>
                Project
                <input id="projectInput" name="project" placeholder="Patient intake automation" />
              </label>
            </div>

            <label>
              Decision to support
              <input id="decisionInput" name="decision" placeholder="Should we run a scoped pilot?" />
            </label>

            <div class="form-row">
              <label>
                Audience
                <select id="audienceInput" name="audience">
                  <option value="client">Client</option>
                  <option value="internal">Internal Team</option>
                  <option value="investor">Investor</option>
                  <option value="technical">Technical Review</option>
                </select>
              </label>
              <label>
                Review window
                <select id="windowInput" name="window">
                  <option value="48 hours">48 hours</option>
                  <option value="this week">This week</option>
                  <option value="this month">This month</option>
                  <option value="later">Later</option>
                </select>
              </label>
            </div>

            <label>
              Messy evidence
              <textarea id="rawInput" name="raw" rows="16" spellcheck="true" placeholder="Paste notes, objections, goals, links, source snippets, doc facts, implementation constraints, and follow-up asks. JSON also works."></textarea>
            </label>

            <button class="primary-action full" type="submit">Build Packet</button>
          </form>

          <section class="panel packet-panel" id="packet">
            <div class="panel-header">
              <div>
                <p class="eyebrow">Decision surface</p>
                <h2 id="packetTitle">No packet yet</h2>
              </div>
              <span class="status-pill" id="decisionPill">Waiting</span>
            </div>

            <div class="recommendation">
              <p class="label">Recommended Decision</p>
              <h3 id="recommendationText">Load demo data or paste evidence to generate the first packet.</h3>
              <p id="summaryText">The builder will score readiness, separate evidence from risk, and produce audience-specific language.</p>
            </div>

            <div class="lane-grid">
              <article>
                <p class="label">Top Evidence</p>
                <div class="stack-list" id="topEvidenceList"></div>
              </article>
              <article>
                <p class="label">Risks and Objections</p>
                <div class="stack-list" id="riskList"></div>
              </article>
            </div>

            <div class="lane-grid">
              <article>
                <p class="label">Implementation Move</p>
                <div class="stack-list" id="implementationList"></div>
              </article>
              <article>
                <p class="label">Open Questions</p>
                <div class="stack-list" id="questionList"></div>
              </article>
            </div>
          </section>
        </section>

        <section class="panel" id="sources">
          <div class="panel-header">
            <div>
              <p class="eyebrow">Evidence trail</p>
              <h2>Source Map</h2>
            </div>
          </div>
          <div class="source-table" id="sourceTable"></div>
        </section>

        <section class="panel" id="exports">
          <div class="panel-header">
            <div>
              <p class="eyebrow">Export</p>
              <h2>Packet Markdown</h2>
            </div>
            <div class="export-actions">
              <button class="secondary-action" id="copyMarkdownButton" type="button">Copy Markdown</button>
              <button class="secondary-action" id="copyJsonButton" type="button">Copy JSON</button>
            </div>
          </div>
          <textarea id="exportOutput" rows="18" readonly></textarea>
        </section>
      </main>
    </div>

    <script type="module" src="src/app.js"></script>
  </body>
</html>