Add dprint formatting, typecheck script, and CI check step

Co-Authored-By: Warp <agent@warp.dev>

Author: ComputelessComputer

.github/workflows/frontend_ci.yml

@@ -9,6 +9,7 @@ on:
       - "bun.lock"
       - "tsconfig*.json"
       - "vite.config.*"
+      - "dprint.json"
   pull_request:
     branches: [main]
     paths:
@@ -17,6 +18,7 @@ on:
       - "bun.lock"
       - "tsconfig*.json"
       - "vite.config.*"
+      - "dprint.json"
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -36,3 +38,9 @@ jobs:
 
       - name: Typecheck and build frontend
         run: bun run build
+
+      - name: Install dprint
+        run: curl -fsSL https://dprint.dev/install.sh | sh && echo "$HOME/.dprint/bin" >> $GITHUB_PATH
+
+      - name: Check formatting
+        run: dprint check

agents.md

@@ -1,9 +1,11 @@
 # Agents
 
 ## Project Overview
+
 Philo is a daily journaling desktop app that lets users generate custom React mini-apps (widgets) inline via AI. Built with Tauri v2, React 19, TypeScript, TipTap, and Tailwind CSS v4.
 
 ## Stack
+
 - **Desktop shell**: Tauri v2 (Rust backend)
 - **Frontend**: Vite 7 + React 19 + TypeScript 5.8
 - **Editor**: TipTap (ProseMirror-based) with custom extensions
@@ -12,12 +14,19 @@ Philo is a daily journaling desktop app that lets users generate custom React mi
 - **Storage**: Tauri `fs` plugin → local filesystem (`$APPDATA/philo/`)
 
 ## Commands
+
 - `bun run dev` — Start Vite dev server
 - `bun run build` — TypeScript check + Vite build
 - `bun run tauri dev` — Run full Tauri app in dev mode
 - `bun run tauri build` — Production build
+- `bun run typecheck` — Run TypeScript type checking (`tsc --noEmit`)
+- `bun run fmt` — Format code with dprint
+- `bun run fmt:check` — Check formatting without writing (CI)
+- `bun run check` — Run typecheck + format (`bun run typecheck && dprint fmt`)
+- `cargo fmt --manifest-path src-tauri/Cargo.toml` — Format Rust code
 
 ## Project Structure
+
 ```
 src/
   components/
@@ -35,13 +44,15 @@ src-tauri/         # Rust backend (Tauri v2)
 ```
 
 ## Architecture Notes
+
 - One JSON file per day stored in `$APPDATA/philo/journal/` (e.g. `2026-02-14.json`)
 - Daily notes contain TipTap JSON content + task metadata
 - Tasks have `originDate` tracking for rollover — unchecked tasks carry forward to the next day
 - Widget rendering uses sandboxed iframes with Sucrase for client-side TSX transpilation
 - Widgets communicate with host via `postMessage` (state, theme, resize)
 
 ## Conventions
+
 - Use TypeScript strict mode
 - Use Tailwind CSS utility classes for styling
 - Use `nanoid` for generating unique IDs
@@ -50,4 +61,5 @@ src-tauri/         # Rust backend (Tauri v2)
 - Storage operations go through `services/storage.ts`
 
 ## Current Phase
+
 Phase 2: Daily Journal Timeline — implementing timeline view, daily note storage, and navigation.

dprint.json

@@ -0,0 +1,23 @@
+{
+  "lineWidth": 120,
+  "indentWidth": 2,
+  "useTabs": false,
+  "typescript": {
+    "semiColons": "always",
+    "quoteStyle": "preferDouble",
+    "trailingCommas": "always"
+  },
+  "json": {},
+  "markdown": {},
+  "excludes": [
+    "node_modules",
+    "dist",
+    "src-tauri/target",
+    "src-tauri/Cargo.lock"
+  ],
+  "plugins": [
+    "https://plugins.dprint.dev/typescript-0.93.3.wasm",
+    "https://plugins.dprint.dev/json-0.19.4.wasm",
+    "https://plugins.dprint.dev/markdown-0.17.8.wasm"
+  ]
+}

package.json

@@ -1,12 +1,16 @@
 {
   "name": "philo",
   "private": true,
-"version": "0.0.5",
+  "version": "0.0.5",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "fmt": "dprint fmt",
+    "fmt:check": "dprint check",
+    "check": "bun run typecheck && dprint fmt",
     "tauri": "tauri"
   },
   "dependencies": {

postcss.config.js

@@ -1,5 +1,5 @@
 export default {
   plugins: {
-    '@tailwindcss/postcss': {},
+    "@tailwindcss/postcss": {},
   },
-}
+};

