Creating a plugin for the side panel (dock)

The dock slot adds a plugin button to the panel in the lower-right corner of Tracker. The button is available on any page. The plugin opens in a panel on the right, leaving the page beneath it available. This slot suits tools that users need regularly across different entities: team or assistant chat, notes, timers, and quick references.

1. Creating a project via the CLI

To create a plugin for this slot, run the application creation command:

weavix create

When prompted with Select a template:, select default. There is no separate template for the dock slot yet. Complete the remaining prompts, then declare the slot in the manifest as described below.

2. About the dock slot

A plugin in the dock slot:

• Has a button in the plugin panel in the lower-right corner of every Tracker page except the administration pages.
• Opens in a panel at the right edge of the screen when clicked. The page beneath the panel remains available.
• Occupies the full height of the panel. The default width is 480 px. Users can drag the edge to resize it from 320 to 1200 px. The browser saves this setting.
• Remains loaded after its first opening, even when the panel is closed or the user navigates between pages. The panel is hidden without unloading the plugin, preserving its state and open connections. Administration pages are an exception: the plugin panel is hidden, and the plugin is unloaded.
• Is the only plugin open in the panel. Opening another plugin closes the current one.

Users can close the panel with the close button, the Esc key, or a click outside the panel. The pin button in the panel header prevents clicks outside the panel from closing it. This makes it easier to copy text from an issue into the plugin. The browser saves the pinned state.

The panel and its buttons are hidden while an issue side panel is open, since it occupies the same screen edge. The plugin panel reappears when the issue side panel closes.

If the button panel cannot fit all plugins, the remaining plugins are available in the More plugins menu. Users can also resize the button panel.

3. Plugin manifest

Declare the dock slot in the manifest.

Example manifest.json structure:

{
    "$schema": "./manifest.schema.json",
    "manifest_version": 1,
    "supported_services": ["tracker"],
    "slug": "team-chat",
    "version": "0.1.0",
    "name": {
        "ru": "Чат команды",
        "en": "Team chat"
    },
    "description": {
        "ru": "Чат команды рядом с любым тикетом",
        "en": "Team chat next to any issue"
    },
    "support": [{"type": "email", "value": "support@example.com"}],
    "permissions": {
        "data": ["tracker:issues:read"]
    },
    "slots": {
        "tracker": {
            "dock": [
                {
                    "entrypoint": "index.html",
                    "title": {
                        "ru": "Чат команды",
                        "en": "Team chat"
                    },
                    "description": {
                        "ru": "Обсуждайте тикеты, не покидая страницу",
                        "en": "Discuss issues without leaving the page"
                    },
                    "contextLevel": "full"
                }
            ]
        }
    }
}

4. Slot context

The plugin receives context through slotContext. The context type is:

export type DockSlotContext = {
    /** Current Tracker page path, for example `/STARTREK-1234` or `/boards/42` */
    path: string;
};

The context updates whenever the user navigates in Tracker. Tracker sends a context.changed event, and the useTrackerPluginContext hook returns the new value. This lets the plugin respond to the issue or board currently displayed.

Getting the context in code:

import { useTrackerPluginContext } from '@weavix/tracker-plugin-sdk-react';

const ISSUE_PATH = /^\/([A-Za-z0-9]{2,25}-\d+)(?:\/|$)/;

function App() {
    const { slotContext } = useTrackerPluginContext<'dock'>('full');
    const issueKey = slotContext?.path.match(ISSUE_PATH)?.[1];

    return issueKey ? <IssueChat issueKey={issueKey} /> : <TeamChat />;
}

The context does not include entity data. Fetch it through the Tracker API using the key from the path.

5. Panel size

The plugin occupies the full panel height, so automatic height adjustment does not apply to this slot. The plugin can suggest a width in pixels through hostApi.updateContentSize:

await hostApi.updateContentSize({ width: 640 });

Tracker applies the suggested width until the user resizes the panel. The saved user width takes priority. The value is limited to 320–1200 px.

6. Closing the panel from the plugin

Calling hostApi.close() closes the panel just like the close button. The plugin remains loaded and reopens in the same state. This slot has no defined close payload.