Version history
Introducing HumanwareOS · 5 versions · 9 commits
-
Aligned with the site
- Moved page metadata into the shared site chrome
- Finalized the current page structure
+0−1View site at this time ↗See diffs 1 commit
fix: align video page with site chrome9eaa819 ↗+0 −1diff --git a/src/pages/videos/introducing-humanwareos.astro b/src/pages/videos/introducing-humanwareos.astroindex a4f7253..1af7408 100644--- a/src/pages/videos/introducing-humanwareos.astro+++ b/src/pages/videos/introducing-humanwareos.astro@@ -121,7 +121,6 @@ const transcriptSections = transcriptOutline.map((section, index) => {><article class="video-page"><header>- <p class="eyebrow">Video · July 29, 2026 · 29 min</p><h1>Introducing HumanwareOS</h1><p class="dek">A Slack-first operating system for directing AI agents without carrying -
Navigation becomes scannable
- Added a table of contents
- Made the hierarchy and multimedia labels clearer
+29−14View site at this time ↗See diffs 3 commits
feat: add HumanwareOS page contentsaa9507f ↗+18 −2diff --git a/src/pages/videos/introducing-humanwareos.astro b/src/pages/videos/introducing-humanwareos.astroindex 4c68aa3..bd33b10 100644--- a/src/pages/videos/introducing-humanwareos.astro+++ b/src/pages/videos/introducing-humanwareos.astro@@ -127,6 +127,22 @@ const transcriptSections = transcriptOutline.map((section, index) => {A Slack-first operating system for directing AI agents without carryingevery session in your head.</p>+ <nav class="page-toc" aria-label="On this page">+ <p class="eyebrow">On this page</p>+ <p class="toc-intro">The video is the source. The full page adds the argument, product walkthrough, architecture, key clips, and an edited transcript.</p>+ <ol>+ <li><a href="#intro">Intro</a></li>+ <li><a href="#challenge">Challenge</a></li>+ <li><a href="#solution">Solution: Slack</a></li>+ <li><a href="#vision">Vision</a></li>+ <li><a href="#demo">Demo</a></li>+ <li><a href="#features">Key features</a></li>+ <li><a href="#architecture">Tech architecture</a></li>+ <li><a href="#details">Tech details</a></li>+ <li><a href="#key-moments">Key moments</a></li>+ <li><a href="#transcript">Transcript</a></li>+ </ol>+ </nav><div class="video-frame"><iframesrc={`https://www.youtube-nocookie.com/embed/${videoId}?rel=0`}@@ -313,7 +329,7 @@ const transcriptSections = transcriptOutline.map((section, index) => {</p></section>- <section>+ <section id="key-moments"><p class="eyebrow">Watch the ideas</p><h2>Key moments</h2><div class="snippets">@@ -341,7 +357,7 @@ const transcriptSections = transcriptOutline.map((section, index) => {</div></section>- <section>+ <section id="transcript"><p class="eyebrow">Full record</p><h2>Transcript</h2><p class="note">refine: make HumanwareOS contents hierarchical975d4f2 ↗+10 −10diff --git a/src/pages/videos/introducing-humanwareos.astro b/src/pages/videos/introducing-humanwareos.astroindex bd33b10..abe5598 100644--- a/src/pages/videos/introducing-humanwareos.astro+++ b/src/pages/videos/introducing-humanwareos.astro@@ -131,16 +131,16 @@ const transcriptSections = transcriptOutline.map((section, index) => {<p class="eyebrow">On this page</p><p class="toc-intro">The video is the source. The full page adds the argument, product walkthrough, architecture, key clips, and an edited transcript.</p><ol>- <li><a href="#intro">Intro</a></li>- <li><a href="#challenge">Challenge</a></li>- <li><a href="#solution">Solution: Slack</a></li>- <li><a href="#vision">Vision</a></li>- <li><a href="#demo">Demo</a></li>- <li><a href="#features">Key features</a></li>- <li><a href="#architecture">Tech architecture</a></li>- <li><a href="#details">Tech details</a></li>- <li><a href="#key-moments">Key moments</a></li>- <li><a href="#transcript">Transcript</a></li>+ <li><a href="#intro">Intro</a><ul><li>Ariel Diaz</li><li>Serial entrepreneur and first user</li></ul></li>+ <li><a href="#challenge">Challenge</a><ul><li>Traditional tools and the systems tried</li><li>Agents invert computing—and increase cognitive load</li></ul></li>+ <li><a href="#solution">Solution: Slack</a><ul><li>Channels, threads, notifications, and visible status</li><li>One Slack thread becomes one durable agent session</li></ul></li>+ <li><a href="#vision">Vision</a><ul><li>Human-first context engineering</li><li>Parallel work, portable memory, and model choice</li></ul></li>+ <li><a href="#demo">Demo</a><ul><li>Coding, company work, and the system building itself</li><li>Visibility, artifacts, archive, and publishing</li></ul></li>+ <li><a href="#features">Key features</a><ul><li>Liv and Max: personal/work duality</li><li>Status, agents, harnesses, models, and integrations</li></ul></li>+ <li><a href="#architecture">Tech architecture</a><ul><li>Slack, MacBook, Tailscale, and Mac mini</li><li>OpenClaw, any harness, any model, and unified memory</li></ul></li>+ <li><a href="#details">Tech details</a><ul><li>Framework versus replaceable products</li><li>Up-front and monthly running cost</li></ul></li>+ <li><a href="#key-moments">Key moments</a><ul><li>Four bounded clips from the talk</li></ul></li>+ <li><a href="#transcript">Transcript</a><ul><li>Natural paragraphs, outline sections, and source timestamps</li></ul></li></ol></nav><div class="video-frame">fix: clarify multimedia contents navigationf7f2d5b ↗+1 −2diff --git a/src/pages/videos/introducing-humanwareos.astro b/src/pages/videos/introducing-humanwareos.astroindex abe5598..a4f7253 100644--- a/src/pages/videos/introducing-humanwareos.astro+++ b/src/pages/videos/introducing-humanwareos.astro@@ -128,8 +128,7 @@ const transcriptSections = transcriptOutline.map((section, index) => {every session in your head.</p><nav class="page-toc" aria-label="On this page">- <p class="eyebrow">On this page</p>- <p class="toc-intro">The video is the source. The full page adds the argument, product walkthrough, architecture, key clips, and an edited transcript.</p>+ <p class="eyebrow">Contents</p><ol><li><a href="#intro">Intro</a><ul><li>Ariel Diaz</li><li>Serial entrepreneur and first user</li></ul></li><li><a href="#challenge">Challenge</a><ul><li>Traditional tools and the systems tried</li><li>Agents invert computing—and increase cognitive load</li></ul></li> -
Artifacts and sharing
- Added the public-artifacts example and bounded video clip
- Created a page-specific social image
+14−1View site at this time ↗See diffs 2 commits
feat: add artifacts video clipe9bd60c ↗+10 −0diff --git a/src/pages/videos/introducing-humanwareos.astro b/src/pages/videos/introducing-humanwareos.astroindex dacada0..a182c73 100644--- a/src/pages/videos/introducing-humanwareos.astro+++ b/src/pages/videos/introducing-humanwareos.astro@@ -238,6 +238,16 @@ const transcriptSections = transcriptOutline.map((section, index) => {from the private Mac mini to a public GitHub-backed web page.</p><p><a class="timestamp-link" href={`https://www.youtube.com/watch?v=${videoId}&t=1256s`}>Watch this section from 20:56 ↗</a></p>+ <div class="video-frame">+ <iframe+ loading="lazy"+ src={`https://www.youtube-nocookie.com/embed/${videoId}?start=1256&end=1320&rel=0`}+ title="Artifacts: internal references and public publishing"+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"+ referrerpolicy="strict-origin-when-cross-origin"+ allowfullscreen+ />+ </div><figure class="demo-shot"><a href={`https://www.youtube.com/watch?v=${videoId}&t=1256s`}><img src="/images/videos/introducing-humanwareos/artifacts-sharing-21-04.jpg" alt="HumanwareOS artifact archive shown at 21:04 in the demo" loading="lazy" />feat: add HumanwareOS share image02c0236 ↗+4 −1diff --git a/src/pages/videos/introducing-humanwareos.astro b/src/pages/videos/introducing-humanwareos.astroindex a182c73..4c68aa3 100644--- a/src/pages/videos/introducing-humanwareos.astro+++ b/src/pages/videos/introducing-humanwareos.astro@@ -113,7 +113,10 @@ const transcriptSections = transcriptOutline.map((section, index) => {title="Introducing HumanwareOS"description="A walkthrough of a Slack-first operating system for humans directing AI agents, with key clips and a full timestamped transcript."canonical="https://www.arieldiaz.com/videos/introducing-humanwareos/"- ogImage="/images/ariel-diaz-2026-web-assets/ariel-diaz-2026-social-1200w.jpg"+ ogImage="/images/videos/introducing-humanwareos/share-og.jpg"+ ogImageAlt="Introducing HumanwareOS by Ariel Diaz"+ ogImageWidth={1280}+ ogImageHeight={720}wide><article class="video-page"> -
Expanded into a deep dive
- Added challenge, solution, vision, demo, and architecture
- Reworked the transcript into readable sections
- Added real product screenshots
+205−30View site at this time ↗See diffs 2 commits
feat: expand HumanwareOS video reference pagef9d3243 ↗+135 −19diff --git a/src/pages/videos/introducing-humanwareos.astro b/src/pages/videos/introducing-humanwareos.astroindex 1070d15..9bef521 100644--- a/src/pages/videos/introducing-humanwareos.astro+++ b/src/pages/videos/introducing-humanwareos.astro@@ -93,31 +93,65 @@ const transcript = transcriptVtt</div></header>- <section>- <p class="eyebrow">The argument</p>- <h2>The bottleneck moved from software capability to human attention.</h2>+ <section id="intro">+ <p class="eyebrow">Intro</p>+ <h2>Ariel Diaz, serial entrepreneur—and the first user</h2><p>- AI makes parallel work cheap. Following dozens of chats, tools, agents,- permissions, and decisions does not become cheap with it. HumanwareOS- keeps the human close to priorities and taste while agents handle- execution.+ I have spent my career building software companies and operating teams.+ HumanwareOS began as an opinionated system for my own work: a way to run+ AI agents without turning their growing capability into a new kind of+ management overhead.</p></section>- <section>- <p class="eyebrow">Four layers</p>- <h2>A human-scale control plane</h2>- <div class="layers" aria-label="HumanwareOS system layers">- <div><span>01</span><strong>Human</strong><small>Taste · priority · authority</small></div>- <div><span>02</span><strong>Slack</strong><small>Threads · status · context</small></div>- <div><span>03</span><strong>OpenClaw</strong><small>Routing · tools · permissions</small></div>- <div><span>04</span><strong>Agents + memory</strong><small>Execution that outlives a session</small></div>- </div>+ <section id="challenge">+ <p class="eyebrow">Challenge</p>+ <h2>Agents inverted computing. They also raised the cognitive load.</h2>+ <p>+ Traditional software made people learn the machine's language and work+ around its structure. Agents reverse that relationship: the computer can+ finally understand our language and work for us. But coordinating many+ capable agents is more cognitively demanding than using one tool.+ </p>+ <p>+ I tried Conductor, Superset, Paperclip, and a workflow built in Notion.+ Each solved part of the problem, but the friction moved rather than+ disappeared: too many sessions, interfaces, notifications, and states to+ hold in my head.+ </p></section>- <section>- <p class="eyebrow">Operating model</p>- <h2>More concurrent work, less context held in one head</h2>+ <section id="solution">+ <p class="eyebrow">Solution: Slack</p>+ <h2>Use the interface that already knows how teams work</h2>+ <p>+ Slack had already solved this problem at my previous companies. Channels+ carry context, threads separate parallel work, notifications return+ attention at the right moment, and status stays visible to the whole+ team. HumanwareOS makes Slack the control plane for an agent team.+ </p>+ <figure class="demo-shot">+ <img src="/images/videos/introducing-humanwareos/slack-control-plane.jpg" alt="HumanwareOS running agent work in a Slack thread" loading="lazy" />+ <figcaption>One Slack thread becomes one durable agent session, with instructions, progress, and status in the same place.</figcaption>+ </figure>+ </section>++ <section id="vision">+ <p class="eyebrow">Vision</p>+ <h2>Context engineering for humans</h2>+ <p>+ We have become good at engineering context for agents while leaving the+ human to reconstruct everything manually. The human-first version puts+ mental load, team status, notifications, thread visibility, and channel+ context in one place so parallel work does not become chaos.+ </p>+ <p>+ The system is intentionally personal and opinionated, but it avoids lock+ in. Agent definitions and memory live in portable Markdown and Git. Any+ harness or model can plug in—including local models for privacy, cost,+ and honest benchmarking. The long-term question is not only what models+ can do, but where the durable value accrues.+ </p><div class="load-chart"><div><span>Chat-first tools</span><i><b style="width:88%"></b></i><small>Human tracks sessions</small></div><div><span>HumanwareOS</span><i><b style="width:28%"></b></i><small>System tracks state</small></div>@@ -130,6 +164,88 @@ const transcript = transcriptVtt</div></section>+ <section id="demo">+ <p class="eyebrow">Demo</p>+ <h2>The system runs the work—and helps build itself</h2>+ <p>+ In the walkthrough I use HumanwareOS for coding, other company work, the+ ArielDiaz.com rebuild, and the system's own operations. The same surface+ exposes sessions, security, token use, model activity, and shareable+ artifacts instead of hiding the machinery in terminal windows.+ </p>+ <div class="shot-grid">+ <figure class="demo-shot">+ <img src="/images/videos/introducing-humanwareos/humanwareos-site.jpg" alt="HumanwareOS product page being built during the demo" loading="lazy" />+ <figcaption><strong>Building the product.</strong> Agents move from a Slack request into real code and a public HumanwareOS page.</figcaption>+ </figure>+ <figure class="demo-shot">+ <img src="/images/videos/introducing-humanwareos/product-site-system.jpg" alt="A website system showing multiple responsive page views" loading="lazy" />+ <figcaption><strong>Other work.</strong> The same operating model coordinates a full website system across pages and breakpoints.</figcaption>+ </figure>+ <figure class="demo-shot">+ <img src="/images/videos/introducing-humanwareos/operations-visibility.jpg" alt="Operations dashboard showing agent activity, sessions, and model usage" loading="lazy" />+ <figcaption><strong>Building itself.</strong> Operational visibility makes models, sessions, cost, and system health inspectable.</figcaption>+ </figure>+ <figure class="demo-shot">+ <img src="/images/videos/introducing-humanwareos/artifacts-sharing.jpg" alt="An artifact shared back into a Slack conversation" loading="lazy" />+ <figcaption><strong>Artifacts.</strong> Work returns as an internal reference or an easy-to-share web artifact; archive and provenance follow the output.</figcaption>+ </figure>+ </div>+ </section>++ <section id="features">+ <p class="eyebrow">Key features</p>+ <h2>Life and work stay distinct without becoming disconnected</h2>+ <p>+ Liv owns personal life; Max owns work. That duality is a deliberate+ information architecture—two complementary agents, like zero and one,+ yin and yang, or the distinctions that make information possible. Their+ shared memory preserves continuity without collapsing every context into+ one voice.+ </p>+ <p>+ Slack reactions form a compact information system: lifecycle status,+ agent, harness, and model are visible at a glance. Integrations connect+ the same conversational surface to tools, while artifacts can be+ published directly to the web instead of trapped inside a chat.+ </p>+ <figure class="demo-shot">+ <img src="/images/videos/introducing-humanwareos/personal-work-duality.jpg" alt="Separate personal and work agent contexts in Slack" loading="lazy" />+ <figcaption>Personal and work agents share an operating system while keeping their roles, channels, and judgment distinct.</figcaption>+ </figure>+ </section>++ <section id="architecture">+ <p class="eyebrow">Tech architecture</p>+ <h2>A portable stack, centered on the human</h2>+ <div class="layers" aria-label="HumanwareOS system layers">+ <div><span>01</span><strong>Human + Slack</strong><small>Mental model · threads · status · authority</small></div>+ <div><span>02</span><strong>MacBook + Tailscale</strong><small>Daily interface · private route to the Mac mini</small></div>+ <div><span>03</span><strong>Mac mini + OpenClaw</strong><small>Always-on runtime · agents · tools · routing</small></div>+ <div><span>04</span><strong>Any harness + model</strong><small>Claude Code · Codex · OpenCode · Pi · cloud or local models</small></div>+ <div><span>05</span><strong>Portable state</strong><small>GitHub · Markdown memory · Doppler key management</small></div>+ <div><span>06</span><strong>Public edge</strong><small>Custom domain · Cloudflare · automated publishing</small></div>+ </div>+ </section>++ <section id="details">+ <p class="eyebrow">Tech details</p>+ <h2>Framework, products, and running cost are separate layers</h2>+ <p>+ HumanwareOS is the overall operating model. OpenClaw is the runtime;+ Slack, Tailscale, Cloudflare, Doppler, GitHub, model providers, and local+ hardware are replaceable products around it. That separation keeps the+ framework understandable and the system portable.+ </p>+ <p>+ The up-front cost is primarily the Mac mini and any existing laptop.+ Monthly cost depends on the mix of Slack and developer-tool plans,+ hosted model subscriptions or API usage, and optional infrastructure.+ Local models trade hardware and electricity for privacy, predictable+ marginal cost, and a useful benchmark against cloud systems.+ </p>+ </section>+<section><p class="eyebrow">Watch the ideas</p><h2>Key moments</h2>fix: refine HumanwareOS article and transcripteb37016 ↗+70 −11diff --git a/src/pages/videos/introducing-humanwareos.astro b/src/pages/videos/introducing-humanwareos.astroindex 9bef521..dacada0 100644--- a/src/pages/videos/introducing-humanwareos.astro+++ b/src/pages/videos/introducing-humanwareos.astro@@ -46,6 +46,7 @@ function clock(total: number) {function parseTime(value: string) {const parts = value.replace(',', '.').split(':').map(Number);+ if (parts.length === 2) return parts[0] * 60 + parts[1];return parts[0] * 3600 + parts[1] * 60 + parts[2];}@@ -66,6 +67,46 @@ const transcript = transcriptVtt.trim();return text ? [{ start, text }] : [];});++const transcriptOutline = [+ { label: 'Intro', start: 0 },+ { label: 'Challenge', start: 96 },+ { label: 'Solution: Slack', start: 459 },+ { label: 'Vision', start: 496 },+ { label: 'Demo', start: 633 },+ { label: 'Key features', start: 1400 },+ { label: 'Tech architecture', start: 1518 },+ { label: 'Tech details', start: 1605 },+];++function paragraphize(cues: typeof transcript) {+ const paragraphs: { start: number; text: string }[] = [];+ let current: { start: number; text: string; words: number } | undefined;++ for (const cue of cues) {+ if (!current) current = { start: cue.start, text: cue.text, words: cue.text.split(/\s+/).length };+ else {+ current.text += ` ${cue.text}`;+ current.words += cue.text.split(/\s+/).length;+ }++ if (current.words >= 75 && /[.!?…]$/.test(cue.text)) {+ paragraphs.push({ start: current.start, text: current.text });+ current = undefined;+ }+ }++ if (current) paragraphs.push({ start: current.start, text: current.text });+ return paragraphs;+}++const transcriptSections = transcriptOutline.map((section, index) => {+ const end = transcriptOutline[index + 1]?.start ?? Infinity;+ return {+ ...section,+ paragraphs: paragraphize(transcript.filter((cue) => cue.start >= section.start && cue.start < end)),+ };+});---<Base@@ -73,6 +114,7 @@ const transcript = transcriptVttdescription="A walkthrough of a Slack-first operating system for humans directing AI agents, with key clips and a full timestamped transcript."canonical="https://www.arieldiaz.com/videos/introducing-humanwareos/"ogImage="/images/ariel-diaz-2026-web-assets/ariel-diaz-2026-social-1200w.jpg"+ wide><article class="video-page"><header>@@ -186,9 +228,21 @@ const transcript = transcriptVtt<img src="/images/videos/introducing-humanwareos/operations-visibility.jpg" alt="Operations dashboard showing agent activity, sessions, and model usage" loading="lazy" /><figcaption><strong>Building itself.</strong> Operational visibility makes models, sessions, cost, and system health inspectable.</figcaption></figure>+ </div>+ <div class="artifact-feature">+ <p class="eyebrow">Artifacts</p>+ <h3>Internal references that can become public links</h3>+ <p>+ Agent output does not have to disappear inside a session. HumanwareOS+ keeps artifacts in a browsable archive, then lets selected work move+ from the private Mac mini to a public GitHub-backed web page.+ </p>+ <p><a class="timestamp-link" href={`https://www.youtube.com/watch?v=${videoId}&t=1256s`}>Watch this section from 20:56 ↗</a></p><figure class="demo-shot">- <img src="/images/videos/introducing-humanwareos/artifacts-sharing.jpg" alt="An artifact shared back into a Slack conversation" loading="lazy" />- <figcaption><strong>Artifacts.</strong> Work returns as an internal reference or an easy-to-share web artifact; archive and provenance follow the output.</figcaption>+ <a href={`https://www.youtube.com/watch?v=${videoId}&t=1256s`}>+ <img src="/images/videos/introducing-humanwareos/artifacts-sharing-21-04.jpg" alt="HumanwareOS artifact archive shown at 21:04 in the demo" loading="lazy" />+ </a>+ <figcaption><strong>Artifacts at 21:04.</strong> A permanent internal reference for the ArielDiaz.com iterations, ready to share or publish when useful.</figcaption></figure></div></section>@@ -283,18 +337,23 @@ const transcript = transcriptVtt</p><details><summary>Read the full transcript</summary>- <ol class="transcript">+ <div class="transcript">{- transcript.map((cue) => (- <li>- <a href={`https://www.youtube.com/watch?v=${videoId}&t=${Math.floor(cue.start)}s`}>- {clock(cue.start)}- </a>- <span>{cue.text}</span>- </li>+ transcriptSections.map((section) => (+ <div class="transcript-section">+ <h3>{section.label}</h3>+ {section.paragraphs.map((paragraph) => (+ <p>+ <a class="timestamp-link" href={`https://www.youtube.com/watch?v=${videoId}&t=${Math.floor(paragraph.start)}s`}>+ {clock(paragraph.start)}+ </a>{' '}+ {paragraph.text}+ </p>+ ))}+ </div>))}- </ol>+ </div></details><p><a href="./transcript.vtt" download>Download timestamped VTT</a></p></section> -
Initial reference page
- Published the video and core argument
- Added the system layers, key clips, and transcript
+240−0View site at this time ↗See diffs 1 commit
feat: publish Introducing HumanwareOS video pageb1d7f30 ↗+240 −0diff --git a/src/pages/videos/introducing-humanwareos.astro b/src/pages/videos/introducing-humanwareos.astronew file mode 100644index 0000000..2c8e3f2--- /dev/null+++ b/src/pages/videos/introducing-humanwareos.astro@@ -0,0 +1,240 @@+---+import Base from '../../layouts/Base.astro';+import transcriptVtt from '../../content/videos/introducing-humanwareos.vtt?raw';++const videoId = 'bupWm8sI4g0';++const snippets = [+ {+ start: 50,+ end: 79,+ label: 'The problem',+ title: 'Technology finally works for us',+ quote:+ '“For tech, most of the time, we have to work for tech… But now, the computers speak our language.”',+ },+ {+ start: 449,+ end: 501,+ label: 'The interface',+ title: 'Slack as the breakthrough',+ quote:+ '“Slack has spent years—decade plus at this point—building a refined user experience for how people work.”',+ },+ {+ start: 1639,+ end: 1691,+ label: 'The thesis',+ title: 'Humans remain in the orchestration layer',+ quote:+ '“Humans are still going to be an important part of that orchestration layer—from a taste standpoint, from a priority standpoint.”',+ },+ {+ start: 1697,+ end: 1731,+ label: 'Why it matters',+ title: 'Humans care about humans',+ quote:+ '“No matter how good the technology is, humans care about other humans… and they care about being a better human.”',+ },+];++function clock(total: number) {+ const seconds = Math.floor(total);+ return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`;+}++function parseTime(value: string) {+ const parts = value.replace(',', '.').split(':').map(Number);+ return parts[0] * 3600 + parts[1] * 60 + parts[2];+}++const transcript = transcriptVtt+ .replace(/^\uFEFF?WEBVTT[^\n]*\n+/, '')+ .trim()+ .split(/\n{2,}/)+ .flatMap((block) => {+ const lines = block.split('\n');+ const timingIndex = lines.findIndex((line) => line.includes(' --> '));+ if (timingIndex < 0) return [];+ const start = parseTime(lines[timingIndex].split(' --> ')[0]);+ const text = lines+ .slice(timingIndex + 1)+ .join(' ')+ .replace(/<[^>]+>/g, '')+ .replace(/\s+/g, ' ')+ .trim();+ return text ? [{ start, text }] : [];+ });+---++<Base+ title="Introducing HumanwareOS"+ description="A walkthrough of a Slack-first operating system for humans directing AI agents, with key clips and a full timestamped transcript."+ canonical="https://www.arieldiaz.com/videos/introducing-humanwareos/"+ ogImage="/images/ariel-diaz-2026-web-assets/ariel-diaz-2026-social-1200w.jpg"+>+ <article class="video-page">+ <header>+ <p class="eyebrow">Video · July 29, 2026 · 29 min</p>+ <h1>Introducing HumanwareOS</h1>+ <p class="dek">+ A Slack-first operating system for directing AI agents without carrying+ every session in your head.+ </p>+ <div class="video-frame">+ <iframe+ src={`https://www.youtube-nocookie.com/embed/${videoId}?rel=0`}+ title="Introducing HumanwareOS by Ariel Diaz"+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"+ referrerpolicy="strict-origin-when-cross-origin"+ allowfullscreen+ ></iframe>+ </div>+ </header>++ <section>+ <p class="eyebrow">The argument</p>+ <h2>The bottleneck moved from software capability to human attention.</h2>+ <p>+ AI makes parallel work cheap. Following dozens of chats, tools, agents,+ permissions, and decisions does not become cheap with it. HumanwareOS+ keeps the human close to priorities and taste while agents handle+ execution.+ </p>+ </section>++ <section>+ <p class="eyebrow">Four layers</p>+ <h2>A human-scale control plane</h2>+ <div class="layers" aria-label="HumanwareOS system layers">+ <div><span>01</span><strong>Human</strong><small>Taste · priority · authority</small></div>+ <div><span>02</span><strong>Slack</strong><small>Threads · status · context</small></div>+ <div><span>03</span><strong>OpenClaw</strong><small>Routing · tools · permissions</small></div>+ <div><span>04</span><strong>Agents + memory</strong><small>Execution that outlives a session</small></div>+ </div>+ </section>++ <section>+ <p class="eyebrow">Operating model</p>+ <h2>More concurrent work, less context held in one head</h2>+ <div class="load-chart">+ <div><span>Chat-first tools</span><i><b style="width:88%"></b></i><small>Human tracks sessions</small></div>+ <div><span>HumanwareOS</span><i><b style="width:28%"></b></i><small>System tracks state</small></div>+ </div>+ <p class="note">Conceptual model from the talk—not a measured performance claim.</p>+ <div class="metrics">+ <div><strong>2</strong><span>named agents</span></div>+ <div><strong>1</strong><span>thread per session</span></div>+ <div><strong>30</strong><span>threads managed on a busy day</span></div>+ </div>+ </section>++ <section>+ <p class="eyebrow">Watch the ideas</p>+ <h2>Key moments</h2>+ <div class="snippets">+ {+ snippets.map((item) => (+ <article class="snippet">+ <div class="video-frame">+ <iframe+ loading="lazy"+ src={`https://www.youtube-nocookie.com/embed/${videoId}?start=${item.start}&end=${item.end}&rel=0`}+ title={item.title}+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"+ referrerpolicy="strict-origin-when-cross-origin"+ allowfullscreen+ />+ </div>+ <div>+ <p class="eyebrow">{item.label} · {clock(item.start)}</p>+ <h3>{item.title}</h3>+ <blockquote>{item.quote}</blockquote>+ </div>+ </article>+ ))+ }+ </div>+ </section>++ <section>+ <p class="eyebrow">Full record</p>+ <h2>Transcript</h2>+ <p class="note">+ Machine-transcribed locally with Whisper; it may contain errors.+ Timestamps open the original YouTube video.+ </p>+ <details>+ <summary>Read the full transcript</summary>+ <ol class="transcript">+ {+ transcript.map((cue) => (+ <li>+ <a href={`https://www.youtube.com/watch?v=${videoId}&t=${Math.floor(cue.start)}s`}>+ {clock(cue.start)}+ </a>+ <span>{cue.text}</span>+ </li>+ ))+ }+ </ol>+ </details>+ <p><a href="./transcript.vtt" download>Download timestamped VTT</a></p>+ </section>+ </article>+</Base>++<style>+ .video-page { padding-top: 1rem; }+ header { padding-bottom: 3rem; }+ .eyebrow {+ margin: 0 0 .45rem;+ color: var(--color-accent);+ font-family: var(--font-sans);+ font-size: .73rem;+ font-weight: 700;+ letter-spacing: .09em;+ text-transform: uppercase;+ }+ h1 { margin: 0; font-size: clamp(2.35rem, 8vw, 4.5rem); line-height: 1.02; }+ h2 { margin: .25rem 0 1rem; font-size: clamp(1.8rem, 5vw, 3rem); }+ h3 { margin: .25rem 0 .5rem; }+ .dek { max-width: 38rem; margin: .75rem 0 1.5rem; color: var(--color-muted); font-size: 1.3rem; }+ section { padding: 3rem 0; border-top: 1px solid var(--color-border); }+ .video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: #000; }+ .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }+ .layers { border-bottom: 1px solid var(--color-border); }+ .layers > div { display: grid; grid-template-columns: 2rem 1fr 1.6fr; gap: .8rem; padding: .8rem 0; border-top: 1px solid var(--color-border); font-family: var(--font-sans); }+ .layers span, .layers small { color: var(--color-muted); }+ .layers div:first-child strong { color: var(--color-accent); }+ .load-chart { display: grid; gap: 1rem; margin-top: 1.5rem; font-family: var(--font-sans); }+ .load-chart > div { display: grid; grid-template-columns: 8rem 1fr; gap: .3rem 1rem; align-items: center; }+ .load-chart i { height: 1.1rem; border-radius: 99px; background: var(--color-accent-soft); overflow: hidden; }+ .load-chart b { display: block; height: 100%; background: var(--color-accent); border-radius: inherit; }+ .load-chart small { grid-column: 2; color: var(--color-muted); }+ .note { color: var(--color-muted); font-size: .9rem; }+ .metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 1.5rem; border-block: 1px solid var(--color-border); font-family: var(--font-sans); }+ .metrics div { padding: 1rem; border-right: 1px solid var(--color-border); }+ .metrics div:last-child { border: 0; }+ .metrics strong, .metrics span { display: block; }+ .metrics strong { color: var(--color-accent); font-size: 2.5rem; }+ .metrics span { color: var(--color-muted); font-size: .88rem; }+ .snippets { border-bottom: 1px solid var(--color-border); }+ .snippet { display: grid; grid-template-columns: minmax(15rem, 42%) 1fr; gap: 1.5rem; align-items: center; padding: 1.5rem 0; border-top: 1px solid var(--color-border); }+ .snippet blockquote { margin: 0; font-size: .98rem; }+ details { margin-top: 1.5rem; border-block: 1px solid var(--color-border); }+ summary { padding: 1rem 0; cursor: pointer; font-family: var(--font-sans); font-weight: 700; }+ .transcript { display: grid; gap: .65rem; padding: .5rem 0 1.5rem; list-style: none; font-size: .98rem; }+ .transcript li { display: grid; grid-template-columns: 3rem 1fr; gap: .75rem; }+ .transcript a { color: var(--color-accent); font-family: var(--font-sans); font-variant-numeric: tabular-nums; text-decoration: none; }+ @media (max-width: 600px) {+ .layers > div { grid-template-columns: 2rem 1fr; }+ .layers small { grid-column: 2; }+ .load-chart > div { grid-template-columns: 1fr; }+ .load-chart small { grid-column: 1; }+ .metrics { grid-template-columns: 1fr; }+ .metrics div { border-right: 0; border-bottom: 1px solid var(--color-border); }+ .snippet { grid-template-columns: 1fr; }+ }+</style>