boten-gemma 0.1.0

package/templates/panel-react/src/App.tsx

@@ -0,0 +1,108 @@
+import { useState } from 'react';
+
+export function App() {
+  const [greeting, setGreeting] = useState<string | null>(null);
+
+  function handleSendChat() {
+    panel.sendChat('Hello from {{PANEL_TITLE}}!');
+    setGreeting('Message sent!');
+    setTimeout(() => setGreeting(null), 2000);
+  }
+
+  // Example: call backend RPC
+  // async function handlePing() {
+  //   const result = await panel.callBackend('ping');
+  //   console.log('Backend responded:', result);
+  // }
+
+  // Example: listen for backend events
+  // useEffect(() => {
+  //   const unsub = panel.onEvent('data:updated', (payload) => {
+  //     console.log('Got event:', payload);
+  //   });
+  //   return unsub;
+  // }, []);
+
+  return (
+    <div style={styles.container}>
+      <h1 style={styles.title}>{'{{PANEL_TITLE}}'}</h1>
+
+      <div style={styles.card}>
+        <p style={styles.cardText}>
+          Your panel is ready. Edit <code style={styles.code}>src/App.tsx</code> to get started.
+        </p>
+
+        <div style={styles.actions}>
+          <button style={styles.button} onClick={handleSendChat}>
+            Say Hello
+          </button>
+
+          {greeting && (
+            <span style={styles.feedback}>{greeting}</span>
+          )}
+        </div>
+      </div>
+
+      <p style={styles.hint}>
+        Run <code style={styles.code}>npm run dev</code> for hot reload
+        or <code style={styles.code}>npm run build</code> for production.
+      </p>
+    </div>
+  );
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  container: {
+    padding: '1.5rem',
+    maxWidth: '640px',
+  },
+  title: {
+    fontSize: '1.25rem',
+    fontWeight: 600,
+    margin: '0 0 1rem 0',
+    color: 'hsl(var(--foreground))',
+  },
+  card: {
+    background: 'hsl(var(--card))',
+    color: 'hsl(var(--card-foreground))',
+    border: '1px solid hsl(var(--border))',
+    borderRadius: 'var(--radius)',
+    padding: '1.25rem',
+  },
+  cardText: {
+    margin: '0 0 1rem 0',
+    lineHeight: 1.6,
+  },
+  actions: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.75rem',
+  },
+  button: {
+    background: 'hsl(var(--primary))',
+    color: 'hsl(var(--primary-foreground))',
+    border: 'none',
+    borderRadius: 'var(--radius)',
+    padding: '0.5rem 1rem',
+    cursor: 'pointer',
+    fontFamily: 'inherit',
+    fontSize: '0.875rem',
+    fontWeight: 500,
+  },
+  feedback: {
+    fontSize: '0.8125rem',
+    color: 'hsl(var(--muted-foreground))',
+  },
+  code: {
+    fontFamily: '"JetBrains Mono", ui-monospace, monospace',
+    fontSize: '0.8125rem',
+    background: 'hsl(var(--muted))',
+    padding: '0.15rem 0.4rem',
+    borderRadius: '0.25rem',
+  },
+  hint: {
+    marginTop: '1rem',
+    fontSize: '0.8125rem',
+    color: 'hsl(var(--muted-foreground))',
+  },
+};

package/templates/panel-react/src/gemma.d.ts

@@ -0,0 +1,13 @@
+declare class GemmaPanel {
+  readData(key: string): Promise<unknown>;
+  writeData(key: string, value: unknown): Promise<void>;
+  readMemory(filename: string): Promise<string>;
+  sendChat(text: string): void;
+  onMessage(callback: (message: { role: string; content: string }) => void): () => void;
+  callBackend(method: string, params?: unknown): Promise<unknown>;
+  onEvent(event: string, callback: (payload: unknown) => void): () => void;
+  notify(message: string, level?: 'info' | 'warn' | 'error'): void;
+  getTheme(): Promise<{ isDark: boolean; variables: Record<string, string> }>;
+}
+
+declare const panel: GemmaPanel;

package/templates/panel-react/src/main.tsx

@@ -0,0 +1,9 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/templates/panel-react/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/panel-react/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/templates/panel-react/tsconfig.service.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "module": "Node16",
+    "moduleResolution": "Node16",
+    "outDir": ".",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": false,
+    "sourceMap": true
+  },
+  "include": ["service.ts"],
+  "exclude": ["node_modules", "dist", "src"]
+}

package/templates/panel-react/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  base: '/panels/{{PANEL_NAME}}/',
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+  },
+  server: {
+    port: 5174,
+  },
+});