Dct-tcd · Dct-tcd · May 30, 2026 · May 25, 2026 · May 30, 2026
diff --git a/src/components/PromptHistory.jsx b/src/components/PromptHistory.jsx
@@ -1,110 +1,168 @@
 import { useState, useEffect } from "react";
 import Editor from "@monaco-editor/react";
+import { clearLocalHistory, loadLocalHistory } from "../lib/promptHistoryService";
 
 export default function PromptHistory() {
   const [history, setHistory] = useState([]);
+  const [copyStatus, setCopyStatus] = useState({ id: null, field: "" });
 
-  // Load from localStorage on mount
   useEffect(() => {
-    const stored = localStorage.getItem("promptHistory");
-    if (stored) {
-      setHistory(JSON.parse(stored));
-    }
+    setHistory(loadLocalHistory());
   }, []);
 
   const handleClear = () => {
     setHistory([]);
-    localStorage.removeItem("promptHistory");
+    clearLocalHistory();
+  };
+
+  const handleCopy = async (text, id, field) => {
+    if (!text) return;
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopyStatus({ id, field });
+      setTimeout(() => setCopyStatus({ id: null, field: "" }), 1200);
+    } catch {
+      // ignore clipboard errors
+    }
+  };
+
+  const formatOutput = (value) => {
+    if (typeof value !== "string") {
+      return JSON.stringify(value, null, 2);
+    }
+
+    try {
+      return JSON.stringify(JSON.parse(value), null, 2);
+    } catch {
+      return value;
+    }
   };
 
   return (
-    <div className="min-h-screen w-full bg-gray-900 text-gray-100">
+    <div className="min-h-screen w-full bg-slate-950 text-slate-100">
       <div className="mx-auto max-w-screen-lg px-4 py-6">
-        <div className="flex items-center justify-between mb-6">
-          <h1 className="text-2xl font-bold">Prompt History</h1>
-          {history.length > 0 && (
-            <button
-              onClick={handleClear}
-              className="rounded-lg border border-gray-700 bg-gray-800 px-3 py-1 text-sm text-gray-200 hover:bg-gray-700"
-            >
-              Clear All
-            </button>
-          )}
+        <div className="mb-6 rounded-3xl border border-slate-700 bg-slate-900/90 p-6 shadow-xl shadow-slate-950/40">
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <h1 className="text-3xl font-semibold tracking-tight text-white">Prompt History</h1>
+              <p className="mt-2 max-w-2xl text-sm text-slate-400">
+                Saved prompt runs from the app. Each entry includes the original input, generated output, and the action type.
+              </p>
+            </div>
+            <div className="flex flex-wrap items-center gap-3">
+              <span className="rounded-full bg-slate-800 px-3 py-1 text-sm text-slate-300">
+                {history.length} entr{history.length === 1 ? "y" : "ies"}
+              </span>
+              {history.length > 0 && (
+                <button
+                  onClick={handleClear}
+                  className="rounded-full border border-slate-700 bg-slate-800 px-4 py-2 text-sm font-medium text-slate-200 transition hover:bg-slate-700"
+                >
+                  Clear history
+                </button>
+              )}
+            </div>
+          </div>
         </div>
 
         {history.length === 0 ? (
-          <div className="text-center text-gray-500 italic">
-            No prompts yet. Try generating automation or migrating code.
+          <div className="rounded-3xl border border-dashed border-slate-700 bg-slate-900/80 p-12 text-center text-slate-500">
+            <p className="mb-2 text-lg font-medium text-slate-200">No prompts saved yet</p>
+            <p className="text-sm">Run a prompt in any feature to capture history here.</p>
           </div>
         ) : (
-          <div className="flex flex-col gap-4">
-            {history.map((entry) => (
-              <div
-                key={entry.id}
-                className="rounded-xl border border-gray-700 bg-gray-800 shadow"
-              >
-                <div className="flex items-center justify-between px-4 py-2 border-b border-gray-700">
-                  <span className="text-sm text-gray-400">
-                    {entry.timestamp}
-                  </span>
-                  {entry.type && (
-                    <span className="text-xs text-gray-500">{entry.type}</span>
-                  )}
-                </div>
+          <div className="grid gap-6">
+            {history.map((entry) => {
+              const outputValue = formatOutput(entry.output);
+              const inputValue = typeof entry.input === "string" ? entry.input : JSON.stringify(entry.input, null, 2);
+              const isCopiedInput = copyStatus.id === entry.id && copyStatus.field === "input";
+              const isCopiedOutput = copyStatus.id === entry.id && copyStatus.field === "output";
 
-                {/* Input */}
-                <div className="p-3">
-                  <h2 className="text-sm font-semibold text-gray-300 mb-1">
-                    Input
-                  </h2>
-                  {entry.input ? (
-                    <Editor
-                      height="150px"
-                      language="javascript"
-                      value={entry.input}
-                      theme="vs-dark"
-                      options={{
-                        readOnly: true,
-                        minimap: { enabled: false },
-                        fontSize: 13,
-                        scrollBeyondLastLine: false,
-                        wordWrap: "on",
-                      }}
-                    />
-                  ) : (
-                    <div className="rounded-lg border border-gray-700 bg-gray-900 p-2 text-sm text-gray-500 italic">
-                      No input provided.
+              return (
+                <div key={entry.id} className="overflow-hidden rounded-3xl border border-slate-700 bg-slate-900/90 shadow-lg shadow-slate-950/20">
+                  <div className="flex flex-col gap-3 border-b border-slate-700 px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
+                    <div>
+                      <p className="text-sm text-slate-400">{entry.type || "Prompt"}</p>
+                      <p className="mt-1 text-sm font-medium text-slate-100">{entry.timestamp}</p>
+                    </div>
+                    <div className="flex flex-wrap items-center gap-2">
+                      <button
+                        type="button"
+                        onClick={() => handleCopy(inputValue, entry.id, "input")}
+                        className="rounded-full border border-slate-700 bg-slate-800 px-3 py-1 text-xs font-medium text-slate-200 transition hover:bg-slate-700"
+                      >
+                        {isCopiedInput ? "Copied input" : "Copy input"}
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => handleCopy(outputValue, entry.id, "output")}
+                        className="rounded-full border border-slate-700 bg-slate-800 px-3 py-1 text-xs font-medium text-slate-200 transition hover:bg-slate-700"
+                      >
+                        {isCopiedOutput ? "Copied output" : "Copy output"}
+                      </button>
+                    </div>
+                  </div>
+
+                  <div className="grid gap-4 p-5 lg:grid-cols-[1.15fr_1fr]">
+                    <div className="space-y-3 rounded-3xl border border-slate-700 bg-slate-950/70 p-4">
+                      <div className="flex items-center justify-between gap-3">
+                        <div>
+                          <h2 className="text-sm font-semibold text-slate-100">Input</h2>
+                          <p className="text-xs uppercase tracking-wide text-slate-500">Original prompt data</p>
+                        </div>
+                      </div>
+                      {inputValue ? (
+                        <Editor
+                          height="240px"
+                          language="text"
+                          value={inputValue}
+                          theme="vs-dark"
+                          options={{
+                            readOnly: true,
+                            minimap: { enabled: false },
+                            fontSize: 13,
+                            scrollBeyondLastLine: false,
+                            wordWrap: "on",
+                          }}
+                        />
+                      ) : (
+                        <p className="rounded-2xl border border-dashed border-slate-700 bg-slate-900 px-4 py-5 text-sm text-slate-500 italic">
+                          No input recorded for this entry.
+                        </p>
+                      )}
                     </div>
-                  )}
-                </div>
 
-                {/* Output */}
-                <div className="p-3">
-                  <h2 className="text-sm font-semibold text-gray-300 mb-1">
-                    Output
-                  </h2>
-                  {entry.output ? (
-                    <Editor
-                      height="200px"
-                      language="javascript"
-                      value={entry.output}
-                      theme="vs-dark"
-                      options={{
-                        readOnly: true,
-                        minimap: { enabled: false },
-                        fontSize: 13,
-                        scrollBeyondLastLine: false,
-                        wordWrap: "on",
-                      }}
-                    />
-                  ) : (
-                    <div className="rounded-lg border border-gray-700 bg-gray-900 p-2 text-sm text-gray-500 italic">
-                      No output generated.
+                    <div className="space-y-3 rounded-3xl border border-slate-700 bg-slate-950/70 p-4">
+                      <div className="flex items-center justify-between gap-3">
+                        <div>
+                          <h2 className="text-sm font-semibold text-slate-100">Output</h2>
+                          <p className="text-xs uppercase tracking-wide text-slate-500">Generated result</p>
+                        </div>
+                      </div>
+                      {outputValue ? (
+                        <Editor
+                          height="240px"
+                          language="text"
+                          value={outputValue}
+                          theme="vs-dark"
+                          options={{
+                            readOnly: true,
+                            minimap: { enabled: false },
+                            fontSize: 13,
+                            scrollBeyondLastLine: false,
+                            wordWrap: "on",
+                          }}
+                        />
+                      ) : (
+                        <p className="rounded-2xl border border-dashed border-slate-700 bg-slate-900 px-4 py-5 text-sm text-slate-500 italic">
+                          No output recorded for this entry.
+                        </p>
+                      )}
                     </div>
-                  )}
+                  </div>
                 </div>
-              </div>
-            ))}
+              );
+            })}
           </div>
         )}
       </div>

