Strategy Site

The Strategy Site is the primary interface for creating and editing technology strategy content. It is designed for low-friction editing during meetings so that discussions are immediately captured as structured, actionable strategy.

URL: https://localhost:5001/strategy (development)

Logging In

Navigate to the Strategy Site URL. If you are not logged in, you are presented with a login form. Enter your username and password to access the site.

Development credentials

In development mode, use editor/editor for editing access or viewer/viewer for read-only access. See Quick Start for all seeded users.

Layout

After login, you land on the Principles view for a team. If you have visited before, the tool remembers your last selected team. Otherwise, you see the first team.

• Team banner — shows the current team name in the team’s color with a gradient background. This is your persistent context — everything below relates to this team.
• View tabs — to the right of the team name: Principles and Objectives. These are the two main views.
• Connection status — a colored dot indicator (green = connected, orange = connection issue)
• User badge — your role and username
• Export button — PowerPoint-style icon to download the team’s strategy
• Logout button

Team Selection

Click the team name in the banner. A dropdown appears showing all teams, each with a colored dot. Click a team to switch. The entire view reloads with that team’s data, and the banner color changes to the team’s color.

Your team selection is persisted across page reloads.

Views

Principles View

The Principles view displays the team’s guiding principles as cards in a responsive grid (3 columns on wide screens, responsive down to 1). Each principle card shows:

• Shield icon — visual marker for principle cards
• Title — supports *highlight* syntax (see below) for emphasizing key terms in the team color
• Description — longer text describing the principle
• Toolbar — appears on hover with edit and delete actions (editors and admins only)

Objectives View

The Objectives view shows the team’s measurable goals, organized under group headings. Ungrouped objectives appear under a “General” heading. Each objective card shows:

• Title and Description — inline editable fields
• Linked Principles — the principles this objective supports
• Initiatives — concrete work items with individual progress bars
• Total Progress — a progress bar at the bottom showing the average of all initiative progress

Inline Editing

All text fields use inline editing. As a Viewer, you can browse everything but cannot edit. As an Editor or Admin, you can click on fields to edit them.

Starting an edit

Click on any editable text (principle name, principle description, objective name, initiative name, group name, group description). The text transforms into an input field with a colored border matching the team color. The cursor is placed at the end of the existing text.

Saving

Click away from the field (blur) or press Enter to save. For multi-line fields (descriptions), Enter adds a new line — click away to save. A small spinner appears on the field while the save is in progress. After a moment, the spinner disappears and the field returns to its normal display with the confirmed server value.

Server confirmation

The value you see after the spinner disappears is the actual saved state from the server, not your local edit. This ensures you always see what was actually persisted.

Canceling

Press Escape to discard your changes and return to the original value. If you clear a required field (empty title/name) on an existing entity, the edit is canceled and the previous value is restored. If you clear a field on a newly created entity that has never been saved, the entity is removed entirely (creation is canceled).

Conflict handling

If another user edits the same field while you are editing it, the server detects the conflict when you save:

• The field shows an error banner with the current server value
• You can choose Retry (submit your value again) or Cancel (discard your change and accept the current server value)
• The error message shows what the current server value is so you can make an informed decision

This prevents silent data loss when multiple users edit simultaneously.

How conflicts are detected

Each field tracks a lastSeenSequence number. When you save, the server compares your sequence against the field’s current sequence. If they do not match, another change happened in between and your edit is rejected as a conflict.

Connection timeout

If the spinner persists for an unusually long time (around 30 seconds), the tool automatically checks the server for the current state and resolves the field. You are never left in a permanently “saving” state.

Highlight Syntax

Principle names (and objective names) support a highlighting convention for emphasizing domain terms. Wrap a word or phrase in single asterisks to display it in the team’s color with heavier font weight:

You type	It displays as
*API-First* Design	API-First Design (with “API-First” in team color)
Prefer *Cloud-Native* Solutions	Prefer Cloud-Native Solutions

• Doubled asterisks (**) are treated as an escaped single asterisk
• Unclosed asterisks render as-is with the raw asterisks visible — fix by adding the closing asterisk

Working with Principles

Creating a principle

1. Switch to the Principles tab
2. Click Add Principle — a placeholder card appears at the end of the grid with the name field in edit mode
3. Type a name for the principle
4. Press Enter or click away to save — the principle is created on the server with your name
5. Click the description field to add a description

Deferred creation

The principle is not saved to the server until you provide a name. If you press Escape or click away without typing a name, the placeholder is discarded with no server interaction.

Deleting a principle

Click the delete icon on the principle card toolbar. A confirmation dialog appears. Deleting a principle removes it from any objectives that reference it — the objectives themselves are not deleted.

Working with Objectives

Creating an objective

