@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.2

package/src/workbench/chrome/workbench-platform-chrome.css

@@ -0,0 +1,142 @@
+[data-workbench-platform='darwin'] {
+  --shell-window-chrome-radius: 10px;
+  --shell-window-chrome-titlebar-height: 38px;
+  --shell-window-chrome-control-gap: 8px;
+  --shell-window-chrome-traffic-light-size: 12px;
+}
+
+[data-workbench-platform='win32'],
+[data-workbench-platform='linux'] {
+  --shell-window-chrome-radius: var(--radius-sm);
+  --shell-window-chrome-titlebar-height: 34px;
+  --shell-window-chrome-control-gap: 2px;
+}
+
+[data-workbench-window-chrome='platform'].ui-modal:not([data-maximized='true']) {
+  border-radius: var(--shell-window-chrome-radius);
+}
+
+[data-workbench-platform='darwin']
+  [data-workbench-window-chrome='platform'].ui-modal:not([data-maximized='true']) {
+  overflow: hidden;
+}
+
+[data-workbench-window-chrome='platform'] .ui-modal__titlebar,
+[data-workbench-window-chrome='platform'] .ui-workbench-desktop-titlebar {
+  min-height: var(--shell-window-chrome-titlebar-height);
+  height: var(--shell-window-chrome-titlebar-height);
+}
+
+[data-workbench-platform='darwin'] [data-workbench-window-chrome='platform'] .ui-modal__titlebar {
+  padding: 0;
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+}
+
+[data-workbench-platform='darwin']
+  [data-workbench-window-chrome='platform']
+  .ui-modal__titlebar-drag {
+  justify-content: center;
+  padding-left: 0;
+  padding-right: 16px;
+}
+
+[data-workbench-platform='darwin'] [data-workbench-window-chrome='platform'] .ui-modal__title {
+  justify-content: center;
+  text-align: center;
+}
+
+.ui-workbench-window-chrome-controls--darwin {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: var(--shell-window-chrome-control-gap, 8px);
+  padding: 0 12px;
+  -webkit-app-region: no-drag;
+}
+
+.ui-workbench-window-chrome-controls--darwin.ui-workbench-window-chrome-controls--modal {
+  align-self: stretch;
+}
+
+.ui-workbench-window-chrome-control--darwin {
+  width: var(--shell-window-chrome-traffic-light-size, 12px);
+  height: var(--shell-window-chrome-traffic-light-size, 12px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.ui-workbench-window-chrome-control--darwin .ui-workbench-window-chrome-control__glyph {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+
+.ui-workbench-window-chrome-control--close.ui-workbench-window-chrome-control--darwin {
+  background: #ff5f57;
+}
+
+.ui-workbench-window-chrome-control--minimize.ui-workbench-window-chrome-control--darwin {
+  background: #febc2e;
+}
+
+.ui-workbench-window-chrome-control--zoom.ui-workbench-window-chrome-control--darwin {
+  background: #28c840;
+}
+
+.ui-workbench-window-chrome-controls--darwin:hover .ui-workbench-window-chrome-control__glyph,
+.ui-workbench-window-chrome-controls--darwin:focus-within
+  .ui-workbench-window-chrome-control__glyph {
+  color: rgba(0, 0, 0, 0.55);
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.ui-workbench-window-chrome-control--close.ui-workbench-window-chrome-control--darwin:hover
+  .ui-workbench-window-chrome-control__glyph::before,
+.ui-workbench-window-chrome-controls--darwin:focus-within
+  .ui-workbench-window-chrome-control--close
+  .ui-workbench-window-chrome-control__glyph::before {
+  content: '×';
+}
+
+.ui-workbench-window-chrome-control--minimize.ui-workbench-window-chrome-control--darwin:hover
+  .ui-workbench-window-chrome-control__glyph::before,
+.ui-workbench-window-chrome-controls--darwin:focus-within
+  .ui-workbench-window-chrome-control--minimize
+  .ui-workbench-window-chrome-control__glyph::before {
+  content: '−';
+}
+
+.ui-workbench-window-chrome-control--zoom.ui-workbench-window-chrome-control--darwin:hover
+  .ui-workbench-window-chrome-control__glyph::before,
+.ui-workbench-window-chrome-controls--darwin:focus-within
+  .ui-workbench-window-chrome-control--zoom
+  .ui-workbench-window-chrome-control__glyph::before {
+  content: '+';
+}
+
+[data-workbench-platform='darwin']
+  [data-workbench-window-chrome='platform']
+  .ui-workbench-desktop-titlebar {
+  gap: 0;
+}
+
+[data-workbench-platform='darwin']
+  [data-workbench-window-chrome='platform']
+  .ui-workbench-desktop-titlebar__leading {
+  padding-left: 0;
+}
+
+[data-workbench-platform='darwin']
+  [data-workbench-window-chrome='platform']
+  .ui-workbench-desktop-titlebar__trailing
+  .ui-workbench-window-chrome-controls--darwin {
+  display: none;
+}

package/src/workbench/chrome/workbench-shell-titlebar.css

@@ -0,0 +1,124 @@
+.ui-workbench-titlebar {
+  box-sizing: border-box;
+  flex: 0 0 var(--workbench-header-height);
+  min-height: var(--workbench-header-height);
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 8px;
+  color: var(--vscode-titleBar-activeForeground, var(--color-text));
+  background: var(--vscode-titleBar-activeBackground, var(--color-surface));
+  border-bottom: 1px solid var(--vscode-titleBar-border, var(--color-border));
+  user-select: none;
+}
+
+.workbench-shell-titlebar__identity,
+.workbench-shell-titlebar__actions {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.workbench-shell-titlebar__identity {
+  flex: 1 1 auto;
+  gap: 6px;
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+}
+
+.workbench-shell-titlebar__identity > .codicon {
+  flex: 0 0 auto;
+  color: var(--vscode-icon-foreground, var(--color-text-muted));
+  font-size: 15px;
+}
+
+.workbench-shell-titlebar__app-icon {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 28px;
+  height: 28px;
+  padding: 5px;
+  overflow: visible;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+.workbench-shell-titlebar__app-icon > * {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex-shrink: 0;
+  object-fit: contain;
+  object-position: center;
+}
+
+.workbench-shell-titlebar__app-icon > .tilepaper-app-icon,
+.workbench-shell-titlebar__app-icon > svg {
+  shape-rendering: geometricPrecision;
+}
+
+.tilepaper-app-icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.workbench-shell-titlebar__title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workbench-shell-titlebar__meta {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 6px;
+}
+
+.workbench-shell-titlebar__actions {
+  flex: 0 0 auto;
+  gap: 6px;
+}
+
+.workbench-shell-titlebar__layout-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  flex: 0 0 auto;
+}
+
+.workbench-shell-titlebar__layout-control.ui-icon-button {
+  color: var(--vscode-titleBar-activeForeground, var(--color-text-muted));
+}
+
+.workbench-shell-titlebar__layout-control.ui-icon-button:hover {
+  color: var(--vscode-titleBar-activeForeground, var(--color-text));
+}
+
+.workbench-shell-titlebar__layout-control--active.ui-icon-button {
+  color: var(--vscode-titleBar-activeForeground, var(--color-text));
+  background: color-mix(
+    in srgb,
+    var(--vscode-titleBar-activeForeground, var(--color-text)) 10%,
+    transparent
+  );
+}
+
+.workbench-shell-titlebar__action.ui-icon-button {
+  color: var(--vscode-titleBar-activeForeground, var(--color-text-muted));
+}
+
+.workbench-shell-titlebar__action.ui-icon-button:hover {
+  color: var(--vscode-titleBar-activeForeground, var(--color-text));
+}

package/src/workbench/command-execution-policy.ts

@@ -0,0 +1,61 @@
+import type { WorkbenchCommandDescriptor, WorkbenchCommandExecutionPolicy } from './command-model';
+
+export interface ResolveWorkbenchCommandExecutionPolicyInput {
+  /** Fallback for non-mutating commands without an explicit policy. */
+  defaultPolicy?: WorkbenchCommandExecutionPolicy | undefined;
+  /** Fallback for mutating commands without an explicit policy. */
+  mutatingDefaultPolicy?: WorkbenchCommandExecutionPolicy | undefined;
+  /** Host overrides keyed by command id. */
+  policyByCommandId?: Readonly<Record<string, WorkbenchCommandExecutionPolicy>> | undefined;
+}
+
+const policyLabels: Record<WorkbenchCommandExecutionPolicy, string> = {
+  'auto-allow': 'Auto allow',
+  'approval-required': 'Approval required',
+  'auto-deny': 'Auto deny',
+};
+
+export function isWorkbenchCommandExecutionPolicy(
+  value: unknown,
+): value is WorkbenchCommandExecutionPolicy {
+  return value === 'auto-allow' || value === 'approval-required' || value === 'auto-deny';
+}
+
+export function getWorkbenchCommandExecutionPolicyLabel(policy: WorkbenchCommandExecutionPolicy) {
+  return policyLabels[policy];
+}
+
+function isMutatingWorkbenchCommand(descriptor: WorkbenchCommandDescriptor) {
+  if (descriptor.danger) {
+    return true;
+  }
+
+  if (descriptor.sideEffect && descriptor.sideEffect !== 'none') {
+    return true;
+  }
+
+  if (descriptor.metadata?.requiresApproval === true) {
+    return true;
+  }
+
+  return false;
+}
+
+export function resolveWorkbenchCommandExecutionPolicy(
+  descriptor: WorkbenchCommandDescriptor,
+  input: ResolveWorkbenchCommandExecutionPolicyInput = {},
+): WorkbenchCommandExecutionPolicy {
+  if (descriptor.executionPolicy) {
+    return descriptor.executionPolicy;
+  }
+
+  const hostPolicy = input.policyByCommandId?.[descriptor.id];
+  if (hostPolicy) {
+    return hostPolicy;
+  }
+
+  const mutatingDefault = input.mutatingDefaultPolicy ?? 'approval-required';
+  const nonMutatingDefault = input.defaultPolicy ?? 'auto-allow';
+
+  return isMutatingWorkbenchCommand(descriptor) ? mutatingDefault : nonMutatingDefault;
+}

package/src/workbench/command-model.ts

@@ -0,0 +1,275 @@
+import type { CommandMenuItem, ResolvedCommandMenuCommandItem } from '@workbench-kit/platform';
+
+import { getWorkbenchStatusLabel, isWorkbenchStatusDisabled, type WorkbenchStatus } from './status';
+
+export type WorkbenchCommandStatus = WorkbenchStatus;
+
+export interface WorkbenchCommandExecution {
+  kind: 'agent' | 'local' | 'remote' | 'composite' | (string & {});
+  label?: string | undefined;
+}
+
+export type WorkbenchCommandFeedback = 'none' | 'status' | 'timeline';
+export type WorkbenchCommandOutput = 'none' | 'message' | 'event' | 'artifact';
+export type WorkbenchCommandSideEffect = 'none' | 'workspace-write' | 'external-write';
+export type WorkbenchCommandExecutionPolicy = 'auto-allow' | 'approval-required' | 'auto-deny';
+export type WorkbenchCommandRunSource = 'grouped-list' | 'list' | 'palette' | 'suggest';
+export type WorkbenchCommandGroupBy =
+  'category' | 'danger' | 'execution' | 'feedback' | 'keyword' | 'output' | 'sideEffect' | 'status';
+
+export interface WorkbenchCommandDescriptor {
+  category?: string | undefined;
+  danger?: boolean | undefined;
+  description?: string | undefined;
+  disabled?: boolean | undefined;
+  disabledReason?: string | undefined;
+  execution?: WorkbenchCommandExecution | undefined;
+  executionPolicy?: WorkbenchCommandExecutionPolicy | undefined;
+  feedback?: WorkbenchCommandFeedback | undefined;
+  icon?: string | undefined;
+  id: string;
+  keywords?: readonly string[] | undefined;
+  label: string;
+  metadata?: Record<string, unknown> | undefined;
+  output?: WorkbenchCommandOutput | undefined;
+  shortcut?: string | undefined;
+  sideEffect?: WorkbenchCommandSideEffect | undefined;
+  status?: WorkbenchCommandStatus | undefined;
+}
+
+export interface WorkbenchCommandRunContext {
+  groupId?: string | undefined;
+  groupLabel?: string | undefined;
+  index: number;
+  query: string;
+  source: WorkbenchCommandRunSource;
+}
+
+export interface WorkbenchCommandFilterInput {
+  commands: readonly WorkbenchCommandDescriptor[];
+  limit?: number | undefined;
+  query?: string | undefined;
+}
+
+export interface WorkbenchCommandNavigationInput {
+  commands: readonly WorkbenchCommandDescriptor[];
+  currentIndex: number;
+  direction: 'next' | 'previous';
+}
+
+export interface WorkbenchCommandGroup {
+  commands: readonly WorkbenchCommandDescriptor[];
+  id: string;
+  label: string;
+}
+
+export interface WorkbenchCommandGroupingInput {
+  commands: readonly WorkbenchCommandDescriptor[];
+  fallbackGroupLabel?: string | undefined;
+  groupBy?: WorkbenchCommandGroupBy | undefined;
+}
+
+export type WorkbenchCommandDescriptorOverrides = Partial<
+  Omit<WorkbenchCommandDescriptor, 'danger' | 'disabled' | 'icon' | 'id' | 'label' | 'shortcut'>
+>;
+
+const commandExecutionLabels: Record<string, string> = {
+  agent: 'Agent',
+  composite: 'Composite',
+  local: 'Local',
+  remote: 'Remote',
+};
+
+const commandFeedbackLabels: Record<WorkbenchCommandFeedback, string> = {
+  none: 'No feedback',
+  status: 'Status',
+  timeline: 'Timeline',
+};
+
+const commandOutputLabels: Record<WorkbenchCommandOutput, string> = {
+  artifact: 'Artifact',
+  event: 'Event',
+  message: 'Message',
+  none: 'No output',
+};
+
+const commandSideEffectLabels: Record<WorkbenchCommandSideEffect, string> = {
+  'external-write': 'External write',
+  none: 'No side effect',
+  'workspace-write': 'Workspace write',
+};
+
+function normalizedSearchText(value: string) {
+  return value.trim().toLocaleLowerCase();
+}
+
+function commandSearchText(command: WorkbenchCommandDescriptor) {
+  return normalizedSearchText(
+    [
+      command.id,
+      command.label,
+      command.description,
+      command.category,
+      command.shortcut,
+      ...(command.keywords ?? []),
+    ]
+      .filter(Boolean)
+      .join(' '),
+  );
+}
+
+export function normalizeWorkbenchCommandQuery(query = '') {
+  const trimmed = query.trimStart();
+
+  return trimmed.startsWith('>') ? trimmed.slice(1).trimStart() : query;
+}
+
+export function getWorkbenchCommandStatusLabel(status: WorkbenchCommandStatus) {
+  return getWorkbenchStatusLabel(status);
+}
+
+export function getWorkbenchCommandExecutionLabel(execution: WorkbenchCommandExecution) {
+  return execution.label ?? commandExecutionLabels[execution.kind] ?? execution.kind;
+}
+
+export function isWorkbenchCommandRunnable(command: WorkbenchCommandDescriptor) {
+  return !(command.disabled || (command.status && isWorkbenchStatusDisabled(command.status)));
+}
+
+function normalizeWorkbenchCommandGroupId(label: string) {
+  const normalized = normalizedSearchText(label)
+    .replace(/[^\p{L}\p{N}]+/gu, '-')
+    .replace(/^-+|-+$/g, '');
+
+  return normalized || 'group';
+}
+
+function getWorkbenchCommandGroupLabels({
+  command,
+  fallbackGroupLabel,
+  groupBy = 'category',
+}: {
+  command: WorkbenchCommandDescriptor;
+  fallbackGroupLabel: string;
+  groupBy?: WorkbenchCommandGroupBy | undefined;
+}) {
+  if (groupBy === 'keyword') {
+    return command.keywords?.length ? [...command.keywords] : [fallbackGroupLabel];
+  }
+
+  if (groupBy === 'category') return [command.category ?? fallbackGroupLabel];
+  if (groupBy === 'danger') return [command.danger ? 'Danger' : 'Default'];
+  if (groupBy === 'execution') {
+    return [
+      command.execution ? getWorkbenchCommandExecutionLabel(command.execution) : fallbackGroupLabel,
+    ];
+  }
+  if (groupBy === 'feedback')
+    return [command.feedback ? commandFeedbackLabels[command.feedback] : fallbackGroupLabel];
+  if (groupBy === 'output')
+    return [command.output ? commandOutputLabels[command.output] : fallbackGroupLabel];
+  if (groupBy === 'sideEffect') {
+    return [command.sideEffect ? commandSideEffectLabels[command.sideEffect] : fallbackGroupLabel];
+  }
+
+  const status = command.status ?? (command.disabled ? 'disabled' : undefined);
+  return [status ? getWorkbenchCommandStatusLabel(status) : fallbackGroupLabel];
+}
+
+export function groupWorkbenchCommands({
+  commands,
+  fallbackGroupLabel = 'Other',
+  groupBy = 'category',
+}: WorkbenchCommandGroupingInput): WorkbenchCommandGroup[] {
+  const groups = new Map<string, { commands: WorkbenchCommandDescriptor[]; label: string }>();
+
+  commands.forEach((command) => {
+    getWorkbenchCommandGroupLabels({ command, fallbackGroupLabel, groupBy }).forEach((label) => {
+      const id = normalizeWorkbenchCommandGroupId(`${groupBy}-${label}`);
+      const group = groups.get(id) ?? { commands: [], label };
+
+      group.commands.push(command);
+      groups.set(id, group);
+    });
+  });
+
+  return Array.from(groups, ([id, group]) => ({
+    commands: group.commands,
+    id,
+    label: group.label,
+  }));
+}
+
+export function filterWorkbenchCommands({
+  commands,
+  limit,
+  query = '',
+}: WorkbenchCommandFilterInput) {
+  const tokens = normalizedSearchText(normalizeWorkbenchCommandQuery(query))
+    .split(/\s+/)
+    .filter(Boolean);
+  const filtered = tokens.length
+    ? commands.filter((command) => {
+        const searchText = commandSearchText(command);
+        return tokens.every((token) => searchText.includes(token));
+      })
+    : [...commands];
+
+  return typeof limit === 'number' ? filtered.slice(0, limit) : filtered;
+}
+
+export function getNextWorkbenchCommandIndex({
+  commands,
+  currentIndex,
+  direction,
+}: WorkbenchCommandNavigationInput) {
+  if (commands.length === 0) return -1;
+
+  const step = direction === 'next' ? 1 : -1;
+  const startIndex =
+    currentIndex >= 0 && currentIndex < commands.length
+      ? currentIndex
+      : direction === 'next'
+        ? -1
+        : 0;
+
+  for (let offset = 1; offset <= commands.length; offset += 1) {
+    const nextIndex = (startIndex + step * offset + commands.length) % commands.length;
+    const command = commands[nextIndex];
+    if (command && isWorkbenchCommandRunnable(command)) return nextIndex;
+  }
+
+  return -1;
+}
+
+export function commandMenuItemToWorkbenchCommandDescriptor(
+  item: ResolvedCommandMenuCommandItem,
+  overrides: WorkbenchCommandDescriptorOverrides = {},
+): WorkbenchCommandDescriptor {
+  const metadata = {
+    menuItemId: item.id,
+    ...overrides.metadata,
+  };
+
+  return {
+    ...overrides,
+    danger: item.danger,
+    disabled: item.disabled,
+    icon: item.icon,
+    id: item.commandId,
+    label: item.label,
+    metadata,
+    shortcut: item.shortcut,
+  };
+}
+
+export function commandMenuItemsToWorkbenchCommandDescriptors(
+  items: readonly CommandMenuItem[],
+  overridesByCommandId: Record<string, WorkbenchCommandDescriptorOverrides> = {},
+) {
+  return items.flatMap((item) =>
+    item.type === 'command'
+      ? [commandMenuItemToWorkbenchCommandDescriptor(item, overridesByCommandId[item.commandId])]
+      : [],
+  );
+}