@base44-preview/cli 0.0.26-pr.181.4b31178 → 0.0.26-pr.182.b2d0aa4

package/dist/templates/backend-and-client/base44/agents/task_manager.jsonc

@@ -0,0 +1,11 @@
+{
+  "name": "task_manager",
+  "description": "An AI agent that helps you manage and change your tasks",
+  "instructions": "You are a helpful task management assistant. You can help users create, update, mark as completed, and delete tasks using the entity tool. When a user asks to change a task, help them modify it by updating the appropriate fields. Always be conversational and helpful.",
+  "tool_configs": [
+    {
+      "entity_name": "Task",
+      "allowed_operations": ["read", "create", "update", "delete"]
+    }
+  ]
+}

package/dist/templates/backend-and-client/base44/entities/task.jsonc

@@ -0,0 +1,16 @@
+{
+  "name": "Task",
+  "type": "object",
+  "properties": {
+    "title": {
+      "type": "string",
+      "description": "Task title"
+    },
+    "completed": {
+      "type": "boolean",
+      "default": false,
+      "description": "Whether the task is completed"
+    }
+  },
+  "required": ["title"]
+}

package/dist/templates/backend-and-client/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": false,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "ui": "@/components/ui"
+  }
+}

package/dist/templates/backend-and-client/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@base44/sdk": "^0.8.3",
+    "lucide-react": "^0.475.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/dist/templates/backend-and-client/src/App.jsx

@@ -1,9 +1,147 @@
+import { useState, useEffect } from "react";
+import { base44 } from "@/api/base44Client";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Base44Logo } from "@/components/Base44Logo";
+import { Plus, Trash2, CheckCircle2 } from "lucide-react";
+
+const Task = base44.entities.Task;
+
 export default function App() {
+  const [tasks, setTasks] = useState([]);
+  const [newTaskTitle, setNewTaskTitle] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+
+  const fetchTasks = async () => {
+    const data = await Task.list();
+    setTasks(data);
+    setIsLoading(false);
+  };
+
+  useEffect(() => {
+    fetchTasks();
+  }, []);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!newTaskTitle.trim()) return;
+    await Task.create({ title: newTaskTitle.trim(), completed: false });
+    setNewTaskTitle("");
+    fetchTasks();
+  };
+
+  const toggleTask = async (id, completed) => {
+    await Task.update(id, { completed });
+    fetchTasks();
+  };
+
+  const deleteTask = async (id) => {
+    await Task.delete(id);
+    fetchTasks();
+  };
+
+  const clearCompleted = async () => {
+    await Promise.all(
+      tasks.filter((t) => t.completed).map((t) => Task.delete(t.id))
+    );
+    fetchTasks();
+  };
+
+  const completedCount = tasks.filter((t) => t.completed).length;
+  const totalCount = tasks.length;
+
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-orange-50/30 flex items-center justify-center">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold text-slate-900 mb-4">Hello World</h1>
-        <p className="text-slate-500">Welcome to your Base44 app</p>
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-orange-50/30">
+      <div className="max-w-lg mx-auto px-6 py-16">
+        {/* Header */}
+        <div className="text-center mb-12">
+          <h1 className="text-3xl font-semibold text-slate-900 tracking-tight">
+            <span className="inline-flex items-center gap-2 align-middle">
+              <Base44Logo className="w-9 h-9" />
+              <span className="font-bold">Base44</span>
+              <span>Tasks</span>
+            </span>
+          </h1>
+          {totalCount > 0 && (
+            <p className="text-slate-500 mt-2 text-sm">
+              {completedCount} of {totalCount} completed
+            </p>
+          )}
+        </div>
+
+        {/* Add Task Form */}
+        <form onSubmit={handleSubmit} className="mb-8">
+          <div className="flex gap-3">
+            <Input
+              type="text"
+              value={newTaskTitle}
+              onChange={(e) => setNewTaskTitle(e.target.value)}
+              placeholder="What needs to be done?"
+              className="flex-1 h-12 bg-white border-slate-200 rounded-xl shadow-sm"
+            />
+            <Button
+              type="submit"
+              disabled={!newTaskTitle.trim()}
+              className="h-12 px-5 rounded-xl bg-slate-900 hover:bg-slate-800 shadow-sm"
+            >
+              <Plus className="w-5 h-5" />
+            </Button>
+          </div>
+        </form>
+
+        {/* Task List */}
+        <div className="space-y-2">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-12">
+              <div className="w-6 h-6 border-2 border-slate-200 border-t-orange-500 rounded-full animate-spin" />
+            </div>
+          ) : tasks.length === 0 ? (
+            <div className="text-center py-12">
+              <p className="text-slate-400">No tasks yet. Add one above!</p>
+            </div>
+          ) : (
+            tasks.map((task) => (
+              <div
+                key={task.id}
+                className="group flex items-center gap-4 p-4 bg-white rounded-xl border border-slate-100 shadow-sm hover:shadow-md transition-all duration-200"
+              >
+                <Checkbox
+                  checked={task.completed}
+                  onCheckedChange={(checked) => toggleTask(task.id, checked)}
+                  className="w-5 h-5 rounded-md border-slate-300 data-[state=checked]:bg-orange-500 data-[state=checked]:border-orange-500"
+                />
+                <span
+                  className={`flex-1 text-slate-700 transition-all ${
+                    task.completed ? "line-through text-slate-400" : ""
+                  }`}
+                >
+                  {task.title}
+                </span>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => deleteTask(task.id)}
+                  className="opacity-0 group-hover:opacity-100 h-8 w-8 text-slate-400 hover:text-red-500 hover:bg-red-50 transition-all"
+                >
+                  <Trash2 className="w-4 h-4" />
+                </Button>
+              </div>
+            ))
+          )}
+        </div>
+
+        {/* Footer */}
+        {completedCount > 0 && (
+          <div className="mt-8 text-center">
+            <button
+              onClick={clearCompleted}
+              className="text-sm text-slate-400 hover:text-slate-600 transition-colors"
+            >
+              Clear completed
+            </button>
+          </div>
+        )}
       </div>
     </div>
   );

