OPE-296: Add linear integration for starting sessions from issues (#3235)
* feat(linear): start sessions from Linear issues Authorize a Linear workspace on this OpenChamber server, map teams to projects, attach an issue from chat, start a session or worktree from an issue, and post started/completed/failed comments that open the session. Hidden in VS Code. * feat(linear): connect more than one Linear workspace Store each OAuth grant on this OpenChamber server and keep one current, so Settings can add and switch workspaces without dropping the others. Project mapping is per workspace. Remove the Linear button next to New Chat; start-from-issue stays on New Worktree. * feat(linear): add a right-hand issues panel Browse and filter issues in the rail, open a card to change status or start a session, and collapse search plus most filters to icons on a narrow panel. * feat(linear): open issues in the rail and filter by Linear status The rail icon only shows after Linear is connected. Clicking a Linear row on work status opens the panel. Status options match the card, including Done, Canceled, and Duplicate. The Integrations experimental warning sits under Third-party integrations. * fix(linear): use stable OAuth callback broker * fix(chat): preview Linear issue attachments The context switch missed linear-issue, so tsc treated the preview helpers as incomplete. * fix(ui): restore Linear i18n parity and the #2903 sync harness Turkish was missing the Linear dictionaries, and the subagent test still wrapped only SyncContext after reads moved to SyncRuntimeContext. * fix(linear): drop changelog hunks and close review races Keep changelogs out of this PR, restore CodeMirror ranges, ignore stale Linear list pages, and leave a persisted Linear tab open until auth has actually resolved. * fix(linear): tint active issue filters and clear them in one click * fix(markdown): read escaped brackets as text, not display math `\[...\]` is display math in LaTeX and an escaped bracket pair in CommonMark. The block tokenizer claimed every `\[`, so prose like `[title \[Bug\] more](url)` was handed to KaTeX: "Bug" rendered as a centered formula and the block token split the paragraph, tearing the link into three pieces. Linear, GitHub and any other source that escapes brackets the way CommonMark requires hit this. Display math now has to own its line — `\[` starts one and `\]` ends one. A formula on its own line still renders; `\[` mid-sentence stays an escape, which is what CommonMark says it is and what prose almost always means. Inline `\(...\)` keeps the same ambiguity, but inline math is legitimately mid-sentence, so there is no position to judge it by. Covered by regression tests, including the verbatim comment body that surfaced this. * feat(linear): make session status comments opt-in and public-only A status comment lands in a Linear workspace the whole team reads, and the link it carried pointed at whatever origin started the session — usually loopback or a LAN address. Everyone but its author got a dead link, and nobody had agreed to the comments in the first place. Comments are now off until the user turns them on in Settings -> Integrations -> Linear, and the check lives on the server: the event hub posts completed and failure without going through the interface, so a client-side gate would not hold. When the resolved origin is not publicly reachable the server posts nothing at all rather than a link only its author can open; `isPublicSessionOrigin` rejects loopback, private LAN, carrier-grade NAT, link-local and single-label hosts. The desktop deep-link origin is gone with it, since no one else can follow one either. The comment body also dropped the session title. It repeated the issue the comment already sits on, and issue titles routinely carry brackets ("[Bug] ...") that broke the markdown link. The body is now one short link, and `sessionTitle` is gone from the route, client and types. Also caps the dedupe file at the newest 500 sessions; it grew forever. * fix(linear): match the pull request panel and clear review findings Comments in the Linear panel now render as the same avatar timeline the pull request panel uses, with the shared time-format preference instead of a raw locale string. Comment authors carry `avatarUrl`, which the GraphQL selection was not requesting. Review findings from the same pass: - `status-runtime.js` hand-rolled `typeof` narrowing and failed the vendored anti-slop lint; it now parses through `parse.js` like every other file in the module. - `useLinearAuthStore` turned any failed request into `connected: false` with `hasChecked: true`. Since the rail icon, the composer entry and the worktree option all gate on `connected === true`, one network blip hid Linear for the rest of the session, and Settings only re-checked when it had never checked. It now keeps the last known status and leaves `hasChecked` false so the next caller retries. - `LinearIssuesView` (1096 lines) was a static import in `ContextPanel`, shipping in the main bundle although its rail icon stays hidden until a workspace is connected. It is lazy now, like `GitView`. - Dropped dead code: the unused port helpers left over from the loopback callback, two re-exported default values nothing read, and a redundant export in `linkedIssues`. - Integrations is no longer badged beta.
This commit is contained in:
Alex Kutas
@@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Icon } from '@/components/icon/Icon';
|
||||
import { SettingsPageLayout } from '@/components/sections/shared/SettingsPageLayout';
|
||||
import { SETTINGS_DESCRIPTION_CLASS } from '@/components/sections/shared/SettingsSection';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { getRegisteredRuntimeAPIs } from '@/contexts/runtimeAPIRegistry';
|
||||
import { LinearSettings } from './LinearSettings';
|
||||
import { ThirdPartyIntegrationsSection } from './ThirdPartyIntegrationsSection';
|
||||
|
||||
interface IntegrationsPageProps {
|
||||
@@ -15,25 +15,17 @@ export const IntegrationsPage: React.FC<IntegrationsPageProps> = ({
|
||||
onOpenPluginManager,
|
||||
}) => {
|
||||
const { t } = useI18n();
|
||||
const hasLinear = Boolean(getRegisteredRuntimeAPIs()?.linear);
|
||||
|
||||
return (
|
||||
<SettingsPageLayout
|
||||
title={t('settings.page.integrations.title')}
|
||||
description={(
|
||||
<div className="space-y-3">
|
||||
<p className={SETTINGS_DESCRIPTION_CLASS}>{t('settings.page.integrations.description')}</p>
|
||||
<div role="alert" className="flex items-start gap-2 rounded-lg border border-[var(--status-warning-border)] bg-[var(--status-warning-background)] p-3">
|
||||
<Icon name="error-warning" className="mt-0.5 size-4 shrink-0 text-[var(--status-warning)]" />
|
||||
<p className="typography-meta text-[var(--status-warning)]">
|
||||
{t('settings.integrations.experimentalWarning')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
showSaveStatus={false}
|
||||
description={t('settings.page.integrations.description')}
|
||||
showSaveStatus
|
||||
>
|
||||
{hasLinear ? <LinearSettings /> : null}
|
||||
<ThirdPartyIntegrationsSection
|
||||
divider={false}
|
||||
divider={hasLinear}
|
||||
onOpenProviderSetup={onOpenProviderSetup}
|
||||
onOpenPluginManager={onOpenPluginManager}
|
||||
/>
|
||||
|
||||
@@ -0,0 +1,230 @@
|
||||
import React from 'react';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import {
|
||||
SettingsControlGroup,
|
||||
SettingsFieldRow,
|
||||
SETTINGS_FIELDS_STACK_CLASS,
|
||||
SETTINGS_SELECT_ROW_TRIGGER_CLASS,
|
||||
SETTINGS_SELECT_SIZE,
|
||||
} from '@/components/sections/shared/SettingsSection';
|
||||
import { reportSettingsSaveState } from '@/lib/persistence';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { useProjectsStore } from '@/stores/useProjectsStore';
|
||||
import type { LinearAPI, LinearMappingResult } from '@/lib/api/types';
|
||||
|
||||
const NONE = '__none__';
|
||||
const INHERIT = '__inherit__';
|
||||
|
||||
export function LinearProjectMapping({
|
||||
linear,
|
||||
connected,
|
||||
organizationId,
|
||||
}: {
|
||||
linear: LinearAPI;
|
||||
connected: boolean;
|
||||
organizationId?: string | null;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const projects = useProjectsStore((state) => state.projects);
|
||||
const [mapping, setMapping] = React.useState<LinearMappingResult | null>(null);
|
||||
const [loadFailed, setLoadFailed] = React.useState(false);
|
||||
const [isSaving, setIsSaving] = React.useState(false);
|
||||
|
||||
const loadMapping = React.useCallback(async () => {
|
||||
if (!connected) {
|
||||
setMapping(null);
|
||||
setLoadFailed(false);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const next = await linear.mappingGet();
|
||||
if (next.connected === false) {
|
||||
setMapping(null);
|
||||
setLoadFailed(false);
|
||||
return;
|
||||
}
|
||||
setMapping(next);
|
||||
setLoadFailed(false);
|
||||
} catch (error) {
|
||||
console.error('Failed to load Linear mapping:', error);
|
||||
setLoadFailed(true);
|
||||
}
|
||||
}, [connected, linear, organizationId]);
|
||||
|
||||
React.useEffect(() => {
|
||||
void loadMapping();
|
||||
}, [loadMapping]);
|
||||
|
||||
const saveMapping = React.useCallback(async (next: LinearMappingResult) => {
|
||||
const teamProjectPaths: { [teamId: string]: string } = {};
|
||||
for (const team of next.teams ?? []) {
|
||||
if (team.projectPath) {
|
||||
teamProjectPaths[team.id] = team.projectPath;
|
||||
}
|
||||
}
|
||||
setIsSaving(true);
|
||||
reportSettingsSaveState('saving');
|
||||
try {
|
||||
const saved = await linear.mappingSet({
|
||||
defaultProjectPath: next.defaultProjectPath ?? null,
|
||||
teamProjectPaths,
|
||||
});
|
||||
if (saved.connected === false) {
|
||||
setMapping(null);
|
||||
reportSettingsSaveState('error');
|
||||
return;
|
||||
}
|
||||
setMapping(saved);
|
||||
setLoadFailed(false);
|
||||
reportSettingsSaveState('saved');
|
||||
} catch (error) {
|
||||
console.error('Failed to save Linear mapping:', error);
|
||||
reportSettingsSaveState('error');
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
}, [linear]);
|
||||
|
||||
if (!connected) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (loadFailed && !mapping) {
|
||||
return (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t('settings.integrations.linear.mapping.loadFailed')}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
if (!mapping) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const projectLabel = (path: string) => {
|
||||
const project = projects.find((entry) => entry.path === path);
|
||||
return project?.label?.trim() || path;
|
||||
};
|
||||
|
||||
const defaultProjectLabel = (value: string | undefined) => {
|
||||
if (!value || value === NONE) {
|
||||
return t('settings.integrations.linear.mapping.defaultProject.placeholder');
|
||||
}
|
||||
return projectLabel(value);
|
||||
};
|
||||
|
||||
const teamProjectLabel = (value: string | undefined) => {
|
||||
if (!value || value === INHERIT) {
|
||||
return t('settings.integrations.linear.mapping.teams.useDefault');
|
||||
}
|
||||
return projectLabel(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={SETTINGS_FIELDS_STACK_CLASS}>
|
||||
{projects.length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t('settings.integrations.linear.mapping.emptyProjects')}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<SettingsFieldRow
|
||||
label={t('settings.integrations.linear.mapping.defaultProject')}
|
||||
info={t('settings.integrations.linear.mapping.defaultProject.info')}
|
||||
settingsItem="integrations.linear.mapping"
|
||||
>
|
||||
<Select
|
||||
value={mapping.defaultProjectPath || NONE}
|
||||
disabled={isSaving || projects.length === 0}
|
||||
onValueChange={(value) => {
|
||||
void saveMapping({
|
||||
...mapping,
|
||||
defaultProjectPath: value === NONE ? null : value,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<SelectTrigger
|
||||
size={SETTINGS_SELECT_SIZE}
|
||||
className={SETTINGS_SELECT_ROW_TRIGGER_CLASS}
|
||||
aria-label={t('settings.integrations.linear.mapping.defaultProject.aria')}
|
||||
>
|
||||
<SelectValue placeholder={t('settings.integrations.linear.mapping.defaultProject.placeholder')}>
|
||||
{defaultProjectLabel}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={NONE}>
|
||||
{t('settings.integrations.linear.mapping.defaultProject.placeholder')}
|
||||
</SelectItem>
|
||||
{mapping.defaultProjectPath && !projects.some((entry) => entry.path === mapping.defaultProjectPath) ? (
|
||||
<SelectItem value={mapping.defaultProjectPath}>{mapping.defaultProjectPath}</SelectItem>
|
||||
) : null}
|
||||
{projects.map((project) => (
|
||||
<SelectItem key={project.id} value={project.path}>
|
||||
{projectLabel(project.path)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</SettingsFieldRow>
|
||||
|
||||
<SettingsControlGroup
|
||||
title={t('settings.integrations.linear.mapping.teams')}
|
||||
info={t('settings.integrations.linear.mapping.teams.info')}
|
||||
>
|
||||
{(mapping.teams ?? []).length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t('settings.integrations.linear.mapping.emptyTeams')}
|
||||
</p>
|
||||
) : (
|
||||
<div className={SETTINGS_FIELDS_STACK_CLASS}>
|
||||
{(mapping.teams ?? []).map((team) => (
|
||||
<SettingsFieldRow
|
||||
key={team.id}
|
||||
label={`${team.key} · ${team.name}`}
|
||||
>
|
||||
<Select
|
||||
value={team.projectPath || INHERIT}
|
||||
disabled={isSaving || projects.length === 0}
|
||||
onValueChange={(value) => {
|
||||
void saveMapping({
|
||||
...mapping,
|
||||
teams: (mapping.teams ?? []).map((entry) => (
|
||||
entry.id === team.id
|
||||
? { ...entry, projectPath: value === INHERIT ? null : value }
|
||||
: entry
|
||||
)),
|
||||
});
|
||||
}}
|
||||
>
|
||||
<SelectTrigger
|
||||
size={SETTINGS_SELECT_SIZE}
|
||||
className={SETTINGS_SELECT_ROW_TRIGGER_CLASS}
|
||||
aria-label={t('settings.integrations.linear.mapping.teams.aria', { team: team.key })}
|
||||
>
|
||||
<SelectValue placeholder={t('settings.integrations.linear.mapping.teams.useDefault')}>
|
||||
{teamProjectLabel}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={INHERIT}>
|
||||
{t('settings.integrations.linear.mapping.teams.useDefault')}
|
||||
</SelectItem>
|
||||
{team.projectPath && !projects.some((entry) => entry.path === team.projectPath) ? (
|
||||
<SelectItem value={team.projectPath}>{team.projectPath}</SelectItem>
|
||||
) : null}
|
||||
{projects.map((project) => (
|
||||
<SelectItem key={project.id} value={project.path}>
|
||||
{projectLabel(project.path)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</SettingsFieldRow>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</SettingsControlGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
import React from 'react';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import {
|
||||
SettingsFieldRow,
|
||||
SETTINGS_FIELDS_STACK_CLASS,
|
||||
} from '@/components/sections/shared/SettingsSection';
|
||||
import { reportSettingsSaveState } from '@/lib/persistence';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import type { LinearAPI } from '@/lib/api/types';
|
||||
|
||||
/**
|
||||
* Status comments are written into a Linear workspace other people read, so
|
||||
* they stay off until the user turns them on. The server posts nothing while
|
||||
* this is off, including the completed and failure comments the event hub
|
||||
* sends without going through this interface.
|
||||
*/
|
||||
export function LinearSessionComments({
|
||||
linear,
|
||||
connected,
|
||||
}: {
|
||||
linear: LinearAPI;
|
||||
connected: boolean;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const [enabled, setEnabled] = React.useState<boolean | null>(null);
|
||||
const [loadFailed, setLoadFailed] = React.useState(false);
|
||||
const [isSaving, setIsSaving] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!connected) {
|
||||
setEnabled(null);
|
||||
setLoadFailed(false);
|
||||
return;
|
||||
}
|
||||
let cancelled = false;
|
||||
void linear.preferencesGet()
|
||||
.then((preferences) => {
|
||||
if (cancelled) return;
|
||||
setEnabled(preferences.sessionComments);
|
||||
setLoadFailed(false);
|
||||
})
|
||||
.catch(() => {
|
||||
if (cancelled) return;
|
||||
setLoadFailed(true);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [connected, linear]);
|
||||
|
||||
const save = React.useCallback(async (next: boolean) => {
|
||||
const previous = enabled;
|
||||
setEnabled(next);
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const saved = await linear.preferencesSet({ sessionComments: next });
|
||||
setEnabled(saved.sessionComments);
|
||||
reportSettingsSaveState('saved');
|
||||
} catch {
|
||||
setEnabled(previous);
|
||||
reportSettingsSaveState('error');
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
}, [enabled, linear]);
|
||||
|
||||
if (!connected) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (loadFailed) {
|
||||
return (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t('settings.integrations.linear.sessionComments.loadFailed')}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={SETTINGS_FIELDS_STACK_CLASS}>
|
||||
<SettingsFieldRow
|
||||
label={t('settings.integrations.linear.sessionComments.label')}
|
||||
info={t('settings.integrations.linear.sessionComments.info')}
|
||||
settingsItem="integrations.linear.session-comments"
|
||||
>
|
||||
<Switch
|
||||
checked={enabled === true}
|
||||
disabled={enabled === null || isSaving}
|
||||
onCheckedChange={(checked) => { void save(checked); }}
|
||||
aria-label={t('settings.integrations.linear.sessionComments.aria')}
|
||||
/>
|
||||
</SettingsFieldRow>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,350 @@
|
||||
import React from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { toast } from '@/components/ui';
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
|
||||
import { getRegisteredRuntimeAPIs } from '@/contexts/runtimeAPIRegistry';
|
||||
import { useLinearAuthStore } from '@/stores/useLinearAuthStore';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { openExternalUrl } from '@/lib/url';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { focusDesktopWindow, isDesktopShell } from '@/lib/desktop';
|
||||
import { Icon } from '@/components/icon/Icon';
|
||||
import { SettingsSection } from '@/components/sections/shared/SettingsSection';
|
||||
import { LinearProjectMapping } from './LinearProjectMapping';
|
||||
import { LinearSessionComments } from './LinearSessionComments';
|
||||
|
||||
const AUTHORIZATION_WATCH_MS = 3 * 60_000;
|
||||
const AUTHORIZATION_POLL_MS = 1_500;
|
||||
|
||||
type WorkspaceSnapshot = {
|
||||
connected: boolean;
|
||||
ids: string;
|
||||
currentId: string;
|
||||
currentAuthorizedAt: number;
|
||||
};
|
||||
|
||||
function snapshotWorkspaces(status: {
|
||||
connected?: boolean;
|
||||
organization?: { id?: string } | null;
|
||||
workspaces?: Array<{ id: string; current: boolean; authorizedAt?: number | null }>;
|
||||
} | null): WorkspaceSnapshot {
|
||||
const workspaces = status?.workspaces ?? [];
|
||||
const current = workspaces.find((entry) => entry.current);
|
||||
return {
|
||||
connected: Boolean(status?.connected),
|
||||
ids: workspaces.map((entry) => entry.id).slice().sort().join(','),
|
||||
currentId: current?.id || status?.organization?.id || '',
|
||||
currentAuthorizedAt: current?.authorizedAt ?? 0,
|
||||
};
|
||||
}
|
||||
|
||||
function authorizationCompleted(previous: WorkspaceSnapshot, next: WorkspaceSnapshot): boolean {
|
||||
if (!next.connected) return false;
|
||||
if (!previous.connected) return true;
|
||||
return next.ids !== previous.ids
|
||||
|| next.currentId !== previous.currentId
|
||||
|| next.currentAuthorizedAt !== previous.currentAuthorizedAt;
|
||||
}
|
||||
|
||||
export const LinearSettings: React.FC = () => {
|
||||
const { t } = useI18n();
|
||||
const runtimeLinear = getRegisteredRuntimeAPIs()?.linear;
|
||||
const status = useLinearAuthStore((state) => state.status);
|
||||
const isLoading = useLinearAuthStore((state) => state.isLoading);
|
||||
const hasChecked = useLinearAuthStore((state) => state.hasChecked);
|
||||
const refreshStatus = useLinearAuthStore((state) => state.refreshStatus);
|
||||
const setStatus = useLinearAuthStore((state) => state.setStatus);
|
||||
|
||||
const [isBusy, setIsBusy] = React.useState(false);
|
||||
const [isWaiting, setIsWaiting] = React.useState(false);
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const pollTimerRef = React.useRef<number | null>(null);
|
||||
|
||||
const stopWaiting = React.useCallback(() => {
|
||||
if (pollTimerRef.current != null) {
|
||||
window.clearInterval(pollTimerRef.current);
|
||||
pollTimerRef.current = null;
|
||||
}
|
||||
setIsWaiting(false);
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!runtimeLinear) {
|
||||
return;
|
||||
}
|
||||
if (!hasChecked) {
|
||||
void refreshStatus(runtimeLinear);
|
||||
}
|
||||
return () => {
|
||||
stopWaiting();
|
||||
};
|
||||
}, [hasChecked, refreshStatus, runtimeLinear, stopWaiting]);
|
||||
|
||||
const startConnect = React.useCallback(async () => {
|
||||
if (!runtimeLinear) return;
|
||||
stopWaiting();
|
||||
setIsBusy(true);
|
||||
const previous = snapshotWorkspaces(useLinearAuthStore.getState().status);
|
||||
try {
|
||||
const payload = await runtimeLinear.authStart(isDesktopShell() ? 'desktop' : 'web');
|
||||
setIsWaiting(true);
|
||||
setOpen(true);
|
||||
void openExternalUrl(payload.authorizationUrl);
|
||||
|
||||
const deadline = Date.now() + AUTHORIZATION_WATCH_MS;
|
||||
pollTimerRef.current = window.setInterval(() => {
|
||||
void (async () => {
|
||||
if (Date.now() > deadline) {
|
||||
stopWaiting();
|
||||
toast.error(t('settings.integrations.linear.toast.authorizationFailed'));
|
||||
return;
|
||||
}
|
||||
const next = await refreshStatus(runtimeLinear, { force: true });
|
||||
if (authorizationCompleted(previous, snapshotWorkspaces(next))) {
|
||||
stopWaiting();
|
||||
toast.success(t('settings.integrations.linear.toast.connected'));
|
||||
void focusDesktopWindow();
|
||||
}
|
||||
})();
|
||||
}, AUTHORIZATION_POLL_MS);
|
||||
} catch (error) {
|
||||
console.error('Failed to start Linear connect:', error);
|
||||
toast.error(t('settings.integrations.linear.toast.startConnectFailed'));
|
||||
stopWaiting();
|
||||
} finally {
|
||||
setIsBusy(false);
|
||||
}
|
||||
}, [refreshStatus, runtimeLinear, stopWaiting, t]);
|
||||
|
||||
const activateWorkspace = React.useCallback(async (organizationId: string) => {
|
||||
if (!runtimeLinear || !organizationId) return;
|
||||
setIsBusy(true);
|
||||
try {
|
||||
const payload = await runtimeLinear.authActivate(organizationId);
|
||||
setStatus(payload);
|
||||
toast.success(t('settings.integrations.linear.toast.workspaceSwitched'));
|
||||
} catch (error) {
|
||||
console.error('Failed to switch Linear workspace:', error);
|
||||
toast.error(t('settings.integrations.linear.toast.workspaceSwitchFailed'));
|
||||
} finally {
|
||||
setIsBusy(false);
|
||||
}
|
||||
}, [runtimeLinear, setStatus, t]);
|
||||
|
||||
const disconnect = React.useCallback(async () => {
|
||||
if (!runtimeLinear) return;
|
||||
setIsBusy(true);
|
||||
try {
|
||||
stopWaiting();
|
||||
await runtimeLinear.authDisconnect();
|
||||
toast.success(t('settings.integrations.linear.toast.disconnected'));
|
||||
await refreshStatus(runtimeLinear, { force: true });
|
||||
} catch (error) {
|
||||
console.error('Failed to disconnect Linear:', error);
|
||||
toast.error(t('settings.integrations.linear.toast.disconnectFailed'));
|
||||
} finally {
|
||||
setIsBusy(false);
|
||||
}
|
||||
}, [refreshStatus, runtimeLinear, stopWaiting, t]);
|
||||
|
||||
if (!runtimeLinear) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const connected = Boolean(status?.connected);
|
||||
const user = status?.user;
|
||||
const organization = status?.organization;
|
||||
const workspaces = status?.workspaces ?? [];
|
||||
const otherWorkspaces = workspaces.filter((workspace) => !workspace.current);
|
||||
const displayName = user?.displayName?.trim() || user?.name?.trim() || t('settings.integrations.linear.label.unknownUser');
|
||||
const statusLabel = isWaiting
|
||||
? t('settings.integrations.linear.status.waiting')
|
||||
: isLoading && !hasChecked
|
||||
? t('common.loading')
|
||||
: connected
|
||||
? (organization?.name?.trim() || t('settings.integrations.linear.status.connected'))
|
||||
: t('settings.integrations.linear.status.notConnected');
|
||||
const statusClassName = isWaiting
|
||||
? 'bg-[var(--status-warning)]/15 text-[var(--status-warning)]'
|
||||
: connected
|
||||
? 'bg-[var(--status-success)]/15 text-[var(--status-success)]'
|
||||
: 'bg-[var(--surface-muted)] text-muted-foreground';
|
||||
const expanded = isWaiting || open;
|
||||
|
||||
return (
|
||||
<SettingsSection
|
||||
title={t('settings.integrations.firstParty.title')}
|
||||
info={t('settings.integrations.firstParty.info')}
|
||||
divider={false}
|
||||
settingsItem="integrations.first-party"
|
||||
contentClassName="space-y-3"
|
||||
>
|
||||
<Collapsible
|
||||
open={expanded}
|
||||
onOpenChange={(nextOpen) => {
|
||||
if (isWaiting) {
|
||||
setOpen(true);
|
||||
return;
|
||||
}
|
||||
setOpen(nextOpen);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
data-settings-item="integrations.linear"
|
||||
className="overflow-hidden rounded-xl border border-[var(--interactive-border)] bg-[var(--surface-elevated)]"
|
||||
>
|
||||
<CollapsibleTrigger
|
||||
className="flex w-full min-w-0 items-center gap-3 px-4 py-3 text-left hover:bg-[var(--interactive-hover)]/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--interactive-focus-ring)]"
|
||||
>
|
||||
<div className="flex size-10 shrink-0 items-center justify-center rounded-[10px] bg-[var(--surface-muted)]">
|
||||
<Icon name="linear" className="size-5 text-foreground" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-sm font-semibold text-foreground">
|
||||
{t('settings.integrations.linear.title')}
|
||||
</div>
|
||||
<p className="mt-0.5 line-clamp-1 text-xs leading-snug text-muted-foreground">
|
||||
{t('settings.integrations.linear.description')}
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
aria-live="polite"
|
||||
className={cn(
|
||||
'max-w-36 shrink-0 truncate rounded-full px-2 py-0.5 text-[10px] font-medium',
|
||||
statusClassName,
|
||||
)}
|
||||
>
|
||||
{statusLabel}
|
||||
</span>
|
||||
<Icon
|
||||
name="arrow-down-s"
|
||||
className={cn(
|
||||
'size-4 shrink-0 text-muted-foreground transition-transform duration-150 ease-out motion-reduce:transition-none',
|
||||
expanded && 'rotate-180',
|
||||
)}
|
||||
/>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="border-t border-[var(--interactive-border)] px-4 py-4">
|
||||
<div className="space-y-3">
|
||||
{connected ? (
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
{user?.avatarUrl ? (
|
||||
<img
|
||||
src={user.avatarUrl}
|
||||
alt={t('settings.integrations.linear.avatarAlt.withName', { name: displayName })}
|
||||
className="size-10 shrink-0 rounded-full border border-[var(--interactive-border)] bg-[var(--surface-muted)] object-cover"
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex size-10 shrink-0 items-center justify-center rounded-full border border-[var(--interactive-border)] bg-[var(--surface-muted)]">
|
||||
<Icon name="linear" className="size-4 text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-sm font-medium text-foreground">{displayName}</div>
|
||||
<p className="mt-0.5 truncate text-xs text-muted-foreground">
|
||||
{[organization?.name, user?.email].filter(Boolean).join(' · ')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : isWaiting ? (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t('settings.integrations.linear.flow.description')}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{connected ? (
|
||||
<>
|
||||
<LinearProjectMapping
|
||||
linear={runtimeLinear}
|
||||
connected={connected}
|
||||
organizationId={organization?.id ?? null}
|
||||
/>
|
||||
<LinearSessionComments linear={runtimeLinear} connected={connected} />
|
||||
{otherWorkspaces.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
<p className="typography-micro text-muted-foreground">
|
||||
{t('settings.integrations.linear.label.otherWorkspaces')}
|
||||
</p>
|
||||
<div className="space-y-1">
|
||||
{otherWorkspaces.map((workspace) => {
|
||||
const workspaceUser = workspace.user;
|
||||
const workspaceName = workspace.name?.trim()
|
||||
|| t('settings.integrations.linear.status.connected');
|
||||
return (
|
||||
<div
|
||||
key={workspace.id}
|
||||
className="flex items-center justify-between gap-3 rounded-md border border-[var(--surface-subtle)] bg-[var(--surface-muted)] px-3 py-2"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-sm font-medium text-foreground">{workspaceName}</div>
|
||||
{workspaceUser?.email ? (
|
||||
<p className="truncate text-xs text-muted-foreground">{workspaceUser.email}</p>
|
||||
) : null}
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => void activateWorkspace(workspace.id)}
|
||||
disabled={isBusy}
|
||||
>
|
||||
{t('settings.integrations.linear.actions.switchTo')}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => void startConnect()}
|
||||
disabled={isBusy || isWaiting}
|
||||
data-settings-item="integrations.linear.add-workspace"
|
||||
>
|
||||
{t('settings.integrations.linear.actions.addWorkspace')}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={() => void disconnect()}
|
||||
disabled={isBusy}
|
||||
>
|
||||
{t('settings.integrations.linear.actions.disconnect')}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
) : isWaiting ? (
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="typography-micro text-muted-foreground animate-pulse">
|
||||
{t('settings.integrations.linear.flow.waiting')}
|
||||
</span>
|
||||
<Button type="button" size="sm" variant="ghost" disabled={isBusy} onClick={stopWaiting}>
|
||||
{t('settings.common.actions.cancel')}
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="default"
|
||||
onClick={() => void startConnect()}
|
||||
disabled={isBusy || (isLoading && !hasChecked)}
|
||||
>
|
||||
{isBusy ? <Icon name="loader-4" className="size-3.5 animate-spin" /> : null}
|
||||
{t('settings.integrations.linear.actions.connect')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</div>
|
||||
</Collapsible>
|
||||
</SettingsSection>
|
||||
);
|
||||
};
|
||||
@@ -414,6 +414,12 @@ export const ThirdPartyIntegrationsSection: React.FC<ThirdPartyIntegrationsSecti
|
||||
settingsItem="integrations.third-party"
|
||||
contentClassName="space-y-3"
|
||||
>
|
||||
<div role="alert" className="flex items-start gap-2 rounded-lg border border-[var(--status-warning-border)] bg-[var(--status-warning-background)] p-3">
|
||||
<Icon name="error-warning" className="mt-0.5 size-4 shrink-0 text-[var(--status-warning)]" />
|
||||
<p className="typography-meta text-[var(--status-warning)]">
|
||||
{t('settings.integrations.experimentalWarning')}
|
||||
</p>
|
||||
</div>
|
||||
{THIRD_PARTY_PLUGINS.map(renderPlugin)}
|
||||
</SettingsSection>
|
||||
|
||||
|
||||
@@ -61,6 +61,14 @@ const PROMPT_PAGE_MAP: Record<string, PromptPageConfig> = {
|
||||
{ id: 'github.issue.review.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
|
||||
],
|
||||
},
|
||||
'linear.issue.review': {
|
||||
titleKey: 'settings.magicPrompts.page.group.linearIssueReview.title',
|
||||
descriptionKey: 'settings.magicPrompts.page.group.linearIssueReview.description',
|
||||
blocks: [
|
||||
{ id: 'linear.issue.review.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
|
||||
{ id: 'linear.issue.review.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
|
||||
],
|
||||
},
|
||||
'github.pr.checks.review': {
|
||||
titleKey: 'settings.magicPrompts.page.group.githubPrFailedChecksReview.title',
|
||||
descriptionKey: 'settings.magicPrompts.page.group.githubPrFailedChecksReview.description',
|
||||
|
||||
@@ -35,6 +35,12 @@ export const MagicPromptsSidebar: React.FC<MagicPromptsSidebarProps> = ({ onItem
|
||||
{ id: 'github.pr.comment.single', titleKey: 'settings.magicPrompts.sidebar.item.githubSinglePrCommentReview' },
|
||||
],
|
||||
},
|
||||
{
|
||||
groupKey: 'settings.magicPrompts.sidebar.group.linear',
|
||||
items: [
|
||||
{ id: 'linear.issue.review', titleKey: 'settings.magicPrompts.sidebar.item.linearIssueReview' },
|
||||
],
|
||||
},
|
||||
{
|
||||
groupKey: 'settings.magicPrompts.sidebar.group.planning',
|
||||
items: [
|
||||
|
||||
Reference in New Issue
Block a user