clawmini 0.0.1

package/web/src/routes/chats/[id]/page.svelte.spec.ts

@@ -0,0 +1,102 @@
+import { page } from 'vitest/browser';
+import { describe, expect, it, afterEach } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import ChatPage from './+page.svelte';
+import type { ChatMessage } from '$lib/types';
+import { appState } from '$lib/app-state.svelte.js';
+
+const mockData = {
+  id: 'test-chat',
+  chats: [],
+  agents: [],
+  messages: [
+    {
+      id: 'msg-1',
+      role: 'user',
+      content: 'Hello daemon',
+      timestamp: new Date().toISOString(),
+    },
+    {
+      id: 'log-1',
+      messageId: 'msg-1',
+      role: 'log',
+      content: 'I am the daemon',
+      command: 'echo "I am the daemon"',
+      cwd: '/tmp',
+      exitCode: 0,
+      stdout: 'I am the daemon',
+      stderr: '',
+      timestamp: new Date().toISOString(),
+      level: 'default',
+    },
+    {
+      id: 'log-2',
+      messageId: 'msg-1',
+      role: 'log',
+      content: 'Debug message',
+      command: 'debug-cmd',
+      cwd: '/tmp',
+      exitCode: 0,
+      stdout: 'debug out',
+      stderr: '',
+      timestamp: new Date().toISOString(),
+      level: 'debug',
+    },
+    {
+      id: 'log-3',
+      messageId: 'msg-1',
+      role: 'log',
+      content: '',
+      command: 'exit 1',
+      cwd: '/tmp',
+      exitCode: 1,
+      stdout: '',
+      stderr: 'Command failed',
+      timestamp: new Date().toISOString(),
+      level: 'verbose',
+    },
+  ] as ChatMessage[],
+};
+
+describe('Chat Page', () => {
+  afterEach(() => {
+    appState.verbosityLevel = 'default';
+  });
+
+  it('filters messages based on default verbosity', async () => {
+    appState.verbosityLevel = 'default';
+    render(ChatPage, { props: { data: mockData } });
+
+    const userMsgs = page.getByTestId('user-message').all();
+    const logMsgs = page.getByTestId('log-message').all();
+
+    expect(userMsgs.length).toBe(1);
+    expect(logMsgs.length).toBe(1);
+    await expect.element(logMsgs[0]).toHaveTextContent('I am the daemon');
+  });
+
+  it('filters messages based on debug verbosity', async () => {
+    appState.verbosityLevel = 'debug';
+    render(ChatPage, { props: { data: mockData } });
+
+    const logMsgs = page.getByTestId('log-message').all();
+    expect(logMsgs.length).toBe(2);
+    await expect.element(logMsgs[0]).toHaveTextContent('I am the daemon');
+    await expect.element(logMsgs[1]).toHaveTextContent('Debug message');
+  });
+
+  it('filters messages based on verbose verbosity and shows details', async () => {
+    appState.verbosityLevel = 'verbose';
+    render(ChatPage, { props: { data: mockData } });
+
+    const logMsgs = page.getByTestId('log-message').all();
+    expect(logMsgs.length).toBe(3);
+
+    // Check verbose distinct rendering
+    await expect.element(logMsgs[2]).toHaveClass(/bg-primary\/5/);
+
+    const errorMsg = page.getByText('Command failed');
+    await expect.element(errorMsg).toBeInTheDocument();
+    await expect.element(errorMsg).toHaveClass(/text-destructive/);
+  });
+});

