@rool-dev/cli 0.1.10 → 0.1.11-dev.0d43779
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -12
- package/dist/app.d.ts.map +1 -1
- package/dist/app.js +34 -13
- package/dist/app.js.map +1 -1
- package/dist/chat.d.ts.map +1 -1
- package/dist/chat.js +14 -4
- package/dist/chat.js.map +1 -1
- package/dist/client.d.ts +2 -1
- package/dist/client.d.ts.map +1 -1
- package/dist/client.js +4 -2
- package/dist/client.js.map +1 -1
- package/dist/constants.d.ts +6 -1
- package/dist/constants.d.ts.map +1 -1
- package/dist/constants.js +10 -1
- package/dist/constants.js.map +1 -1
- package/dist/create.d.ts +3 -0
- package/dist/create.d.ts.map +1 -0
- package/dist/create.js +119 -0
- package/dist/create.js.map +1 -0
- package/dist/logout.d.ts.map +1 -1
- package/dist/logout.js +7 -4
- package/dist/logout.js.map +1 -1
- package/dist/media.d.ts.map +1 -1
- package/dist/media.js +14 -4
- package/dist/media.js.map +1 -1
- package/dist/program.d.ts.map +1 -1
- package/dist/program.js +11 -2
- package/dist/program.js.map +1 -1
- package/dist/space.d.ts.map +1 -1
- package/dist/space.js +29 -15
- package/dist/space.js.map +1 -1
- package/dist/user.d.ts.map +1 -1
- package/dist/user.js +7 -4
- package/dist/user.js.map +1 -1
- package/package.json +4 -3
- package/templates/svelte/AGENTS.md +57 -0
- package/templates/svelte/index.html +12 -0
- package/templates/svelte/package.json +25 -0
- package/templates/svelte/src/App.svelte +54 -0
- package/templates/svelte/src/Chat.svelte +92 -0
- package/templates/svelte/src/Header.svelte +26 -0
- package/templates/svelte/src/Objects.svelte +39 -0
- package/templates/svelte/src/Splash.svelte +21 -0
- package/templates/svelte/src/app.css +1 -0
- package/templates/svelte/src/main.ts +5 -0
- package/templates/svelte/tsconfig.json +13 -0
- package/templates/svelte/vite.config.ts +8 -0
- package/templates/vanilla/AGENTS.md +63 -0
- package/templates/vanilla/index.html +12 -0
- package/templates/vanilla/package.json +21 -0
- package/templates/vanilla/src/app.css +1 -0
- package/templates/vanilla/src/main.ts +158 -0
- package/templates/vanilla/tsconfig.json +10 -0
- package/templates/vanilla/vite.config.ts +7 -0
package/dist/space.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import * as readline from 'node:readline';
|
|
2
2
|
import { getClient } from './client.js';
|
|
3
|
-
import { DEFAULT_API_URL } from './constants.js';
|
|
4
3
|
function confirm(message) {
|
|
5
4
|
const rl = readline.createInterface({
|
|
6
5
|
input: process.stdin,
|
|
@@ -21,24 +20,32 @@ export function registerSpace(program) {
|
|
|
21
20
|
program
|
|
22
21
|
.command('spaces', { hidden: true })
|
|
23
22
|
.description('List all spaces (alias for "space list")')
|
|
24
|
-
.
|
|
25
|
-
.
|
|
26
|
-
await listSpaces(
|
|
23
|
+
.action(async (_opts, command) => {
|
|
24
|
+
const { env } = command.optsWithGlobals();
|
|
25
|
+
await listSpaces(env);
|
|
27
26
|
});
|
|
28
27
|
space
|
|
29
28
|
.command('list')
|
|
30
29
|
.description('List all spaces')
|
|
31
|
-
.
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
.addHelpText('after', `
|
|
31
|
+
Examples:
|
|
32
|
+
# List your spaces
|
|
33
|
+
$ rool space list`)
|
|
34
|
+
.action(async (_opts, command) => {
|
|
35
|
+
const { env } = command.optsWithGlobals();
|
|
36
|
+
await listSpaces(env);
|
|
34
37
|
});
|
|
35
38
|
space
|
|
36
39
|
.command('create')
|
|
37
40
|
.description('Create a new space')
|
|
38
41
|
.argument('<name>', 'space name')
|
|
39
|
-
.
|
|
40
|
-
|
|
41
|
-
|
|
42
|
+
.addHelpText('after', `
|
|
43
|
+
Examples:
|
|
44
|
+
# Create a new space
|
|
45
|
+
$ rool space create "My New Project"`)
|
|
46
|
+
.action(async (name, _opts, command) => {
|
|
47
|
+
const { env } = command.optsWithGlobals();
|
|
48
|
+
const client = await getClient(env);
|
|
42
49
|
try {
|
|
43
50
|
const newSpace = await client.createSpace(name);
|
|
44
51
|
console.log(`Created space: ${newSpace.id} ${newSpace.name}`);
|
|
@@ -53,9 +60,16 @@ export function registerSpace(program) {
|
|
|
53
60
|
.description('Delete a space')
|
|
54
61
|
.argument('<name>', 'space name')
|
|
55
62
|
.option('-y, --yes', 'skip confirmation prompt')
|
|
56
|
-
.
|
|
57
|
-
|
|
58
|
-
|
|
63
|
+
.addHelpText('after', `
|
|
64
|
+
Examples:
|
|
65
|
+
# Delete a space (with confirmation)
|
|
66
|
+
$ rool space delete "Old Project"
|
|
67
|
+
|
|
68
|
+
# Delete without confirmation
|
|
69
|
+
$ rool space delete "Old Project" -y`)
|
|
70
|
+
.action(async (name, opts, command) => {
|
|
71
|
+
const { env } = command.optsWithGlobals();
|
|
72
|
+
const client = await getClient(env);
|
|
59
73
|
try {
|
|
60
74
|
const list = await client.listSpaces();
|
|
61
75
|
const spaceInfo = list.find(s => s.name === name);
|
|
@@ -82,8 +96,8 @@ export function registerSpace(program) {
|
|
|
82
96
|
}
|
|
83
97
|
});
|
|
84
98
|
}
|
|
85
|
-
async function listSpaces(
|
|
86
|
-
const client = await getClient(
|
|
99
|
+
async function listSpaces(env) {
|
|
100
|
+
const client = await getClient(env);
|
|
87
101
|
try {
|
|
88
102
|
const list = await client.listSpaces();
|
|
89
103
|
if (list.length === 0) {
|
package/dist/space.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"space.js","sourceRoot":"","sources":["../src/space.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"space.js","sourceRoot":"","sources":["../src/space.ts"],"names":[],"mappings":"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"}
|
package/dist/user.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"user.d.ts","sourceRoot":"","sources":["../src/user.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,WAAW,CAAC;AAIzC,wBAAgB,YAAY,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,
|
|
1
|
+
{"version":3,"file":"user.d.ts","sourceRoot":"","sources":["../src/user.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,WAAW,CAAC;AAIzC,wBAAgB,YAAY,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CA2BnD"}
|
package/dist/user.js
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import { getClient } from './client.js';
|
|
2
|
-
import { DEFAULT_API_URL } from './constants.js';
|
|
3
2
|
export function registerUser(program) {
|
|
4
3
|
program
|
|
5
4
|
.command('user')
|
|
6
5
|
.description('Show current user info')
|
|
7
|
-
.
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
.addHelpText('after', `
|
|
7
|
+
Examples:
|
|
8
|
+
# Show user info
|
|
9
|
+
$ rool user`)
|
|
10
|
+
.action(async (_opts, command) => {
|
|
11
|
+
const { env } = command.optsWithGlobals();
|
|
12
|
+
const client = await getClient(env, { autoLogin: false });
|
|
10
13
|
try {
|
|
11
14
|
if (!await client.isAuthenticated()) {
|
|
12
15
|
console.log('Not logged in.');
|
package/dist/user.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"user.js","sourceRoot":"","sources":["../src/user.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"user.js","sourceRoot":"","sources":["../src/user.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,MAAM,UAAU,YAAY,CAAC,OAAgB;IAC3C,OAAO;SACJ,OAAO,CAAC,MAAM,CAAC;SACf,WAAW,CAAC,wBAAwB,CAAC;SACrC,WAAW,CAAC,OAAO,EAAE;;;cAGZ,CAAC;SACV,MAAM,CAAC,KAAK,EAAE,KAAa,EAAE,OAAgB,EAAE,EAAE;QAChD,MAAM,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,eAAe,EAA0B,CAAC;QAClE,MAAM,MAAM,GAAG,MAAM,SAAS,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;QAC1D,IAAI,CAAC;YACH,IAAI,CAAC,MAAM,MAAM,CAAC,eAAe,EAAE,EAAE,CAAC;gBACpC,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;gBAC9B,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAClB,CAAC;YAED,MAAM,WAAW,GAAG,MAAM,MAAM,CAAC,cAAc,EAAE,CAAC;YAElD,OAAO,CAAC,GAAG,CAAC,YAAY,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC;YAC7C,OAAO,CAAC,GAAG,CAAC,YAAY,WAAW,CAAC,IAAI,IAAI,WAAW,EAAE,CAAC,CAAC;YAC3D,OAAO,CAAC,GAAG,CAAC,YAAY,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC;YAC5C,OAAO,CAAC,GAAG,CAAC,YAAY,WAAW,CAAC,cAAc,EAAE,CAAC,CAAC;QACxD,CAAC;gBAAS,CAAC;YACT,MAAM,CAAC,OAAO,EAAE,CAAC;QACnB,CAAC;IACH,CAAC,CAAC,CAAC;AACP,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rool-dev/cli",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.11-dev.0d43779",
|
|
4
4
|
"description": "Command-line interface for working with Rool Spaces",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -9,7 +9,8 @@
|
|
|
9
9
|
"rool": "./dist/index.js"
|
|
10
10
|
},
|
|
11
11
|
"files": [
|
|
12
|
-
"dist"
|
|
12
|
+
"dist",
|
|
13
|
+
"templates"
|
|
13
14
|
],
|
|
14
15
|
"publishConfig": {
|
|
15
16
|
"access": "public"
|
|
@@ -37,7 +38,7 @@
|
|
|
37
38
|
"commander": "^14.0.3",
|
|
38
39
|
"marked": "^15.0.12",
|
|
39
40
|
"marked-terminal": "^7.3.0",
|
|
40
|
-
"@rool-dev/sdk": "0.1.
|
|
41
|
+
"@rool-dev/sdk": "0.1.20"
|
|
41
42
|
},
|
|
42
43
|
"devDependencies": {
|
|
43
44
|
"@types/archiver": "^7.0.0",
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
# Rool App
|
|
2
|
+
|
|
3
|
+
A Svelte 5 app built on Rool Spaces - a persistent, collaborative environment for AI-driven object management.
|
|
4
|
+
|
|
5
|
+
## Technology Stack
|
|
6
|
+
|
|
7
|
+
- **Framework**: Svelte 5
|
|
8
|
+
- **Styling**: TailwindCSS v4
|
|
9
|
+
- **Language**: TypeScript
|
|
10
|
+
- **Package manager**: pnpm
|
|
11
|
+
|
|
12
|
+
For Rool documentation, **always read the README first**:
|
|
13
|
+
|
|
14
|
+
```
|
|
15
|
+
node_modules/@rool-dev/svelte/README.md # The svelte wrapper
|
|
16
|
+
node_modules/@rool-dev/sdk/README.md # The core SDK
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Rool Primitives
|
|
20
|
+
|
|
21
|
+
**RoolClient** - Authentication and space lifecycle. One per app.
|
|
22
|
+
|
|
23
|
+
**ReactiveSpace** - The workspace. Contains objects, relations, and conversations.
|
|
24
|
+
- `space.collection({ where? })` - Reactive query returning `{ objects }`
|
|
25
|
+
- `space.prompt(text)` - Invoke AI to create/modify objects
|
|
26
|
+
- `space.checkpoint()` - Create undo point before mutations
|
|
27
|
+
- `space.interactions` - Chat history for current conversation
|
|
28
|
+
|
|
29
|
+
**Objects** - Key-value records with `id` field. Created via `space.createObject()` or AI.
|
|
30
|
+
|
|
31
|
+
**Relations** - Directional links between objects via `space.link(source, relation, target)`.
|
|
32
|
+
|
|
33
|
+
## Key Patterns
|
|
34
|
+
|
|
35
|
+
```typescript
|
|
36
|
+
// Reactive collection - auto-updates when objects change
|
|
37
|
+
let collection = space.collection({ where: { type: 'task' } });
|
|
38
|
+
let tasks = $derived(collection.objects);
|
|
39
|
+
|
|
40
|
+
// AI mutation - always checkpoint first for undo
|
|
41
|
+
await space.checkpoint();
|
|
42
|
+
await space.prompt('Create a task for tomorrow');
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Use `space.on('objectCreated', ...)` for side effects outside Svelte's reactivity.
|
|
46
|
+
|
|
47
|
+
## Entry Point
|
|
48
|
+
|
|
49
|
+
`src/main.ts` mounts `App.svelte`, which handles auth and space setup.
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
## Adding Functionality
|
|
53
|
+
|
|
54
|
+
Useful packages to consider:
|
|
55
|
+
|
|
56
|
+
- **@iconify/svelte** - Icons (`<Icon icon="mdi:home" />`)
|
|
57
|
+
- **@humanspeak/svelte-markdown** - Render markdown from AI responses
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
6
|
+
<title>Rool App</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<div id="app"></div>
|
|
10
|
+
<script type="module" src="/src/main.ts"></script>
|
|
11
|
+
</body>
|
|
12
|
+
</html>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "rool-app",
|
|
3
|
+
"private": true,
|
|
4
|
+
"version": "0.0.0",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "vite",
|
|
8
|
+
"build": "vite build",
|
|
9
|
+
"preview": "vite preview",
|
|
10
|
+
"typecheck": "tsc --noEmit && svelte-check --tsconfig ./tsconfig.json"
|
|
11
|
+
},
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"@rool-dev/sdk": "workspace:*",
|
|
14
|
+
"@rool-dev/svelte": "workspace:*"
|
|
15
|
+
},
|
|
16
|
+
"devDependencies": {
|
|
17
|
+
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
|
18
|
+
"@tailwindcss/vite": "^4.0.0",
|
|
19
|
+
"svelte": "^5.0.0",
|
|
20
|
+
"svelte-check": "^4.0.0",
|
|
21
|
+
"tailwindcss": "^4.0.0",
|
|
22
|
+
"typescript": "^5.0.0",
|
|
23
|
+
"vite": "^6.0.0"
|
|
24
|
+
}
|
|
25
|
+
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { createRool, type ReactiveSpace } from '@rool-dev/svelte';
|
|
3
|
+
import Splash from './Splash.svelte';
|
|
4
|
+
import Header from './Header.svelte';
|
|
5
|
+
import Chat from './Chat.svelte';
|
|
6
|
+
import Objects from './Objects.svelte';
|
|
7
|
+
|
|
8
|
+
const APP_NAME = 'Rool App';
|
|
9
|
+
|
|
10
|
+
const rool = createRool();
|
|
11
|
+
rool.init();
|
|
12
|
+
|
|
13
|
+
let space = $state<ReactiveSpace | null>(null);
|
|
14
|
+
|
|
15
|
+
// Open space when ready
|
|
16
|
+
$effect(() => {
|
|
17
|
+
if (rool.authenticated && rool.spaces && !space) {
|
|
18
|
+
openSpace();
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
async function openSpace() {
|
|
23
|
+
const spaces = rool.spaces!;
|
|
24
|
+
const existing = spaces.find(s => s.name === APP_NAME);
|
|
25
|
+
|
|
26
|
+
space = existing
|
|
27
|
+
? await rool.openSpace(existing.id, { conversationId: 'main' })
|
|
28
|
+
: await rool.createSpace(APP_NAME, { conversationId: 'main' });
|
|
29
|
+
}
|
|
30
|
+
</script>
|
|
31
|
+
|
|
32
|
+
{#if rool.authenticated === undefined}
|
|
33
|
+
<div class="min-h-dvh flex items-center justify-center bg-gray-50">
|
|
34
|
+
<p class="text-gray-500">Loading...</p>
|
|
35
|
+
</div>
|
|
36
|
+
{:else if rool.authenticated === false}
|
|
37
|
+
<Splash appName={APP_NAME} onLogin={() => rool.login(APP_NAME)} />
|
|
38
|
+
{:else}
|
|
39
|
+
<div class="min-h-dvh flex flex-col bg-gray-50">
|
|
40
|
+
<Header appName={APP_NAME} {space} onLogout={() => rool.logout()} />
|
|
41
|
+
|
|
42
|
+
{#if !space}
|
|
43
|
+
<div class="flex-1 flex items-center justify-center">
|
|
44
|
+
<p class="text-gray-500">Loading space...</p>
|
|
45
|
+
</div>
|
|
46
|
+
{:else}
|
|
47
|
+
<!-- Mobile: horizontal swipe with scroll-snap. Desktop: side-by-side -->
|
|
48
|
+
<div class="flex-1 flex overflow-x-auto snap-x snap-mandatory md:overflow-visible min-h-0">
|
|
49
|
+
<Chat {space} />
|
|
50
|
+
<Objects {space} />
|
|
51
|
+
</div>
|
|
52
|
+
{/if}
|
|
53
|
+
</div>
|
|
54
|
+
{/if}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { ReactiveSpace } from '@rool-dev/svelte';
|
|
3
|
+
|
|
4
|
+
interface Props {
|
|
5
|
+
space: ReactiveSpace;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
let { space }: Props = $props();
|
|
9
|
+
|
|
10
|
+
let input = $state('');
|
|
11
|
+
let isSending = $state(false);
|
|
12
|
+
let messagesEl: HTMLElement | null = $state(null);
|
|
13
|
+
|
|
14
|
+
let interactions = $derived(space.interactions);
|
|
15
|
+
|
|
16
|
+
// Auto-scroll on new messages
|
|
17
|
+
$effect(() => {
|
|
18
|
+
if (interactions.length > 0 && messagesEl) {
|
|
19
|
+
messagesEl.scrollTop = messagesEl.scrollHeight;
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
async function send() {
|
|
24
|
+
if (!input.trim() || isSending) return;
|
|
25
|
+
|
|
26
|
+
const text = input.trim();
|
|
27
|
+
input = '';
|
|
28
|
+
isSending = true;
|
|
29
|
+
|
|
30
|
+
try {
|
|
31
|
+
await space.checkpoint();
|
|
32
|
+
await space.prompt(text);
|
|
33
|
+
} finally {
|
|
34
|
+
isSending = false;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
function handleKeydown(e: KeyboardEvent) {
|
|
39
|
+
if (e.key === 'Enter' && !e.shiftKey) {
|
|
40
|
+
e.preventDefault();
|
|
41
|
+
send();
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
</script>
|
|
45
|
+
|
|
46
|
+
<div class="w-full shrink-0 snap-start md:flex-1 md:shrink md:snap-align-none flex flex-col min-w-0">
|
|
47
|
+
<div class="flex-1 overflow-y-auto p-4 space-y-4" bind:this={messagesEl}>
|
|
48
|
+
{#if interactions.length === 0}
|
|
49
|
+
<div class="text-center py-16 text-gray-500">
|
|
50
|
+
<p class="text-lg mb-2">Welcome!</p>
|
|
51
|
+
<p class="text-sm">Ask the AI to create objects, answer questions, or help with tasks.</p>
|
|
52
|
+
</div>
|
|
53
|
+
{:else}
|
|
54
|
+
{#each interactions as msg (msg.id)}
|
|
55
|
+
<div class="flex justify-end">
|
|
56
|
+
<div class="max-w-[75%] bg-blue-600 text-white rounded-2xl rounded-br-sm px-4 py-2">
|
|
57
|
+
<p class="text-sm whitespace-pre-wrap">{msg.input}</p>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
<div class="flex justify-start">
|
|
61
|
+
<div class="max-w-[75%] bg-white border border-gray-200 rounded-2xl rounded-bl-sm px-4 py-2 shadow-sm">
|
|
62
|
+
{#if msg.output}
|
|
63
|
+
<p class="text-sm text-gray-700 whitespace-pre-wrap">{msg.output}</p>
|
|
64
|
+
{:else}
|
|
65
|
+
<p class="text-sm text-gray-400 italic">Thinking...</p>
|
|
66
|
+
{/if}
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
{/each}
|
|
70
|
+
{/if}
|
|
71
|
+
</div>
|
|
72
|
+
|
|
73
|
+
<div class="border-t border-gray-200 bg-white p-4">
|
|
74
|
+
<div class="flex gap-2">
|
|
75
|
+
<textarea
|
|
76
|
+
class="flex-1 px-4 py-2 border border-gray-300 rounded-xl resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-[44px] max-h-32"
|
|
77
|
+
placeholder="Type a message..."
|
|
78
|
+
rows="1"
|
|
79
|
+
bind:value={input}
|
|
80
|
+
onkeydown={handleKeydown}
|
|
81
|
+
disabled={isSending}
|
|
82
|
+
></textarea>
|
|
83
|
+
<button
|
|
84
|
+
class="px-5 py-2 bg-blue-600 text-white rounded-xl hover:bg-blue-700 disabled:opacity-50"
|
|
85
|
+
onclick={send}
|
|
86
|
+
disabled={isSending || !input.trim()}
|
|
87
|
+
>
|
|
88
|
+
{isSending ? '...' : 'Send'}
|
|
89
|
+
</button>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { ReactiveSpace } from '@rool-dev/svelte';
|
|
3
|
+
|
|
4
|
+
interface Props {
|
|
5
|
+
appName: string;
|
|
6
|
+
space: ReactiveSpace | null;
|
|
7
|
+
onLogout: () => void;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
let { appName, space, onLogout }: Props = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<header class="bg-white border-b border-gray-200 px-4 py-3 flex items-center justify-between">
|
|
14
|
+
<h1 class="text-lg font-semibold text-gray-900">{appName}</h1>
|
|
15
|
+
<div class="flex items-center gap-3">
|
|
16
|
+
{#if space}
|
|
17
|
+
<span class="text-sm text-gray-500 hidden sm:inline">{space.name}</span>
|
|
18
|
+
{/if}
|
|
19
|
+
<button
|
|
20
|
+
class="px-3 py-1.5 text-sm text-gray-500 hover:text-gray-700"
|
|
21
|
+
onclick={onLogout}
|
|
22
|
+
>
|
|
23
|
+
Sign out
|
|
24
|
+
</button>
|
|
25
|
+
</div>
|
|
26
|
+
</header>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { ReactiveSpace, ReactiveCollection } from '@rool-dev/svelte';
|
|
3
|
+
|
|
4
|
+
interface Props {
|
|
5
|
+
space: ReactiveSpace;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
let { space }: Props = $props();
|
|
9
|
+
|
|
10
|
+
let collection = $state<ReactiveCollection | null>(null);
|
|
11
|
+
|
|
12
|
+
$effect(() => {
|
|
13
|
+
const c = space.collection({});
|
|
14
|
+
collection = c;
|
|
15
|
+
return () => c.close();
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
let objects = $derived(collection?.objects ?? []);
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<!-- Mobile: full width swipe panel. Desktop: side panel -->
|
|
22
|
+
<aside class="w-full shrink-0 snap-start md:w-80 md:shrink md:snap-align-none border-l border-gray-200 bg-white flex flex-col">
|
|
23
|
+
<div class="px-4 py-3 border-b border-gray-200">
|
|
24
|
+
<h2 class="font-medium text-gray-700">Objects ({objects.length})</h2>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="flex-1 overflow-y-auto p-4 space-y-3">
|
|
27
|
+
{#if objects.length === 0}
|
|
28
|
+
<p class="text-gray-400 text-sm text-center py-4">
|
|
29
|
+
Objects created by the AI will appear here
|
|
30
|
+
</p>
|
|
31
|
+
{:else}
|
|
32
|
+
{#each objects as obj (obj.id)}
|
|
33
|
+
<div class="p-3 bg-gray-50 rounded-lg border border-gray-200">
|
|
34
|
+
<pre class="text-xs text-gray-600 overflow-auto">{JSON.stringify(obj, null, 2)}</pre>
|
|
35
|
+
</div>
|
|
36
|
+
{/each}
|
|
37
|
+
{/if}
|
|
38
|
+
</div>
|
|
39
|
+
</aside>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
interface Props {
|
|
3
|
+
appName: string;
|
|
4
|
+
onLogin: () => void;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
let { appName, onLogin }: Props = $props();
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<div class="min-h-dvh flex flex-col items-center justify-center bg-gray-50 p-8">
|
|
11
|
+
<div class="text-center max-w-sm">
|
|
12
|
+
<h1 class="text-3xl font-bold text-gray-900 mb-2">{appName}</h1>
|
|
13
|
+
<p class="text-gray-500 mb-8">Sign in to get started</p>
|
|
14
|
+
<button
|
|
15
|
+
class="px-6 py-3 bg-gray-900 hover:bg-gray-800 text-white font-medium rounded-lg transition-colors"
|
|
16
|
+
onclick={onLogin}
|
|
17
|
+
>
|
|
18
|
+
Sign in
|
|
19
|
+
</button>
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import 'tailwindcss';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ESNext",
|
|
4
|
+
"module": "ESNext",
|
|
5
|
+
"moduleResolution": "bundler",
|
|
6
|
+
"verbatimModuleSyntax": true,
|
|
7
|
+
"resolveJsonModule": true,
|
|
8
|
+
"isolatedModules": true,
|
|
9
|
+
"strict": true,
|
|
10
|
+
"noEmit": true
|
|
11
|
+
},
|
|
12
|
+
"include": ["src/**/*.ts", "src/**/*.svelte"]
|
|
13
|
+
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# Rool App
|
|
2
|
+
|
|
3
|
+
A vanilla TypeScript app built on Rool Spaces - a persistent, collaborative environment for AI-driven object management.
|
|
4
|
+
|
|
5
|
+
## Technology Stack
|
|
6
|
+
|
|
7
|
+
- **Language**: TypeScript
|
|
8
|
+
- **Styling**: TailwindCSS v4
|
|
9
|
+
- **Bundler**: Vite
|
|
10
|
+
- **Package manager**: pnpm
|
|
11
|
+
|
|
12
|
+
For Rool documentation, **always read the README first**:
|
|
13
|
+
|
|
14
|
+
```
|
|
15
|
+
node_modules/@rool-dev/sdk/README.md
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Rool Primitives
|
|
19
|
+
|
|
20
|
+
**RoolClient** - Authentication and space lifecycle. One per app.
|
|
21
|
+
|
|
22
|
+
**RoolSpace** - The workspace. Contains objects, relations, and conversations.
|
|
23
|
+
- `space.prompt(text)` - Invoke AI to create/modify objects
|
|
24
|
+
- `space.checkpoint()` - Create undo point before mutations
|
|
25
|
+
- `space.on(event, handler)` - Subscribe to real-time events
|
|
26
|
+
- `space.findObjects({ where? })` - Query objects
|
|
27
|
+
|
|
28
|
+
**Objects** - Key-value records with `id` field. Created via `space.createObject()` or AI.
|
|
29
|
+
|
|
30
|
+
**Relations** - Directional links between objects via `space.link(source, relation, target)`.
|
|
31
|
+
|
|
32
|
+
## Event-Driven Pattern
|
|
33
|
+
|
|
34
|
+
The SDK emits events for all changes. Build reactive UIs by subscribing:
|
|
35
|
+
|
|
36
|
+
```typescript
|
|
37
|
+
space.on('objectCreated', ({ objectId, object, source }) => {
|
|
38
|
+
// source: 'local_user' | 'remote_user' | 'remote_agent' | 'system'
|
|
39
|
+
updateUI(object);
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
space.on('objectUpdated', ({ objectId, object }) => { ... });
|
|
43
|
+
space.on('objectDeleted', ({ objectId }) => { ... });
|
|
44
|
+
space.on('linked', ({ sourceId, relation, targetId }) => { ... });
|
|
45
|
+
space.on('unlinked', ({ sourceId, relation, targetId }) => { ... });
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Key Pattern
|
|
49
|
+
|
|
50
|
+
```typescript
|
|
51
|
+
// Always checkpoint before AI mutations for undo support
|
|
52
|
+
await space.checkpoint();
|
|
53
|
+
const { message, objects } = await space.prompt('Create a task');
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Entry Point
|
|
57
|
+
|
|
58
|
+
`src/main.ts` - Single file with auth, rendering, and event handlers.
|
|
59
|
+
|
|
60
|
+
## Adding Functionality
|
|
61
|
+
|
|
62
|
+
Useful packages:
|
|
63
|
+
- **marked** - Render markdown from AI responses
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
6
|
+
<title>Rool App</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<div id="app"></div>
|
|
10
|
+
<script type="module" src="/src/main.ts"></script>
|
|
11
|
+
</body>
|
|
12
|
+
</html>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "rool-app",
|
|
3
|
+
"private": true,
|
|
4
|
+
"version": "0.0.0",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "vite",
|
|
8
|
+
"build": "vite build",
|
|
9
|
+
"preview": "vite preview",
|
|
10
|
+
"typecheck": "tsc --noEmit"
|
|
11
|
+
},
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"@rool-dev/sdk": "workspace:*"
|
|
14
|
+
},
|
|
15
|
+
"devDependencies": {
|
|
16
|
+
"@tailwindcss/vite": "^4.0.0",
|
|
17
|
+
"tailwindcss": "^4.0.0",
|
|
18
|
+
"typescript": "^5.0.0",
|
|
19
|
+
"vite": "^6.0.0"
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import 'tailwindcss';
|