linear-workflow by Sarimarcus: Claude Code mod code and design

What it does

Draws a band above the prompt, a pane, toasts
Adds /linear
Watches Bash calls and can refuse them
Hooks session.end, session.start, turn.complete
Calls the network

Good points

Written in TypeScript
Handles errors

Code to start from

Two kinds: a starter modscode writes from the design above, and the lines of the mod's own code that draw it.

Starter (register.tsx)

import type { Register } from 'claude-code'

// Drawn like linear-workflow by Olivier Depiesse (pane, band, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/sarimarcus-linear-workflow/
// Written by modscode from that reading, not copied from the mod: use it as you like.
// Each value below stands for one the mod works out at run time; put in your own.
export const register: Register = on => {
  // the band above the prompt; what else goes there is drawn under it
  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const count = '…'
    const identifier = '…'
    const state = '…'
    const priority = '…'
    const title = '…'
    const meta = '…'
    const text = '…'
    const text2 = '…'
    const text3 = '…'
    return (
      <Box flexDirection="column" marginTop={1}>
        <Box marginTop={0}>
          <Box flexShrink={0}>
            <Text dimColor>
              {"── "}
            </Text>
            <Text bold>
              Linear
            </Text>
            <Text dimColor>
              {" "}
              {count}
            </Text>
            <Text>
              {" "}
            </Text>
          </Box>
          <Box flexShrink={1} overflow="hidden">
            <Text dimColor wrap="truncate">
              ────────
            </Text>
          </Box>
        </Box>
        <Box>
          <Text bold>
            {"◆ "}
          </Text>
          <Text bold>
            {identifier}
            {" "}
          </Text>
          <Text>
            {state}
          </Text>
          <Text dimColor>
            {" · "}
            {priority}
          </Text>
        </Box>
        <Text wrap="truncate">
          {" "}
          {title}
        </Text>
        <Box justifyContent="space-between">
          <Box flexShrink={1}>
            <Text dimColor wrap="truncate">
              {" "}
              {meta}
            </Text>
          </Box>
          <Box flexShrink={0}>
            <Box>
              <Button label="Details" plain />
              <Text>
                {" "}
              </Text>
              <Button label="Hide" plain />
            </Box>
          </Box>
        </Box>
        <Box>
          <Box flexShrink={0}>
            <Text dimColor>
              {" sessions "}
            </Text>
          </Box>
          <Text color="red" wrap="truncate">
            {"  ·  "}
            {"⚠  "}
            {text}
          </Text>
          <Text color="red" wrap="truncate">
            {"  ·  "}
            {"⚠  "}
            {text2}
          </Text>
          <Text color="red" wrap="truncate">
            {"  ·  "}
            {"⚠  "}
            {text3}
          </Text>
        </Box>
        {await next(e)}
      </Box>
    )
  })

  // the pane: open it with $.ui.open({ id: 'my-pane', title: "Linear" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Text, Button, Markdown, Link } = $.ui.resolve(e)
    const identifier = '…'
    const state = '…'
    const priority = '…'
    const title = '…'
    const error = '…'
    const assignee = '…'
    const cycle = '…'
    const milestone = '…'
    const labels = '…'
    const sourceText = '…'
    const state2 = '…'
    const identifier2 = '…'
    const title2 = '…'
    const state3 = '…'
    const identifier3 = '…'
    const title3 = '…'
    const state4 = '…'
    const identifier4 = '…'
    const title4 = '…'
    const author = '…'
    const createdAt = '…'
    const body = '…'
    const author2 = '…'
    const createdAt2 = '…'
    const author3 = '…'
    const createdAt3 = '…'
    const url = '…'
    const state5 = '…'
    const label = '…'
    const state6 = '…'
    const label2 = '…'
    const state7 = '…'
    const label3 = '…'
    const text = '…'
    const text2 = '…'
    const text3 = '…'
    return (
      <Box flexDirection="column">
        <Box>
          <Text bold>
            {"◆ "}
          </Text>
          <Text bold>
            {identifier}
            {" "}
          </Text>
          <Text>
            {state}
          </Text>
          <Text dimColor>
            {" · "}
            {priority}
          </Text>
        </Box>
        <Text bold>
          {title}
        </Text>
        <Box marginTop={1}>
          <Button label="Copy link" />
          <Text>
            {" "}
          </Text>
          <Button label="Refresh" hotkey="r" />
        </Box>
        <Text color="red">
          {"Refresh failed: "}
          {error}
        </Text>
        <Box flexDirection="column" marginTop={1}>
          <Box>
            <Box flexShrink={0} width={11}>
              <Text dimColor>
                Parent
              </Text>
            </Box>
            <Box flexShrink={1}>
              <Text wrap="truncate">
                {`${identifier} · ${title}`}
              </Text>
            </Box>
          </Box>
          <Box>
            <Box flexShrink={0} width={11}>
              <Text dimColor>
                Assignee
              </Text>
            </Box>
            <Box flexShrink={1}>
              <Text wrap="truncate">
                {assignee}
              </Text>
            </Box>
          </Box>
          <Box>
            <Box flexShrink={0} width={11}>
              <Text dimColor>
                Cycle
              </Text>
            </Box>
            <Box flexShrink={1}>
              <Text wrap="truncate">
                {cycle}
              </Text>
            </Box>
          </Box>
          <Box>
            <Box flexShrink={0} width={11}>
              <Text dimColor>
                Milestone
              </Text>
            </Box>
            <Box flexShrink={1}>
              <Text wrap="truncate">
                {milestone}
              </Text>
            </Box>
          </Box>
          <Box>
            <Box flexShrink={0} width={11}>
              <Text dimColor>
                Labels
              </Text>
            </Box>
            <Box flexShrink={1}>
              <Text wrap="truncate">
                {labels}
              </Text>
            </Box>
          </Box>
          <Box>
            <Box flexShrink={0} width={11}>
              <Text dimColor>
                Scope
              </Text>
            </Box>
            <Box flexShrink={1}>
              <Text wrap="truncate">
                all
              </Text>
            </Box>
          </Box>
          <Box>
            <Box flexShrink={0} width={11}>
              <Text dimColor>
                Source
              </Text>
            </Box>
            <Box flexShrink={1}>
              <Text wrap="truncate">
                {sourceText}
              </Text>
            </Box>
          </Box>
        </Box>
        <Box flexDirection="column">
          Sub-issues
          <Box>
            <Text>
              {state2}
            </Text>
            <Text wrap="truncate">
              {identifier2}
              {" "}
              {title2}
            </Text>
          </Box>
          <Box>
            <Text>
              {state3}
            </Text>
            <Text wrap="truncate">
              {identifier3}
              {" "}
              {title3}
            </Text>
          </Box>
          <Box>
            <Text>
              {state4}
            </Text>
            <Text wrap="truncate">
              {identifier4}
              {" "}
              {title4}
            </Text>
          </Box>
        </Box>
        Description
        <Markdown text="_No description._" />
        <Box flexDirection="column">
          Latest comments
          <Box flexDirection="column" marginTop={1}>
            <Text dimColor>
              {author}
              {" · "}
              {createdAt}
            </Text>
            <Markdown text={`${body}`} />
          </Box>
          <Box flexDirection="column" marginTop={1}>
            <Text dimColor>
              {author2}
              {" · "}
              {createdAt2}
            </Text>
            <Markdown text={`${body}`} />
          </Box>
          <Box flexDirection="column" marginTop={1}>
            <Text dimColor>
              {author3}
              {" · "}
              {createdAt3}
            </Text>
            <Markdown text={`${body}`} />
          </Box>
        </Box>
        Links
        <Link href={`${url}`} label="Open in Linear" />
        <Link href={`${url}`} label={`${title}`} />
        <Link href={`${url}`} label={`${title}`} />
        <Link href={`${url}`} label={`${title}`} />
        <Box flexDirection="column">
          Other sessions
          <Box>
            <Text>
              {state5}
            </Text>
            <Text wrap="truncate">
              no issue
              {" "}
            </Text>
            <Text dimColor>
              {" "}
              {label}
            </Text>
          </Box>
          <Box>
            <Text>
              {state6}
            </Text>
            <Text wrap="truncate">
              no issue
              {" "}
            </Text>
            <Text dimColor>
              {" "}
              {label2}
            </Text>
          </Box>
          <Box>
            <Text>
              {state7}
            </Text>
            <Text wrap="truncate">
              no issue
              {" "}
            </Text>
            <Text dimColor>
              {" "}
              {label3}
            </Text>
          </Box>
          <Text color="red">
            {"⚠ "}
            {text}
          </Text>
          <Text color="red">
            {"⚠ "}
            {text2}
          </Text>
          <Text color="red">
            {"⚠ "}
            {text3}
          </Text>
        </Box>
      </Box>
    )
  })

  on('session.start', async ($, e, next) => {
    const text = '…'
    const identifier = '…'
    const state = '…'
    await $.ui.toast(`⚠ ${text}`)
    await $.ui.toast(`${identifier} moved to ${state}`)
    return next(e)
  })
}

