feat: add a Study Hub button to visualize and trace code

[lucerocris]

Adds a "Visualize and trace in Study Hub" link to the problem page. It opens the Study Hub C tracer with the student's code already loaded, so they can step through it line by line and see their variables and data structures drawn.

How it looks

1. In CisCode. A submission fails the second test case. The button is on the editor toolbar, and each visible test case has a small icon (red on the failed one). The hidden test case has none.

2. In Study Hub, after clicking the icon on the failed test case. The tracer opens with the student's code, the test case's input and its expected output already filled in.

3. After pressing Run. The tracer shows where the output first differs: expected 1 2 4 6, got 2 1 4 6.

4. Stepping through. The student's own linked list is drawn as it is built. Here 1 has been linked in after 2, which is the bug.

What Study Hub is

Study Hub (https://studyhub.dcism.org) is a free study site built by DCISM students and hosted on the DCISM server. It turns course material into practice the site can check, and it needs no account to use.

It covers Programming 1, Data Structures and Algorithms, Information Assurance and Security, Graph Theory and Automata Theory. Two of its tools are for C:

• The C tracer runs a C program in the browser and steps through it one line at a time. It shows every variable, draws pointers as arrows, and draws data structures (linked lists, stacks, queues, hash tables, trees, heaps, graphs) as the program builds them. Given a test case's expected output, it finds the step where the program's output first goes wrong.
• The C visualizer steps through the course's own versions of each DSA operation beside their C code.

The tracer runs entirely in the student's browser. Their code is not uploaded anywhere.

Study Hub is maintained by Cris Lawrence Lucero (@lucerocris), Simon Gementiza (@saiimonn) and Niño Calunod (@noni-was-taken). It is a student project and not an official DCISM or CISCO service.

Why link the two

CisCode is where students write and submit solutions. When a test case fails, CisCode shows that the output is wrong but not where the program went wrong. This link takes the student's code and the failing test case straight into the tracer, where they can watch it run and find the line. CisCode stays the place to write code; Study Hub helps with reading and debugging it.

Where the link appears

• On the editor toolbar, next to the settings gear. It sends the code only.
• On each visible test case, as a small icon beside the run button. It sends the code plus that test case's input and expected output.
• A failed test case shows a full-width button in its details, above "See what's wrong".

What is sent, and how

• Only what the student can already see: their own code, and a visible test case's input and expected output.
• Hidden test cases get no link. Solution code is never read or sent.
• The data travels in the URL fragment (after #), so it is never sent to any server, CisCode's or Study Hub's.

Configuration

NEXT_PUBLIC_STUDYHUB_URL sets the Study Hub address. It is optional and defaults to https://studyhub.dcism.org.

Scope

• No database changes, no new dependencies, no API changes.
• The admin submission view is unchanged.
• 6 files: a new src/lib/studyhub.ts, the problem page, the code editor, the test case and test case bar components, and .env.example.

Testing

• Type check, lint and a production build pass.
• Checked in the browser as a student: the links appear on the toolbar and on visible test cases only, and open the tracer with the code, input and expected output filled in.

[ccxavi]

LGTM! This is a very helpful feature for students, making it easier to trace, understand, and visualize how their code executes.