Skip to content

Commit 95002dc

Browse files
reorder give-it-a-go slide before features slides
1 parent 6e1fc0e commit 95002dc

1 file changed

Lines changed: 71 additions & 66 deletions

File tree

‎presentation.html‎

Lines changed: 71 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -589,7 +589,6 @@
589589
SLIDE 2: WHAT WE'RE TALKING ABOUT
590590
=========================================== -->
591591
<section class="slide" data-slide="2">
592-
<span class="slide-label reveal">// today</span>
593592
<div class="glow-orb cyan" style="width:180px;height:180px;top:10%;right:8%;"></div>
594593
<div class="slide-content stagger">
595594
<h2 class="reveal">What is <span class="neon-cyan">silo</span>?</h2>
@@ -598,19 +597,19 @@ <h2 class="reveal">What is <span class="neon-cyan">silo</span>?</h2>
598597
A CLI tool that runs AI coding agents in <strong>isolated containers</strong> and <strong>lightweight VMs</strong> &mdash; so they get full access without touching our machine.
599598
</p>
600599
<hr class="neon-divider reveal" style="margin: 0;">
601-
<div class="reveal" style="display: flex; gap: clamp(0.5rem, 2vw, 1.5rem); flex-wrap: wrap;">
602-
<div style="flex: 1; min-width: 140px;">
600+
<div class="reveal" style="display: flex; gap: clamp(0.5rem, 2vw, 1.5rem); max-width: 700px;">
601+
<div style="flex: 1;">
603602
<h3 class="neon-magenta" style="margin-bottom: var(--element-gap);">The journey</h3>
604603
<p style="font-size: var(--small-size);">How I got here &mdash; the problem, what I tried, and what worked</p>
605604
</div>
606-
<div style="flex: 1; min-width: 140px;">
607-
<h3 class="neon-cyan" style="margin-bottom: var(--element-gap);">Deep dive</h3>
608-
<p style="font-size: var(--small-size);">How silo works, config, backends, and the bigger picture</p>
609-
</div>
610-
<div style="flex: 1; min-width: 140px;">
611-
<h3 style="color: var(--accent-purple); margin-bottom: var(--element-gap);">Demo</h3>
605+
<div style="flex: 1;">
606+
<h3 style="color: var(--accent-purple); margin-bottom: var(--element-gap);">Demo break</h3>
612607
<p style="font-size: var(--small-size);">See it in action</p>
613608
</div>
609+
<div style="flex: 1;">
610+
<h3 class="neon-cyan" style="margin-bottom: var(--element-gap);">Features</h3>
611+
<p style="font-size: var(--small-size);">How silo works, config, backends, and the bigger picture</p>
612+
</div>
614613
</div>
615614
</div>
616615
</section>
@@ -619,7 +618,7 @@ <h3 style="color: var(--accent-purple); margin-bottom: var(--element-gap);">Demo
619618
SLIDE 3: THE PROBLEM
620619
=========================================== -->
621620
<section class="slide" data-slide="3">
622-
<span class="slide-label reveal">// the problem</span>
621+
<span class="slide-label reveal" style="color: var(--accent-magenta);">// journey</span>
623622
<div class="slide-content stagger">
624623
<h2 class="reveal">AI agents need <span class="neon-cyan">broad access</span></h2>
625624
<hr class="neon-divider reveal">
@@ -639,7 +638,7 @@ <h2 class="reveal">AI agents need <span class="neon-cyan">broad access</span></h
639638
<div class="glow-orb cyan" style="width:200px;height:200px;top:20%;left:5%;"></div>
640639
<div class="glow-orb magenta" style="width:200px;height:200px;bottom:20%;right:10%;"></div>
641640
<div class="slide-content stagger">
642-
<span class="slide-label reveal">// the tension</span>
641+
<span class="slide-label reveal" style="color: var(--accent-magenta);">// journey</span>
643642
<h2 class="reveal">The fundamental tradeoff</h2>
644643
<hr class="neon-divider reveal">
645644
<div class="flow reveal">
@@ -663,7 +662,7 @@ <h2 class="reveal">The fundamental tradeoff</h2>
663662
SLIDE 5: PERMISSIONS
664663
=========================================== -->
665664
<section class="slide" data-slide="5">
666-
<span class="slide-label reveal">// permissions</span>
665+
<span class="slide-label reveal" style="color: var(--accent-magenta);">// journey</span>
667666
<div class="glow-orb magenta" style="width:160px;height:160px;bottom:12%;left:6%;"></div>
668667
<div class="slide-content stagger">
669668
<h2 class="reveal"><span class="neon-cyan">Permissions</span></h2>
@@ -691,7 +690,7 @@ <h2 class="reveal"><span class="neon-cyan">Permissions</span></h2>
691690
SLIDE 6: SANDBOXING
692691
=========================================== -->
693692
<section class="slide" data-slide="6">
694-
<span class="slide-label reveal">// sandboxing</span>
693+
<span class="slide-label reveal" style="color: var(--accent-magenta);">// journey</span>
695694
<div class="glow-orb cyan" style="width:140px;height:140px;top:15%;right:6%;"></div>
696695
<div class="slide-content stagger">
697696
<h2 class="reveal"><span class="neon-magenta">Sandboxing</span></h2>
@@ -712,7 +711,7 @@ <h2 class="reveal"><span class="neon-magenta">Sandboxing</span></h2>
712711
SLIDE 7: RUN THEM SOMEWHERE ELSE
713712
=========================================== -->
714713
<section class="slide" data-slide="7">
715-
<span class="slide-label reveal">// remote</span>
714+
<span class="slide-label reveal" style="color: var(--accent-magenta);">// journey</span>
716715
<div class="glow-orb cyan" style="width:180px;height:180px;top:10%;right:8%;"></div>
717716
<div class="slide-content stagger">
718717
<h2 class="reveal"><span class="neon-magenta">Remote</span></h2>
@@ -728,25 +727,31 @@ <h2 class="reveal"><span class="neon-magenta">Remote</span></h2>
728727
</section>
729728

