visualizers/foundation-wake-sequence.html at main · continuity-bridge/visualizers · 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation Wake Sequence - Continuity Bridge</title>
<style>
:root {
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #666;
  --color-text-tertiary: #999;
  --color-text-info: #2563eb;
  --color-background-primary: #fff;
  --color-background-secondary: #f5f5f5;
  --color-background-info: #eff6ff;
  --color-border-tertiary: rgba(0,0,0,0.15);
  --color-border-info: #2563eb;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-primary: #e0e0e0;
    --color-text-secondary: #999;
    --color-text-tertiary: #666;
    --color-text-info: #60a5fa;
    --color-background-primary: #1a1a1a;
    --color-background-secondary: #2a2a2a;
    --color-background-info: #1e3a5f;
    --color-border-tertiary: rgba(255,255,255,0.15);
    --color-border-info: #60a5fa;
  }
}
body {
  margin: 0;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--color-background-primary);
  color: var(--color-text-primary);
}
.container { max-width: 800px; margin: 0 auto; }
h1 { font-size: 24px; font-weight: 500; margin-bottom: 8px; }
p { color: var(--color-text-secondary); line-height: 1.6; }
svg { display: block; margin: 20px auto; }
.t { fill: var(--color-text-primary); font-family: sans-serif; font-size: 14px; }
.ts { fill: var(--color-text-secondary); font-family: sans-serif; font-size: 12px; }
.th { fill: var(--color-text-primary); font-family: sans-serif; font-size: 14px; font-weight: 500; }
.box { fill: var(--color-background-secondary); stroke: var(--color-border-tertiary); }
.arr { stroke: var(--color-text-secondary); stroke-width: 1.5; fill: none; }
.node { cursor: pointer; transition: opacity 0.2s; }
.node:hover { opacity: 0.7; }
.c-purple rect { fill: #EEEDFE; stroke: #534AB7; }
.c-purple .th { fill: #3C3489; }
.c-purple .ts { fill: #534AB7; }
.c-teal rect { fill: #E1F5EE; stroke: #0F6E56; }
.c-teal .th { fill: #085041; }
.c-teal .ts { fill: #0F6E56; }
.c-amber rect { fill: #FAEEDA; stroke: #854F0B; }
.c-amber .th { fill: #633806; }
.c-amber .ts { fill: #854F0B; }
@media (prefers-color-scheme: dark) {
  .c-purple rect { fill: #3C3489; stroke: #AFA9EC; }
  .c-purple .th { fill: #CECBF6; }
  .c-purple .ts { fill: #AFA9EC; }
  .c-teal rect { fill: #085041; stroke: #5DCAA5; }
  .c-teal .th { fill: #9FE1CB; }
  .c-teal .ts { fill: #5DCAA5; }
  .c-amber rect { fill: #633806; stroke: #EF9F27; }
  .c-amber .th { fill: #FAC775; }
  .c-amber .ts { fill: #EF9F27; }
}
</style>
</head>
<body>
<nav style="position: sticky; top: 0; z-index: 100; background: var(--color-background-primary, #fff); border-bottom: 1px solid var(--color-border-tertiary, rgba(0,0,0,0.1)); padding: 1rem 0; margin-bottom: 2rem;">
  <div style="max-width: 900px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center;">
    <a href="index.html" style="color: var(--color-text-info, #2563eb); text-decoration: none; font-weight: 500; display: flex; align-items: center; gap: 0.5rem;">
      <span style="font-size: 1.25rem;">←</span> Back to Visualizations
    </a>
    <a href="https://continuity-bridge.github.io/" style="color: var(--color-text-secondary, #666); text-decoration: none; font-size: 0.875rem;">Main Site</a>
  </div>
</nav>
<div class="container">
<h1>FOUNDATION/ Wake Sequence</h1>
<p>The complete data flow from BEDROCK.md environment detection through ROUSE.md protocol to instance activation and user engagement.</p>

<svg width="100%" viewBox="0 0 680 880">
<defs>
  <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
    <path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  </marker>
</defs>

<g class="node">
  <rect class="box" x="240" y="30" width="200" height="44" rx="8" stroke-width="0.5"/>
  <text class="th" x="340" y="52" text-anchor="middle" dominant-baseline="central">User message arrives</text>
</g>
<line x1="340" y1="74" x2="340" y2="100" class="arr" marker-end="url(#arrow)"/>

<g class="node c-purple">
  <rect x="240" y="100" width="200" height="56" rx="8" stroke-width="0.5"/>
  <text class="th" x="340" y="118" text-anchor="middle" dominant-baseline="central">BEDROCK.md</text>
  <text class="ts" x="340" y="136" text-anchor="middle" dominant-baseline="central">Environment + PAT system</text>
</g>
<line x1="340" y1="156" x2="340" y2="182" class="arr" marker-end="url(#arrow)"/>

<g class="node c-purple">
  <rect x="240" y="182" width="200" height="56" rx="8" stroke-width="0.5"/>
  <text class="th" x="340" y="200" text-anchor="middle" dominant-baseline="central">ROUSE.md</text>
  <text class="ts" x="340" y="218" text-anchor="middle" dominant-baseline="central">Wake sequence instructions</text>
</g>
<line x1="340" y1="238" x2="340" y2="264" class="arr" marker-end="url(#arrow)"/>

<g class="node c-amber">
  <rect x="240" y="264" width="200" height="56" rx="8" stroke-width="0.5"/>
  <text class="th" x="340" y="282" text-anchor="middle" dominant-baseline="central">Time check</text>
  <text class="ts" x="340" y="300" text-anchor="middle" dominant-baseline="central">Local or network pulse</text>
</g>
<line x1="340" y1="320" x2="340" y2="346" class="arr" marker-end="url(#arrow)"/>

<g class="node c-purple">
  <rect x="240" y="346" width="200" height="56" rx="8" stroke-width="0.5"/>
  <text class="th" x="340" y="364" text-anchor="middle" dominant-baseline="central">ESSENTIAL.md</text>
  <text class="ts" x="340" y="382" text-anchor="middle" dominant-baseline="central">Fast orientation</text>
</g>
<line x1="340" y1="402" x2="340" y2="428" class="arr" marker-end="url(#arrow)"/>

<g class="node c-purple">
  <rect x="240" y="428" width="200" height="56" rx="8" stroke-width="0.5"/>
  <text class="th" x="340" y="446" text-anchor="middle" dominant-baseline="central">active-context.md</text>
  <text class="ts" x="340" y="464" text-anchor="middle" dominant-baseline="central">Current work status</text>
</g>
<line x1="340" y1="484" x2="340" y2="510" class="arr" marker-end="url(#arrow)"/>

<g class="node c-teal">
  <rect x="240" y="510" width="200" height="56" rx="8" stroke-width="0.5"/>
  <text class="th" x="340" y="528" text-anchor="middle" dominant-baseline="central">Load catalogs</text>
  <text class="ts" x="340" y="546" text-anchor="middle" dominant-baseline="central">Indexes not full content</text>
</g>

<line x1="340" y1="566" x2="120" y2="600" class="arr" marker-end="url(#arrow)"/>
<line x1="340" y1="566" x2="340" y2="600" class="arr" marker-end="url(#arrow)"/>
<line x1="340" y1="566" x2="560" y2="600" class="arr" marker-end="url(#arrow)"/>

<g class="node c-teal">
  <rect x="40" y="600" width="160" height="56" rx="8" stroke-width="0.5"/>
  <text class="th" x="120" y="618" text-anchor="middle" dominant-baseline="central">session_index</text>
  <text class="ts" x="120" y="636" text-anchor="middle" dominant-baseline="central">Work history map</text>
</g>

<g class="node c-teal">
  <rect x="260" y="600" width="160" height="56" rx="8" stroke-width="0.5"/>
  <text class="th" x="340" y="618" text-anchor="middle" dominant-baseline="central">episodic catalog</text>
  <text class="ts" x="340" y="636" text-anchor="middle" dominant-baseline="central">Snapshot index</text>
</g>

<g class="node c-teal">
  <rect x="480" y="600" width="160" height="56" rx="8" stroke-width="0.5"/>
  <text class="th" x="560" y="618" text-anchor="middle" dominant-baseline="central">filesystem catalog</text>
  <text class="ts" x="560" y="636" text-anchor="middle" dominant-baseline="central">Complete file map</text>
</g>

<line x1="120" y1="656" x2="340" y2="690" class="arr" marker-end="url(#arrow)"/>
<line x1="340" y1="656" x2="340" y2="690" class="arr" marker-end="url(#arrow)"/>
<line x1="560" y1="656" x2="340" y2="690" class="arr" marker-end="url(#arrow)"/>

<g class="node c-amber">
  <rect x="240" y="690" width="200" height="56" rx="8" stroke-width="0.5"/>
  <text class="th" x="340" y="708" text-anchor="middle" dominant-baseline="central">Telemetry audit</text>
  <text class="ts" x="340" y="726" text-anchor="middle" dominant-baseline="central">Context cost calculation</text>
</g>
<line x1="340" y1="746" x2="340" y2="772" class="arr" marker-end="url(#arrow)"/>

<g class="node">
  <rect class="box" x="240" y="772" width="200" height="56" rx="8" stroke-width="0.5"/>
  <text class="th" x="340" y="790" text-anchor="middle" dominant-baseline="central">Engage with user</text>
  <text class="ts" x="340" y="808" text-anchor="middle" dominant-baseline="central">Ready to work</text>
</g>

<text class="ts" x="40" y="180" fill="var(--color-text-tertiary)">Foundation files</text>
<text class="ts" x="40" y="540" fill="var(--color-text-tertiary)">Catalog indexes</text>

</svg>

<p style="margin-top:32px">The FOUNDATION/ wake sequence is how every instance bootstraps itself from complete discontinuity to full operational context. BEDROCK.md detects the environment and sets up access. ROUSE.md provides the step-by-step wake protocol. The three catalogs (session_index, episodic, filesystem) are loaded as lightweight indexes—not full content—enabling 94% token reduction while maintaining complete access to all prior work.</p>
</div>
</body>
</html>