next/store/course license: set academic user value properly, adjust presets, add idle timeout help and hide period selection in form

Author: haraldschilly

src/.claude/settings.local.json

@@ -4,7 +4,8 @@
       "Bash(pnpm tsc:*)",
       "Bash(pnpm build:*)",
       "Bash(git add:*)",
-      "Bash(git commit:*)"
+      "Bash(git commit:*)",
+      "Bash(prettier -w:*)"
     ],
     "deny": []
   }

src/CLAUDE.md

@@ -4,15 +4,16 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 # CoCalc Source Repository
 
-* This is the source code of CoCalc in a Git repository
-* It is a complex JavaScript/TypeScript SaaS application
-* CoCalc is organized as a monorepository (multi-packages) in the subdirectory "./packages"
-* The packages are managed as a pnpm workspace in "./packages/pnpm-workspace.yaml"
+- This is the source code of CoCalc in a Git repository
+- It is a complex JavaScript/TypeScript SaaS application
+- CoCalc is organized as a monorepository (multi-packages) in the subdirectory "./packages"
+- The packages are managed as a pnpm workspace in "./packages/pnpm-workspace.yaml"
 
 ## Code Style
 
 - Everything is written in TypeScript code
 - Indentation: 2-spaces
+- Run `pretter -w [filename]` after modifying a file (ts, tsx, md, json, ...) to format it correctly.
 - All .js and .ts files are formatted by the tool prettier
 - Add suitable types when you write code
 - Variable name styles are "camelCase" for local and "FOO_BAR" for global variables. If you edit older code not following these guidlines, adjust this rule to fit the files style.
@@ -23,28 +24,32 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 ## Development Commands
 
 ### Essential Commands
+
 - `pnpm build-dev` - Build all packages for development
 - `pnpm clean` - Clean all node_modules and dist directories
-- `pnpm database` - Start PostgreSQL database server
-- `pnpm hub` - Start the main hub server
-- `pnpm psql` - Connect to the PostgreSQL database
 - `pnpm test` - Run full test suite
-- `pnpm test-parallel` - Run tests in parallel across packages
 - `pnpm depcheck` - Check for dependency issues
+- `prettier -w [filename]` to format the style of a file after editing it
+- after creating a file, run `git add [filename]` to start tracking it
 
 ### Package-Specific Commands
-- `cd packages/[package] && pnpm tsc` - Watch TypeScript compilation for a specific package
+
+- `cd packages/[package] && pnpm build` - Build and compile a specific package
+  - for packages/next and packages/static, run `cd packages/[package] && pnpm build-dev`
+- `cd packages/[package] && pnpm tsc:watch` - TypeScript compilation in watch mode for a specific package
 - `cd packages/[package] && pnpm test` - Run tests for a specific package
 - `cd packages/[package] && pnpm build` - Build a specific package
+- **IMPORTANT**: When modifying packages like `util` that other packages depend on, you must run `pnpm build` in the modified package before typechecking dependent packages
 
-### Development Setup
-1. Start database: `pnpm database`
-2. Start hub: `pnpm hub`
-3. For TypeScript changes, run `pnpm tsc` in the relevant package directory
+### Development
+
+- After code changes, run `pretter -w [filename]` to ensure consistent styling
+- After TypeScript or `*.tsx` changes, run `pnpm build` in the relevant package directory
 
 ## Architecture Overview
 
 ### Package Structure
+
 CoCalc is organized as a monorepo with key packages:
 
 - **frontend** - React/TypeScript frontend application using Redux-style stores and actions
@@ -62,25 +67,29 @@ CoCalc is organized as a monorepo with key packages:
 ### Key Architectural Patterns
 
 #### Frontend Architecture
+
 - **Redux-style State Management**: Uses custom stores and actions pattern (see `packages/frontend/app-framework/actions-and-stores.ts`)
 - **TypeScript React Components**: All frontend code is TypeScript with proper typing
 - **Modular Store System**: Each feature has its own store/actions (AccountStore, BillingStore, etc.)
 - **WebSocket Communication**: Real-time communication with backend via WebSocket messages
 
 #### Backend Architecture
+
 - **PostgreSQL Database**: Primary data store with sophisticated querying system
 - **WebSocket Messaging**: Real-time communication between frontend and backend
 - **Conat System**: Container orchestration for compute servers
 - **Event-Driven Architecture**: Extensive use of EventEmitter patterns
 - **Microservice-like Packages**: Each package handles specific functionality
 
 #### Communication Patterns
+
 - **WebSocket Messages**: Primary communication method (see `packages/comm/websocket/types.ts`)
 - **Database Queries**: Structured query system with typed interfaces
 - **Event Emitters**: Inter-service communication within backend
 - **REST-like APIs**: Some HTTP endpoints for specific operations
 
 ### Key Technologies
+
 - **TypeScript**: Primary language for all new code
 - **React**: Frontend framework
 - **PostgreSQL**: Database
@@ -91,40 +100,56 @@ CoCalc is organized as a monorepo with key packages:
 - **SASS**: CSS preprocessing
 
 ### Database Schema
+
 - Comprehensive schema in `packages/util/db-schema`
 - Query abstractions in `packages/database/postgres/`
 - Type-safe database operations with TypeScript interfaces
 
 ### Testing
