Skip to content

Commit cae1d83

Browse files
mickyarunmickyarun
authored
feat(landing): thumbnail-grid video picker + 2 new demos + Design URL fix (#187)
* docs(landing): add requirements & estimation demo + fix Design URL - New 'Requirements & estimation' video tab between Slack and Design (https://youtu.be/YBwdTes0Fno) covers AI-drafted requirements, AI-PERT + Monte Carlo cycle-time forecasts, and the collaborative editor with version history. - Corrects the Design phase tab to the re-uploaded URL (https://youtu.be/lV71qhmfzzw); previous URL went stale after #186. - Final tab order: Setup → Slack triage → Requirements & estimation → Design phase → Inside the virtual world. - README demo grid + linkbar updated to match. Signed-off-by: Arun Rajkumar <mickyarunr@gmail.com> * feat(landing): thumbnail-grid video picker + add Dev & retrospective demo The tabbed selector overflowed past 4 videos; replaces it with an active player plus a responsive thumbnail grid (2/3/6-up across mobile/tablet/desktop) so the strip scales as we add more demos. - Refactor video metadata into a typed 'videos' array; both the active player iframe and the thumb cards are driven by a single source. - Active thumbnail gets a primary border; idle thumbs show a play-icon overlay on hover. - iframe carries a :key so switching videos forces a clean remount. - Add the sixth demo: 'Development & retrospective' (https://youtu.be/YjRihN_SKaw) covering dev, automated code review, post-deploy retrospective, and the Learning Agent feedback loop. - README demo grid + linkbar mirror the same six videos. Side effect: every thumbnail is now pre-rendered into static HTML, so all six demos are crawlable instead of only the default tab's iframe. Signed-off-by: Arun Rajkumar <mickyarunr@gmail.com> --------- Signed-off-by: Arun Rajkumar <mickyarunr@gmail.com>
1 parent a4d48bb commit cae1d83

2 files changed

Lines changed: 148 additions & 68 deletions

File tree

‎README.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,15 @@ Self-hosted on your hardware. Your data stays local. Inference engine is your ch
3232
&nbsp;
3333
<a href="https://youtu.be/i8kZdcL1bME"><img src="https://img.youtube.com/vi/i8kZdcL1bME/maxresdefault.jpg" width="48%" alt="Slack triage & MCP tools"></a>
3434

35-
<a href="https://youtu.be/vDdj8p17AQQ"><img src="https://img.youtube.com/vi/vDdj8p17AQQ/maxresdefault.jpg" width="48%" alt="Design phase & agent prompts"></a>
35+
<a href="https://youtu.be/YBwdTes0Fno"><img src="https://img.youtube.com/vi/YBwdTes0Fno/maxresdefault.jpg" width="48%" alt="Requirements & estimation"></a>
36+
&nbsp;
37+
<a href="https://youtu.be/lV71qhmfzzw"><img src="https://img.youtube.com/vi/lV71qhmfzzw/maxresdefault.jpg" width="48%" alt="Design phase & agent prompts"></a>
38+
39+
<a href="https://youtu.be/YjRihN_SKaw"><img src="https://img.youtube.com/vi/YjRihN_SKaw/maxresdefault.jpg" width="48%" alt="Development & retrospective"></a>
3640
&nbsp;
3741
<a href="https://youtu.be/OxoqBI7BNxU"><img src="https://img.youtube.com/vi/OxoqBI7BNxU/maxresdefault.jpg" width="48%" alt="Inside the virtual world"></a>
3842

39-
**[Setup walkthrough](https://youtu.be/ot-BmKxRgRA)** &nbsp;·&nbsp; **[Slack triage & MCP tools](https://youtu.be/i8kZdcL1bME)** &nbsp;·&nbsp; **[Design phase & agent prompts](https://youtu.be/vDdj8p17AQQ)** &nbsp;·&nbsp; **[Inside the virtual world](https://youtu.be/OxoqBI7BNxU)**
43+
**[Setup walkthrough](https://youtu.be/ot-BmKxRgRA)** &nbsp;·&nbsp; **[Slack triage & MCP tools](https://youtu.be/i8kZdcL1bME)** &nbsp;·&nbsp; **[Requirements & estimation](https://youtu.be/YBwdTes0Fno)** &nbsp;·&nbsp; **[Design phase & agent prompts](https://youtu.be/lV71qhmfzzw)** &nbsp;·&nbsp; **[Development & retrospective](https://youtu.be/YjRihN_SKaw)** &nbsp;·&nbsp; **[Inside the virtual world](https://youtu.be/OxoqBI7BNxU)**
4044

4145
![Bodhiorchard Living Tree Dashboard](docs/images/livingtree.png)
4246

‎frontend/src/views/setup/steps/MethodologyStep.vue‎

Lines changed: 142 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -41,74 +41,56 @@
4141
</v-btn>
4242
</div>
4343

44-
<!-- Section 1.5: Demo videos (tabbed) -->
44+
<!-- Section 1.5: Demo videos (active player + thumbnail picker) -->
4545
<div class="mb-10">
46-
<v-tabs v-model="videoTab" align-tabs="center" color="primary" density="compact">
47-
<v-tab value="setup">Setup walkthrough</v-tab>
48-
<v-tab value="slack">Slack triage &amp; MCP tools</v-tab>
49-
<v-tab value="design">Design phase &amp; agent prompts</v-tab>
50-
<v-tab value="world">Inside the virtual world</v-tab>
51-
</v-tabs>
52-
<v-card class="mt-3" variant="outlined">
53-
<v-window v-model="videoTab">
54-
<v-window-item value="setup">
55-
<div class="methodology-video-frame">
56-
<iframe
57-
src="https://www.youtube-nocookie.com/embed/ot-BmKxRgRA"
58-
title="Bodhiorchard — Setup walkthrough"
59-
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
60-
allowfullscreen
61-
loading="lazy"
62-
></iframe>
63-
</div>
64-
<p class="text-caption text-center text-medium-emphasis py-3 mb-0">
65-
Clone, configure, and bring the stack up locally.
66-
</p>
67-
</v-window-item>
68-
<v-window-item value="slack">
69-
<div class="methodology-video-frame">
70-
<iframe
71-
src="https://www.youtube-nocookie.com/embed/i8kZdcL1bME"
72-
title="Bodhiorchard — Slack triage &amp; MCP tools"
73-
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
74-
allowfullscreen
75-
loading="lazy"
76-
></iframe>
77-
</div>
78-
<p class="text-caption text-center text-medium-emphasis py-3 mb-0">
79-
Chat-to-BUD in Slack: the Triage Agent drafts the spec, Claude Code drives the BUD lifecycle through MCP tools.
80-
</p>
81-
</v-window-item>
82-
<v-window-item value="design">
83-
<div class="methodology-video-frame">
84-
<iframe
85-
src="https://www.youtube-nocookie.com/embed/vDdj8p17AQQ"
86-
title="Bodhiorchard — Design phase &amp; agent prompts"
87-
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
88-
allowfullscreen
46+
<v-card variant="outlined">
47+
<div class="methodology-video-frame">
48+
<iframe
49+
:key="activeVideo.youTubeId"
50+
:src="`https://www.youtube-nocookie.com/embed/${activeVideo.youTubeId}`"
51+
:title="`Bodhiorchard — ${activeVideo.title}`"
52+
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
53+
allowfullscreen
54+
loading="lazy"
55+
></iframe>
56+
</div>
57+
<p class="text-caption text-center text-medium-emphasis py-3 mb-0 px-4">
58+
{{ activeVideo.caption }}
59+
</p>
60+
</v-card>
61+
62+
<v-row class="mt-3" dense>
63+
<v-col v-for="v in videos" :key="v.value" cols="6" sm="4" md="2">
64+
<v-card
65+
:variant="v.value === videoTab ? 'flat' : 'outlined'"
66+
:color="v.value === videoTab ? 'primary' : undefined"
67+
class="methodology-video-thumb"
68+
:class="{ 'methodology-video-thumb--active': v.value === videoTab }"
69+
@click="videoTab = v.value"
70+
>
71+
<div class="methodology-video-thumb-img-wrap">
72+
<img
73+
:src="`https://img.youtube.com/vi/${v.youTubeId}/mqdefault.jpg`"
74+
:alt="v.title"
8975
loading="lazy"
90-
></iframe>
76+
class="methodology-video-thumb-img"
77+
/>
78+
<v-icon
79+
v-if="v.value !== videoTab"
80+
class="methodology-video-thumb-play"
81+
icon="mdi-play-circle"
82+
size="36"
83+
/>
9184
</div>
92-
<p class="text-caption text-center text-medium-emphasis py-3 mb-0">
93-
Generating wireframes and the tech architecture — and how the AI agent prompts shape each handoff.
94-
</p>
95-
</v-window-item>
96-
<v-window-item value="world">
97-
<div class="methodology-video-frame">
98-
<iframe
99-
src="https://www.youtube-nocookie.com/embed/OxoqBI7BNxU"
100-
title="Bodhiorchard — Inside the virtual world"
101-
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
102-
allowfullscreen
103-
loading="lazy"
104-
></iframe>
85+
<div
86+
class="text-caption text-center px-2 py-2"
87+
:class="v.value === videoTab ? 'font-weight-bold' : 'text-medium-emphasis'"
88+
>
89+
{{ v.title }}
10590
</div>
106-
<p class="text-caption text-center text-medium-emphasis py-3 mb-0">
107-
The Living Tree: your org as a tended orchard.
108-
</p>
109-
</v-window-item>
110-
</v-window>
111-
</v-card>
91+
</v-card>
92+
</v-col>
93+
</v-row>
11294
</div>
11395

11496
<!-- Section 1.6: Platform screenshots -->
@@ -529,7 +511,7 @@
529511
</template>
530512

531513
<script setup lang="ts">
532-
import { ref } from 'vue'
514+
import { computed, ref } from 'vue'
533515
import LifecycleFlowchart from '@/components/setup/LifecycleFlowchart.vue'
534516
import AgentCard from '@/components/setup/AgentCard.vue'
535517
import { agents } from '@/data/agents'
@@ -538,7 +520,60 @@ const emit = defineEmits<{
538520
startBuilding: []
539521
}>()
540522
541-
const videoTab = ref<string>('setup')
523+
interface DemoVideo {
524+
value: string
525+
title: string
526+
youTubeId: string
527+
caption: string
528+
}
529+
530+
const videos: DemoVideo[] = [
531+
{
532+
value: 'setup',
533+
title: 'Setup walkthrough',
534+
youTubeId: 'ot-BmKxRgRA',
535+
caption: 'Clone, configure, and bring the stack up locally.',
536+
},
537+
{
538+
value: 'slack',
539+
title: 'Slack triage & MCP tools',
540+
youTubeId: 'i8kZdcL1bME',
541+
caption:
542+
'Chat-to-BUD in Slack: the Triage Agent drafts the spec, Claude Code drives the BUD lifecycle through MCP tools.',
543+
},
544+
{
545+
value: 'estimation',
546+
title: 'Requirements & estimation',
547+
youTubeId: 'YBwdTes0Fno',
548+
caption:
549+
'AI-drafted requirements, AI-PERT + Monte Carlo cycle-time forecasts, and the collaborative editor with full version history.',
550+
},
551+
{
552+
value: 'design',
553+
title: 'Design phase & agent prompts',
554+
youTubeId: 'lV71qhmfzzw',
555+
caption:
556+
'Generating wireframes and the tech architecture — and how the AI agent prompts shape each handoff.',
557+
},
558+
{
559+
value: 'dev',
560+
title: 'Development & retrospective',
561+
youTubeId: 'YjRihN_SKaw',
562+
caption:
563+
'Development, automated code review, post-deploy retrospective, and the Learning Agent feeding insights back into estimation.',
564+
},
565+
{
566+
value: 'world',
567+
title: 'Inside the virtual world',
568+
youTubeId: 'OxoqBI7BNxU',
569+
caption: 'The Living Tree: your org as a tended orchard.',
570+
},
571+
]
572+
573+
const videoTab = ref<string>(videos[0].value)
574+
const activeVideo = computed<DemoVideo>(
575+
() => videos.find((v) => v.value === videoTab.value) ?? videos[0],
576+
)
542577
543578
const lightboxOpen = ref(false)
544579
const lightboxSrc = ref('')
@@ -749,6 +784,47 @@ const budFeatures = [
749784
border: 0;
750785
display: block;
751786
}
787+
.methodology-video-thumb {
788+
cursor: pointer;
789+
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
790+
overflow: hidden;
791+
height: 100%;
792+
}
793+
.methodology-video-thumb:hover {
794+
transform: translateY(-2px);
795+
border-color: rgb(var(--v-theme-primary)) !important;
796+
}
797+
.methodology-video-thumb--active {
798+
box-shadow: 0 0 0 2px rgb(var(--v-theme-primary));
799+
}
800+
.methodology-video-thumb-img-wrap {
801+
position: relative;
802+
width: 100%;
803+
aspect-ratio: 16 / 9;
804+
background: #0d1b0f;
805+
overflow: hidden;
806+
}
807+
.methodology-video-thumb-img {
808+
display: block;
809+
width: 100%;
810+
height: 100%;
811+
object-fit: cover;
812+
}
813+
.methodology-video-thumb-play {
814+
position: absolute;
815+
top: 50%;
816+
left: 50%;
817+
transform: translate(-50%, -50%);
818+
color: rgba(255, 255, 255, 0.92);
819+
text-shadow: 0 0 8px rgba(0, 0, 0, 0.55);
820+
pointer-events: none;
821+
opacity: 0.85;
822+
transition: opacity 0.18s ease, transform 0.18s ease;
823+
}
824+
.methodology-video-thumb:hover .methodology-video-thumb-play {
825+
opacity: 1;
826+
transform: translate(-50%, -50%) scale(1.08);
827+
}
752828
.methodology-shot-card {
753829
cursor: zoom-in;
754830
transition: transform 0.18s ease, border-color 0.18s ease;

0 commit comments

Comments
 (0)