@infinisys/is-devops 0.0.0-stage → 0.1.1

package/client.js

@@ -0,0 +1,1667 @@
+/**
+ * Client half of the Infinity DevOps bundle.
+ *
+ * One global panel (`infinity-devops`) reads GitFox through the Host's
+ * authenticated proxy. The browser never receives the GitFox token, and this
+ * module stays independent of the settings page implementation: it only calls
+ * the stable `/infinity/devops/api/v1/*` surface.
+ */
+
+{
+const PANEL_KEY = 'infinity-devops';
+const STORAGE_KEY = 'infinity.devops.project';
+const CSS_TAG = '@infinisys/is-devops/DevOpsPanel.css';
+const PLUGIN_ID = '@infinisys/is-devops';
+const PROXY = '/infinity/devops';
+
+const CSS = `
+.is-devops-root{height:100%;min-height:0;display:flex;flex-direction:column;background:var(--dsw-alias-bg-base);color:var(--dsw-alias-label-primary);font-size:14px;line-height:22px;overflow:hidden}
+.is-devops-top{flex:none;display:flex;flex-direction:column;gap:12px;padding:18px 24px 12px;border-bottom:1px solid var(--dsw-alias-border-l1)}
+.is-devops-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
+.is-devops-title{font-size:18px;font-weight:600;line-height:26px}
+.is-devops-sub{font-size:13px;line-height:20px;color:var(--dsw-alias-label-secondary);margin-top:2px}
+.is-devops-headTools{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
+.is-devops-select{box-sizing:border-box;height:32px;max-width:320px;border:1px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-sm);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font:inherit;font-size:13px;padding:0 8px;outline:none}
+.is-devops-select:focus-visible{border-color:var(--dsw-alias-brand-primary-new-colorprimary-new-color,var(--dsw-alias-link))}
+.is-devops-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--dsw-radius-sm);border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font:inherit;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
+.is-devops-btn:hover{background:var(--dsw-alias-interactive-bg-hover)}
+.is-devops-btn[disabled]{opacity:.55;cursor:default}
+.is-devops-btn[data-variant=primary]{background:var(--dsw-alias-brand-primary);border-color:var(--dsw-alias-brand-primary);color:var(--dsw-alias-label-primary-foreground)}
+.is-devops-btn[data-variant=primary]:hover{background:var(--dsw-alias-button-primary-hover)}
+.is-devops-btn[data-variant=ghost]{border-color:transparent;background:transparent;color:var(--dsw-alias-label-secondary)}
+.is-devops-btn[data-variant=danger]{border-color:color-mix(in srgb,var(--dsw-alias-state-error-primary) 35%,transparent);background:transparent;color:var(--dsw-alias-state-error-primary)}
+.is-devops-tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
+.is-devops-tab{box-sizing:border-box;height:30px;border:none;border-radius:var(--dsw-radius-sm);background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;font-size:13px;font-weight:500;padding:0 10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
+.is-devops-tab:hover{background:var(--dsw-alias-interactive-bg-hover)}
+.is-devops-tab[aria-selected=true],.is-devops-tab[data-active=true]{background:var(--dsw-alias-interactive-bg-active);color:var(--dsw-alias-label-primary)}
+.is-devops-tabCount{font-size:11px;color:var(--dsw-alias-label-caption)}
+.is-devops-body{flex:1;min-height:0;overflow:auto;padding:16px 24px 40px;display:flex;flex-direction:column;gap:14px}
+.is-devops-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
+.is-devops-chip{height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--dsw-alias-border-l1);background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;font-size:12px;cursor:pointer}
+.is-devops-chip[data-active=true]{background:var(--dsw-alias-interactive-bg-active);color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-border-l2)}
+.is-devops-list{display:flex;flex-direction:column;border:1px solid var(--dsw-alias-border-l1);border-radius:var(--dsw-radius-md);overflow:hidden;background:var(--dsw-alias-bg-layer-1)}
+.is-devops-row{display:flex;align-items:flex-start;gap:14px;padding:12px 14px;border-bottom:1px solid var(--dsw-alias-border-l1);min-width:0}
+.is-devops-row:last-child{border-bottom:none}
+.is-devops-row:hover{background:var(--dsw-alias-interactive-bg-hover)}
+.is-devops-rowMain{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
+.is-devops-titleBlock{display:flex;flex-direction:column;gap:2px;min-width:0}
+.is-devops-titleRow{display:flex;align-items:baseline;gap:8px;min-width:0}
+.is-devops-translate{flex:none;border:1px solid var(--dsw-alias-border-l2);border-radius:999px;background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;font-size:11px;line-height:16px;padding:0 8px;cursor:pointer}
+.is-devops-translate:hover{color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-label-secondary)}
+.is-devops-translation{font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary);white-space:pre-wrap}
+.is-devops-translation[data-tone=error]{color:var(--dsw-alias-state-error-primary)}
+.is-devops-rowTitle{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.is-devops-rowMeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--dsw-alias-label-secondary)}
+.is-devops-rowActions{display:flex;align-items:center;gap:6px;flex:none;flex-wrap:wrap}
+.is-devops-pill{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:500;border:1px solid var(--dsw-alias-border-l1);color:var(--dsw-alias-label-secondary);white-space:nowrap}
+.is-devops-pill[data-state=open]{color:var(--dsw-alias-state-success-primary);border-color:color-mix(in srgb,var(--dsw-alias-state-success-primary) 35%,transparent)}
+.is-devops-pill[data-state=closed],[data-state=merged]{color:var(--dsw-alias-state-business-primary,var(--dsw-alias-link));border-color:var(--dsw-alias-border-l2)}
+.is-devops-pill[data-state=draft]{color:var(--dsw-alias-state-warn-primary);border-color:color-mix(in srgb,var(--dsw-alias-state-warn-primary) 35%,transparent)}
+.is-devops-label{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:4px;background:var(--dsw-alias-markdown-tag);color:var(--dsw-alias-label-secondary);font-size:11px}
+.is-devops-sha{font-family:var(--ds-font-family-code);font-size:12px;color:var(--dsw-alias-label-secondary)}
+.is-devops-card{border:1px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-1);padding:14px 16px;display:flex;flex-direction:column;gap:12px}
+.is-devops-cardTitle{font-size:14px;font-weight:600}
+.is-devops-formGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
+.is-devops-field{display:flex;flex-direction:column;gap:5px;min-width:0}
+.is-devops-fieldWide{grid-column:1/-1}
+.is-devops-labelText{font-size:12px;font-weight:500;color:var(--dsw-alias-label-secondary)}
+.is-devops-input{box-sizing:border-box;width:100%;height:34px;border:1px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-sm);background:var(--dsw-alias-bg-base);color:var(--dsw-alias-label-primary);font:inherit;font-size:13px;padding:0 9px;outline:none}
+.is-devops-input:focus-visible{border-color:var(--dsw-alias-brand-primary-new-colorprimary-new-color,var(--dsw-alias-link));box-shadow:0 0 0 3px color-mix(in srgb,var(--dsw-alias-brand-primary-new-colorprimary-new-color,var(--dsw-alias-link)) 18%,transparent)}
+.is-devops-textarea{box-sizing:border-box;width:100%;min-height:72px;border:1px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-sm);background:var(--dsw-alias-bg-base);color:var(--dsw-alias-label-primary);font:inherit;font-size:13px;padding:8px 9px;outline:none;resize:vertical}
+.is-devops-textarea:focus-visible{border-color:var(--dsw-alias-brand-primary-new-colorprimary-new-color,var(--dsw-alias-link))}
+.is-devops-formActions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.is-devops-formActions .is-devops-spacer{flex:1}
+.is-devops-message{border-radius:var(--dsw-radius-sm);border:1px solid var(--dsw-alias-border-l2);padding:9px 12px;font-size:13px;line-height:20px;background:var(--dsw-alias-bg-layer-2)}
+.is-devops-message[data-tone=ok]{border-color:color-mix(in srgb,var(--dsw-alias-state-success-primary) 35%,transparent);background:color-mix(in srgb,var(--dsw-alias-state-success-primary) 8%,transparent)}
+.is-devops-message[data-tone=error]{border-color:color-mix(in srgb,var(--dsw-alias-state-error-primary) 35%,transparent);background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 8%,transparent)}
+.is-devops-empty{border:1px dashed var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);padding:24px;text-align:center;color:var(--dsw-alias-label-secondary);font-size:13px;line-height:20px}
+.is-devops-skeleton{height:14px;border-radius:4px;background:var(--dsw-alias-bg-skeleton);margin:8px 0;animation:is-devops-pulse 1.2s ease-in-out infinite}
+@keyframes is-devops-pulse{50%{opacity:.55}}
+@media (prefers-reduced-motion:reduce){.is-devops-skeleton{animation:none}}
+.is-devops-required{color:var(--dsw-alias-state-error-primary)}
+`;
+
+const COPY = {
+  en: {
+    title: 'Infinity DevOps',
+    subtitle: 'Issues, merge requests, commits and branches from the connected GitFox project.',
+    project: 'Project',
+    noProject: 'Select a GitFox project to begin.',
+    noProjects: 'No GitFox projects are visible for this token.',
+    loadProjectsFailed: 'Cannot load projects: {message}',
+    loading: 'Loading…',
+    retry: 'Retry',
+    refresh: 'Refresh',
+    issues: 'Issues',
+    mergeRequests: 'Merge requests',
+    commits: 'Commits',
+    branches: 'Branches',
+    newIssue: 'New issue',
+    newMergeRequest: 'New merge request',
+    newBranch: 'New branch',
+    create: 'Create',
+    cancel: 'Cancel',
+    creating: 'Creating…',
+    titleLabel: 'Title',
+    description: 'Description',
+    source: 'Source branch',
+    target: 'Target branch',
+    branchName: 'Branch name',
+    fromRef: 'From ref',
+    draft: 'Draft',
+    squash: 'Squash commits',
+    deleteSource: 'Delete source branch after merge',
+    merge: 'Merge',
+    merging: 'Merging…',
+    closeIssue: 'Close',
+    reopenIssue: 'Reopen',
+    delete: 'Delete',
+    deleting: 'Deleting…',
+    empty: 'Nothing here yet.',
+    noBranches: 'This repository has no branches yet.',
+    state: 'State',
+    open: 'Open',
+    closed: 'Closed',
+    all: 'All',
+    merged: 'Merged',
+    author: 'Author',
+    comments: '{count} comments',
+    protected: 'Protected',
+    default: 'Default',
+    emptyMessage: 'No items for this filter.',
+    created: 'Created.',
+    mergedNotice: 'Merge request merged.',
+    deletedNotice: 'Branch deleted.',
+    requestFailed: 'Request failed: {message}',
+    required: 'This field is required.',
+    confirmDeleteBranch: 'Delete branch "{branch}"? This cannot be undone.',
+    commitRef: 'Revision',
+    defaultBranch: 'default',
+    settingsHint: 'Connect GitFox in Settings → Infinity System.',
+    notConfigured:
+      'GitFox is not connected. Open Settings → Infinity System and add your access token.',
+    translate: 'Translate',
+    translateFailed: 'Translation failed. Try again in a moment.',
+  },
+  zh: {
+    title: 'Infinity DevOps',
+    subtitle: '已连接 GitFox 项目的议题、合并请求、提交与分支。',
+    project: '项目',
+    noProject: '选择一个 GitFox 项目开始。',
+    noProjects: '当前令牌看不到任何 GitFox 项目。',
+    loadProjectsFailed: '无法加载项目：{message}',
+    loading: '加载中…',
+    retry: '重试',
+    refresh: '刷新',
+    issues: '议题',
+    mergeRequests: '合并请求',
+    commits: '提交',
+    branches: '分支',
+    newIssue: '新建议题',
+    newMergeRequest: '新建合并请求',
+    newBranch: '新建分支',
+    create: '创建',
+    cancel: '取消',
+    creating: '创建中…',
+    titleLabel: '标题',
+    description: '描述',
+    source: '源分支',
+    target: '目标分支',
+    branchName: '分支名',
+    fromRef: '起始引用',
+    draft: '草稿',
+    squash: '压缩提交',
+    deleteSource: '合并后删除源分支',
+    merge: '合并',
+    merging: '合并中…',
+    closeIssue: '关闭',
+    reopenIssue: '重新打开',
+    delete: '删除',
+    deleting: '删除中…',
+    empty: '这里还没有内容。',
+    noBranches: '仓库还没有分支。',
+    state: '状态',
+    open: '开放中',
+    closed: '已关闭',
+    all: '全部',
+    merged: '已合并',
+    author: '作者',
+    comments: '{count} 条评论',
+    protected: '受保护',
+    default: '默认',
+    emptyMessage: '当前筛选下没有内容。',
+    created: '已创建。',
+    mergedNotice: '合并请求已合并。',
+    deletedNotice: '分支已删除。',
+    requestFailed: '请求失败：{message}',
+    required: '此项为必填。',
+    confirmDeleteBranch: '删除分支“{branch}”？此操作不可撤销。',
+    commitRef: '版本',
+    defaultBranch: '默认',
+    settingsHint: '在“设置 → Infinity System”中连接 GitFox。',
+    notConfigured: 'GitFox 尚未连接。请打开“设置 → Infinity System”并填写访问令牌。',
+    translate: '翻译',
+    translateFailed: '翻译失败了，请稍后再试。',
+  },
+};
+
+let React = null;
+let h = null;
+let Fragment = null;
+let useState = null;
+let useEffect = null;
+let useCallback = null;
+let useMemo = null;
+let panelCtx;
+
+/**
+ * @param {'en'|'zh'} locale - active locale.
+ * @param {string} key - copy key.
+ * @returns {string} localized string.
+ */
+function text(locale, key) {
+  const table = locale.toLowerCase().startsWith('zh') ? COPY.zh : COPY.en;
+  return table[key] ?? COPY.en[key] ?? key;
+}
+
+/**
+ * @param {object} ctx - client context.
+ * @returns {(key: string) => string} translation function.
+ */
+function useTranslation(ctx) {
+  const [revision, setRevision] = useState(() => ctx.locale.getSnapshot().revision);
+  useEffect(
+    () =>
+      ctx.locale.subscribe(() => {
+        setRevision(ctx.locale.getSnapshot().revision);
+      }),
+    [ctx],
+  );
+  const active = ctx.locale.getSnapshot().active;
+  return useCallback((key) => text(active, key), [active, revision]);
+}
+
+/**
+ * Call one proxied GitFox endpoint.
+ *
+ * @param {string} path - `/api/v1/...` path.
+ * @param {{ method?: string, body?: unknown }} [options] - request options.
+ * @returns {Promise<any>} parsed payload.
+ */
+async function apiRequest(path, options = {}) {
+  const hasBody = options.body !== undefined;
+  const headers = { accept: 'application/json', 'x-infinity-request': '1' };
+  if (hasBody) headers['content-type'] = 'application/json';
+  const response = await fetch(`${PROXY}${path}`, {
+    method: options.method ?? 'GET',
+    headers,
+    body: hasBody ? JSON.stringify(options.body) : undefined,
+  });
+  const raw = await response.text();
+  let payload;
+  try {
+    payload = raw === '' ? undefined : JSON.parse(raw);
+  } catch {
+    payload = undefined;
+  }
+  if (!response.ok) {
+    throw new Error(payload?.error?.message ?? payload?.message ?? `HTTP ${response.status}`);
+  }
+  return payload;
+}
+
+/**
+ * Translate one user-visible text into the user's language.
+ *
+ * @param {string} text - English (or mixed) source text.
+ * @param {string} target - active locale id.
+ * @returns {Promise<string>} translated text.
+ */
+async function translateText(source, target) {
+  const response = await fetch('/infinity/translate', {
+    method: 'POST',
+    headers: {
+      accept: 'application/json',
+      'content-type': 'application/json',
+      'x-infinity-request': '1',
+    },
+    body: JSON.stringify({ text: source, target }),
+  });
+  const payload = await response.json().catch(() => undefined);
+  if (!response.ok) throw translationFailure(payload, response.status);
+  return typeof payload?.text === 'string' ? payload.text : '';
+}
+
+/**
+ * Build one readable translation failure.
+ *
+ * A desktop shell answers a slow Host with a 504 page of its own, and that page
+ * carries no JSON message. Both that page and a typed route failure become a
+ * sentence the user can act on; the raw detail goes to the console.
+ *
+ * @param {unknown} payload - parsed response body, when it had one.
+ * @param {number} status - HTTP status of the failed response.
+ * @returns {Error} failure carrying its code.
+ */
+function translationFailure(payload, status) {
+  const detail = typeof payload?.error?.message === 'string' ? payload.error.message : '';
+  const declared = typeof payload?.error?.code === 'string' ? payload.error.code : '';
+  const fallback = status === 504 ? 'translate-timeout' : 'translate-failed';
+  const error = new Error(detail === '' ? `HTTP ${status}` : detail);
+  error.code = declared === '' ? fallback : declared;
+  return error;
+}
+
+/**
+ * A title line with an inline "translate" toggle.
+ *
+ * The English record stays visible; the translation is rendered underneath and
+ * can be collapsed again. The button disappears when the Host has no
+ * translation route.
+ *
+ * @param {{ text: string, target: string, t: Function }} props - title props.
+ * @returns {import('react').ReactElement} title block.
+ */
+function TranslatableTitle({ value, target, t }) {
+  const [state, setState] = useState({ status: 'idle', value: '' });
+  const toggle = () => {
+    if (state.status === 'loading') return;
+    if (state.status === 'done' || state.status === 'error') {
+      setState({ status: 'idle', value: '' });
+      return;
+    }
+    setState({ status: 'loading', value: '' });
+    translateText(value, target)
+      .then((translated) => setState({ status: 'done', value: translated }))
+      .catch((error) => {
+        console.warn('[is-devops] translation failed:', error);
+        setState({ status: 'error', value: t('translateFailed') });
+      });
+  };
+  return h(
+    'div',
+    { className: 'is-devops-titleBlock' },
+    h(
+      'div',
+      { className: 'is-devops-titleRow' },
+      h('div', { className: 'is-devops-rowTitle' }, value),
+      h(
+        'button',
+        { type: 'button', className: 'is-devops-translate', title: t('translate'), onClick: toggle },
+        state.status === 'loading' ? '…' : t('translate'),
+      ),
+    ),
+    state.status === 'done' || state.status === 'error'
+      ? h(
+          'div',
+          { className: 'is-devops-translation', 'data-tone': state.status === 'error' ? 'error' : 'ok' },
+          state.value,
+        )
+      : null,
+  );
+}
+
+/**
+ * @param {unknown} data - project list payload.
+ * @returns {object[]} project rows.
+ */
+function projectRows(data) {
+  if (Array.isArray(data)) return data;
+  return Array.isArray(data?.items) ? data.items : [];
+}
+
+/**
+ * @param {object} project - GitFox project row.
+ * @returns {string} `namespace/name` key.
+ */
+function keyOfProject(project) {
+  return `${project.owner_name}/${project.name}`;
+}
+
+/**
+ * @param {object} project - GitFox project row.
+ * @returns {string} encoded API prefix for the project.
+ */
+function projectBase(project) {
+  return `/api/v1/projects/${encodeURIComponent(project.owner_name)}/${encodeURIComponent(project.name)}`;
+}
+
+/**
+ * @param {unknown} value - ISO date, seconds, or milliseconds.
+ * @param {string} locale - active locale id.
+ * @returns {string} localized date.
+ */
+function formatDate(value, locale) {
+  if (value === undefined || value === null || value === '') return '';
+  let date;
+  if (typeof value === 'number') {
+    date = new Date(value > 1e12 ? value : value * 1000);
+  } else {
+    date = new Date(String(value));
+  }
+  if (Number.isNaN(date.getTime())) return String(value);
+  return date.toLocaleString(locale.toLowerCase().startsWith('zh') ? 'zh-CN' : 'en-US', {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  });
+}
+
+/**
+ * @param {unknown} message - commit message.
+ * @returns {string} first line.
+ */
+function firstLine(message) {
+  return String(message ?? '').split('\n')[0];
+}
+
+/**
+ * @param {unknown} sha - full commit id.
+ * @returns {string} short id.
+ */
+function shortSha(sha) {
+  return String(sha ?? '').slice(0, 8);
+}
+
+/**
+ * Install the panel stylesheet once per plugin lifetime.
+ *
+ * @returns {() => void} disposer.
+ */
+function installStyles() {
+  if (document.querySelector(`style[data-plugin-css="${CSS_TAG}"]`) !== null) return () => {};
+  const tag = document.createElement('style');
+  tag.dataset.plugin = PLUGIN_ID;
+  tag.dataset.pluginCss = CSS_TAG;
+  tag.textContent = CSS;
+  document.head.appendChild(tag);
+  return () => tag.remove();
+}
+
+/**
+ * @param {object} project - selected project.
+ * @returns {Promise<object[]>} branch rows.
+ */
+async function fetchBranches(project) {
+  const data = await apiRequest(`${projectBase(project)}/repository/branches`);
+  return Array.isArray(data) ? data : [];
+}
+
+/**
+ * @param {object[]} branches - branch rows.
+ * @param {string} current - current selection.
+ * @returns {string} selected branch name.
+ */
+function pickBranchName(branches, current) {
+  if (branches.some((branch) => branch.name === current)) return current;
+  return branches.find((branch) => branch.is_default)?.name ?? branches[0]?.name ?? current;
+}
+
+/**
+ * @param {object[]} branches - branch rows.
+ * @param {string} current - current selection.
+ * @returns {string} source branch name.
+ */
+function pickSourceBranchName(branches, current) {
+  if (current !== '') return current;
+  return branches.find((branch) => !branch.is_default)?.name || branches[0]?.name || '';
+}
+
+/**
+ * @param {object[]} branches - branch rows.
+ * @returns {import('react').ReactElement[]} select options.
+ */
+function branchOptions(branches) {
+  return branches.map((branch) => h('option', { key: branch.name, value: branch.name }, branch.name));
+}
+
+/**
+ * Build the API path of one tab view.
+ *
+ * @param {object} project - selected project.
+ * @param {string} tab - active tab id.
+ * @param {{ issueState: string, mrStatus: string, commitRef: string }} filters - active filters.
+ * @returns {string} API path.
+ */
+function listPath(project, tab, filters) {
+  const base = projectBase(project);
+  if (tab === 'issues') {
+    return `${base}/issues?state=${encodeURIComponent(filters.issueState)}&per_page=50`;
+  }
+  if (tab === 'merge_requests') {
+    return `${base}/merge_requests?status=${encodeURIComponent(filters.mrStatus)}&per_page=50`;
+  }
+  if (tab === 'commits') {
+    const query = filters.commitRef === '' ? '' : `&ref_name=${encodeURIComponent(filters.commitRef)}`;
+    return `${base}/repository/commits?per_page=50${query}`;
+  }
+  return `${base}/repository/branches`;
+}
+
+/**
+ * @param {object} project - selected project.
+ * @param {string} tab - active tab id.
+ * @param {{ issueState: string, mrStatus: string, commitRef: string }} filters - active filters.
+ * @returns {Promise<object[]>} rows of the active tab.
+ */
+async function fetchTabItems(project, tab, filters) {
+  const data = await apiRequest(listPath(project, tab, filters));
+  if (tab !== 'issues') return Array.isArray(data) ? data : [];
+  return Array.isArray(data?.items) ? data.items : [];
+}
+
+/**
+ * @param {object} project - selected project.
+ * @param {string} tab - active tab id.
+ * @returns {boolean} whether the tab needs the branch list.
+ */
+function needsBranches(tab) {
+  return tab === 'merge_requests' || tab === 'branches' || tab === 'commits';
+}
+
+/**
+ * @param {object[]} projects - project rows.
+ * @param {string} projectKey - stored `namespace/name` key.
+ * @returns {object | undefined} selected project.
+ */
+function findProject(projects, projectKey) {
+  return (projects ?? []).find((candidate) => keyOfProject(candidate) === projectKey);
+}
+
+/**
+ * @returns {string} project key restored from browser storage.
+ */
+function readStoredProjectKey() {
+  try {
+    return localStorage.getItem(STORAGE_KEY) ?? '';
+  } catch {
+    // Storage may be unavailable in hardened browser contexts.
+    return '';
+  }
+}
+
+/** @param {{ children?: any, onClick?: () => void, disabled?: boolean, variant?: string, title?: string }} props - button props. */
+function Button({ children, onClick, disabled = false, variant = 'secondary', title }) {
+  return h('button', {
+    type: 'button',
+    className: 'is-devops-btn',
+    'data-variant': variant,
+    disabled,
+    title,
+    onClick,
+  }, children);
+}
+
+/** @param {{ label: string, wide?: boolean, children?: any }} props - form field. */
+function Field({ label, wide = false, children }) {
+  return h('div', { className: `is-devops-field${wide ? ' is-devops-fieldWide' : ''}` },
+    h('span', { className: 'is-devops-labelText' }, label),
+    children);
+}
+
+/** @param {{ tone: string, children?: any }} props - inline message. */
+function Message({ tone, children }) {
+  return h('div', { className: 'is-devops-message', 'data-tone': tone }, children);
+}
+
+/** @param {{ label: string, wide?: boolean, value: string, disabled: boolean, placeholder?: string, onChange: (event: any) => void }} props - text field. */
+function LabeledInput({ label, wide = false, value, disabled, placeholder, onChange }) {
+  return h(Field, { label, wide },
+    h('input', {
+      className: 'is-devops-input',
+      value,
+      disabled,
+      autoFocus: true,
+      onChange,
+      placeholder,
+    }));
+}
+
+/** @param {{ label: string, wide?: boolean, value: string, disabled: boolean, onChange: (event: any) => void }} props - textarea field. */
+function LabeledTextArea({ label, wide = false, value, disabled, onChange }) {
+  return h(Field, { label, wide },
+    h('textarea', { className: 'is-devops-textarea', value, disabled, onChange }));
+}
+
+/** @param {{ label: string, wide?: boolean, value: string, disabled: boolean, onChange: (event: any) => void, children?: any }} props - select field. */
+function LabeledSelect({ label, wide = false, value, disabled, onChange, children }) {
+  return h(Field, { label, wide },
+    h('select', { className: 'is-devops-select', value, disabled, onChange }, children));
+}
+
+/** @param {{ error: string | undefined }} props - form error notice. */
+function FormError({ error }) {
+  if (error === undefined) return null;
+  return h(Message, { tone: 'error' }, error);
+}
+
+/** @param {{ busy: boolean, onSubmit: () => void, onCancel: () => void, t: Function }} props - form actions. */
+function FormActions({ busy, onSubmit, onCancel, t }) {
+  return h('div', { className: 'is-devops-formActions' },
+    h(Button, { variant: 'primary', onClick: onSubmit, disabled: busy }, busy ? t('creating') : t('create')),
+    h(Button, { variant: 'ghost', onClick: onCancel, disabled: busy }, t('cancel')));
+}
+
+/** @param {{ checked: boolean, disabled: boolean, onChange: (next: boolean) => void, label: string }} props - draft checkbox. */
+function DraftToggle({ checked, disabled, onChange, label }) {
+  return h('label', { className: 'is-devops-labelText', style: { display: 'flex', alignItems: 'center', gap: '6px' } },
+    h('input', { type: 'checkbox', checked, disabled, onChange: (event) => onChange(event.target.checked) }),
+    label);
+}
+
+/**
+ * Issue creation form.
+ *
+ * @param {{ project: object, t: Function, onDone: (message: string) => void, onCancel: () => void }} props - composer wiring.
+ * @returns {import('react').ReactElement} form.
+ */
+function IssueComposer({ project, t, onDone, onCancel }) {
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(undefined);
+
+  const submit = async () => {
+    if (title.trim() === '') {
+      setError(t('required'));
+      return;
+    }
+    setBusy(true);
+    setError(undefined);
+    try {
+      await apiRequest(`${projectBase(project)}/issues`, {
+        method: 'POST',
+        body: { title: title.trim(), description: description.trim() },
+      });
+      onDone(t('created'));
+    } catch (failure) {
+      setError(t('requestFailed').replace('{message}', failure.message));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return h(
+    'section',
+    { className: 'is-devops-card', 'aria-busy': busy },
+    h('div', { className: 'is-devops-cardTitle' }, t('newIssue')),
+    h(
+      'div',
+      { className: 'is-devops-formGrid' },
+      h(LabeledInput, {
+        label: t('titleLabel'),
+        wide: true,
+        value: title,
+        disabled: busy,
+        placeholder: t('titleLabel'),
+        onChange: (event) => setTitle(event.target.value),
+      }),
+      h(LabeledTextArea, {
+        label: t('description'),
+        wide: true,
+        value: description,
+        disabled: busy,
+        onChange: (event) => setDescription(event.target.value),
+      }),
+    ),
+    h(FormError, { error }),
+    h(FormActions, { busy, onSubmit: submit, onCancel, t }),
+  );
+}
+
+/**
+ * Merge-request creation form.
+ *
+ * @param {{ project: object, t: Function, onDone: (message: string) => void, onCancel: () => void }} props - composer wiring.
+ * @returns {import('react').ReactElement} form.
+ */
+function MergeRequestComposer({ project, t, onDone, onCancel }) {
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [source, setSource] = useState('');
+  const [target, setTarget] = useState(project.default_branch ?? '');
+  const [draft, setDraft] = useState(false);
+  const [branches, setBranches] = useState([]);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(undefined);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetchBranches(project)
+      .then((rows) => {
+        if (cancelled) return;
+        setBranches(rows);
+        setSource((current) => pickSourceBranchName(rows, current));
+        setTarget((current) => pickBranchName(rows, current));
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, [project]);
+
+  const submit = async () => {
+    if (title.trim() === '' || source === '' || target === '') {
+      setError(t('required'));
+      return;
+    }
+    setBusy(true);
+    setError(undefined);
+    try {
+      await apiRequest(`${projectBase(project)}/merge_requests`, {
+        method: 'POST',
+        body: {
+          title: title.trim(),
+          description: description.trim(),
+          source_branch: source,
+          target_branch: target,
+          is_draft: draft,
+        },
+      });
+      onDone(t('created'));
+    } catch (failure) {
+      setError(t('requestFailed').replace('{message}', failure.message));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const options = branchOptions(branches);
+
+  return h(
+    'section',
+    { className: 'is-devops-card', 'aria-busy': busy },
+    h('div', { className: 'is-devops-cardTitle' }, t('newMergeRequest')),
+    h(
+      'div',
+      { className: 'is-devops-formGrid' },
+      h(LabeledInput, {
+        label: t('titleLabel'),
+        wide: true,
+        value: title,
+        disabled: busy,
+        onChange: (event) => setTitle(event.target.value),
+      }),
+      h(LabeledSelect, {
+        label: t('source'),
+        value: source,
+        disabled: busy,
+        onChange: (event) => setSource(event.target.value),
+      }, options),
+      h(LabeledSelect, {
+        label: t('target'),
+        value: target,
+        disabled: busy,
+        onChange: (event) => setTarget(event.target.value),
+      }, options),
+      h(LabeledTextArea, {
+        label: t('description'),
+        wide: true,
+        value: description,
+        disabled: busy,
+        onChange: (event) => setDescription(event.target.value),
+      }),
+    ),
+    h(DraftToggle, { checked: draft, disabled: busy, onChange: setDraft, label: t('draft') }),
+    h(FormError, { error }),
+    h(FormActions, { busy, onSubmit: submit, onCancel, t }),
+  );
+}
+
+/**
+ * Branch creation form.
+ *
+ * @param {{ project: object, t: Function, onDone: (message: string) => void, onCancel: () => void }} props - composer wiring.
+ * @returns {import('react').ReactElement} form.
+ */
+function BranchComposer({ project, t, onDone, onCancel }) {
+  const [name, setName] = useState('');
+  const [ref, setRef] = useState(project.default_branch ?? '');
+  const [branches, setBranches] = useState([]);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(undefined);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetchBranches(project)
+      .then((rows) => {
+        if (cancelled) return;
+        setBranches(rows);
+        setRef((current) => pickBranchName(rows, current));
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, [project]);
+
+  const submit = async () => {
+    if (name.trim() === '' || ref === '') {
+      setError(t('required'));
+      return;
+    }
+    setBusy(true);
+    setError(undefined);
+    try {
+      await apiRequest(`${projectBase(project)}/repository/branches`, {
+        method: 'POST',
+        body: { name: name.trim(), ref_name: ref },
+      });
+      onDone(t('created'));
+    } catch (failure) {
+      setError(t('requestFailed').replace('{message}', failure.message));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return h(
+    'section',
+    { className: 'is-devops-card', 'aria-busy': busy },
+    h('div', { className: 'is-devops-cardTitle' }, t('newBranch')),
+    h(
+      'div',
+      { className: 'is-devops-formGrid' },
+      h(LabeledInput, {
+        label: t('branchName'),
+        value: name,
+        disabled: busy,
+        placeholder: 'feature/…',
+        onChange: (event) => setName(event.target.value),
+      }),
+      h(LabeledSelect, {
+        label: t('fromRef'),
+        value: ref,
+        disabled: busy,
+        onChange: (event) => setRef(event.target.value),
+      }, branchOptions(branches)),
+    ),
+    h(FormError, { error }),
+    h(FormActions, { busy, onSubmit: submit, onCancel, t }),
+  );
+}
+
+/**
+ * Render the composer matching the active compose tab.
+ *
+ * @param {{ view: object, actions: object, t: Function }} props - panel state.
+ * @returns {import('react').ReactElement | null} composer.
+ */
+function ComposerSlot({ view, actions, t }) {
+  const composerProps = {
+    project: view.project,
+    t,
+    onDone: actions.finishCompose,
+    onCancel: actions.cancelCompose,
+  };
+  if (view.compose === 'issues') return h(IssueComposer, composerProps);
+  if (view.compose === 'merge_requests') return h(MergeRequestComposer, composerProps);
+  if (view.compose === 'branches') return h(BranchComposer, composerProps);
+  return null;
+}
+
+/**
+ * @param {object | undefined} project - selected project.
+ * @param {Function} t - translation function.
+ * @returns {string} panel subtitle.
+ */
+function panelSubtitle(project, t) {
+  if (project === undefined) return t('subtitle');
+  return `${project.owner_name}/${project.name} · ${t('subtitle')}`;
+}
+
+/**
+ * Project picker shown in the panel header.
+ *
+ * @param {{ project: object | undefined, projects: object[] | undefined, projectKey: string, onChange: (key: string) => void, t: Function }} props - picker wiring.
+ * @returns {import('react').ReactElement | null} picker.
+ */
+function ProjectSelect({ project, projects, projectKey, onChange, t }) {
+  if (projects === undefined) return null;
+  const selectProps = {
+    className: 'is-devops-select',
+    'aria-label': t('project'),
+    value: project === undefined ? '' : projectKey,
+    onChange: (event) => onChange(event.target.value),
+  };
+  if (projects.length === 0) {
+    return h('select', selectProps, h('option', { value: '' }, t('noProjects')));
+  }
+  return h(
+    'select',
+    selectProps,
+    projects.map((candidate) =>
+      h('option', { key: keyOfProject(candidate), value: keyOfProject(candidate) }, keyOfProject(candidate)),
+    ),
+  );
+}
+
+/**
+ * @param {{ t: Function }} props - tab labels.
+ * @returns {{ id: string, label: string }[]} tab definitions.
+ */
+function tabsFor(t) {
+  return [
+    { id: 'issues', label: t('issues') },
+    { id: 'merge_requests', label: t('mergeRequests') },
+    { id: 'commits', label: t('commits') },
+    { id: 'branches', label: t('branches') },
+  ];
+}
+
+/**
+ * @param {{ tab: string, onSelect: (tab: string) => void, t: Function }} props - tab bar wiring.
+ * @returns {import('react').ReactElement} tab bar.
+ */
+function TabBar({ tab, onSelect, t }) {
+  return h(
+    'div',
+    { className: 'is-devops-tabs', role: 'tablist' },
+    tabsFor(t).map((entry) =>
+      h(
+        'button',
+        {
+          key: entry.id,
+          type: 'button',
+          role: 'tab',
+          className: 'is-devops-tab',
+          'aria-selected': tab === entry.id,
+          'data-active': tab === entry.id,
+          onClick: () => onSelect(entry.id),
+        },
+        entry.label,
+      ),
+    ),
+  );
+}
+
+/**
+ * @param {{ view: object, actions: object, t: Function }} props - panel state.
+ * @returns {import('react').ReactElement} panel header.
+ */
+function PanelHeader({ view, actions, t }) {
+  return h(
+    'header',
+    { className: 'is-devops-top' },
+    h(
+      'div',
+      { className: 'is-devops-head' },
+      h(
+        'div',
+        { style: { minWidth: 0 } },
+        h('div', { className: 'is-devops-title' }, t('title')),
+        h('div', { className: 'is-devops-sub' }, panelSubtitle(view.project, t)),
+      ),
+      h(
+        'div',
+        { className: 'is-devops-headTools' },
+        h(ProjectSelect, {
+          project: view.project,
+          projects: view.projects,
+          projectKey: view.projectKey,
+          onChange: actions.selectProject,
+          t,
+        }),
+        h(Button, { variant: 'ghost', onClick: actions.refresh, title: t('refresh') }, '↻'),
+      ),
+    ),
+    h(TabBar, { tab: view.tab, onSelect: actions.selectTab, t }),
+  );
+}
+
+/**
+ * @param {{ label: string, active: boolean, onSelect: () => void }} props - filter chip.
+ * @returns {import('react').ReactElement} chip button.
+ */
+function FilterChip({ label, active, onSelect }) {
+  return h(
+    'button',
+    {
+      type: 'button',
+      className: 'is-devops-chip',
+      'data-active': active,
+      onClick: onSelect,
+    },
+    label,
+  );
+}
+
+/**
+ * @param {{ project: object, branches: object[], commitRef: string, onChange: (ref: string) => void, t: Function }} props - revision picker.
+ * @returns {import('react').ReactElement} select.
+ */
+function CommitRefSelect({ project, branches, commitRef, onChange, t }) {
+  return h(
+    'select',
+    {
+      className: 'is-devops-select',
+      'aria-label': t('commitRef'),
+      value: commitRef,
+      onChange: (event) => onChange(event.target.value),
+    },
+    branches.length === 0
+      ? h('option', { value: project.default_branch ?? '' }, project.default_branch ?? '')
+      : branchOptions(branches),
+  );
+}
+
+/**
+ * @param {string} tab - active tab id.
+ * @param {string} issueState - issue filter.
+ * @param {string} mrStatus - merge-request filter.
+ * @returns {string} active filter id.
+ */
+function activeFilterId(tab, issueState, mrStatus) {
+  return tab === 'issues' ? issueState : mrStatus;
+}
+
+/**
+ * @param {string} tab - active tab id.
+ * @param {object} actions - panel actions.
+ * @param {string} id - selected filter id.
+ * @returns {void}
+ */
+function selectFilter(tab, actions, id) {
+  if (tab === 'issues') {
+    actions.setIssueState(id);
+    return;
+  }
+  actions.setMrStatus(id);
+}
+
+/**
+ * @param {string} tab - active tab id.
+ * @param {Function} t - translation function.
+ * @returns {{ id: string, label: string }[]} filter definitions.
+ */
+function filtersForTab(tab, t) {
+  if (tab === 'issues') {
+    return [
+      { id: 'open', label: t('open') },
+      { id: 'closed', label: t('closed') },
+      { id: 'all', label: t('all') },
+    ];
+  }
+  if (tab === 'merge_requests') {
+    return [
+      { id: 'open', label: t('open') },
+      { id: 'merged', label: t('merged') },
+      { id: 'closed', label: t('closed') },
+      { id: 'draft', label: t('draft') },
+    ];
+  }
+  return [];
+}
+
+/**
+ * @param {string} tab - active tab id.
+ * @param {Function} t - translation function.
+ * @returns {string | undefined} compose button label.
+ */
+function composeLabel(tab, t) {
+  if (tab === 'issues') return t('newIssue');
+  if (tab === 'merge_requests') return t('newMergeRequest');
+  if (tab === 'branches') return t('newBranch');
+  return undefined;
+}
+
+/**
+ * @param {{ view: object, actions: object, t: Function }} props - panel state.
+ * @returns {import('react').ReactElement} filter row.
+ */
+function PanelFilters({ view, actions, t }) {
+  const active = activeFilterId(view.tab, view.issueState, view.mrStatus);
+  return h(
+    'div',
+    { className: 'is-devops-filters' },
+    view.filters.map((filter) =>
+      h(FilterChip, {
+        key: filter.id,
+        label: filter.label,
+        active: active === filter.id,
+        onSelect: () => selectFilter(view.tab, actions, filter.id),
+      }),
+    ),
+    view.tab === 'commits'
+      ? h(CommitRefSelect, {
+          project: view.project,
+          branches: view.branches,
+          commitRef: view.commitRef,
+          onChange: actions.setCommitRef,
+          t,
+        })
+      : null,
+    view.composeButton === undefined
+      ? null
+      : h(
+          'span',
+          { style: { marginLeft: 'auto' } },
+          h(
+            Button,
+            {
+              variant: 'primary',
+              onClick: () => actions.setCompose(view.compose === view.tab ? undefined : view.tab),
+            },
+            view.composeButton,
+          ),
+        ),
+  );
+}
+
+/**
+ * @param {{ width: string }} props - skeleton row.
+ * @returns {import('react').ReactElement} skeleton row.
+ */
+function LoadingRow({ width }) {
+  return h(
+    'div',
+    { className: 'is-devops-row' },
+    h('div', { className: 'is-devops-skeleton', style: { width } }),
+  );
+}
+
+/** @returns {import('react').ReactElement} loading list. */
+function LoadingRows() {
+  return h(
+    'div',
+    { className: 'is-devops-list' },
+    h(LoadingRow, { width: '60%' }),
+    h(LoadingRow, { width: '45%' }),
+    h(LoadingRow, { width: '52%' }),
+  );
+}
+
+/**
+ * @param {{ item: object, t: Function, activeLocale: string, onToggle: (item: object, state: string) => void }} props - issue row.
+ * @returns {import('react').ReactElement} row.
+ */
+function IssueRow({ item, t, activeLocale, onToggle }) {
+  return h(
+    'div',
+    { className: 'is-devops-row' },
+    h(
+      'div',
+      { className: 'is-devops-rowMain' },
+      h(TranslatableTitle, { value: `#${item.iid}  ${item.title}`, target: activeLocale, t }),
+      h(
+        'div',
+        { className: 'is-devops-rowMeta' },
+        h('span', { className: 'is-devops-pill', 'data-state': item.state }, t(item.state)),
+        h('span', null, `${t('author')}: ${item.author?.username ?? '—'}`),
+        h('span', null, formatDate(item.updated_at, activeLocale)),
+        item.comment_count > 0
+          ? h('span', null, t('comments').replace('{count}', String(item.comment_count)))
+          : null,
+        ...(Array.isArray(item.labels) ? item.labels : []).map((label) =>
+          h('span', { key: label, className: 'is-devops-label' }, label),
+        ),
+      ),
+    ),
+    h(
+      'div',
+      { className: 'is-devops-rowActions' },
+      h(
+        Button,
+        {
+          variant: 'ghost',
+          onClick: () => onToggle(item, item.state === 'open' ? 'closed' : 'open'),
+        },
+        item.state === 'open' ? t('closeIssue') : t('reopenIssue'),
+      ),
+    ),
+  );
+}
+
+/**
+ * @param {{ item: object, t: Function, activeLocale: string, onMerge: (item: object) => void }} props - merge request row.
+ * @returns {import('react').ReactElement} row.
+ */
+function MergeRequestRow({ item, t, activeLocale, onMerge }) {
+  return h(
+    'div',
+    { className: 'is-devops-row' },
+    h(
+      'div',
+      { className: 'is-devops-rowMain' },
+      h(TranslatableTitle, { value: `!${item.iid}  ${item.title}`, target: activeLocale, t }),
+      h(
+        'div',
+        { className: 'is-devops-rowMeta' },
+        h('span', { className: 'is-devops-pill', 'data-state': item.status }, t(item.status)),
+        h('span', null, `${item.source_branch} → ${item.target_branch}`),
+        h('span', null, formatDate(item.updated_at, activeLocale)),
+      ),
+    ),
+    h(
+      'div',
+      { className: 'is-devops-rowActions' },
+      item.status === 'open'
+        ? h(Button, { variant: 'primary', onClick: () => onMerge(item) }, t('merge'))
+        : null,
+    ),
+  );
+}
+
+/**
+ * @param {{ item: object, activeLocale: string }} props - commit row.
+ * @returns {import('react').ReactElement} row.
+ */
+function CommitRow({ item, activeLocale, t }) {
+  return h(
+    'div',
+    { className: 'is-devops-row' },
+    h(
+      'div',
+      { className: 'is-devops-rowMain' },
+      h(TranslatableTitle, { value: firstLine(item.message), target: activeLocale, t }),
+      h(
+        'div',
+        { className: 'is-devops-rowMeta' },
+        h('span', { className: 'is-devops-sha' }, shortSha(item.sha)),
+        h('span', null, item.author_name ?? '—'),
+        h('span', null, formatDate(item.authored_date ?? item.committed_date, activeLocale)),
+      ),
+    ),
+  );
+}
+
+/**
+ * @param {{ item: object, t: Function, onDelete: (item: object) => void }} props - branch row.
+ * @returns {import('react').ReactElement} row.
+ */
+function BranchRow({ item, t, onDelete }) {
+  return h(
+    'div',
+    { className: 'is-devops-row' },
+    h(
+      'div',
+      { className: 'is-devops-rowMain' },
+      h('div', { className: 'is-devops-rowTitle' }, h('span', { className: 'is-devops-sha' }, item.name)),
+      h(
+        'div',
+        { className: 'is-devops-rowMeta' },
+        h('span', { className: 'is-devops-sha' }, shortSha(item.commit?.sha)),
+        h('span', null, firstLine(item.commit?.message)),
+        item.is_default
+          ? h('span', { className: 'is-devops-pill', 'data-state': 'open' }, t('default'))
+          : null,
+        item.is_protected ? h('span', { className: 'is-devops-pill' }, t('protected')) : null,
+      ),
+    ),
+    h(
+      'div',
+      { className: 'is-devops-rowActions' },
+      item.is_default
+        ? null
+        : h(Button, { variant: 'danger', onClick: () => onDelete(item) }, t('delete')),
+    ),
+  );
+}
+
+/**
+ * @param {object} item - tab row.
+ * @param {string} tab - active tab id.
+ * @returns {string | number | undefined} stable React key.
+ */
+function listRowKey(item, tab) {
+  if (tab === 'commits') return item.sha;
+  if (tab === 'branches') return item.name;
+  return item.id;
+}
+
+/**
+ * @param {{ item: object, tab: string, t: Function, activeLocale: string, actions: object }} props - row dispatcher.
+ * @returns {import('react').ReactElement} row.
+ */
+function ListRow({ item, tab, t, activeLocale, actions }) {
+  if (tab === 'issues') {
+    return h(IssueRow, { item, t, activeLocale, onToggle: actions.updateIssue });
+  }
+  if (tab === 'merge_requests') {
+    return h(MergeRequestRow, { item, t, activeLocale, onMerge: actions.mergeRequest });
+  }
+  if (tab === 'commits') return h(CommitRow, { item, activeLocale, t });
+  return h(BranchRow, { item, t, onDelete: actions.deleteBranch });
+}
+
+/**
+ * @param {{ view: object, actions: object, t: Function }} props - panel state.
+ * @returns {import('react').ReactElement} list area.
+ */
+function ListSection({ view, actions, t }) {
+  if (view.list.status === 'loading') return h(LoadingRows, null);
+  if (view.list.status === 'error') {
+    return h(
+      Message,
+      { tone: 'error' },
+      t('requestFailed').replace('{message}', view.list.error ?? ''),
+    );
+  }
+  if (view.list.items.length === 0) {
+    return h('div', { className: 'is-devops-empty' }, t('emptyMessage'));
+  }
+  return h(
+    'div',
+    { className: 'is-devops-list' },
+    view.list.items.map((item) =>
+      h(ListRow, {
+        key: listRowKey(item, view.tab),
+        item,
+        tab: view.tab,
+        t,
+        activeLocale: view.activeLocale,
+        actions,
+      }),
+    ),
+  );
+}
+
+/**
+ * @param {{ projects: object[] | undefined, projectsError: string | undefined, t: Function }} props - empty state wiring.
+ * @returns {import('react').ReactElement} empty notice.
+ */
+function EmptyState({ projects, projectsError, t }) {
+  return h('div', { className: 'is-devops-empty' }, t(emptyMessageKey(projects, projectsError)));
+}
+
+/**
+ * @param {object[] | undefined} projects - project rows.
+ * @param {string | undefined} projectsError - project load error.
+ * @returns {string} copy key.
+ */
+function emptyMessageKey(projects, projectsError) {
+  if (projects === undefined) return 'loading';
+  if (projectsError === undefined) return 'noProject';
+  return 'settingsHint';
+}
+
+/**
+ * @param {{ view: object, actions: object, t: Function }} props - panel state.
+ * @returns {import('react').ReactElement} selected-project body.
+ */
+function ProjectBody({ view, actions, t }) {
+  return h(
+    Fragment,
+    null,
+    h(PanelFilters, { view, actions, t }),
+    h(ComposerSlot, { view, actions, t }),
+    h(ListSection, { view, actions, t }),
+  );
+}
+
+/**
+ * @param {{ view: object, actions: object, t: Function }} props - panel state.
+ * @returns {import('react').ReactElement} panel body.
+ */
+function PanelBody({ view, actions, t }) {
+  return h(
+    'div',
+    { className: 'is-devops-body' },
+    view.notice === undefined ? null : h(Message, { tone: view.notice.tone }, view.notice.text),
+    view.projectsError === undefined
+      ? null
+      : h(
+          Message,
+          { tone: 'error' },
+          t('loadProjectsFailed').replace('{message}', view.projectsError),
+        ),
+    view.project === undefined
+      ? h(EmptyState, { projects: view.projects, projectsError: view.projectsError, t })
+      : h(ProjectBody, { view, actions, t }),
+  );
+}
+
+/**
+ * @param {number} refreshToken - refresh counter.
+ * @returns {{ projects: object[] | undefined, projectsError: string | undefined }} project list state.
+ */
+function useProjects(refreshToken) {
+  const [projects, setProjects] = useState(undefined);
+  const [projectsError, setProjectsError] = useState(undefined);
+  const loadProjects = useCallback(async () => {
+    setProjectsError(undefined);
+    try {
+      const data = await apiRequest('/api/v1/projects?per_page=100');
+      setProjects(projectRows(data));
+    } catch (error) {
+      setProjects([]);
+      setProjectsError(error.message);
+    }
+  }, []);
+  useEffect(() => {
+    void loadProjects();
+  }, [loadProjects, refreshToken]);
+  return { projects, projectsError };
+}
+
+/**
+ * @param {object[] | undefined} projects - project rows.
+ * @returns {{ project: object | undefined, projectKey: string, setProjectKey: (key: string) => void }} selection state.
+ */
+function useSelectedProject(projects) {
+  const [projectKey, setProjectKey] = useState(readStoredProjectKey);
+  useEffect(() => {
+    if (projects === undefined || projects.length === 0) return;
+    if (!projects.some((candidate) => keyOfProject(candidate) === projectKey)) {
+      setProjectKey(keyOfProject(projects[0]));
+    }
+  }, [projects, projectKey]);
+  useEffect(() => {
+    try {
+      if (projectKey === '') localStorage.removeItem(STORAGE_KEY);
+      else localStorage.setItem(STORAGE_KEY, projectKey);
+    } catch {
+      // Storage may be unavailable in hardened browser contexts.
+    }
+  }, [projectKey]);
+  const project = useMemo(() => findProject(projects, projectKey), [projects, projectKey]);
+  return { project, projectKey, setProjectKey };
+}
+
+/**
+ * @param {object | undefined} project - selected project.
+ * @param {string} tab - active tab id.
+ * @param {number} refreshToken - refresh counter.
+ * @returns {{ branches: object[], commitRef: string, setCommitRef: (ref: string) => void }} branch state.
+ */
+function useProjectBranches(project, tab, refreshToken) {
+  const [branches, setBranches] = useState([]);
+  const [commitRef, setCommitRef] = useState('');
+  useEffect(() => {
+    if (project === undefined || !needsBranches(tab)) return undefined;
+    let cancelled = false;
+    fetchBranches(project)
+      .then((rows) => {
+        if (cancelled) return;
+        setBranches(rows);
+        setCommitRef((current) => pickBranchName(rows, current));
+      })
+      .catch(() => {
+        if (!cancelled) setBranches([]);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [project?.id, tab, refreshToken]);
+  return { branches, commitRef, setCommitRef };
+}
+
+/**
+ * @param {object | undefined} project - selected project.
+ * @param {string} tab - active tab id.
+ * @param {{ issueState: string, mrStatus: string, commitRef: string }} filters - active filters.
+ * @param {number} refreshToken - refresh counter.
+ * @returns {object} list state.
+ */
+function useTabItems(project, tab, filters, refreshToken) {
+  const [list, setList] = useState({ status: 'idle', items: [] });
+  useEffect(() => {
+    if (project === undefined) return undefined;
+    let cancelled = false;
+    setList({ status: 'loading', items: [] });
+    fetchTabItems(project, tab, filters)
+      .then((items) => {
+        if (!cancelled) setList({ status: 'ready', items });
+      })
+      .catch((error) => {
+        if (!cancelled) setList({ status: 'error', items: [], error: error.message });
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [project?.id, tab, filters.issueState, filters.mrStatus, filters.commitRef, refreshToken]);
+  return list;
+}
+
+/**
+ * The DevOps panel.
+ *
+ * @returns {import('react').ReactElement} panel.
+ */
+function DevOpsPanel() {
+  const ctx = panelCtx;
+  const t = useTranslation(ctx);
+  const activeLocale = ctx.locale.getSnapshot().active;
+  const [refreshToken, setRefreshToken] = useState(0);
+  const [tab, setTab] = useState('issues');
+  const [issueState, setIssueState] = useState('open');
+  const [mrStatus, setMrStatus] = useState('open');
+  const [compose, setCompose] = useState(undefined);
+  const [notice, setNotice] = useState(undefined);
+  const { projects, projectsError } = useProjects(refreshToken);
+  const { project, projectKey, setProjectKey } = useSelectedProject(projects);
+  const { branches, commitRef, setCommitRef } = useProjectBranches(project, tab, refreshToken);
+  const list = useTabItems(project, tab, { issueState, mrStatus, commitRef }, refreshToken);
+
+  const refresh = () => {
+    setNotice(undefined);
+    setRefreshToken((value) => value + 1);
+  };
+  const selectProject = (key) => {
+    setProjectKey(key);
+    setCompose(undefined);
+    setNotice(undefined);
+  };
+  const selectTab = (nextTab) => {
+    setTab(nextTab);
+    setCompose(undefined);
+    setNotice(undefined);
+  };
+  const finishCompose = (message) => {
+    setCompose(undefined);
+    setNotice({ tone: 'ok', text: message });
+    setRefreshToken((value) => value + 1);
+  };
+  const cancelCompose = () => setCompose(undefined);
+
+  const updateIssue = async (issue, state) => {
+    try {
+      await apiRequest(`${projectBase(project)}/issues/${issue.iid}`, {
+        method: 'PUT',
+        body: { state },
+      });
+      setNotice({ tone: 'ok', text: t('created') });
+      setRefreshToken((value) => value + 1);
+    } catch (error) {
+      setNotice({ tone: 'error', text: t('requestFailed').replace('{message}', error.message) });
+    }
+  };
+
+  const mergeRequest = async (mergeRequestRow) => {
+    try {
+      await apiRequest(`${projectBase(project)}/merge_requests/${mergeRequestRow.iid}/merge`, {
+        method: 'PUT',
+        body: {},
+      });
+      setNotice({ tone: 'ok', text: t('mergedNotice') });
+      setRefreshToken((value) => value + 1);
+    } catch (error) {
+      setNotice({ tone: 'error', text: t('requestFailed').replace('{message}', error.message) });
+    }
+  };
+
+  const deleteBranch = async (branch) => {
+    if (!window.confirm(t('confirmDeleteBranch').replace('{branch}', branch.name))) return;
+    try {
+      await apiRequest(`${projectBase(project)}/repository/branches/${encodeURIComponent(branch.name)}`, {
+        method: 'DELETE',
+      });
+      setNotice({ tone: 'ok', text: t('deletedNotice') });
+      setRefreshToken((value) => value + 1);
+    } catch (error) {
+      setNotice({ tone: 'error', text: t('requestFailed').replace('{message}', error.message) });
+    }
+  };
+
+  const view = {
+    project,
+    projects,
+    projectsError,
+    projectKey,
+    notice,
+    tab,
+    issueState,
+    mrStatus,
+    commitRef,
+    branches,
+    compose,
+    filters: filtersForTab(tab, t),
+    composeButton: composeLabel(tab, t),
+    list,
+    activeLocale,
+  };
+  const actions = {
+    refresh,
+    selectProject,
+    selectTab,
+    setIssueState,
+    setMrStatus,
+    setCommitRef,
+    setCompose,
+    finishCompose,
+    cancelCompose,
+    updateIssue,
+    mergeRequest,
+    deleteBranch,
+  };
+
+  return h(
+    'div',
+    { className: 'is-devops-root' },
+    h(PanelHeader, { view, actions, t }),
+    h(PanelBody, { view, actions, t }),
+  );
+}
+
+/**
+ * Sidebar icon. Stroke uses the current color so active state follows the host.
+ *
+ * @param {{ size?: number, active?: boolean }} props - owner props.
+ * @returns {import('react').ReactElement} icon.
+ */
+function DevOpsIcon({ size = 24, active = false }) {
+  return h(
+    'svg',
+    {
+      width: size,
+      height: size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      'aria-hidden': true,
+      style: { color: active ? 'var(--dsw-alias-label-primary)' : 'inherit' },
+    },
+    h('circle', { cx: 7, cy: 5, r: 2.2, stroke: 'currentColor', strokeWidth: 1.6 }),
+    h('circle', { cx: 7, cy: 19, r: 2.2, stroke: 'currentColor', strokeWidth: 1.6 }),
+    h('circle', { cx: 17, cy: 8, r: 2.2, stroke: 'currentColor', strokeWidth: 1.6 }),
+    h('path', {
+      d: 'M7 7.2v9.6M17 10.2v1.6c0 2.2-2.2 3.2-4.6 3.2H9.2',
+      stroke: 'currentColor',
+      strokeWidth: 1.6,
+      strokeLinecap: 'round',
+    }),
+  );
+}
+
+/** Services required by the Client half. */
+const inject = ['slots', 'locale'];
+
+/**
+ * Client plugin body.
+ *
+ * @param {import('@deepseek-ai/cordis').Context} ctx - Client context.
+ * @returns {void}
+ */
+function apply(ctx) {
+  panelCtx = ctx;
+  ctx.effect(installStyles, 'is-devops: panel styles');
+
+  ctx.slots.inject('main', () =>
+    ctx.slots.register({ name: 'main', key: PANEL_KEY }, DevOpsPanel),
+  );
+
+  ctx.slots.inject('sidebar.panellist', () =>
+    ctx.slots.register(
+      {
+        name: 'sidebar.panellist',
+        id: PANEL_KEY,
+        order: 20,
+        label: 'DevOps',
+      },
+      DevOpsIcon,
+    ),
+  );
+}
+
+window.__ModuleLoader__.load({
+  id: '@infinisys/is-devops',
+  factory(require) {
+    React = require('react');
+    h = React.createElement;
+    Fragment = React.Fragment;
+    useState = React.useState;
+    useEffect = React.useEffect;
+    useCallback = React.useCallback;
+    useMemo = React.useMemo;
+    return { inject, apply };
+  },
+});
+}