From 820e0befac7c4610da1b2a8fb5f9f7dcf859796c Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 13 May 2026 12:04:22 +0000
Subject: [PATCH 1/3] feat: improve codeforces problem workspace editor UX

Agent-Logs-Url: https://github.com/enlorik/HDD/sessions/1751b72d-3bc3-45a7-920b-f66bb596fbc5

Co-authored-by: enlorik <99548776+enlorik@users.noreply.github.com>
---
 src/components/ProblemWorkspace.css |  58 +++++++++++--
 src/components/ProblemWorkspace.jsx | 121 +++++++++++++++++++++-------
 2 files changed, 145 insertions(+), 34 deletions(-)

diff --git a/src/components/ProblemWorkspace.css b/src/components/ProblemWorkspace.css
index cbeb10a..a2f7ff9 100644
--- a/src/components/ProblemWorkspace.css
+++ b/src/components/ProblemWorkspace.css
@@ -98,6 +98,12 @@
   color: var(--ik-muted);
 }
 
+.problem-workspace-link--secondary {
+  display: inline-block;
+  margin-top: 0.95rem;
+  opacity: 0.9;
+}
+
 .problem-workspace-link:hover {
   color: var(--ik-cf);
 }
@@ -110,32 +116,74 @@
   margin-bottom: 0.9rem;
 }
 
+.problem-workspace-editor-heading {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  min-width: 0;
+}
+
 .problem-workspace-header h2,
 .problem-workspace-panel--results h2 {
   font-size: 1rem;
 }
 
+.problem-workspace-language-badge {
+  font-size: 0.72rem;
+  color: var(--ik-cf);
+  background: rgba(74, 158, 255, 0.14);
+  border: 1px solid rgba(74, 158, 255, 0.25);
+  border-radius: 999px;
+  padding: 0.1rem 0.42rem;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+}
+
+.problem-workspace-editor-problem-id {
+  color: var(--ik-muted);
+  font-size: 0.78rem;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+}
+
 .problem-workspace-actions {
   display: flex;
+  align-items: center;
   gap: 0.6rem;
   flex-wrap: wrap;
 }
 
