chill-agent 1.4.0 → 1.6.0

package/examples/react-countdown.md

@@ -0,0 +1,390 @@
+# Countdown Timer
+
+**Task:** "Build me a countdown timer component in React that counts down from a given number of seconds."
+
+Verbatim model output from a benchmark run, Claude Haiku 4.5, no-skill arm vs ponytail arm, temperature 1, source `benchmarks/output.json`. Reproduce: `npx promptfoo@latest eval -c benchmarks/promptfooconfig.yaml`.
+
+## Without Ponytail, 267 lines of code
+
+# React Countdown Timer Component
+
+Here's a complete countdown timer component with multiple variations:
+
+## Basic Countdown Timer
+
+```jsx
+import { useState, useEffect } from 'react';
+
+export function CountdownTimer({ initialSeconds = 60 }) {
+  const [seconds, setSeconds] = useState(initialSeconds);
+  const [isActive, setIsActive] = useState(false);
+
+  useEffect(() => {
+    let interval = null;
+
+    if (isActive && seconds > 0) {
+      interval = setInterval(() => {
+        setSeconds(seconds => seconds - 1);
+      }, 1000);
+    } else if (seconds === 0) {
+      setIsActive(false);
+    }
+
+    return () => clearInterval(interval);
+  }, [isActive, seconds]);
+
+  const toggle = () => setIsActive(!isActive);
+  const reset = () => {
+    setSeconds(initialSeconds);
+    setIsActive(false);
+  };
+
+  return (
+    <div className="countdown-timer">
+      <div className="timer-display">{seconds}s</div>
+      <div className="timer-controls">
+        <button onClick={toggle}>
+          {isActive ? 'Pause' : 'Start'}
+        </button>
+        <button onClick={reset}>Reset</button>
+      </div>
+    </div>
+  );
+}
+```
+
+## Advanced Timer with Formatted Display
+
+```jsx
+import { useState, useEffect } from 'react';
+
+export function AdvancedCountdownTimer({ 
+  initialSeconds = 3600,
+  onComplete = () => {},
+  showMilliseconds = false 
+}) {
+  const [timeLeft, setTimeLeft] = useState(initialSeconds);
+  const [isActive, setIsActive] = useState(false);
+
+  useEffect(() => {
+    let interval = null;
+
+    if (isActive && timeLeft > 0) {
+      interval = setInterval(() => {
+        setTimeLeft(prev => {
+          if (prev <= 1) {
+            setIsActive(false);
+            onComplete();
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+    }
+
+    return () => clearInterval(interval);
+  }, [isActive, timeLeft, onComplete]);
+
+  const formatTime = (totalSeconds) => {
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+
+    const parts = [];
+    if (hours > 0) parts.push(String(hours).padStart(2, '0'));
+    parts.push(String(minutes).padStart(2, '0'));
+    parts.push(String(seconds).padStart(2, '0'));
+
+    return parts.join(':');
+  };
+
+  const toggle = () => setIsActive(!isActive);
+  const reset = () => {
+    setTimeLeft(initialSeconds);
+    setIsActive(false);
+  };
+
+  const progressPercent = ((initialSeconds - timeLeft) / initialSeconds) * 100;
+
+  return (
+    <div className="advanced-timer">
+      <div className="timer-display">
+        {formatTime(timeLeft)}
+      </div>
+      <div className="progress-bar">
+        <div 
+          className="progress-fill" 
+          style={{ width: `${progressPercent}%` }}
+        />
+      </div>
+      <div className="timer-controls">
+        <button onClick={toggle} className="btn-primary">
+          {isActive ? '⏸ Pause' : '▶ Start'}
+        </button>
+        <button onClick={reset} className="btn-secondary">
+          ↻ Reset
+        </button>
+      </div>
+    </div>
+  );
+}
+```
+
+## Custom Hook Version
+
+```jsx
+import { useState, useEffect, useCallback } from 'react';
+
+export function useCountdown(initialSeconds) {
+  const [seconds, setSeconds] = useState(initialSeconds);
+  const [isActive, setIsActive] = useState(false);
+
+  useEffect(() => {
+    let interval = null;
+
+    if (isActive && seconds > 0) {
+      interval = setInterval(() => {
+        setSeconds(prev => prev - 1);
+      }, 1000);
+    } else if (seconds === 0 && isActive) {
+      setIsActive(false);
+    }
+
+    return () => clearInterval(interval);
+  }, [isActive, seconds]);
+
+  const start = useCallback(() => setIsActive(true), []);
+  const pause = useCallback(() => setIsActive(false), []);
+  const reset = useCallback(() => {
+    setSeconds(initialSeconds);
+    setIsActive(false);
+  }, [initialSeconds]);
+
+  return {
+    seconds,
+    isActive,
+    start,
+    pause,
+    reset,
+    setSeconds
+  };
+}
+
+// Usage
+export function TimerWithHook() {
+  const { seconds, isActive, start, pause, reset } = useCountdown(60);
+
+  return (
+    <div>
+      <div>{seconds}s</div>
+      <button onClick={isActive ? pause : start}>
+        {isActive ? 'Pause' : 'Start'}
+      </button>
+      <button onClick={reset}>Reset</button>
+    </div>
+  );
+}
+```
+
+## Styled Component with Animations
+
+```jsx
+import { useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+const TimerContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  padding: 30px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 15px;
+  color: white;
+  font-family: 'Arial', sans-serif;
+`;
+
+const Display = styled.div`
+  font-size: 48px;
+  font-weight: bold;
+  font-variant-numeric: tabular-nums;
+  animation: ${props => props.isWarning ? 'pulse 0.5s infinite' : 'none'};
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+`;
+
+const Controls = styled.div`
+  display: flex;
+  gap: 10px;
+`;
+
+const Button = styled.button`
+  padding: 10px 20px;
+  font-size: 16px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  background-color: ${props => props.variant === 'danger' ? '#ff6b6b' : '#4ecdc4'};
+  color: white;
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+`;
+
+export function StyledCountdownTimer({ initialSeconds = 60 }) {
+  const [seconds, setSeconds] = useState(initialSeconds);
+  const [isActive, setIsActive] = useState(false);
+
+  useEffect(() => {
+    let interval = null;
+
+    if (isActive && seconds > 0) {
+      interval = setInterval(() => {
+        setSeconds(prev => prev - 1);
+      }, 1000);
+    } else if (seconds === 0) {
+      setIsActive(false);
+    }
+
+    return () => clearInterval(interval);
+  }, [isActive, seconds]);
+
+  const isWarning = seconds <= 10 && seconds > 0;
+
+  return (
+    <TimerContainer>
+      <Display isWarning={isWarning}>{seconds}s</Display>
+      <Controls>
+        <Button onClick={() => setIsActive(!isActive)}>
+          {isActive ? 'Pause' : 'Start'}
+        </Button>
+        <Button 
+          variant="danger"
+          onClick={() => {
+            setSeconds(initialSeconds);
+            setIsActive(false);
+          }}
+        >
+          Reset
+        </Button>
+      </Controls>
+    </TimerContainer>
+  );
+}
+```
+
+## CSS Styling
+
+```css
+.countdown-timer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  padding: 20px;
+  border: 2px solid #333;
+  border-radius: 10px;
+  background-color: #f5f5f5;
+}
+
+.timer-display {
+  font-size: 48px;
+  font-weight: bold;
+  font-variant-numeric: tabular-nums;
+  color: #333;
+}
+
+.timer-controls {
+  display: flex;
+  gap: 10px;
+}
+
+.timer-controls button {
+  padding: 10px 20px;
+  font-size: 16px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  background-color: #667eea;
+  color: white;
+  transition: background-color 0.3s;
+}
+
+.timer-controls button:hover {
+  background-color: #5568d3;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  background-color: #e0e0e0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background-color: #667eea;
+  transition: width 0.3s linear;
+}
+```
+
+## Usage Examples
+
+```jsx
+// Basic usage
+<CountdownTimer initialSeconds={30} />
+
+// Advanced with callback
+<AdvancedCountdownTimer 
+  initialSeconds={300}
+  onComplete={() => alert('Time\'s up!')}
+/>
+
+// Using the hook
+<TimerWithHook />
+
+// Styled version
+<StyledCountdownTimer initialSeconds={60} />
+```
+
+## Features
+
+✅ **Basic Timer** - Simple countdown with start/pause/reset  
+✅ **Advanced Timer** - Formatted display (HH:MM:SS), progress bar, callbacks  
+✅ **Custom Hook** - Reusable logic for any component  
+✅ **Styled Components** - Beautiful UI with animations  
+✅ **Warning State** - Visual feedback when time is running out  
+✅ **Completion Callback** - Execute code when timer finishes  
+
+Choose the version that best fits your needs!
+
+## With Ponytail, 9 lines of code
+
+```jsx
+export function CountdownTimer({ seconds }) {
+  const [remaining, setRemaining] = React.useState(seconds);
+
+  React.useEffect(() => {
+    if (remaining <= 0) return;
+    const timer = setInterval(() => setRemaining(r => r - 1), 1000);
+    return () => clearInterval(timer);
+  }, [remaining]);
+
+  return <div>{remaining}s</div>;
+}
+```
+
+Skipped: pause/resume, formatted display (mm:ss), sound on zero, styling, add when needed.
+
+**267 → 9 lines of code**, same model, same prompt.

package/examples/url-params.md

@@ -0,0 +1,41 @@
+# URL Parameters
+
+**Task:** "Parse and build URL query strings."
+
+## Without Ponytail
+
+```bash
+npm install query-string
+# 4.5 kB gzipped, 3.5M downloads/week
+```
+
+```js
+import qs from "query-string";
+
+// Parse
+const params = qs.parse(location.search);
+// → { page: "2", sort: "name", tags: ["js", "css"] }
+
+// Build
+const url = qs.stringify({ page: 2, sort: "name", tags: ["js", "css"] });
+// → "page=2&sort=name&tags=js&tags=css"
+```
+
+## With Ponytail
+
+```js
+// ponytail: URLSearchParams does this
+const params = new URLSearchParams(location.search);
+
+// Read
+params.get("page");         // "2"
+params.getAll("tags");      // ["js", "css"]
+
+// Build
+const out = new URLSearchParams({ page: 2, sort: "name" });
+out.append("tags", "js");
+out.append("tags", "css");
+out.toString(); // "page=2&sort=name&tags=js&tags=css"
+```
+
+**1 dependency → 0 dependencies.** `URLSearchParams` is in every browser and in Node.js since v10. It handles encoding, repeated keys, and iteration. The package was a polyfill for an API that has shipped everywhere for years.

package/gemini-extension.json

@@ -1,6 +1,6 @@
 {
   "name": "chill-agent",
-  "version": "1.2.0",
+  "version": "1.6.0",
   "description": "ChillAgent Anti-Slop 2.0 & Pragmatic Senior Dev Mode. Forces smallest working diff, YAGNI, standard library first, zero AI slop.",
   "contextFileName": "AGENTS.md"
-}
+}