Preface¶

When doing frontend development in DSH, you often encounter a specific action: a button, input field, or card on the page looks fine, but when you need to modify it, you still have to trace back from the page to the corresponding source location. The usual approach is to open the source directory, search by component name, text content, or class name, and then open each file to confirm.

dsh-element-source provides a plugin for this action: click a UI element on the local development page, and the plugin resolves the matching source file + line, then fills the [Element Location] message into the DSH chat draft. After you confirm, you send it, allowing the agent to read the file and wait for your modification request.

What This Is¶

dsh-element-source is a plugin for DeepSeek Harness (DSH), maintained by GULI-lab, licensed under MIT.

Its one-line positioning is:

Click any UI element in your running dev page to jump to its Vue / React / Svelte / Angular source.

Specifically, it is a click-to-source inspector, compatible with dsh-better-sidebar, and does not require installing a browser extension. It works with Vue, React, Svelte, Angular, and also provides a generic fallback location method for other frameworks.

Core Features¶

Below are several verified core capabilities.

Local Preview Entry Point¶

The plugin provides a local page preview entry point.

• If dsh-better-sidebar is installed, the entry point is the Local preview tab in the sidebar.
• If dsh-better-sidebar is not installed, the plugin uses its own right-docked sidebar to host the preview panel.

This entry point is used to open the local development server page, for example:

http://localhost:3000

Selecting Elements¶

In the preview page, you can first click the selection icon, move the mouse to highlight the target element, and then click the target element.

The goal of this step is to trace back from a visible element on the page to its source location. After selection, the panel displays the location result, including:

• file:line
• The corresponding source snippet

For example:

src/components/App.vue:12

Filling the Chat Draft Without Auto-Sending¶

After clicking and selecting an element, the plugin fills the chat input draft with a message like the following:

[Element Location] src/components/App.vue:12

Note that this step only fills the draft and does not auto-send. Whether to send it and how to supplement modification requirements remain entirely up to you.

Agent Reads Source Code Then Waits for Modifications¶

After sending, the agent uses the read tool to read the located file, displays the code in the dialog, and waits for your modification request.

This reduces the manual process of searching and copying context between “finding the code” and “starting to modify.”

Framework Support¶

According to verified facts, the plugin supports:

• Vue
• React
• Svelte
• Angular
• Generic fallback location for other frameworks

Installation and Activation¶

The prerequisite is that DSH is already running:

dsh web

dsh-better-sidebar is an optional dependency. After installing it, the entry point uses the Local preview tab in the sidebar; without it, the plugin uses the right-docked sidebar.

On macOS / Linux, or Windows with Git Bash / WSL environments, you can use the following installation command:

curl -fsSL https://raw.githubusercontent.com/GULI-lab/DSH-element-source/main/scripts/install.sh | bash

Verified package.json information also includes:

{
  "license": "MIT",
  "engines": {
    "node": ">=20"
  },
  "packageManager": "pnpm@11.7.0"
}

Typical Usage¶

The following steps come from verified usage examples.

1. Open the entry point.

If dsh-better-sidebar is installed, open the Local preview tab in the sidebar; if not installed, open the plugin’s own right-docked sidebar.

2. Enter the local development server address, then press Enter.

http://localhost:3000

3. Click the selection icon.

Move the mouse, and the target element on the page will enter a highlighted state.

4. Click the target element.

The plugin resolves the matching source location, and the panel displays file:line and the source snippet.

5. The chat input box automatically fills with the draft.

For example:

[Element Location] src/components/App.vue:12

No message is sent at this point. You can add your own modification requirements, then press Enter.

6. Press Esc to cancel the selection.

7. The preview panel toolbar also has two actions:

• refresh: reload the page
• open externally: open in a real browser tab

Loading the Probe Script on Your Own Page (Optional)¶

The proxy mode of the Local preview entry point automatically injects the probe script. If you are not inspecting the page through that entry point but are using another browser environment, you will need to load the probe script on your own page.

Verified usage mentions two optional methods.

Method one: Add a single script line to your page.

<script src="http://127.0.0.1:3080/dsh-element-source/inject.js"></script>

Method two: Use dshElementSourcePlugin() in a Vite project.

dshElementSourcePlugin()

According to verified facts, the Vite plugin only injects in the dev environment, and production builds are not modified.

Applicable Scenarios and Notes¶

Suitable for the following scenarios:

• Modifying Vue, React, Svelte, or Angular frontend code in DSH.
• Needing to quickly locate the source code corresponding to a UI element from a running local page.
• Wanting to bring “page elements” and “source line numbers” directly into the DSH chat context.

Please note the following before use.

1. The located file must remain within the current session cwd.

In other words, the source file located by the plugin cannot extend beyond the current session working directory.

2. The proxy mode of Local preview only applies to loopback hosts.

If the page is not a local loopback address, you can use the built-in sidebar browser or a regular browser tab to open it.

3. Selecting an element only fills the chat draft.

The plugin will not send messages on your behalf; whether to send is entirely up to you.

4. The plugin runs with the current dsh process permissions.

It is recommended to review the source code and license before installation. This article has verified its license as MIT.

5. The README content referenced in this article is truncated after the configuration examples.

For configuration fields other than autoSteer, mappings, and proxyHosts, this article does not elaborate. Refer to the latest repository documentation before use.

Links¶

GitHub:

https://github.com/GULI-lab/DSH-element-source

The verified materials do not provide a fixed DSH plugin directory page URL; if you are using the DSH plugin directory, you can look up the plugin by its name dsh-element-source in the directory.