Interlace: turning a codebase-intelligence platform into a guided path

The home dashboard says almost nothing

Problem

Home shows a welcome banner and three cards that link to Projects, Pipelines and Graph, and none of them carries data. The first screen after sign-in can't tell the admin whether anything needs attention.

Fix

Turn the cards into telemetry: counts of projects, pipelines and graphs, plus status badges (Done, Failed, Pending) for the most recent pipelines.

Visibility of system status

The projects table lists database fields, not project health

Problem

The projects table has six columns: ID, Name, Description, Status, Created at and Updated at. Four are administrative metadata, and nothing shows pipelines, graphs or code. To learn whether a pipeline failed or a graph is live, the admin has to open each project.

Fix

Add operational columns: linked repositories, last pipeline status, and deployment (DEV, PROD or none). Remove Created at and rename Updated at to Last activity, which also avoids horizontal scrolling.

Visibility of system status; recognition rather than recall

Each table handles row actions differently

Problem

Snapshots stack a solid View button, a Deploy dropdown and a trash icon. Pipelines mix text links with red icons. Repositories and Projects use a kebab menu. Every table has to be learned separately, and visual weight no longer signals importance.

Fix

Use one global pattern. A kebab menu holds the secondary actions, with at most one standalone icon for a critical action. Apply it the same way in every table.

Consistency and standards

Table headers fail contrast and break the type system

Problem

Headers such as NAME, STATUS and ACTIONS use a light grey that appears to fall below WCAG 2.1 AA contrast, and they are set in all caps, which the product uses nowhere else. A contrast failure is a correctness problem, not a style preference.

Fix

Darken the headers to at least 4.5:1 and set them in sentence case (Name, Status, Actions).

Accessibility (WCAG 2.1 AA); consistency and standards

Blue IDs look like links but do nothing

Problem