src-tauri/capabilities/default.json

@@ -3,7 +3,7 @@
   "identifier": "default",
   "description": "Capability for the main window",
   "windows": ["main"],
-    "permissions": [
+  "permissions": [
     "core:default",
     "opener:default",
     "fs:default",

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "philo",
-"version": "0.0.5",
+  "version": "0.0.5",
   "identifier": "com.johnjeong.philo",
   "build": {
     "beforeDevCommand": "bun run dev",

src/components/UpdateBanner.tsx

@@ -1,28 +1,28 @@
-import { useState } from 'react';
-import type { UpdateInfo } from '../services/updater';
+import { useState, } from "react";
+import type { UpdateInfo, } from "../services/updater";
 
 interface UpdateBannerProps {
   update: UpdateInfo;
   onDismiss: () => void;
 }
 
-export function UpdateBanner({ update, onDismiss }: UpdateBannerProps) {
-  const [updating, setUpdating] = useState(false);
+export function UpdateBanner({ update, onDismiss, }: UpdateBannerProps,) {
+  const [updating, setUpdating,] = useState(false,);
 
   const handleUpdate = async () => {
-    setUpdating(true);
+    setUpdating(true,);
     try {
       await update.downloadAndInstall();
     } catch (err) {
-      console.error('Update failed:', err);
-      setUpdating(false);
+      console.error("Update failed:", err,);
+      setUpdating(false,);
     }
   };
 
   return (
     <div
       className="sticky top-0 z-50 flex items-center justify-center gap-3 px-4 py-2 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/80"
-      style={{ fontFamily: "'IBM Plex Mono', monospace" }}
+      style={{ fontFamily: "'IBM Plex Mono', monospace", }}
     >
       <span className="text-xs text-gray-600 dark:text-gray-300">
         v{update.version} available
@@ -34,11 +34,11 @@ export function UpdateBanner({ update, onDismiss }: UpdateBannerProps) {
         className="text-xs px-2.5 py-0.5 rounded-md text-white transition-all cursor-pointer disabled:opacity-60 disabled:cursor-default"
         style={{
           background: updating
-            ? 'linear-gradient(to bottom, #9ca3af, #6b7280)'
-            : 'linear-gradient(to bottom, #4b5563, #1f2937)',
+            ? "linear-gradient(to bottom, #9ca3af, #6b7280)"
+            : "linear-gradient(to bottom, #4b5563, #1f2937)",
         }}
       >
-        {updating ? 'Updating\u2026' : 'Update & Restart'}
+        {updating ? "Updating\u2026" : "Update & Restart"}
       </button>
 
       {!updating && (

src/components/editor/EditorBubbleMenu.tsx

@@ -1,7 +1,7 @@
-import { useState } from 'react';
-import { BubbleMenu } from '@tiptap/react/menus';
-import type { Editor } from '@tiptap/core';
-import { generateWidget } from '../../services/generate';
+import type { Editor, } from "@tiptap/core";
+import { BubbleMenu, } from "@tiptap/react/menus";
+import { useState, } from "react";
+import { generateWidget, } from "../../services/generate";
 
 interface EditorBubbleMenuProps {
   editor: Editor;
@@ -10,34 +10,34 @@ interface EditorBubbleMenuProps {
 /**
  * Find a widget node by ID and update its attributes.
  */
-function updateWidgetById(editor: Editor, id: string, attrs: Record<string, unknown>) {
-  const { doc } = editor.state;
+function updateWidgetById(editor: Editor, id: string, attrs: Record<string, unknown>,) {
+  const { doc, } = editor.state;
   const tr = editor.state.tr;
   let found = false;
 
-  doc.descendants((node, pos) => {
+  doc.descendants((node, pos,) => {
     if (found) return false;
-    if (node.type.name === 'widget' && node.attrs.id === id) {
-      tr.setNodeMarkup(pos, undefined, { ...node.attrs, ...attrs });
+    if (node.type.name === "widget" && node.attrs.id === id) {
+      tr.setNodeMarkup(pos, undefined, { ...node.attrs, ...attrs, },);
       found = true;
       return false;
     }
-  });
+  },);
 
   if (found) {
-    editor.view.dispatch(tr);
+    editor.view.dispatch(tr,);
   }
 }
 
-export function EditorBubbleMenu({ editor }: EditorBubbleMenuProps) {
-  const [building, setBuilding] = useState(false);
+export function EditorBubbleMenu({ editor, }: EditorBubbleMenuProps,) {
+  const [building, setBuilding,] = useState(false,);
 
   const handleBuild = async () => {
-    const { from, to } = editor.state.selection;
-    const selectedText = editor.state.doc.textBetween(from, to);
+    const { from, to, } = editor.state.selection;
+    const selectedText = editor.state.doc.textBetween(from, to,);
     if (!selectedText.trim() || building) return;
 
-    setBuilding(true);
+    setBuilding(true,);
 
     // Insert loading widget, replacing selection
     const widgetId = crypto.randomUUID();
@@ -46,63 +46,65 @@ export function EditorBubbleMenu({ editor }: EditorBubbleMenuProps) {
       .focus()
       .deleteSelection()
       .insertContent({
-        type: 'widget',
-        attrs: { id: widgetId, prompt: selectedText, spec: '', loading: true, saved: false, error: '' },
-      })
+        type: "widget",
+        attrs: { id: widgetId, prompt: selectedText, spec: "", loading: true, saved: false, error: "", },
+      },)
       .run();
 
     try {
-      const spec = await generateWidget(selectedText);
-      updateWidgetById(editor, widgetId, { spec: JSON.stringify(spec), loading: false });
+      const spec = await generateWidget(selectedText,);
+      updateWidgetById(editor, widgetId, { spec: JSON.stringify(spec,), loading: false, },);
     } catch (err) {
-      console.error('Build failed:', err);
-      const msg = err instanceof Error && err.message === 'API_KEY_MISSING'
-        ? 'No API key. Add your Anthropic key in Settings (⌘,).'
-        : err instanceof Error ? err.message : 'Something went wrong.';
-      updateWidgetById(editor, widgetId, { loading: false, error: msg });
+      console.error("Build failed:", err,);
+      const msg = err instanceof Error && err.message === "API_KEY_MISSING"
+        ? "No API key. Add your Anthropic key in Settings (⌘,)."
+        : err instanceof Error
+        ? err.message
+        : "Something went wrong.";
+      updateWidgetById(editor, widgetId, { loading: false, error: msg, },);
     } finally {
-      setBuilding(false);
+      setBuilding(false,);
     }
   };
 
   return (
     <BubbleMenu
       editor={editor}
-      options={{ placement: 'top', offset: 8 }}
-      shouldShow={({ from, to }: { from: number; to: number }) => from !== to}
+      options={{ placement: "top", offset: 8, }}
+      shouldShow={({ from, to, }: { from: number; to: number; },) => from !== to}
     >
       <div className="bubble-menu">
         <button
           onClick={() => editor.chain().focus().toggleBold().run()}
-          className={`bubble-btn ${editor.isActive('bold') ? 'bubble-btn-active' : ''}`}
+          className={`bubble-btn ${editor.isActive("bold",) ? "bubble-btn-active" : ""}`}
         >
           B
         </button>
         <button
           onClick={() => editor.chain().focus().toggleItalic().run()}
-          className={`bubble-btn bubble-btn-italic ${editor.isActive('italic') ? 'bubble-btn-active' : ''}`}
+          className={`bubble-btn bubble-btn-italic ${editor.isActive("italic",) ? "bubble-btn-active" : ""}`}
         >
           I
         </button>
         <button
           onClick={() => editor.chain().focus().toggleStrike().run()}
-          className={`bubble-btn bubble-btn-strike ${editor.isActive('strike') ? 'bubble-btn-active' : ''}`}
+          className={`bubble-btn bubble-btn-strike ${editor.isActive("strike",) ? "bubble-btn-active" : ""}`}
         >
           S
         </button>
         <button
           onClick={() => editor.chain().focus().toggleCode().run()}
-          className={`bubble-btn ${editor.isActive('code') ? 'bubble-btn-active' : ''}`}
+          className={`bubble-btn ${editor.isActive("code",) ? "bubble-btn-active" : ""}`}
         >
-          {'</>'}
+          {"</>"}
         </button>
         <div className="bubble-divider" />
         <button
           onClick={handleBuild}
-          className={`bubble-btn bubble-btn-build ${building ? 'bubble-btn-building' : ''}`}
+          className={`bubble-btn bubble-btn-build ${building ? "bubble-btn-building" : ""}`}
           disabled={building}
         >
-          {building ? 'Building...' : 'Build ⌘↵'}
+          {building ? "Building..." : "Build ⌘↵"}
         </button>
       </div>
     </BubbleMenu>