feat(*): Enable displaying history using localstorage

src/lib/components/AssessmentHistory.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  export let history: any[] = [];
+  export let hideIfEmpty: boolean = false;
+</script>
+
+{#if history.length === 0}
+  {#if !hideIfEmpty}
+    <div class="mt-8 text-gray-400 text-center">No previous assessments yet.</div>
+  {/if}
+{:else}
+  <section class="mt-12">
+    <h2 class="text-lg font-bold mb-4 text-gray-700">Assessment History</h2>
+    <div class="overflow-x-auto">
+      <table class="min-w-full border text-sm rounded">
+        <thead class="bg-gray-100">
+          <tr>
+            <th class="py-2 px-3 border-b text-left">Date</th>
+            <th class="py-2 px-3 border-b text-left">Task/Assignment</th>
+            <th class="py-2 px-3 border-b text-left">Grade</th>
+            <th class="py-2 px-3 border-b text-left">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each history as entry (entry.timestamp)}
+            <tr class="border-b hover:bg-gray-50">
+              <td class="py-1 px-3">{new Date(entry.timestamp).toLocaleString()}</td>
+              <td class="py-1 px-3 max-w-xs truncate" title={entry.task}>{entry.task}</td>
+              <td class="py-1 px-3">{entry.grade}</td>
+              <td class="py-1 px-3">
+                <details>
+                  <summary class="cursor-pointer text-blue-600 hover:underline">View</summary>
+                  <div class="mt-2 p-2 bg-gray-50 rounded">
+                    <div class="mb-1"><span class="font-semibold">Submission:</span> <span class="whitespace-pre-line">{entry.submission}</span></div>
+                    <div class="mb-1"><span class="font-semibold">Strengths:</span> {entry.strengths}</div>
+                    <div class="mb-1"><span class="font-semibold">Areas for Improvement:</span> {entry.areas_for_improvement}</div>
+                    <div class="mb-1"><span class="font-semibold">Individualized Activity:</span> {entry.individualized_activity}</div>
+                    <div class="mb-1"><span class="font-semibold">Reflection Question:</span> {entry.reflection_question}</div>
+                    <div class="mb-1"><span class="font-semibold">Teacher Suggestion:</span> {entry.teacher_suggestion}</div>
+                    <details class="mt-2">
+                      <summary class="cursor-pointer font-semibold text-gray-600">Show AI Reasoning</summary>
+                      <div class="mt-1 text-gray-700 whitespace-pre-line">{entry.reasoning}</div>
+                    </details>
+                  </div>
+                </details>
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  </section>
+{/if}

src/routes/results/+page.svelte

@@ -1,13 +1,31 @@
 <script lang="ts">
 import AssessmentFeedback from '$lib/components/AssessmentFeedback.svelte';
+import AssessmentHistory from '$lib/components/AssessmentHistory.svelte';
 import { onMount } from 'svelte';
 
 let feedback: any = null;
+let history: any[] = [];
+
+function saveToHistory(entry: any) {
+  let prev = [];
+  try {
+    prev = JSON.parse(localStorage.getItem('assessmentHistory') || '[]');
+  } catch {}
+  prev.unshift(entry); // latest first
+  localStorage.setItem('assessmentHistory', JSON.stringify(prev.slice(0, 50)));
+}
 
 onMount(() => {
-  // For hackathon simplicity, get feedback from history state
-  if (window.history.state && window.history.state.feedback) {
-    feedback = window.history.state.feedback;
+  try {
+    history = JSON.parse(localStorage.getItem('assessmentHistory') || '[]');
+    if (history && history.length > 0) {
+      feedback = history[0]; // Show latest as most prominent feedback
+    } else {
+      feedback = null;
+    }
+  } catch {
+    history = [];
+    feedback = null;
   }
 });
 </script>
@@ -17,7 +35,9 @@ onMount(() => {
   <p class="mb-6">View detailed feedback and recommendations for each student submission.</p>
   {#if feedback}
     <AssessmentFeedback {...feedback} />
-  {:else}
+  {/if}
+  {#if !feedback && (!history || history.length === 0)}
     <div class="border rounded p-6 text-gray-500">No results yet. Upload submissions to see feedback here.</div>
   {/if}
+  <AssessmentHistory {history} hideIfEmpty={true} />
 </section>

src/routes/upload/+page.svelte

@@ -54,8 +54,19 @@ async function handleSubmit(event: Event) {
     });
     const result = await response.json();
     if (response.ok && result.success) {
-      // Redirect to /results with feedback in history state
-      window.history.pushState({ feedback: result }, '', '/results');
+      // Save to localStorage history
+      try {
+        let prev = JSON.parse(localStorage.getItem('assessmentHistory') || '[]');
+        const entry = {
+          timestamp: Date.now(),
+          ...result,
+          submission: result.submission || textInput || '',
+          task: taskDescription,
+        };
+        prev.unshift(entry);
+        localStorage.setItem('assessmentHistory', JSON.stringify(prev.slice(0, 50)));
+      } catch {}
+      // Redirect to /results
       window.location.assign('/results');
       file = null;
       textInput = '';