diff --git a/src/lib/promptHistoryService.js b/src/lib/promptHistoryService.js
@@ -0,0 +1,29 @@
+const STORAGE_KEY = "promptHistory";
+
+export function loadLocalHistory() {
+  if (typeof localStorage === "undefined") return [];
+  try {
+    return JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]");
+  } catch {
+    return [];
+  }
+}
+
+export function savePromptHistory(entry) {
+  const history = loadLocalHistory();
+  const nextEntry = {
+    id: entry.id ?? Date.now(),
+    type: entry.type ?? "Prompt",
+    input: entry.input ?? "",
+    output: entry.output ?? "",
+    timestamp: entry.timestamp ?? new Date().toLocaleString(),
+  };
+
+  localStorage.setItem(STORAGE_KEY, JSON.stringify([nextEntry, ...history]));
+  return nextEntry;
+}
+
+export function clearLocalHistory() {
+  if (typeof localStorage === "undefined") return;
+  localStorage.removeItem(STORAGE_KEY);
+}
diff --git a/src/lib/supabaseClient.js b/src/lib/supabaseClient.js
@@ -0,0 +1,10 @@
+import { createClient } from "@supabase/supabase-js";
+
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+
+if (!supabaseUrl || !supabaseAnonKey) {
+  console.warn("Supabase environment variables are missing. Prompt history will still work locally.");
+}
+
+export const supabase = createClient(supabaseUrl, supabaseAnonKey);
diff --git a/src/pages/AutomationWriter.jsx b/src/pages/AutomationWriter.jsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { createClient } from "@supabase/supabase-js";
 import Editor from "@monaco-editor/react";
