fix: move History and Download buttons to Settings dialog for cleaner chat interface

* docs(cloudflare): add detailed Cloudflare Workers + R2 deploy guide

* separated cloudflare deploy guide from readme.md

* Missing R2 bucket binding for incremental cache

* docs: move Cloudflare guide to docs/ and improve documentation

- Move Cloudflare_Deploy.md to docs/ folder
- Add 'Deploy without R2' option for simple/free deployments
- Add workers.dev subdomain registration instructions
- Add missing global_fetch_strictly_public flag
- Add troubleshooting for common deployment issues
- Update README.md link to new location

* fix: conditional import for cloudflare dev and regenerate lockfile

- Use dynamic import for @opennextjs/cloudflare to avoid loading workerd during builds
- Regenerate package-lock.json with cross-platform dependencies

* fix: use main lockfile with cloudflare deps added

- Use main branch's package-lock.json as base to ensure cross-platform deps
- Add @opennextjs/cloudflare and wrangler

---------

Co-authored-by: dayuan.jiang <jdy.toh@gmail.com>

.github/ISSUE_TEMPLATE/enhancement.md

@@ -0,0 +1,24 @@
+---
+name: Enhancement
+about: Suggest an improvement to existing functionality
+title: '[Enhancement] '
+labels: enhancement
+assignees: ''
+---
+
+> **Note**: This template is just a guide. Feel free to ignore the format entirely - any feedback is welcome! Don't let the template stop you from sharing your ideas.
+
+## Current Behavior
+Describe how the feature currently works.
+
+## Proposed Enhancement
+How you'd like this to be improved.
+
+## Motivation
+Why this enhancement would be beneficial.
+
+## Screenshots / Mockups
+If applicable, add screenshots or mockups to illustrate the proposed changes.
+
+## Additional Context
+Any other information about the enhancement request.

.github/workflows/auto-format.yml

@@ -12,13 +12,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           ref: ${{ github.event.pull_request.head.sha }}
           token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: '20'
 

.github/workflows/ci.yml

@@ -20,10 +20,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: '20'
           cache: 'npm'

.github/workflows/docker-build.yml

@@ -26,7 +26,7 @@ jobs:
       
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
@@ -69,7 +69,7 @@ jobs:
       # Push to AWS ECR for App Runner auto-deploy
       - name: Configure AWS credentials
         if: github.event_name != 'pull_request' && github.ref == 'refs/heads/main'
-        uses: aws-actions/configure-aws-credentials@v4
+        uses: aws-actions/configure-aws-credentials@v5
         with:
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

.github/workflows/electron-release.yml

@@ -29,10 +29,10 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: 20
           cache: "npm"

README.md

@@ -242,6 +242,11 @@ Or you can deploy by this button.
 
 Be sure to **set the environment variables** in the Vercel dashboard as you did in your local `.env.local` file.
 
+## Deploy on Cloudflare Workers
+
+[Go to Cloudflare Deploy Guide](./docs/Cloudflare_Deploy.md)
+
+
 
 ## Multi-Provider Support
 

components/chat-input.tsx

@@ -1,22 +1,15 @@
 "use client"
 
-import {
+import { Image as ImageIcon, Loader2, Send, Trash2 } from "lucide-react"
-    Download,
-    History,
-    Image as ImageIcon,
-    Loader2,
-    Send,
-    Trash2,
-} from "lucide-react"
 import type React from "react"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { toast } from "sonner"
 import { ButtonWithTooltip } from "@/components/button-with-tooltip"
 import { ErrorToast } from "@/components/error-toast"
-import { HistoryDialog } from "@/components/history-dialog"
+
 import { ModelSelector } from "@/components/model-selector"
 import { ResetWarningModal } from "@/components/reset-warning-modal"
-import { SaveDialog } from "@/components/save-dialog"
+
 import { Button } from "@/components/ui/button"
 import { Switch } from "@/components/ui/switch"
 import { Textarea } from "@/components/ui/textarea"
@@ -25,7 +18,7 @@ import {
     TooltipContent,
     TooltipTrigger,
 } from "@/components/ui/tooltip"
-import { useDiagram } from "@/contexts/diagram-context"
+
 import { useDictionary } from "@/hooks/use-dictionary"
 import { formatMessage } from "@/lib/i18n/utils"
 import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