730729
<!-- ===========================================
731-
SLIDE 8: CONTAINERS
730+
SLIDE 8: CONTAINERS / VMS
732731
=========================================== -->
733732
<section class="slide" data-slide="8">
734-
<span class="slide-label reveal">// containers</span>
733+
<span class="slide-label reveal" style="color: var(--accent-magenta);">// journey</span>
735734
<div class="glow-orb cyan" style="width:180px;height:180px;top:10%;right:8%;"></div>
736735
<div class="slide-content stagger">
737-
<h2 class="reveal"><span class="text-gradient">Containers</span></h2>
736+
<h2 class="reveal"><span class="text-gradient">Containers &amp; VMs</span></h2>
738737
<hr class="neon-divider reveal">
739738
<ul class="neon-list reveal">
740739
<li>Real isolation &mdash; the agent gets <strong>full access</strong> inside a throwaway environment</li>
741740
<li>No permission lists, no fragile sandbox rules</li>
742741
</ul>
743-
<div class="card-grid reveal" style="max-width: 700px;">
742+
<div class="card-grid reveal" style="grid-template-columns: repeat(5, 1fr);">
744743
<div class="card">
745744
<h3 style="color: var(--text-secondary);">Shell script + Docker</h3>
746745
</div>
747746
<div class="card">
748747
<h3 style="color: var(--text-secondary);">VS Code Dev Containers</h3>
749748
</div>
749+
<div class="card">
750+
<h3 style="color: var(--text-secondary);">Lima</h3>
751+
</div>
752+
<div class="card">
753+
<h3 style="color: var(--text-secondary);">UTM</h3>
754+
</div>
750755
<div class="card" style="border-color: var(--accent-cyan); box-shadow: 0 0 30px var(--accent-cyan-glow), 0 0 60px rgba(0, 240, 255, 0.1); position: relative; overflow: visible;">
751756
<h3 class="neon-cyan">silo</h3>
752757
<div style="position: absolute; inset: -1px; border-radius: 12px; border: 1px solid var(--accent-cyan); opacity: 0.5; filter: blur(4px); pointer-events: none;"></div>
@@ -760,7 +765,7 @@ <h3 class="neon-cyan">silo</h3>
760765
=========================================== -->
761766
<section class="slide section-slide" data-slide="9">
762767
<div class="slide-content stagger">
763-
<span class="slide-label reveal">// the solution</span>
768+
<span class="slide-label reveal" style="color: var(--accent-magenta);">// journey</span>
764769
<h2 class="reveal">Isolate, <span class="text-gradient">don't restrict</span></h2>
765770
<hr class="neon-divider reveal">
766771
<div class="flow reveal">
@@ -777,10 +782,37 @@ <h2 class="reveal">Isolate, <span class="text-gradient">don't restrict</span></h
777782
</section>
778783

