import { AgenticSystem, field, action, stream } from 'idyllic';

export default class DocImprover extends AgenticSystem {
  @field content = '';
  @field improved = stream<string>('');
  @field status: 'idle' | 'improving' = 'idle';

  @action()
  async setContent(text: string) {
    this.content = text;
  }

  @action()
  async improve() {
    this.status = 'improving';
    this.improved.reset();

    for await (const chunk of ai.stream(
      `Improve this text, making it clearer and more professional:\n\n${this.content}`
    )) {
      this.improved.append(chunk);
    }

    this.improved.complete();
    this.status = 'idle';
  }
}

import { useSystem } from '@idyllic/react';
import type { DocImprover } from '../systems/DocImprover';

export default function Editor() {
  const { content, improved, status, setContent, improve } = useSystem<DocImprover>();

  return (
    <div className="grid grid-cols-2 gap-4 p-4 h-screen">
      <div className="flex flex-col">
        <h2 className="text-lg font-medium mb-2">Original</h2>
        <textarea
          value={content}
          onChange={e => setContent(e.target.value)}
          className="flex-1 p-3 border rounded font-mono"
          placeholder="Paste your text here..."
        />
        <button
          onClick={improve}
          disabled={status === 'improving'}
          className="mt-2 px-4 py-2 bg-blue-600 text-white rounded disabled:opacity-50"
        >
          {status === 'improving' ? 'Improving...' : 'Improve'}
        </button>
      </div>

      <div className="flex flex-col">
        <h2 className="text-lg font-medium mb-2">Improved</h2>
        <div className="flex-1 p-3 border rounded bg-gray-50 whitespace-pre-wrap">
          {improved.current}
          {status === 'improving' && <span className="animate-pulse">|</span>}
        </div>
      </div>
    </div>
  );
}

npx idyllic dev

@field revisions: string[] = [];

@action()
async improve() {
  if (this.improved.current) {
    this.revisions.push(this.improved.current);
  }
  // ... rest of improve logic
}

@action()
async improve(style: 'professional' | 'casual' | 'concise') {
  const prompts = {
    professional: 'Make this more professional and formal',
    casual: 'Make this friendlier and more conversational',
    concise: 'Make this shorter without losing meaning',
  };

  for await (const chunk of ai.stream(`${prompts[style]}:\n\n${this.content}`)) {
    this.improved.append(chunk);
  }
  // ...
}