feat: Implement core frontend application with task management, user selection, and a collapsible sidebar.

Provider/frontend/src/lib/Sidebar.svelte

@@ -1,6 +1,6 @@
 <script>
   let { currentView = 'dashboard', onNavigate = () => {} } = $props();
-  let collapsed = $state(false);
+  let collapsed = $state(typeof window !== 'undefined' && window.innerWidth <= 768);
 
   const navItems = [
     { id: 'dashboard', label: 'Dashboard', icon: '🏠' },

Provider/frontend/src/lib/TaskManager.svelte

@@ -8,13 +8,15 @@
 
   // Add task form state
   let newTitle = $state('');
-  let newDueDate = $state('');
+  let newDueDay = $state('');
+  let newDueTime = $state('');
   let showAddForm = $state(false);
 
   // Edit state
   let editingTaskId = $state(null);
   let editTitle = $state('');
-  let editDueDate = $state('');
+  let editDueDay = $state('');
+  let editDueTime = $state('');
 
   // Confirm delete
   let confirmDeleteId = $state(null);
@@ -45,13 +47,14 @@
 
   async function handleAddTask(e) {
     e.preventDefault();
-    if (!newTitle.trim() || !newDueDate) return;
+    if (!newTitle.trim() || !newDueDay || !newDueTime) return;
 
-    const dueTimestamp = Math.floor(new Date(newDueDate).getTime() / 1000);
+    const dueTimestamp = Math.floor(new Date(`${newDueDay}T${newDueTime}`).getTime() / 1000);
     try {
       await addTask(selectedUserId, newTitle.trim(), dueTimestamp);
       newTitle = '';
-      newDueDate = '';
+      newDueDay = '';
+      newDueTime = '';
       showAddForm = false;
       await fetchTasks();
     } catch (e) {
@@ -71,14 +74,16 @@
   function startEditing(task) {
     editingTaskId = task.id;
     editTitle = task.title;
-    editDueDate = formatDateForInput(task.due_date);
+    const parts = formatDateForInput(task.due_date);
+    editDueDay = parts.day;
+    editDueTime = parts.time;
   }
 
   async function saveEdit(e) {
     e.preventDefault();
     if (!editTitle.trim()) return;
 
-    const dueTimestamp = Math.floor(new Date(editDueDate).getTime() / 1000);
+    const dueTimestamp = Math.floor(new Date(`${editDueDay}T${editDueTime}`).getTime() / 1000);
     try {
       await updateTask(editingTaskId, {
         title: editTitle.trim(),
@@ -103,7 +108,18 @@
 
   function formatDateForInput(timestamp) {
     const d = new Date(timestamp * 1000);
-    return d.toISOString().slice(0, 16); // "YYYY-MM-DDTHH:mm"
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, '0');
+    const dayNum = String(d.getDate()).padStart(2, '0');
+    const hours = String(d.getHours()).padStart(2, '0');
+    const mins = String(d.getMinutes()).padStart(2, '0');
+    return { day: `${year}-${month}-${dayNum}`, time: `${hours}:${mins}` };
+  }
+
+  function setNowForNewTask() {
+    const parts = formatDateForInput(Date.now() / 1000);
+    newDueDay = parts.day;
+    newDueTime = parts.time;
   }
 
   function formatRelativeDate(timestamp) {
@@ -135,12 +151,13 @@
     <div class="task-header">
       <h2 class="task-title">Tasks</h2>
       {#if !showAddForm}
-        <button class="add-task-btn" onclick={() => showAddForm = true}>+ Add Task</button>
+        <button class="add-task-btn" onclick={() => { showAddForm = true; setNowForNewTask(); }}>+ Add Task</button>
       {/if}
     </div>
 
     {#if showAddForm}
       <form class="add-task-form" onsubmit={handleAddTask}>
+        <!-- svelte-ignore a11y_autofocus -->
         <input
           type="text"
           bind:value={newTitle}
@@ -148,14 +165,19 @@
           class="task-input"
           autofocus
         />
-        <input
-          type="datetime-local"
-          bind:value={newDueDate}
-          class="task-date-input"
-        />
+        <div class="date-time-row">
+          <label class="date-time-field">
+            <span class="field-label">Date</span>
+            <input type="date" bind:value={newDueDay} class="task-date-input" />
+          </label>
+          <label class="date-time-field">
+            <span class="field-label">Time</span>
+            <input type="time" bind:value={newDueTime} class="task-time-input" />
+          </label>
+        </div>
         <div class="form-actions">
-          <button type="submit" class="btn-primary" disabled={!newTitle.trim() || !newDueDate}>Add</button>
-          <button type="button" class="btn-secondary" onclick={() => { showAddForm = false; newTitle = ''; newDueDate = ''; }}>Cancel</button>
+          <button type="submit" class="btn-primary" disabled={!newTitle.trim() || !newDueDay || !newDueTime}>Add</button>
+          <button type="button" class="btn-secondary" onclick={() => { showAddForm = false; newTitle = ''; newDueDay = ''; newDueTime = ''; }}>Cancel</button>
         </div>
       </form>
     {/if}
@@ -166,7 +188,16 @@
           {#if editingTaskId === task.id}
             <form class="edit-form" onsubmit={saveEdit}>
               <input type="text" bind:value={editTitle} class="task-input" />
-              <input type="datetime-local" bind:value={editDueDate} class="task-date-input" />
+              <div class="date-time-row">
+                <label class="date-time-field">
+                  <span class="field-label">Date</span>
+                  <input type="date" bind:value={editDueDay} class="task-date-input" />
+                </label>
+                <label class="date-time-field">
+                  <span class="field-label">Time</span>
+                  <input type="time" bind:value={editDueTime} class="task-time-input" />
+                </label>
+              </div>
               <div class="form-actions">
                 <button type="submit" class="btn-primary btn-sm">Save</button>
                 <button type="button" class="btn-secondary btn-sm" onclick={() => editingTaskId = null}>Cancel</button>
@@ -274,6 +305,29 @@
     border-color: var(--color-accent);
   }
 
+  .date-time-row {
+    display: flex;
+    gap: 8px;
+  }
+
+  .date-time-field {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .date-time-field:first-child {
+    flex: 1;
+  }
+
+  .field-label {
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-secondary);
+  }
+
   .task-date-input {
     padding: 8px 12px;
     border-radius: 8px;
@@ -283,9 +337,40 @@
     font-size: 13px;
     outline: none;
     color-scheme: dark;
+    flex: 1;
+    cursor: pointer;
+    position: relative;
   }
 
-  .task-date-input:focus {
+  .task-time-input {
+    padding: 8px 12px;
+    border-radius: 8px;
+    border: 1px solid var(--color-border);
+    background: var(--color-bg-primary);
+    color: var(--color-text-primary);
+    font-size: 13px;
+    outline: none;
+    color-scheme: dark;
+    width: 110px;
+    cursor: pointer;
+    position: relative;
+  }
+
+  /* Make the native picker icon cover the entire input (Chrome/Edge only) */
+  .task-date-input::-webkit-calendar-picker-indicator,
+  .task-time-input::-webkit-calendar-picker-indicator {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: auto;
+    height: auto;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  .task-date-input:focus, .task-time-input:focus {
     border-color: var(--color-accent);
   }
 

Provider/frontend/src/lib/UserManager.svelte

@@ -59,9 +59,13 @@
   <div class="user-bar">
     <div class="user-chips">
       {#each users as user}
-        <button
+        <!-- svelte-ignore node_invalid_placement_ssr -->
+        <div
           class="user-chip {selectedUserId === user.id ? 'selected' : ''}"
           onclick={() => selectedUserId = user.id}
+          role="button"
+          tabindex="0"
+          onkeydown={(e) => { if (e.key === 'Enter') selectedUserId = user.id; }}
         >
           <span class="user-name">{user.name}</span>
           {#if confirmDeleteId === user.id}
@@ -76,11 +80,12 @@
               title="Remove user"
             >✕</button>
           {/if}
-        </button>
+        </div>
       {/each}
 
       {#if showAddForm}
         <form class="add-user-form" onsubmit={(e) => { e.preventDefault(); handleAddUser(); }}>
+          <!-- svelte-ignore a11y_autofocus -->
           <input
             type="text"
             bind:value={newUserName}