Skip to content

Commit 2f830f1

Browse files
author
wangnaihe
committed
feat: add system GUI example apps (desktop shell, file manager, terminal, AI agent)
Four new showcase examples demonstrating W3C OS as a desktop operating system: - desktop-shell: Full desktop with taskbar, app launcher, system tray, desktop icons (Files, Terminal, Settings, AI Agent, Browser, Editor), clock, battery indicator, network status - file-manager: Split-pane layout with directory tree sidebar, file list with columns (Name/Size/Modified/Type), toolbar with navigation, device list, status bar - terminal: Multi-tab terminal emulator UI with bash prompt, syntax- colored output, input line with TextInput, status bar (size/encoding) - ai-agent: AI Agent Hub with agent list, capability permissions (DOM read/write, a11y, screenshot, file system, network), conversation view showing DOM API operations in real-time Made-with: Cursor
1 parent 7238468 commit 2f830f1

File tree

4 files changed

+703
-0
lines changed

4 files changed

+703
-0
lines changed

‎examples/ai-agent/app.tsx‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
import { Column, Row, Text, Button, TextInput } from "@w3cos/std"
2+
3+
const agentStatus = signal(0)
4+
const taskCount = signal(3)
5+
6+
export default
7+
<Column style={{ background: "#0a0a12", gap: 0 }}>
8+
{/* Header */}
9+
<Row style={{
10+
padding: 16,
11+
background: "#12121f",
12+
justifyContent: "spaceBetween",
13+
alignItems: "center"
14+
}}>
15+
<Row style={{ gap: 10, alignItems: "center" }}>
16+
<Text style={{ fontSize: 22, color: "#6c5ce7" }}>🤖</Text>
17+
<Text style={{ fontSize: 18, color: "#e0e0f0", fontWeight: 700 }}>AI Agent Hub</Text>
18+
</Row>
19+
<Row style={{ gap: 12, alignItems: "center" }}>
20+
<Text style={{ fontSize: 13, color: "#00b894" }}>● Connected</Text>
21+
<Text style={{ fontSize: 13, color: "#808090" }}>DOM Access: Layer 1</Text>
22+
</Row>
23+
</Row>
24+
25+
<Row style={{ flexGrow: 1, gap: 0 }}>
26+
{/* Sidebar: Agent list */}
27+
<Column style={{ width: "240", padding: 16, gap: 8, background: "#10101c" }}>
28+
<Text style={{ fontSize: 11, color: "#505070", fontWeight: 700 }}>ACTIVE AGENTS</Text>
29+
30+
<Column style={{ padding: 12, background: "#1c1c34", borderRadius: 8, gap: 6 }}>
31+
<Row style={{ justifyContent: "spaceBetween", alignItems: "center" }}>
32+
<Text style={{ fontSize: 13, color: "#d0d0e0", fontWeight: 600 }}>Code Agent</Text>
33+
<Text style={{ fontSize: 11, color: "#00b894" }}>Running</Text>
34+
</Row>
35+
<Text style={{ fontSize: 11, color: "#606080" }}>Writing filesystem module...</Text>
36+
<Row style={{ height: "4", borderRadius: 2, background: "#1e1e38" }}>
37+
<Column style={{ width: "65%", height: "4", borderRadius: 2, background: "#6c5ce7" }} />
38+
</Row>
39+
</Column>
40+
41+
<Column style={{ padding: 12, background: "#1c1c34", borderRadius: 8, gap: 6 }}>
42+
<Row style={{ justifyContent: "spaceBetween", alignItems: "center" }}>
43+
<Text style={{ fontSize: 13, color: "#d0d0e0", fontWeight: 600 }}>Review Agent</Text>
44+
<Text style={{ fontSize: 11, color: "#fdcb6e" }}>Waiting</Text>
45+
</Row>
46+
<Text style={{ fontSize: 11, color: "#606080" }}>Queued: PR #42 review</Text>
47+
</Column>
48+
49+
<Column style={{ padding: 12, background: "#1c1c34", borderRadius: 8, gap: 6 }}>
50+
<Row style={{ justifyContent: "spaceBetween", alignItems: "center" }}>
51+
<Text style={{ fontSize: 13, color: "#d0d0e0", fontWeight: 600 }}>Test Agent</Text>
52+
<Text style={{ fontSize: 11, color: "#00b894" }}>Running</Text>
53+
</Row>
54+
<Text style={{ fontSize: 11, color: "#606080" }}>47/52 tests passed</Text>
55+
<Row style={{ height: "4", borderRadius: 2, background: "#1e1e38" }}>
56+
<Column style={{ width: "90%", height: "4", borderRadius: 2, background: "#00b894" }} />
57+
</Row>
58+
</Column>
59+
60+
<Text style={{ fontSize: 11, color: "#505070", fontWeight: 700 }}>CAPABILITIES</Text>
61+
<Column style={{ gap: 4 }}>
62+
<Row style={{ gap: 6, alignItems: "center" }}>
63+
<Text style={{ fontSize: 11, color: "#00b894" }}>✓</Text>
64+
<Text style={{ fontSize: 11, color: "#a0a0c0" }}>DOM Read (Layer 1)</Text>
65+
</Row>
66+
<Row style={{ gap: 6, alignItems: "center" }}>
67+
<Text style={{ fontSize: 11, color: "#00b894" }}>✓</Text>
68+
<Text style={{ fontSize: 11, color: "#a0a0c0" }}>DOM Write (Layer 2)</Text>
69+
</Row>
70+
<Row style={{ gap: 6, alignItems: "center" }}>
71+
<Text style={{ fontSize: 11, color: "#00b894" }}>✓</Text>
72+
<Text style={{ fontSize: 11, color: "#a0a0c0" }}>A11y Tree</Text>
73+
</Row>
74+
<Row style={{ gap: 6, alignItems: "center" }}>
75+
<Text style={{ fontSize: 11, color: "#00b894" }}>✓</Text>
76+
<Text style={{ fontSize: 11, color: "#a0a0c0" }}>Screenshot + Annotations</Text>
77+
</Row>
78+
<Row style={{ gap: 6, alignItems: "center" }}>
79+
<Text style={{ fontSize: 11, color: "#fdcb6e" }}>○</Text>
80+
<Text style={{ fontSize: 11, color: "#808090" }}>File System (restricted)</Text>
81+
</Row>
82+
<Row style={{ gap: 6, alignItems: "center" }}>
83+
<Text style={{ fontSize: 11, color: "#e94560" }}>✕</Text>
84+
<Text style={{ fontSize: 11, color: "#606080" }}>Network (denied)</Text>
85+
</Row>
86+
</Column>
87+
</Column>
88+
89+
{/* Main: Agent conversation */}
90+
<Column style={{ flexGrow: 1, padding: 20, gap: 16 }}>
91+
<Text style={{ fontSize: 18, color: "#e0e0f0", fontWeight: 700 }}>Agent Conversation</Text>
92+
93+
<Column style={{ flexGrow: 1, gap: 12, overflow: "scroll" }}>
94+
{/* System message */}
95+
<Row style={{ gap: 12 }}>
96+
<Column style={{
97+
width: "32", height: "32",
98+
background: "#1c1c34",
99+
borderRadius: 16,
100+
alignItems: "center",
101+
justifyContent: "center"
102+
}}>
103+
<Text style={{ fontSize: 14 }}>🖥</Text>
104+
</Column>
105+
<Column style={{
106+
flexGrow: 1,
107+
padding: 12,
108+
background: "#141428",
109+
borderRadius: 8,
110+
gap: 4
111+
}}>
112+
<Text style={{ fontSize: 11, color: "#606080" }}>System</Text>
113+
<Text style={{ fontSize: 13, color: "#a0a0c0" }}>Agent connected. DOM access granted (Layer 1: read, Layer 2: write). Permission model: interactive.</Text>
114+
</Column>
115+
</Row>
116+
117+
{/* Agent message */}
118+
<Row style={{ gap: 12 }}>
119+
<Column style={{
120+
width: "32", height: "32",
121+
background: "#6c5ce7",
122+
borderRadius: 16,
123+
alignItems: "center",
124+
justifyContent: "center"
125+
}}>
126+
<Text style={{ fontSize: 14 }}>🤖</Text>
127+
</Column>
128+
<Column style={{
129+
flexGrow: 1,
130+
padding: 12,
131+
background: "#1c1c34",
132+
borderRadius: 8,
133+
gap: 4
134+
}}>
135+
<Text style={{ fontSize: 11, color: "#6c5ce7" }}>Code Agent</Text>
136+
<Text style={{ fontSize: 13, color: "#d0d0e0" }}>I can see the DOM tree of the current application. There are 47 elements, 12 interactive buttons, and 3 text inputs. The accessibility tree shows all elements are properly labeled.</Text>
137+
</Column>
138+
</Row>
139+
140+
{/* User message */}
141+
<Row style={{ gap: 12, justifyContent: "flexEnd" }}>
142+
<Column style={{
143+
padding: 12,
144+
background: "#6c5ce7",
145+
borderRadius: 8,
146+
gap: 4,
147+
maxWidth: "70%"
148+
}}>
149+
<Text style={{ fontSize: 13, color: "#ffffff" }}>Build a file manager component with tree view for the sidebar and list view for the main content.</Text>
150+
</Column>
151+
<Column style={{
152+
width: "32", height: "32",
153+
background: "#2a2a3e",
154+
borderRadius: 16,
155+
alignItems: "center",
156+
justifyContent: "center"
157+
}}>
158+
<Text style={{ fontSize: 14 }}>👤</Text>
159+
</Column>
160+
</Row>
161+
162+
{/* Agent response */}
163+
<Row style={{ gap: 12 }}>
164+
<Column style={{
165+
width: "32", height: "32",
166+
background: "#6c5ce7",
167+
borderRadius: 16,
168+
alignItems: "center",
169+
justifyContent: "center"
170+
}}>
171+
<Text style={{ fontSize: 14 }}>🤖</Text>
172+
</Column>
173+
<Column style={{
174+
flexGrow: 1,
175+
padding: 12,
176+
background: "#1c1c34",
177+
borderRadius: 8,
178+
gap: 8
179+
}}>
180+
<Text style={{ fontSize: 11, color: "#6c5ce7" }}>Code Agent</Text>
181+
<Text style={{ fontSize: 13, color: "#d0d0e0" }}>I'll create the file manager now. Using the DOM API to build the component tree:</Text>
182+
<Column style={{ padding: 8, background: "#0f0f1a", borderRadius: 4 }}>
183+
<Text style={{ fontSize: 12, color: "#74b9ff" }}>document.createElement("div") // sidebar</Text>
184+
<Text style={{ fontSize: 12, color: "#74b9ff" }}>document.createElement("div") // file list</Text>
185+
<Text style={{ fontSize: 12, color: "#74b9ff" }}>element.style.display = "flex"</Text>
186+
<Text style={{ fontSize: 12, color: "#74b9ff" }}>element.appendChild(sidebar)</Text>
187+
<Text style={{ fontSize: 12, color: "#00b894" }}>✓ 24 DOM operations completed in 0.3ms</Text>
188+
</Column>
189+
</Column>
190+
</Row>
191+
</Column>
192+
193+
{/* Input */}
194+
<Row style={{ gap: 8, alignItems: "center" }}>
195+
<TextInput value="" placeholder="Ask the AI agent..." style={{
196+
flexGrow: 1,
197+
fontSize: 14,
198+
color: "#d0d0e0",
199+
background: "#1c1c34",
200+
borderRadius: 8
201+
}} />
202+
<Button style={{
203+
background: "#6c5ce7",
204+
borderRadius: 8,
205+
fontSize: 14,
206+
color: "#ffffff"
207+
}}>Send</Button>
208+
</Row>
209+
</Column>
210+
</Row>
211+
</Column>

