navis/diagrams/navis-story.html at main · NaveenBuidl/navis · 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">
<title>NAVis story · What I Built</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&family=Special+Elite&display=swap');
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: #f5f0e8;
    font-family: 'Caveat', cursive;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 27px, #d4cbb8 28px);
  }
  h1 { font-family: 'Special Elite', cursive; font-size: 26px; color: #2c2416; margin-bottom: 4px; text-align:center; }
  .subtitle { font-size: 16px; color: #6b5c3e; margin-bottom: 6px; text-align:center; max-width: 900px; }
  .meta { font-size: 13px; color: #8a7254; margin-bottom: 18px; font-style: italic; }
  .audience { font-size: 13px; color: #1a4a8a; margin-bottom: 18px; font-weight: 700; }
  svg { width: 100%; max-width: 1100px; }
  .key {
    max-width: 1100px; width: 100%; margin-top: 20px;
    background: #fefcf5; border: 2px solid #c4b89a; border-radius: 4px;
    padding: 22px 26px; font-family: 'Caveat', cursive; font-size: 16px;
    line-height: 1.7; color: #2c2416; box-shadow: 3px 4px 0 #c4b89a;
  }
  .key h2 { font-family: 'Special Elite', cursive; font-size: 15px; margin-bottom: 10px; color: #1a1208; border-bottom: 1.5px solid #c4b89a; padding-bottom: 5px; }
  .key h3 { font-family: 'Special Elite', cursive; font-size: 13px; margin: 14px 0 6px; color: #2c2416; }
  .path-row { margin-bottom: 10px; }
</style>
</head>
<body>
<h1>NAVis · My Weekend-Built Personal AI Agent</h1>
<p class="subtitle">a little helper that lives on a server I rent, thinks with a model, and runs whether I'm watching or not</p>
<div class="meta">story version · for a recruiter, a PM peer, a curious friend</div>
<!-- <div class="audience">AUDIENCE: anyone who wants to understand what NAVis is in 30 seconds</div> -->

<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg">
<defs>
  <marker id="a" markerWidth="11" markerHeight="9" refX="10" refY="4.5" orient="auto"><polygon points="0 0,11 4.5,0 9" fill="#4a3520"/></marker>
  <marker id="as" markerWidth="11" markerHeight="9" refX="10" refY="4.5" orient="auto"><polygon points="0 0,11 4.5,0 9" fill="#1a6b1a"/></marker>
  <filter id="r"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="1.1" xChannelSelector="R" yChannelSelector="G"/></filter>
</defs>

<rect width="1000" height="600" fill="#fefcf5" rx="4"/>

<!-- ========== ME (LEFT) ========== -->
<g filter="url(#r)">
  <circle cx="110" cy="180" r="55" fill="#fff3dc" stroke="#c47000" stroke-width="2.4"/>
</g>
<text x="110" y="175" font-family="Special Elite" font-size="16" fill="#c47000" text-anchor="middle">ME</text>
<text x="110" y="196" font-family="Caveat" font-size="13" fill="#2c2416" text-anchor="middle">laptop · phone</text>

<!-- How I reach it -->
<text x="110" y="265" font-family="Caveat" font-size="13" fill="#6b5c3e" text-anchor="middle" font-style="italic">I reach it by:</text>
<text x="110" y="286" font-family="Caveat" font-size="13" fill="#2c2416" text-anchor="middle">• opening a chat window</text>
<text x="110" y="306" font-family="Caveat" font-size="13" fill="#2c2416" text-anchor="middle">• messaging it on Telegram</text>
<text x="110" y="326" font-family="Caveat" font-size="13" fill="#2c2416" text-anchor="middle">• it reaches me on its own</text>
<text x="110" y="343" font-family="Caveat" font-size="11" fill="#8a1a8a" text-anchor="middle">(e.g. 4am daily check-in)</text>

<!-- Arrow from me to NAVis -->
<path d="M 170 170 Q 320 140 430 170" stroke="#4a3520" stroke-width="2.4" fill="none" marker-end="url(#a)"/>
<text x="300" y="130" font-family="Caveat" font-size="14" fill="#4a3520" text-anchor="middle" font-style="italic">"can you do X?"</text>

<path d="M 430 220 Q 320 250 170 220" stroke="#4a3520" stroke-width="2.4" fill="none" marker-end="url(#a)"/>
<text x="300" y="268" font-family="Caveat" font-size="14" fill="#4a3520" text-anchor="middle" font-style="italic">"here's X, and I also saved it."</text>

<!-- ========== NAVis (CENTER) ========== -->
<g filter="url(#r)">
  <rect x="420" y="80" width="320" height="280" rx="10" fill="#f7f2e6" stroke="#2c2416" stroke-width="2.6"/>
</g>
<text x="580" y="108" font-family="Special Elite" font-size="18" fill="#2c2416" text-anchor="middle">NAVis</text>
<text x="580" y="128" font-family="Caveat" font-size="13" fill="#6b5c3e" text-anchor="middle" font-style="italic">a small AI agent on a server I rent</text>

<!-- Three things it does -->
<g filter="url(#r)">
  <rect x="450" y="150" width="260" height="52" rx="6" fill="#ede0f5" stroke="#5a1a8a" stroke-width="1.8"/>
</g>
<text x="580" y="172" font-family="Special Elite" font-size="13" fill="#5a1a8a" text-anchor="middle">it THINKS</text>
<text x="580" y="190" font-family="Caveat" font-size="13" fill="#2c2416" text-anchor="middle">uses a language model to reason</text>

<g filter="url(#r)">
  <rect x="450" y="215" width="260" height="52" rx="6" fill="#daf5da" stroke="#1a6b1a" stroke-width="1.8"/>
</g>
<text x="580" y="237" font-family="Special Elite" font-size="13" fill="#1a6b1a" text-anchor="middle">it ACTS</text>
<text x="580" y="255" font-family="Caveat" font-size="13" fill="#2c2416" text-anchor="middle">reads email, messages me, runs skills</text>

<g filter="url(#r)">
  <rect x="450" y="280" width="260" height="52" rx="6" fill="#fff3dc" stroke="#c47000" stroke-width="1.8"/>
</g>
<text x="580" y="302" font-family="Special Elite" font-size="13" fill="#c47000" text-anchor="middle">it REMEMBERS</text>
<text x="580" y="320" font-family="Caveat" font-size="13" fill="#2c2416" text-anchor="middle">writes things down in plain-text files</text>

<text x="580" y="349" font-family="Caveat" font-size="11" fill="#6b5c3e" text-anchor="middle" font-style="italic">the same loop whether I'm in the chat or asleep</text>

<!-- ========== THE WORLD (RIGHT) ========== -->
<text x="860" y="108" font-family="Special Elite" font-size="13" fill="#2c2416" text-anchor="middle">WHAT IT CAN REACH</text>

<g filter="url(#r)">
  <rect x="790" y="130" width="160" height="46" rx="6" fill="#daeaf5" stroke="#1a4a8a" stroke-width="1.6"/>
</g>
<text x="870" y="158" font-family="Caveat" font-size="14" fill="#1a4a8a" text-anchor="middle">my email</text>

<g filter="url(#r)">
  <rect x="790" y="185" width="160" height="46" rx="6" fill="#daeaf5" stroke="#1a4a8a" stroke-width="1.6"/>
</g>
<text x="870" y="213" font-family="Caveat" font-size="14" fill="#1a4a8a" text-anchor="middle">the web</text>

<g filter="url(#r)">
  <rect x="790" y="240" width="160" height="46" rx="6" fill="#daeaf5" stroke="#1a4a8a" stroke-width="1.6"/>
</g>
<text x="870" y="268" font-family="Caveat" font-size="14" fill="#1a4a8a" text-anchor="middle">Telegram</text>

<g filter="url(#r)">
  <rect x="790" y="295" width="160" height="46" rx="6" fill="#daeaf5" stroke="#1a4a8a" stroke-width="1.6"/>
</g>
<text x="870" y="323" font-family="Caveat" font-size="14" fill="#1a4a8a" text-anchor="middle">a language model</text>

<!-- Arrows from NAVis to external -->
<line x1="740" y1="155" x2="788" y2="155" stroke="#4a3520" stroke-width="1.8" marker-end="url(#a)"/>
<line x1="740" y1="210" x2="788" y2="210" stroke="#4a3520" stroke-width="1.8" marker-end="url(#a)"/>
<line x1="740" y1="265" x2="788" y2="265" stroke="#4a3520" stroke-width="1.8" marker-end="url(#a)"/>
<line x1="740" y1="320" x2="788" y2="320" stroke="#4a3520" stroke-width="1.8" marker-end="url(#a)"/>

<!-- ========== WHAT MAKES IT INTERESTING (BOTTOM) ========== -->
<g filter="url(#r)">
  <rect x="50" y="410" width="900" height="160" rx="8" fill="#fffde0" stroke="#8a6b00" stroke-width="2"/>
</g>
<text x="500" y="438" font-family="Special Elite" font-size="14" fill="#8a6b00" text-anchor="middle">WHAT MAKES IT INTERESTING</text>

<!-- Three points in a row -->
<text x="200" y="468" font-family="Special Elite" font-size="12" fill="#2c2416" text-anchor="middle">1. It runs on its own</text>
<text x="200" y="488" font-family="Caveat" font-size="13" fill="#2c2416" text-anchor="middle">On my server, not a SaaS.</text>
<text x="200" y="506" font-family="Caveat" font-size="13" fill="#2c2416" text-anchor="middle">It keeps running whether</text>
<text x="200" y="524" font-family="Caveat" font-size="13" fill="#2c2416" text-anchor="middle">my laptop is open or not.</text>

<text x="500" y="468" font-family="Special Elite" font-size="12" fill="#2c2416" text-anchor="middle">2. Its brain is in plain files</text>
<text x="500" y="488" font-family="Caveat" font-size="13" fill="#2c2416" text-anchor="middle">Who it is, what it knows</text>
<text x="500" y="506" font-family="Caveat" font-size="13" fill="#2c2416" text-anchor="middle">about me, what it remembers:</text>
<text x="500" y="524" font-family="Caveat" font-size="13" fill="#2c2416" text-anchor="middle">all readable text files I own.</text>

<text x="800" y="468" font-family="Special Elite" font-size="12" fill="#2c2416" text-anchor="middle">3. It's a pattern, not a product</text>
<text x="800" y="488" font-family="Caveat" font-size="13" fill="#2c2416" text-anchor="middle">The same five pieces —</text>
<text x="800" y="506" font-family="Caveat" font-size="13" fill="#2c2416" text-anchor="middle">model, files, shell, schedule —</text>
<text x="800" y="524" font-family="Caveat" font-size="13" fill="#2c2416" text-anchor="middle">build any autonomous system.</text>

<text x="500" y="555" font-family="Caveat" font-size="14" fill="#6b5c3e" text-anchor="middle" font-style="italic">
  I built this so I could understand the architecture from the inside, not just use it.
</text>

</svg>

<div class="key">
  <h2>story · What I Built </h2>

  <h3>The one-line version</h3>
  <div class="path-row">
    I built a small AI agent called NAVis that lives on a server I rent. I can chat with it in a browser, message it on Telegram, or let it reach out to me on a schedule — and it remembers everything in plain-text files I own.
  </div>

  <h3>What it actually does</h3>
  <div class="path-row">
    When I talk to it, it reads a small set of files that describe who it is and what it knows about me, uses a language model to figure out what to do, takes action (maybe reading my email, searching the web, sending me a Telegram message), and writes down anything worth remembering. Same loop whether I kicked it off or a schedule did.
  </div>

  <h3>Why I built it</h3>
  <div class="path-row">
    Marc Andreessen described an agent as <em>LLM + Shell + Filesystem + Markdown + Cron</em>. A model to reason, a shell to act, a filesystem to remember, markdown as a format both humans and models can read, and cron so it runs whether I'm watching or not. Every piece already existed. The combination is what makes it autonomous. I wanted to understand that combination from the inside.
  </div>

  <h3>What it taught me</h3>
  <div class="path-row">
    The agent sometimes <em>claims</em> it did something without actually doing it — "I wrote the file" when nothing got written. That's a property of how language models work, not a bug. The lesson generalises: trust what the filesystem says, not what the agent says. That shapes how I think about any AI system that takes actions.
  </div>

  <h3>Where it leads</h3>
  <div class="path-row">
    NAVis is the first of two systems I built on the same primitives. The second is PRACtis — an autonomous pipeline that tracks how AI practitioners think, runs every Monday without me touching it, and publishes a weekly digest. Same five pieces, different purpose. That's the architectural point: it's a pattern, not a product.
  </div>
</div>

</body>
</html>