From b241656bb463e252023e6de9e791fb91350eb9c2 Mon Sep 17 00:00:00 2001
From: Cam Clarke <cameronlewisclarke2@gmail.com>
Date: Sun, 1 Mar 2026 02:14:20 +0000
Subject: [PATCH 1/2] Add Todoist project visibility filter setting

---
 src/lib/components/Settings.svelte      | 191 ++++++++++++++++++++++++
 src/lib/components/Tasks.svelte         |  36 ++++-
 src/lib/components/ui/Checkbox.svelte   |   4 +-
 src/lib/stores/settings-store.svelte.js |   1 +
 4 files changed, 227 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/Settings.svelte b/src/lib/components/Settings.svelte
index 7dcb2c4..2f5aeb9 100644
--- a/src/lib/components/Settings.svelte
+++ b/src/lib/components/Settings.svelte
@@ -30,6 +30,10 @@
     let googleTasksApi = $state(null)
     let signingIn = $state(false)
     let signInError = $state('')
+    let todoistProjects = $state([])
+    let todoistProjectsLoading = $state(false)
+    let todoistProjectsError = $state('')
+    let todoistProjectsRequestId = 0
 
     function googleSignInLabel() {
         if (settings.googleTasksSignedIn) return 'sign out'
@@ -74,6 +78,119 @@
         }
     }
 
+    async function loadTodoistProjects(token) {
+        const trimmedToken = token?.trim()
+        if (!trimmedToken) {
+            todoistProjectsRequestId++
+            todoistProjects = []
+            todoistProjectsLoading = false
+            todoistProjectsError = ''
+            return
+        }
+
+        const requestId = ++todoistProjectsRequestId
+        todoistProjectsLoading = true
+        todoistProjectsError = ''
+
+        try {
+            const formData = new FormData()
+            formData.append('sync_token', '*')
+            formData.append('resource_types', JSON.stringify(['projects']))
+
+            const response = await fetch('https://api.todoist.com/api/v1/sync', {
+                method: 'POST',
+                headers: {
+                    Authorization: `Bearer ${trimmedToken}`,
+                },
+                body: formData,
+            })
+
+            if (!response.ok) {
+                throw new Error(`todoist projects fetch failed: ${response.status}`)
+            }
+
+            const data = await response.json()
+
+            if (requestId !== todoistProjectsRequestId) return
+
+            todoistProjects = (data.projects || [])
+                .filter((project) => !project.is_deleted)
+                .map((project) => ({
+                    id: project.id,
+                    name: project.name,
+                    childOrder: project.child_order ?? 0,
+                }))
+                .sort((a, b) => a.childOrder - b.childOrder)
+                .map(({ id, name }) => ({ id, name }))
+
+            if (Array.isArray(settings.todoistVisibleProjectIds)) {
+                const validProjectIds = new Set(
+                    todoistProjects.map((project) => String(project.id))
+                )
+                settings.todoistVisibleProjectIds =
+                    settings.todoistVisibleProjectIds.filter((id) =>
+                        validProjectIds.has(String(id))
+                    )
+            }
+        } catch (err) {
+            if (requestId !== todoistProjectsRequestId) return
+            todoistProjects = []
+            todoistProjectsError = 'failed to load projects'
+            console.error('todoist projects sync failed:', err)
+        } finally {
+            if (requestId === todoistProjectsRequestId) {
+                todoistProjectsLoading = false
+            }
+        }
+    }
+
+    function isTodoistProjectSelected(projectId) {
+        if (settings.todoistVisibleProjectIds === null) return true
+        const id = String(projectId)
+        return (settings.todoistVisibleProjectIds || []).some(
+            (selectedId) => String(selectedId) === id
+        )
+    }
+
+    function setTodoistProjectVisibility(projectId, visible) {
+        const id = String(projectId)
+        const allProjectIds = todoistProjects.map((project) =>
+            String(project.id)
+        )
+        const currentProjectIds =
+            settings.todoistVisibleProjectIds === null
+                ? allProjectIds
+                : (settings.todoistVisibleProjectIds || []).map((selectedId) =>
+                      String(selectedId)
+                  )
+
+        const nextProjectIds = new Set(currentProjectIds)
+        if (visible) {
+            nextProjectIds.add(id)
+        } else {
+            nextProjectIds.delete(id)
+        }
+
+        settings.todoistVisibleProjectIds = Array.from(nextProjectIds)
+    }
+
+    $effect(() => {
+        const shouldLoadTodoistProjects =
+            showSettings &&
+            settings.taskBackend === 'todoist' &&
+            Boolean(settings.todoistApiToken?.trim())
+
+        if (!shouldLoadTodoistProjects) {
+            todoistProjectsRequestId++
+            todoistProjects = []
+            todoistProjectsLoading = false
+            todoistProjectsError = ''
+            return
+        }
+
+        loadTodoistProjects(settings.todoistApiToken)
+    })
+
     let iconPickerOpen = $state(null)
     let iconPickerRef = $state(null)
 
@@ -456,6 +573,64 @@
                         bind:value={settings.todoistApiToken}
                     />
                 </div>