‎examples/desktop-shell/app.tsx‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
import { Column, Row, Text, Button } from "@w3cos/std"
2+
3+
const activeApp = signal(0)
4+
const showLauncher = signal(0)
5+
const clock = signal(0)
6+
7+
export default
8+
<Column style={{ background: "#0a0a14", gap: 0 }}>
9+
{/* Desktop area */}
10+
<Column style={{ flexGrow: 1, padding: 0, gap: 0 }}>
11+
12+
{/* App window area */}
13+
<Row style={{ flexGrow: 1, gap: 0 }}>
14+
{/* Desktop wallpaper with app launcher overlay */}
15+
<Column style={{
16+
flexGrow: 1,
17+
background: "#0f1923",
18+
padding: 40,
19+
gap: 24,
20+
alignItems: "center",
21+
justifyContent: "center"
22+
}}>
23+
{/* Desktop icons */}
24+
<Row style={{ gap: 32 }}>
25+
<Column style={{ alignItems: "center", gap: 8 }} onClick="set:activeApp:1">
26+
<Column style={{
27+
width: "56", height: "56",
28+
background: "#1a1a2e",
29+
borderRadius: 12,
30+
alignItems: "center",
31+
justifyContent: "center"
32+
}}>
33+
<Text style={{ fontSize: 28 }}>📁</Text>
34+
</Column>
35+
<Text style={{ fontSize: 11, color: "#c0c0d0" }}>Files</Text>
36+
</Column>
37+
38+
<Column style={{ alignItems: "center", gap: 8 }} onClick="set:activeApp:2">
39+
<Column style={{
40+
width: "56", height: "56",
41+
background: "#1a1a2e",
42+
borderRadius: 12,
43+
alignItems: "center",
44+
justifyContent: "center"
45+
}}>
46+
<Text style={{ fontSize: 28 }}>⌨</Text>
47+
</Column>
48+
<Text style={{ fontSize: 11, color: "#c0c0d0" }}>Terminal</Text>
49+
</Column>
50+
51+
<Column style={{ alignItems: "center", gap: 8 }} onClick="set:activeApp:3">
52+
<Column style={{
53+
width: "56", height: "56",
54+
background: "#1a1a2e",
55+
borderRadius: 12,
56+
alignItems: "center",
57+
justifyContent: "center"
58+
}}>
59+
<Text style={{ fontSize: 28 }}>⚙</Text>
60+
</Column>
61+
<Text style={{ fontSize: 11, color: "#c0c0d0" }}>Settings</Text>
62+
</Column>
63+
64+
<Column style={{ alignItems: "center", gap: 8 }} onClick="set:activeApp:4">
65+
<Column style={{
66+
width: "56", height: "56",
67+
background: "#1a1a2e",
68+
borderRadius: 12,
69+
alignItems: "center",
70+
justifyContent: "center"
71+
}}>
72+
<Text style={{ fontSize: 28 }}>🤖</Text>
73+
</Column>
74+
<Text style={{ fontSize: 11, color: "#c0c0d0" }}>AI Agent</Text>
75+
</Column>
76+
77+
<Column style={{ alignItems: "center", gap: 8 }} onClick="set:activeApp:5">
78+
<Column style={{
79+
width: "56", height: "56",
80+
background: "#1a1a2e",
81+
borderRadius: 12,
82+
alignItems: "center",
83+
justifyContent: "center"
84+
}}>
85+
<Text style={{ fontSize: 28 }}>🌐</Text>
86+
</Column>
87+
<Text style={{ fontSize: 11, color: "#c0c0d0" }}>Browser</Text>
88+
</Column>
89+
90+
<Column style={{ alignItems: "center", gap: 8 }} onClick="set:activeApp:6">
91+
<Column style={{
92+
width: "56", height: "56",
93+
background: "#1a1a2e",
94+
borderRadius: 12,
95+
alignItems: "center",
96+
justifyContent: "center"
97+
}}>
98+
<Text style={{ fontSize: 28 }}>📝</Text>
99+
</Column>
100+
<Text style={{ fontSize: 11, color: "#c0c0d0" }}>Editor</Text>
101+
</Column>
102+
</Row>
103+
104+
{/* W3C OS branding */}
105+
<Column style={{ alignItems: "center", gap: 4, opacity: 0.4 }}>
106+
<Text style={{ fontSize: 16, color: "#6c5ce7", fontWeight: 700 }}>W3C OS</Text>
107+
<Text style={{ fontSize: 11, color: "#808090" }}>Native Desktop Shell</Text>
108+
</Column>
109+
</Column>
110+
</Row>
111+
</Column>
112+
113+
{/* Taskbar */}
114+
<Row style={{
115+
height: "48",
116+
background: "#12121f",
117+
padding: 8,
118+
gap: 8,
119+
alignItems: "center",
120+
justifyContent: "spaceBetween"
121+
}}>
122+
{/* Left: App launcher + pinned apps */}
123+
<Row style={{ gap: 6, alignItems: "center" }}>
124+
<Button style={{
125+
background: "#6c5ce7",
126+
borderRadius: 8,
127+
fontSize: 14,
128+
color: "#ffffff"
129+
}} onClick="toggle:showLauncher">◆ Apps</Button>
130+
131+
{/* Pinned/running app indicators */}
132+
<Column style={{
133+
width: "36", height: "36",
134+
background: "#1c1c34",
135+
borderRadius: 8,
136+
alignItems: "center",
137+
justifyContent: "center"
138+
}} onClick="set:activeApp:1">
139+
<Text style={{ fontSize: 18 }}>📁</Text>
140+
</Column>
141+
<Column style={{
142+
width: "36", height: "36",
143+
background: "#1c1c34",
144+
borderRadius: 8,
145+
alignItems: "center",
146+
justifyContent: "center"
147+
}} onClick="set:activeApp:2">
148+
<Text style={{ fontSize: 18 }}>⌨</Text>
149+
</Column>
150+
<Column style={{
151+
width: "36", height: "36",
152+
background: "#1c1c34",
153+
borderRadius: 8,
154+
alignItems: "center",
155+
justifyContent: "center"
156+
}} onClick="set:activeApp:3">
157+
<Text style={{ fontSize: 18 }}>⚙</Text>
158+
</Column>
159+
</Row>
160+
161+
{/* Center: Window title */}
162+
<Text style={{ fontSize: 13, color: "#808090" }}>W3C OS Desktop</Text>
163+
164+
{/* Right: System tray */}
165+
<Row style={{ gap: 12, alignItems: "center" }}>
166+
<Text style={{ fontSize: 12, color: "#00b894" }}>● Online</Text>
167+
<Text style={{ fontSize: 12, color: "#a0a0c0" }}>🔋 92%</Text>
168+
<Text style={{ fontSize: 12, color: "#a0a0c0" }}>🔊</Text>
169+
<Column style={{
170+
background: "#1c1c34",
171+
borderRadius: 6,
172+
padding: 6
173+
}}>
174+
<Text style={{ fontSize: 12, color: "#d0d0e0" }}>14:32</Text>
175+
</Column>
176+
</Row>
177+
</Row>
178+
</Column>

0 commit comments

Comments
 (0)