The mod's own code

Shown under the mod's licence (MIT); its text is below. Keep the notice if you copy these lines.

plugins/linear-workflow/hooks/register.tsx lines 410–496 · Band

plugins/linear-workflow/hooks/register.tsx:410

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const source = await read($, sourceAtom)
    const others = await read($, othersAtom)
    if (e.props.hasSurvey || !repo || (await read($, hiddenAtom))) return next(e)

    const { Box, Text, Button } = $.ui.resolve(e)
    const issue = await read($, issueAtom)
    const error = await read($, errorAtom)
    const width = e.props.bodyColumns
    const clashing = new Set(
      repo ? conflicts({ checkout: repo.root, issue: source?.id ?? null }, others).map(c => c.sessionId) : [],
    )

    const ui = { Box, Text }
    const rule = divider(ui, 'Linear', width, { dim: true })
    const sessionsRow = others.length > 0 && (
      <Box>
        <Box flexShrink={0}>
          <Text dimColor>  sessions  </Text>
        </Box>
        {others.map((o, i) => {
          const clash = clashing.has(o.sessionId)
          const text = o.issue ? `${o.issue}${o.state ? ` ${o.state}` : ''} (${o.label})` : `${o.label}: no issue`
          return (
            <Text key={o.sessionId} color={clash ? 'red' : undefined} dimColor={!clash} wrap="truncate">
              {i > 0 ? '  ·  ' : ''}
              {clash ? '⚠  ' : ''}
              {text}
            </Text>
          )
        })}
      </Box>
    )
    const buttons = (
      <Box>
        <Button key="details" label="Details" plain onPress={() => $.ui.open({ id: PANE, title: 'Linear' })} />
        <Text>  </Text>
        <Button key="hide" label="Hide" plain onPress={() => update($, hiddenAtom, () => true)} />
      </Box>
    )

    if (!source) {
      return (
        <Box flexDirection="column" width={width} marginTop={1}>
          {rule}
          <Text dimColor>  No Linear issue found</Text>
          {sessionsRow}
        </Box>
      )
    }

    if (!issue || issue.identifier !== source.id) {
      return (
        <Box flexDirection="column" width={width} marginTop={1}>
          {rule}
          <Text dimColor wrap="truncate">
            ◆ {source.id}  {error ?? 'loading…'}
          </Text>
          {sessionsRow}
        </Box>
      )
    }

    const siteKeys = repo?.sites.map(s => s.key) ?? []
    const scope = scopeSites(issue, siteKeys)
    const meta = [
      source.from === 'pinned' ? (source.detail.startsWith('held') ? 'held' : 'pinned') : source.from === 'root' ? 'root branch' : source.detail,
      siteKeys.length === 0 ? '' : scope.length ? `scope: ${scope.join(', ')}` : 'scope: all',
      issue.parent ? `parent ${issue.parent.identifier}` : '',
      error ? `stale: ${error}` : '',
    ].filter(Boolean)

    return (
      <Box flexDirection="column" width={width} marginTop={1}>
        {rule}
        {header(ui, issue)}
        <Text wrap="truncate">  {issue.title}</Text>
        <Box justifyContent="space-between">
          <Box flexShrink={1}>
            <Text dimColor wrap="truncate">  {meta.join(' · ')}</Text>
          </Box>
          <Box flexShrink={0}>{buttons}</Box>
        </Box>
        {sessionsRow}
      </Box>
    )
  })

