pixel/DATA_FLOW_DIAGRAM.html at master · anabelle/pixel · 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
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pixel Ecosystem Data Flow</title>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
    <style>
        :root {
            --bg-primary: #0d1117;
            --bg-secondary: #161b22;
            --text-primary: #e6edf3;
            --text-secondary: #8b949e;
            --accent-blue: #58a6ff;
            --accent-green: #3fb950;
            --accent-yellow: #d29922;
            --accent-red: #f85149;
            --accent-purple: #a371f7;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            min-height: 100vh;
            padding: 2rem;
        }

        h1 {
            text-align: center;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .subtitle {
            text-align: center;
            color: var(--text-secondary);
            margin-bottom: 2rem;
        }

        .diagram-container {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 2rem;
            margin-bottom: 2rem;
            border: 1px solid #30363d;
        }

        .diagram-title {
            color: var(--accent-blue);
            margin-bottom: 1rem;
            font-size: 1.2rem;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .stat-card {
            background: var(--bg-secondary);
            border-radius: 8px;
            padding: 1.5rem;
            border: 1px solid #30363d;
            text-align: center;
        }

        .stat-value {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }

        .stat-label {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        .green { color: var(--accent-green); }
        .yellow { color: var(--accent-yellow); }
        .blue { color: var(--accent-blue); }
        .red { color: var(--accent-red); }
        .purple { color: var(--accent-purple); }

        .mermaid {
            display: flex;
            justify-content: center;
        }
    </style>
</head>
<body>
    <h1>🗺️ Pixel Ecosystem Data Flow</h1>
    <p class="subtitle">Generated: 2026-01-04 | Complete system visualization</p>

    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-value green">37</div>
            <div class="stat-label">Refactoring Tasks Complete</div>
        </div>
        <div class="stat-card">
            <div class="stat-value blue">18</div>
            <div class="stat-label">Ideas in Garden</div>
        </div>
        <div class="stat-card">
            <div class="stat-value yellow">25.0</div>
            <div class="stat-label">Current Cycle</div>
        </div>
        <div class="stat-card">
            <div class="stat-value purple">14/14</div>
            <div class="stat-label">Containers Healthy</div>
        </div>
    </div>

    <div class="diagram-container">
        <h3 class="diagram-title">📊 Main Data Flow Architecture</h3>
        <div class="mermaid">
flowchart TB
    subgraph Human["👤 Human Layer"]
        HI[Human Inbox<br/>CONTINUITY.md]
        HD[Directives]
    end

    subgraph Syntropy["🧠 Syntropy Layer (Oversoul)"]
        CE[Cycle Engine<br/>7 Phases]
        CE --> P1[Phase 1: Context]
        CE --> P2[Phase 2: Audit]
        CE --> P3[Phase 3: Execute]
        CE --> P4[Phase 4: Learn]
        CE --> P5[Phase 5: Refactor]
        CE --> P6[Phase 6: Narrate]
        CE --> P7[Phase 7: Schedule]
    end

    subgraph Agent["🤖 Agent Layer (Pixel)"]
        NA[Nostr Actions]
        SA[Social Posts]
    end

    subgraph DataStores["📁 Data Stores"]
        CONT[CONTINUITY.md<br/>370 lines]
        IDEAS[IDEAS.md<br/>18 seeds]
        QUEUE[REFACTOR_QUEUE.md<br/>0 active]
        ARCHIVE[REFACTOR_ARCHIVE.md<br/>39 tasks]
        LEDGER[task-ledger.json<br/>144KB]
        SCHED[syntropy-schedule.json]
    end

    subgraph External["🌐 External Systems"]
        NOSTR[Nostr Relays]
        BTC[Bitcoin Node]
        LN[Lightning Node]
        PG[PostgreSQL]
    end

    HD --> HI
    HI --> CE
    CE --> CONT
    CE --> IDEAS
    CE --> QUEUE
    QUEUE --> ARCHIVE
    CE --> LEDGER
    P7 --> SCHED

    CE --> NA
    NA --> NOSTR

    CE --> BTC
    CE --> LN
    CE --> PG
        </div>
    </div>

    <div class="diagram-container">
        <h3 class="diagram-title">🌱 Idea Lifecycle Flow</h3>
        <div class="mermaid">
flowchart LR
    subgraph Plant["🌱 Plant"]
        A[Human/Syntropy<br/>plants idea]
    end

    subgraph Grow["🌿 Grow"]
        B[Seed<br/>0-2 waterings]
        C[Sprouting<br/>3-4 waterings]
        D[Ready<br/>5+ waterings]
    end

    subgraph Harvest["🌸 Harvest"]
        E[Convert to<br/>Refactor Task]
    end

    subgraph Complete["✅ Complete"]
        F[Execute via<br/>Worker]
        G[Archive<br/>Task]
    end

    A --> B
    B -->|water| C
    C -->|water| D
    D -->|harvest| E
    E --> F
    F --> G

    style B fill:#22c55e,color:#000
    style C fill:#eab308,color:#000
    style D fill:#f97316,color:#000
    style G fill:#3b82f6,color:#fff
        </div>
    </div>

    <div class="diagram-container">
        <h3 class="diagram-title">🔄 Refactoring Queue Flow</h3>
        <div class="mermaid">
flowchart TB
    subgraph Analyze["🔍 Analyze"]
        A1[analyzeForRefactoring]
        A2[Scan codebase]
        A3[Generate suggestions]
    end

    subgraph Add["➕ Add"]
        B1[addRefactorTask]
        B2[REFACTOR_QUEUE.md<br/>⬜ READY]
    end

    subgraph Process["⚙️ Process"]
        C1[processRefactorQueue<br/>action=check]
        C2[Check archive sync]
        C3[Find next task]
    end

    subgraph Execute["🚀 Execute"]
        D1[processRefactorQueue<br/>action=execute]
        D2[spawnWorker]
        D3[Docker container]
    end

    subgraph Complete["✅ Complete"]
        E1[Worker finishes]
        E2[Update queue<br/>✅ DONE]
        E3[verifyQueueArchiveSync]
        E4[REFACTOR_ARCHIVE.md]
    end

    A1 --> A2 --> A3
    A3 --> B1 --> B2
    B2 --> C1 --> C2 --> C3
    C3 --> D1 --> D2 --> D3
    D3 --> E1 --> E2 --> E3 --> E4

    style B2 fill:#22c55e,color:#000
    style E2 fill:#3b82f6,color:#fff
    style E4 fill:#a855f7,color:#fff
        </div>
    </div>

    <div class="diagram-container">
        <h3 class="diagram-title">🧠 Syntropy 7-Phase Cycle</h3>
        <div class="mermaid">
flowchart LR
    P1["1️⃣ Context<br/>Load state"]
    P2["2️⃣ Audit<br/>Check health"]
    P3["3️⃣ Execute<br/>Run tasks"]
    P4["4️⃣ Learn<br/>Update docs"]
    P5["5️⃣ Refactor<br/>Improve code"]
    P6["6️⃣ Narrate<br/>Tell story"]
    P7["7️⃣ Schedule<br/>Next cycle"]

    P1 --> P2 --> P3 --> P4 --> P5 --> P6 --> P7
    P7 -.->|next cycle| P1

    style P1 fill:#3b82f6,color:#fff
    style P2 fill:#22c55e,color:#000
    style P3 fill:#f97316,color:#000
    style P4 fill:#eab308,color:#000
    style P5 fill:#a855f7,color:#fff
    style P6 fill:#ec4899,color:#fff
    style P7 fill:#06b6d4,color:#000
        </div>
    </div>

    <div class="diagram-container">
        <h3 class="diagram-title">🔗 Tool Dependencies</h3>
        <div class="mermaid">
graph TD
    subgraph Core["Core Tools"]
        CT[continuityTools]
        RT[refactoringTools]
        IT[ideationTools]
    end

    subgraph Ecosystem["Ecosystem Tools"]
        ET[ecosystemTools]
        UT[utilityTools]
    end

    subgraph Social["Social Tools"]
        NT[nostrTools]
        MT[memoryTools]
        CHT[characterTools]
    end

    subgraph Worker["Worker System"]
        WT[workerTools]
        DT[diaryTools]
    end

    CT --> CONT[CONTINUITY.md]
    RT --> QUEUE[REFACTOR_QUEUE.md]
    RT --> ARCH[REFACTOR_ARCHIVE.md]
    IT --> IDEAS[IDEAS.md]

    ET --> Docker[Docker API]
    ET --> VPS[VPS Metrics]

    NT --> Nostr[Nostr Relays]
    MT --> PG[PostgreSQL]
    CHT --> Files[Character Files]

    WT --> Containers[Worker Containers]
    DT --> PG

    RT --> WT
        </div>
    </div>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'dark',
            themeVariables: {
                primaryColor: '#58a6ff',
                primaryTextColor: '#e6edf3',
                primaryBorderColor: '#30363d',
                lineColor: '#8b949e',
                secondaryColor: '#161b22',
                tertiaryColor: '#0d1117'
            }
        });
    </script>
</body>
</html>