feat: multimodal AI event creation with image support #1

2026-04-07T19:21:08Z

old4ever commented

2026-04-07 19:21:08 +00:00

Summary

Add multimodal AI event creation: Users can attach images (screenshots, flyers) alongside or instead of text prompts for AI-powered calendar event extraction
Strengthen input/output validation: Zod schemas with regex MIME validation, binary size checking, and ISO datetime format enforcement on both request and response boundaries
Fix all linter and typecheck warnings: Zero errors across bun run typecheck and bun run lint (ESLint + Biome)

Changes

New Features

ImagePicker component for file upload (PNG, JPEG, WebP)
Image preview with remove button in AIToolbar
Drag-and-drop image support in DragDropContainer
Multimodal API route with OpenRouter chat API for base64 images
Zod schemas for AI event request validation and response parsing

Security & Validation

Server-side: regex MIME type validation (data:image/(png|jpeg|webp);base64,...), actual binary size check (≤10MB)
Server-side: ISO datetime validation on AI response start/end fields
Server-side: generic error messages to client (no raw AI response leakage)
Client-side: file type and size validation before base64 encoding
DATABASE_URL env var validation with descriptive error instead of non-null assertion

Code Quality

Extracted extractJsonFromText to shared src/lib/json-utils.ts
Extracted shared image constants to src/lib/constants.ts
Refactored 88-line handleAiCreate into focused functions (sendAiRequest, populateEventForm, persistAiEvents)
Fixed Promise constructor anti-pattern and setAiLoading race condition
Used extractContentFromChatResponse() instead of nested ternary fallthrough
Derived CalendarEvent type from AiEventResponseItem
Derived ImagePicker variant/size types from buttonVariants via VariantProps
Environment-based model config via process.env.AI_MODEL

Tooling

Added biome.json with Tailwind CSS directive support
Added src/css.d.ts module declaration for TypeScript
CSS formatting standardized via Biome
All ESLint warnings resolved (unused vars, catch params)
All Biome warnings resolved (parseInt radix, array index keys, aria-hidden, non-null assertions)

Files Changed

253 files changed (+39,109 / -415 lines)
Most changes are .opencode/ context files and lockfile updates
Core feature: ~10 source files

Test Plan

bun run typecheck passes with zero errors
bun run lint passes with zero errors/warnings
Manual: text-only AI event creation
Manual: image-only AI event creation
Manual: text + image AI event creation
Manual: drag-and-drop image onto calendar
Manual: oversized/invalid file rejection

## Summary - **Add multimodal AI event creation**: Users can attach images (screenshots, flyers) alongside or instead of text prompts for AI-powered calendar event extraction - **Strengthen input/output validation**: Zod schemas with regex MIME validation, binary size checking, and ISO datetime format enforcement on both request and response boundaries - **Fix all linter and typecheck warnings**: Zero errors across `bun run typecheck` and `bun run lint` (ESLint + Biome) ## Changes ### New Features - `ImagePicker` component for file upload (PNG, JPEG, WebP) - Image preview with remove button in `AIToolbar` - Drag-and-drop image support in `DragDropContainer` - Multimodal API route with OpenRouter chat API for base64 images - Zod schemas for AI event request validation and response parsing ### Security & Validation - Server-side: regex MIME type validation (`data:image/(png|jpeg|webp);base64,...`), actual binary size check (≤10MB) - Server-side: ISO datetime validation on AI response `start`/`end` fields - Server-side: generic error messages to client (no raw AI response leakage) - Client-side: file type and size validation before base64 encoding - `DATABASE_URL` env var validation with descriptive error instead of non-null assertion ### Code Quality - Extracted `extractJsonFromText` to shared `src/lib/json-utils.ts` - Extracted shared image constants to `src/lib/constants.ts` - Refactored 88-line `handleAiCreate` into focused functions (`sendAiRequest`, `populateEventForm`, `persistAiEvents`) - Fixed Promise constructor anti-pattern and `setAiLoading` race condition - Used `extractContentFromChatResponse()` instead of nested ternary fallthrough - Derived `CalendarEvent` type from `AiEventResponseItem` - Derived `ImagePicker` variant/size types from `buttonVariants` via `VariantProps` - Environment-based model config via `process.env.AI_MODEL` ### Tooling - Added `biome.json` with Tailwind CSS directive support - Added `src/css.d.ts` module declaration for TypeScript - CSS formatting standardized via Biome - All ESLint warnings resolved (unused vars, catch params) - All Biome warnings resolved (parseInt radix, array index keys, aria-hidden, non-null assertions) ## Files Changed - 253 files changed (+39,109 / -415 lines) - Most changes are `.opencode/` context files and lockfile updates - Core feature: ~10 source files ## Test Plan - [x] `bun run typecheck` passes with zero errors - [x] `bun run lint` passes with zero errors/warnings - [x] Manual: text-only AI event creation - [x] Manual: image-only AI event creation - [x] Manual: text + image AI event creation - [x] Manual: drag-and-drop image onto calendar - [x] Manual: oversized/invalid file rejection