package/web/src/routes/chats/[id]/settings/+page.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+  import type { PageData } from './$types';
+  import { invalidate } from '$app/navigation';
+  import { Button } from '$lib/components/ui/button/index.js';
+  import { Input } from '$lib/components/ui/input/index.js';
+  import { Trash2, Plus, ArrowLeft } from 'lucide-svelte';
+  
+  let { data } = $props<{ data: PageData }>();
+  
+  let cronJobs = $derived(data.cronJobs);
+  
+  let isAdding = $state(false);
+  let newJobId = $state('');
+  let newJobMessage = $state('');
+  let newJobSchedule = $state('');
+  let newJobType = $state('cron'); // 'cron', 'every', 'at'
+  let isSubmitting = $state(false);
+  let errorMsg = $state('');
+
+  async function deleteJob(jobId: string) {
+    if (!confirm('Are you sure you want to delete this job?')) return;
+    try {
+      const res = await fetch(`/api/chats/${data.id}/cron/${jobId}`, {
+        method: 'DELETE'
+      });
+      if (!res.ok) throw new Error('Failed to delete job');
+      await invalidate(`app:chat:${data.id}:cron`);
+    } catch (e: unknown) {
+      alert(e instanceof Error ? e.message : String(e));
+    }
+  }
+
+  async function addJob(e: Event) {
+    e.preventDefault();
+    isSubmitting = true;
+    errorMsg = '';
+    
+    try {
+      const job: any = {
+        id: newJobId,
+        message: newJobMessage,
+        schedule: {}
+      };
+      
+      if (newJobType === 'cron') job.schedule.cron = newJobSchedule;
+      else if (newJobType === 'every') job.schedule.every = newJobSchedule;
+      else if (newJobType === 'at') job.schedule.at = newJobSchedule;
+      
+      const res = await fetch(`/api/chats/${data.id}/cron`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(job)
+      });
+      
+      if (!res.ok) {
+        const errData = await res.json();
+        throw new Error(errData.error || 'Failed to add job');
+      }
+      
+      isAdding = false;
+      newJobId = '';
+      newJobMessage = '';
+      newJobSchedule = '';
+      newJobType = 'cron';
+      
+      await invalidate(`app:chat:${data.id}:cron`);
+    } catch (e: unknown) {
+      errorMsg = e instanceof Error ? e.message : String(e);
+    } finally {
+      isSubmitting = false;
+    }
+  }
+</script>
+
+<div class="flex-1 overflow-y-auto p-6 h-full bg-background text-foreground">
+  <div class="max-w-4xl mx-auto space-y-8">
+    <div class="flex items-center gap-4">
+      <a href="/chats/{data.id}" class="p-2 -ml-2 rounded-full hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title="Back to Chat">
+        <ArrowLeft class="w-5 h-5" />
+      </a>
+      <h1 class="text-2xl font-bold tracking-tight">Chat Settings</h1>
+    </div>
+
+    <section class="space-y-4">
+      <div class="flex items-center justify-between">
+        <h2 class="text-xl font-semibold">Cron Jobs</h2>
+        <Button variant="outline" size="sm" onclick={() => isAdding = !isAdding}>
+          <Plus class="w-4 h-4 mr-2" />
+          Add Job
+        </Button>
+      </div>
+
+      {#if errorMsg}
+        <div class="p-3 bg-destructive/10 text-destructive text-sm rounded-md border border-destructive/20">
+          {errorMsg}
+        </div>
+      {/if}
+
+      {#if isAdding}
+        <form onsubmit={addJob} class="p-4 border rounded-lg space-y-4 bg-card text-card-foreground shadow-sm">
+          <div class="grid grid-cols-2 gap-4">
+            <div class="space-y-2">
+              <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="jobId">Job ID</label>
+              <Input id="jobId" bind:value={newJobId} placeholder="e.g. daily-standup" required />
+            </div>
+            <div class="space-y-2">
+              <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="jobType">Schedule Type</label>
+              <select id="jobType" bind:value={newJobType} class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
+                <option value="cron">Cron Expression</option>
+                <option value="every">Every (e.g. '1h', '30m')</option>
+                <option value="at">At (ISO Date/Time)</option>
+              </select>
+            </div>
+            <div class="space-y-2 col-span-2">
+              <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="jobSchedule">Schedule Expression</label>
+              <Input id="jobSchedule" bind:value={newJobSchedule} placeholder="e.g. * * * * *, 1h, or 2024-01-01T12:00:00Z" required />
+            </div>
+            <div class="space-y-2 col-span-2">
+              <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="jobMessage">Message / Command</label>
+              <Input id="jobMessage" bind:value={newJobMessage} placeholder="Command to run..." required />
+            </div>
+          </div>
+          <div class="flex justify-end gap-2 pt-2">
+            <Button type="button" variant="ghost" onclick={() => isAdding = false}>Cancel</Button>
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? 'Saving...' : 'Save Job'}
+            </Button>
+          </div>
+        </form>
+      {/if}
+
+      {#if !cronJobs || cronJobs.length === 0}
+        {#if !isAdding}
+          <div class="p-8 text-center text-muted-foreground border rounded-lg border-dashed">
+            No cron jobs configured for this chat.
+          </div>
+        {/if}
+      {:else}
+        <div class="grid gap-4">
+          {#each cronJobs as job (job.id)}
+            <div class="flex items-center justify-between p-4 border rounded-lg bg-card text-card-foreground shadow-sm">
+              <div class="space-y-1.5 overflow-hidden">
+                <div class="font-medium flex items-center gap-2">
+                  <span class="truncate">{job.id}</span>
+                  <span class="shrink-0 px-2 py-0.5 text-[10px] uppercase font-bold tracking-wider rounded-full bg-secondary text-secondary-foreground">
+                    {#if job.schedule.cron}cron: {job.schedule.cron}{/if}
+                    {#if job.schedule.every}every: {job.schedule.every}{/if}
+                    {#if job.schedule.at}at: {job.schedule.at}{/if}
+                  </span>
+                </div>
+                <div class="text-sm text-muted-foreground font-mono bg-muted/50 p-1.5 rounded-md truncate">
+                  $ {job.message}
+                </div>
+              </div>
+              <Button variant="ghost" size="icon" class="shrink-0 text-destructive hover:bg-destructive/10 hover:text-destructive" onclick={() => deleteJob(job.id)}>
+                <Trash2 class="w-4 h-4" />
+                <span class="sr-only">Delete</span>
+              </Button>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </section>
+  </div>
+</div>

package/web/src/routes/chats/[id]/settings/+page.ts

@@ -0,0 +1,18 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, fetch, depends }) => {
+  const { id } = params;
+  depends(`app:chat:${id}:cron`);
+
+  let cronJobs = [];
+  try {
+    const res = await fetch(`/api/chats/${id}/cron`);
+    if (res.ok) {
+      cronJobs = await res.json();
+    }
+  } catch (e) {
+    console.error('Failed to load cron jobs:', e);
+  }
+
+  return { id, cronJobs };
+};

package/web/src/routes/page.svelte.spec.ts

@@ -0,0 +1,13 @@
+import { page } from 'vitest/browser';
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import Page from './+page.svelte';
+
+describe('/+page.svelte', () => {
+  it('should render h1', async () => {
+    render(Page);
+
+    const heading = page.getByRole('heading', { level: 1 });
+    await expect.element(heading).toBeInTheDocument();
+  });
+});

package/web/static/robots.txt

@@ -0,0 +1,3 @@
+# allow crawling everything by default
+User-agent: *
+Disallow:

package/web/svelte.config.js

@@ -0,0 +1,21 @@
+import adapter from '@sveltejs/adapter-static';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+        kit: {
+                adapter: adapter({
+                        pages: '../dist/web',
+                        assets: '../dist/web',
+                        fallback: 'index.html',
+                        precompress: false,
+                        strict: true
+                }),
+                alias: {
+                        $lib: './src/lib',
+                        $components: './src/lib/components',
+                        $utils: './src/lib/utils'
+                }
+        }
+};
+
+export default config;

package/web/tsconfig.json

@@ -0,0 +1,20 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"rewriteRelativeImportExtensions": true,
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// To make changes to top-level options such as include and exclude, we recommend extending
+	// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
+}

package/web/vite.config.ts

@@ -0,0 +1,41 @@
+import { defineConfig } from 'vitest/config';
+import { playwright } from '@vitest/browser-playwright';
+import { sveltekit } from '@sveltejs/kit/vite';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [tailwindcss(), sveltekit()],
+  server: {
+    proxy: {
+      '/api': 'http://127.0.0.1:8080',
+    },
+  },
+  test: {
+    expect: { requireAssertions: true },
+    projects: [
+      {
+        extends: './vite.config.ts',
+        test: {
+          name: 'client',
+          browser: {
+            enabled: true,
+            provider: playwright(),
+            instances: [{ browser: 'chromium', headless: true }],
+          },
+          include: ['src/**/*.svelte.{test,spec}.{js,ts}'],
+          exclude: ['src/lib/server/**'],
+        },
+      },
+
+      {
+        extends: './vite.config.ts',
+        test: {
+          name: 'server',
+          environment: 'node',
+          include: ['src/**/*.{test,spec}.{js,ts}'],
+          exclude: ['src/**/*.svelte.{test,spec}.{js,ts}'],
+        },
+      },
+    ],
+  },
+});