plugins/linear-workflow/hooks/register.tsx lines 273–287 · Band

plugins/linear-workflow/hooks/register.tsx:273

function divider({ Box, Text }: Ui, title: string, width: number, opts: { count?: number; dim?: boolean; marginTop?: number } = {}) {
  return (
    <Box marginTop={opts.marginTop ?? 0}>
      <Box flexShrink={0}>
        <Text dimColor>── </Text>
        <Text bold dimColor={opts.dim}>{title}</Text>
        {opts.count !== undefined && <Text dimColor> {opts.count}</Text>}
        <Text> </Text>
      </Box>
      <Box flexShrink={1} overflow="hidden">
        <Text dimColor wrap="truncate">{'─'.repeat(Math.max(0, width))}</Text>
      </Box>
    </Box>
  )
}

plugins/linear-workflow/hooks/register.tsx lines 290–299 · Band

plugins/linear-workflow/hooks/register.tsx:290

function header({ Box, Text }: Ui, issue: Issue) {
  return (
    <Box>
      <Text bold color={stateColor(issue.stateType)}>◆ </Text>
      <Text bold>{issue.identifier}  </Text>
      <Text color={stateColor(issue.stateType)}>{issue.state}</Text>
      <Text dimColor> · {issue.priority}</Text>
    </Box>
  )
}