@@ -152,8 +145,7 @@ interface ChatInputProps {
         File,
         { text: string; charCount: number; isExtracting: boolean }
     >
-    showHistory?: boolean
+
-    onToggleHistory?: (show: boolean) => void
     sessionId?: string
     error?: Error | null
     minimalStyle?: boolean
@@ -162,6 +154,7 @@ interface ChatInputProps {
     models?: FlattenedModel[]
     selectedModelId?: string
     onModelSelect?: (modelId: string | undefined) => void
+    showUnvalidatedModels?: boolean
     onConfigureModels?: () => void
 }
 
@@ -174,24 +167,18 @@ export function ChatInput({
     files = [],
     onFileChange = () => {},
     pdfData = new Map(),
-    showHistory = false,
+
-    onToggleHistory = () => {},
-    sessionId,
     error = null,
     minimalStyle = false,
     onMinimalStyleChange = () => {},
     models = [],
     selectedModelId,
     onModelSelect = () => {},
+    showUnvalidatedModels = false,
     onConfigureModels = () => {},
 }: ChatInputProps) {
     const dict = useDictionary()
-    const {
+
-        diagramHistory,
-        saveDiagramToFile,
-        showSaveDialog,
-        setShowSaveDialog,
-    } = useDiagram()
     const textareaRef = useRef<HTMLTextAreaElement>(null)
     const fileInputRef = useRef<HTMLInputElement>(null)
     const [isDragging, setIsDragging] = useState(false)
@@ -384,11 +371,6 @@ export function ChatInput({
                             onClear={handleClear}
                         />
 
-                        <HistoryDialog
-                            showHistory={showHistory}
-                            onToggleHistory={onToggleHistory}
-                        />
-
                         <Tooltip>
                             <TooltipTrigger asChild>
                                 <div className="flex items-center gap-1.5">
@@ -419,73 +401,38 @@ export function ChatInput({
                     </div>
 
                     <div className="flex items-center gap-1 overflow-hidden justify-end">
-                        <ButtonWithTooltip
+                        <div className="flex items-center gap-1 overflow-x-hidden">
-                            type="button"
+                            <ButtonWithTooltip
-                            variant="ghost"
+                                type="button"
-                            size="sm"
+                                variant="ghost"
-                            onClick={() => onToggleHistory(true)}
+                                size="sm"
-                            disabled={isDisabled || diagramHistory.length === 0}
+                                onClick={triggerFileInput}
-                            tooltipContent={dict.chat.diagramHistory}
+                                disabled={isDisabled}
-                            className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+                                tooltipContent={dict.chat.uploadFile}
-                        >
+                                className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                            <History className="h-4 w-4" />
+                            >
-                        </ButtonWithTooltip>
+                                <ImageIcon className="h-4 w-4" />
-
+                            </ButtonWithTooltip>
-                        <ButtonWithTooltip
-                            type="button"
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => setShowSaveDialog(true)}
-                            disabled={isDisabled}
-                            tooltipContent={dict.chat.saveDiagram}
-                            className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                        >
-                            <Download className="h-4 w-4" />
-                        </ButtonWithTooltip>
-
-                        <SaveDialog
-                            open={showSaveDialog}
-                            onOpenChange={setShowSaveDialog}
-                            onSave={(filename, format) =>
-                                saveDiagramToFile(filename, format, sessionId)
-                            }
-                            defaultFilename={`diagram-${new Date()
-                                .toISOString()
-                                .slice(0, 10)}`}
-                        />
-
-                        <ButtonWithTooltip
-                            type="button"
-                            variant="ghost"
-                            size="sm"
-                            onClick={triggerFileInput}
-                            disabled={isDisabled}
-                            tooltipContent={dict.chat.uploadFile}
-                            className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                        >
-                            <ImageIcon className="h-4 w-4" />
-                        </ButtonWithTooltip>
-
-                        <input
-                            type="file"
-                            ref={fileInputRef}
-                            className="hidden"
-                            onChange={handleFileChange}
-                            accept="image/*,.pdf,application/pdf,text/*,.md,.markdown,.json,.csv,.xml,.yaml,.yml,.toml"
-                            multiple
-                            disabled={isDisabled}
-                        />
 
+                            <input
+                                type="file"
+                                ref={fileInputRef}
+                                className="hidden"
+                                onChange={handleFileChange}
+                                accept="image/*,.pdf,application/pdf,text/*,.md,.markdown,.json,.csv,.xml,.yaml,.yml,.toml"
+                                multiple
+                                disabled={isDisabled}
+                            />
+                        </div>
                         <ModelSelector
                             models={models}
                             selectedModelId={selectedModelId}
                             onSelect={onModelSelect}
                             onConfigure={onConfigureModels}
                             disabled={isDisabled}
+                            showUnvalidatedModels={showUnvalidatedModels}
                         />
-
                         <div className="w-px h-5 bg-border mx-1" />
-
                         <Button
                             type="submit"
                             disabled={isDisabled || !input.trim()}

components/chat-panel.tsx

@@ -154,7 +154,6 @@ export default function ChatPanel({
     // File processing using extracted hook
     const { files, pdfData, handleFileChange, setFiles } = useFileProcessor()
 
-    const [showHistory, setShowHistory] = useState(false)
     const [showSettingsDialog, setShowSettingsDialog] = useState(false)
     const [showModelConfigDialog, setShowModelConfigDialog] = useState(false)
 
@@ -943,7 +942,11 @@ export default function ChatPanel({
                     <div className="flex items-center gap-2 overflow-x-hidden">
                         <div className="flex items-center gap-2">
                             <Image
-                                src="/favicon.ico"
+                                src={
+                                    darkMode
+                                        ? "/favicon-white.svg"
+                                        : "/favicon.ico"
+                                }
                                 alt="Next AI Drawio"
                                 width={isMobile ? 24 : 28}
                                 height={isMobile ? 24 : 28}
@@ -1062,8 +1065,6 @@ export default function ChatPanel({
                     files={files}
                     onFileChange={handleFileChange}
                     pdfData={pdfData}
-                    showHistory={showHistory}
-                    onToggleHistory={setShowHistory}
                     sessionId={sessionId}
                     error={error}
                     minimalStyle={minimalStyle}
@@ -1071,6 +1072,7 @@ export default function ChatPanel({
                     models={modelConfig.models}
                     selectedModelId={modelConfig.selectedModelId}
                     onModelSelect={modelConfig.setSelectedModelId}
+                    showUnvalidatedModels={modelConfig.showUnvalidatedModels}
                     onConfigureModels={() => setShowModelConfigDialog(true)}
                 />
             </footer>
@@ -1083,6 +1085,7 @@ export default function ChatPanel({
                 onToggleDrawioUi={onToggleDrawioUi}
                 darkMode={darkMode}
                 onToggleDarkMode={onToggleDarkMode}
+                sessionId={sessionId}
             />
 
             <ModelConfigDialog

components/model-config-dialog.tsx

@@ -50,6 +50,7 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
 import { useDictionary } from "@/hooks/use-dictionary"
 import type { UseModelConfigReturn } from "@/hooks/use-model-config"
 import { formatMessage } from "@/lib/i18n/utils"
@@ -1447,10 +1448,23 @@ export function ModelConfigDialog({
 
                 {/* Footer */}
                 <div className="px-6 py-3 border-t border-border-subtle bg-surface-1/30 shrink-0">
-                    <p className="text-xs text-muted-foreground text-center flex items-center justify-center gap-1.5">
+                    <div className="flex items-center justify-between">
-                        <Key className="h-3 w-3" />
+                        <div className="flex items-center gap-2">
-                        {dict.modelConfig.apiKeyStored}
+                            <Switch
-                    </p>
+                                checked={modelConfig.showUnvalidatedModels}
+                                onCheckedChange={
+                                    modelConfig.setShowUnvalidatedModels
+                                }
+                            />
+                            <Label className="text-xs text-muted-foreground cursor-pointer">
+                                {dict.modelConfig.showUnvalidatedModels}
+                            </Label>
+                        </div>
+                        <p className="text-xs text-muted-foreground flex items-center gap-1.5">
+                            <Key className="h-3 w-3" />
+                            {dict.modelConfig.apiKeyStored}
+                        </p>
+                    </div>
                 </div>
             </DialogContent>
 

components/model-selector.tsx

@@ -1,6 +1,13 @@
 "use client"
 
-import { Bot, Check, ChevronDown, Server, Settings2 } from "lucide-react"
+import {
+    AlertTriangle,
+    Bot,
+    Check,
+    ChevronDown,
+    Server,
+    Settings2,
+} from "lucide-react"
 import { useMemo, useState } from "react"
 import {
     ModelSelectorContent,
@@ -26,6 +33,7 @@ interface ModelSelectorProps {
     onSelect: (modelId: string | undefined) => void
     onConfigure: () => void
     disabled?: boolean
+    showUnvalidatedModels?: boolean
 }
 
 // Map our provider names to models.dev logo names
@@ -67,17 +75,20 @@ export function ModelSelector({
     onSelect,
     onConfigure,
     disabled = false,
+    showUnvalidatedModels = false,
 }: ModelSelectorProps) {
     const dict = useDictionary()
     const [open, setOpen] = useState(false)
-    // Only show validated models in the selector
+    // Filter models based on showUnvalidatedModels setting
-    const validatedModels = useMemo(
+    const displayModels = useMemo(() => {
-        () => models.filter((m) => m.validated === true),
+        if (showUnvalidatedModels) {
-        [models],
+            return models
-    )
+        }
+        return models.filter((m) => m.validated === true)
+    }, [models, showUnvalidatedModels])
     const groupedModels = useMemo(
-        () => groupModelsByProvider(validatedModels),
+        () => groupModelsByProvider(displayModels),
-        [validatedModels],
+        [displayModels],
     )
 
     // Find selected model for display
@@ -126,7 +137,7 @@ export function ModelSelector({
                 />
                 <ModelSelectorList className="[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
                     <ModelSelectorEmpty>
-                        {validatedModels.length === 0 && models.length > 0
+                        {displayModels.length === 0 && models.length > 0
                             ? dict.modelConfig.noVerifiedModels
                             : dict.modelConfig.noModelsFound}
                     </ModelSelectorEmpty>
@@ -191,6 +202,16 @@ export function ModelSelector({
                                         <ModelSelectorName>
                                             {model.modelId}
                                         </ModelSelectorName>
+                                        {model.validated !== true && (
+                                            <span
+                                                title={
+                                                    dict.modelConfig
+                                                        .unvalidatedModelWarning
+                                                }
+                                            >
+                                                <AlertTriangle className="ml-auto h-3 w-3 text-warning" />
+                                            </span>
+                                        )}
                                     </ModelSelectorItem>
                                 ))}
                             </ModelSelectorGroup>
@@ -213,7 +234,9 @@ export function ModelSelector({
                     </ModelSelectorGroup>
                     {/* Info text */}
                     <div className="px-3 py-2 text-xs text-muted-foreground border-t">
-                        {dict.modelConfig.onlyVerifiedShown}
+                        {showUnvalidatedModels
+                            ? dict.modelConfig.allModelsShown
+                            : dict.modelConfig.onlyVerifiedShown}
                     </div>
                 </ModelSelectorList>
             </ModelSelectorContent>

components/settings-dialog.tsx

@@ -1,8 +1,10 @@
 "use client"
 
-import { Moon, Sun } from "lucide-react"
+import { Download, History, Moon, Sun } from "lucide-react"
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { Suspense, useEffect, useState } from "react"
+import { HistoryDialog } from "@/components/history-dialog"
+import { type ExportFormat, SaveDialog } from "@/components/save-dialog"
 import { Button } from "@/components/ui/button"
 import {
     Dialog,
@@ -21,6 +23,7 @@ import {
     SelectValue,
 } from "@/components/ui/select"
 import { Switch } from "@/components/ui/switch"
+import { useDiagram } from "@/contexts/diagram-context"
 import { useDictionary } from "@/hooks/use-dictionary"
 import { getApiEndpoint } from "@/lib/base-path"
 import { i18n, type Locale } from "@/lib/i18n/config"
@@ -65,6 +68,7 @@ interface SettingsDialogProps {
     onToggleDrawioUi: () => void
     darkMode: boolean
     onToggleDarkMode: () => void
+    sessionId?: string
 }
 
 export const STORAGE_ACCESS_CODE_KEY = "next-ai-draw-io-access-code"
@@ -86,6 +90,7 @@ function SettingsContent({
     onToggleDrawioUi,
     darkMode,
     onToggleDarkMode,
+    sessionId,
 }: SettingsDialogProps) {
     const dict = useDictionary()
     const router = useRouter()
@@ -95,11 +100,21 @@ function SettingsContent({
     const [closeProtection, setCloseProtection] = useState(true)
     const [isVerifying, setIsVerifying] = useState(false)
     const [error, setError] = useState("")
+    const [showHistory, setShowHistory] = useState(false)
+    const [showSaveDialog, setShowSaveDialog] = useState(false)
     const [accessCodeRequired, setAccessCodeRequired] = useState(
         () => getStoredAccessCodeRequired() ?? false,
     )
     const [currentLang, setCurrentLang] = useState("en")
 
+    // Get diagram context
+    const { diagramHistory, saveDiagramToFile } = useDiagram()
+
+    // Handler for saving diagram (RENAMED to avoid conflict)
+    const handleDiagramSave = (filename: string, format: ExportFormat) => {
+        saveDiagramToFile(filename, format, sessionId)
+    }
+
     useEffect(() => {
         // Only fetch if not cached in localStorage
         if (getStoredAccessCodeRequired() !== null) return
@@ -206,158 +221,211 @@ function SettingsContent({
     }
 
     return (
-        <DialogContent className="sm:max-w-lg p-0 gap-0">
+        <>
-            {/* Header */}
+            <DialogContent className="sm:max-w-lg p-0 gap-0">
-            <DialogHeader className="px-6 pt-6 pb-4">
+                {/* Header */}
-                <DialogTitle>{dict.settings.title}</DialogTitle>
+                <DialogHeader className="px-6 pt-6 pb-4">
-                <DialogDescription className="mt-1">
+                    <DialogTitle>{dict.settings.title}</DialogTitle>
-                    {dict.settings.description}
+                    <DialogDescription className="mt-1">
-                </DialogDescription>
+                        {dict.settings.description}
-            </DialogHeader>
+                    </DialogDescription>
+                </DialogHeader>
 
-            {/* Content */}
+                {/* Content */}
-            <div className="px-6 pb-6">
+                <div className="px-6 pb-6">
-                <div className="divide-y divide-border-subtle">
+                    <div className="divide-y divide-border-subtle">
-                    {/* Access Code (conditional) */}
+                        {/* Access Code (conditional) */}
-                    {accessCodeRequired && (
+                        {accessCodeRequired && (
-                        <div className="py-4 first:pt-0 space-y-3">
+                            <div className="py-4 first:pt-0 space-y-3">
-                            <div className="space-y-0.5">
+                                <div className="space-y-0.5">
-                                <Label
+                                    <Label
-                                    htmlFor="access-code"
+                                        htmlFor="access-code"
-                                    className="text-sm font-medium"
+                                        className="text-sm font-medium"
-                                >
+                                    >
-                                    {dict.settings.accessCode}
+                                        {dict.settings.accessCode}
-                                </Label>
+                                    </Label>
-                                <p className="text-xs text-muted-foreground">
+                                    <p className="text-xs text-muted-foreground">
-                                    {dict.settings.accessCodeDescription}
+                                        {dict.settings.accessCodeDescription}
-                                </p>
+                                    </p>
+                                </div>
+                                <div className="flex gap-2">
+                                    <Input
+                                        id="access-code"
+                                        type="password"
+                                        value={accessCode}
+                                        onChange={(e) =>
+                                            setAccessCode(e.target.value)
+                                        }
+                                        onKeyDown={handleKeyDown}
+                                        placeholder={
+                                            dict.settings.accessCodePlaceholder
+                                        }
+                                        autoComplete="off"
+                                        className="h-9"
+                                    />
+                                    <Button
+                                        onClick={handleSave}
+                                        disabled={
+                                            isVerifying || !accessCode.trim()
+                                        }
+                                        className="h-9 px-4 rounded-xl"
+                                    >
+                                        {isVerifying ? "..." : dict.common.save}
+                                    </Button>
+                                </div>
+                                {error && (
+                                    <p className="text-xs text-destructive">
+                                        {error}
+                                    </p>
+                                )}
                             </div>
-                            <div className="flex gap-2">
+                        )}
-                                <Input
+
-                                    id="access-code"
+                        {/* Language */}
-                                    type="password"
+                        <SettingItem
-                                    value={accessCode}
+                            label={dict.settings.language}
-                                    onChange={(e) =>
+                            description={dict.settings.languageDescription}
-                                        setAccessCode(e.target.value)
+                        >
-                                    }
+                            <Select
-                                    onKeyDown={handleKeyDown}
+                                value={currentLang}
-                                    placeholder={
+                                onValueChange={changeLanguage}
-                                        dict.settings.accessCodePlaceholder
+                            >
-                                    }
+                                <SelectTrigger
-                                    autoComplete="off"
+                                    id="language-select"
-                                    className="h-9"
+                                    className="w-[120px] h-9 rounded-xl"
-                                />
-                                <Button
-                                    onClick={handleSave}
-                                    disabled={isVerifying || !accessCode.trim()}
-                                    className="h-9 px-4 rounded-xl"
                                 >
-                                    {isVerifying ? "..." : dict.common.save}
+                                    <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    {i18n.locales.map((locale) => (
+                                        <SelectItem key={locale} value={locale}>
+                                            {LANGUAGE_LABELS[locale]}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </SettingItem>
+
+                        {/* Theme */}
+                        <SettingItem
+                            label={dict.settings.theme}
+                            description={dict.settings.themeDescription}
+                        >
+                            <Button
+                                id="theme-toggle"
+                                variant="outline"
+                                size="icon"
+                                onClick={onToggleDarkMode}
+                                className="h-9 w-9 rounded-xl border-border-subtle hover:bg-interactive-hover"
+                            >
+                                {darkMode ? (
+                                    <Sun className="h-4 w-4" />
+                                ) : (
+                                    <Moon className="h-4 w-4" />
+                                )}
+                            </Button>
+                        </SettingItem>
+
+                        {/* Draw.io Style */}
+                        <SettingItem
+                            label={dict.settings.drawioStyle}
+                            description={`${dict.settings.drawioStyleDescription} ${
+                                drawioUi === "min"
+                                    ? dict.settings.minimal
+                                    : dict.settings.sketch
+                            }`}
+                        >
+                            <Button
+                                id="drawio-ui"
+                                variant="outline"
+                                onClick={onToggleDrawioUi}
+                                className="h-9 w-[120px] rounded-xl border-border-subtle hover:bg-interactive-hover font-normal"
+                            >
+                                {dict.settings.switchTo}{" "}
+                                {drawioUi === "min"
+                                    ? dict.settings.sketch
+                                    : dict.settings.minimal}
+                            </Button>
+                        </SettingItem>
+
+                        {/* Close Protection */}
+                        <SettingItem
+                            label={dict.settings.closeProtection}
+                            description={
+                                dict.settings.closeProtectionDescription
+                            }
+                        >
+                            <Switch
+                                id="close-protection"
+                                checked={closeProtection}
+                                onCheckedChange={(checked) => {
+                                    setCloseProtection(checked)
+                                    localStorage.setItem(
+                                        STORAGE_CLOSE_PROTECTION_KEY,
+                                        checked.toString(),
+                                    )
+                                    onCloseProtectionChange?.(checked)
+                                }}
+                            />
+                        </SettingItem>
+
+                        {/* Diagram Actions */}
+                        <SettingItem
+                            label={dict.settings.diagramActions}
+                            description={
+                                dict.settings.diagramActionsDescription
+                            }
+                        >
+                            <div className="flex gap-2">
+                                <Button
+                                    id="history-button"
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={() => setShowHistory(true)}
+                                    disabled={diagramHistory.length === 0}
+                                    className="h-9 rounded-xl border-border-subtle hover:bg-interactive-hover"
+                                >
+                                    <History className="h-4 w-4 mr-1.5" />
+                                    {dict.settings.history}
+                                </Button>
+                                <Button
+                                    id="download-button"
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={() => setShowSaveDialog(true)}
+                                    className="h-9 rounded-xl border-border-subtle hover:bg-interactive-hover"
+                                >
+                                    <Download className="h-4 w-4 mr-1.5" />
+                                    {dict.settings.download}
                                 </Button>
                             </div>
-                            {error && (
+                        </SettingItem>
-                                <p className="text-xs text-destructive">
+                    </div>
-                                    {error}
-                                </p>
-                            )}
-                        </div>
-                    )}
-
-                    {/* Language */}
-                    <SettingItem
-                        label={dict.settings.language}
-                        description={dict.settings.languageDescription}
-                    >
-                        <Select
-                            value={currentLang}
-                            onValueChange={changeLanguage}
-                        >
-                            <SelectTrigger
-                                id="language-select"
-                                className="w-[120px] h-9 rounded-xl"
-                            >
-                                <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                                {i18n.locales.map((locale) => (
-                                    <SelectItem key={locale} value={locale}>
-                                        {LANGUAGE_LABELS[locale]}
-                                    </SelectItem>
-                                ))}
-                            </SelectContent>
-                        </Select>
-                    </SettingItem>
-
-                    {/* Theme */}
-                    <SettingItem
-                        label={dict.settings.theme}
-                        description={dict.settings.themeDescription}
-                    >
-                        <Button
-                            id="theme-toggle"
-                            variant="outline"
-                            size="icon"
-                            onClick={onToggleDarkMode}
-                            className="h-9 w-9 rounded-xl border-border-subtle hover:bg-interactive-hover"
-                        >
-                            {darkMode ? (
-                                <Sun className="h-4 w-4" />
-                            ) : (
-                                <Moon className="h-4 w-4" />
-                            )}
-                        </Button>
-                    </SettingItem>
-
-                    {/* Draw.io Style */}
-                    <SettingItem
-                        label={dict.settings.drawioStyle}
-                        description={`${dict.settings.drawioStyleDescription} ${
-                            drawioUi === "min"
-                                ? dict.settings.minimal
-                                : dict.settings.sketch
-                        }`}
-                    >
-                        <Button
-                            id="drawio-ui"
-                            variant="outline"
-                            onClick={onToggleDrawioUi}
-                            className="h-9 w-[120px] rounded-xl border-border-subtle hover:bg-interactive-hover font-normal"
-                        >
-                            {dict.settings.switchTo}{" "}
-                            {drawioUi === "min"
-                                ? dict.settings.sketch
-                                : dict.settings.minimal}
-                        </Button>
-                    </SettingItem>
-
-                    {/* Close Protection */}
-                    <SettingItem
-                        label={dict.settings.closeProtection}
-                        description={dict.settings.closeProtectionDescription}
-                    >
-                        <Switch
-                            id="close-protection"
-                            checked={closeProtection}
-                            onCheckedChange={(checked) => {
-                                setCloseProtection(checked)
-                                localStorage.setItem(
-                                    STORAGE_CLOSE_PROTECTION_KEY,
-                                    checked.toString(),
-                                )
-                                onCloseProtectionChange?.(checked)
-                            }}
-                        />
-                    </SettingItem>
                 </div>
-            </div>
 
-            {/* Footer */}
+                {/* Footer */}
-            <div className="px-6 py-4 border-t border-border-subtle bg-surface-1/50 rounded-b-2xl">
+                <div className="px-6 py-4 border-t border-border-subtle bg-surface-1/50 rounded-b-2xl">
-                <p className="text-xs text-muted-foreground text-center">
+                    <p className="text-xs text-muted-foreground text-center">
-                    Version {process.env.APP_VERSION}
+                        Version {process.env.APP_VERSION}
-                </p>
+                    </p>
-            </div>
+                </div>
-        </DialogContent>
+            </DialogContent>
+            ;(
+            <HistoryDialog
+                showHistory={showHistory}
+                onToggleHistory={setShowHistory}
+            />
+            )
+            <SaveDialog
+                open={showSaveDialog}
+                onOpenChange={setShowSaveDialog}
+                onSave={handleDiagramSave}
+                defaultFilename={`diagram-${new Date()
+                    .toISOString()
+                    .slice(0, 10)}
+`}
+            />
+        </>
     )
 }
 

docs/Cloudflare_Deploy.md

@@ -0,0 +1,267 @@
+# Deploy on Cloudflare Workers
+
+This project can be deployed as a **Cloudflare Worker** using the **OpenNext adapter**, giving you:
+
+- Global edge deployment
+- Very low latency
+- Free `workers.dev` hosting
+- Full Next.js ISR support via R2 (optional)
+
+> **Important Windows Note:** OpenNext and Wrangler are **not fully reliable on native Windows**. Recommended options:
+>
+> - Use **GitHub Codespaces** (works perfectly)
+> - OR use **WSL (Linux)**
+>
+> Pure Windows builds may fail due to WASM file path issues.
+
+---
+
+## Prerequisites
+
+1. A **Cloudflare account** (free tier works for basic deployment)
+2. **Node.js 18+**
+3. **Wrangler CLI** installed (dev dependency is fine):
+
+```bash
+npm install -D wrangler
+```
+
+4. Cloudflare login:
+
+```bash
+npx wrangler login
+```
+
+> **Note:** A payment method is only required if you want to enable R2 for ISR caching. Basic Workers deployment is free.
+
+---
+
+## Step 1 — Install dependencies
+
+```bash
+npm install
+```
+
+---
+
+## Step 2 — Configure environment variables
+
+Cloudflare uses a different file for local testing.
+
+### 1) Create `.dev.vars` (for Cloudflare local + deploy)
+
+```bash
+cp env.example .dev.vars
+```
+
+Fill in your API keys and configuration.
+
+### 2) Make sure `.env.local` also exists (for regular Next.js dev)
+
+```bash
+cp env.example .env.local
+```
+
+Fill in the same values there.
+
+---
+
+## Step 3 — Choose your deployment type
+
+### Option A: Deploy WITHOUT R2 (Simple, Free)
+
+If you don't need ISR caching, you can deploy without R2:
+
+**1. Use simple `open-next.config.ts`:**
+
+```ts
+import { defineCloudflareConfig } from "@opennextjs/cloudflare/config"
+
+export default defineCloudflareConfig({})
+```
+
+**2. Use simple `wrangler.jsonc` (without r2_buckets):**
+
+```jsonc
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "main": ".open-next/worker.js",
+  "name": "next-ai-draw-io-worker",
+  "compatibility_date": "2025-12-08",
+  "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
+  "assets": {
+    "directory": ".open-next/assets",
+    "binding": "ASSETS"
+  },
+  "services": [
+    {
+      "binding": "WORKER_SELF_REFERENCE",
+      "service": "next-ai-draw-io-worker"
+    }
+  ]
+}
+```
+
+Skip to **Step 4**.
+
+---
+
+### Option B: Deploy WITH R2 (Full ISR Support)
+
+R2 enables **Incremental Static Regeneration (ISR)** caching. Requires a payment method on your Cloudflare account.
+
+**1. Create an R2 bucket** in the Cloudflare Dashboard:
+
+- Go to **Storage & Databases → R2**
+- Click **Create bucket**
+- Name it: `next-inc-cache`
+
+**2. Configure `open-next.config.ts`:**
+
+```ts
+import { defineCloudflareConfig } from "@opennextjs/cloudflare/config"
+import r2IncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache"
+
+export default defineCloudflareConfig({
+  incrementalCache: r2IncrementalCache,
+})
+```
+
+**3. Configure `wrangler.jsonc` (with R2):**
+
+```jsonc
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "main": ".open-next/worker.js",
+  "name": "next-ai-draw-io-worker",
+  "compatibility_date": "2025-12-08",
+  "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
+  "assets": {
+    "directory": ".open-next/assets",
+    "binding": "ASSETS"
+  },
+  "r2_buckets": [
+    {
+      "binding": "NEXT_INC_CACHE_R2_BUCKET",
+      "bucket_name": "next-inc-cache"
+    }
+  ],
+  "services": [
+    {
+      "binding": "WORKER_SELF_REFERENCE",
+      "service": "next-ai-draw-io-worker"
+    }
+  ]
+}
+```
+
+> **Important:** The `bucket_name` must exactly match the name you created in the Cloudflare dashboard.
+
+---
+
+## Step 4 — Register a workers.dev subdomain (first-time only)
+
+Before your first deployment, you need a workers.dev subdomain.
+
+**Option 1: Via Cloudflare Dashboard (Recommended)**
+
+Visit: https://dash.cloudflare.com → Workers & Pages → Overview → Set up a subdomain
+
+**Option 2: During deploy**
+
+When you run `npm run deploy`, Wrangler may prompt:
+
+```
+Would you like to register a workers.dev subdomain? (Y/n)
+```
+
+Type `Y` and choose a subdomain name.
+
+> **Note:** In CI/CD or non-interactive environments, the prompt won't appear. Register via the dashboard first.
+
+---
+
+## Step 5 — Deploy to Cloudflare
+
+```bash
+npm run deploy
+```
+
+What the script does:
+
+- Builds the Next.js app
+- Converts it to a Cloudflare Worker via OpenNext
+- Uploads static assets
+- Publishes the Worker
+
+Your app will be available at:
+
+```
+https://<worker-name>.<your-subdomain>.workers.dev
+```
+
+---
+
+## Common issues & fixes
+
+### `You need to register a workers.dev subdomain`
+
+**Cause:** No workers.dev subdomain registered for your account.
+
+**Fix:** Go to https://dash.cloudflare.com → Workers & Pages → Set up a subdomain.
+
+---
+
+### `Please enable R2 through the Cloudflare Dashboard`
+
+**Cause:** R2 is configured in wrangler.jsonc but not enabled on your account.
+
+**Fix:** Either enable R2 (requires payment method) or use Option A (deploy without R2).
+
+---
+
+### `No R2 binding "NEXT_INC_CACHE_R2_BUCKET" found`
+
+**Cause:** `r2_buckets` is missing from `wrangler.jsonc`.
+
+**Fix:** Add the `r2_buckets` section or switch to Option A (without R2).
+
+---
+
+### `Can't set compatibility date in the future`
+
+**Cause:** `compatibility_date` in wrangler config is set to a future date.
+
+**Fix:** Change `compatibility_date` to today or an earlier date.
+
+---
+
+### Windows error: `resvg.wasm?module` (ENOENT)
+
+**Cause:** Windows filenames cannot include `?`, but a wasm asset uses `?module` in its filename.
+
+**Fix:** Build/deploy on Linux (WSL, Codespaces, or CI).
+
+---
+
+## Optional: Preview locally
+
+Preview the Worker locally before deploying:
+
+```bash
+npm run preview
+```
+
+---
+
+## Summary
+
+| Feature | Without R2 | With R2 |
+|---------|------------|---------|
+| Cost | Free | Requires payment method |
+| ISR Caching | No | Yes |
+| Static Pages | Yes | Yes |
+| API Routes | Yes | Yes |
+| Setup Complexity | Simple | Moderate |
+
+Choose **without R2** for testing or simple apps. Choose **with R2** for production apps that need ISR caching.

docs/offline-deployment.md

@@ -33,7 +33,7 @@ services:
 | Scenario | URL Value |
 |----------|-----------|
 | Localhost | `http://localhost:8080` |
-| Remote/Server | `http://YOUR_SERVER_IP:8080` or `https://drawio.your-domain.com` |
+| Remote/Server | `http://YOUR_SERVER_IP:8080` |
 
 **Do NOT use** internal Docker aliases like `http://drawio:8080`; the browser cannot resolve them.
 

docs/shape-libraries/alibaba_cloud.md

@@ -6,7 +6,7 @@
 ## Usage
 
 ```xml
-<mxCell value="label" style="shape=mxgraph.alibaba_cloud.{shape};fillColor=#FF6A00;strokeColor=none;" vertex="1" parent="1">
+<mxCell value="label" style="shape=mxgraph.alibaba_cloud.{shape};fillColor=#FF6A00;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
   <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
 </mxCell>
 ```

docs/shape-libraries/atlassian.md

@@ -6,7 +6,7 @@
 ## Usage
 
 ```xml
-<mxCell value="label" style="image;aspect=fixed;image=img/lib/atlassian/Jira_Logo.svg;" vertex="1" parent="1">
+<mxCell value="label" style="image;aspect=fixed;image=img/lib/atlassian/Jira_Logo.svg;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
   <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
 </mxCell>
 ```

docs/shape-libraries/aws4.md

@@ -6,7 +6,7 @@
 ## Usage
 
 ```xml
-<mxCell value="label" style="shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.{shape};fillColor=#ED7100;strokeColor=#ffffff;" vertex="1" parent="1">
+<mxCell value="label" style="shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.{shape};fillColor=#ED7100;strokeColor=#ffffff;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
   <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
 </mxCell>
 ```

docs/shape-libraries/azure2.md

@@ -6,7 +6,7 @@
 ## Usage
 
 ```xml
-<mxCell value="label" style="image;aspect=fixed;image=img/lib/azure2/compute/Virtual_Machine.svg;" vertex="1" parent="1">
+<mxCell value="label" style="image;aspect=fixed;image=img/lib/azure2/compute/Virtual_Machine.svg;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
   <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
 </mxCell>
 ```

docs/shape-libraries/cisco19.md

@@ -6,7 +6,7 @@
 ## Usage
 
 ```xml
-<mxCell value="label" style="shape=mxgraph.cisco19.rect;prIcon={shape};fillColor=#00bceb;strokeColor=none;" vertex="1" parent="1">
+<mxCell value="label" style="shape=mxgraph.cisco19.rect;prIcon={shape};fillColor=#00bceb;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
   <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
 </mxCell>
 ```

docs/shape-libraries/citrix.md

@@ -6,7 +6,7 @@
 ## Usage
 
 ```xml
-<mxCell value="label" style="shape=mxgraph.citrix.{shape};fillColor=#00A4E4;strokeColor=none;" vertex="1" parent="1">
+<mxCell value="label" style="shape=mxgraph.citrix.{shape};fillColor=#00A4E4;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
   <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
 </mxCell>
 ```

docs/shape-libraries/gcp2.md

@@ -6,7 +6,7 @@
 ## Usage
 
 ```xml
-<mxCell value="label" style="shape=mxgraph.gcp2.{shape};fillColor=#4285F4;strokeColor=none;" vertex="1" parent="1">
+<mxCell value="label" style="shape=mxgraph.gcp2.{shape};fillColor=#4285F4;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
   <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
 </mxCell>
 ```

docs/shape-libraries/kubernetes.md

@@ -6,7 +6,7 @@
 ## Usage
 
 ```xml
-<mxCell value="label" style="shape=mxgraph.kubernetes.icon;prIcon={shape};fillColor=#326CE5;strokeColor=none;" vertex="1" parent="1">
+<mxCell value="label" style="shape=mxgraph.kubernetes.icon;prIcon={shape};fillColor=#326CE5;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
   <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
 </mxCell>
 ```

docs/shape-libraries/mscae.md

@@ -6,7 +6,7 @@
 ## Usage
 
 ```xml
-<mxCell value="label" style="shape=mxgraph.mscae.cloud.azure;fillColor=#0078D4;strokeColor=none;" vertex="1" parent="1">
+<mxCell value="label" style="shape=mxgraph.mscae.cloud.azure;fillColor=#0078D4;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
   <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
 </mxCell>
 ```

docs/shape-libraries/network.md

@@ -6,7 +6,7 @@
 ## Usage
 
 ```xml
-<mxCell value="label" style="shape=mxgraph.networks.server;fillColor=#29AAE1;strokeColor=none;" vertex="1" parent="1">
+<mxCell value="label" style="shape=mxgraph.networks.server;fillColor=#29AAE1;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
   <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
 </mxCell>
 ```

docs/shape-libraries/openstack.md

@@ -6,7 +6,7 @@
 ## Usage
 
 ```xml
-<mxCell value="label" style="shape=mxgraph.openstack.{shape};fillColor=#3F51B5;strokeColor=none;" vertex="1" parent="1">
+<mxCell value="label" style="shape=mxgraph.openstack.{shape};fillColor=#3F51B5;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
   <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
 </mxCell>
 ```

docs/shape-libraries/salesforce.md

@@ -6,7 +6,7 @@
 ## Usage
 
 ```xml
-<mxCell value="label" style="shape=mxgraph.salesforce.analytics;fillColor=#7f8de1;strokeColor=none;" vertex="1" parent="1">
+<mxCell value="label" style="shape=mxgraph.salesforce.analytics;fillColor=#7f8de1;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
   <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
 </mxCell>
 ```

docs/shape-libraries/sap.md

@@ -6,7 +6,7 @@
 ## Usage
 
 ```xml
-<mxCell value="label" style="image;aspect=fixed;image=img/lib/sap/SAP_Logo.svg;" vertex="1" parent="1">
+<mxCell value="label" style="image;aspect=fixed;image=img/lib/sap/SAP_Logo.svg;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
   <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
 </mxCell>
 ```

docs/shape-libraries/vvd.md

@@ -6,7 +6,7 @@
 ## Usage
 
 ```xml
-<mxCell value="label" style="shape=mxgraph.vvd.{shape};fillColor=#00AEEF;strokeColor=none;" vertex="1" parent="1">
+<mxCell value="label" style="shape=mxgraph.vvd.{shape};fillColor=#00AEEF;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
   <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
 </mxCell>
 ```

docs/shape-libraries/webicons.md

@@ -6,7 +6,7 @@
 ## Usage
 
 ```xml
-<mxCell value="label" style="shape=mxgraph.webicons.{shape};fillColor=#3b5998;strokeColor=none;" vertex="1" parent="1">
+<mxCell value="label" style="shape=mxgraph.webicons.{shape};fillColor=#3b5998;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
   <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
 </mxCell>
 ```

hooks/use-model-config.ts

@@ -109,9 +109,11 @@ export interface UseModelConfigReturn {
     models: FlattenedModel[]
     selectedModel: FlattenedModel | undefined
     selectedModelId: string | undefined
+    showUnvalidatedModels: boolean
 
     // Actions
     setSelectedModelId: (modelId: string | undefined) => void
+    setShowUnvalidatedModels: (show: boolean) => void
     addProvider: (provider: ProviderName) => ProviderConfig
     updateProvider: (
         providerId: string,
@@ -160,6 +162,13 @@ export function useModelConfig(): UseModelConfigReturn {
         }))
     }, [])
 
+    const setShowUnvalidatedModels = useCallback((show: boolean) => {
+        setConfig((prev) => ({
+            ...prev,
+            showUnvalidatedModels: show,
+        }))
+    }, [])
+
     const addProvider = useCallback(
         (provider: ProviderName): ProviderConfig => {
             const newProvider = createProviderConfig(provider)
@@ -278,7 +287,9 @@ export function useModelConfig(): UseModelConfigReturn {
         models,
         selectedModel,
         selectedModelId: config.selectedModelId,
+        showUnvalidatedModels: config.showUnvalidatedModels ?? false,
         setSelectedModelId,
+        setShowUnvalidatedModels,
         addProvider,
         updateProvider,
         deleteProvider,

lib/dynamo-quota-manager.ts

@@ -27,6 +27,7 @@ try {
 
 /**
  * Get today's date string in the configured timezone (YYYY-MM-DD format)
+ * This is used as the Sort Key (SK) for per-day tracking
  */
 function getTodayInTimezone(): string {
     return new Intl.DateTimeFormat("en-CA", {
@@ -61,8 +62,8 @@ interface QuotaCheckResult {
 
 /**
  * Check all quotas and increment request count atomically.
- * Uses ConditionExpression to prevent race conditions.
+ * Uses composite key (PK=user, SK=date) for per-day tracking.
- * Returns which limit was exceeded if any.
+ * Each day automatically gets a new item - no explicit reset needed.
  */
 export async function checkAndIncrementRequest(
     ip: string,
@@ -73,77 +74,33 @@ export async function checkAndIncrementRequest(
         return { allowed: true }
     }
 
-    const today = getTodayInTimezone()
+    const pk = ip // User identifier (base64 IP)
+    const sk = getTodayInTimezone() // Date as sort key (YYYY-MM-DD)
     const currentMinute = Math.floor(Date.now() / 60000).toString()
-    const ttl = Math.floor(Date.now() / 1000) + 7 * 24 * 60 * 60
 
     try {
-        // First, try to reset counts if it's a new day (atomic day reset)
+        // Single atomic update - handles creation AND increment
-        // This will succeed only if lastResetDate < today or doesn't exist
+        // New day automatically creates new item (different SK)
-        try {
+        // Note: lastMinute/tpmCount are managed by recordTokenUsage only
-            await client.send(
-                new UpdateItemCommand({
-                    TableName: TABLE,
-                    Key: { PK: { S: `IP#${ip}` } },
-                    // Reset all counts to 1/0 for the new day
-                    UpdateExpression: `
-                        SET lastResetDate = :today,
-                            dailyReqCount = :one,
-                            dailyTokenCount = :zero,
-                            lastMinute = :minute,
-                            tpmCount = :zero,
-                            #ttl = :ttl
-                    `,
-                    // Only succeed if it's a new day (or new item)
-                    ConditionExpression: `
-                        attribute_not_exists(lastResetDate) OR lastResetDate < :today
-                    `,
-                    ExpressionAttributeNames: { "#ttl": "ttl" },
-                    ExpressionAttributeValues: {
-                        ":today": { S: today },
-                        ":zero": { N: "0" },
-                        ":one": { N: "1" },
-                        ":minute": { S: currentMinute },
-                        ":ttl": { N: String(ttl) },
-                    },
-                }),
-            )
-            // New day reset successful
-            return { allowed: true }
-        } catch (resetError: any) {
-            // If condition failed, it's the same day - continue to increment logic
-            if (!(resetError instanceof ConditionalCheckFailedException)) {
-                throw resetError // Re-throw unexpected errors
-            }
-        }
-
-        // Same day - increment request count with limit checks
         await client.send(
             new UpdateItemCommand({
                 TableName: TABLE,
-                Key: { PK: { S: `IP#${ip}` } },
+                Key: {
-                // Increment request count, handle minute boundary for TPM
+                    PK: { S: pk },
-                UpdateExpression: `
+                    SK: { S: sk },
-                    SET lastMinute = :minute,
+                },
-                        tpmCount = if_not_exists(tpmCount, :zero),
+                UpdateExpression: "ADD reqCount :one",
-                        #ttl = :ttl
-                    ADD dailyReqCount :one
-                `,
                 // Check all limits before allowing increment
+                // TPM check: allow if new minute OR under limit
                 ConditionExpression: `
-                    lastResetDate = :today AND
+                    (attribute_not_exists(reqCount) OR reqCount < :reqLimit) AND
-                    (attribute_not_exists(dailyReqCount) OR dailyReqCount < :reqLimit) AND
+                    (attribute_not_exists(tokenCount) OR tokenCount < :tokenLimit) AND
-                    (attribute_not_exists(dailyTokenCount) OR dailyTokenCount < :tokenLimit) AND
                     (attribute_not_exists(lastMinute) OR lastMinute <> :minute OR
                      attribute_not_exists(tpmCount) OR tpmCount < :tpmLimit)
                 `,
-                ExpressionAttributeNames: { "#ttl": "ttl" },
                 ExpressionAttributeValues: {
-                    ":today": { S: today },
-                    ":zero": { N: "0" },
                     ":one": { N: "1" },
                     ":minute": { S: currentMinute },
-                    ":ttl": { N: String(ttl) },
                     ":reqLimit": { N: String(limits.requests || 999999) },
                     ":tokenLimit": { N: String(limits.tokens || 999999) },
                     ":tpmLimit": { N: String(limits.tpm || 999999) },
@@ -160,42 +117,39 @@ export async function checkAndIncrementRequest(
                 const getResult = await client.send(
                     new GetItemCommand({
                         TableName: TABLE,
-                        Key: { PK: { S: `IP#${ip}` } },
+                        Key: {
+                            PK: { S: pk },
+                            SK: { S: sk },
+                        },
                     }),
                 )
 
                 const item = getResult.Item
-                const storedDate = item?.lastResetDate?.S
                 const storedMinute = item?.lastMinute?.S
-                const isNewDay = !storedDate || storedDate < today
 
-                const dailyReqCount = isNewDay
+                const reqCount = Number(item?.reqCount?.N || 0)
-                    ? 0
+                const tokenCount = Number(item?.tokenCount?.N || 0)
-                    : Number(item?.dailyReqCount?.N || 0)
-                const dailyTokenCount = isNewDay
-                    ? 0
-                    : Number(item?.dailyTokenCount?.N || 0)
                 const tpmCount =
                     storedMinute !== currentMinute
                         ? 0
                         : Number(item?.tpmCount?.N || 0)
 
                 // Determine which limit was exceeded
-                if (limits.requests > 0 && dailyReqCount >= limits.requests) {
+                if (limits.requests > 0 && reqCount >= limits.requests) {
                     return {
                         allowed: false,
                         type: "request",
                         error: "Daily request limit exceeded",
-                        used: dailyReqCount,
+                        used: reqCount,
                         limit: limits.requests,
                     }
                 }
-                if (limits.tokens > 0 && dailyTokenCount >= limits.tokens) {
+                if (limits.tokens > 0 && tokenCount >= limits.tokens) {
                     return {
                         allowed: false,
                         type: "token",
                         error: "Daily token limit exceeded",
-                        used: dailyTokenCount,
+                        used: tokenCount,
                         limit: limits.tokens,
                     }
                 }
@@ -210,7 +164,7 @@ export async function checkAndIncrementRequest(
                 }
 
                 // Condition failed but no limit clearly exceeded - race condition edge case
-                // Fail safe by allowing (could be a reset race)
+                // Fail safe by allowing (could be a TPM reset race)
                 console.warn(
                     `[quota] Condition failed but no limit exceeded for IP prefix: ${ip.slice(0, 8)}...`,
                 )
@@ -233,7 +187,7 @@ export async function checkAndIncrementRequest(
 
 /**
  * Record token usage after response completes.
- * Uses atomic operations to update both daily token count and TPM count.
+ * Uses composite key (PK=user, SK=date) for per-day tracking.
  * Handles minute boundaries atomically to prevent race conditions.
  */
 export async function recordTokenUsage(
@@ -244,24 +198,27 @@ export async function recordTokenUsage(
     if (!client || !TABLE) return
     if (!Number.isFinite(tokens) || tokens <= 0) return
 
+    const pk = ip // User identifier (base64 IP)
+    const sk = getTodayInTimezone() // Date as sort key (YYYY-MM-DD)
     const currentMinute = Math.floor(Date.now() / 60000).toString()
-    const ttl = Math.floor(Date.now() / 1000) + 7 * 24 * 60 * 60
 
     try {
-        // Try to update assuming same minute (most common case)
+        // Try to update for same minute OR new item (most common cases)
-        // Uses condition to ensure we're in the same minute
+        // Handles: 1) new item (no lastMinute), 2) same minute (lastMinute matches)
         await client.send(
             new UpdateItemCommand({
                 TableName: TABLE,
-                Key: { PK: { S: `IP#${ip}` } },
+                Key: {
+                    PK: { S: pk },
+                    SK: { S: sk },
+                },
                 UpdateExpression:
-                    "SET #ttl = :ttl ADD dailyTokenCount :tokens, tpmCount :tokens",
+                    "SET lastMinute = if_not_exists(lastMinute, :minute) ADD tokenCount :tokens, tpmCount :tokens",
-                ConditionExpression: "lastMinute = :minute",
+                ConditionExpression:
-                ExpressionAttributeNames: { "#ttl": "ttl" },
+                    "attribute_not_exists(lastMinute) OR lastMinute = :minute",
                 ExpressionAttributeValues: {
                     ":minute": { S: currentMinute },
                     ":tokens": { N: String(tokens) },
-                    ":ttl": { N: String(ttl) },
                 },
             }),
         )
@@ -272,14 +229,15 @@ export async function recordTokenUsage(
                 await client.send(
                     new UpdateItemCommand({
                         TableName: TABLE,
-                        Key: { PK: { S: `IP#${ip}` } },
+                        Key: {
+                            PK: { S: pk },
+                            SK: { S: sk },
+                        },
                         UpdateExpression:
-                            "SET lastMinute = :minute, tpmCount = :tokens, #ttl = :ttl ADD dailyTokenCount :tokens",
+                            "SET lastMinute = :minute, tpmCount = :tokens ADD tokenCount :tokens",
-                        ExpressionAttributeNames: { "#ttl": "ttl" },
                         ExpressionAttributeValues: {
                             ":minute": { S: currentMinute },
                             ":tokens": { N: String(tokens) },
-                            ":ttl": { N: String(ttl) },
                         },
                     }),
                 )

lib/i18n/dictionaries/en.json

@@ -98,7 +98,11 @@
         "minimal": "Minimal",
         "sketch": "Sketch",
         "closeProtection": "Close Protection",
-        "closeProtectionDescription": "Show confirmation when leaving the page."
+        "closeProtectionDescription": "Show confirmation when leaving the page.",
+        "diagramActions": "Diagram Actions",
+        "diagramActionsDescription": "Manage diagram history and exports",
+        "history": "History",
+        "download": "Download"
     },
     "save": {
         "title": "Save Diagram",
@@ -243,6 +247,9 @@
         "default": "Default",
         "serverDefault": "Server Default",
         "configureModels": "Configure Models...",
-        "onlyVerifiedShown": "Only verified models are shown"
+        "onlyVerifiedShown": "Only verified models are shown",
+        "showUnvalidatedModels": "Show unvalidated models",
+        "allModelsShown": "All models are shown (including unvalidated)",
+        "unvalidatedModelWarning": "This model has not been validated"
     }
 }

lib/i18n/dictionaries/ja.json

@@ -98,7 +98,11 @@
         "minimal": "ミニマル",
         "sketch": "スケッチ",
         "closeProtection": "ページ離脱確認",
-        "closeProtectionDescription": "ページを離れる際に確認を表示します。"
+        "closeProtectionDescription": "ページを離れる際に確認を表示します。",
+        "diagramActions": "ダイアグラム操作",
+        "diagramActionsDescription": "ダイアグラムの履歴とエクスポートを管理",
+        "history": "履歴",
+        "download": "ダウンロード"
     },
     "save": {
         "title": "ダイアグラムを保存",
@@ -243,6 +247,9 @@
         "default": "デフォルト",
         "serverDefault": "サーバーデフォルト",
         "configureModels": "モデルを設定...",
-        "onlyVerifiedShown": "検証済みのモデルのみ表示"
+        "onlyVerifiedShown": "検証済みのモデルのみ表示",
+        "showUnvalidatedModels": "未検証のモデルを表示",
+        "allModelsShown": "すべてのモデルを表示（未検証を含む）",
+        "unvalidatedModelWarning": "このモデルは検証されていません"
     }
 }

lib/i18n/dictionaries/zh.json

@@ -98,7 +98,11 @@
         "minimal": "简约",
         "sketch": "草图",
         "closeProtection": "关闭确认",
-        "closeProtectionDescription": "离开页面时显示确认。"
+        "closeProtectionDescription": "离开页面时显示确认。",
+        "diagramActions": "图表操作",
+        "diagramActionsDescription": "管理图表历史记录和导出",
+        "history": "历史记录",
+        "download": "下载"
     },
     "save": {
         "title": "保存图表",
@@ -243,6 +247,9 @@
         "default": "默认",
         "serverDefault": "服务器默认",
         "configureModels": "配置模型...",
-        "onlyVerifiedShown": "仅显示已验证的模型"
+        "onlyVerifiedShown": "仅显示已验证的模型",
+        "showUnvalidatedModels": "显示未验证的模型",
+        "allModelsShown": "显示所有模型（包括未验证的）",
+        "unvalidatedModelWarning": "此模型尚未验证"
     }
 }

lib/types/model-config.ts

@@ -40,6 +40,7 @@ export interface MultiModelConfig {
     version: 1
     providers: ProviderConfig[]
     selectedModelId?: string // Currently selected model's UUID
+    showUnvalidatedModels?: boolean // Show models that haven't been validated
 }
 
 // Flattened model for dropdown display

next.config.ts

@@ -17,3 +17,13 @@ const nextConfig: NextConfig = {
 }
 
 export default nextConfig
+
+// Initialize OpenNext Cloudflare for local development only
+// This must be a dynamic import to avoid loading workerd binary during builds
+if (process.env.NODE_ENV === "development") {
+    import("@opennextjs/cloudflare").then(
+        ({ initOpenNextCloudflareForDev }) => {
+            initOpenNextCloudflareForDev()
+        },
+    )
+}

open-next.config.ts

@@ -0,0 +1,7 @@
+// default open-next.config.ts file created by @opennextjs/cloudflare
+import { defineCloudflareConfig } from "@opennextjs/cloudflare/config"
+import r2IncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache"
+
+export default defineCloudflareConfig({
+    incrementalCache: r2IncrementalCache,
+})

package.json

@@ -12,6 +12,10 @@
         "format": "biome check --write .",
         "check": "biome ci",
         "prepare": "husky",
+        "preview": "opennextjs-cloudflare build && opennextjs-cloudflare preview",
+        "deploy": "opennextjs-cloudflare build && opennextjs-cloudflare deploy",
+        "upload": "opennextjs-cloudflare build && opennextjs-cloudflare upload",
+        "cf-typegen": "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts",
         "electron:dev": "node scripts/electron-dev.mjs",
         "electron:build": "npm run build && npm run electron:compile",
         "electron:compile": "npx esbuild electron/main/index.ts electron/preload/index.ts electron/preload/settings.ts --bundle --platform=node --outdir=dist-electron --external:electron --sourcemap --packages=external && npx shx cp -r electron/settings dist-electron/",
@@ -39,6 +43,7 @@
         "@langfuse/otel": "^4.4.4",
         "@langfuse/tracing": "^4.4.9",
         "@next/third-parties": "^16.0.6",
+        "@opennextjs/cloudflare": "1.14.7",
         "@openrouter/ai-sdk-provider": "^1.5.4",
         "@opentelemetry/exporter-trace-otlp-http": "^0.208.0",
         "@opentelemetry/sdk-trace-node": "^2.2.0",
@@ -62,7 +67,7 @@
         "js-tiktoken": "^1.0.21",
         "jsdom": "^26.0.0",
         "jsonrepair": "^3.13.1",
-        "lucide-react": "^0.483.0",
+        "lucide-react": "^0.562.0",
         "motion": "^12.23.25",
         "negotiator": "^1.0.0",
         "next": "^16.0.7",
@@ -104,14 +109,15 @@
         "electron": "^39.2.7",
         "electron-builder": "^26.0.12",
         "esbuild": "^0.27.2",
-        "eslint": "9.39.1",
+        "eslint": "9.39.2",
-        "eslint-config-next": "16.0.5",
+        "eslint-config-next": "16.1.1",
         "husky": "^9.1.7",
         "lint-staged": "^16.2.7",
         "shx": "^0.4.0",
         "tailwindcss": "^4",
         "typescript": "^5",
-        "wait-on": "^9.0.3"
+        "wait-on": "^9.0.3",
+        "wrangler": "4.54.0"
     },
     "overrides": {
         "@openrouter/ai-sdk-provider": {

packages/mcp-server/package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "@next-ai-drawio/mcp-server",
-    "version": "0.1.5",
+    "version": "0.1.6",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@next-ai-drawio/mcp-server",
-            "version": "0.1.5",
+            "version": "0.1.6",
             "license": "Apache-2.0",
             "dependencies": {
                 "@modelcontextprotocol/sdk": "^1.0.4",
@@ -481,9 +481,9 @@
             }
         },
         "node_modules/@modelcontextprotocol/sdk": {
-            "version": "1.25.0",
+            "version": "1.25.1",
-            "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.25.0.tgz",
+            "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.25.1.tgz",
-            "integrity": "sha512-z0Zhn/LmQ3yz91dEfd5QgS7DpSjA4pk+3z2++zKgn5L6iDFM9QapsVoAQSbKLvlrFsZk9+ru6yHHWNq2lCYJKQ==",
+            "integrity": "sha512-yO28oVFFC7EBoiKdAn+VqRm+plcfv4v0xp6osG/VsCB0NlPZWi87ajbCZZ8f/RvOFLEu7//rSRmuZZ7lMoe3gQ==",
             "license": "MIT",
             "dependencies": {
                 "@hono/node-server": "^1.19.7",
@@ -1034,6 +1034,7 @@
             "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
             "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "accepts": "^2.0.0",
                 "body-parser": "^2.2.1",
@@ -2027,6 +2028,7 @@
             "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
             "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
             "license": "MIT",
+            "peer": true,
             "funding": {
                 "url": "https://github.com/sponsors/colinhacks"
             }

public/_headers

@@ -0,0 +1,2 @@
+/_next/static/*
+  Cache-Control: public,max-age=31536000,immutable

public/favicon-white.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1536.000000pt" height="1536.000000pt" viewBox="0 0 1536.000000 1536.000000"
+ preserveAspectRatio="xMidYMid meet">
+<g transform="translate(0.000000,1536.000000) scale(0.100000,-0.100000)"
+fill="#ffffff" stroke="none">
+<path d="M2765 14404 c-100 -29 -181 -58 -225 -82 -227 -125 -359 -296 -431
+-560 -19 -70 -19 -108 -19 -1175 0 -1068 1 -1104 20 -1172 58 -206 159 -356
+319 -474 71 -53 199 -121 226 -121 9 0 26 -5 38 -12 12 -6 62 -19 112 -29 85
+-17 207 -18 2219 -19 1172 0 2133 -3 2138 -8 4 -4 7 -246 6 -538 l-3 -529
+-2330 -5 c-2506 -6 -2373 -3 -2470 -54 -61 -31 -150 -113 -194 -178 -87 -128
+-82 -77 -90 -1025 l-6 -838 -360 -6 c-292 -4 -368 -8 -405 -21 -194 -68 -303
+-177 -373 -372 l-22 -61 1 -2887 c1 -2716 2 -2890 18 -2935 56 -153 161 -276
+286 -334 126 -59 0 -54 1400 -54 1394 0 1290 -4 1410 53 95 45 198 148 242
+241 62 133 58 -93 58 3026 0 2992 1 2883 -40 2990 -59 156 -183 272 -360 337
+-25 9 -146 14 -440 18 l-405 5 0 540 0 540 2020 3 c1111 1 2030 0 2043 -3 l22
+-5 -2 -538 -3 -537 -380 -6 c-312 -4 -388 -8 -426 -21 -195 -68 -326 -204
+-383 -399 -15 -51 -16 -295 -16 -2921 0 -2778 1 -2867 19 -2920 36 -104 72
+-167 134 -230 75 -78 115 -105 222 -151 l50 -22 1219 -3 c672 -1 1255 1 1300
+6 109 12 217 63 298 140 73 69 107 118 144 208 l29 69 3 2880 c2 2687 1 2884
+-15 2945 -48 183 -188 332 -373 398 -37 13 -114 17 -430 21 l-385 6 -3 534
+c-2 421 0 536 10 543 7 4 925 8 2039 8 1718 0 2028 -2 2038 -14 8 -10 11 -154
+11 -531 -1 -284 -4 -523 -7 -531 -4 -12 -69 -14 -392 -14 -354 0 -391 -2 -448
+-20 -168 -52 -282 -148 -353 -295 -22 -45 -40 -91 -40 -103 0 -11 -5 -33 -10
+-47 -7 -18 -10 -988 -10 -2875 0 -2393 2 -2858 14 -2902 43 -167 148 -298 293
+-369 57 -27 107 -44 151 -50 88 -11 2429 -11 2508 0 210 31 416 238 445 450 6
+39 8 1245 7 2926 -3 2713 -4 2862 -21 2900 -41 93 -74 150 -110 191 -46 52
+-149 134 -169 134 -8 0 -19 5 -24 10 -6 6 -42 19 -80 30 -63 18 -100 20 -415
+20 -307 0 -348 2 -353 16 -3 9 -6 390 -6 848 0 797 -1 834 -19 886 -31 87 -50
+118 -111 183 -66 70 -141 119 -221 144 -50 16 -228 18 -2389 23 l-2335 5 0
+535 0 535 2165 5 c1191 3 2170 8 2176 12 6 4 35 12 65 17 201 35 435 198 539
+376 55 93 82 153 110 245 19 63 20 94 20 1167 0 1047 -1 1106 -19 1180 -70
+290 -275 523 -539 613 -160 54 232 50 -5028 49 -4182 0 -4856 -2 -4899 -15z"/>
+</g>
+</svg>

wrangler.jsonc

@@ -0,0 +1,23 @@
+{
+    "$schema": "node_modules/wrangler/config-schema.json",
+    "main": ".open-next/worker.js",
+    "name": "next-ai-draw-io-worker",
+    "compatibility_date": "2025-12-08", // must be a today or past compatibility_date
+    "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
+    "assets": {
+        "directory": ".open-next/assets",
+        "binding": "ASSETS"
+    },
+    "r2_buckets": [
+        {
+            "binding": "NEXT_INC_CACHE_R2_BUCKET",
+            "bucket_name": "next-inc-cache"
+        }
+    ],
+    "services": [
+        {
+            "binding": "WORKER_SELF_REFERENCE",
+            "service": "next-ai-draw-io-worker"
+        }
+    ]
+}