779784
<!-- ===========================================
780-
SLIDE 10: SUPPORTED TOOLS
785+
SLIDE 10: GIVE IT A GO
781786
=========================================== -->
782-
<section class="slide" data-slide="10">
783-
<span class="slide-label reveal">// tools</span>
787+
<section class="slide title-slide" data-slide="10">
788+
<div class="glow-orb cyan" style="width:300px;height:300px;top:-100px;left:20%;"></div>
789+
<div class="glow-orb magenta" style="width:250px;height:250px;bottom:-80px;right:15%;"></div>
790+
<div class="corner-decoration top-right"></div>
791+
<div class="corner-decoration bottom-left"></div>
792+
<div class="slide-content stagger">
793+
<h1 class="reveal text-gradient">Give it a go</h1>
794+
<hr class="neon-divider reveal">
795+
<div class="code-block reveal" style="max-width: 800px; text-align: left; white-space: nowrap;">
796+
<span class="cmd">brew install</span> <span class="flag">--HEAD</span> leighmcculloch/silo/silo<br><br>
797+
<span class="comment"># or</span><br>
798+
<span class="cmd">go install</span> github.com/leighmcculloch/silo<span class="flag">@latest</span><br><br>
799+
<span class="comment"># then</span><br>
800+
<span class="cmd">silo</span>
801+
</div>
802+
<p class="reveal mono neon-cyan" style="letter-spacing: 0.15em;">
803+
github.com/leighmcculloch/silo
804+
</p>
805+
<p class="reveal" style="font-size: var(--body-size);">
806+
Apache 2.0 · macOS · Docker & Apple Containers
807+
</p>
808+
</div>
809+
</section>
810+
811+
<!-- ===========================================
812+
SLIDE 11: SUPPORTED TOOLS
813+
=========================================== -->
814+
<section class="slide" data-slide="11">
815+
<span class="slide-label reveal">// features</span>
784816
<div class="slide-content stagger">
785817
<h2 class="reveal">Supported <span class="neon-cyan">tools</span></h2>
786818
<hr class="neon-divider reveal">
@@ -805,10 +837,10 @@ <h3 style="color: var(--accent-purple);">GitHub Copilot CLI</h3>
805837
</section>
806838

807839
<!-- ===========================================
808-
SLIDE 11: TWO BACKENDS
840+
SLIDE 12: TWO BACKENDS
809841
=========================================== -->
810-
<section class="slide" data-slide="11">
811-
<span class="slide-label reveal">// backends</span>
842+
<section class="slide" data-slide="12">
843+
<span class="slide-label reveal">// features</span>
812844
<div class="glow-orb magenta" style="width:200px;height:200px;bottom:10%;right:5%;"></div>
813845
<div class="slide-content stagger">
814846
<h2 class="reveal">Two isolation <span class="neon-cyan">backends</span></h2>
@@ -839,38 +871,11 @@ <h3 class="neon-cyan">Apple Container</h3>
839871
</div>
840872
</section>
841873