plugins/linear-workflow/hooks/register.tsx lines 498–607 · Pane

plugins/linear-workflow/hooks/register.tsx:498

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button, Link, Markdown } = $.ui.resolve(e)
    const source = await read($, sourceAtom)
    const issue = await read($, issueAtom)
    const error = await read($, errorAtom)
    const others = await read($, othersAtom)
    const width = e.props.bodyColumns
    const clashes = repo ? conflicts({ checkout: repo.root, issue: source?.id ?? null }, others) : []

    const ui = { Box, Text }
    const section = (title: string, count?: number) => divider(ui, title, width, { count, marginTop: 1 })
    const field = (label: string, value: string | null | undefined) =>
      value ? (
        <Box key={label}>
          <Box flexShrink={0} width={11}>
            <Text dimColor>{label}</Text>
          </Box>
          <Box flexShrink={1}>
            <Text wrap="truncate">{value}</Text>
          </Box>
        </Box>
      ) : null
    const othersSection = others.length > 0 && (
      <Box flexDirection="column">
        {section('Other sessions', others.length)}
        {others.map(o => (
          <Box key={o.sessionId}>
            <Text color={o.stateType ? stateColor(o.stateType) : undefined}>{(o.state ?? '—').padEnd(13)}</Text>
            <Text wrap="truncate">{o.issue ?? 'no issue'}  {o.title ?? ''}</Text>
            <Text dimColor>  {o.label}</Text>
          </Box>
        ))}
        {clashes.map(c => <Text key={c.key} color="red">⚠  {c.text}</Text>)}
      </Box>
    )

    if (!issue || issue.identifier !== source?.id) {
      return (
        <Box flexDirection="column" width={width}>
          <Text dimColor>{source ? `${source.id}: ${error ?? 'loading…'}` : 'No Linear issue on this branch. /linear ABC-123 pins one.'}</Text>
          {othersSection}
        </Box>
      )
    }

    const siteKeys = repo?.sites.map(s => s.key) ?? []
    const scope = scopeSites(issue, siteKeys)
    const sourceText = source
      ? source.from === 'pinned' ? source.detail : source.from === 'root' ? `branch ${source.detail}` : source.detail
      : null

    return (
      <Box flexDirection="column" width={width}>
        {header(ui, issue)}
        <Text bold>{issue.title}</Text>
        <Box marginTop={1}>
          <Button key="copy" label="Copy link" onPress={async () => {
            const copied = await $.ui.copy({ text: issue.url })
            $.ui.toast(copied.isCopied ? `Copied ${issue.url}` : issue.url)
          }} />
          <Text>  </Text>
          <Button key="refresh" label="Refresh" hotkey="r" onPress={() => refresh($, true)} />
        </Box>
        {error && <Text color="red">Refresh failed: {error}</Text>}

        <Box flexDirection="column" marginTop={1}>
          {field('Parent', issue.parent ? `${issue.parent.identifier} · ${issue.parent.title}` : null)}
          {field('Assignee', issue.assignee)}
          {field('Cycle', issue.cycle !== null ? String(issue.cycle) : null)}
          {field('Milestone', issue.milestone)}
          {field('Labels', issue.labels.join(', ') || null)}
          {field('Scope', scope.length ? scope.join(', ') : 'all')}
          {field('Source', sourceText)}
        </Box>

        {issue.children.length > 0 && (
          <Box flexDirection="column">
            {section('Sub-issues', issue.children.length)}
            {issue.children.map(c => (
              <Box key={c.identifier}>
                <Text color={stateColor(c.stateType)}>{c.state.padEnd(13)}</Text>
                <Text wrap="truncate">{c.identifier}  {c.title}</Text>
              </Box>
            ))}
          </Box>
        )}

        {section('Description')}
        <Markdown text={issue.description || '_No description._'} />

        {issue.comments.length > 0 && (
          <Box flexDirection="column">
            {section('Latest comments', issue.comments.length)}
            {issue.comments.map((c, i) => (
              <Box key={`c${i}`} flexDirection="column" marginTop={i > 0 ? 1 : 0}>
                <Text dimColor>{c.author} · {c.createdAt}</Text>
                <Markdown text={c.body} />
              </Box>
            ))}
          </Box>
        )}

        {section('Links')}
        <Link href={issue.url} label="Open in Linear" />
        {issue.links.map(l => <Link key={l.url} href={l.url} label={l.title} />)}

        {othersSection}
      </Box>
    )
  })

