// app.jsx — Hutch LP main app const { useState, useEffect, useRef, useMemo } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "#5B7CFA", "glassStrength": 0.62, "preset": "indigo" }/*EDITMODE-END*/; const ACCENT_PRESETS = { indigo: '#5B7CFA', emerald: '#1FB57A', rose: '#E0567C', amber: '#E8A23A', graphite:'#454963', }; // ─── Hero: menu bar + popover ─────────────────────────────────────────────── const MenuBar = ({ accent, time }) => (

Finder ファイル編集表示移動ウインドウヘルプ

􀙇 􀛨

{time}

); const Hero = ({ accent, glassStrength }) => { const [open, setOpen] = useState(false); const [completed, setCompleted] = useState([]); useEffect(() => { const timer = setTimeout(() => setOpen(true), 600); return () => clearTimeout(timer); }, []); return (

AI Reminder Assistant for macOS

いつものリマインダーが、
ぐっと近くなる。

Apple純正リマインダーを、メニューバーから1クリックで。
データはそのまま iCloud。入り口だけ、すぐそこに。

GitHubを見る

{ setCompleted(c => c.includes(id) ? c.filter(x => x !== id) : [...c, id]); }} hoverable />

); }; // ─── Features grid ────────────────────────────────────────────────────────── const features = [ { icon: ( ), title: '乗り換えは、いらない。', body: '純正リマインダーのデータをそのまま使えるから、リスト・iCloud同期・iPhone連携はいつもどおり。Hutchを消しても、データは残ります。' }, { icon: ( ), title: '思いついた瞬間に、書ける。', body: 'Fnダブルタップ、もしくは任意のショートカットで一瞬で開く。書いて、閉じる。Cmd+Tabもアプリ切替も、もう要りません。' }, { icon: ( ), title: '話しことばで、書くだけ。', body: '「明日15時に歯医者」「金曜までに資料」と打つだけ。日付・時刻・URL・リストを自動で読み取って、きれいなタスクに整えます。' }, { icon: ( ), title: '大きなタスクも、ひるまない。', body: '親タスクをAIが3〜7個のサブタスクに分解。確認・編集してから、まとめて登録。手をつけ始めるまでが、ずっと軽くなります。' }, { icon: ( ), title: '“進行中” が、ちゃんと分かる。', body: '未着手・進行中・完了の3状態を表示。#wip タグで表現するので、iPhoneの純正リマインダーでもそのまま見えます。' }, { icon: ( ), title: '今週が、一目で見える。', body: 'カレンダービューで月をまるごと俯瞰。日本の祝日にも対応しているので、月曜の朝の段取りがすぐ立ちます。' }, ]; const Features = ({ accent }) => (

FEATURES

小さく、軽く、
でも、ちゃんと深い。

クイック入力ツールでは終わらない。
メニューバーの中だけで、毎日のタスク管理がきちんと完結します。

{features.map((f, i) => (

{f.icon}

{f.title}

{f.body}

))}

); // ─── AI Input Demo ────────────────────────────────────────────────────────── const AI_PHRASES = [ { input: '明日15時に歯医者', list: '暮らし', listColor: '#3CC97A', date: '明日 15:00', extra: null }, { input: '今週金曜までに資料作る', list: '仕事', listColor: '#4A8BFF', date: '4/24 (金)', extra: null }, { input: 'developer.apple.comの記事を読む', list: 'あとで読む', listColor: '#A26BFA', date: null, extra: 'developer.apple.com' }, ]; const AIDemo = ({ accent, glassStrength }) => { const [phraseIdx, setPhraseIdx] = useState(0); const [typed, setTyped] = useState(''); const [phase, setPhase] = useState('typing'); const ref = useRef(null); const [active, setActive] = useState(false); useEffect(() => { const obs = new IntersectionObserver(([e]) => setActive(e.isIntersecting), { threshold: 0.3 }); if (ref.current) obs.observe(ref.current); return () => obs.disconnect(); }, []); useEffect(() => { if (!active) return; let cancelled = false; const phrase = AI_PHRASES[phraseIdx].input; const run = async () => { setTyped(''); setPhase('typing'); for (let i = 0; i <= phrase.length; i++) { if (cancelled) return; await new Promise(r => setTimeout(r, 60)); setTyped(phrase.slice(0, i)); } await new Promise(r => setTimeout(r, 500)); if (cancelled) return; setPhase('parsing'); await new Promise(r => setTimeout(r, 900)); if (cancelled) return; setPhase('done'); await new Promise(r => setTimeout(r, 2200)); if (cancelled) return; setPhraseIdx(p => (p + 1) % AI_PHRASES.length); }; run(); return () => { cancelled = true; }; }, [phraseIdx, active]); const cur = AI_PHRASES[phraseIdx]; return (

AI INPUT

書いた文章が、
そのままタスクになる。

日付、時刻、URL、リスト。意味のある情報を自動で抽出してくれます。

抽出された属性

リスト {cur.list}

{cur.date && (

日時 {cur.date}

)} {cur.extra && (

URL {cur.extra}

)}

タスクとして登録

); }; // ─── Subtask decompose demo ───────────────────────────────────────────────── const SubtaskDemo = ({ accent, glassStrength }) => { const [step, setStep] = useState(0); useEffect(() => { let mounted = true; const cycle = async () => { while (mounted) { setStep(0); await new Promise(r => setTimeout(r, 1200)); if (!mounted) return; setStep(1); await new Promise(r => setTimeout(r, 1200)); if (!mounted) return; setStep(2); await new Promise(r => setTimeout(r, 4000)); } }; cycle(); return () => { mounted = false; }; }, []); return (

SUBTASKS

大きな仕事は、小さく分けて。

親タスクをAIが3〜7個のサブタスクに分解。
確認してから、一括で登録できます。

= 2 ? 't5' : null} subtaskState={step >= 2 ? 'full' : 'idle'} hoverable={false} />

= 0 ? 'on' : ''}`}>

親タスクを書く

"提案書のドラフト作成"

= 1 ? 'on' : ''}`}>

AIで分解

{step === 1 ? 考え中... : '5つのサブタスクを提案'}

= 2 ? 'on' : ''}`}>

確認 → 一括登録

編集も並べ替えもしてから保存。

); }; // ─── Reminders sync section ───────────────────────────────────────────────── const SyncSection = ({ accent }) => (

NATIVE INTEGRATION

乗り換え、不要。

Hutch は独自のデータストアを持ちません。
EventKit で純正リマインダーを直接読み書きします。
だから、いま使っているリスト、iCloud 同期、共有リスト、iPhone 連携が、
何もしなくてもそのまま使えます。

✓ 既存のリスト構成をそのまま利用
✓ iCloud で iPhone / iPad と双方向同期
✓ 家族と共有しているリストもそのまま
✓ Hutch を削除してもデータは残る

Hutch menu bar

iCloud

iPhone 純正アプリ

iPad 純正アプリ

); // ─── CTA + Footer ─────────────────────────────────────────────────────────── const CTA = ({ accent }) => (

いつも手元にある、
小さな棚を。

無料・オープンソース。透明で、ローカルファーストな設計です。

GitHubでソースを見る

); const Footer = ({ accent }) => ( ); // ─── App ──────────────────────────────────────────────────────────────────── function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const accent = t.preset === 'custom' ? t.accent : (ACCENT_PRESETS[t.preset] || t.accent); return (

); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render();

いつものリマインダーが、 ぐっと近くなる。

小さく、軽く、でも、ちゃんと深い。