1. Switch to the Objectives tab
2. Click Add Objective — a placeholder card appears in the “General” (ungrouped) section with the name field in edit mode
3. Type a name for the objective
4. Press Enter or click away to save — the objective is created on the server with your name
5. Click the description field to add a description

Deferred creation

The objective is not saved to the server until you provide a name. If you press Escape or click away without typing a name, the placeholder is discarded with no server interaction.

Linking principles (Principle Selector)

Each objective card has a toolbar that appears on hover. Click the link/chain icon (“Add principle”) to open the principle selector popup:

The selector popup:

• Search box at the top — type to filter the list in real time
• “Create principle” option — always visible at the top, creates a new principle and assigns it
• Your team’s principles — listed first, showing only principles not already assigned to this objective
• Other teams’ principles — grouped by team name, each with a colored team tag

Same-team assignment: Click a principle from your team’s list. It is immediately assigned by reference — if someone later edits the principle’s name, the change is reflected everywhere.

Cross-team assignment: Click a principle from another team. The tool creates an independent copy in your team and assigns the copy. The copy starts with the same name and description but is a separate entity — edits to the original do not affect your copy, and vice versa. The new principle also appears in your team’s Principles view.

Create new: The “Create principle” button is disabled when the search box is empty. Type a name to enable it — the button label updates to show “(new) Create ‘typed text’”. Click the button to create a new principle with that name and assign it to the objective. The view switches to the Principles view where the new principle appears.

Removing a principle from an objective: In the objective card, hover over an assigned principle. Two small icons appear: a navigate arrow (jumps to the principle in the Principles view) and a minus icon (removes the association without deleting the principle itself).

Managing groups

Groups organize objectives visually in the Objectives view:

• Create a group using the “Add Group” button — a placeholder group appears with the name field in edit mode. Type a name and press Enter or click away to save. Press Escape or leave the name empty to discard.
• Assign an objective to a group by selecting the group from the objective’s group dropdown
• Unassign by clearing the group selection — the objective moves back to “General”
• Groups can have an optional name and description, both editable inline

Drag-and-drop reordering

Objectives, groups, principles, and initiatives all support drag-and-drop reordering:

What	How	Notes
Principles	Drag cards in the Principles view	Changes display order
Objectives	Drag cards within or between groups	Moving to a different group reassigns the objective
Groups	Drag group headers in the Objectives view	Reorders the group sections
Initiatives	Drag items within an objective card	Reorders the initiative list

Each card has a drag handle (three horizontal lines) that appears in the toolbar on hover. Grab the handle to start dragging. A visual indicator shows where the item will be placed. Drop to save — the reorder is persisted immediately and other users see the change in real time.

Concurrent reordering

If two users reorder at the same time, both reorders are applied sequentially. The final result may differ from what either user expected individually, but the outcome is always consistent for all users.

Working with Initiatives

Adding an initiative

1. Click Add Initiative on an objective card
2. The initiative appears with its name field in edit mode — start typing
3. Press Enter or click away to save
4. The initiative is created with 0% progress

Deferred creation

The initiative is not saved to the server until you provide a name. If you click away without typing a name, the initiative is discarded.

Editing progress

Click on an initiative’s progress bar to open the progress editor. Use the slider to set the completion percentage (0-100%). The objective’s total progress bar updates automatically (it shows the average of all initiative progress values).

Jira integration

Initiatives support an optional Jira key field. Enter a Jira issue key (e.g., PROJ-123) to associate the initiative with an external issue tracker.

History

Click the history icon on any card to view its event history. The history popup shows:

• All changes made to the entity, in chronological order
• Who made each change and when
• The ability to re-apply previous changes

PowerPoint Export

1. Select the team you want to export using the team switcher
2. Click the export button (PowerPoint-style icon) in the team banner — visible regardless of which view you are in
3. The tool generates a PowerPoint file and your browser downloads it automatically

What the export contains:

• Principles slides — principle cards laid out in a grid (up to 3x3 per slide), showing names with highlighted terms and descriptions
• Objectives slides — objective cards laid out in a grid (up to 3x2 per slide), showing names, associated principles, initiatives with progress, and total progress
• The slides use the team’s color for accents and highlighting, matching the on-screen appearance
• Content overflows onto additional slides as needed

Any user with Viewer access or above can generate an export.

Connection Status

The header shows a connection status indicator:

Indicator	Meaning
Green dot	Connected — real-time updates are active
Orange dot (pulsing)	Stale — no updates received recently, data may be outdated
Red dot	Disconnected — connection lost, changes from other users will not appear

The connection recovers automatically. When it reconnects, the view refreshes to show the latest data.

Keyboard Shortcuts

Key	Context	Action
Enter	Edit mode (single-line)	Save the field
Enter	Edit mode (multi-line)	Add a new line
Escape	Edit mode	Cancel editing, restore original value