+
+                {#if settings.todoistApiToken?.trim()}
+                    <div class="group">
+                        <div class="setting-label">todoist projects</div>
+                        <div class="todoist-project-actions">
+                            <button
+                                class="button"
+                                onclick={() =>
+                                    (settings.todoistVisibleProjectIds = null)}
+                            >
+                                [show all]
+                            </button>
+                            <button
+                                class="button"
+                                onclick={() =>
+                                    (settings.todoistVisibleProjectIds = [])}
+                            >
+                                [show none]
+                            </button>
+                            <button
+                                class="button"
+                                onclick={() =>
+                                    loadTodoistProjects(
+                                        settings.todoistApiToken
+                                    )}
+                                disabled={todoistProjectsLoading}
+                            >
+                                [refresh]
+                            </button>
+                        </div>
+                        {#if todoistProjectsLoading}
+                            <div class="helper-text">loading projects...</div>
+                        {:else if todoistProjectsError}
+                            <div class="helper-text">
+                                {todoistProjectsError}
+                            </div>
+                        {:else if todoistProjects.length === 0}
+                            <div class="helper-text">no projects found</div>
+                        {:else}
+                            <div class="todoist-project-list">
+                                {#each todoistProjects as project}
+                                    <Checkbox
+                                        checked={isTodoistProjectSelected(
+                                            project.id
+                                        )}
+                                        onchange={(event) =>
+                                            setTodoistProjectVisibility(
+                                                project.id,
+                                                event.target.checked
+                                            )}
+                                    >
+                                        {project.name}
+                                    </Checkbox>
+                                {/each}
+                            </div>
+                        {/if}
+                    </div>
+                {/if}
             {/if}
 
             {#if settings.taskBackend === 'google-tasks'}
@@ -953,6 +1128,22 @@
         gap: 1rem;
         margin-bottom: 1rem;
     }
+    .todoist-project-actions {
+        display: flex;
+        gap: 1rem;
+        margin-bottom: 0.5rem;
+    }
+    .todoist-project-list {
+        display: grid;
+        gap: 0.25rem;
+        max-height: 12rem;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        scrollbar-color: var(--bg-3) var(--bg-1);
+    }
+    .helper-text {
+        color: var(--txt-3);
+    }
     .bracket {
         color: var(--txt-3);
     }
diff --git a/src/lib/components/Tasks.svelte b/src/lib/components/Tasks.svelte
index 1e321d4..156a387 100644
--- a/src/lib/components/Tasks.svelte
+++ b/src/lib/components/Tasks.svelte
@@ -22,7 +22,26 @@
     let initialLoad = $state(true)
     let previousToken = $state(null)
     let previousBackend = $state(null)
-    let taskCount = $derived(tasks.filter((task) => !task.checked).length)
+    let filteredTasks = $derived.by(() => {
+        if (settings.taskBackend !== 'todoist') {
+            return tasks
+        }
+
+        if (settings.todoistVisibleProjectIds === null) {
+            return tasks
+        }
+
+        const visibleProjectIds = new Set(
+            (settings.todoistVisibleProjectIds || []).map((id) => String(id))
+        )
+
+        return tasks.filter((task) =>
+            visibleProjectIds.has(String(task.project_id))
+        )
+    })
+    let taskCount = $derived(
+        filteredTasks.filter((task) => !task.checked).length
+    )
     let taskLabel = $derived(taskCount === 1 ? 'task' : 'tasks')
     let backendUrl = $derived.by(() => {
         if (settings.taskBackend === 'todoist')
@@ -209,6 +228,17 @@
                     id: p.id,
                     name: p.name,
                 }))
+
+                // Remove project IDs that no longer exist.
+                if (Array.isArray(settings.todoistVisibleProjectIds)) {
+                    const validProjectIds = new Set(
+                        availableProjects.map((project) => String(project.id))
+                    )
+                    settings.todoistVisibleProjectIds =
+                        settings.todoistVisibleProjectIds.filter((id) =>
+                            validProjectIds.has(String(id))
+                        )
+                }
             } else if (settings.taskBackend === 'google-tasks') {
                 availableProjects = (api.data?.tasklists || []).map((tl) => ({
                     id: tl.id,
@@ -432,7 +462,7 @@
                     {parsedProject}
                     disabled={addingTask}
                     loading={addingTask}
-                    show={tasks.length === 0}
+                    show={filteredTasks.length === 0}
                     onsubmit={addTask}
                 />
             </div>
@@ -440,7 +470,7 @@
             <br />
             <div class="tasks">
                 <div class="tasks-list">
-                    {#each tasks as task}
+                    {#each filteredTasks as task}
                         <div class="task" class:completed={task.checked}>
                             <button
                                 onclick={() =>
diff --git a/src/lib/components/ui/Checkbox.svelte b/src/lib/components/ui/Checkbox.svelte
index bc55814..672ba0c 100644
--- a/src/lib/components/ui/Checkbox.svelte
+++ b/src/lib/components/ui/Checkbox.svelte
@@ -1,9 +1,9 @@
 <script>
-    let { checked = $bindable(false), children } = $props()
+    let { checked = $bindable(false), children, onchange = undefined } = $props()
 </script>
 
 <label>
-    <input type="checkbox" bind:checked />
+    <input type="checkbox" bind:checked onchange={onchange} />
     <span class="checkbox-indicator">
         {#if checked}
             [<span class="checkbox-x">x</span>]
diff --git a/src/lib/stores/settings-store.svelte.js b/src/lib/stores/settings-store.svelte.js
index 477edbe..9b0f64a 100644
--- a/src/lib/stores/settings-store.svelte.js
+++ b/src/lib/stores/settings-store.svelte.js
@@ -27,6 +27,7 @@ let defaultSettings = {
     tabTitle: '~',
     taskBackend: 'local',
     todoistApiToken: '',
+    todoistVisibleProjectIds: null,
     googleTasksSignedIn: false,
     locationMode: 'manual',
     latitude: null,

From 2bafdf34d47992308e56762d7220050a3b235327 Mon Sep 17 00:00:00 2001
From: Cam Clarke <cameronlewisclarke2@gmail.com>
Date: Mon, 2 Mar 2026 14:30:03 +0000
Subject: [PATCH 2/2] Refactor theme initialization and integrate Google
 Calendar API support

- Removed inline theme initialization script from index.html and replaced it with an external theme-init.js file.
- Updated inject-theme-script.js to streamline theme handling.
- Added Google Calendar API integration with new Calendar component and associated settings in Settings.svelte.
- Introduced autosend functionality in Links.svelte for quick prompt submission to ChatGPT.
- Enhanced widget management in App.svelte to include calendar visibility and ordering.
- Updated manifest.json to include permissions for Google Calendar and ChatGPT URLs.
---
 index.html                              |  30 +-
 plugins/inject-theme-script.js          |  45 ---
 public/chatgpt-autosend.js              | 332 +++++++++++++++++
 public/manifest.json                    |  21 +-
 public/theme-init.js                    |  45 +++
 src/App.svelte                          | 130 ++++++-
 src/lib/api/google-calendar-api.js      | 227 ++++++++++++
 src/lib/api/weather-api.js              |   2 +
 src/lib/components/Calendar.svelte      | 216 +++++++++++
 src/lib/components/Links.svelte         | 148 ++++++++
 src/lib/components/Settings.svelte      | 468 +++++++++++++++++++++++-
 src/lib/components/Weather.svelte       | 390 +++++++++++++++++++-
 src/lib/components/WeatherIcon.svelte   | 271 ++++++++++++++
 src/lib/stores/settings-store.svelte.js |  46 +++
 14 files changed, 2272 insertions(+), 99 deletions(-)
 create mode 100644 public/chatgpt-autosend.js
 create mode 100644 public/theme-init.js
 create mode 100644 src/lib/api/google-calendar-api.js
 create mode 100644 src/lib/components/Calendar.svelte
 create mode 100644 src/lib/components/WeatherIcon.svelte

diff --git a/index.html b/index.html
index db58d79..3a45f82 100644
--- a/index.html
+++ b/index.html
@@ -5,35 +5,7 @@
         <link rel="icon" type="image/svg+xml" href="/icon.svg" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>~</title>
-        <script>
-            ;(function () {
-                const themes = __THEMES_DATA__
-                const defaultTheme = '__DEFAULT_THEME__'
-
-                try {
-                    const stored = localStorage.getItem('settings')
-                    let themeName = defaultTheme
-                    if (stored) {
-                        const parsed = JSON.parse(stored)
-                        if (
-                            parsed.currentTheme &&
-                            themes[parsed.currentTheme]
-                        ) {
-                            themeName = parsed.currentTheme
-                        }
-                    }
-
-                    const theme = themes[themeName]
-                    if (theme && theme.colors) {
-                        const colors = theme.colors
-                        const root = document.documentElement
-                        for (const key in colors) {
-                            root.style.setProperty(key, colors[key])
-                        }
-                    }
-                } catch (e) {}
-            })()
-        </script>
+        <script src="/theme-init.js"></script>
     </head>
     <body>
         <div id="app"></div>
diff --git a/plugins/inject-theme-script.js b/plugins/inject-theme-script.js
index e6d9fec..66b794d 100644
--- a/plugins/inject-theme-script.js
+++ b/plugins/inject-theme-script.js
@@ -9,54 +9,9 @@ export function injectThemeScript() {
                 'utf-8'
             )
 
-            const themesModule = fs.readFileSync(
-                './src/lib/config/themes.js',
-                'utf-8'
-            )
-            const defaultThemeMatch = themesModule.match(
-                /export const defaultTheme = ['"](.+?)['"]/
-            )
-
-            if (!defaultThemeMatch) {
-                console.error('Failed to extract default theme')
-                return html
-            }
-
-            const defaultTheme = defaultThemeMatch[1]
-
             const styleTag = `<style>${themesCSS}</style>`
 
-            const themeScript = `<script>
-            (function() {
-                const defaultTheme = '${defaultTheme}';
-                try {
-                    const stored = localStorage.getItem('settings');
-                    let themeName = defaultTheme;
-                    if (stored) {
-                        const parsed = JSON.parse(stored);
-                        if (parsed.currentTheme) {
-                            themeName = parsed.currentTheme;
-                        }
-                    }
-                    if (themeName === 'custom' && parsed && parsed.customThemeColors) {
-                        var c = parsed.customThemeColors;
-                        var s = document.createElement('style');
-                        s.id = 'custom-theme-vars';
-                        s.textContent = ':root.theme-custom { --bg-1:' + c.bg1 + '; --bg-2:' + c.bg2 + '; --bg-3:' + c.bg3 + '; --txt-1:' + c.txt1 + '; --txt-2:' + c.txt2 + '; --txt-3:' + c.txt3 + '; --txt-4:' + c.txt4 + '; --txt-err:' + c.txtErr + '; }';
-                        document.head.appendChild(s);
-                    }
-                    document.documentElement.className = 'theme-' + themeName;
-                } catch (e) {
-                    document.documentElement.className = 'theme-' + defaultTheme;
-                }
-            })();
-            </script>`
-
             return html
-                .replace(
-                    /<script>[\s\S]*?__THEMES_DATA__[\s\S]*?<\/script>/,
-                    themeScript
-                )
                 .replace('</head>', `${styleTag}\n</head>`)
         },
     }
diff --git a/public/chatgpt-autosend.js b/public/chatgpt-autosend.js
new file mode 100644
index 0000000..d8182cc
--- /dev/null
+++ b/public/chatgpt-autosend.js
@@ -0,0 +1,332 @@
+;(() => {
+    try {
+        const url = new URL(window.location.href)
+        const hashParams = new URLSearchParams(url.hash.replace(/^#/, ''))
+        const searchParams = new URLSearchParams(url.search)
+        const param = (key) => searchParams.get(key) ?? hashParams.get(key)
+
+        const shouldAutosend = param('restart_autosend') === '1'
+        const requestId = param('restart_request') || ''
+        const prompt = param('restart_prompt') || ''
+
+        if (!shouldAutosend || !requestId || !prompt.trim()) return
+
+        const normalizedPrompt = prompt.trim()
+        const handledKey = `restart-autosend:${requestId}`
+        const existingStatus = sessionStorage.getItem(handledKey)
+        if (existingStatus === 'started' || existingStatus === 'sent') {
+            cleanupUrl()
+            return
+        }
+        sessionStorage.setItem(handledKey, 'started')
+
+        let done = false
+        let sendAttempted = false
+        let fallbackUsed = false
+        let attempts = 0
+        const maxAttempts = 120
+        let intervalId = null
+        let observer = null
+
+        window.__restartAutosendState = {
+            active: true,
+            sent: false,
+            attempts: 0,
+            reason: 'starting',
+        }
+
+        function isVisible(element) {
+            if (!element) return false
+            return element.getClientRects().length > 0
+        }
+
+        function cleanupUrl() {
+            const nextUrl = new URL(window.location.href)
+            nextUrl.searchParams.delete('restart_autosend')
+            nextUrl.searchParams.delete('restart_request')
+            nextUrl.searchParams.delete('restart_prompt')
+
+            const nextHashParams = new URLSearchParams(
+                nextUrl.hash.replace(/^#/, '')
+            )
+            nextHashParams.delete('restart_autosend')
+            nextHashParams.delete('restart_request')
+            nextHashParams.delete('restart_prompt')
+            const nextHash = nextHashParams.toString()
+            nextUrl.hash = nextHash ? `#${nextHash}` : ''
+            history.replaceState({}, '', nextUrl.toString())
+        }
+
+        function findEditor() {
+            const selectors = [
+                'textarea#prompt-textarea',
+                'textarea[data-testid="prompt-textarea"]',
+                'textarea[placeholder*="Message"]',
+                '[contenteditable="true"][data-testid="prompt-textarea"]',
+                'div[contenteditable="true"][role="textbox"]',
+                'div.ProseMirror[contenteditable="true"]',
+            ]
+
+            for (const selector of selectors) {
+                const matches = document.querySelectorAll(selector)
+                for (const match of matches) {
+                    if (isVisible(match)) return match
+                }
+            }
+
+            return null
+        }
+
+        function findSendButton() {
+            const selectors = [
+                'button[data-testid="send-button"]',
+                'button[data-testid="fruitjuice-send-button"]',
+                'button[aria-label="Send prompt"]',
+                'button[aria-label*="Send"]',
+                'button[data-testid*="send"]',
+                'form button[type="submit"]',
+            ]
+
+            for (const selector of selectors) {
+                const matches = document.querySelectorAll(selector)
+                for (const button of matches) {
+                    const disabled =
+                        button.disabled ||
+                        button.getAttribute('aria-disabled') === 'true'
+                    if (!disabled && isVisible(button)) {
+                        return button
+                    }
+                }
+            }
+
+            return null
+        }
+
+        function findStopButton() {
+            return (
+                document.querySelector('button[data-testid="stop-button"]') ||
+                document.querySelector('button[aria-label*="Stop"]')
+            )
+        }
+
+        function setTextareaValue(textarea, text) {
+            const descriptor = Object.getOwnPropertyDescriptor(
+                window.HTMLTextAreaElement.prototype,
+                'value'
+            )
+            const setter = descriptor?.set
+            if (setter) {
+                setter.call(textarea, text)
+            } else {
+                textarea.value = text
+            }
+            textarea.dispatchEvent(new Event('input', { bubbles: true }))
+            textarea.dispatchEvent(new Event('change', { bubbles: true }))
+        }
+
+        function setContentEditableValue(editor, text) {
+            editor.focus()
+
+            const selection = window.getSelection()
+            if (selection) {
+                const range = document.createRange()
+                range.selectNodeContents(editor)
+                range.collapse(false)
+                selection.removeAllRanges()
+                selection.addRange(range)
+            }
+
+            // execCommand is deprecated, but still works in most extension contexts
+            // and is more compatible with React/ProseMirror editors.
+            const inserted = document.execCommand('insertText', false, text)
+            if (!inserted) {
+                editor.textContent = text
+            }
+
+            editor.dispatchEvent(
+                new InputEvent('input', {
+                    bubbles: true,
+                    data: text,
+                    inputType: 'insertText',
+                })
+            )
+        }
+
+        function setPrompt(editor, text) {
+            if (editor instanceof HTMLTextAreaElement) {
+                setTextareaValue(editor, text)
+                return
+            }
+
+            if (editor.getAttribute('contenteditable') === 'true') {
+                setContentEditableValue(editor, text)
+            }
+        }
+
+        function editorText(editor) {
+            if (!editor) return ''
+            if (editor instanceof HTMLTextAreaElement) {
+                return editor.value || ''
+            }
+            return editor.textContent || ''
+        }
+
+        function isDisabledButton(button) {
+            return (
+                !button ||
+                button.disabled ||
+                button.getAttribute('aria-disabled') === 'true'
+            )
+        }
+
+        function setState(reason, sent) {
+            window.__restartAutosendState = {
+                active: !done,
+                sent,
+                attempts,
+                reason,
+            }
+        }
+
+        function sendViaEnter(editor) {
+            editor.dispatchEvent(
+                new KeyboardEvent('keydown', {
+                    key: 'Enter',
+                    code: 'Enter',
+                    which: 13,
+                    keyCode: 13,
+                    bubbles: true,
+                    cancelable: true,
+                })
+            )
+            editor.dispatchEvent(
+                new KeyboardEvent('keypress', {
+                    key: 'Enter',
+                    code: 'Enter',
+                    which: 13,
+                    keyCode: 13,
+                    bubbles: true,
+                    cancelable: true,
+                })
+            )
+            editor.dispatchEvent(
+                new KeyboardEvent('keyup', {
+                    key: 'Enter',
+                    code: 'Enter',
+                    which: 13,
+                    keyCode: 13,
+                    bubbles: true,
+                    cancelable: true,
+                })
+            )
+        }
+
+        function stop(reason, sent) {
+            if (done) return
+            done = true
+            sessionStorage.setItem(handledKey, sent ? 'sent' : 'failed')
+            cleanupUrl()
+            if (intervalId) clearInterval(intervalId)
+            if (observer) observer.disconnect()
+            setState(reason, sent)
+        }
+
+        function sendOnce(editor, sendButton) {
+            sendAttempted = true
+            if (observer) observer.disconnect()
+            if (intervalId) clearInterval(intervalId)
+
+            setState('send-clicked', false)
+            sendButton.click()
+
+            setTimeout(() => {
+                if (done) return
+
+                const liveEditor = findEditor()
+                const textNow = editorText(liveEditor).trim()
+                const stopButton = findStopButton()
+
+                if (
+                    isVisible(stopButton) ||
+                    textNow === '' ||
+                    textNow !== normalizedPrompt
+                ) {
+                    stop('sent', true)
+                    return
+                }
+
+                if (!fallbackUsed && liveEditor) {
+                    fallbackUsed = true
+                    setState('fallback-enter', false)
+                    sendViaEnter(liveEditor)
+
+                    setTimeout(() => {
+                        if (done) return
+                        const liveEditor2 = findEditor()
+                        const textNow2 = editorText(liveEditor2).trim()
+                        const stopButton2 = findStopButton()
+                        if (
+                            isVisible(stopButton2) ||
+                            textNow2 === '' ||
+                            textNow2 !== normalizedPrompt
+                        ) {
+                            stop('sent', true)
+                            return
+                        }
+                        stop('failed-no-send', false)
+                    }, 700)
+                    return
+                }
+
+                stop('failed-no-send', false)
+            }, 650)
+        }
+
+        function trySend() {
+            if (done || sendAttempted) return false
+
+            const editor = findEditor()
+            if (!editor) {
+                setState('editor-not-found', false)
+                return false
+            }
+
+            setPrompt(editor, prompt)
+            editor.focus()
+            setState('prompt-inserted', false)
+
+            const sendButton = findSendButton()
+            if (!sendButton || isDisabledButton(sendButton)) {
+                setState('send-button-not-ready', false)
+                return false
+            }
+
+            sendOnce(editor, sendButton)
+            return true
+        }
+
+        intervalId = setInterval(() => {
+            if (done || sendAttempted) return
+            attempts += 1
+            setState('waiting', false)
+            window.__restartAutosendState.attempts = attempts
+            trySend()
+
+            if (!done && !sendAttempted && attempts >= maxAttempts) {
+                stop('timed-out', false)
+            }
+        }, 250)
+
+        observer = new MutationObserver(() => {
+            if (done || sendAttempted) return
+            trySend()
+        })
+
+        observer.observe(document.documentElement, {
+            childList: true,
+            subtree: true,
+        })
+    } catch (error) {
+        console.error('chatgpt autosend failed:', error)
+    }
+})()
diff --git a/public/manifest.json b/public/manifest.json
index b22a793..234baa5 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -10,9 +10,26 @@
         "homepage": "index.html"
     },
     "permissions": ["identity"],
+    "host_permissions": [
+        "https://chatgpt.com/*",
+        "https://chat.openai.com/*"
+    ],
+    "content_scripts": [
+        {
+            "matches": [
+                "https://chatgpt.com/*",
+                "https://chat.openai.com/*"
+            ],
+            "js": ["chatgpt-autosend.js"],
+            "run_at": "document_idle"
+        }
+    ],
     "oauth2": {
-        "client_id": "489393578728-r6p53q4oe7ngcm6r4kmtgbk17s2cgpk8.apps.googleusercontent.com",
-        "scopes": ["https://www.googleapis.com/auth/tasks"]
+        "client_id": "711643843065-v3kv0htpah386u1stn4p3tjt1t7o8g8e.apps.googleusercontent.com",
+        "scopes": [
+            "https://www.googleapis.com/auth/tasks",
+            "https://www.googleapis.com/auth/calendar.readonly"
+        ]
     },
     "browser_specific_settings": {
         "gecko": {
diff --git a/public/theme-init.js b/public/theme-init.js
new file mode 100644
index 0000000..101a167
--- /dev/null
+++ b/public/theme-init.js
@@ -0,0 +1,45 @@
+;(function () {
+    const defaultTheme = 'default'
+
+    try {
+        const stored = localStorage.getItem('settings')
+        let themeName = defaultTheme
+        let parsed = null
+
+        if (stored) {
+            parsed = JSON.parse(stored)
+            if (parsed?.currentTheme) {
+                themeName = parsed.currentTheme
+            }
+        }
+
+        if (themeName === 'custom' && parsed?.customThemeColors) {
+            const c = parsed.customThemeColors
+            const s = document.createElement('style')
+            s.id = 'custom-theme-vars'
+            s.textContent =
+                ':root.theme-custom { --bg-1:' +
+                c.bg1 +
+                '; --bg-2:' +
+                c.bg2 +
+                '; --bg-3:' +
+                c.bg3 +
+                '; --txt-1:' +
+                c.txt1 +
+                '; --txt-2:' +
+                c.txt2 +
+                '; --txt-3:' +
+                c.txt3 +
+                '; --txt-4:' +
+                c.txt4 +
+                '; --txt-err:' +
+                c.txtErr +
+                '; }'
+            document.head.appendChild(s)
+        }
+
+        document.documentElement.className = 'theme-' + themeName
+    } catch (e) {
+        document.documentElement.className = 'theme-' + defaultTheme
+    }
+})()
diff --git a/src/App.svelte b/src/App.svelte
index 2d3e7ee..92e422b 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,9 +1,15 @@
 <script>
+    import { onMount } from 'svelte'
     import '@fontsource-variable/geist-mono'
     import 'virtual:simple-icons.css'
-    import { settings } from './lib/stores/settings-store.svelte.js'
+    import {
+        settings,
+        MAIN_WIDGET_IDS,
+        normalizeMainWidgetOrder,
+    } from './lib/stores/settings-store.svelte.js'
     import { defaultTheme, defaultCustomColors } from './lib/config/themes.js'
     import Clock from './lib/components/Clock.svelte'
+    import Calendar from './lib/components/Calendar.svelte'
     import Links from './lib/components/Links.svelte'
     import Settings from './lib/components/Settings.svelte'
     import Stats from './lib/components/Stats.svelte'
@@ -13,9 +19,11 @@
     import { isChrome } from './lib/utils/browser-detect.js'
 
     let showSettings = $state(false)
+    let appReady = $state(false)
 
     // Check if Google Tasks is available (Chrome only)
     const googleTasksAvailable = isChrome()
+    const googleCalendarAvailable = isChrome()
 
     let needsConfiguration = $derived(
         (settings.locationMode === 'manual' &&
@@ -23,13 +31,65 @@
             (settings.taskBackend === 'todoist' && !settings.todoistApiToken) ||
             (settings.taskBackend === 'google-tasks' &&
                 googleTasksAvailable &&
-                !settings.googleTasksSignedIn)
+                !settings.googleTasksSignedIn) ||
+            (settings.showCalendar &&
+                googleCalendarAvailable &&
+                !settings.googleCalendarSignedIn)
     )
 
+    const widgetComponents = {
+        weather: Weather,
+        tasks: Tasks,
+        calendar: Calendar,
+    }
+
+    function isWidgetVisible(widgetId) {
+        switch (widgetId) {
+            case 'weather':
+                return settings.showWeather
+            case 'tasks':
+                return settings.showTasks
+            case 'calendar':
+                return googleCalendarAvailable && settings.showCalendar
+            default:
+                return false
+        }
+    }
+
+    let orderedVisibleWidgets = $derived.by(() => {
+        const normalizedOrder = normalizeMainWidgetOrder(settings.mainWidgetOrder)
+        const uniqueOrderedWidgets = []
+        const seen = new Set()
+
+        for (const widgetId of normalizedOrder) {
+            if (!MAIN_WIDGET_IDS.includes(widgetId) || seen.has(widgetId)) {
+                continue
+            }
+            seen.add(widgetId)
+            uniqueOrderedWidgets.push(widgetId)
+        }
+
+        return uniqueOrderedWidgets.filter((widgetId) => isWidgetVisible(widgetId))
+    })
+
     function closeSettings() {
         showSettings = false
     }
 
+    onMount(() => {
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            appReady = true
+            return
+        }
+
+        // Delay one paint so initial styles apply before the reveal transition.
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                appReady = true
+            })
+        })
+    })
+
     function applyTheme(themeName) {
         document.documentElement.className =
             'theme-' + (themeName || defaultTheme)
@@ -86,7 +146,7 @@
 </script>
 
 <main>
-    <div class="container">
+    <div class="container" class:ready={appReady}>
         {#if settings.showClock || settings.showStats}
             <div class="top">
                 {#if settings.showClock}
@@ -97,18 +157,18 @@
                 {/if}
             </div>
         {/if}
-        {#if settings.showWeather || settings.showTasks}
+        {#if orderedVisibleWidgets.length}
             <div class="widgets">
-                {#if settings.showWeather}
-                    <Weather class={!settings.showTasks ? 'expand' : ''} />
-                {/if}
-                {#if settings.showTasks}
-                    <Tasks />
-                {/if}
+                {#each orderedVisibleWidgets as widgetId (widgetId)}
+                    {@const WidgetComponent = widgetComponents[widgetId]}
+                    <WidgetComponent />
+                {/each}
             </div>
         {/if}
         {#if settings.showLinks}
-            <Links />
+            <div class="links">
+                <Links />
+            </div>
         {/if}
     </div>
 
@@ -137,12 +197,49 @@
         display: flex;
         flex-direction: column;
         gap: 1.5rem;
+        opacity: 0;
     }
     .top,
     .widgets {
         display: flex;
         gap: 1.5rem;
     }
+    .top,
+    .links {
+        opacity: 0;
+        transform: translate3d(0, 0.5rem, 0);
+    }
+    .widgets {
+        opacity: 0;
+    }
+    .container.ready {
+        opacity: 1;
+    }
+    .container.ready .top,
+    .container.ready .links {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+        transition:
+            opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
+            transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .container.ready .widgets {
+        opacity: 1;
+        transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .container.ready .top {
+        transition-delay: 30ms;
+    }
+    .container.ready .widgets {
+        transition-delay: 70ms;
+    }
+    .container.ready .links {
+        transition-delay: 110ms;
+    }
+    .widgets :global(.panel-wrapper) {
+        flex: 1 1 0;
+        min-width: 0;
+    }
     .settings-btn {
         position: fixed;
         top: 0;
@@ -163,4 +260,15 @@
         opacity: 1;
         animation: none;
     }
+
+    @media (prefers-reduced-motion: reduce) {
+        .container,
+        .top,
+        .widgets,
+        .links {
+            opacity: 1;
+            transform: none;
+            transition: none;
+        }
+    }
 </style>
diff --git a/src/lib/api/google-calendar-api.js b/src/lib/api/google-calendar-api.js
new file mode 100644
index 0000000..3ac85b4
--- /dev/null
+++ b/src/lib/api/google-calendar-api.js
@@ -0,0 +1,227 @@
+import { isChrome } from '../utils/browser-detect.js'
+
+class GoogleCalendarAPI {
+    constructor() {
+        this.scopes = ['https://www.googleapis.com/auth/calendar.readonly']
+        this.baseUrl = 'https://www.googleapis.com/calendar/v3'
+        this.accessToken = null
+        this.tokenPromise = null
+    }
+
+    async getAuthToken(interactive = false) {
+        if (!isChrome()) {
+            throw new Error(
+                'Chrome identity API not available. Google Calendar only works in Chrome.'
+            )
+        }
+
+        if (this.tokenPromise) {
+            return this.tokenPromise
+        }
+
+        this.tokenPromise = new Promise((resolve, reject) => {
+            chrome.identity.getAuthToken(
+                {
+                    interactive,
+                    scopes: this.scopes,
+                },
+                (token) => {
+                    if (chrome.runtime.lastError) {
+                        reject(new Error(chrome.runtime.lastError.message))
+                        return
+                    }
+
+                    if (!token) {
+                        reject(new Error('No token returned'))
+                        return
+                    }
+
+                    this.accessToken = token
+                    resolve(token)
+                }
+            )
+        })
+
+        try {
+            return await this.tokenPromise
+        } finally {
+            this.tokenPromise = null
+        }
+    }
+
+    async signIn() {
+        await this.getAuthToken(true)
+        return this.accessToken
+    }
+
+    async signOut() {
+        if (!isChrome()) return
+
+        let token = this.accessToken
+
+        if (!token) {
+            try {
+                token = await this.getAuthToken(false)
+            } catch {
+                token = null
+            }
+        }
+
+        if (token) {
+            await new Promise((resolve) => {
+                chrome.identity.removeCachedAuthToken({ token }, () => {
+                    resolve()
+                })
+            })
+        }
+
+        this.accessToken = null
+    }
+
+    async apiRequest(endpoint, options = {}, isRetry = false) {
+        const token = await this.getAuthToken(false)
+        const response = await fetch(`${this.baseUrl}${endpoint}`, {
+            ...options,
+            headers: {
+                Authorization: `Bearer ${token}`,
+                'Content-Type': 'application/json',
+                ...options.headers,
+            },
+        })
+
+        if (!response.ok) {
+            if (response.status === 401 && !isRetry) {
+                await new Promise((resolve) => {
+                    chrome.identity.removeCachedAuthToken({ token }, () =>
+                        resolve()
+                    )
+                })
+                this.accessToken = null
+                return this.apiRequest(endpoint, options, true)
+            }
+
+            if (response.status === 401) {
+                throw new Error(
+                    'Authentication expired. Please sign in again.'
+                )
+            }
+
+            throw new Error(
+                `Calendar API request failed: ${response.status} ${response.statusText}`
+            )
+        }
+
+        if (
+            response.status === 204 ||
+            response.headers.get('content-length') === '0'
+        ) {
+            return null
+        }
+
+        return response.json()
+    }
+
+    async getCalendars() {
+        const params = new URLSearchParams({
+            minAccessRole: 'reader',
+            showDeleted: 'false',
+            showHidden: 'false',
+            maxResults: '250',
+        })
+
+        const data = await this.apiRequest(`/users/me/calendarList?${params}`)
+
+        return (data?.items || [])
+            .filter((calendar) => !calendar.deleted)
+            .map((calendar) => ({
+                id: calendar.id,
+                name: calendar.summary || '(untitled calendar)',
+                primary: Boolean(calendar.primary),
+            }))
+            .sort((a, b) => {
+                if (a.primary !== b.primary) return a.primary ? -1 : 1
+                return a.name.localeCompare(b.name)
+            })
+    }
+
+    async getEventsForCalendar(calendar, maxResults, timeMin) {
+        const params = new URLSearchParams({
+            singleEvents: 'true',
+            orderBy: 'startTime',
+            maxResults: String(maxResults),
+            timeMin,
+        })
+
+        const data = await this.apiRequest(
+            `/calendars/${encodeURIComponent(calendar.id)}/events?${params.toString()}`
+        )
+
+        return (data?.items || [])
+            .filter((event) => event.status !== 'cancelled' && event.start)
+            .map((event) => {
+                const isAllDay = Boolean(
+                    event.start?.date && !event.start?.dateTime
+                )
+                const startRaw = event.start?.dateTime || event.start?.date
+                const endRaw = event.end?.dateTime || event.end?.date
+
+                const start = isAllDay
+                    ? new Date(`${startRaw}T00:00:00`)
+                    : new Date(startRaw)
+                const end = endRaw
+                    ? isAllDay
+                        ? new Date(`${endRaw}T00:00:00`)
+                        : new Date(endRaw)
+                    : null
+
+                return {
+                    id: event.id,
+                    title: event.summary || '(untitled)',
+                    location: event.location || '',
+                    link: event.htmlLink || '',
+                    allDay: isAllDay,
+                    calendarId: calendar.id,
+                    calendarName: calendar.name,
+                    calendarPrimary: calendar.primary,
+                    start,
+                    end,
+                }
+            })
+    }
+
+    async getUpcomingEvents(maxResults = 5, visibleCalendarIds = null) {
+        const safeMaxResults = Math.min(
+            20,
+            Math.max(1, parseInt(maxResults, 10) || 5)
+        )
+        const calendars = await this.getCalendars()
+        if (calendars.length === 0) return []
+
+        let selectedCalendars = calendars
+        if (Array.isArray(visibleCalendarIds)) {
+            const visibleSet = new Set(
+                visibleCalendarIds.map((calendarId) => String(calendarId))
+            )
+            selectedCalendars = calendars.filter((calendar) =>
+                visibleSet.has(String(calendar.id))
+            )
+        }
+
+        if (selectedCalendars.length === 0) return []
+
+        const perCalendarLimit = Math.max(10, safeMaxResults)
+        const timeMin = new Date().toISOString()
+        const eventArrays = await Promise.all(
+            selectedCalendars.map((calendar) =>
+                this.getEventsForCalendar(calendar, perCalendarLimit, timeMin)
+            )
+        )
+
+        return eventArrays
+            .flat()
+            .sort((a, b) => a.start.getTime() - b.start.getTime())
+            .slice(0, safeMaxResults)
+    }
+}
+
+export default GoogleCalendarAPI
diff --git a/src/lib/api/weather-api.js b/src/lib/api/weather-api.js
index 85d33cf..cd8885c 100644
--- a/src/lib/api/weather-api.js
+++ b/src/lib/api/weather-api.js
@@ -222,6 +222,7 @@ class WeatherAPI {
                 time: hourlyData.time[index],
                 temperature: hourlyData.temperature_2m[index].toFixed(0),
                 weatherCode: hourlyData.weather_code[index],
+                isDay: hourlyData.is_day[index] === 1,
                 description: this._getWeatherDescription(
                     hourlyData.weather_code[index],
                     hourlyData.is_day[index] === 1
@@ -249,6 +250,7 @@ class WeatherAPI {
                 temperatureMax: dailyData.temperature_2m_max[i].toFixed(0),
                 temperatureMin: dailyData.temperature_2m_min[i].toFixed(0),
                 weatherCode: dailyData.weather_code[i],
+                isDay: true,
                 description: this._getWeatherDescription(
                     dailyData.weather_code[i],
                     true
diff --git a/src/lib/components/Calendar.svelte b/src/lib/components/Calendar.svelte
new file mode 100644
index 0000000..8964c43
--- /dev/null
+++ b/src/lib/components/Calendar.svelte
@@ -0,0 +1,216 @@
+<script>
+    import { onMount, onDestroy, untrack } from 'svelte'
+    import { settings } from '../stores/settings-store.svelte.js'
+    import { isChrome } from '../utils/browser-detect.js'
+    import GoogleCalendarAPI from '../api/google-calendar-api.js'
+
+    let { class: className = '' } = $props()
+
+    let events = $state([])
+    let loading = $state(false)
+    let error = $state('')
+    let initialLoad = $state(true)
+    let noCalendarsSelected = $state(false)
+
+    const calendarApi = new GoogleCalendarAPI()
+
+    function clampMaxEvents(value) {
+        const parsed = parseInt(value, 10)
+        if (Number.isNaN(parsed)) return 5
+        return Math.min(20, Math.max(1, parsed))
+    }
+
+    function handleVisibilityChange() {
+        if (document.visibilityState === 'visible') {
+            loadEvents()
+        }
+    }
+
+    $effect(() => {
+        settings.googleCalendarSignedIn
+        settings.googleCalendarMaxEvents
+        settings.googleCalendarVisibleCalendarIds
+        settings.timeFormat
+
+        if (untrack(() => initialLoad)) {
+            initialLoad = false
+            return
+        }
+
+        loadEvents(true)
+    })
+
+    function formatEventDate(date, allDay) {
+        const now = new Date()
+        const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+        const tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000)
+        const eventDay = new Date(date.getFullYear(), date.getMonth(), date.getDate())
+
+        let dayLabel = eventDay
+            .toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+            .toLowerCase()
+
+        if (eventDay.getTime() === today.getTime()) dayLabel = 'today'
+        if (eventDay.getTime() === tomorrow.getTime()) dayLabel = 'tmrw'
+
+        if (allDay) {
+            return `${dayLabel} all day`
+        }
+
+        const use12Hour = settings.timeFormat === '12hr'
+        const timeLabel = date
+            .toLocaleTimeString('en-US', {
+                hour: 'numeric',
+                minute: '2-digit',
+                hour12: use12Hour,
+            })
+            .toLowerCase()
+
+        return `${dayLabel} ${timeLabel}`
+    }
+
+    export async function loadEvents(showLoading = false) {
+        if (!isChrome()) {
+            error = 'google calendar only works in chrome'
+            events = []
+            noCalendarsSelected = false
+            loading = false
+            return
+        }
+
+        if (!settings.googleCalendarSignedIn) {
+            error = 'not signed in to google calendar'
+            events = []
+            noCalendarsSelected = false
+            loading = false
+            return
+        }
+
+        if (
+            Array.isArray(settings.googleCalendarVisibleCalendarIds) &&
+            settings.googleCalendarVisibleCalendarIds.length === 0
+        ) {
+            error = ''
+            events = []
+            noCalendarsSelected = true
+            loading = false
+            return
+        }
+
+        if (showLoading) loading = true
+        error = ''
+        noCalendarsSelected = false
+
+        try {
+            const maxEvents = clampMaxEvents(settings.googleCalendarMaxEvents)
+            events = await calendarApi.getUpcomingEvents(
+                maxEvents,
+                settings.googleCalendarVisibleCalendarIds
+            )
+        } catch (err) {
+            if (err.message?.includes('Authentication expired')) {
+                settings.googleCalendarSignedIn = false
+                error = 'google sign in expired'
+            } else {
+                error = 'failed to load calendar'
+            }
+            console.error('calendar sync failed:', err)
+        } finally {
+            if (showLoading) loading = false
+        }
+    }
+
+    export function refreshCalendar() {
+        loadEvents(true)
+    }
+
+    onMount(() => {
+        loadEvents(true)
+        document.addEventListener('visibilitychange', handleVisibilityChange)
+    })
+
+    onDestroy(() => {
+        document.removeEventListener('visibilitychange', handleVisibilityChange)
+    })
+</script>
+
+<div class="panel-wrapper {className}">
+    <button class="widget-label" onclick={refreshCalendar} disabled={loading}>
+        {loading ? 'loading...' : 'calendar'}
+    </button>
+    <div class="panel">
+        {#if error}
+            <div class="error">{error}</div>
+        {:else if noCalendarsSelected}
+            <div class="dark">no calendars selected</div>
+        {:else if events.length === 0}
+            <div class="dark">no upcoming events</div>
+        {:else}
+            <div class="events">
+                {#each events as event}
+                    <div class="event">
+                        <div class="event-time">
+                            {formatEventDate(event.start, event.allDay)}
+                        </div>
+                        {#if event.link}
+                            <a
+                                class="event-title bright"
+                                href={event.link}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                {event.title}
+                            </a>
+                        {:else}
+                            <div class="event-title bright">{event.title}</div>
+                        {/if}
+                        {#if event.location}
+                            <div class="event-location">{event.location}</div>
+                        {/if}
+                        {#if !event.calendarPrimary}
+                            <div class="event-calendar">#{event.calendarName}</div>
+                        {/if}
+                    </div>
+                {/each}
+            </div>
+        {/if}
+    </div>
+</div>
+
+<style>
+    .panel-wrapper {
+        flex: 1;
+        min-width: 0;
+    }
+    .events {
+        display: grid;
+        gap: 0.5rem;
+        max-height: 15rem;
+        overflow: auto;
+        scrollbar-width: none;
+    }
+    .event {
+        min-width: 0;
+    }
+    .event-time {
+        color: var(--txt-3);
+    }
+    .event-title {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    .event-location {
+        color: var(--txt-3);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    .event-calendar {
+        color: var(--txt-3);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+</style>
diff --git a/src/lib/components/Links.svelte b/src/lib/components/Links.svelte
index 25f0d4b..855e148 100644
--- a/src/lib/components/Links.svelte
+++ b/src/lib/components/Links.svelte
@@ -1,7 +1,13 @@
 <script>
+    import { onDestroy, onMount } from 'svelte'
     import { settings } from '../stores/settings-store.svelte.js'
     import { isValidSlug } from '../utils/link-icons.js'
 
+    let launcherInput = $state('')
+    let launcherFeedback = $state('')
+    let launcherInputEl = $state(null)
+    let feedbackTimeoutId = null
+
     const columns = $derived.by(() => {
         const result = []
         const linksPerColumn = Math.max(
@@ -13,11 +19,121 @@
         }
         return result
     })
+
+    function showLauncherFeedback(message) {
+        launcherFeedback = message
+        if (feedbackTimeoutId) {
+            clearTimeout(feedbackTimeoutId)
+        }
+        feedbackTimeoutId = setTimeout(() => {
+            launcherFeedback = ''
+            feedbackTimeoutId = null
+        }, 2200)
+    }
+
+    function parseLauncherInput(rawInput) {
+        const input = rawInput.trim()
+        if (!input) {
+            return { error: 'use /c <prompt>' }
+        }
+
+        if (input === '/c') {
+            return { error: 'add a prompt after /c' }
+        }
+
+        if (!input.startsWith('/c ')) {
+            return { error: 'command format: /c <prompt>' }
+        }
+
+        const query = input.slice(3).trim()
+        if (!query) {
+            return { error: 'add a prompt after /c' }
+        }
+
+        return { query }
+    }
+
+    function buildChatGptUrl(query) {
+        const params = new URLSearchParams()
+        params.set('restart_autosend', '1')
+        params.set('restart_request', `${Date.now()}-${Math.random()}`)
+        params.set('restart_prompt', query)
+        return `https://chatgpt.com/#${params.toString()}`
+    }
+
+    function handleLauncherSubmit(event) {
+        event.preventDefault()
+        const parsed = parseLauncherInput(launcherInput)
+        if (parsed.error) {
+            showLauncherFeedback(parsed.error)
+            return
+        }
+
+        const url = buildChatGptUrl(parsed.query)
+        const popup = window.open(url, '_blank', 'noopener,noreferrer')
+
+        if (!popup) {
+            showLauncherFeedback('popup blocked: allow popups for this page')
+            return
+        }
+
+        showLauncherFeedback('opened ChatGPT and auto-sent')
+        launcherInput = ''
+    }
+
+    function focusLauncherInput() {
+        launcherInputEl?.focus()
+        launcherInputEl?.select()
+    }
+
+    function handleGlobalKeydown(event) {
+        if (!(event.ctrlKey || event.metaKey)) return
+        if (event.key.toLowerCase() !== 'k') return
+
+        const activeElement = document.activeElement
+        const isTypingTarget =
+            activeElement?.tagName === 'INPUT' ||
+            activeElement?.tagName === 'TEXTAREA' ||
+            (activeElement instanceof HTMLElement &&
+                activeElement.isContentEditable)
+
+        if (isTypingTarget) return
+        event.preventDefault()
+        focusLauncherInput()
+    }
+
+    onMount(() => {
+        document.addEventListener('keydown', handleGlobalKeydown)
+    })
+
+    onDestroy(() => {
+        document.removeEventListener('keydown', handleGlobalKeydown)
+        if (feedbackTimeoutId) {
+            clearTimeout(feedbackTimeoutId)
+            feedbackTimeoutId = null
+        }
+    })
 </script>
 
 <div class="panel-wrapper">
     <div class="panel-label">links</div>
     <div class="panel">
+        <form class="launcher" onsubmit={handleLauncherSubmit}>
+            <span class="launcher-prefix">&gt;</span>
+            <input
+                bind:this={launcherInputEl}
+                bind:value={launcherInput}
+                class="launcher-input"
+                type="text"
+                placeholder="/c your prompt here... (ctrl+k focus)"
+                aria-label="ChatGPT command launcher"
+            />
+            <button type="submit" class="launcher-open">open</button>
+        </form>
+        {#if launcherFeedback}
+            <div class="launcher-feedback">{launcherFeedback}</div>
+        {/if}
+        <br />
         {#each columns as column}
             <div
                 class="column"
@@ -47,8 +163,40 @@
 <style>
     .panel {
         display: flex;
+        flex-wrap: wrap;
         gap: 1.5rem;
     }
+    .launcher {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+    .launcher-prefix {
+        color: var(--txt-3);
+    }
+    .launcher-input {
+        flex: 1;
+        min-width: 0;
+        background: var(--bg-2);
+        border: 2px solid var(--bg-3);
+        padding: 0.25rem 0.5rem;
+    }
+    .launcher-input:focus {
+        border-color: var(--txt-3);
+    }
+    .launcher-input::placeholder {
+        color: var(--txt-4);
+    }
+    .launcher-open {
+        color: var(--txt-2);
+    }
+    .launcher-feedback {
+        width: 100%;
+        color: var(--txt-3);
+        margin-top: -1rem;
+        margin-bottom: -0.25rem;
+    }
     .link:hover .prefix,
     .link:hover .icon {
         color: var(--txt-2);
diff --git a/src/lib/components/Settings.svelte b/src/lib/components/Settings.svelte
index 2f5aeb9..c679bf2 100644
--- a/src/lib/components/Settings.svelte
+++ b/src/lib/components/Settings.svelte
@@ -5,6 +5,7 @@
         saveSettings,
         settings,
         resetSettings,
+        normalizeMainWidgetOrder,
     } from '../stores/settings-store.svelte.js'
     import {
         themeNames,
@@ -14,6 +15,7 @@
     import RadioButton from './ui/RadioButton.svelte'
     import Checkbox from './ui/Checkbox.svelte'
     import { createTaskBackend } from '../backends/index.js'
+    import GoogleCalendarAPI from '../api/google-calendar-api.js'
     import { isChrome } from '../utils/browser-detect.js'
     import { guessIconSlug, isValidSlug, extractDomain } from '../utils/link-icons.js'
     import IconPicker from './IconPicker.svelte'
@@ -23,6 +25,7 @@
 
     // Check if Google Tasks is available (Chrome only)
     const googleTasksAvailable = isChrome()
+    const googleCalendarAvailable = isChrome()
 
     // @ts-ignore
     const version = __APP_VERSION__
@@ -30,10 +33,24 @@
     let googleTasksApi = $state(null)
     let signingIn = $state(false)
     let signInError = $state('')
+    let googleCalendarApi = $state(null)
+    let calendarSigningIn = $state(false)
+    let calendarSignInError = $state('')
+    let googleCalendars = $state([])
+    let googleCalendarsLoading = $state(false)
+    let googleCalendarsError = $state('')
+    let googleCalendarsRequestId = 0
     let todoistProjects = $state([])
     let todoistProjectsLoading = $state(false)
     let todoistProjectsError = $state('')
     let todoistProjectsRequestId = 0
+    const widgetLabels = {
+        weather: 'weather',
+        tasks: 'tasks',
+        calendar: 'calendar',
+    }
+
+    let widgetReorderMode = $state(false)
 
     function googleSignInLabel() {
         if (settings.googleTasksSignedIn) return 'sign out'
@@ -78,6 +95,118 @@
         }
     }
 
+    function googleCalendarSignInLabel() {
+        if (settings.googleCalendarSignedIn) return 'sign out'
+        if (calendarSignInError) return calendarSignInError
+        if (calendarSigningIn) return 'signing in...'
+        return 'sign in with google'
+    }
+
+    function ensureGoogleCalendarApi() {
+        if (!googleCalendarApi) {
+            googleCalendarApi = new GoogleCalendarAPI()
+        }
+        return googleCalendarApi
+    }
+
+    async function handleGoogleCalendarSignIn() {
+        try {
+            calendarSigningIn = true
+            calendarSignInError = ''
+            await ensureGoogleCalendarApi().signIn()
+            settings.googleCalendarSignedIn = true
+            saveSettings(settings)
+        } catch (err) {
+            console.error('google calendar sign in failed:', err)
+            calendarSignInError = 'sign in failed'
+            settings.googleCalendarSignedIn = false
+        } finally {
+            calendarSigningIn = false
+        }
+    }
+
+    async function handleGoogleCalendarSignOut() {
+        try {
+            await ensureGoogleCalendarApi().signOut()
+            settings.googleCalendarSignedIn = false
+            saveSettings(settings)
+            calendarSignInError = ''
+        } catch (err) {
+            console.error('google calendar sign out failed:', err)
+        }
+    }
+
+    async function loadGoogleCalendars() {
+        const requestId = ++googleCalendarsRequestId
+
+        if (!settings.googleCalendarSignedIn) {
+            googleCalendars = []
+            googleCalendarsLoading = false
+            googleCalendarsError = ''
+            return
+        }
+
+        googleCalendarsLoading = true
+        googleCalendarsError = ''
+
+        try {
+            const calendars = await ensureGoogleCalendarApi().getCalendars()
+            if (requestId !== googleCalendarsRequestId) return
+
+            googleCalendars = calendars
+
+            if (Array.isArray(settings.googleCalendarVisibleCalendarIds)) {
+                const validCalendarIds = new Set(
+                    googleCalendars.map((calendar) => String(calendar.id))
+                )
+                settings.googleCalendarVisibleCalendarIds =
+                    settings.googleCalendarVisibleCalendarIds.filter(
+                        (calendarId) =>
+                            validCalendarIds.has(String(calendarId))
+                    )
+            }
+        } catch (err) {
+            if (requestId !== googleCalendarsRequestId) return
+            googleCalendars = []
+            googleCalendarsError = 'failed to load calendars'
+            console.error('google calendar list load failed:', err)
+        } finally {
+            if (requestId === googleCalendarsRequestId) {
+                googleCalendarsLoading = false
+            }
+        }
+    }
+
+    function isGoogleCalendarSelected(calendarId) {
+        if (settings.googleCalendarVisibleCalendarIds === null) return true
+        const id = String(calendarId)
+        return (settings.googleCalendarVisibleCalendarIds || []).some(
+            (selectedId) => String(selectedId) === id
+        )
+    }
+
+    function setGoogleCalendarVisibility(calendarId, visible) {
+        const id = String(calendarId)
+        const allCalendarIds = googleCalendars.map((calendar) =>
+            String(calendar.id)
+        )
+        const currentCalendarIds =
+            settings.googleCalendarVisibleCalendarIds === null
+                ? allCalendarIds
+                : (settings.googleCalendarVisibleCalendarIds || []).map(
+                      (selectedId) => String(selectedId)
+                  )
+
+        const nextCalendarIds = new Set(currentCalendarIds)
+        if (visible) {
+            nextCalendarIds.add(id)
+        } else {
+            nextCalendarIds.delete(id)
+        }
+
+        settings.googleCalendarVisibleCalendarIds = Array.from(nextCalendarIds)
+    }
+
     async function loadTodoistProjects(token) {
         const trimmedToken = token?.trim()
         if (!trimmedToken) {
@@ -191,6 +320,27 @@
         loadTodoistProjects(settings.todoistApiToken)
     })
 
+    $effect(() => {
+        const shouldLoadGoogleCalendars =
+            showSettings &&
+            googleCalendarAvailable &&
+            settings.googleCalendarSignedIn
+
+        if (!shouldLoadGoogleCalendars) {
+            googleCalendarsRequestId++
+            googleCalendars = []
+            googleCalendarsLoading = false
+            googleCalendarsError = ''
+            return
+        }
+
+        loadGoogleCalendars()
+    })
+
+    $effect(() => {
+        ensureMainWidgetOrder()
+    })
+
     let iconPickerOpen = $state(null)
     let iconPickerRef = $state(null)
 
@@ -228,6 +378,9 @@
 
     function handleClose() {
         saveSettings(settings)
+        widgetReorderMode = false
+        draggedWidgetIndex = null
+        widgetDropSlotIndex = null
         closeSettings()
     }
 
@@ -299,10 +452,104 @@
         { key: 'txtErr', label: 'error' },
     ]
 
+    function arraysEqual(a, b) {
+        if (a.length !== b.length) return false
+        return a.every((value, index) => value === b[index])
+    }
+
+    function getWidgetOrderForEditor(order) {
+        const normalized = normalizeMainWidgetOrder(order)
+        if (googleCalendarAvailable) return normalized
+        return normalized.filter((widgetId) => widgetId !== 'calendar')
+    }
+
+    function ensureMainWidgetOrder() {
+        const normalized = normalizeMainWidgetOrder(settings.mainWidgetOrder)
+        if (!arraysEqual(normalized, settings.mainWidgetOrder || [])) {
+            settings.mainWidgetOrder = normalized
+        }
+    }
+
+    function isWidgetShown(widgetId) {
+        switch (widgetId) {
+            case 'weather':
+                return settings.showWeather
+            case 'tasks':
+                return settings.showTasks
+            case 'calendar':
+                return googleCalendarAvailable && settings.showCalendar
+            default:
+                return false
+        }
+    }
+
+    function toggleWidgetReorderMode() {
+        widgetReorderMode = !widgetReorderMode
+        if (widgetReorderMode) {
+            ensureMainWidgetOrder()
+        } else {
+            draggedWidgetIndex = null
+            widgetDropSlotIndex = null
+        }
+    }
+
+    function reorderMainWidgets(slotIndex) {
+        ensureMainWidgetOrder()
+
+        const visibleOrder = getWidgetOrderForEditor(settings.mainWidgetOrder)
+        if (draggedWidgetIndex === null || draggedWidgetIndex >= visibleOrder.length) {
+            return
+        }
+
+        if (
+            slotIndex === draggedWidgetIndex ||
+            slotIndex === draggedWidgetIndex + 1
+        ) {
+            return
+        }
+
+        const nextVisibleOrder = [...visibleOrder]
+        const draggedItem = nextVisibleOrder[draggedWidgetIndex]
+        nextVisibleOrder.splice(draggedWidgetIndex, 1)
+        const adjustedSlotIndex =
+            draggedWidgetIndex < slotIndex ? slotIndex - 1 : slotIndex
+        nextVisibleOrder.splice(adjustedSlotIndex, 0, draggedItem)
+
+        if (googleCalendarAvailable) {
+            settings.mainWidgetOrder = nextVisibleOrder
+            return
+        }
+
+        const normalizedOrder = normalizeMainWidgetOrder(settings.mainWidgetOrder)
+        const calendarIndex = normalizedOrder.indexOf('calendar')
+        const orderWithoutCalendar = normalizedOrder.filter(
+            (widgetId) => widgetId !== 'calendar'
+        )
+
+        if (!arraysEqual(orderWithoutCalendar, nextVisibleOrder)) {
+            let insertAt = nextVisibleOrder.length
+            if (calendarIndex >= 0 && calendarIndex < normalizedOrder.length - 1) {
+                const nextWidgetAfterCalendar = normalizedOrder[calendarIndex + 1]
+                const nextIndex = nextVisibleOrder.indexOf(nextWidgetAfterCalendar)
+                if (nextIndex >= 0) {
+                    insertAt = nextIndex
+                }
+            }
+
+            nextVisibleOrder.splice(insertAt, 0, 'calendar')
+        }
+
+        settings.mainWidgetOrder = normalizeMainWidgetOrder(nextVisibleOrder)
+    }
+
     // Drag and drop state
     let draggedIndex = $state(null)
     let dropSlotIndex = $state(null) // Which slot (between items) to drop into
 
+    // Main widget reorder state
+    let draggedWidgetIndex = $state(null)
+    let widgetDropSlotIndex = $state(null)
+
     function handleDragStart(event, index) {
         draggedIndex = index
         event.dataTransfer.effectAllowed = 'move'
@@ -357,6 +604,34 @@
         dropSlotIndex = null
     }
 
+    function handleWidgetDragStart(event, index) {
+        draggedWidgetIndex = index
+        event.dataTransfer.effectAllowed = 'move'
+        event.dataTransfer.setData('text/plain', String(index))
+    }
+
+    function handleWidgetDropZoneDragOver(event, slotIndex) {
+        event.preventDefault()
+        event.dataTransfer.dropEffect = 'move'
+        widgetDropSlotIndex = slotIndex
+    }
+
+    function handleWidgetDropZoneDragLeave() {
+        widgetDropSlotIndex = null
+    }
+
+    function handleWidgetDropZoneDrop(event, slotIndex) {
+        event.preventDefault()
+        reorderMainWidgets(slotIndex)
+        draggedWidgetIndex = null
+        widgetDropSlotIndex = null
+    }
+
+    function handleWidgetDragEnd() {
+        draggedWidgetIndex = null
+        widgetDropSlotIndex = null
+    }
+
     let locationLoading = $state(false)
     let locationError = $state(null)
     let locationErrorTimeout = null
@@ -439,7 +714,12 @@
 
         <div class="content">
             <div class="group">
-                <div class="setting-label">widgets</div>
+                <div class="widgets-header">
+                    <div class="setting-label">widgets</div>
+                    <button class="add-btn" type="button" onclick={toggleWidgetReorderMode}>
+                        {widgetReorderMode ? 'done reordering' : 'reorder widgets'}
+                    </button>
+                </div>
                 <div class="checkbox-group">
                     <Checkbox bind:checked={settings.showClock}>clock</Checkbox>
                     <Checkbox bind:checked={settings.showStats}>stats</Checkbox>
@@ -447,8 +727,69 @@
                         >weather</Checkbox
                     >
                     <Checkbox bind:checked={settings.showTasks}>tasks</Checkbox>
+                    {#if googleCalendarAvailable}
+                        <Checkbox bind:checked={settings.showCalendar}
+                            >calendar</Checkbox
+                        >
+                    {/if}
                     <Checkbox bind:checked={settings.showLinks}>links</Checkbox>
                 </div>
+                {#if widgetReorderMode}
+                    {@const widgetEditorOrder = getWidgetOrderForEditor(settings.mainWidgetOrder)}
+                    <div class="helper-text top-gap">
+                        drag to reorder the main widget row
+                    </div>
+                    <div class="widget-order-list">
+                        {#each widgetEditorOrder as widgetId, index}
+                            <div
+                                class="drop-zone"
+                                class:active={widgetDropSlotIndex === index}
+                                ondragover={(e) => handleWidgetDropZoneDragOver(e, index)}
+                                ondragleave={handleWidgetDropZoneDragLeave}
+                                ondrop={(e) => handleWidgetDropZoneDrop(e, index)}
+                                role="none"
+                            ></div>
+                            <div
+                                class="widget-order-item"
+                                class:dragging={draggedWidgetIndex === index}
+                                role="listitem"
+                            >
+                                <span
+                                    class="drag-handle"
+                                    title="Drag to reorder"
+                                    draggable="true"
+                                    ondragstart={(e) => handleWidgetDragStart(e, index)}
+                                    ondragend={handleWidgetDragEnd}
+                                    role="button"
+                                    tabindex="0">=</span
+                                >
+                                <span class="widget-order-name">{widgetLabels[widgetId]}</span>
+                                <span
+                                    class="widget-order-state"
+                                    class:active={isWidgetShown(widgetId)}
+                                >
+                                    {isWidgetShown(widgetId) ? 'shown' : 'hidden'}
+                                </span>
+                            </div>
+                        {/each}
+                        <div
+                            class="drop-zone"
+                            class:active={widgetDropSlotIndex === widgetEditorOrder.length}
+                            ondragover={(e) =>
+                                handleWidgetDropZoneDragOver(
+                                    e,
+                                    widgetEditorOrder.length
+                                )}
+                            ondragleave={handleWidgetDropZoneDragLeave}
+                            ondrop={(e) =>
+                                handleWidgetDropZoneDrop(
+                                    e,
+                                    widgetEditorOrder.length
+                                )}
+                            role="none"
+                        ></div>
+                    </div>
+                {/if}
             </div>
             <div class="group">
                 <div class="setting-label">theme</div>
@@ -648,6 +989,90 @@
                 </div>
             {/if}
 
+            {#if googleCalendarAvailable}
+                <div class="group">
+                    <div class="setting-label">google calendar authentication</div>
+                    <button
+                        class="button"
+                        onclick={settings.googleCalendarSignedIn
+                            ? handleGoogleCalendarSignOut
+                            : handleGoogleCalendarSignIn}
+                        disabled={calendarSigningIn}
+                    >
+                        [{googleCalendarSignInLabel()}]
+                    </button>
+                </div>
+                <div class="group">
+                    <label for="google-calendar-max-events"
+                        >max calendar events</label
+                    >
+                    <input
+                        id="google-calendar-max-events"
+                        type="number"
+                        bind:value={settings.googleCalendarMaxEvents}
+                        min="1"
+                        max="20"
+                        step="1"
+                    />
+                </div>
+
+                {#if settings.googleCalendarSignedIn}
+                    <div class="group">
+                        <div class="setting-label">google calendars</div>
+                        <div class="todoist-project-actions">
+                            <button
+                                class="button"
+                                onclick={() =>
+                                    (settings.googleCalendarVisibleCalendarIds =
+                                        null)}
+                            >
+                                [show all]
+                            </button>
+                            <button
+                                class="button"
+                                onclick={() =>
+                                    (settings.googleCalendarVisibleCalendarIds =
+                                        [])}
+                            >
+                                [show none]
+                            </button>
+                            <button
+                                class="button"
+                                onclick={loadGoogleCalendars}
+                                disabled={googleCalendarsLoading}
+                            >
+                                [refresh]
+                            </button>
+                        </div>
+                        {#if googleCalendarsLoading}
+                            <div class="helper-text">loading calendars...</div>
+                        {:else if googleCalendarsError}
+                            <div class="helper-text">{googleCalendarsError}</div>
+                        {:else if googleCalendars.length === 0}
+                            <div class="helper-text">no calendars found</div>
+                        {:else}
+                            <div class="todoist-project-list">
+                                {#each googleCalendars as calendar}
+                                    <Checkbox
+                                        checked={isGoogleCalendarSelected(
+                                            calendar.id
+                                        )}
+                                        onchange={(event) =>
+                                            setGoogleCalendarVisibility(
+                                                calendar.id,
+                                                event.target.checked
+                                            )}
+                                    >
+                                        {calendar.name}
+                                        {calendar.primary ? ' (primary)' : ''}
+                                    </Checkbox>
+                                {/each}
+                            </div>
+                        {/if}
+                    </div>
+                {/if}
+            {/if}
+
             <div class="group">
                 <div class="setting-label">weather forecast</div>
                 <div class="radio-group">
@@ -1014,12 +1439,24 @@
         flex: 1;
         margin-bottom: 1.5rem;
     }
+    .top-gap {
+        margin-top: 0.5rem;
+    }
     .group > label,
     .col > label,
     .setting-label {
         display: block;
         margin-bottom: 0.5rem;
     }
+    .widgets-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .setting-label {
+            margin: 0;
+        }
+    }
     .group input[type='text'],
     .group input[type='password'],
     .group input[type='number'],
@@ -1074,6 +1511,35 @@
         height: 2px;
         background-color: var(--txt-2);
     }
+    .widget-order-list {
+        display: flex;
+        flex-direction: column;
+        margin-top: 0.5rem;
+        border: 2px solid var(--bg-3);
+        background: var(--bg-2);
+        padding: 0.25rem 0.5rem;
+    }
+    .widget-order-item {
+        display: flex;
+        align-items: center;
+        min-height: 2rem;
+        gap: 0.25rem;
+    }
+    .widget-order-item.dragging {
+        opacity: 0.5;
+    }
+    .widget-order-name {
+        color: var(--txt-2);
+        flex: 1;
+    }
+    .widget-order-state {
+        color: var(--txt-3);
+        font-size: 0.75rem;
+        text-transform: uppercase;
+    }
+    .widget-order-state.active {
+        color: var(--txt-2);
+    }
     .link {
         display: flex;
         align-items: center;
diff --git a/src/lib/components/Weather.svelte b/src/lib/components/Weather.svelte
index 9369530..3dc1f50 100644
--- a/src/lib/components/Weather.svelte
+++ b/src/lib/components/Weather.svelte
@@ -1,6 +1,7 @@
 <script>
     import { onMount, onDestroy, untrack } from 'svelte'
     import WeatherAPI from '../api/weather-api.js'
+    import WeatherIcon from './WeatherIcon.svelte'
     import { settings } from '../stores/settings-store.svelte.js'
 
     let { class: className = '' } = $props()
@@ -11,8 +12,63 @@
     let error = $state(null)
     let initialLoad = $state(true)
     let prevForecastMode = $state(settings.forecastMode)
+    let radarTimeline = $state([])
+    let radarLoading = $state(false)
+    let radarError = $state('')
+    let radarPeakProbability = $state(0)
+    let radarTotalPrecipitation = $state('0.0')
+    let radarNextRainLabel = $state('none')
 
     const weatherAPI = new WeatherAPI()
+    const radarApiUrl = 'https://api.open-meteo.com/v1/forecast'
+    const radarCacheKey = 'weather_radar_data'
+    const radarCacheExpiry = 5 * 60 * 1000
+    const radarSlotCount = 24 // 6 hours at 15-minute resolution
+    const thunderCodes = new Set([95, 96, 99])
+    const snowHeavyCodes = new Set([75, 77])
+    const snowCodes = new Set([71, 73, 75, 77, 85, 86])
+    const rainHeavyCodes = new Set([65, 67, 82])
+    const rainCodes = new Set([
+        51, 53, 55, 56, 57, 61, 63, 65, 66, 67, 80, 81, 82,
+    ])
+    const fogCodes = new Set([45, 48])
+    const mostlyClearCodes = new Set([0, 1])
+    const cloudCodes = new Set([2, 3])
+
+    function getWeatherIconName(weatherCode, isDay = true, windSpeed = 0) {
+        const code = Number(weatherCode)
+        const wind = Number(windSpeed) || 0
+
+        if (thunderCodes.has(code)) return 'cloud-lightning'
+        if (snowHeavyCodes.has(code)) return 'snowflake'
+        if (snowCodes.has(code)) return 'cloud-snow'
+        if (rainHeavyCodes.has(code) || (rainCodes.has(code) && wind >= 18)) {
+            return 'cloud-rain-wind'
+        }
+        if (rainCodes.has(code)) return 'cloud-rain'
+        if (fogCodes.has(code) || wind >= 28) return 'wind'
+        if (mostlyClearCodes.has(code)) return isDay ? 'sun' : 'sunset'
+        if (cloudCodes.has(code)) return 'cloud-sun'
+
+        return 'cloud-sun'
+    }
+
+    function getCurrentIconName() {
+        if (!current) return 'cloud-sun'
+        return getWeatherIconName(
+            current.weather_code,
+            current.is_day === 1,
+            current.wind_speed_10m
+        )
+    }
+
+    function getForecastIconName(forecastItem) {
+        return getWeatherIconName(
+            forecastItem.weatherCode,
+            forecastItem.isDay !== false,
+            0
+        )
+    }
 
     function handleVisibilityChange() {
         if (document.visibilityState === 'visible') {
@@ -20,6 +76,200 @@
         }
     }
 
+    function formatRadarTime(timeString) {
+        const date = new Date(timeString)
+        if (settings.timeFormat === '12hr') {
+            return date
+                .toLocaleTimeString('en-US', {
+                    hour: 'numeric',
+                    minute: '2-digit',
+                    hour12: true,
+                })
+                .toLowerCase()
+        }
+
+        return date.toLocaleTimeString('en-US', {
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false,
+        })
+    }
+
+    function coordinatesChanged(oldLat, oldLon, newLat, newLon) {
+        const threshold = 0.1
+        return (
+            Math.abs(oldLat - newLat) > threshold ||
+            Math.abs(oldLon - newLon) > threshold
+        )
+    }
+
+    function clearRadarCache() {
+        localStorage.removeItem(radarCacheKey)
+    }
+
+    function getCachedRadar(latitude = null, longitude = null) {
+        try {
+            const cached = localStorage.getItem(radarCacheKey)
+            if (!cached) return { data: null, isStale: false }
+
+            const {
+                data,
+                timestamp,
+                latitude: cachedLat,
+                longitude: cachedLon,
+            } = JSON.parse(cached)
+
+            if (
+                latitude != null &&
+                longitude != null &&
+                cachedLat != null &&
+                cachedLon != null &&
+                coordinatesChanged(cachedLat, cachedLon, latitude, longitude)
+            ) {
+                clearRadarCache()
+                return { data: null, isStale: false }
+            }
+
+            const isStale = Date.now() - timestamp >= radarCacheExpiry
+            return { data, isStale }
+        } catch (cacheError) {
+            console.error('failed to read weather radar cache:', cacheError)
+            clearRadarCache()
+            return { data: null, isStale: false }
+        }
+    }
+
+    function cacheRadar(data, latitude, longitude) {
+        localStorage.setItem(
+            radarCacheKey,
+            JSON.stringify({
+                data,
+                timestamp: Date.now(),
+                latitude,
+                longitude,
+            })
+        )
+    }
+
+    function updateRadarSummary(points) {
+        if (points.length === 0) {
+            radarPeakProbability = 0
+            radarTotalPrecipitation = '0.0'
+            radarNextRainLabel = 'none'
+            return
+        }
+
+        radarPeakProbability = points.reduce(
+            (max, point) => Math.max(max, point.probability),
+            0
+        )
+
+        radarTotalPrecipitation = points
+            .reduce((sum, point) => sum + point.precipitation, 0)
+            .toFixed(1)
+
+        const nextRainPoint = points.find(
+            (point) => point.precipitation >= 0.1 || point.probability >= 35
+        )
+        radarNextRainLabel = nextRainPoint ? nextRainPoint.label : 'none'
+    }
+
+    function processRadarData(minutely) {
+        if (!minutely || !Array.isArray(minutely.time)) {
+            return []
+        }
+
+        const points = []
+        const count = Math.min(radarSlotCount, minutely.time.length)
+
+        for (let i = 0; i < count; i++) {
+            const precipitation = Number(minutely.precipitation?.[i] ?? 0)
+            const probability = Number(
+                minutely.precipitation_probability?.[i] ?? 0
+            )
+            const intensityScore = precipitation * 20 + probability / 9
+
+            points.push({
+                label: formatRadarTime(minutely.time[i]),
+                precipitation,
+                probability,
+                intensityScore,
+            })
+        }
+
+        const peakIntensity = points.reduce(
+            (max, point) => Math.max(max, point.intensityScore),
+            0
+        )
+
+        return points.map((point) => {
+            if (peakIntensity <= 0) {
+                return {
+                    ...point,
+                    height: 8,
+                    opacity: 0.22,
+                }
+            }
+
+            const normalized = point.intensityScore / peakIntensity
+            return {
+                ...point,
+                height: Math.max(8, Math.round(normalized * 100)),
+                opacity: (0.24 + normalized * 0.7).toFixed(2),
+            }
+        })
+    }
+
+    async function fetchRadar(latitude, longitude) {
+        const params = new URLSearchParams({
+            latitude: latitude.toString(),
+            longitude: longitude.toString(),
+            timezone: 'auto',
+            minutely_15: 'precipitation,precipitation_probability',
+            forecast_minutely_15: radarSlotCount.toString(),
+        })
+
+        const response = await fetch(`${radarApiUrl}?${params}`)
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status} ${response.statusText}`)
+        }
+
+        return response.json()
+    }
+
+    function updateFromRawRadar(rawData) {
+        radarTimeline = processRadarData(rawData.minutely_15)
+        updateRadarSummary(radarTimeline)
+    }
+
+    async function loadRadar(latitude, longitude) {
+        radarLoading = true
+
+        const cached = getCachedRadar(latitude, longitude)
+        if (cached.data) {
+            updateFromRawRadar(cached.data)
+            radarError = ''
+            if (!cached.isStale) {
+                radarLoading = false
+                return
+            }
+        }
+
+        try {
+            const rawData = await fetchRadar(latitude, longitude)
+            cacheRadar(rawData, latitude, longitude)
+            updateFromRawRadar(rawData)
+            radarError = ''
+        } catch (fetchError) {
+            if (!cached.data) {
+                radarError = 'failed to load radar'
+            }
+            console.error('weather radar load failed:', fetchError)
+        } finally {
+            radarLoading = false
+        }
+    }
+
     $effect(() => {
         const lat = settings.latitude
         const lon = settings.longitude
@@ -103,12 +353,15 @@
         if (cached.data) {
             current = cached.data.current
             forecast = cached.data.forecast
+            void loadRadar(lat, lon)
 
             if (!cached.isStale) {
                 error = null
                 loading = false
                 return
             }
+        } else {
+            void loadRadar(lat, lon)
         }
 
         try {
@@ -135,6 +388,7 @@
 
     export function refreshWeather() {
         weatherAPI.clearCache()
+        clearRadarCache()
         loadWeather()
     }
 
@@ -157,8 +411,17 @@
         {#if error}
             <div class="error">{error}</div>
         {:else if current}
-            <div class="temp">{current.temperature_2m}°</div>
-            <div class="description">{current.description}</div>
+            <div class="current-overview">
+                <WeatherIcon
+                    name={getCurrentIconName()}
+                    size={42}
+                    class="current-icon"
+                />
+                <div class="current-text">
+                    <div class="temp">{current.temperature_2m}&deg;</div>
+                    <div class="description">{current.description}</div>
+                </div>
+            </div>
             <br />
             <div class="stats">
                 <div class="col">
@@ -181,7 +444,7 @@
                     </div>
                     <div>
                         feel <span class="bright"
-                            >{current.apparent_temperature}°</span
+                            >{current.apparent_temperature}&deg;</span
                         >
                     </div>
                 </div>
@@ -189,35 +452,84 @@
             <br />
             <div class="forecast">
                 <div class="col">
-                    {#each forecast as forecast}
+                    {#each forecast as forecastItem}
                         <div class="forecast-time">
-                            {forecast.formattedTime}
+                            {forecastItem.formattedTime}
                         </div>
                     {/each}
                 </div>
                 <div class="col">
-                    {#each forecast as forecast}
+                    {#each forecast as forecastItem}
                         {#if settings.forecastMode === 'daily'}
                             <div class="forecast-temp">
-                                {forecast.temperatureMax}°
+                                {forecastItem.temperatureMax}&deg;
                                 <span class="separator">/</span>
-                                {forecast.temperatureMin}°
+                                {forecastItem.temperatureMin}&deg;
                             </div>
                         {:else}
                             <div class="forecast-temp">
-                                {forecast.temperature}°
+                                {forecastItem.temperature}&deg;
                             </div>
                         {/if}
                     {/each}
                 </div>
                 <div class="col">
-                    {#each forecast as forecast}
+                    {#each forecast as forecastItem}
                         <div class="forecast-weather">
-                            {forecast.description}
+                            <WeatherIcon
+                                name={getForecastIconName(forecastItem)}
+                                size={15}
+                                class="forecast-icon"
+                            />
+                            <span>{forecastItem.description}</span>
                         </div>
                     {/each}
                 </div>
             </div>
+            <br />
+            <div class="radar-section">
+                {#if radarError}
+                    <div class="dark">{radarError}</div>
+                {:else if radarLoading && radarTimeline.length === 0}
+                    <div class="dark">loading radar...</div>
+                {:else if radarTimeline.length === 0}
+                    <div class="dark">no radar data</div>
+                {:else}
+                    <div>
+                        rain peak <span class="bright"
+                            >{radarPeakProbability}%</span
+                        >
+                    </div>
+                    <div>
+                        next <span class="bright">{radarNextRainLabel}</span>
+                    </div>
+                    <div>
+                        total <span class="bright"
+                            >{radarTotalPrecipitation} mm</span
+                        >
+                    </div>
+                    <br />
+                    <div class="radar-chart">
+                        {#each radarTimeline as slot}
+                            <div
+                                class="slot"
+                                title={`${slot.label} ${slot.probability}% ${slot.precipitation.toFixed(1)} mm`}
+                            >
+                                <div
+                                    class="bar"
+                                    style={`height: ${slot.height}%; opacity: ${slot.opacity};`}
+                                ></div>
+                            </div>
+                        {/each}
+                    </div>
+                    <div class="axis">
+                        <span>now</span>
+                        <span>+2h</span>
+                        <span>+4h</span>
+                        <span>+6h</span>
+                    </div>
+                {/if}
+            </div>
         {/if}
     </div>
 </div>
@@ -229,6 +541,14 @@
     .panel-wrapper.expand {
         flex-grow: 1;
     }
+    .current-overview {
+        display: flex;
+        gap: 0.875rem;
+        align-items: center;
+    }
+    .current-icon {
+        color: var(--txt-1);
+    }
     .temp {
         font-size: 2rem;
         font-weight: 300;
@@ -258,6 +578,54 @@
         color: var(--txt-3);
     }
     .forecast-weather {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
         color: var(--txt-3);
     }
+    .forecast-icon {
+        color: var(--txt-2);
+        flex-shrink: 0;
+    }
+    .radar-section {
+        min-height: 8.5rem;
+    }
+    .radar-chart {
+        display: grid;
+        grid-template-columns: repeat(24, minmax(0, 1fr));
+        gap: 0.25rem;
+        height: 5rem;
+        align-items: end;
+    }
+    .slot {
+        position: relative;
+        height: 100%;
+        border: 1px solid var(--bg-3);
+        background: var(--bg-2);
+        overflow: hidden;
+    }
+    .bar {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(to top, var(--txt-2), var(--txt-4));
+        transition:
+            height 240ms ease-out,
+            opacity 240ms ease-out;
+    }
+    .axis {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        margin-top: 0.375rem;
+        color: var(--txt-3);
+        font-size: 0.875rem;
+    }
+    .axis span:nth-child(2),
+    .axis span:nth-child(3) {
+        text-align: center;
+    }
+    .axis span:last-child {
+        text-align: end;
+    }
 </style>
diff --git a/src/lib/components/WeatherIcon.svelte b/src/lib/components/WeatherIcon.svelte
new file mode 100644
index 0000000..f846f68
--- /dev/null
+++ b/src/lib/components/WeatherIcon.svelte
@@ -0,0 +1,271 @@
+<script>
+    let { name = 'cloud-sun', size = 28, class: className = '' } = $props()
+</script>
+
+<div
+    class="weather-icon {className}"
+    style={`--icon-size: ${size}px;`}
+    aria-hidden="true"
+>
+    <svg
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        {#if name === 'cloud-lightning'}
+            <path d="M6 16.326A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 .5 8.973" />
+            <path class="bolt" d="m13 12-3 5h4l-3 5" />
+        {:else if name === 'cloud-rain-wind'}
+            <path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
+            <path class="rain-drop delay-0" d="m9.2 22 3-7" />
+            <path class="rain-drop delay-1" d="m9 13-3 7" />
+            <path class="rain-drop delay-2" d="m17 13-3 7" />
+        {:else if name === 'cloud-rain'}
+            <path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
+            <path class="rain-drop delay-0" d="M16 14v6" />
+            <path class="rain-drop delay-1" d="M8 14v6" />
+            <path class="rain-drop delay-2" d="M12 16v6" />
+        {:else if name === 'cloud-snow'}
+            <path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
+            <path class="snow-dot delay-0" d="M8 15h.01" />
+            <path class="snow-dot delay-1" d="M8 19h.01" />
+            <path class="snow-dot delay-2" d="M12 17h.01" />
+            <path class="snow-dot delay-0" d="M12 21h.01" />
+            <path class="snow-dot delay-1" d="M16 15h.01" />
+            <path class="snow-dot delay-2" d="M16 19h.01" />
+        {:else if name === 'snowflake'}
+            <g class="snowflake-spin">
+                <path d="m10 20-1.25-2.5L6 18" />
+                <path d="M10 4 8.75 6.5 6 6" />
+                <path d="m14 20 1.25-2.5L18 18" />
+                <path d="m14 4 1.25 2.5L18 6" />
+                <path d="m17 21-3-6h-4" />
+                <path d="m17 3-3 6 1.5 3" />
+                <path d="M2 12h6.5L10 9" />
+                <path d="m20 10-1.5 2 1.5 2" />
+                <path d="M22 12h-6.5L14 15" />
+                <path d="m4 10 1.5 2L4 14" />
+                <path d="m7 21 3-6-1.5-3" />
+                <path d="m7 3 3 6h4" />
+            </g>
+        {:else if name === 'sun'}
+            <circle cx="12" cy="12" r="4" />
+            <path class="sun-ray" style="--delay: 0ms;" d="M12 2v2" />
+            <path
+                class="sun-ray"
+                style="--delay: 100ms;"
+                d="m19.07 4.93-1.41 1.41"
+            />
+            <path class="sun-ray" style="--delay: 200ms;" d="M20 12h2" />
+            <path
+                class="sun-ray"
+                style="--delay: 300ms;"
+                d="m17.66 17.66 1.41 1.41"
+            />
+            <path class="sun-ray" style="--delay: 400ms;" d="M12 20v2" />
+            <path
+                class="sun-ray"
+                style="--delay: 500ms;"
+                d="m6.34 17.66-1.41 1.41"
+            />
+            <path class="sun-ray" style="--delay: 600ms;" d="M2 12h2" />
+            <path
+                class="sun-ray"
+                style="--delay: 700ms;"
+                d="m4.93 4.93 1.41 1.41"
+            />
+        {:else if name === 'sunset'}
+            <g class="sunset-arrow">
+                <path d="M12 10V2" />
+                <path d="m16 6-4 4-4-4" />
+            </g>
+            <path class="sun-ray" style="--delay: 100ms;" d="m4.93 10.93 1.41 1.41" />
+            <path class="sun-ray" style="--delay: 200ms;" d="M2 18h2" />
+            <path class="sun-ray" style="--delay: 300ms;" d="M20 18h2" />
+            <path
+                class="sun-ray"
+                style="--delay: 400ms;"
+                d="m19.07 10.93-1.41 1.41"
+            />
+            <path class="sun-ray" style="--delay: 500ms;" d="M22 22H2" />
+            <path d="M16 18a4 4 0 0 0-8 0" />
+        {:else if name === 'wind'}
+            <path class="wind-stroke delay-1" d="M12.8 19.6A2 2 0 1 0 14 16H2" />
+            <path class="wind-stroke delay-0" d="M17.5 8a2.5 2.5 0 1 1 2 4H2" />
+            <path class="wind-stroke delay-2" d="M9.8 4.4A2 2 0 1 1 11 8H2" />
+        {:else}
+            <g class="cloud-sun">
+                <path d="M13 22H7a5 5 0 1 1 4.9-6H13a3 3 0 0 1 0 6Z" />
+            </g>
+            <path class="sun-ray" style="--delay: 0ms;" d="M12 2v2" />
+            <path
+                class="sun-ray"
+                style="--delay: 100ms;"
+                d="m4.93 4.93 1.41 1.41"
+            />
+            <path class="sun-ray" style="--delay: 200ms;" d="M20 12h2" />
+            <path
+                class="sun-ray"
+                style="--delay: 300ms;"
+                d="m19.07 4.93-1.41 1.41"
+            />
+            <path
+                class="sun-ray"
+                style="--delay: 400ms;"
+                d="M15.947 12.65a4 4 0 0 0-5.925-4.128"
+            />
+        {/if}
+    </svg>
+</div>
+
+<style>
+    .weather-icon {
+        width: var(--icon-size);
+        height: var(--icon-size);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--txt-2);
+    }
+    .weather-icon svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+    }
+    .bolt {
+        animation: lightningPulse 2.8s ease-in-out infinite;
+    }
+    .rain-drop {
+        animation: rainPulse 2.4s ease-in-out infinite;
+    }
+    .rain-drop.delay-1 {
+        animation-delay: 420ms;
+    }
+    .rain-drop.delay-2 {
+        animation-delay: 840ms;
+    }
+    .snow-dot {
+        animation: snowPulse 3.2s ease-in-out infinite;
+    }
+    .snow-dot.delay-1 {
+        animation-delay: 540ms;
+    }
+    .snow-dot.delay-2 {
+        animation-delay: 1080ms;
+    }
+    .snowflake-spin {
+        transform-origin: center;
+        animation: snowflakeDrift 5.6s ease-in-out infinite;
+    }
+    .sun-ray {
+        animation: rayBlink 3.6s ease-in-out infinite;
+        animation-delay: var(--delay);
+    }
+    .sunset-arrow {
+        transform-origin: center;
+        animation: sunsetShift 2.8s ease-in-out infinite;
+    }
+    .wind-stroke {
+        stroke-dasharray: 30;
+        stroke-dashoffset: 0;
+        animation: windDraw 3.2s ease-in-out infinite;
+    }
+    .wind-stroke.delay-1 {
+        animation-delay: 480ms;
+    }
+    .wind-stroke.delay-2 {
+        animation-delay: 960ms;
+    }
+    .cloud-sun {
+        transform-origin: center;
+        animation: cloudFloat 4.8s ease-in-out infinite;
+    }
+
+    @keyframes lightningPulse {
+        0%,
+        100% {
+            opacity: 1;
+        }
+        45% {
+            opacity: 0.35;
+        }
+    }
+    @keyframes rainPulse {
+        0%,
+        100% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0.3;
+        }
+    }
+    @keyframes snowPulse {
+        0%,
+        100% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0.35;
+        }
+    }
+    @keyframes snowflakeDrift {
+        0%,
+        100% {
+            transform: rotate(0deg);
+        }
+        25% {
+            transform: rotate(-4deg);
+        }
+        75% {
+            transform: rotate(4deg);
+        }
+    }
+    @keyframes rayBlink {
+        0%,
+        100% {
+            opacity: 1;
+        }
+        40% {
+            opacity: 0.25;
+        }
+    }
+    @keyframes sunsetShift {
+        0%,
+        100% {
+            transform: translateY(0);
+        }
+        50% {
+            transform: translateY(1px);
+        }
+    }
+    @keyframes windDraw {
+        0% {
+            stroke-dashoffset: 26;
+            opacity: 0.3;
+        }
+        40%,
+        100% {
+            stroke-dashoffset: 0;
+            opacity: 1;
+        }
+    }
+    @keyframes cloudFloat {
+        0%,
+        100% {
+            transform: translate(0, 0);
+        }
+        50% {
+            transform: translate(0.5px, -0.5px);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .weather-icon * {
+            animation: none !important;
+        }
+    }
+</style>
diff --git a/src/lib/stores/settings-store.svelte.js b/src/lib/stores/settings-store.svelte.js
index 9b0f64a..9807ffa 100644
--- a/src/lib/stores/settings-store.svelte.js
+++ b/src/lib/stores/settings-store.svelte.js
@@ -1,5 +1,30 @@
 import { defaultCustomColors } from '../config/themes.js'
 
+export const MAIN_WIDGET_IDS = ['weather', 'tasks', 'calendar']
+
+export function normalizeMainWidgetOrder(order) {
+    if (!Array.isArray(order)) {
+        return [...MAIN_WIDGET_IDS]
+    }
+
+    const normalized = []
+    const seen = new Set()
+
+    for (const id of order) {
+        if (!MAIN_WIDGET_IDS.includes(id) || seen.has(id)) continue
+        seen.add(id)
+        normalized.push(id)
+    }
+
+    for (const id of MAIN_WIDGET_IDS) {
+        if (!seen.has(id)) {
+            normalized.push(id)
+        }
+    }
+
+    return normalized
+}
+
 function detectFormatPreferences() {
     try {
         const use24h = !new Intl.DateTimeFormat(undefined, {
@@ -29,6 +54,9 @@ let defaultSettings = {
     todoistApiToken: '',
     todoistVisibleProjectIds: null,
     googleTasksSignedIn: false,
+    googleCalendarSignedIn: false,
+    googleCalendarMaxEvents: 5,
+    googleCalendarVisibleCalendarIds: null,
     locationMode: 'manual',
     latitude: null,
     longitude: null,
@@ -85,6 +113,8 @@ let defaultSettings = {
     showStats: true,
     showWeather: true,
     showTasks: true,
+    showCalendar: false,
+    mainWidgetOrder: [...MAIN_WIDGET_IDS],
     showLinks: true,
 }
 
@@ -103,6 +133,22 @@ function loadSettings() {
                     parsed.showLinkIcons === false ? 'arrow' : 'icons'
                 delete merged.showLinkIcons
             }
+            // remove deprecated standalone radar widget setting
+            delete merged.showWeatherRadar
+            // remove deprecated pomodoro settings
+            delete merged.showPomodoro
+            delete merged.pomodoroFocusMinutes
+            delete merged.pomodoroShortBreakMinutes
+            delete merged.pomodoroLongBreakMinutes
+            delete merged.pomodoroLongBreakEvery
+            delete merged.pomodoroAutoStartBreaks
+            delete merged.pomodoroAutoStartFocus
+            delete merged.pomodoroSoundEnabled
+            delete merged.pomodoroSoundType
+            delete merged.pomodoroSoundVolume
+            merged.mainWidgetOrder = normalizeMainWidgetOrder(
+                merged.mainWidgetOrder
+            )
             return merged
         }
     } catch (error) {