842-
<!-- ===========================================
843-
SLIDE 12: GIVE IT A GO
844-
=========================================== -->
845-
<section class="slide title-slide" data-slide="12">
846-
<div class="glow-orb cyan" style="width:300px;height:300px;top:-100px;left:20%;"></div>
847-
<div class="glow-orb magenta" style="width:250px;height:250px;bottom:-80px;right:15%;"></div>
848-
<div class="corner-decoration top-right"></div>
849-
<div class="corner-decoration bottom-left"></div>
850-
<div class="slide-content stagger">
851-
<h1 class="reveal text-gradient">Give it a go</h1>
852-
<hr class="neon-divider reveal">
853-
<div class="code-block reveal" style="max-width: 800px; text-align: left; white-space: nowrap;">
854-
<span class="cmd">brew install</span> <span class="flag">--HEAD</span> leighmcculloch/silo/silo<br><br>
855-
<span class="comment"># or</span><br>
856-
<span class="cmd">go install</span> github.com/leighmcculloch/silo<span class="flag">@latest</span><br><br>
857-
<span class="comment"># then</span><br>
858-
<span class="cmd">silo</span>
859-
</div>
860-
<p class="reveal mono neon-cyan" style="letter-spacing: 0.15em;">
861-
github.com/leighmcculloch/silo
862-
</p>
863-
<p class="reveal" style="font-size: var(--body-size);">
864-
Apache 2.0 · macOS · Docker & Apple Containers
865-
</p>
866-
</div>
867-
</section>
868-
869874
<!-- ===========================================
870875
SLIDE 13: WHAT'S INSIDE
871876
=========================================== -->
872877
<section class="slide" data-slide="13">
873-
<span class="slide-label reveal">// environment</span>
878+
<span class="slide-label reveal">// features</span>
874879
<div class="slide-content stagger">
875880
<h2 class="reveal">Pre-built <span class="neon-cyan">dev environment</span></h2>
876881
<hr class="neon-divider reveal">
@@ -911,7 +916,7 @@ <h3 class="neon-cyan">Identical Paths</h3>
911916
SLIDE 14: SHARED CONFIG MOUNTS
912917
=========================================== -->
913918
<section class="slide" data-slide="14">
914-
<span class="slide-label reveal">// mounts</span>
919+
<span class="slide-label reveal">// features</span>
915920
<div class="glow-orb magenta" style="width:180px;height:180px;top:15%;left:5%;"></div>
916921
<div class="slide-content stagger">
917922
<h2 class="reveal">Seamless <span class="text-gradient">local &harr; silo</span></h2>
@@ -936,7 +941,7 @@ <h2 class="reveal">Seamless <span class="text-gradient">local &harr; silo</span>
936941
SLIDE 15: AUTO-UPDATING AGENTS
937942
=========================================== -->
938943
<section class="slide" data-slide="15">
939-
<span class="slide-label reveal">// updates</span>
944+
<span class="slide-label reveal">// features</span>
940945
<div class="glow-orb cyan" style="width:200px;height:200px;top:15%;right:10%;"></div>
941946
<div class="slide-content stagger">
942947
<h2 class="reveal">Auto-updating <span class="neon-cyan">agents</span></h2>
@@ -960,7 +965,7 @@ <h3 style="margin-bottom: var(--element-gap);">Content-addressed image caching</
960965
SLIDE 16: CONFIG COMMANDS
961966
=========================================== -->
962967
<section class="slide" data-slide="16">
963-
<span class="slide-label reveal">// config</span>
968+
<span class="slide-label reveal">// features</span>
964969
<div class="slide-content stagger">
965970
<h2 class="reveal"><span class="neon-magenta">Configurable</span></h2>
966971
<hr class="neon-divider reveal">
@@ -985,7 +990,7 @@ <h2 class="reveal"><span class="neon-magenta">Configurable</span></h2>
985990
SLIDE 17: HIERARCHICAL CONFIG
986991
=========================================== -->
987992
<section class="slide" data-slide="17">
988-
<span class="slide-label reveal">// config</span>
993+
<span class="slide-label reveal">// features</span>
989994
<div class="slide-content stagger">
990995
<h2 class="reveal">Hierarchical <span class="neon-magenta">config</span></h2>
991996
<hr class="neon-divider reveal">
@@ -1015,7 +1020,7 @@ <h2 class="reveal">Hierarchical <span class="neon-magenta">config</span></h2>
10151020
SLIDE 18: REPO-AWARE CONFIG
10161021
=========================================== -->
10171022
<section class="slide" data-slide="18">
1018-
<span class="slide-label reveal">// repos</span>
1023+
<span class="slide-label reveal">// features</span>
10191024
<div class="slide-content stagger">
10201025
<h2 class="reveal">Repository-aware <span class="neon-cyan">config</span></h2>
10211026
<hr class="neon-divider reveal">
@@ -1041,7 +1046,7 @@ <h2 class="reveal">Repository-aware <span class="neon-cyan">config</span></h2>
10411046
SLIDE 19: HOOKS
10421047
=========================================== -->
10431048
<section class="slide" data-slide="19">
1044-
<span class="slide-label reveal">// hooks</span>
1049+
<span class="slide-label reveal">// features</span>
10451050
<div class="glow-orb magenta" style="width:180px;height:180px;bottom:15%;left:5%;"></div>
10461051
<div class="slide-content stagger">
10471052
<h2 class="reveal"><span class="text-gradient">Hooks</span> system</h2>
@@ -1072,7 +1077,7 @@ <h3 class="neon-magenta">pre_run_hooks</h3>
10721077
SLIDE 20: CONTAINER MANAGEMENT
10731078
=========================================== -->
10741079
<section class="slide" data-slide="20">
1075-
<span class="slide-label reveal">// management</span>
1080+
<span class="slide-label reveal">// features</span>
10761081
<div class="slide-content stagger">
10771082
<h2 class="reveal">Container <span class="neon-cyan">management</span></h2>
10781083
<hr class="neon-divider reveal">
@@ -1096,7 +1101,7 @@ <h2 class="reveal">Container <span class="neon-cyan">management</span></h2>
10961101
SLIDE 21: THE BIGGER PICTURE
10971102
=========================================== -->
10981103
<section class="slide" data-slide="21">
1099-
<span class="slide-label reveal">// everyone</span>
1104+
<span class="slide-label reveal">// features</span>
11001105
<div class="glow-orb cyan" style="width:160px;height:160px;top:12%;right:8%;"></div>
11011106
<div class="glow-orb magenta" style="width:140px;height:140px;bottom:15%;left:6%;"></div>
11021107
<div class="slide-content stagger">
@@ -1207,15 +1212,15 @@ <h1 class="reveal text-gradient">Give it a go</h1>
12071212
// Slide 9: The Solution
12081213
"silo's approach is: don't restrict the agent, isolate it. The agent runs inside a container or lightweight VM with full yolo-mode access. But the blast radius is contained. It only sees our working directory and paths we explicitly mount.",
12091214