+
 - **Jest**: Primary testing framework
 - **ts-jest**: TypeScript support for Jest
 - **jsdom**: Browser environment simulation for frontend tests
 - Test files use `.test.ts` or `.spec.ts` extensions
 - Each package has its own jest.config.js
 
 ### Import Patterns
+
 - Use absolute imports with `@cocalc/` prefix for cross-package imports
 - Example: `import { cmp } from "@cocalc/util/misc"`
 - Type imports: `import type { Foo } from "./bar"`
 - Destructure imports when possible
 
 ### Development Workflow
-1. Changes to TypeScript require compilation (`pnpm tsc` in relevant package)
+
+1. Changes to TypeScript require compilation (`pnpm build` in relevant package)
 2. Database must be running before starting hub
 3. Hub coordinates all services and should be restarted after changes
 4. Use `pnpm clean && pnpm build-dev` when switching branches or after major changes
 
 # Workflow
-- Be sure to typecheck when you're done making a series of code changes
+
+- Be sure to build when you're done making a series of code changes
 - Prefer running single tests, and not the whole test suite, for performance
 
 ## Git Workflow
 
+- Never modify a file when in the `master` or `main` branch
+- All changes happen through feature branches, which are pushed as pull requests to GitHub
+- When creating a new file, run `git add [filename]` to track the file.
 - Prefix git commits with the package and general area. e.g. 'frontend/latex: ...' if it concerns latex editor changes in the packages/frontend/... code.
 - When pushing a new branch to Github, track it upstream. e.g. `git push --set-upstream origin feature-foo` for branch "feature-foo".
 
-# important-instruction-reminders
+# Important Instruction Reminders
+
 - Do what has been asked; nothing more, nothing less.
 - NEVER create files unless they're absolutely necessary for achieving your goal.
 - ALWAYS prefer editing an existing file to creating a new one.
-- NEVER proactively create documentation files (*.md) or README files. Only create documentation files if explicitly requested by the User.
+- REFUSE to modify files when the git repository is on the `master` or `main` branch.
+- NEVER proactively create documentation files (`*.md`) or README files. Only create documentation files if explicitly requested by the User.
+
+# Ignore
+
+- Ignore files covered by `.gitignore`
+- Ignore everything in `node_modules` or `dist` directories
+- Ignore all files not tracked by Git, unless they are newly created files

src/packages/frontend/components/help-icon.tsx

@@ -9,9 +9,9 @@ Display a ? "help" icon, which -- when clicked -- shows a help tip
 
 import { Button, Popover } from "antd";
 import type { TooltipPlacement } from "antd/es/tooltip";
-import { CSSProperties } from "react";
+import { CSSProperties, useState } from "react";
 
-import { CSS, React, useState } from "@cocalc/frontend/app-framework";
+// ATTN: do not import @cocalc/app-framework or components, because this is also used in next!
 import { COLORS } from "@cocalc/util/theme";
 import { Icon } from "./icon";
 
@@ -34,7 +34,7 @@ export const HelpIcon: React.FC<Props> = ({
 }: Props) => {
   const [open, setOpen] = useState<boolean>(false);
 
-  const textStyle: CSS = {
+  const textStyle: CSSProperties = {
     color: COLORS.BS_BLUE_TEXT,
     cursor: "pointer",
     ...style,
@@ -68,8 +68,8 @@ export const HelpIcon: React.FC<Props> = ({
       onOpenChange={setOpen}
     >
       <span style={textStyle}>
+        {extra ? <>{extra} </> : undefined}
         <Icon style={textStyle} name="question-circle" />
-        {extra ? <> {extra}</> : undefined}
       </span>
     </Popover>
   );

src/packages/next/components/store/quota-config-presets.tsx

@@ -208,7 +208,7 @@ export const COURSE = {
       "Edit LaTeX, Markdown, R Documents, and use VS Code,",
       `${STANDARD_DISK} GB disk space is sufficient to store many files and small datasets.`,
     ],
-    note: <Paragraph type="secondary">TODO NOTE</Paragraph>,
+    note: <>Suitable for most courses.</>,
     details: (
       <>
         You can run a couple of Jupyter Notebooks in a project at once,
@@ -224,4 +224,30 @@ export const COURSE = {
     uptime: "short",
     member: true,
   },
-} as const satisfies { [key in "standard"]: PresetConfig };
+  advanced: {
+    icon: "rocket",
+    name: "Advanced",
+    descr: "provides higher quotas for more intensive course work",
+    expect: [
+      "Run more Jupyter Notebooks simultaneously,",
+      "Handle memory-intensive computations,",
+      "Longer idle timeout for extended work sessions,",
+      "Sufficient resources for advanced coursework.",
+    ],
+    note: <>For intense computations requiring more resources.</>,
+    details: (
+      <>
+        This configuration provides enhanced resources for more demanding
+        coursework. With 1 CPU, 8GB RAM, and a 2-hour idle timeout, students can
+        work on memory-intensive projects and longer computational tasks without
+        interruption. Ideal for advanced programming, data science, and
+        research-oriented courses.
+      </>
+    ),
+    cpu: 1,
+    ram: 8,
+    disk: 2 * STANDARD_DISK,
+    uptime: "medium",
+    member: true,
+  },
+} as const satisfies { [key in "standard" | "advanced"]: PresetConfig };