Licence text (MIT)

MIT License

Copyright (c) 2026 Olivier Depiesse

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

What its code calls

networkruns programswrites filesenv varstool calls

The design, read from code

Claude — Code

── Linear 3

────────

◆ Refresh ok · high

Fix login

Refresh

Details Hide

sessions

· ⚠ Refresh · ⚠ Refresh · ⚠ Refresh

Ask Claude…

Linear

◆ Refresh ok · high

Fix login

Copy link Refresh r

Refresh failed: Copy link

Parent

Refresh · Fix login

Assignee

alex

Cycle

Hide

Milestone

Copy link

Labels

Edit

Scope

all

Source

Linear

Sub-issues

okRefresh Fix login

Description

_No description._

Latest comments

alex · Oct 6

Parent

alex · Oct 6

Parent

alex · Oct 6

Parent

LinksOpen in LinearFix loginFix loginFix login

Other sessions

okno issue build

⚠ Refresh⚠ Refresh⚠ Refresh

Drawn from the mod's source at the commit read, not from a run: a list is drawn three times, a condition takes its first branch that draws in the desktop app, and a value only the run time knows is shown as a made-up sample (dotted underline) or left out. Colours and type are this site's.

What its code shows

Read from the source at commit 8955f2e14892 on 2026-10-06. The first group decides whether a mod is listed; the rest is for you to weigh. A later commit is not read until the next crawl.

Decides the listing: code you can check
Entry read	Every module hooks/hooks.json names was read.plugins/linear-workflow/hooks/register.tsx
Parses	Every file parses as TypeScript or JavaScript.4 files parsed
All its code is in the mod	Every import is a file of the mod or the engine's own module; no packages, no require.all its code is in the mod
Readable	No minified lines, no eval or new Function, no import of a computed path, no encoded blobs.no minified code, no eval, no encoded blobs
Calls in the open	Network and programs are reached as $.http.fetch and $.process.run in place, never passed around.every call outside goes through $ in the open
For you to weigh before installing
Where it draws	The terminal, the desktop app, both, or nothing (hooks only: a guard or a prompt rewriter), as its code says. Shown, never a reason to leave a mod out.draws in the terminal and the desktop app, the same in both
Install line	Whether its repository's own .claude-plugin/marketplace.json lists it, so it installs from that marketplace with the lines on its page.listed in its repository's .claude-plugin/marketplace.json: installs from there
Programs on Windows	Whether every program it starts through $.process exists on Windows (tail, date, open, osascript, /usr/… do not).plugins/linear-workflow/hooks/register.tsx:194 rm (not on Windows); plugins/linear-workflow/hooks/register.tsx:364 rm (not on Windows)
Network	Whether every fetch names its https host in the code.plugins/linear-workflow/hooks/register.tsx:253 fetch(url)
Programs	Whether every program it starts is named in the code and is not a shell, an interpreter or a network tool.git (reaches the network), rm
Reads and sends	Whether it both reads files or environment variables and reaches the network.reads environment variables and files and reaches the network
Keys in the source	Whether the source holds what looks like an API key or a private key.no keys in the source
Licence	An open licence (MIT, Apache-2.0, BSD, ISC, Unlicense, 0BSD, CC0) with its text lets modscode show its code; otherwise the code is linked.MIT

This is a reading of the code text, not a security review: it does not run the mod, and it cannot see what a program the mod starts does. The check before installing is yours. How mods are chosen

Install it

Check it yourself before you install it. Mods run unsandboxed, with your permissions, and modscode does not vouch for what this code does. Read the code below (or run claude plugin validate . in its folder), weigh what it reaches, and install the commit you read.

Its repository is its marketplace. Add that marketplace (in the terminal with these commands, or in the desktop app's plugin settings) and install the mod from it:

/plugin marketplace add Sarimarcus/claude-code-plugins

/plugin install linear-workflow@sarimarcus

This installs the marketplace's latest commit, which may not be the one read here (8955f2e14892). Compare them before you install.

Ask Claude about it

With the modscode connector added, Claude can read this design, what its code reaches and its code, and build on them. Ask it like this:

Read the modscode design "sarimarcus-linear-workflow" with its code and make me a pane like it

Search them from Claude: the MCP connector

linear-workflow

What it does

Good points

Code to start from

Starter (register.tsx)

The mod's own code

What its code calls

The design, read from code

What its code shows

Install it

Ask Claude about it

Similar designs