Pipeline IDs (#7, #6) and project IDs are set in the link colour but are not clickable. Blue text in a table reads as a link, so static blue text causes misclicks and erodes trust in every other signal.

Fix

Make the identifier the link to the detail view. If it has to stay static, set it in the body text colour.

Consistency and standards; error prevention

Grids have no summary of system health

Problem

Every grid lists rows with a pagination count and nothing above them. Questions like “how many pipelines failed today?” need mental arithmetic or a scan of every row.

Fix

• Projects: total, active pipelines, failed pipelines.
• Pipelines: runs in 30 days, success rate, running now, average duration.
• Snapshots: total, storage used, active deployments.
• Repositories: connected sources, last synced, sync errors.
• A hypothesis to prototype and validate.

Flexibility and efficiency of use

Inside a project, the navigation forgets where you are

Problem

On project sub-pages (pipelines, snapshots, MCP access), the Projects item is no longer highlighted. The admin can't tell whether a list is global or scoped to this project.

Fix

Keep Projects active on every page that belongs to a project.

Visibility of system status; recognition rather than recall

The sidebar toggle lives outside the sidebar

Problem

The collapse control sits in the global header, away from the panel it controls. A control is expected next to the thing it changes.

Fix

Move it into the sidebar, as a chevron at the top or a control at the foot. This frees the header for global and contextual navigation.

Match between system and the real world

Every table opens details differently

Problem

Snapshots use a solid View button, and the name is plain text. Pipelines have a View details link and a clickable ID. Repositories and Projects make the name the link, in two different colours. The admin has to relearn how to open an item on every table.

Fix

Adopt the linked-name pattern everywhere. The primary identifier is the only link to the detail view. Remove View and View details.

Consistency and standards

The project page hides its own context

Problem

The project header shows only a folder icon and the name. The ID, description, owner and dates live in Settings, so anyone opening the project has to go elsewhere to learn what it is.

Fix

Use the empty space under the title for a meta line: project ID, description, owner and last update.

Recognition rather than recall

Dashboard cards count things instead of reporting status

Problem

The dashboard cards say “2 pipelines” or “0 snapshots”, but not whether the latest run succeeded or whether anything is deployed. The numbers are true but not useful: the admin still has to open each section.

Fix

• Pipelines: the latest run's status and progress, with Rerun on failure.
• Snapshots: the latest date and deployment.
• MCP access: token state and last rotation.

Visibility of system status

Nothing tells a new project what to do first

Problem

Six cards carry equal weight, although the workflow is strictly sequential: upload code, run a pipeline, create a snapshot, deploy, use MCP. A new admin has to discover the order by trial and error.

Fix

Add a next-step area whose primary action follows the project's state. For example, “Upload code and start analysis” when there are no pipelines, and “Create snapshot” when a run has just finished.

Help and documentation; error prevention

Back and the page title compete for one row

Problem

“Back to project” sits on the same line as the page title, so escape navigation and page identity blur together.

Fix

Move Back to the left of the global header, into the space freed by the sidebar toggle, and give the title its own line.

Aesthetic and minimalist design; consistency and standards

A blank folder name fakes a successful upload

Problem

Uploading a ZIP requires a folder name first. Left blank, the interface behaves as if the upload succeeded, but nothing is processed. A silent failure at the first step breaks everything after it, and the admin finds out much later.

Fix

Remove the up-front field and derive the folder name from the ZIP file name. Keep it editable.

Error prevention; match between system and the real world

Uploads merge silently, and folders can't be renamed

Problem

Uploading to an existing folder name merges the two without warning, and a folder can't be renamed once it exists. Silent merges risk corrupting the code the graph is built from.

Fix

On a duplicate name, ask whether to merge or to upload a new version (for example backend_v2). Add an inline Rename action to the code structure table.

User control and freedom

After upload, the next step is manual

Problem

Once code is uploaded, the admin has to navigate to Pipelines and start the analysis by hand. The flow stops at the moment the admin is most ready to continue.

Fix

On success, offer the next step in place: “Code uploaded. Run pipeline now.”

Flexibility and efficiency of use

“Run Pipeline” doesn't say what it runs

Problem

On the project's Repositories page, Run Pipeline sits next to Link repository. It could run for the listed repositories, for the whole project, or simply open Pipelines. Ambiguity is expensive when a run takes around 20 minutes.

Fix

Name it for what it does. If it navigates, use “Go to pipelines”. If it starts a project-wide run, use “Run project pipeline” and put it behind a confirmation.

Match between system and the real world; error prevention

The “Edit” page can only replace a file, and Save is always on

Problem

The page is titled “Edit — smoke_project (ZIP)”, but its only capability is uploading a new version, and the primary Save button is active before any file is staged. “Edit” promises a form, and an active Save with nothing to save invites a click that appears to do nothing.

Fix

Title the page Update repository. Keep the primary action disabled until a valid ZIP is staged, then label it Upload and replace.

Match between system and the real world; error prevention

No record of what is about to be overwritten

Problem

The Code status card shows the files count as “—” and leaves out Uploaded at and Uploaded by, both of which Project settings does show. Before replacing a repository, an admin needs to know what is there, who put it there, and when.

Fix

Show the last upload date and author. If parsing hasn't happened yet, say “Pending analysis” instead of showing a dash.

Visibility of system status; recognition rather than recall

Replacing code looks as harmless as a first upload

Problem

The upload zone for a new version looks identical to a first upload, although replacing source code affects pipelines, graphs and snapshots. A consequential action gets no more care than a routine one.

Fix

Add an inline warning above the zone: “Uploading a new version replaces the existing codebase. Run a new pipeline to update the graph.”

Help users recognise, diagnose and recover from errors

Filter inputs disagree, and disabled fields almost vanish

Problem

Search has its icon on the left, the date picker on the right, and the disabled Branch and Linked to project dropdowns are so faint they look like rendering errors. Users with screen glare or low vision may not realise the filters exist.

Fix

• Standardise the inputs: border, radius, type, padding, and icon placement, with descriptive icons on the left and action icons on the right.
• Explain disabled fields with a tooltip, for example “Branch isn't available for ZIP uploads.”

Consistency and standards; aesthetic and minimalist design; accessibility

Getting a Git token means leaving the flow

Problem

Linking GitHub or GitLab needs a personal access token. The interface names the scopes, but the admin still has to find the token page in the provider's settings and come back. A technical user doesn't need instructions here, just a shorter route.

Fix

Turn the helper text into a deep link to the provider's token page, for example “Create a token on GitHub”. The audit estimates this saves 5 to 7 clicks.

Flexibility and efficiency of use

A running pipeline can look frozen

Problem

The progress bar can stay still for minutes, with no movement or detail to show that work continues. Admins may assume a silent failure and cancel a healthy run.

Fix

• An indeterminate indicator on the active phase.
• A sub-status such as “Analysing file 45 of 300”.
• The elapsed time.

Visibility of system status

Recovery actions hide in per-phase dropdowns

Problem

Rerun phase sits inside a small Actions menu on every phase, and the overall progress and the phase list carry the same visual weight. The one action a failed phase needs is the hardest to find.

Fix

When a phase fails, show Rerun directly on that row.

Recognition rather than recall; aesthetic and minimalist design

The workflow stalls after a successful run

Problem

When a pipeline finishes, nothing leads on. The admin has to notice it is done, go to Graph States and start a snapshot, so the step that turns a run into something usable depends on memory.

Fix

On completion, show a persistent notice with Create snapshot. Put the same action on the completed pipeline's page.

Flexibility and efficiency of use; recognition rather than recall

Deploying to PROD looks more dangerous than deleting

Problem

Deploy to PROD is a solid red button, and below it Delete snapshot is an outlined red button. Red should mean irreversible loss. Here it marks a normal workflow step, and the real danger reads as secondary.

Fix

• Use the primary colour for deployment, with DEV as secondary and PROD as primary.
• Protect PROD with friction instead of colour: a confirmation that asks the admin to type PROD.
• Keep Delete the only red action, or move it into an overflow menu.

Consistency and standards; error prevention

A failed snapshot shows two alerts and no way forward

Problem

A yellow “Deployment unavailable” warning and a red “Snapshot error” appear together. The first is only a symptom of the second, and neither suggests a fix. The admin sees the problem twice and the solution never.

Fix

Show the root cause alone, or combine the two (“Deployment unavailable because the snapshot failed”). Pair it with actions such as View pipeline logs or Rerun backend parser.

Help users recognise, diagnose and recover from errors; aesthetic and minimalist design

MCP setup is a wall of text with a manual JSON merge

Problem

The setup instructions are a wall of text whose third step asks the admin to merge entries under mcpServers without overwriting others, and a separate Copy instructions button adds a second, confusing copy action. Hand-merging JSON invites missing commas and brackets, and either one breaks the IDE connection at the very last step.

Fix

Turn the instructions into a visual stepper, give each step its own copy action, and remove Copy instructions.

Help and documentation; error prevention

The default-graph control sits in the wrong group

Problem

Default graph (optional) sits just above Rotate token, so it reads as a token setting. It actually changes the endpoints in the setup config below, and controls read as belonging to whatever they are grouped with.

Fix

Move it next to the setup tabs, beside the config it changes.

Match between system and the real world