Repository: UKGovernmentBEIS/inspect_ai
Issue: [feature request] custom transcript views
Root cause: Unimplemented Feature Gap

One of the biggest pain points when developing [petri](https://github.com/safety-research/petri) with inspect was the inability to render custom views of the transcript. This led to creating an ad hoc website that is strictly worse than `inspect view` in almost every way.

The main challenge that makes inspect difficult to use with petri transcripts is that petri transcripts have branches and restarts, which are hard to read through in a linear format. Additionally, the judge in petri outputs citations that the custom viewer lets you click on to scroll to the relevant part of the transcript and highlight the citations, making it much easier to skim through transcripts. One of the most common pieces of feedback I receive about petri is that users wish they could use `inspect view` with the branched transcript view.

I don't think it makes sense to adopt these specific features into `inspect view` natively, as they are not relevant for most evals. However, I think it would be incredibly useful to allow evals to define custom tabs in the viewer where they control the rendering.

One way I envision this being implemented is that developers of evals could create a custom .html file (or something similar) that takes the selected `EvalSample` TypeScript object as input, which the developer can then use to render whatever HTML they want.

```python
@task
def hello_world():
    return Task(
        dataset=[
            Sample(
                input="Just reply with Hello World",
                target="Hello World",
            )
        ],
        solver=[generate()],
        scorer=exact(),
        views={"custom_view": "./index.html"}
    )
```
```html
<!DOCTYPE html>
<html>
<head>
    <title>Custom View</title>
</head>
<body>
    <div id="sample-view"></div>

    <script>
        // Assume the EvalSample data is provided as a global variable
        // (inspect view would inject this somehow)
        const sampleData = window.EVAL_SAMPLE || {};

        // Render sample information
        const container = document.getElementById('sample-view');
        container.innerHTML = `
            <h2>Sample ${sampleData.id}</h2>
            <p><strong>Input:</strong> ${sampleData.input}</p>
            <p><strong>Target:</strong> ${sampleData.target}</p>
        `;
    </script>
</body>
</html>
```
Internally the html file is saved as part of the .eval file so when users run `inspect view` and they select a sample, there is a new tab labeled "custom_view" which displays the saved html file (somehow substituting in that samples data).

There are obviously many technical details required to implement this properly, but I think it could provide significant value. There is also a potential security risk if users run `inspect view` on compromised .eval files so there probably should be something that asks the user if they trust the authors of the .eval file.

I think that would be fantastic and the strategy you suggest here is both straightforward and very flexible. @dragonstyle What do you think? 

Yeah this seems like a great addition to the viewer and a good approach to supporting custom visualization and UI within the viewer. I'll put this on my todo list!