-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathprogramos.html
More file actions
327 lines (294 loc) · 20.2 KB
/
Copy pathprogramos.html
File metadata and controls
327 lines (294 loc) · 20.2 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ProgramOS - An AI Coordinator for Academic Programs | AgentLab</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- Header -->
<header>
<nav class="container">
<a href="index.html" class="logo">Agent<span>Lab</span></a>
<ul class="nav-links">
<li><a href="projects.html">Projects</a></li>
<li><a href="team.html">Team</a></li>
<li><a href="news.html">News</a></li>
</ul>
</nav>
</header>
<!-- Breadcrumb -->
<div class="breadcrumb">
<div class="container">
<a href="index.html">Home</a> / <a href="projects.html">Projects</a> / ProgramOS
</div>
</div>
<!-- Project Hero -->
<section class="project-hero">
<div class="container">
<div class="hero-content">
<div class="hero-text">
<h1>ProgramOS</h1>
<p>Academic programs lose half their decisions in email threads and meeting notes—and a new advisor or faculty member can’t get up to speed without digging through old inboxes. ProgramOS is a recipe for an AI program coordinator that answers stakeholder questions on whatever channel they prefer (email, Telegram, web chat) and quietly writes every decision down in a shared, human-readable folder. Built at Gies to run the online <a href="https://giesonline.illinois.edu/explore-programs/msbai">MSBAi program</a>, where it goes by the persona name K-ai.</p>
<div class="hero-stats">
<div class="stat-item">
<span class="stat-number">1</span>
<span class="stat-label">Afternoon to First Bot</span>
</div>
<div class="stat-item">
<span class="stat-number">3</span>
<span class="stat-label">Live Channels</span>
</div>
<div class="stat-item">
<span class="stat-number">0</span>
<span class="stat-label">Lines of Code to Copy</span>
</div>
</div>
<div class="cta-buttons">
<a href="https://github.com/vishalsachdev/programos" class="btn btn-primary">View on GitHub</a>
<a href="https://github.com/vishalsachdev/programos/blob/main/SPEC.md" class="btn btn-secondary">Read the Spec</a>
</div>
</div>
</div>
</div>
</section>
<!-- What it does -->
<section class="journey-section">
<div class="container">
<div class="section-header">
<h2>What It Does</h2>
<p class="section-subtitle">One coordinator that listens everywhere your program already lives</p>
</div>
<div class="journey-steps">
<div class="step-detail">
<div class="step-number">1</div>
<div class="step-content">
<h3>Answers questions, with citations</h3>
<p>Faculty, advisors, staff, and students message the bot the way they already prefer—email, Telegram, or a web chat box. The agent reads the program’s shared folder of policies, syllabi, decisions, and FAQs, and answers with a citation back to the source so people can verify.</p>
</div>
</div>
<div class="step-detail">
<div class="step-number">2</div>
<div class="step-content">
<h3>Captures decisions as they happen</h3>
<p>When someone sends a status update or makes a call (“we’re moving the deadline,” “Dr. X is teaching this section now”), the agent files it into the program folder as a dated decision, action item, or open question. No more “wait, what did we decide in March?”</p>
</div>
</div>
<div class="step-detail">
<div class="step-number">3</div>
<div class="step-content">
<h3>Keeps a clean audit trail</h3>
<p>Every message in, every reply out, and every change to the program folder is logged in a way an accreditor (or a successor coordinator) can read end-to-end. The folder is plain markdown in version control—no proprietary database, nothing locked behind a vendor.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Why it matters -->
<section class="content-section">
<div class="container">
<div class="section-header">
<h2>Why It Matters</h2>
<p class="section-subtitle">Built for the people who actually run programs</p>
</div>
<div class="content-grid">
<div class="content-card">
<h3>Program memory survives turnover</h3>
<p>Coordinators rotate. Faculty leave. Without a single source of truth, every transition costs months of rediscovery. ProgramOS treats the program folder as the institutional memory—and the bot as the friendly front door to it.</p>
</div>
<div class="content-card">
<h3>Stakeholders meet you where they are</h3>
<p>Students live on Telegram or WhatsApp. Faculty live in email and Teams. Industry partners live wherever you last met them. One coordinator on every channel beats four siloed tools nobody checks.</p>
</div>
<div class="content-card">
<h3>Privacy stays in your hands</h3>
<p>The reference deployment serves a real Master’s program with stakeholder PII, internal allowlists, and accreditation drafts. ProgramOS is the public recipe; everything sensitive stays in a private folder you own and control.</p>
</div>
</div>
</div>
</section>
<!-- Architecture diagram -->
<section class="content-section">
<div class="container">
<div class="section-header">
<h2>How K-ai Is Wired</h2>
<p class="section-subtitle">The Gies MSBAi deployment: three channels, one container, one program repo — gated on the way in and on the way out</p>
</div>
<div style="background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm);">
<svg viewBox="0 0 900 540" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="K-ai architecture: three inbound channels (email, Telegram, web chat) pass a sender-allowlist gate into the ProgramOS agent container, which operates in two modes; every outbound reply passes a delivery gate, and all activity lands in the msba-online program repository and an append-only audit log." style="width: 100%; height: auto; max-width: 900px; display: block; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
<defs>
<marker id="arrow-navy" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
<path d="M0,0 L10,5 L0,10 z" fill="#13294B"/>
</marker>
<marker id="arrow-orange" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
<path d="M0,0 L10,5 L0,10 z" fill="#ff6900"/>
</marker>
</defs>
<!-- Channels row -->
<g font-size="13" font-weight="600" fill="#13294B" text-anchor="middle">
<rect x="120" y="20" width="180" height="56" rx="10" fill="#ffffff" stroke="#13294B" stroke-width="1.5"/>
<text x="210" y="44">Email</text>
<text x="210" y="62" font-size="11" font-weight="400" fill="#5a6577">webhook → Resend</text>
<rect x="360" y="20" width="180" height="56" rx="10" fill="#ffffff" stroke="#13294B" stroke-width="1.5"/>
<text x="450" y="44">Telegram</text>
<text x="450" y="62" font-size="11" font-weight="400" fill="#5a6577">Bot API long-poll</text>
<rect x="600" y="20" width="180" height="56" rx="10" fill="#ffffff" stroke="#13294B" stroke-width="1.5"/>
<text x="690" y="44">Web Chat</text>
<text x="690" y="62" font-size="11" font-weight="400" fill="#5a6577">REST /chat · read-only</text>
</g>
<!-- Funnel arrows down to the agent -->
<g stroke="#13294B" stroke-width="1.5" fill="none" marker-end="url(#arrow-navy)">
<line x1="210" y1="80" x2="400" y2="155"/>
<line x1="450" y1="80" x2="450" y2="155"/>
<line x1="690" y1="80" x2="500" y2="155"/>
</g>
<!-- HTTP shim label -->
<text x="450" y="135" text-anchor="middle" font-size="11" fill="#5a6577" font-style="italic">single Node process · port 3003 · path-routed</text>
<!-- Agent container -->
<rect x="120" y="160" width="660" height="180" rx="14" fill="#13294B"/>
<text x="450" y="190" text-anchor="middle" font-size="16" font-weight="700" fill="#ffffff">ProgramOS Agent · Docker-isolated</text>
<text x="450" y="210" text-anchor="middle" font-size="12" fill="#ff8533">NanoClaw runtime · Claude Code in a container</text>
<!-- Two modes inside -->
<rect x="160" y="230" width="280" height="90" rx="10" fill="#1a3a6b" stroke="#ff6900" stroke-width="1.5"/>
<text x="300" y="256" text-anchor="middle" font-size="13" font-weight="700" fill="#ffffff">Read-only mode</text>
<text x="300" y="278" text-anchor="middle" font-size="12" fill="#e2e8f0">Questions → search repo</text>
<text x="300" y="296" text-anchor="middle" font-size="12" fill="#e2e8f0">Reply with citations</text>
<text x="300" y="312" text-anchor="middle" font-size="11" fill="#ff8533">no commits</text>
<rect x="460" y="230" width="280" height="90" rx="10" fill="#1a3a6b" stroke="#ff6900" stroke-width="1.5"/>
<text x="600" y="256" text-anchor="middle" font-size="13" font-weight="700" fill="#ffffff">Workspace-write mode</text>
<text x="600" y="278" text-anchor="middle" font-size="12" fill="#e2e8f0">Extract decisions / actions</text>
<text x="600" y="296" text-anchor="middle" font-size="12" fill="#e2e8f0">Granular commits + push</text>
<text x="600" y="312" text-anchor="middle" font-size="11" fill="#ff8533">explicit, human-triggered</text>
<!-- Gate labels: inbound allowlist, outbound delivery gate -->
<text x="450" y="354" text-anchor="middle" font-size="11" fill="#5a6577">in: EMAIL_ALLOWLIST gate · sender authorization enforced before any mode runs</text>
<text x="450" y="370" text-anchor="middle" font-size="11" fill="#5a6577">out: delivery gate · every outbound reply validated before send · gate verdicts machine-logged</text>
<!-- Arrows down to data stores -->
<g stroke="#ff6900" stroke-width="1.5" fill="none" marker-end="url(#arrow-orange)">
<line x1="300" y1="378" x2="220" y2="412"/>
<line x1="600" y1="378" x2="680" y2="412"/>
</g>
<!-- Program repo -->
<rect x="40" y="415" width="360" height="100" rx="10" fill="#ffffff" stroke="#13294B" stroke-width="1.5"/>
<text x="220" y="440" text-anchor="middle" font-size="14" font-weight="700" fill="#13294B">msba-online (program repo)</text>
<text x="220" y="462" text-anchor="middle" font-size="12" fill="#5a6577">CURRICULUM.md · courses/ · design/</text>
<text x="220" y="480" text-anchor="middle" font-size="12" fill="#5a6577">discussions/ · DECISIONS · ACTION_ITEMS</text>
<text x="220" y="498" text-anchor="middle" font-size="11" fill="#ff6900" font-style="italic">plain markdown · version-controlled · program owns it</text>
<!-- Audit log -->
<rect x="500" y="415" width="360" height="100" rx="10" fill="#ffffff" stroke="#13294B" stroke-width="1.5"/>
<text x="680" y="440" text-anchor="middle" font-size="14" font-weight="700" fill="#13294B">Audit log</text>
<text x="680" y="462" text-anchor="middle" font-size="12" fill="#5a6577">append-only · every inbound message,</text>
<text x="680" y="480" text-anchor="middle" font-size="12" fill="#5a6577">every outbound reply, every commit</text>
<text x="680" y="498" text-anchor="middle" font-size="11" fill="#ff6900" font-style="italic">private git repo · accreditation-ready</text>
</svg>
</div>
<p style="text-align: center; color: var(--text-muted); margin-top: 1.5rem; font-size: 0.95rem; max-width: 720px; margin-left: auto; margin-right: auto;">
One Node process routes three channels (email, Telegram, web chat) into a single container-isolated agent. The agent runs in read-only or workspace-write mode per message, operates against a plain-markdown program repository the institution owns, and writes everything — messages, replies, gate verdicts, and commits — into an append-only audit log. Traffic is gated in both directions: a sender allowlist on the way in, and a uniform delivery gate on the way out that validates every reply before it reaches a stakeholder (a hardening lesson from production). Teams and Copilot Studio integrations were built early on and retired in June 2026 as the deployment consolidated on the channels stakeholders actually used; an independent behaviour sensor now re-checks outbound replies against the program records, and out-of-scope requests are escalated to the program director for human review.
</p>
</div>
</section>
<!-- Deployment tiers -->
<section class="tech-section">
<div class="container">
<div class="section-header">
<h2>Start Small, Grow Up</h2>
<p class="section-subtitle">Same recipe, same program folder—only the plumbing changes as you scale</p>
</div>
<div class="tech-grid">
<div class="tech-card">
<span class="tech-icon">💻</span>
<h3>Tier 1: Laptop</h3>
<p>Telegram bot up by end of an afternoon. No IT ticket. Email follows within a week. Perfect for piloting with one program.</p>
</div>
<div class="tech-card">
<span class="tech-icon">🌍</span>
<h3>Tier 2: Small Server</h3>
<p>24/7 uptime, web chat embedded in your program site, Teams channels for faculty. Low monthly cost on a cheap VPS.</p>
</div>
<div class="tech-card">
<span class="tech-icon">🏢</span>
<h3>Tier 3: Cloud</h3>
<p>Multi-program deployment behind your university’s SSO and compliance posture. Same spec, enterprise plumbing.</p>
</div>
<div class="tech-card">
<span class="tech-icon">📖</span>
<h3>Illinois shortcut</h3>
<p>UIUC programs can wire <code>@illinois.edu</code> email into the bot without a Microsoft 365 admin app registration. Recipe included.</p>
</div>
</div>
</div>
</section>
<!-- Why a spec -->
<section class="journey-section">
<div class="container">
<div class="section-header">
<h2>A Spec, Not a Fork</h2>
<p class="section-subtitle">We share the recipe. Your AI assistant cooks it for your program.</p>
</div>
<div class="journey-steps">
<div class="step-detail">
<div class="step-number">1</div>
<div class="step-content">
<h3>Bootstrap your program folder</h3>
<p>One command scaffolds a fresh folder with the right structure—policies, decisions, action items, audit log. A “brainstorm” prompt sits inside it, ready to interview you about your program.</p>
</div>
</div>
<div class="step-detail">
<div class="step-number">2</div>
<div class="step-content">
<h3>Hand the spec to a coding agent</h3>
<p>Open Claude Code (or Cursor, or Codex). Point it at the spec and your fresh program folder. It asks clarifying questions about your stakeholders and channels, then builds the bot to match.</p>
</div>
</div>
<div class="step-detail">
<div class="step-number">3</div>
<div class="step-content">
<h3>Iterate in plain English</h3>
<p>Most program-specific behavior lives in plain-text instruction files (one per channel) and in the structure of your program folder. Both stay readable. Both stay editable. No deep code dive required.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>Navigation</h3>
<a href="projects.html">Projects</a>
<a href="team.html">Team</a>
<a href="news.html">News</a>
</div>
<div class="footer-section">
<h3>Projects</h3>
<a href="venturebot.html">VentureBots</a>
<a href="uniquick.html">UniQuick</a>
<a href="pathshaper.html">PathShaper</a>
<a href="canvas-mcp.html">Canvas MCP</a>
<a href="illiniclaw.html">IlliniClaw</a>
<a href="programos.html">ProgramOS</a>
<a href="inquiring-agents.html">Inquiring Agents</a>
<a href="cognitive-swarm.html">The Cognitive Swarm</a>
<a href="mindforum.html">MindForum</a>
<a href="hackclaw.html">HackClaw</a>
<a href="text-2-sql.html">Text-2-SQL Agent</a>
<a href="gieschat.html">GiesChat</a>
<a href="project-claw.html">ProjectClaw</a>
<a href="agent-docs.html">AgentDocs</a>
</div>
<div class="footer-section">
<h3>Connect</h3>
<a href="https://github.com/vishalsachdev/AgentLab/issues/new/choose" target="_blank" rel="noopener">Submit an Issue</a>
<a href="https://github.com/gies-ai-experiments" target="_blank">GitHub</a>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 AgentLab — Gies College of Business, University of Illinois</p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "f6e8d77284b0466eb2ca753f03d64ec0"}'></script>
</body>
</html>