Function Session

packages/web/src/routes/session.tsx:122–456

(props: SessionProps)

  | ({ readOnly?: false; channel: SessionChannel } & SessionPropsBase);

function Session(props: SessionProps) {
  const { readOnly, session, srcbooks, config } = props;
  const channel = !readOnly ? props.channel : null;

  const {
    cells: allCells,
    updateCell,
    removeCell,
    createCodeCell,
    createMarkdownCell,
    createGenerateAiCell,
    setOutput,
    setTsServerDiagnostics,
    setTsServerSuggestions,
  } = useCells();

  const {
    npmInstall,
    failed: dependencyInstallFailed,
    outdated: outdatedDependencies,
    installing: installingDependencies,
    output: dependencyInstallOutput,
  } = usePackageJson();

  const [depsInstallModalOpen, setDepsInstallModalOpen] = useState(false);
  const [[selectedPanelName, selectedPanelOpen], setSelectedPanelNameAndOpen] = useState<
    [Panel['name'], boolean]
  >([SESSION_MENU_PANELS[0]!.name, false]);

  const isPanelOpen = useCallback(
    (name: Panel['name']) => selectedPanelOpen && selectedPanelName === name,
    [selectedPanelOpen, selectedPanelName],
  );

  useHotkeys('mod+;', () => {
    if (!isPanelOpen('packages')) {
      setSelectedPanelNameAndOpen(['packages', true]);
    }
  });

  async function onDeleteCell(cell: CellType | GenerateAICellType) {
    if (!channel) {
      return;
    }
    if (cell.type !== 'code' && cell.type !== 'markdown') {
      throw new Error(`Cannot delete cell of type '${cell.type}'`);
    }

    // Optimistically delete cell
    removeCell(cell);

    channel.push('cell:delete', {
      cellId: cell.id,
    });
  }

  useEffect(() => {
    if (!channel) {