+import { savePromptHistory } from "../lib/promptHistoryService";
 
 const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
 const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
@@ -29,7 +30,15 @@ export default function AutomationWriter() {
 
       if (error) throw error;
 
-      setResponse(data?.automationScript || "");
+      const script = data?.automationScript || "";
+      setResponse(script);
+      savePromptHistory({
+        id: Date.now(),
+        type: "Automation Writer",
+        input: useCase,
+        output: script,
+        timestamp: new Date().toLocaleString(),
+      });
     } catch (e) {
       setErr(e.message || "Something went wrong");
     } finally {

diff --git a/src/pages/BugFixer.jsx b/src/pages/BugFixer.jsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { createClient } from "@supabase/supabase-js";
 import Editor from "@monaco-editor/react";
+import { savePromptHistory } from "../lib/promptHistoryService";
 
 const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
 const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
@@ -39,6 +40,13 @@ export default function BugFixer() {
 
       if (error) throw error;
       setResult(data);
+      savePromptHistory({
+        id: Date.now(),
+        type: "Bug Fixer",
+        input: inputCode,
+        output: data?.fixedCode || data?.summary || JSON.stringify(data),
+        timestamp: new Date().toLocaleString(),
+      });
     } catch (e) {
       setErr(e.message || "Something went wrong");
     } finally {

diff --git a/src/pages/CodeMigration.jsx b/src/pages/CodeMigration.jsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { createClient } from "@supabase/supabase-js";
 import Editor from "@monaco-editor/react";
+import { savePromptHistory } from "../lib/promptHistoryService";
 
 const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
 const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
@@ -40,6 +41,13 @@ export default function CodeMigration() {
 
       if (error) throw error;
       setMigration(data);
+      savePromptHistory({
+        id: Date.now(),
+        type: "Code Migration",
+        input: inputCode,
+        output: data?.migratedCode || JSON.stringify(data, null, 2),
+        timestamp: new Date().toLocaleString(),
+      });
     } catch (e) {
       setErr(e.message || "Something went wrong");
     } finally {

diff --git a/src/pages/CodeOptimisation.jsx b/src/pages/CodeOptimisation.jsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { createClient } from "@supabase/supabase-js";
 import Editor from "@monaco-editor/react";
+import { savePromptHistory } from "../lib/promptHistoryService";
 
 const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
 const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
@@ -40,16 +41,15 @@ export default function CodeOptimizer() {
 
       setResult(data);
 
-      // Save to local prompt history (optional)
-      const history = JSON.parse(localStorage.getItem("promptHistory") || "[]");
       const newEntry = {
         id: Date.now(),
         type: "Code Optimization",
         input: inputCode,
         output: data?.optimizedCode || "",
         timestamp: new Date().toLocaleString(),
       };
-      localStorage.setItem("promptHistory", JSON.stringify([newEntry, ...history]));
+
+      savePromptHistory(newEntry);
     } catch (e) {
       setErr(e.message || "Something went wrong");
     } finally {