feat(*): Improve styling of upload page

src/lib/components/AgenticProgress.svelte

@@ -50,6 +50,10 @@
     flex-direction: column;
     align-items: center;
     margin-top: 2rem;
+    max-width: 1400px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
   }
   .agent-avatar {
     font-size: 3rem;
@@ -75,32 +79,100 @@
     background: linear-gradient(90deg, #5b9df9 0%, #4ade80 100%);
     transition: width 0.5s;
   }
-  ul.steps {
+  ul.tool-steps {
-    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-top: 2rem;
     padding: 0;
+    list-style: none;
     width: 100%;
-    max-width: 400px;
   }
-  li.step {
+  li.tool-step-card {
     display: flex;
     align-items: center;
-    padding: 0.75rem 0.5rem;
+    background: #f3f6fa;
-    border-radius: 6px;
+    border-radius: 14px;
-    margin-bottom: 0.5rem;
+    box-shadow: 0 2px 12px 0 rgba(44, 62, 80, 0.09);
-    background: #f8fafc;
+    padding: 0.5rem;
-    font-size: 1.05rem;
+    gap: 1.5rem;
+    transition: box-shadow 0.2s, border 0.2s;
     outline: none;
+    border: 2px solid #e0e7ef;
+    min-height: 3.6rem;
+    width: 100%;
+    box-sizing: border-box;
   }
-  li.step[aria-current="step"] {
+  .tool-step-icon {
+    margin-right: 1.25rem;
+    font-size: 2rem;
+    min-width: 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .tool-step-desc {
+    font-size: 1.05rem;
+    font-weight: 500;
+    color: #22223b;
+    flex: 1 1 auto;
+    margin-right: 2rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .tool-step-time {
+    font-size: 0.97rem;
+    color: #64748b;
+    margin-right: 1.5rem;
+    min-width: 4.2rem;
+    text-align: right;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+  .tool-step-status {
+    font-size: 1.45rem;
+    margin-left: 0.5rem;
+    width: 2.2rem;
+    height: 2.2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
     background: #e0f2fe;
+    color: #2563eb;
     font-weight: bold;
+    box-shadow: 0 1px 3px 0 rgba(44, 62, 80, 0.07);
+    flex-shrink: 0;
   }
-  .step-icon {
+  .tool-step-card:focus {
+    border: 2px solid #60a5fa;
+    box-shadow: 0 0 0 3px #bae6fd;
+  }
+  .tool-step-card.running {
+    border-color: #60a5fa;
+    background: #e8f1fb;
+  }
+  .tool-step-card.done {
+    border-color: #22c55e;
+  }
+  .tool-step-icon {
     margin-right: 1rem;
     font-size: 1.5rem;
     min-width: 2rem;
     text-align: center;
   }
+  .tool-step-desc {
+    font-size: 1.05rem;
+  }
+  .tool-step-time {
+    font-size: 0.9rem;
+    color: #6b7280;
+  }
+  .tool-step-status {
+    margin-left: auto;
+    font-size: 1.2rem;
+  }
   .visually-hidden {
     position: absolute;
     left: -9999px;
@@ -120,18 +192,19 @@
     ></div>
   </div>
   <div aria-live="polite" class="visually-hidden">{liveMessage}</div>
-  <ul class="steps" aria-label="Processing steps">
+  <ul class="tool-steps" aria-label="Processing steps">
   {#if agentThinking}
-      <li class="step" aria-current="step">
+    <li class="tool-step-card" aria-current="step" tabindex="0">
-        <span class="step-icon" aria-hidden="true">💡</span>
+      <span class="tool-step-icon" aria-hidden="true">💡</span>
-        <span>AI Agent is analyzing your submission…</span>
+      <span class="tool-step-desc">The AI Agent is analyzing your submission…</span>
     </li>
   {:else}
     {#each steps as step, idx}
-        <li class="step {step.status}">
+      <li class="tool-step-card {step.status}" tabindex="0" aria-current={step.status === 'running' ? 'step' : undefined}>
-          <span class="step-icon" aria-hidden="true">{step.icon}</span>
+        <span class="tool-step-icon" aria-hidden="true">{step.icon}</span>
-          <span class="step-desc">{step.description}</span>
+        <span class="tool-step-desc">{step.description}</span>
-          <span class="step-time">{new Date(step.time).toLocaleTimeString()}
+        <span class="tool-step-time">{new Date(step.time).toLocaleTimeString()}</span>
+        <span class="tool-step-status" aria-label={step.status === 'done' ? 'Completed' : step.status === 'running' ? 'In progress' : 'Pending'}>
           {step.status === 'done'
             ? '✅'
             : step.status === 'running'
@@ -141,5 +214,5 @@
       </li>
     {/each}
   {/if}
-  </ul>
+</ul>
 </div>

src/routes/upload/+page.svelte

@@ -92,8 +92,10 @@
 					prev.unshift(entry);
 					localStorage.setItem('assessmentHistory', JSON.stringify(prev.slice(0, 50)));
 				} catch {}
+
 				// Redirect to /results
 				window.location.assign('/results');
+
 				file = null;
 				textInput = '';
 				taskDescription = '';
@@ -112,14 +114,13 @@
 		} catch (err) {
 			errorMsg = 'Network or server error. Please check your connection and try again.';
 		} finally {
-			submitting = false;
+      // Disabled to make the transition to the results page smoother
+			// submitting = false;
 		}
 	}
 </script>
 
-<section class="relative mx-auto max-w-xl py-12">
+<section class="relative mx-auto max-w-4xl py-12">
-	<h1 class="mb-4 text-2xl font-bold">Upload Student Submissions</h1>
-	<p class="mb-6">Upload student assignments for instant AI-powered assessment and feedback.</p>
 	{#if errorMsg}
 		<div
 			class="mb-4 rounded border border-red-300 bg-red-50 p-3 text-red-700"
@@ -133,6 +134,8 @@
 	{#if submitting}
 		<AgenticProgress {toolEvents} />
 	{:else}
+		<h1 class="mb-4 text-2xl font-bold">Upload Student Submissions</h1>
+		<p class="mb-6">Upload student assignments for instant AI-powered assessment and feedback.</p>
 		<form class="space-y-6" on:submit|preventDefault={handleSubmit}>
 			<div class="mb-4">
 				<label class="mb-1 block font-semibold" for="task"