1210-
// Slide 10: Supported Tools
1215+
// Slide 10: Give It a Go
1216+
"If you want to try it, it's two commands. brew install, silo. That's it. The container image builds automatically on first run. It rebuilds automatically when tools update. We don't have to think about any of it. Let me show you a quick demo.",
1217+
1218+
// Slide 11: Supported Tools
12111219
"silo supports three AI coding tools today. Claude Code from Anthropic, OpenCode, and GitHub Copilot CLI. We just prefix our usual command with 'silo'. The tool is auto-detected or we pick one interactively.",
12121220

1213-
// Slide 11: Two Backends
1221+
// Slide 12: Two Backends
12141222
"There are two isolation backends. Docker works everywhere. Apple Containers are macOS-only but provide stronger isolation. An important distinction: the Apple Container VM can run an entire Docker engine inside it — so when your agent uses Docker, it's truly isolated. With Docker-in-Docker, it's a shared engine and easy to break out of. silo auto-detects which one is available — it prefers Apple Containers when installed.",
12151223

1216-
// Slide 12: Give It a Go
1217-
"If you want to try it, it's two commands. brew install, silo. That's it. The container image builds automatically on first run. It rebuilds automatically when tools update. We don't have to think about any of it. Let me show you a quick demo.",
1218-
12191224
// Slide 13: What's Inside
12201225
"The container comes with a full dev environment. Ubuntu 24.04, Node, Go, Rust, git, GitHub CLI, Docker, LSP servers, and MCP servers pre-installed. Our git identity is automatically forwarded. And importantly, the filesystem structure is identical — if your home is /Users/cooluser on your Mac, that's exactly what it is inside the container. So everything just works, even if you have hardcoded paths in your configs or scripts.",
12211226

0 commit comments

Comments
 (0)