old4ever added 20 commits 2026-04-07 19:21:08 +00:00

chore: install openagent opencode c2263602c4

Signed-off-by: Dmytro Stanchiev <git@dmytros.dev>

chore: zod skill f8213883df

Signed-off-by: Dmytro Stanchiev <git@dmytros.dev>

chore(deps): add zod dependency 6944215578

feat(lib): add AI event Zod schemas for request validation and response parsing 3d6999312c

feat(api): refactor AI event route with Zod validation, multimodal image support, and JSON extraction 8d1b04f646

feat(components): add ImagePicker file upload component c02c6ece5d

feat(components): add image drag-drop support to DragDropContainer 94de1dde0e

feat(components): add image preview, picker, and clear controls to AIToolbar 5e888ce7ae

feat(page): wire image upload state, base64 conversion, and API integration into home page 95de6ae46a

chore(deps): add @typescript/native-preview, biome lint integration, and typecheck script 4e09059a3d

Add @typescript/native-preview for tsgo typechecking, integrate biome
check into the lint script, and add a dedicated typecheck script.

style: standardize formatting in opencode tooling files cbae9fa1c9

Reformat JSON configs and TypeScript scripts to use consistent
tab indentation, semicolons, and double quotes.

style: standardize import ordering, type imports, and formatting in source files a0a7e021a8

Sort imports alphabetically, convert value imports to type-only where
appropriate, normalize indentation to tabs, and sort exports
alphabetically across UI components, pages, and lib modules.

refactor(lib): extract shared image constants and JSON parsing utilities dc4204a740

Move image extensions, MIME types, and size limit into a dedicated
constants module. Extract JSON-from-text parsing into a pure utility
function for reuse across the codebase.

refactor(types): strengthen Zod schemas with regex validation and derive CalendarEvent 7bb4f2be9d

Add regex-based data URL validation for images, compute binary size
from base64 for accurate 10MB limit, enforce datetime strings with
offset for start/end fields, and derive CalendarEvent from the AI
response item type to eliminate field duplication.

refactor(api): simplify AI event route with extracted utilities and env-based model 79f98ebfd3

Replace inline JSON extraction with the shared json-utils module,
extract chat response content parsing into a dedicated helper, make
the AI model configurable via AI_MODEL env var, and improve error
messages for production safety.

refactor(page): extract AI handler helpers and add client-side image validation 096f548ec3

Break down the monolithic handleAiCreate into focused helpers
(sendAiRequest, persistAiEvents, populateEventForm), add client-side
image file validation before upload, and use toast.promise finally
callback for loading state cleanup.

fix(components): add unoptimized image prop, overflow containment, and accessibility a7716d87df

Add unoptimized prop to image preview to support blob URLs, contain
overflow on preview container, replace div with semantic section
element in DragDropContainer with aria-label, and import shared
image constants.

refactor(components): derive ImagePicker variant types from buttonVariants fab0d2ff47

Replace manually duplicated variant/size type literals with
VariantProps<typeof buttonVariants> for type safety and
consistency with the Button component.

🔧 chore: add biome config for Tailwind CSS and CSS module declarations 54ca910609

🚨 fix: resolve all linter and typecheck warnings across codebase f38b0188df

old4ever merged commit be70a4579f into main

2026-04-07 19:21:28 +00:00

old4ever referenced this issue from a commit

2026-04-07 19:21:29 +00:00

Merge pull request 'feat: multimodal AI event creation with image support' (#1) from image-parse into main

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: old4ever/local-cal#1