Refactor version state, lazy load effects, add Docker setup

.dockerignore

@@ -0,0 +1,9 @@
+node_modules
+npm-debug.log
+Dockerfile
+.dockerignore
+docker-compose.yml
+.git
+.gitignore
+.next
+out

Dockerfile

@@ -0,0 +1,15 @@
+# Build Next.js app and run in production mode
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+RUN npm prune --omit=dev
+
+FROM node:20-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+COPY --from=builder /app .
+EXPOSE 3000
+CMD ["npm", "start"]

README.md

@@ -69,6 +69,16 @@ npm run dev
 
 Open [http://localhost:3000](http://localhost:3000) to see the app.
 
+### Docker
+
+Build and run the app in a container:
+
+```bash
+docker compose up --build
+```
+
+Visit <http://localhost:3000> once the server starts.
+
 ## Deployment
 
 ✅ **Currently deployed on Cloudflare Pages** at [semver.agenticinsights.com](https://semver.agenticinsights.com)

app/IDELayout.tsx

@@ -39,13 +39,19 @@ export default function IDELayout({ children }: IDELayoutProps) {
 
   const [terminalOpen, setTerminalOpen] = useState(false);
   const [sidebarOpen, setSidebarOpen] = useState(false);
-  const [currentTime, setCurrentTime] = useState(new Date());
+  const [currentTime, setCurrentTime] = useState<string>("");
 
   useEffect(() => {
-    const timer = setInterval(() => {
-      setCurrentTime(new Date());
-    }, 1000);
+    const updateTime = () =>
+      setCurrentTime(
+        new Date().toLocaleTimeString("en-US", {
+          hour: "2-digit",
+          minute: "2-digit",
+        })
+      );
 
+    updateTime();
+    const timer = setInterval(updateTime, 1000);
     return () => clearInterval(timer);
   }, []);
 
@@ -216,7 +222,7 @@ export default function IDELayout({ children }: IDELayoutProps) {
                 main
               </span>
               <span className="text-emerald-400">● Port 30020</span>
-              <span className="text-gray-500">{currentTime.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}</span>
+              <span className="text-gray-500">{currentTime || '--:--'}</span>
             </div>
           </div>
         )}