package/dist/templates/backend-and-client/src/components/Base44Logo.jsx

@@ -0,0 +1,15 @@
+export function Base44Logo({ className = "w-8 h-8" }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 31 31"
+      className={className}
+    >
+      <path
+        fill="#FF631F"
+        d="M24.16 26.904c.04 0 .057.05.026.075a14.97 14.97 0 0 1-9.147 3.1c-3.44 0-6.612-1.156-9.146-3.1-.032-.024-.014-.075.026-.075zm3.923-4.373a15 15 0 0 1-1.842 2.544.14.14 0 0 1-.104.046H3.942a.14.14 0 0 1-.104-.046 15 15 0 0 1-1.842-2.544.056.056 0 0 1 .049-.083h25.99c.043 0 .07.046.048.083m1.698-4.5a15 15 0 0 1-.762 2.564.11.11 0 0 1-.103.07H1.163a.11.11 0 0 1-.104-.07 15 15 0 0 1-.762-2.564.056.056 0 0 1 .055-.067h29.375c.035 0 .061.032.054.067M14.938 0C23.29-.056 30.078 6.7 30.078 15.04q0 .55-.038 1.09a.056.056 0 0 1-.056.051H.094a.056.056 0 0 1-.055-.052A15 15 0 0 1 0 15.054C-.007 6.87 6.755.055 14.938 0"
+      ></path>
+    </svg>
+  );
+}

package/dist/templates/backend-and-client/src/components/ui/button.jsx

@@ -0,0 +1,23 @@
+import { forwardRef } from 'react';
+
+const Button = forwardRef(({ className = '', variant, size, ...props }, ref) => {
+  const baseStyles = 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50';
+  
+  const variantStyles = variant === 'ghost' 
+    ? 'hover:bg-slate-100' 
+    : 'bg-slate-900 text-white shadow hover:bg-slate-800';
+  
+  const sizeStyles = size === 'icon' ? 'h-9 w-9' : 'h-9 px-4 py-2';
+
+  return (
+    <button
+      ref={ref}
+      className={`${baseStyles} ${variantStyles} ${sizeStyles} ${className}`}
+      {...props}
+    />
+  );
+});
+
+Button.displayName = 'Button';
+
+export { Button };

package/dist/templates/backend-and-client/src/components/ui/checkbox.jsx

@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+import { Check } from 'lucide-react';
+
+const Checkbox = forwardRef(({ className = '', checked, onCheckedChange, ...props }, ref) => (
+  <button
+    ref={ref}
+    type="button"
+    role="checkbox"
+    aria-checked={checked}
+    onClick={() => onCheckedChange?.(!checked)}
+    className={`h-4 w-4 shrink-0 rounded-sm border border-slate-300 shadow-sm flex items-center justify-center focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-400 disabled:cursor-not-allowed disabled:opacity-50 ${checked ? 'bg-slate-900 text-white border-slate-900' : 'bg-white'} ${className}`}
+    {...props}
+  >
+    {checked && <Check className="h-3 w-3" />}
+  </button>
+));
+
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };

package/dist/templates/backend-and-client/src/components/ui/input.jsx

@@ -0,0 +1,13 @@
+import { forwardRef } from 'react';
+
+const Input = forwardRef(({ className = '', ...props }, ref) => (
+  <input
+    ref={ref}
+    className={`flex h-9 w-full rounded-md border border-slate-200 bg-white px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-400 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+    {...props}
+  />
+));
+
+Input.displayName = 'Input';
+
+export { Input };

package/dist/templates/backend-and-client/src/index.css

@@ -2,12 +2,36 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+}
+
 @layer base {
   * {
     @apply border-border;
   }
-
   body {
     @apply bg-background text-foreground antialiased;
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@base44-preview/cli",
-  "version": "0.0.26-pr.181.4b31178",
+  "version": "0.0.26-pr.182.b2d0aa4",
   "description": "Base44 CLI - Unified interface for managing Base44 applications",
   "type": "module",
   "bin": {