-.problem-workspace-actions button:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
+.problem-workspace-save-status {
+  font-size: 0.76rem;
+  color: var(--ik-muted);
+}
+
+.problem-workspace-reset-btn {
+  border: 1px solid var(--ik-border);
+  background: var(--ik-surface);
+  color: var(--ik-text);
+  border-radius: var(--ik-radius-sm);
+  font-size: 0.78rem;
+  font-weight: 600;
+  padding: 0.35rem 0.68rem;
+  cursor: pointer;
+}
+
+.problem-workspace-reset-btn:hover {
+  border-color: var(--ik-cf);
+  color: var(--ik-cf);
 }
 
 .problem-workspace-editor {
   width: 100%;
-  min-height: 430px;
+  min-height: 470px;
   resize: vertical;
   border: 1px solid var(--ik-border);
   border-radius: var(--ik-radius-sm);
-  background: #111111;
+  background: #101216;
   color: var(--ik-text);
   padding: 1rem;
   font: 0.95rem/1.5 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  tab-size: 4;
+  caret-color: #8fb6ff;
 }
 
 .problem-workspace-editor::placeholder {
diff --git a/src/components/ProblemWorkspace.jsx b/src/components/ProblemWorkspace.jsx
index c875554..2b69514 100644
--- a/src/components/ProblemWorkspace.jsx
+++ b/src/components/ProblemWorkspace.jsx
@@ -7,13 +7,16 @@ import {
 } from '../utils/problemWorkspace';
 import './ProblemWorkspace.css';
 
-const DEFAULT_PLACEHOLDER = 'fun main() {\n\n}';
+const DEFAULT_KOTLIN_STARTER = `fun main() {
+    // solve here
+}`;
 
 function loadDraft(storageKey) {
   try {
-    return localStorage.getItem(storageKey) || '';
+    const saved = localStorage.getItem(storageKey);
+    return saved === null ? DEFAULT_KOTLIN_STARTER : saved;
   } catch {
-    return '';
+    return DEFAULT_KOTLIN_STARTER;
   }
 }
 
@@ -38,6 +41,7 @@ function ProblemWorkspace() {
   );
 
   const [code, setCode] = useState(() => loadDraft(storageKey));
+  const [hasEdited, setHasEdited] = useState(false);
 
   // Statement fetch state
   const [stmtStatus, setStmtStatus] = useState('idle'); // 'idle' | 'loading' | 'ok' | 'error'
@@ -47,27 +51,34 @@ function ProblemWorkspace() {
   useEffect(() => {
     if (!contestId || !index) return;
     let cancelled = false;
-    setStmtStatus('loading');
-    setStatement(null);
-    setStmtError('');
-    fetchProblemStatement(contestId, index)
-      .then(data => {
-        if (!cancelled) {
-          setStatement(data);
-          setStmtStatus('ok');
-        }
-      })
-      .catch(err => {
-        if (!cancelled) {
-          setStmtError(err.message || 'Failed to load statement.');
-          setStmtStatus('error');
-        }
-      });
+    queueMicrotask(() => {
+      if (cancelled) return;
+      setStmtStatus('loading');
+      setStatement(null);
+      setStmtError('');
+      fetchProblemStatement(contestId, index)
+        .then(data => {
+          if (!cancelled) {
+            setStatement(data);
+            setStmtStatus('ok');
+          }
+        })
+        .catch(err => {
+          if (!cancelled) {
+            setStmtError(err.message || 'Failed to load statement.');
+            setStmtStatus('error');
+          }
+        });
+    });
     return () => { cancelled = true; };
   }, [contestId, index]);
 
   useEffect(() => {
-    setCode(loadDraft(storageKey));
+    const nextDraft = loadDraft(storageKey);
+    queueMicrotask(() => {
+      setCode(nextDraft);
+      setHasEdited(false);
+    });
   }, [storageKey]);
 
   useEffect(() => {
@@ -78,6 +89,45 @@ function ProblemWorkspace() {
     }
   }, [code, storageKey]);
 
+  const handleEditorChange = event => {
+    setCode(event.target.value);
+    setHasEdited(true);
+  };
+
+  const handleEditorKeyDown = event => {
+    if (event.key !== 'Tab') {
+      return;
+    }
+
+    event.preventDefault();
+    const editor = event.currentTarget;
+    const start = editor.selectionStart;
+    const end = editor.selectionEnd;
+    const spaces = '    ';
+    const nextCode = `${code.slice(0, start)}${spaces}${code.slice(end)}`;
+
+    setCode(nextCode);
+    setHasEdited(true);
+
+    requestAnimationFrame(() => {
+      editor.selectionStart = start + spaces.length;
+      editor.selectionEnd = start + spaces.length;
+    });
+  };
+
+  const handleResetDraft = () => {
+    const shouldReset = window.confirm(
+      'Reset this local draft to the Kotlin starter code?',
+    );
+
+    if (!shouldReset) {
+      return;
+    }
+
+    setCode(DEFAULT_KOTLIN_STARTER);
+    setHasEdited(true);
+  };
+
   const problemLink = `https://codeforces.com/problemset/problem/${contestId}/${index}`;
 
   const displayTitle =
@@ -208,7 +258,7 @@ function ProblemWorkspace() {
                 href={problemLink}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="problem-workspace-link"
+                className="problem-workspace-link problem-workspace-link--secondary"
               >
                 Open original Codeforces page ↗
               </a>
@@ -222,13 +272,25 @@ function ProblemWorkspace() {
         <section className="problem-workspace-main">
           <div className="problem-workspace-panel problem-workspace-panel--editor">
             <div className="problem-workspace-header">
-              <h2>Kotlin</h2>
+              <div className="problem-workspace-editor-heading">
+                <h2>Kotlin</h2>
+                <span className="problem-workspace-language-badge">.kt</span>
+                <span className="problem-workspace-editor-problem-id">
+                  {contestId} {index}
+                </span>
+              </div>
               <div className="problem-workspace-actions">
-                <button type="button" disabled>
-                  Run Samples
-                </button>
-                <button type="button" disabled>
-                  Prepare Submit
+                {hasEdited && (
+                  <span className="problem-workspace-save-status" aria-live="polite">
+                    Saved locally
+                  </span>
+                )}
+                <button
+                  type="button"
+                  className="problem-workspace-reset-btn"
+                  onClick={handleResetDraft}
+                >
+                  Reset Draft
                 </button>
               </div>
             </div>
@@ -236,8 +298,9 @@ function ProblemWorkspace() {
             <textarea
               className="problem-workspace-editor"
               value={code}
-              onChange={event => setCode(event.target.value)}
-              placeholder={DEFAULT_PLACEHOLDER}
+              onChange={handleEditorChange}
+              onKeyDown={handleEditorKeyDown}
+              placeholder={DEFAULT_KOTLIN_STARTER}
               spellCheck="false"
               aria-label="Kotlin code editor"
             />

From 7d35805a6fe79a6eba193dd161261819af1ad1d6 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 13 May 2026 12:09:15 +0000
Subject: [PATCH 2/3] refactor: polish kotlin workspace editor interactions

Agent-Logs-Url: https://github.com/enlorik/HDD/sessions/1751b72d-3bc3-45a7-920b-f66bb596fbc5

Co-authored-by: enlorik <99548776+enlorik@users.noreply.github.com>
---
 src/components/ProblemWorkspace.jsx | 69 ++++++++++++++++++-----------
 1 file changed, 42 insertions(+), 27 deletions(-)

diff --git a/src/components/ProblemWorkspace.jsx b/src/components/ProblemWorkspace.jsx
index 2b69514..a686afc 100644
--- a/src/components/ProblemWorkspace.jsx
+++ b/src/components/ProblemWorkspace.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import { fetchProblemStatement } from '../services/cfStatement';
 import {
@@ -42,6 +42,8 @@ function ProblemWorkspace() {
 
   const [code, setCode] = useState(() => loadDraft(storageKey));
   const [hasEdited, setHasEdited] = useState(false);
+  const editorRef = useRef(null);
+  const pendingCaretRef = useRef(null);
 
   // Statement fetch state
   const [stmtStatus, setStmtStatus] = useState('idle'); // 'idle' | 'loading' | 'ok' | 'error'
@@ -51,34 +53,36 @@ function ProblemWorkspace() {
   useEffect(() => {
     if (!contestId || !index) return;
     let cancelled = false;
-    queueMicrotask(() => {
-      if (cancelled) return;
+
+    async function loadStatement() {
       setStmtStatus('loading');
       setStatement(null);
       setStmtError('');
-      fetchProblemStatement(contestId, index)
-        .then(data => {
-          if (!cancelled) {
-            setStatement(data);
-            setStmtStatus('ok');
-          }
-        })
-        .catch(err => {
-          if (!cancelled) {
-            setStmtError(err.message || 'Failed to load statement.');
-            setStmtStatus('error');
-          }
-        });
-    });
+      try {
+        const data = await fetchProblemStatement(contestId, index);
+        if (!cancelled) {
+          setStatement(data);
+          setStmtStatus('ok');
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setStmtError(err.message || 'Failed to load statement.');
+          setStmtStatus('error');
+        }
+      }
+    }
+
+    loadStatement();
     return () => { cancelled = true; };
   }, [contestId, index]);
 
   useEffect(() => {
-    const nextDraft = loadDraft(storageKey);
-    queueMicrotask(() => {
-      setCode(nextDraft);
+    function syncDraft() {
+      setCode(loadDraft(storageKey));
       setHasEdited(false);
-    });
+    }
+
+    syncDraft();
   }, [storageKey]);
 
   useEffect(() => {
@@ -89,6 +93,16 @@ function ProblemWorkspace() {
     }
   }, [code, storageKey]);
 
+  useLayoutEffect(() => {
+    if (pendingCaretRef.current === null || !editorRef.current) {
+      return;
+    }
+
+    editorRef.current.selectionStart = pendingCaretRef.current;
+    editorRef.current.selectionEnd = pendingCaretRef.current;
+    pendingCaretRef.current = null;
+  }, [code]);
+
   const handleEditorChange = event => {
     setCode(event.target.value);
     setHasEdited(true);
@@ -109,10 +123,7 @@ function ProblemWorkspace() {
     setCode(nextCode);
     setHasEdited(true);
 
-    requestAnimationFrame(() => {
-      editor.selectionStart = start + spaces.length;
-      editor.selectionEnd = start + spaces.length;
-    });
+    pendingCaretRef.current = start + spaces.length;
   };
 
   const handleResetDraft = () => {
@@ -275,13 +286,16 @@ function ProblemWorkspace() {
               <div className="problem-workspace-editor-heading">
                 <h2>Kotlin</h2>
                 <span className="problem-workspace-language-badge">.kt</span>
-                <span className="problem-workspace-editor-problem-id">
+                <span
+                  className="problem-workspace-editor-problem-id"
+                  aria-label={`Problem ${contestId} ${index}`}
+                >
                   {contestId} {index}
                 </span>
               </div>
               <div className="problem-workspace-actions">
                 {hasEdited && (
-                  <span className="problem-workspace-save-status" aria-live="polite">
+                  <span className="problem-workspace-save-status">
                     Saved locally
                   </span>
                 )}
@@ -296,6 +310,7 @@ function ProblemWorkspace() {
             </div>
 
             <textarea
+              ref={editorRef}
               className="problem-workspace-editor"
               value={code}
               onChange={handleEditorChange}

From 2b3507cc0b3c9403b73659fbcb4e68e300bdd17a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 31 May 2026 00:42:28 +0000
Subject: [PATCH 3/3] fix: restore disabled workspace action placeholders

---
 src/components/ProblemWorkspace.css | 12 ++++++++++++
 src/components/ProblemWorkspace.jsx | 14 ++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/src/components/ProblemWorkspace.css b/src/components/ProblemWorkspace.css
index a2f7ff9..fd0c8f9 100644
--- a/src/components/ProblemWorkspace.css
+++ b/src/components/ProblemWorkspace.css
@@ -156,6 +156,18 @@
   color: var(--ik-muted);
 }
 
+.problem-workspace-placeholder-btn {
+  border: 1px solid var(--ik-border);
+  background: var(--ik-surface);
+  color: var(--ik-muted);
+  border-radius: var(--ik-radius-sm);
+  font-size: 0.78rem;
+  font-weight: 600;
+  padding: 0.35rem 0.68rem;
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+
 .problem-workspace-reset-btn {
   border: 1px solid var(--ik-border);
   background: var(--ik-surface);
diff --git a/src/components/ProblemWorkspace.jsx b/src/components/ProblemWorkspace.jsx
index a686afc..7b456f7 100644
--- a/src/components/ProblemWorkspace.jsx
+++ b/src/components/ProblemWorkspace.jsx
@@ -299,6 +299,20 @@ function ProblemWorkspace() {
                     Saved locally
                   </span>
                 )}
+                <button
+                  type="button"
+                  className="problem-workspace-placeholder-btn"
+                  disabled
+                >
+                  Run Samples
+                </button>
+                <button
+                  type="button"
+                  className="problem-workspace-placeholder-btn"
+                  disabled
+                >
+                  Prepare Submit
+                </button>
                 <button
                   type="button"
                   className="problem-workspace-reset-btn"